From 0c41188752a4143c077e919b79b2071d1be3d836 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Tue, 22 Mar 2022 09:11:43 -0700
Subject: [PATCH 1/5] Adds generated code to disclosure

---
 .../Examples/DisclosureIndicator.elm          | 69 +++++++++++++++----
 1 file changed, 56 insertions(+), 13 deletions(-)

diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm
index 9f8273a3..55aeece1 100644
--- a/styleguide-app/Examples/DisclosureIndicator.elm
+++ b/styleguide-app/Examples/DisclosureIndicator.elm
@@ -7,7 +7,9 @@ module Examples.DisclosureIndicator exposing (Msg, State, example)
 -}
 
 import Category exposing (Category(..))
-import Css
+import Css exposing (Style)
+import Debug.Control as Control exposing (Control)
+import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (css)
@@ -16,13 +18,6 @@ import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
 import Nri.Ui.Text.V6 as Text
 
 
-{-| -}
-type alias State =
-    { largeState : Bool
-    , mediumState : Bool
-    }
-
-
 {-| -}
 example : Example State Msg
 example =
@@ -42,6 +37,28 @@ example =
     , view =
         \state ->
             [ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
+            , ControlView.view
+                { update = UpdateSettings
+                , settings = state.settings
+                , toExampleCode =
+                    \settings ->
+                        let
+                            toCode viewName =
+                                "DisclosureIndicator."
+                                    ++ viewName
+                                    ++ " "
+                                    ++ Tuple.first settings.css
+                                    ++ " "
+                                    ++ Tuple.first settings.isOpen
+                        in
+                        [ { sectionName = "Large"
+                          , code = toCode "large"
+                          }
+                        , { sectionName = "medium"
+                          , code = toCode "medium"
+                          }
+                        ]
+                }
             , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ]
                 [ Button.button "Toggle large indicator"
                     [ Button.onClick ToggleLarge, Button.small, Button.secondary ]
@@ -61,16 +78,39 @@ example =
 
 
 {-| -}
-init : State
-init =
-    { largeState = False
-    , mediumState = False
+type alias State =
+    { settings : Control Settings
+    , largeState : Bool
+    , mediumState : Bool
     }
 
 
+{-| -}
+init : State
+init =
+    { settings = initSettings
+    , largeState = False
+    , mediumState = False
+    }
+
+
+type alias Settings =
+    { css : ( String, List Style )
+    , isOpen : ( String, Bool )
+    }
+
+
+initSettings : Control Settings
+initSettings =
+    Control.record Settings
+        |> Control.field "css" (Control.value ( "[]", [] ))
+        |> Control.field "isOpen" (Control.value ( "False", False ))
+
+
 {-| -}
 type Msg
-    = ToggleLarge
+    = UpdateSettings (Control Settings)
+    | ToggleLarge
     | ToggleMedium
 
 
@@ -78,6 +118,9 @@ type Msg
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
+        UpdateSettings settings ->
+            ( { state | settings = settings }, Cmd.none )
+
         ToggleLarge ->
             ( { state | largeState = not state.largeState }, Cmd.none )
 

From 615ef0cfc472bb8e10aa4c2da209d4a68a13b25c Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Tue, 22 Mar 2022 09:15:40 -0700
Subject: [PATCH 2/5] Use Control for state, rather than custom modeling

---
 styleguide-app/Debug/Control/Extra.elm        | 18 ++++++++++
 .../Examples/DisclosureIndicator.elm          | 33 +++++++------------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/styleguide-app/Debug/Control/Extra.elm b/styleguide-app/Debug/Control/Extra.elm
index 9600b409..c6bfd846 100644
--- a/styleguide-app/Debug/Control/Extra.elm
+++ b/styleguide-app/Debug/Control/Extra.elm
@@ -1,12 +1,14 @@
 module Debug.Control.Extra exposing
     ( float, int
     , list, listItem, optionalListItem, optionalListItemDefaultChecked, optionalBoolListItem
+    , bool
     )
 
 {-|
 
 @docs float, int
 @docs list, listItem, optionalListItem, optionalListItemDefaultChecked, optionalBoolListItem
+@docs bool
 
 -}
 
@@ -86,3 +88,19 @@ optionalBoolListItem name f accumulator =
             (Control.bool False)
         )
         (Control.map (++) accumulator)
+
+
+{-| -}
+bool : Bool -> Control ( String, Bool )
+bool default =
+    Control.map
+        (\val ->
+            ( if val then
+                "True"
+
+              else
+                "False"
+            , val
+            )
+        )
+        (Control.bool default)
diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm
index 55aeece1..c335d84f 100644
--- a/styleguide-app/Examples/DisclosureIndicator.elm
+++ b/styleguide-app/Examples/DisclosureIndicator.elm
@@ -9,6 +9,7 @@ module Examples.DisclosureIndicator exposing (Msg, State, example)
 import Category exposing (Category(..))
 import Css exposing (Style)
 import Debug.Control as Control exposing (Control)
+import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled as Html
@@ -36,6 +37,10 @@ example =
         ]
     , view =
         \state ->
+            let
+                attributes =
+                    Control.currentValue state.settings
+            in
             [ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
             , ControlView.view
                 { update = UpdateSettings
@@ -59,18 +64,16 @@ example =
                           }
                         ]
                 }
-            , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ]
-                [ Button.button "Toggle large indicator"
-                    [ Button.onClick ToggleLarge, Button.small, Button.secondary ]
-                , Button.button "Toggle medium indicator"
-                    [ Button.onClick ToggleMedium, Button.small, Button.secondary ]
-                ]
             , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
-                [ DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState
+                [ DisclosureIndicator.large
+                    [ Css.marginRight (Css.px 10) ]
+                    (Tuple.second attributes.isOpen)
                 , Html.text "I'm a 17px caret icon."
                 ]
             , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
-                [ DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState
+                [ DisclosureIndicator.medium
+                    [ Css.paddingRight (Css.px 8) ]
+                    (Tuple.second attributes.isOpen)
                 , Html.text "I'm a 15px caret icon."
                 ]
             ]
@@ -80,8 +83,6 @@ example =
 {-| -}
 type alias State =
     { settings : Control Settings
-    , largeState : Bool
-    , mediumState : Bool
     }
 
 
@@ -89,8 +90,6 @@ type alias State =
 init : State
 init =
     { settings = initSettings
-    , largeState = False
-    , mediumState = False
     }
 
 
@@ -104,14 +103,12 @@ initSettings : Control Settings
 initSettings =
     Control.record Settings
         |> Control.field "css" (Control.value ( "[]", [] ))
-        |> Control.field "isOpen" (Control.value ( "False", False ))
+        |> Control.field "isOpen" (ControlExtra.bool False)
 
 
 {-| -}
 type Msg
     = UpdateSettings (Control Settings)
-    | ToggleLarge
-    | ToggleMedium
 
 
 {-| -}
@@ -120,9 +117,3 @@ update msg state =
     case msg of
         UpdateSettings settings ->
             ( { state | settings = settings }, Cmd.none )
-
-        ToggleLarge ->
-            ( { state | largeState = not state.largeState }, Cmd.none )
-
-        ToggleMedium ->
-            ( { state | mediumState = not state.mediumState }, Cmd.none )

From 2e6b1e207f8f571cf63525a4e7a8664f51140237 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Tue, 22 Mar 2022 09:20:49 -0700
Subject: [PATCH 3/5] Support css styles

---
 styleguide-app/Examples/DisclosureIndicator.elm | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm
index c335d84f..3a978bed 100644
--- a/styleguide-app/Examples/DisclosureIndicator.elm
+++ b/styleguide-app/Examples/DisclosureIndicator.elm
@@ -66,13 +66,13 @@ example =
                 }
             , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
                 [ DisclosureIndicator.large
-                    [ Css.marginRight (Css.px 10) ]
+                    (Tuple.second attributes.css)
                     (Tuple.second attributes.isOpen)
                 , Html.text "I'm a 17px caret icon."
                 ]
             , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
                 [ DisclosureIndicator.medium
-                    [ Css.paddingRight (Css.px 8) ]
+                    (Tuple.second attributes.css)
                     (Tuple.second attributes.isOpen)
                 , Html.text "I'm a 15px caret icon."
                 ]
@@ -102,7 +102,17 @@ type alias Settings =
 initSettings : Control Settings
 initSettings =
     Control.record Settings
-        |> Control.field "css" (Control.value ( "[]", [] ))
+        |> Control.field "css"
+            (Control.choice
+                [ ( "[ Css.marginRight (Css.px 8) ]"
+                  , Control.value
+                        ( "[ Css.marginRight (Css.px 8) ]"
+                        , [ Css.marginRight (Css.px 8) ]
+                        )
+                  )
+                , ( "[]", Control.value ( "[]", [] ) )
+                ]
+            )
         |> Control.field "isOpen" (ControlExtra.bool False)
 
 

From b21a30637ac4dde906dae96a6047ff79804db65f Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Tue, 22 Mar 2022 09:22:54 -0700
Subject: [PATCH 4/5] Make the names of the helpers a touch more clear

---
 styleguide-app/Examples/DisclosureIndicator.elm | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm
index 3a978bed..d82d3f95 100644
--- a/styleguide-app/Examples/DisclosureIndicator.elm
+++ b/styleguide-app/Examples/DisclosureIndicator.elm
@@ -68,13 +68,13 @@ example =
                 [ DisclosureIndicator.large
                     (Tuple.second attributes.css)
                     (Tuple.second attributes.isOpen)
-                , Html.text "I'm a 17px caret icon."
+                , Html.text "large is a 17px caret icon."
                 ]
             , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
                 [ DisclosureIndicator.medium
                     (Tuple.second attributes.css)
                     (Tuple.second attributes.isOpen)
-                , Html.text "I'm a 15px caret icon."
+                , Html.text "medium is a 15px caret icon."
                 ]
             ]
     }

From 360ccc23ed5e336d13ecbebdc24dd9216a265ecc Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Tue, 22 Mar 2022 17:03:28 -0700
Subject: [PATCH 5/5] Elm review

---
 styleguide-app/Examples/DisclosureIndicator.elm | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm
index d82d3f95..798722ec 100644
--- a/styleguide-app/Examples/DisclosureIndicator.elm
+++ b/styleguide-app/Examples/DisclosureIndicator.elm
@@ -14,7 +14,6 @@ import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.Button.V10 as Button
 import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
 import Nri.Ui.Text.V6 as Text