From c7ff0aba906ba85343dab99a810fe41d11085dd0 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 21 Mar 2022 13:32:55 -0700
Subject: [PATCH] Begin adding checkboxes

---
 styleguide-app/Examples/IconExamples.elm | 29 +++++++++++++++++++-
 styleguide-app/Examples/UiIcon.elm       | 34 +++++++++++++++---------
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/styleguide-app/Examples/IconExamples.elm b/styleguide-app/Examples/IconExamples.elm
index 8b2541e4..047e9144 100644
--- a/styleguide-app/Examples/IconExamples.elm
+++ b/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 =
diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm
index 6caf9ed2..301d4ea4 100644
--- a/styleguide-app/Examples/UiIcon.elm
+++ b/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
+            )