Begin adding checkboxes

styleguide-app/Examples/IconExamples.elm

@@ -1,15 +1,29 @@
-module Examples.IconExamples exposing (preview, view, viewWithCustomStyles)
+module Examples.IconExamples exposing
+    ( preview
+    , viewSettings
+    , view, viewWithCustomStyles
+    )
+
+{-|
+
+@docs preview
+@docs viewSettings
+@docs view, viewWithCustomStyles
+
+-}
 
 import Css
 import Css.Global
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
+import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Text.V6 as Text
 
 
+{-| -}
 preview : List Svg.Svg -> List (Html msg)
 preview icons =
     [ Html.div
@@ -27,6 +41,19 @@ preview icons =
     ]
 
 
+{-| -}
+viewSettings : (Bool -> msg) -> Bool -> Html msg
+viewSettings toggle showIconName =
+    Checkbox.viewWithLabel
+        { identifier = "show-icon-name-checkbox"
+        , label = "Show names"
+        , setterMsg = toggle
+        , selected = Checkbox.selectedFromBool showIconName
+        , disabled = False
+        , theme = Checkbox.Square
+        }
+
+
 {-| -}
 view : Bool -> String -> List ( String, Svg.Svg ) -> Html msg
 view showIconName headerText icons =

styleguide-app/Examples/UiIcon.elm

@@ -12,16 +12,6 @@ import Examples.IconExamples as IconExamples
 import Nri.Ui.UiIcon.V1 as UiIcon
 
 
-{-| -}
-type alias State =
-    { showIconName : Bool }
-
-
-{-| -}
-type alias Msg =
-    ()
-
-
 {-| -}
 example : Example State Msg
 example =
@@ -30,7 +20,7 @@ example =
     , categories = List.singleton Icons
     , keyboardSupport = []
     , state = { showIconName = False }
-    , update = \_ state -> ( state, Cmd.none )
+    , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
         IconExamples.preview
@@ -53,7 +43,8 @@ example =
                 viewExampleSection =
                     IconExamples.view showIconName
             in
-            [ viewExampleSection "Interface"
+            [ IconExamples.viewSettings UpdateSettings showIconName
+            , viewExampleSection "Interface"
                 [ ( "seeMore", UiIcon.seeMore )
                 , ( "openClose", UiIcon.openClose )
                 , ( "download", UiIcon.download )
@@ -185,3 +176,22 @@ example =
                 ]
             ]
     }
+
+
+{-| -}
+type alias State =
+    { showIconName : Bool }
+
+
+{-| -}
+type Msg
+    = UpdateSettings Bool
+
+
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        UpdateSettings showIconName ->
+            ( { state | showIconName = showIconName }
+            , Cmd.none
+            )