Make a compilable code example for Accordion

styleguide-app/Debug/Control/View.elm

@@ -19,6 +19,7 @@ view :
     , version : Int
     , update : Control a -> msg
     , settings : Control a
+    , mainType : String
     , toExampleCode : a -> List { sectionName : String, code : String }
     }
     -> Html msg
@@ -46,7 +47,7 @@ view config =
 
 viewExampleCode :
     (EllieLink.SectionExample -> Html msg)
-    -> { component | name : String, version : Int }
+    -> { component | name : String, version : Int, mainType : String }
     -> List { sectionName : String, code : String }
     -> Html msg
 viewExampleCode ellieLink component values =
@@ -68,6 +69,7 @@ viewExampleCode ellieLink component values =
                             { fullModuleName = Example.fullName component
                             , name = component.name
                             , sectionName = example.sectionName
+                            , mainType = component.mainType
                             , code = example.code
                             }
                         , code

styleguide-app/EllieLink.elm

@@ -16,6 +16,7 @@ type alias SectionExample =
     { name : String
     , fullModuleName : String
     , sectionName : String
+    , mainType : String
     , code : String
     }
 
@@ -76,12 +77,13 @@ generateElmExampleModule config example =
     , "import Html.Styled exposing (..)"
     , "import Nri.Ui.Colors.V1 as Colors"
     , "import Nri.Ui.UiIcon.V1 as UiIcon"
+    , "import Nri.Ui.Svg.V1 as Svg"
     , "import " ++ example.fullModuleName ++ " as " ++ example.name
     , ""
     , ""
     ]
         ++ maybeErrorMessages
-        ++ [ "main : RootHtml.Html msg"
+        ++ [ "main : " ++ example.mainType
            , "main ="
            , "    " ++ example.code
            , "    |> toUnstyled"

styleguide-app/Examples/Accordion.elm

@@ -13,6 +13,7 @@ module Examples.Accordion exposing
 import Accessibility.Styled as Html exposing (Html)
 import Browser.Dom as Dom
 import Category exposing (Category(..))
+import CommonControls
 import Css exposing (..)
 import Css.Global
 import Debug.Control as Control exposing (Control)
@@ -93,13 +94,58 @@ defaultCaret =
 {-| -}
 view : EllieLink.Config -> State -> List (Html Msg)
 view ellieLinkConfig model =
+    let
+        settings_ =
+            Control.currentValue model.settings
+    in
     [ ControlView.view
         { ellieLinkConfig = ellieLinkConfig
         , name = moduleName
         , version = version
         , update = UpdateControls
         , settings = model.settings
-        , toExampleCode = \settings -> []
+        , mainType = "RootHtml.Html String"
+        , toExampleCode =
+            \settings ->
+                [ { sectionName = "Basic example"
+                  , code =
+                        String.join "\n"
+                            [ "Accordion.view"
+                            , "    { entries ="
+                            , "        [ Accordion.AccordionEntry"
+                            , "            { caret = " ++ Tuple.first settings.icon
+                            , "            , content = \\_ -> text \"TODO\""
+                            , "            , entryClass = \"customizable-example\""
+                            , "            , headerContent = text \"TODO\""
+                            , "            , headerId = \"customizable-example-header\""
+                            , "            , headerLevel = Accordion.H4"
+                            , "            , isExpanded = True"
+                            , "            , toggle = Nothing"
+                            , "            }"
+                            , "            []"
+                            , "        ]"
+                            , "    , -- When using Accordion, be sure to wire up Focus management correctly!"
+                            , "      focus = identity"
+                            , "    }"
+                            ]
+                  }
+                ]
+        }
+    , Accordion.view
+        { entries =
+            [ AccordionEntry
+                { caret = Tuple.second settings_.icon
+                , content = \_ -> Html.text "TODO"
+                , entryClass = "customizable-example"
+                , headerContent = Html.text "TODO"
+                , headerId = "customizable-example-header"
+                , headerLevel = Accordion.H4
+                , isExpanded = True
+                , toggle = Nothing
+                }
+                []
+            ]
+        , focus = Focus
         }
     , Accordion.view
         { entries =
@@ -286,12 +332,25 @@ type alias State =
 
 
 type alias Settings =
-    {}
+    { icon : ( String, Bool -> Html Msg )
+    }
 
 
 initSettings : Control Settings
 initSettings =
     Control.record Settings
+        |> Control.field "icon" controlIcon
+
+
+controlIcon : Control ( String, Bool -> Html Msg )
+controlIcon =
+    Control.map
+        (\( code, icon ) ->
+            ( "\\_ -> Svg.toHtml " ++ code
+            , \_ -> Svg.toHtml icon
+            )
+        )
+        CommonControls.uiIcon
 
 
 type Msg

styleguide-app/Examples/Balloon.elm

@@ -148,6 +148,7 @@ view ellieLinkConfig state =
         , version = version
         , update = SetAttributes
         , settings = state.attributes
+        , mainType = "RootHtml.Html msg"
         , toExampleCode =
             \attrs ->
                 [ { sectionName = "Balloon"

styleguide-app/Examples/Button.elm

@@ -201,6 +201,7 @@ viewButtonExamples ellieLinkConfig state =
         , version = version
         , update = SetDebugControlsState
         , settings = state.debugControlsState
+        , mainType = "RootHtml.Html msg"
         , toExampleCode =
             \{ label, attributes } ->
                 let

styleguide-app/Examples/ClickableSvg.elm

@@ -64,6 +64,7 @@ example =
                 , version = version
                 , update = SetControls
                 , settings = state.settings
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \{ label, icon, attributes } ->
                         let

styleguide-app/Examples/ClickableText.elm

@@ -142,6 +142,7 @@ viewExamples ellieLinkConfig (State control) =
         , version = version
         , update = SetState
         , settings = control
+        , mainType = "RootHtml.Html msg"
         , toExampleCode =
             \{ label, attributes } ->
                 let

styleguide-app/Examples/Confetti.elm

@@ -57,6 +57,7 @@ example =
                 , version = version
                 , update = UpdateControl
                 , settings = state.settings
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \settings -> [ { sectionName = "TODO", code = "TODO" } ]
                 }

styleguide-app/Examples/Container.elm

@@ -62,6 +62,7 @@ example =
                 , version = version
                 , update = UpdateControl
                 , settings = state.control
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \settings ->
                         let

styleguide-app/Examples/DisclosureIndicator.elm

@@ -57,6 +57,7 @@ example =
                 , version = version
                 , update = UpdateSettings
                 , settings = state.settings
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \settings ->
                         let

styleguide-app/Examples/Heading.elm

@@ -63,6 +63,7 @@ example =
                 , version = version
                 , update = UpdateControl
                 , settings = state.control
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \settings ->
                         let

styleguide-app/Examples/Menu.elm

@@ -86,6 +86,7 @@ view ellieLinkConfig state =
         , version = version
         , update = UpdateControls
         , settings = state.settings
+        , mainType = "RootHtml.Html msg"
         , toExampleCode =
             \settings ->
                 let

styleguide-app/Examples/Message.elm

@@ -157,6 +157,7 @@ example =
                 , version = version
                 , update = UpdateControl
                 , settings = state.control
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \settings ->
                         let

styleguide-app/Examples/SegmentedControl.elm

@@ -69,6 +69,7 @@ example =
                 , version = version
                 , update = ChangeOptions
                 , settings = state.optionsControl
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \settings ->
                         [ { sectionName = "view"

styleguide-app/Examples/SideNav.elm

@@ -88,6 +88,7 @@ view ellieLinkConfig state =
         , version = version
         , update = SetControls
         , settings = state.settings
+        , mainType = "RootHtml.Html msg"
         , toExampleCode =
             \{ entries } ->
                 [ { sectionName = "View"

styleguide-app/Examples/Text.elm

@@ -58,6 +58,7 @@ example =
                 , version = version
                 , update = UpdateControl
                 , settings = state.control
+                , mainType = "RootHtml.Html msg"
                 , toExampleCode =
                     \settings ->
                         let

styleguide-app/Examples/Tooltip.elm

@@ -286,6 +286,7 @@ viewCustomizableExample ellieLinkConfig controlSettings =
             , version = version
             , update = SetControl
             , settings = controlSettings
+            , mainType = "RootHtml.Html msg"
             , toExampleCode =
                 \controls ->
                     [ { sectionName = "Example"