Merge pull request #81 from NoRedInk/ink__checkbox-opacity

Ink  checkbox opacity

src/Nri/Ui/Checkbox/V3.elm

@@ -61,7 +61,7 @@ type IsSelected
 {-| -}
 type Theme
     = Square
-    | LockOnInside
+    | Locked
 
 
 selectedToMaybe : IsSelected -> Maybe Bool
@@ -119,7 +119,7 @@ buildCheckbox assets modifierClasses model labelContent =
                 , labelContent = labelContent
                 }
 
-            LockOnInside ->
+            Locked ->
                 { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
                 , labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg
                 , labelClasses = labelClass model.selected
@@ -138,10 +138,12 @@ squareLabelStyles model image =
             ]
     in
     css
-        (if model.disabled then
-            [ cursor auto, opacity (num 0.4) ] ++ baseStyles
+        (baseStyles
+            ++ (if model.disabled then
+                    [ cursor auto, checkboxImageSelector [ opacity (num 0.4) ] ]
                 else
-            [ cursor pointer ] ++ baseStyles
+                    [ cursor pointer ]
+               )
         )
 
 
@@ -156,10 +158,14 @@ lockLabelStyles model image =
             ]
     in
     css
-        (if model.disabled then
-            [ cursor auto, opacity (num 0.4) ] ++ baseStyles
+        (baseStyles
+            ++ (if model.disabled then
+                    [ cursor auto
+                    , checkboxImageSelector [ opacity (num 0.4) ]
+                    ]
                 else
-            [ cursor pointer ] ++ baseStyles
+                    [ cursor pointer ]
+               )
         )
 
 
@@ -168,7 +174,6 @@ positioning =
     batch
         [ display inlineBlock
         , padding4 (px 13) zero (px 13) (px 35)
-        , verticalAlign middle
         ]
 
 
@@ -183,11 +188,24 @@ textStyle =
 addIcon : Asset -> Style
 addIcon icon =
     batch
+        [ position relative
+        , checkboxImageSelector
             [ backgroundImage icon
             , backgroundRepeat noRepeat
             , backgroundSize (px 24)
-        , property "background-position" "left center"
+            , property "content" "''"
+            , position absolute
+            , left zero
+            , top (px 10)
+            , width (px 24)
+            , height (px 24)
             ]
+        ]
+
+
+checkboxImageSelector : List Style -> Style
+checkboxImageSelector =
+    before
 
 
 labelClass : IsSelected -> Html.Styled.Attribute msg

src/Nri/Ui/PremiumCheckbox/V1.elm

@@ -68,7 +68,7 @@ premium assets config =
             , disabled = config.disabled
             , theme =
                 if isLocked then
-                    Checkbox.LockOnInside
+                    Checkbox.Locked
                 else
                     Checkbox.Square
             , noOpMsg = config.noOpMsg

styleguide-app/Examples/Checkbox.elm

@@ -132,11 +132,11 @@ viewLockedOnInsideCheckbox id state =
     Checkbox.viewWithLabel
         assets
         { identifier = id
-        , label = "I'm a locked Checkbox on the inside"
+        , label = "I'm a locked Checkbox"
         , setterMsg = ToggleCheck id
         , selected = Checkbox.NotSelected
         , disabled = True
-        , theme = Checkbox.LockOnInside
+        , theme = Checkbox.Locked
         , noOpMsg = NoOp
         }