From 42bc287c3cd362448cfe37a2e4562824f56b6203 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 22 Jun 2023 16:20:32 -0600 Subject: [PATCH 1/6] Use standard Code helpers for general tab example set up --- component-catalog/src/Examples/MinimalTabs.elm | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/component-catalog/src/Examples/MinimalTabs.elm b/component-catalog/src/Examples/MinimalTabs.elm index 2c24de429..897e6c9d7 100644 --- a/component-catalog/src/Examples/MinimalTabs.elm +++ b/component-catalog/src/Examples/MinimalTabs.elm @@ -99,13 +99,13 @@ example = \_ -> let code = - [ moduleName ++ ".view" - , " { focusAndSelect = identity" - , " , selected = " ++ String.fromInt model.selected - , " }" - , Code.listMultiline (List.map Tuple.first allTabs) 1 - ] - |> String.join "\n" + Code.fromModule moduleName "view" + ++ Code.recordMultiline + [ ( "focusAndSelect", "identity" ) + , ( "selected", String.fromInt model.selected ) + ] + 1 + ++ Code.listMultiline (List.map Tuple.first allTabs) 1 in [ { sectionName = "Example" , code = code From 38862db92d8e78ef891f28173ff54b32e72e12fe Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 22 Jun 2023 16:25:41 -0600 Subject: [PATCH 2/6] Adjust the generated code for the standard tab name --- component-catalog/src/Examples/MinimalTabs.elm | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/component-catalog/src/Examples/MinimalTabs.elm b/component-catalog/src/Examples/MinimalTabs.elm index 897e6c9d7..e256a0d4d 100644 --- a/component-catalog/src/Examples/MinimalTabs.elm +++ b/component-catalog/src/Examples/MinimalTabs.elm @@ -169,12 +169,14 @@ buildTab id = panelName = "Panel " ++ idString in - ( String.join "" - [ "MinimalTabs.build { id = " ++ String.fromInt id ++ ", idString = " ++ Code.string tabIdString ++ " }" - , "\n\t [ MinimalTabs.tabString " ++ Code.string tabName - , "\n\t , MinimalTabs.panelHtml (text " ++ Code.string panelName ++ ")" - , "\n\t ]" - ] + ( Code.fromModule moduleName "build " + ++ Code.record [ ( "id", String.fromInt id ), ( "idString", Code.string tabIdString ) ] + ++ Code.listMultiline + [ Code.fromModule moduleName "tabString " ++ Code.string tabName + , Code.fromModule moduleName "panelHtml " + ++ Code.withParens ("text " ++ Code.string "Panel Two") + ] + 2 , MinimalTabs.build { id = id, idString = tabIdString } [ MinimalTabs.tabString tabName , MinimalTabs.panelHtml (panelContent id panelName) From e9727114284b8155c98a45083cb8f53504da36ec Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 22 Jun 2023 16:26:56 -0600 Subject: [PATCH 3/6] Simplify the example code --- .../src/Examples/MinimalTabs.elm | 28 +------------------ 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/component-catalog/src/Examples/MinimalTabs.elm b/component-catalog/src/Examples/MinimalTabs.elm index e256a0d4d..4fd70aaf4 100644 --- a/component-catalog/src/Examples/MinimalTabs.elm +++ b/component-catalog/src/Examples/MinimalTabs.elm @@ -123,33 +123,7 @@ example = allTabs : List ( String, Tab Int Msg ) allTabs = - [ buildTab 0 - , let - id = - 1 - - idString = - String.fromInt (id + 1) - - tabIdString = - "tab-" ++ idString - - panelName = - "Panel " ++ idString - in - ( String.join "" - [ "MinimalTabs.build { id = " ++ String.fromInt id ++ ", idString = " ++ Code.string tabIdString ++ " }" - , "\n\t [ MinimalTabs.tabHtml (Html.span [] [ Html.text " ++ Code.string "Tab " ++ ", Html.strong [] [ Html.text " ++ Code.string "Two" ++ " ] ])" - , "\n\t , MinimalTabs.panelHtml (text " ++ Code.string "Panel Two" ++ ")" - , "\n\t ]" - ] - , MinimalTabs.build { id = id, idString = idString } - [ MinimalTabs.tabHtml (Html.span [] [ Html.text "Tab ", Html.strong [] [ Html.text "Two" ] ]) - , MinimalTabs.panelHtml (panelContent id panelName) - ] - ) - ] - ++ List.map buildTab [ 2, 3 ] + List.map buildTab (List.range 0 3) buildTab : From 87c0870efadf63d2362132b0f1a940f04498b2cf Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 22 Jun 2023 16:43:48 -0600 Subject: [PATCH 4/6] Add a more realistic complex html example --- .../src/Examples/MinimalTabs.elm | 63 +++++++++++++++---- 1 file changed, 50 insertions(+), 13 deletions(-) diff --git a/component-catalog/src/Examples/MinimalTabs.elm b/component-catalog/src/Examples/MinimalTabs.elm index 4fd70aaf4..4ace06363 100644 --- a/component-catalog/src/Examples/MinimalTabs.elm +++ b/component-catalog/src/Examples/MinimalTabs.elm @@ -24,7 +24,9 @@ import List.Extra import Nri.Ui.Colors.V1 as Colors import Nri.Ui.MinimalTabs.V1 as MinimalTabs exposing (Tab) import Nri.Ui.Panel.V1 as Panel +import Nri.Ui.Svg.V1 as Svg import Nri.Ui.Text.V6 as Text +import Nri.Ui.UiIcon.V1 as UiIcon import Task @@ -86,6 +88,10 @@ example = ] , view = \ellieLinkConfig model -> + let + ( allTabsCode, allTabsView ) = + List.unzip (allTabs (Control.currentValue model.settings)) + in [ ControlView.view { ellieLinkConfig = ellieLinkConfig , name = moduleName @@ -105,7 +111,7 @@ example = , ( "selected", String.fromInt model.selected ) ] 1 - ++ Code.listMultiline (List.map Tuple.first allTabs) 1 + ++ Code.listMultiline allTabsCode 1 in [ { sectionName = "Example" , code = code @@ -116,20 +122,18 @@ example = { focusAndSelect = FocusAndSelectTab , selected = model.selected } - (List.map Tuple.second allTabs) + allTabsView ] } -allTabs : List ( String, Tab Int Msg ) -allTabs = - List.map buildTab (List.range 0 3) +allTabs : Settings -> List ( String, Tab Int Msg ) +allTabs settings = + List.map (buildTab settings) (List.range 0 3) -buildTab : - Int - -> ( String, Tab Int Msg ) -buildTab id = +buildTab : Settings -> Int -> ( String, Tab Int Msg ) +buildTab settings id = let idString = String.fromInt (id + 1) @@ -142,17 +146,43 @@ buildTab id = panelName = "Panel " ++ idString + + ( tabContentCode, tabContentView ) = + if settings.htmlTab && id == 3 then + ( Code.fromModule moduleName "tabString " ++ Code.string tabName + , MinimalTabs.tabHtml + (Html.span + [] + [ Html.text tabName + , UiIcon.exclamation + |> Svg.withWidth (Css.px 15) + |> Svg.withHeight (Css.px 15) + |> Svg.withLabel "Notification" + |> Svg.withCss + [ Css.verticalAlign Css.textTop + , Css.marginLeft (Css.px 5) + ] + |> Svg.withColor Colors.red + |> Svg.toHtml + ] + ) + ) + + else + ( Code.fromModule moduleName "tabString " ++ Code.string tabName + , MinimalTabs.tabString tabName + ) in ( Code.fromModule moduleName "build " ++ Code.record [ ( "id", String.fromInt id ), ( "idString", Code.string tabIdString ) ] ++ Code.listMultiline - [ Code.fromModule moduleName "tabString " ++ Code.string tabName + [ tabContentCode , Code.fromModule moduleName "panelHtml " ++ Code.withParens ("text " ++ Code.string "Panel Two") ] 2 , MinimalTabs.build { id = id, idString = tabIdString } - [ MinimalTabs.tabString tabName + [ tabContentView , MinimalTabs.panelHtml (panelContent id panelName) ] ) @@ -204,12 +234,19 @@ type alias State = init : State init = { selected = 0 - , settings = Control.record () + , settings = initSettings } type alias Settings = - () + { htmlTab : Bool + } + + +initSettings : Control Settings +initSettings = + Control.record Settings + |> Control.field "Show an HTML tab" (Control.bool False) type Msg From 18c45c92d3d1ae04ea9bf5f974e93bdda7966116 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 22 Jun 2023 16:56:22 -0600 Subject: [PATCH 5/6] Fix the example code for the HTML tab example --- component-catalog/src/Code.elm | 20 ++++-- .../src/Examples/MinimalTabs.elm | 63 +++++++++++++------ 2 files changed, 60 insertions(+), 23 deletions(-) diff --git a/component-catalog/src/Code.elm b/component-catalog/src/Code.elm index ceb7afd6f..945cc4d75 100644 --- a/component-catalog/src/Code.elm +++ b/component-catalog/src/Code.elm @@ -5,9 +5,10 @@ module Code exposing , commentInline , list, listMultiline , tuple + , pipelineMultiline , record, recordMultiline , newlineWithIndent, newlines - , withParens + , withParens, withParensMultiline , anonymousFunction, always , caseExpression , browserElement, unstyledView @@ -25,9 +26,10 @@ module Code exposing @docs commentInline @docs list, listMultiline @docs tuple +@docs pipelineMultiline @docs record, recordMultiline @docs newlineWithIndent, newlines -@docs withParens +@docs withParens, withParensMultiline @docs anonymousFunction, always @docs caseExpression @docs browserElement, unstyledView @@ -156,7 +158,7 @@ pipelineMultiline pipedWith indent = indents = newlineWithIndent (indent + 1) in - newlineWithIndent indent ++ String.join (indents ++ "|> ") pipedWith + String.join (indents ++ "|> ") pipedWith newlines : String @@ -175,6 +177,16 @@ withParens val = "(" ++ val ++ ")" +{-| -} +withParensMultiline : String -> Int -> String +withParensMultiline val indent = + newlineWithIndent indent + ++ "(" + ++ val + ++ newlineWithIndent indent + ++ ")" + + {-| -} anonymousFunction : String -> String -> String anonymousFunction vars body = @@ -222,7 +234,7 @@ browserElement { init, view, update, subscriptions } = {-| -} unstyledView : String -> String unstyledView view = - pipelineMultiline [ view, "toUnstyled" ] 1 + pipelineMultiline [ newlineWithIndent 1 ++ view, "toUnstyled" ] 1 {-| -} diff --git a/component-catalog/src/Examples/MinimalTabs.elm b/component-catalog/src/Examples/MinimalTabs.elm index 4ace06363..bad69db5f 100644 --- a/component-catalog/src/Examples/MinimalTabs.elm +++ b/component-catalog/src/Examples/MinimalTabs.elm @@ -17,7 +17,7 @@ import Css 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 as Html exposing (..) import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Key(..)) import List.Extra @@ -149,23 +149,9 @@ buildTab settings id = ( tabContentCode, tabContentView ) = if settings.htmlTab && id == 3 then - ( Code.fromModule moduleName "tabString " ++ Code.string tabName - , MinimalTabs.tabHtml - (Html.span - [] - [ Html.text tabName - , UiIcon.exclamation - |> Svg.withWidth (Css.px 15) - |> Svg.withHeight (Css.px 15) - |> Svg.withLabel "Notification" - |> Svg.withCss - [ Css.verticalAlign Css.textTop - , Css.marginLeft (Css.px 5) - ] - |> Svg.withColor Colors.red - |> Svg.toHtml - ] - ) + ( Code.fromModule moduleName "tabHtml " + ++ Code.withParensMultiline (tabHtmlCode tabName) 3 + , MinimalTabs.tabHtml (tabHtmlContent tabName) ) else @@ -188,7 +174,46 @@ buildTab settings id = ) -panelContent : Int -> String -> Html.Html msg +tabHtmlCode : String -> String +tabHtmlCode tabName = + "span" + ++ Code.newlineWithIndent 4 + ++ "[]" + ++ Code.listMultiline + [ "text " ++ Code.string tabName + , Code.pipelineMultiline + [ "UiIcon.exclamation" + , "Svg.withWidth (Css.px 15)" + , "Svg.withHeight (Css.px 15)" + , "Svg.withLabel " ++ Code.string "Notification" + , "Svg.withCss [ Css.verticalAlign Css.textTop, Css.marginLeft (Css.px 5) ]" + , "Svg.withColor Colors.red" + , "Svg.toHtml" + ] + 5 + ] + 4 + + +tabHtmlContent : String -> Html msg +tabHtmlContent tabName = + span + [] + [ text tabName + , UiIcon.exclamation + |> Svg.withWidth (Css.px 15) + |> Svg.withHeight (Css.px 15) + |> Svg.withLabel "Notification" + |> Svg.withCss + [ Css.verticalAlign Css.textTop + , Css.marginLeft (Css.px 5) + ] + |> Svg.withColor Colors.red + |> Svg.toHtml + ] + + +panelContent : Int -> String -> Html msg panelContent id panelName = let pangrams = From 9b5884b8d02167c9e3eefc326074d37814046bd5 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 22 Jun 2023 16:59:56 -0600 Subject: [PATCH 6/6] Simplify the tab example by removing the pangrams and panels --- .../src/Examples/MinimalTabs.elm | 45 ++----------------- 1 file changed, 3 insertions(+), 42 deletions(-) diff --git a/component-catalog/src/Examples/MinimalTabs.elm b/component-catalog/src/Examples/MinimalTabs.elm index bad69db5f..e5503b34c 100644 --- a/component-catalog/src/Examples/MinimalTabs.elm +++ b/component-catalog/src/Examples/MinimalTabs.elm @@ -20,10 +20,8 @@ import Example exposing (Example) import Html.Styled as Html exposing (..) import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Key(..)) -import List.Extra import Nri.Ui.Colors.V1 as Colors import Nri.Ui.MinimalTabs.V1 as MinimalTabs exposing (Tab) -import Nri.Ui.Panel.V1 as Panel import Nri.Ui.Svg.V1 as Svg import Nri.Ui.Text.V6 as Text import Nri.Ui.UiIcon.V1 as UiIcon @@ -99,7 +97,7 @@ example = , update = SetSettings , settings = model.settings , mainType = Just "RootHtml.Html { select : Int, focus : Maybe String }" - , extraCode = [] + , extraCode = [ "import Nri.Ui.Text.V6 as Text" ] , renderExample = Code.unstyledView , toExampleCode = \_ -> @@ -164,12 +162,12 @@ buildTab settings id = ++ Code.listMultiline [ tabContentCode , Code.fromModule moduleName "panelHtml " - ++ Code.withParens ("text " ++ Code.string "Panel Two") + ++ Code.withParens ("Text.smallBody [ Text.plaintext " ++ Code.string panelName ++ "]") ] 2 , MinimalTabs.build { id = id, idString = tabIdString } [ tabContentView - , MinimalTabs.panelHtml (panelContent id panelName) + , MinimalTabs.panelHtml (Text.smallBody [ Text.plaintext panelName ]) ] ) @@ -213,43 +211,6 @@ tabHtmlContent tabName = ] -panelContent : Int -> String -> Html msg -panelContent id panelName = - let - pangrams = - -- cycle panels so that panel contents change when changing tabs - -- without getting too creative :-D - [ ( "The one about the fox" - , "The quick brown fox jumps over the lazy dog." - ) - , ( "The one about the wizards" - , "The five boxing wizards jump quickly." - ) - , ( "The one about the zebras" - , "How quickly daft jumping zebras vex!" - ) - , ( "The one about the sphinxes" - , "Sphinx of black quartz, judge my vow." - ) - ] - |> List.Extra.splitAt id - |> (\( beforeSplit, afterSplit ) -> afterSplit ++ beforeSplit) - in - Html.div [] - (List.concat - [ List.map - (\( title, content ) -> - Panel.view - [ Panel.header title - , Panel.paragraph content - , Panel.containerCss [ Css.margin2 (Css.px 10) Css.zero ] - ] - ) - pangrams - ] - ) - - type alias State = { selected : Int , settings : Control Settings