Merge pull request #84 from NoRedInk/ink__fix-checkbox

Ink  fix checkbox

elm-package.json

@@ -12,11 +12,11 @@
         "Nri.Ui.BannerAlert.V1",
         "Nri.Ui.Button.V1",
         "Nri.Ui.Button.V2",
-        "Nri.Ui.Colors.V1",
-        "Nri.Ui.Colors.Extra",
         "Nri.Ui.Checkbox.V1",
         "Nri.Ui.Checkbox.V2",
         "Nri.Ui.Checkbox.V3",
+        "Nri.Ui.Colors.Extra",
+        "Nri.Ui.Colors.V1",
         "Nri.Ui.Divider.V1",
         "Nri.Ui.Dropdown.V1",
         "Nri.Ui.Effects.V1",
@@ -29,6 +29,7 @@
         "Nri.Ui.Outline.V1",
         "Nri.Ui.Page.V1",
         "Nri.Ui.Palette.V1",
+        "Nri.Ui.PremiumCheckbox.V1",
         "Nri.Ui.SegmentedControl.V1",
         "Nri.Ui.SegmentedControl.V2",
         "Nri.Ui.SegmentedControl.V3",

src/Nri/Ui/Checkbox/V3.elm

@@ -81,7 +81,7 @@ selectedToMaybe selected =
 -}
 view : Assets a -> Model msg -> Html.Html msg
 view assets model =
-    buildCheckbox assets [] model <|
+    buildCheckbox assets model <|
         Html.span [ Accessibility.Styled.Style.invisible ]
             [ Html.text model.label ]
 
@@ -90,20 +90,16 @@ view assets model =
 -}
 viewWithLabel : Assets a -> Model msg -> Html.Html msg
 viewWithLabel assets model =
-    buildCheckbox assets [] model <|
+    buildCheckbox assets model <|
         Html.span [] [ Html.text model.label ]
 
 
-buildCheckbox : Assets a -> List String -> Model msg -> Html.Html msg -> Html.Html msg
+buildCheckbox : Assets a -> Model msg -> Html.Html msg -> Html.Html msg
-buildCheckbox assets modifierClasses model labelContent =
+buildCheckbox assets model labelContent =
-    let
-        toClassList =
-            List.map (\a -> ( "checkbox-" ++ a, True )) >> Attributes.classList
-    in
     viewCheckbox model <|
         case model.theme of
             Square ->
-                { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ])
+                { containerClasses = toClassList [ "SquareClass" ]
                 , labelStyles =
                     squareLabelStyles model <|
                         case model.selected of
@@ -120,7 +116,7 @@ buildCheckbox assets modifierClasses model labelContent =
                 }
 
             Locked ->
-                { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
+                { containerClasses = toClassList [ "Locked" ]
                 , labelStyles = lockLabelStyles model assets.checkboxLockOnInside_svg
                 , labelClasses = labelClass model.selected
                 , labelContent = labelContent
@@ -212,22 +208,18 @@ labelClass : IsSelected -> Html.Styled.Attribute msg
 labelClass isSelected =
     case isSelected of
         Selected ->
-            Attributes.classList
+            toClassList [ "Label", "Checked" ]
-                [ ( "checkbox-Label", True )
-                , ( "checkbox-Checked", True )
-                ]
 
         NotSelected ->
-            Attributes.classList
+            toClassList [ "Label", "Unchecked" ]
-                [ ( "checkbox-Label", True )
-                , ( "checkbox-Unchecked", True )
-                ]
 
         PartiallySelected ->
-            Attributes.classList
+            toClassList [ "Label", "Indeterminate" ]
-                [ ( "checkbox-Label", True )
+
-                , ( "checkbox-Indeterminate", True )
+
-                ]
+toClassList : List String -> Html.Styled.Attribute msg
+toClassList =
+    List.map (\a -> ( "checkbox-V3__" ++ a, True )) >> Attributes.classList
 
 
 viewCheckbox :

src/Nri/Ui/PremiumCheckbox/V1.elm

@@ -78,7 +78,7 @@ premium assets config =
                 || (not isLocked && config.contentPremiumLevel /= Free)
           then
             Html.div
-                [ Attributes.class "checkbox-PremiumClass"
+                [ Attributes.class "premium-checkbox-V1__PremiumClass"
                 , css
                     [ property "content" "''"
                     , display inlineBlock

tests/Spec/Nri/Ui/PremiumCheckbox/V1.elm

@@ -52,7 +52,7 @@ spec =
                         , contentPremiumLevel = Free
                         , showFlagWhenLocked = True
                         }
-                        |> Query.has [ Selector.class "checkbox-Checked" ]
+                        |> Query.has [ Selector.class "checkbox-V3__Checked" ]
             , test "appears unselected when NotSelected is passed in" <|
                 \() ->
                     premiumView
@@ -63,7 +63,7 @@ spec =
                         , contentPremiumLevel = Free
                         , showFlagWhenLocked = True
                         }
-                        |> Query.has [ Selector.class "checkbox-Unchecked" ]
+                        |> Query.has [ Selector.class "checkbox-V3__Unchecked" ]
             , test "appears partially selected when PartiallySelected is passed in" <|
                 \() ->
                     premiumView
@@ -74,7 +74,7 @@ spec =
                         , contentPremiumLevel = Free
                         , showFlagWhenLocked = True
                         }
-                        |> Query.has [ Selector.class "checkbox-Indeterminate" ]
+                        |> Query.has [ Selector.class "checkbox-V3__Indeterminate" ]
             , test "appears locked when teacherPremiumLevel < contentPremiumLevel" <|
                 \() ->
                     premiumView
@@ -85,7 +85,7 @@ spec =
                         , contentPremiumLevel = Premium
                         , showFlagWhenLocked = True
                         }
-                        |> Query.has [ Selector.class "checkbox-LockOnInsideClass" ]
+                        |> Query.has [ Selector.class "checkbox-V3__Locked" ]
             , test "appears unlocked when teacherPremiumLevel >= contentPremiumLevel" <|
                 \() ->
                     premiumView
@@ -96,7 +96,7 @@ spec =
                         , contentPremiumLevel = Premium
                         , showFlagWhenLocked = True
                         }
-                        |> Query.hasNot [ Selector.class "checkbox-LockOnInsideClass" ]
+                        |> Query.hasNot [ Selector.class "checkbox-V3__Locked" ]
             , test "appears with P flag when teacherPremiumLevel >= contentPremiumLevel" <|
                 \() ->
                     premiumView
@@ -107,7 +107,7 @@ spec =
                         , contentPremiumLevel = Premium
                         , showFlagWhenLocked = False
                         }
-                        |> Query.has [ Selector.class "checkbox-PremiumClass" ]
+                        |> Query.has [ Selector.class "premium-checkbox-V1__PremiumClass" ]
             , test "does not appear with P flag when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = False" <|
                 \() ->
                     premiumView
@@ -118,7 +118,7 @@ spec =
                         , contentPremiumLevel = Premium
                         , showFlagWhenLocked = False
                         }
-                        |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ]
+                        |> Query.hasNot [ Selector.class "premium-checkbox-V1__PremiumClass" ]
             , test "appears with P flag for Premium content when teacherPremiumLevel < contentPremiumLevel and showFlagWhenLocked = True" <|
                 \() ->
                     premiumView
@@ -129,7 +129,7 @@ spec =
                         , contentPremiumLevel = Premium
                         , showFlagWhenLocked = True
                         }
-                        |> Query.has [ Selector.class "checkbox-PremiumClass" ]
+                        |> Query.has [ Selector.class "premium-checkbox-V1__PremiumClass" ]
             , test "never shows P flag for nonPremium content" <|
                 \() ->
                     premiumView
@@ -140,7 +140,7 @@ spec =
                         , contentPremiumLevel = Free
                         , showFlagWhenLocked = True
                         }
-                        |> Query.hasNot [ Selector.class "checkbox-PremiumClass" ]
+                        |> Query.hasNot [ Selector.class "premium-checkbox-V1__PremiumClass" ]
             , test "is not disabled when disabled = False and the checkbox is unlocked" <|
                 \() ->
                     premiumView