🎨 pull out the other label styles helpers

src/Nri/Ui/Checkbox/V3.elm

@@ -60,6 +60,19 @@ type IsSelected
     | PartiallySelected
 
 
+{-| -}
+type Theme
+    = Square ColorTheme
+    | LockOnInside
+    | Premium
+
+
+{-| -}
+type ColorTheme
+    = Default
+    | Gray
+
+
 selectedToMaybe : IsSelected -> Maybe Bool
 selectedToMaybe selected =
     case selected of
@@ -100,7 +113,27 @@ buildCheckbox assets modifierClasses model labelContent =
         case model.theme of
             Square colorTheme ->
                 { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ])
-                , labelStyles =
+                , labelStyles = squareLabelStyles assets model colorTheme
+                , labelClasses = labelClass model.selected
+                , labelContent = labelContent
+                }
+
+            LockOnInside ->
+                { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
+                , labelStyles = lockLabelStyles assets.checkboxLockOnInside_svg model
+                , labelClasses = labelClass model.selected
+                , labelContent = labelContent
+                }
+
+            Premium ->
+                { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ])
+                , labelStyles = premiumLabelStyles assets.checkboxLockOnInside_svg model
+                , labelClasses = labelClass model.selected
+                , labelContent = labelContent
+                }
+
+
+squareLabelStyles assets model colorTheme =
     css
         [ backgroundRepeat noRepeat
         , color Colors.gray20
@@ -133,41 +166,77 @@ buildCheckbox assets modifierClasses model labelContent =
                 Default ->
                     []
         ]
-                , labelClasses = labelClass model.selected
-                , labelContent = labelContent
-                }
 
-            LockOnInside ->
+
-                { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
+lockLabelStyles image model =
-                , labelStyles =
+    let
-                    css
+        baseStyles =
-                        [ backgroundImage assets.checkboxLockOnInside_svg
+            [ -- Positioning
-                        , backgroundRepeat noRepeat
+              display inlineBlock
-                        , backgroundSize (px 24)
-                        , color Colors.gray20
-                        , if model.disabled then
-                            cursor auto
-                          else
-                            cursor pointer
-                        , Fonts.baseFont
-                        , fontSize (px 16)
-                        , outline none
             , padding2 (px 13) zero
             , paddingLeft (px 35)
-                        , property "background-position" "left center"
             , verticalAlign middle
-                        , display inlineBlock
-                        ]
-                , labelClasses = labelClass model.selected
-                , labelContent = labelContent
-                }
 
-            Premium ->
+            -- Text
-                { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ])
+            , color Colors.gray20
-                , labelStyles = premiumLabelStyles assets.checkboxLockOnInside_svg model
+            , Fonts.baseFont
-                , labelClasses = labelClass model.selected
+            , fontSize (px 16)
-                , labelContent = labelContent
+
-                }
+            -- Focus & Hover
+            , outline none
+
+            -- Icon
+            , backgroundImage image
+            , backgroundRepeat noRepeat
+            , backgroundSize (px 24)
+            , property "background-position" "left center"
+            ]
+    in
+    css
+        (if model.disabled then
+            [ cursor auto ] ++ baseStyles
+         else
+            [ cursor pointer ] ++ baseStyles
+        )
+
+
+premiumLabelStyles :
+    Asset
+    -> { a | disabled : Bool }
+    -> Html.Styled.Attribute msg
+premiumLabelStyles image model =
+    let
+        baseStyles =
+            [ -- Positioning
+              alignItems center
+            , displayFlex
+
+            -- Focus & Hover
+            , cursor pointer
+            , outline none
+
+            -- Icon
+            , icon
+            ]
+
+        icon =
+            after
+                [ property "content" "''"
+                , display inlineBlock
+                , width (px 26)
+                , height (px 24)
+                , marginLeft (px 8)
+                , backgroundImage image
+                , backgroundRepeat noRepeat
+                , backgroundPosition Css.center
+                ]
+    in
+    css
+        (if model.disabled then
+            opacity (num 0.4) :: baseStyles
+         else
+            baseStyles
+        )
 
 
 labelClass : IsSelected -> Html.Styled.Attribute msg
@@ -258,58 +327,6 @@ viewLabel model content class theme =
         [ content ]
 
 
-premiumLabelStyles :
-    Asset
-    -> { a | disabled : Bool }
-    -> Html.Styled.Attribute msg
-premiumLabelStyles image model =
-    let
-        baseStyles =
-            [ -- Positioning
-              alignItems center
-            , displayFlex
-
-            -- Focus & Hover
-            , cursor pointer
-            , outline none
-
-            -- Icon
-            , icon
-            ]
-
-        icon =
-            after
-                [ property "content" "''"
-                , display inlineBlock
-                , width (px 26)
-                , height (px 24)
-                , marginLeft (px 8)
-                , backgroundImage image
-                , backgroundRepeat noRepeat
-                , backgroundPosition Css.center
-                ]
-    in
-    css
-        (if model.disabled then
-            opacity (num 0.4) :: baseStyles
-         else
-            baseStyles
-        )
-
-
-{-| -}
-type Theme
-    = Square ColorTheme
-    | LockOnInside
-    | Premium
-
-
-{-| -}
-type ColorTheme
-    = Default
-    | Gray
-
-
 {-| The assets used in this module.
 -}
 type alias Assets r =