From 4918939201d07b0bf9f6b2f3fb3211436a410f4e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Apr 2022 17:08:59 -0700 Subject: [PATCH] Make a compilable code example for Accordion --- styleguide-app/Debug/Control/View.elm | 4 +- styleguide-app/EllieLink.elm | 4 +- styleguide-app/Examples/Accordion.elm | 63 ++++++++++++++++++- styleguide-app/Examples/Balloon.elm | 1 + styleguide-app/Examples/Button.elm | 1 + styleguide-app/Examples/ClickableSvg.elm | 1 + styleguide-app/Examples/ClickableText.elm | 1 + styleguide-app/Examples/Confetti.elm | 1 + styleguide-app/Examples/Container.elm | 1 + .../Examples/DisclosureIndicator.elm | 1 + styleguide-app/Examples/Heading.elm | 1 + styleguide-app/Examples/Menu.elm | 1 + styleguide-app/Examples/Message.elm | 1 + styleguide-app/Examples/SegmentedControl.elm | 1 + styleguide-app/Examples/SideNav.elm | 1 + styleguide-app/Examples/Text.elm | 1 + styleguide-app/Examples/Tooltip.elm | 1 + 17 files changed, 81 insertions(+), 4 deletions(-) diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm index 0c093b5a..a56d702d 100644 --- a/styleguide-app/Debug/Control/View.elm +++ b/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 diff --git a/styleguide-app/EllieLink.elm b/styleguide-app/EllieLink.elm index 907ea9c0..5175ff37 100644 --- a/styleguide-app/EllieLink.elm +++ b/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" diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm index 5efd997e..d35cfc0b 100644 --- a/styleguide-app/Examples/Accordion.elm +++ b/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 diff --git a/styleguide-app/Examples/Balloon.elm b/styleguide-app/Examples/Balloon.elm index f868ed20..ca1e9ea0 100644 --- a/styleguide-app/Examples/Balloon.elm +++ b/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" diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index ccaedd80..97341e9d 100644 --- a/styleguide-app/Examples/Button.elm +++ b/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 diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index 15720071..c2f3fbc5 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/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 diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm index 739a254c..e7e87ced 100644 --- a/styleguide-app/Examples/ClickableText.elm +++ b/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 diff --git a/styleguide-app/Examples/Confetti.elm b/styleguide-app/Examples/Confetti.elm index c1cf1ad6..4fcc663f 100644 --- a/styleguide-app/Examples/Confetti.elm +++ b/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" } ] } diff --git a/styleguide-app/Examples/Container.elm b/styleguide-app/Examples/Container.elm index 4b5e5190..840c61cf 100644 --- a/styleguide-app/Examples/Container.elm +++ b/styleguide-app/Examples/Container.elm @@ -62,6 +62,7 @@ example = , version = version , update = UpdateControl , settings = state.control + , mainType = "RootHtml.Html msg" , toExampleCode = \settings -> let diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index bfca18df..c70ad9b9 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -57,6 +57,7 @@ example = , version = version , update = UpdateSettings , settings = state.settings + , mainType = "RootHtml.Html msg" , toExampleCode = \settings -> let diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm index 10c15612..d8c92d80 100644 --- a/styleguide-app/Examples/Heading.elm +++ b/styleguide-app/Examples/Heading.elm @@ -63,6 +63,7 @@ example = , version = version , update = UpdateControl , settings = state.control + , mainType = "RootHtml.Html msg" , toExampleCode = \settings -> let diff --git a/styleguide-app/Examples/Menu.elm b/styleguide-app/Examples/Menu.elm index 27694bde..976aefee 100644 --- a/styleguide-app/Examples/Menu.elm +++ b/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 diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm index def55519..254d2879 100644 --- a/styleguide-app/Examples/Message.elm +++ b/styleguide-app/Examples/Message.elm @@ -157,6 +157,7 @@ example = , version = version , update = UpdateControl , settings = state.control + , mainType = "RootHtml.Html msg" , toExampleCode = \settings -> let diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index 1aedd922..7f4ea925 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/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" diff --git a/styleguide-app/Examples/SideNav.elm b/styleguide-app/Examples/SideNav.elm index 4546ef19..346f45df 100644 --- a/styleguide-app/Examples/SideNav.elm +++ b/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" diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index d8e3009e..6fb5f76b 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -58,6 +58,7 @@ example = , version = version , update = UpdateControl , settings = state.control + , mainType = "RootHtml.Html msg" , toExampleCode = \settings -> let diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm index 396e52ad..4e674908 100644 --- a/styleguide-app/Examples/Tooltip.elm +++ b/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"