add visibility, opacity, z-index

CHANGELOG.md

@@ -12,6 +12,9 @@ Added new props:
 - list-style-position
 - list-style-type
 - vertical-align
+- z-index
+- visibility
+- opacity
 
 ### v0.0.5
 

props/visibility.go

@@ -0,0 +1,13 @@
+package props
+
+type Visibility string
+
+const (
+	VisibilityVisible  Visibility = "visible"
+	VisibilityHidden   Visibility = "hidden"
+	VisibilityCollapse Visibility = "collapse"
+)
+
+func (v Visibility) String() string {
+	return string(v)
+}

style.go

@@ -62,6 +62,7 @@ type (
 		MarginTop               props.Unit               `css:"margin-top"`
 		MaxWidth                props.Unit               `css:"max-width"`
 		MinWidth                props.Unit               `css:"min-width"`
+		Opacity                 props.Unit               `css:"opacity"`
 		Overflow                props.Overflow           `css:"overflow"`
 		OverflowX               props.Overflow           `css:"overflow-x"`
 		OverflowY               props.Overflow           `css:"overflow-y"`
@@ -80,6 +81,8 @@ type (
 		VerticalAlign           props.VerticalAlign      `css:"vertical-align"`
 		WhiteSpace              props.WhiteSpace         `css:"white-space"`
 		Width                   props.Unit               `css:"width"`
+		Visibility              props.Visibility         `css:"visibility"`
+		ZIndex                  props.Unit               `css:"z-index"`
 	}
 	// CustomProp represents an additional CSS property that is not covered by the Props struct.
 	CustomProp struct {

style_test.go

@@ -955,6 +955,21 @@ func TestStyle_MinWidth(t *testing.T) {
 	}
 }
 
+func TestStyle_Opacity(t *testing.T) {
+	testCases := map[props.Unit]string{
+		props.UnitRaw(0):         "0",
+		props.UnitRaw(0.33):      "0.33",
+		props.UnitPercent(90):    "90.00%",
+		props.UnitRaw("initial"): "initial",
+	}
+
+	for prop, expected := range testCases {
+		st := &Style{Selector: ".test", Props: Props{Opacity: prop}}
+		css := fmt.Sprintf(".test{opacity:%s;}", expected)
+		runTest(t, st, css)
+	}
+}
+
 func TestStyle_Overflow(t *testing.T) {
 	testCases := map[props.Overflow]string{
 		props.OverflowVisible:     "visible",
@@ -1238,3 +1253,32 @@ func TestStyle_Width(t *testing.T) {
 		runTest(t, st, css)
 	}
 }
+
+func TestStyle_Visibility(t *testing.T) {
+	testCases := map[props.Visibility]string{
+		props.VisibilityVisible:     "visible",
+		props.VisibilityHidden:      "hidden",
+		props.VisibilityCollapse:    "collapse",
+		props.Visibility("initial"): "initial",
+	}
+
+	for prop, expected := range testCases {
+		st := &Style{Selector: ".test", Props: Props{Visibility: prop}}
+		css := fmt.Sprintf(".test{visibility:%s;}", expected)
+		runTest(t, st, css)
+	}
+}
+
+func TestStyle_ZIndex(t *testing.T) {
+	testCases := map[props.Unit]string{
+		props.UnitRaw(1):  "1",
+		props.UnitRaw(10): "10",
+		props.UnitAuto():  "auto",
+	}
+
+	for prop, expected := range testCases {
+		st := &Style{Selector: ".test", Props: Props{ZIndex: prop}}
+		css := fmt.Sprintf(".test{z-index:%s;}", expected)
+		runTest(t, st, css)
+	}
+}