From 8372adac6a1ea023b532aa63c5d3d022a6fa1041 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 26 Jan 2024 14:10:09 -0700 Subject: [PATCH 01/21] Fix sidenav styles --- src/Nri/Ui/SideNav/V5.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Nri/Ui/SideNav/V5.elm b/src/Nri/Ui/SideNav/V5.elm index bc0b8043..2b977400 100644 --- a/src/Nri/Ui/SideNav/V5.elm +++ b/src/Nri/Ui/SideNav/V5.elm @@ -456,7 +456,7 @@ viewSidebarEntry config extraStyles entry_ = id_ = AttributesExtra.safeIdWithPrefix "sidenav-group" entryConfig.title in - li [] + li [ Attributes.css extraStyles ] [ styled span (sharedEntryStyles ++ [ backgroundColor Colors.gray92 From 3c1046cbfd3800dcf586d5f29ca79340726e0fd2 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 26 Jan 2024 14:50:37 -0700 Subject: [PATCH 02/21] Adds About section for icons --- component-catalog/src/Examples/IconExamples.elm | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/component-catalog/src/Examples/IconExamples.elm b/component-catalog/src/Examples/IconExamples.elm index 724cb43d..16427466 100644 --- a/component-catalog/src/Examples/IconExamples.elm +++ b/component-catalog/src/Examples/IconExamples.elm @@ -19,6 +19,7 @@ import Code import Css import Css.Global import Example exposing (Example) +import ExampleSection import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes exposing (css) import Html.Styled.Events as Events @@ -200,7 +201,8 @@ view settings groups = viewExampleSection ( group, values ) = viewWithCustomStyles settings group values in - Heading.h2 [ Heading.plaintext "Grouped Icons" ] + ExampleSection.sectionWithCss "About" [ Css.flex (Css.int 1) ] Text.smallBody [ aboutMsg ] + :: Heading.h2 [ Heading.plaintext "Grouped Icons", Heading.css [ Css.marginTop (Css.px 10) ] ] :: viewSettings settings :: List.map viewExampleSection groups ++ [ Html.section [] @@ -214,7 +216,18 @@ view settings groups = ] -{-| -} +aboutMsg : Text.Attribute msg +aboutMsg = + Text.markdown + """ +Our icons are Elm SVGs, not separate files or sprites. We use an opaque type to represent them, which enables nice type-safe composability across our components. + +We use Pattern #5: `` + `role='img'` + `` from [Accessible SVGs: Perfect Patterns For Screen Reader Users](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/) for non-decorative images. + +When the svg is decorative (which is the default), we add `aria-hidden=true` to the svg node. +""" + + viewWithCustomStyles : Settings -> String -> List ( String, Svg.Svg, List Css.Style ) -> Html msg viewWithCustomStyles { showIconName } headerText icons = Html.section From f4b6b5060e0d9ab068f1f50b9cc643299350cc15 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 26 Jan 2024 16:35:50 -0700 Subject: [PATCH 03/21] Adds accordion demo link --- component-catalog/src/Examples/Accordion.elm | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/component-catalog/src/Examples/Accordion.elm b/component-catalog/src/Examples/Accordion.elm index d3180b0a..293bfd23 100644 --- a/component-catalog/src/Examples/Accordion.elm +++ b/component-catalog/src/Examples/Accordion.elm @@ -10,7 +10,7 @@ module Examples.Accordion exposing -} -import Accessibility.Styled as Html exposing (Html) +import Accessibility.Styled as Html exposing (..) import Browser.Dom as Dom import Category exposing (Category(..)) import Code @@ -24,6 +24,7 @@ import Example exposing (Example) import Html.Styled.Attributes as Attributes exposing (css, src) import KeyboardSupport exposing (Key(..)) import Nri.Ui.Accordion.V4 as Accordion exposing (AccordionEntry(..)) +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.Extra as ColorsExtra import Nri.Ui.Colors.V1 as Colors import Nri.Ui.FocusRing.V1 as FocusRing @@ -69,7 +70,14 @@ example = , Text.caption [ Text.plaintext "Accordion content." ] ] ] - , about = [] + , about = + [ text "The Accordion component is designed to be used when you have either a list or a tree of expandables. It may also be used when there's only one expandable. " + , text "Devs should watch the entirety of " + , ClickableText.link "Tessa's Accordion demo" + [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/kLjOvS0PX5y-YYas6VmtUf5eEb1ViqNKKB-01gCELXG5tMjINEdop6dXrmfCyfC1A3Xj9kTUK8eIDe0.LO5NQR0X3udwz13x?canPlayFromShare=true&from=share_recording_detail&startTime=1681398154000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2F6R2Tk0FkzAYJ-44Q4Qs2Dx2RPR1GCXOCcaQsEai6vbtkO8oo9Ke8-_goIVwPDn9I.VVXdtb2PlpuTEqGs%3FstartTime%3D1681398154000" + ] + , text " before using. Discussion of how to attach styles correctly begins at 5:10." + ] , view = view , categories = [ Layout ] , keyboardSupport = From 02effaf82f8997e21e4a213ac0bc2c82d7e3a800 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 29 Jan 2024 09:08:52 -0700 Subject: [PATCH 04/21] Apply Kristine's suggestions --- component-catalog/src/Examples/IconExamples.elm | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/component-catalog/src/Examples/IconExamples.elm b/component-catalog/src/Examples/IconExamples.elm index 16427466..a77bb708 100644 --- a/component-catalog/src/Examples/IconExamples.elm +++ b/component-catalog/src/Examples/IconExamples.elm @@ -220,11 +220,10 @@ aboutMsg : Text.Attribute msg aboutMsg = Text.markdown """ -Our icons are Elm SVGs, not separate files or sprites. We use an opaque type to represent them, which enables nice type-safe composability across our components. +- Our icons are Elm SVGs, not separate files or sprites. We use an opaque type to represent them, which enables nice type-safe composability across our components. +- For decorative SVGs (which is the default), we add `aria-hidden=true` to the SVG node. +- For non-decorative SVGs, we use Pattern #5 `` + `role='img'` + `` from [Accessible SVGs: Perfect Patterns For Screen Reader Users](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/). -We use Pattern #5: `` + `role='img'` + `` from [Accessible SVGs: Perfect Patterns For Screen Reader Users](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/) for non-decorative images. - -When the svg is decorative (which is the default), we add `aria-hidden=true` to the svg node. """ From ceaee22308f5eb7a165c953b780357d857c4c8a1 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 29 Jan 2024 09:09:32 -0700 Subject: [PATCH 05/21] Cross link instructions --- component-catalog/src/Examples/IconExamples.elm | 1 + 1 file changed, 1 insertion(+) diff --git a/component-catalog/src/Examples/IconExamples.elm b/component-catalog/src/Examples/IconExamples.elm index a77bb708..7134a87b 100644 --- a/component-catalog/src/Examples/IconExamples.elm +++ b/component-catalog/src/Examples/IconExamples.elm @@ -223,6 +223,7 @@ aboutMsg = - Our icons are Elm SVGs, not separate files or sprites. We use an opaque type to represent them, which enables nice type-safe composability across our components. - For decorative SVGs (which is the default), we add `aria-hidden=true` to the SVG node. - For non-decorative SVGs, we use Pattern #5 `` + `role='img'` + `` from [Accessible SVGs: Perfect Patterns For Screen Reader Users](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/). +- Instructions for adding new SVG icons can be found in the [monolith README](https://github.com/NoRedInk/NoRedInk/blob/master/monolith/README.md#adding-new-svg-icons). """ From 906274ada4c8421fe55855dbcebab247e6b76852 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 29 Jan 2024 09:20:31 -0700 Subject: [PATCH 06/21] Use a list --- component-catalog/src/Examples/Accordion.elm | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/component-catalog/src/Examples/Accordion.elm b/component-catalog/src/Examples/Accordion.elm index 293bfd23..6520feb5 100644 --- a/component-catalog/src/Examples/Accordion.elm +++ b/component-catalog/src/Examples/Accordion.elm @@ -71,12 +71,17 @@ example = ] ] , about = - [ text "The Accordion component is designed to be used when you have either a list or a tree of expandables. It may also be used when there's only one expandable. " - , text "Devs should watch the entirety of " - , ClickableText.link "Tessa's Accordion demo" - [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/kLjOvS0PX5y-YYas6VmtUf5eEb1ViqNKKB-01gCELXG5tMjINEdop6dXrmfCyfC1A3Xj9kTUK8eIDe0.LO5NQR0X3udwz13x?canPlayFromShare=true&from=share_recording_detail&startTime=1681398154000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2F6R2Tk0FkzAYJ-44Q4Qs2Dx2RPR1GCXOCcaQsEai6vbtkO8oo9Ke8-_goIVwPDn9I.VVXdtb2PlpuTEqGs%3FstartTime%3D1681398154000" + [ ul [ css [ paddingLeft (px 16), margin zero ] ] + [ li [] [ text "The Accordion component is designed to be used when you have either a list or a tree of expandables. It may also be used when there's only one expandable. " ] + , li [] + [ text "Devs should watch the entirety of " + , ClickableText.link "Tessa's Accordion demo" + [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/kLjOvS0PX5y-YYas6VmtUf5eEb1ViqNKKB-01gCELXG5tMjINEdop6dXrmfCyfC1A3Xj9kTUK8eIDe0.LO5NQR0X3udwz13x?canPlayFromShare=true&from=share_recording_detail&startTime=1681398154000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2F6R2Tk0FkzAYJ-44Q4Qs2Dx2RPR1GCXOCcaQsEai6vbtkO8oo9Ke8-_goIVwPDn9I.VVXdtb2PlpuTEqGs%3FstartTime%3D1681398154000" + , ClickableText.appearsInline + ] + , text " before using. Discussion of how to attach styles correctly begins at 5:10." + ] ] - , text " before using. Discussion of how to attach styles correctly begins at 5:10." ] , view = view , categories = [ Layout ] From 10bf4768f74d2de85aa12c5521e434fc194f6c52 Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Tue, 30 Jan 2024 17:33:15 -0300 Subject: [PATCH 07/21] Honor icon/rightIcon on entries with children --- component-catalog/src/Examples/SideNav.elm | 5 +++-- src/Nri/Ui/SideNav/V5.elm | 6 +++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/component-catalog/src/Examples/SideNav.elm b/component-catalog/src/Examples/SideNav.elm index dd8f958d..7bba0790 100644 --- a/component-catalog/src/Examples/SideNav.elm +++ b/component-catalog/src/Examples/SideNav.elm @@ -23,6 +23,7 @@ import Nri.Ui.Heading.V3 as Heading import Nri.Ui.SideNav.V5 as SideNav import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Text.V6 as Text +import Nri.Ui.UiIcon.V1 as UiIcon version : Int @@ -145,9 +146,9 @@ view ellieLinkConfig state = , Text.css [ Css.paddingBottom (Css.px 10) ] ] ] - , SideNav.entry "Entry" [] + , SideNav.entry "Entry" [ SideNav.icon UiIcon.person ] , SideNav.entryWithChildren "Entry with Children" - [] + [ SideNav.icon UiIcon.bulb ] [ SideNav.entry "Child 1" [ SideNav.href "complex-example__child-1" ] diff --git a/src/Nri/Ui/SideNav/V5.elm b/src/Nri/Ui/SideNav/V5.elm index bc0b8043..d3b72fa9 100644 --- a/src/Nri/Ui/SideNav/V5.elm +++ b/src/Nri/Ui/SideNav/V5.elm @@ -21,6 +21,7 @@ module Nri.Ui.SideNav.V5 exposing - adds `aria-current="true"` to the parent of the current page - expose missing import - correct locked premium content to match `ul>li` structure + - honor icon/rightIcon for entries with children ### Changes from V4 @@ -467,7 +468,10 @@ viewSidebarEntry config extraStyles entry_ = ] ) [ Attributes.id id_, Aria.currentItem True ] - [ text entryConfig.title ] + [ viewLeftIcon entryConfig + , text entryConfig.title + , viewRightIcon entryConfig + ] , ul [ Attributes.css ([ listStyle none From 212cd0d465689930b8672b23b502530e5531269e Mon Sep 17 00:00:00 2001 From: Ben Dansby Date: Tue, 30 Jan 2024 14:45:24 -0800 Subject: [PATCH 08/21] header color --- src/Nri/Ui/Table/V7.elm | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Nri/Ui/Table/V7.elm b/src/Nri/Ui/Table/V7.elm index c172c073..a09bba39 100644 --- a/src/Nri/Ui/Table/V7.elm +++ b/src/Nri/Ui/Table/V7.elm @@ -261,6 +261,7 @@ headerStyles = [ padding4 (px 11) (px 12) (px 14) (px 12) , textAlign left , fontWeight bold + , color gray20 ] From 4eaa6bfc9d6cfb62dc8a2ce4878fe634ec58bafd Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Wed, 31 Jan 2024 13:55:26 -0300 Subject: [PATCH 09/21] elm bump --- elm.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elm.json b/elm.json index f465846b..8efb9cb4 100644 --- a/elm.json +++ b/elm.json @@ -3,7 +3,7 @@ "name": "NoRedInk/noredink-ui", "summary": "UI Widgets we use at NRI", "license": "BSD-3-Clause", - "version": "27.9.0", + "version": "27.10.0", "exposed-modules": [ "Browser.Events.Extra", "Nri.Test.KeyboardHelpers.V1", @@ -128,4 +128,4 @@ "elm-explorations/test": "2.0.0 <= v < 3.0.0", "tesk9/accessible-html": "5.0.0 <= v < 6.0.0" } -} +} \ No newline at end of file From 86ef3cdc50321a821f2eb2e4b7eafcc159dec768 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 31 Jan 2024 10:06:16 -0700 Subject: [PATCH 10/21] Sketch out some documentation around BreadCrumbs --- component-catalog/src/Examples/BreadCrumbs.elm | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/component-catalog/src/Examples/BreadCrumbs.elm b/component-catalog/src/Examples/BreadCrumbs.elm index c67b698f..d99b0164 100644 --- a/component-catalog/src/Examples/BreadCrumbs.elm +++ b/component-catalog/src/Examples/BreadCrumbs.elm @@ -18,6 +18,7 @@ import Example exposing (Example) import Html.Styled.Attributes exposing (css, href) import Nri.Ui.AssignmentIcon.V2 as AssignmentIcon import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs exposing (BreadCrumbAttribute, BreadCrumbs) +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading @@ -71,7 +72,18 @@ example = , previewText "Sub-Category " ] ] - , about = [] + , about = + [ text "BreadCrumbs orient users to their location and provide convenient links to go 'up' to parent pages." + , text "Typically, you'll use Header.view rather than BreadCrumbs.view to render primary/h1-level BreadCrumbs." + , text "You may use BreadCrumbs.viewSecondary to render h2-level BreadCrumbs." + , text "You should use BreadCrumbs.headerId to move focus to the current h1 or h2 and BreadCrumbs.toPageTitle to dynamically change the title when the page context changes." + , text "This and more is all explained in more depth in Tessa's " + , ClickableText.link "BreadCrumbs component demo" + [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/x1x2Vz0fpj-qz0qf5gi5cpTy9Is1sIWGfwCoZ1_iOELkmkBtGUpdKyD6TydBM9vvFgJdD0jP3DUmZp4K.BU8uDgAVoRddWSd2?canPlayFromShare=true&from=share_recording_detail&startTime=1682608412000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2FtmIuIbuqWmFU20191vHs15QJv1ikMYQrcSKLXOMOOXlDQTHOg2-23ehZbZyG9f8L.c05C6jZecqKyPjub%3FstartTime%3D1682608412000" + , ClickableText.appearsInline + ] + , text "." + ] , view = \ellieLinkConfig state -> let From 4f4d8a5242a629aafb8349361f56b957ea36e882 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 31 Jan 2024 10:50:17 -0700 Subject: [PATCH 11/21] Render raw HTML for examples to allow more customization in BreadCrumbs example --- component-catalog/src/Example.elm | 2 +- component-catalog/src/Examples/Block.elm | 10 +++++--- .../src/Examples/BreadCrumbs.elm | 22 +++++++++------- component-catalog/src/Examples/FocusRing.elm | 15 +++++++---- component-catalog/src/Examples/Fonts.elm | 25 +++++++++++-------- component-catalog/src/Guidance.elm | 13 +++++++--- 6 files changed, 55 insertions(+), 32 deletions(-) diff --git a/component-catalog/src/Example.elm b/component-catalog/src/Example.elm index 3525b010..20bf0aae 100644 --- a/component-catalog/src/Example.elm +++ b/component-catalog/src/Example.elm @@ -191,7 +191,7 @@ view_ ellieLinkConfig example = viewAbout : List (Html Never) -> Html msg viewAbout about = - Text.mediumBody [ Text.html about ] + Html.div [] about |> Html.map never diff --git a/component-catalog/src/Examples/Block.elm b/component-catalog/src/Examples/Block.elm index 0d174ee4..bb65aa7c 100644 --- a/component-catalog/src/Examples/Block.elm +++ b/component-catalog/src/Examples/Block.elm @@ -80,9 +80,13 @@ example = |> p [ css [ Fonts.baseFont, Css.fontSize (Css.px 12), Css.margin Css.zero ] ] ] , about = - [ text "You might also know the Block element as a “Display Element”. Learn more in " - , ClickableText.link "Display Elements and Scaffolding Container: additional things to know" - [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Display-Elements-and-Scaffolding-Container-additional-things-to-know--BwRhBMKyXFFSWz~1mljN29bcAg-6vszpNDLoYIiMyg7Wv66s" + [ Text.mediumBody + [ Text.html + [ text "You might also know the Block element as a “Display Element”. Learn more in " + , ClickableText.link "Display Elements and Scaffolding Container: additional things to know" + [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Display-Elements-and-Scaffolding-Container-additional-things-to-know--BwRhBMKyXFFSWz~1mljN29bcAg-6vszpNDLoYIiMyg7Wv66s" + ] + ] ] ] , view = diff --git a/component-catalog/src/Examples/BreadCrumbs.elm b/component-catalog/src/Examples/BreadCrumbs.elm index d99b0164..e80e21d2 100644 --- a/component-catalog/src/Examples/BreadCrumbs.elm +++ b/component-catalog/src/Examples/BreadCrumbs.elm @@ -26,6 +26,7 @@ import Nri.Ui.Html.V3 exposing (viewJust) import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.Table.V7 as Table +import Nri.Ui.Text.V6 as Text import Nri.Ui.UiIcon.V1 as UiIcon @@ -73,16 +74,19 @@ example = ] ] , about = - [ text "BreadCrumbs orient users to their location and provide convenient links to go 'up' to parent pages." - , text "Typically, you'll use Header.view rather than BreadCrumbs.view to render primary/h1-level BreadCrumbs." - , text "You may use BreadCrumbs.viewSecondary to render h2-level BreadCrumbs." - , text "You should use BreadCrumbs.headerId to move focus to the current h1 or h2 and BreadCrumbs.toPageTitle to dynamically change the title when the page context changes." - , text "This and more is all explained in more depth in Tessa's " - , ClickableText.link "BreadCrumbs component demo" - [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/x1x2Vz0fpj-qz0qf5gi5cpTy9Is1sIWGfwCoZ1_iOELkmkBtGUpdKyD6TydBM9vvFgJdD0jP3DUmZp4K.BU8uDgAVoRddWSd2?canPlayFromShare=true&from=share_recording_detail&startTime=1682608412000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2FtmIuIbuqWmFU20191vHs15QJv1ikMYQrcSKLXOMOOXlDQTHOg2-23ehZbZyG9f8L.c05C6jZecqKyPjub%3FstartTime%3D1682608412000" - , ClickableText.appearsInline + [ Text.mediumBody [ Text.markdown "`BreadCrumbs` orient users and provide convenient links to go \"up\" to parent pages." ] + , Text.mediumBody [ Text.markdown "Typically, you'll use `Header.view` (rather than `BreadCrumbs.view`) to render primary/`h1`-level `BreadCrumbs`. You may use `BreadCrumbs.viewSecondary` to render `h2`-level `BreadCrumbs`." ] + , Text.mediumBody [ Text.markdown "You should use `BreadCrumbs.headerId` to move focus to the current `h1` or `h2` and `BreadCrumbs.toPageTitle` to dynamically change the title when the page context changes." ] + , Text.mediumBody + [ Text.html + [ text "This and more is explained in depth in Tessa's " + , ClickableText.link "BreadCrumbs component demo" + [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/x1x2Vz0fpj-qz0qf5gi5cpTy9Is1sIWGfwCoZ1_iOELkmkBtGUpdKyD6TydBM9vvFgJdD0jP3DUmZp4K.BU8uDgAVoRddWSd2?canPlayFromShare=true&from=share_recording_detail&startTime=1682608412000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2FtmIuIbuqWmFU20191vHs15QJv1ikMYQrcSKLXOMOOXlDQTHOg2-23ehZbZyG9f8L.c05C6jZecqKyPjub%3FstartTime%3D1682608412000" + , ClickableText.appearsInline + ] + , text "." + ] ] - , text "." ] , view = \ellieLinkConfig state -> diff --git a/component-catalog/src/Examples/FocusRing.elm b/component-catalog/src/Examples/FocusRing.elm index dc4f1edc..7993aee2 100644 --- a/component-catalog/src/Examples/FocusRing.elm +++ b/component-catalog/src/Examples/FocusRing.elm @@ -27,6 +27,7 @@ import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Svg.V1 as Svg import Nri.Ui.Switch.V3 as Switch import Nri.Ui.Table.V7 as Table +import Nri.Ui.Text.V6 as Text import Nri.Ui.UiIcon.V1 as UiIcon import Task @@ -46,12 +47,16 @@ example = , example_ FocusRing.tightStyles ] , about = - [ text "Custom high-contrast focus ring styles. Learn more about this component in " - , ClickableText.link "Custom Focus Rings on the NoRedInk blog" - [ ClickableText.linkExternal "https://blog.noredink.com/post/703458632758689792/custom-focus-rings" - , ClickableText.appearsInline + [ Text.mediumBody + [ Text.html + [ text "Custom high-contrast focus ring styles. Learn more about this component in " + , ClickableText.link "Custom Focus Rings on the NoRedInk blog" + [ ClickableText.linkExternal "https://blog.noredink.com/post/703458632758689792/custom-focus-rings" + , ClickableText.appearsInline + ] + , text "." + ] ] - , text "." ] , view = \_ state -> diff --git a/component-catalog/src/Examples/Fonts.elm b/component-catalog/src/Examples/Fonts.elm index 977be796..d2e0baca 100644 --- a/component-catalog/src/Examples/Fonts.elm +++ b/component-catalog/src/Examples/Fonts.elm @@ -16,6 +16,7 @@ import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Table.V7 as Table +import Nri.Ui.Text.V6 as Text {-| -} @@ -45,17 +46,21 @@ example = ] |> List.map viewPreview , about = - [ Html.text "Learn more about kid-friendly and accessible fonts starting at 24:40 in " - , ClickableText.link "Kids Websites: Where Fun and Accessibility Come to Play" - [ ClickableText.linkExternal "https://www.deque.com/axe-con/sessions/kids-websites-where-fun-and-accessibility-come-to-play/" - , ClickableText.appearsInline + [ Text.mediumBody + [ Text.html + [ Html.text "Learn more about kid-friendly and accessible fonts starting at 24:40 in " + , ClickableText.link "Kids Websites: Where Fun and Accessibility Come to Play" + [ ClickableText.linkExternal "https://www.deque.com/axe-con/sessions/kids-websites-where-fun-and-accessibility-come-to-play/" + , ClickableText.appearsInline + ] + , Html.text " and in " + , ClickableText.link "Accessible fonts and readability: the basics" + [ ClickableText.linkExternal "https://business.scope.org.uk/article/font-accessibility-and-readability-the-basics#:~:text=This%20can%20affect%20reading%20speed,does%20this%20is%20Gill%20Sans." + , ClickableText.appearsInline + ] + , Html.text "." + ] ] - , Html.text " and in " - , ClickableText.link "Accessible fonts and readability: the basics" - [ ClickableText.linkExternal "https://business.scope.org.uk/article/font-accessibility-and-readability-the-basics#:~:text=This%20can%20affect%20reading%20speed,does%20this%20is%20Gill%20Sans." - , ClickableText.appearsInline - ] - , Html.text "." ] , view = \ellieLinkConfig _ -> diff --git a/component-catalog/src/Guidance.elm b/component-catalog/src/Guidance.elm index 7bf0e890..7dd479e0 100644 --- a/component-catalog/src/Guidance.elm +++ b/component-catalog/src/Guidance.elm @@ -2,13 +2,18 @@ module Guidance exposing (..) import Html.Styled exposing (..) import Nri.Ui.ClickableText.V4 as ClickableText +import Nri.Ui.Text.V6 as Text useATACGuide : String -> List (Html msg) useATACGuide moduleName = - [ text ("To ensure your use of " ++ moduleName ++ " is accessible to assistive technology, please review the ") - , ClickableText.link "Assistive technology notification design & development guide" - [ ClickableText.linkExternal "https://noredinkaccessibility.screenstepslive.com/a/1651037-assistive-technology-notification-design-development-guide" + [ Text.mediumBody + [ Text.html + [ text ("To ensure your use of " ++ moduleName ++ " is accessible to assistive technology, please review the ") + , ClickableText.link "Assistive technology notification design & development guide" + [ ClickableText.linkExternal "https://noredinkaccessibility.screenstepslive.com/a/1651037-assistive-technology-notification-design-development-guide" + ] + , text (" to see if your use case fits any listed in the guide. If it does, please follow the guide to learn how to properly implement " ++ moduleName ++ ".") + ] ] - , text (" to see if your use case fits any listed in the guide. If it does, please follow the guide to learn how to properly implement " ++ moduleName ++ ".") ] From 0e1885fd0aa465f713fa73d92e3cb3aba928aa76 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 31 Jan 2024 10:54:30 -0700 Subject: [PATCH 12/21] Use ClickableText for radio button dotless links --- component-catalog/src/Examples/Button.elm | 15 +++++++++------ component-catalog/src/Examples/RadioButton.elm | 15 +++++++++------ 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/component-catalog/src/Examples/Button.elm b/component-catalog/src/Examples/Button.elm index 04715ad2..60e0c3a7 100644 --- a/component-catalog/src/Examples/Button.elm +++ b/component-catalog/src/Examples/Button.elm @@ -20,6 +20,7 @@ import Examples.RadioButtonDotless as RadioButtonDotlessExample import Html.Styled exposing (..) import Html.Styled.Attributes as Attributes exposing (css) import Nri.Ui.Button.V10 as Button +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Message.V4 as Message @@ -76,12 +77,14 @@ example = ] ] , about = - [ let - url = - Routes.exampleHref RadioButtonDotlessExample.example - in - Message.view - [ Message.markdown <| "Looking for a group of buttons where only one button is selectable at a time? Check out [RadioButtonDotless](" ++ url ++ ")" + [ Message.view + [ Message.html + [ text "Looking for a group of buttons where only one button is selectable at a time? Check out " + , ClickableText.link "RadioButtonDotless" + [ ClickableText.href (Routes.exampleHref RadioButtonDotlessExample.example) + , ClickableText.appearsInline + ] + ] ] ] , view = \ellieLinkConfig state -> [ viewButtonExamples ellieLinkConfig state ] diff --git a/component-catalog/src/Examples/RadioButton.elm b/component-catalog/src/Examples/RadioButton.elm index 536eb600..0fbfffdb 100644 --- a/component-catalog/src/Examples/RadioButton.elm +++ b/component-catalog/src/Examples/RadioButton.elm @@ -26,6 +26,7 @@ import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Direction(..), Key(..)) import Nri.Ui.Button.V10 as Button +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Data.PremiumDisplay as PremiumDisplay import Nri.Ui.Heading.V3 as Heading @@ -63,12 +64,14 @@ example = , subscriptions = subscriptions , preview = preview , about = - [ let - url = - Routes.exampleHref RadioButtonDotlessExample.example - in - Message.view - [ Message.markdown <| "Looking for radio button that's styled more like a button?
Check out [RadioButtonDotless](" ++ url ++ ")" + [ Message.view + [ Message.html + [ text "Looking for a group of buttons where only one button is selectable at a time? Check out " + , ClickableText.link "RadioButtonDotless" + [ ClickableText.href (Routes.exampleHref RadioButtonDotlessExample.example) + , ClickableText.appearsInline + ] + ] ] ] , view = view From 8edd3360e0c3baf15e056d2d09fce99cca94d4eb Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 31 Jan 2024 11:39:23 -0700 Subject: [PATCH 13/21] fixes from shake ci --- component-catalog/src/Example.elm | 1 - deprecated-modules.csv | 1 + forbidden-imports.toml | 3 +++ 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/component-catalog/src/Example.elm b/component-catalog/src/Example.elm index 20bf0aae..d4d8be66 100644 --- a/component-catalog/src/Example.elm +++ b/component-catalog/src/Example.elm @@ -17,7 +17,6 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Container.V2 as Container import Nri.Ui.Header.V1 as Header import Nri.Ui.MediaQuery.V1 exposing (mobile) -import Nri.Ui.Text.V6 as Text type alias Example state msg = diff --git a/deprecated-modules.csv b/deprecated-modules.csv index d3d542ae..535b213a 100644 --- a/deprecated-modules.csv +++ b/deprecated-modules.csv @@ -2,6 +2,7 @@ Nri.Ui.Accordion.V3,upgrade to V4 Nri.Ui.Block.V4,upgrade to V6 Nri.Ui.Block.V5,upgrade to V6 Nri.Ui.Carousel.V1,upgrade to V2 +Nri.Ui.ClickableText.V3,upgrade to V4 Nri.Ui.WhenFocusLeaves.V1,upgrade to V2 Nri.Ui.Highlighter.V4,upgrade to V5 Nri.Ui.Mark.V2,upgrade to V5 diff --git a/forbidden-imports.toml b/forbidden-imports.toml index d96756ce..37635fe2 100644 --- a/forbidden-imports.toml +++ b/forbidden-imports.toml @@ -88,6 +88,9 @@ hint = 'upgrade to V7' hint = 'upgrade to V2' usages = ['component-catalog-app/Examples/Tooltip.elm'] +[forbidden."Nri.Ui.ClickableText.V3"] +hint = 'upgrade to V4' + [forbidden."Nri.Ui.Container.V1"] hint = 'upgrade to V2' From e74f17577d336beaba4cdfafc8329f4455326af6 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 25 Jan 2024 17:18:30 -0700 Subject: [PATCH 14/21] Adds example view illustrating Menu regression --- component-catalog/src/Examples/Menu.elm | 61 +++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm index de38243e..e883b430 100644 --- a/component-catalog/src/Examples/Menu.elm +++ b/component-catalog/src/Examples/Menu.elm @@ -388,6 +388,67 @@ view ellieLinkConfig state = ] } ] + , Heading.h2 + [ Heading.plaintext "Menu trigger base styles" + , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] + ] + , Table.view [] + [ Table.string + { header = "Trigger type" + , value = .menu + , width = Css.pct 30 + , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle, Css.fontWeight Css.bold ] + , sort = Nothing + } + , Table.custom + { header = text "Example" + , view = .example + , width = Css.px 300 + , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ] + , sort = Nothing + } + ] + [ { menu = "Menu.defaultTrigger" + , example = + Menu.view (FocusAndToggle "defaultTrigger") + [ Menu.defaultTrigger "Log in" [] + , Menu.isOpen (isOpen "defaultTrigger") + ] + [] + } + , { menu = "Menu.button" + , example = + Menu.view (FocusAndToggle "button") + [ Menu.button "Log in" [] + , Menu.isOpen (isOpen "button") + ] + [] + } + , { menu = "Menu.clickableText" + , example = + Menu.view (FocusAndToggle "clickableText") + [ Menu.clickableText "Log in" [] + , Menu.isOpen (isOpen "clickableText") + ] + [] + } + , { menu = "Menu.clickableSvg with UiIcon.gear" + , example = + Menu.view (FocusAndToggle "clickableSvg") + [ Menu.clickableSvg "Log in" UiIcon.gear [] + , Menu.isOpen (isOpen "clickableSvg") + ] + [] + } + , { menu = "Menu.clickableSvgWithoutIndicator with UiIcon.gear" + , example = + Menu.view (FocusAndToggle "clickableSvgWithoutIndicator") + [ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear [] + , Menu.isOpen (isOpen "clickableSvgWithoutIndicator") + ] + [] + } + ] ] From 54a3a00d6384d91f3b2e725251a1dd8114a89943 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 29 Jan 2024 11:47:31 -0700 Subject: [PATCH 15/21] Fix duped ids --- component-catalog/src/Examples/Menu.elm | 10 ++++++++++ deprecated-modules.csv | 1 + forbidden-imports.toml | 3 +++ 3 files changed, 14 insertions(+) diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm index e883b430..dd4b004d 100644 --- a/component-catalog/src/Examples/Menu.elm +++ b/component-catalog/src/Examples/Menu.elm @@ -413,6 +413,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "defaultTrigger") [ Menu.defaultTrigger "Log in" [] , Menu.isOpen (isOpen "defaultTrigger") + , Menu.buttonId "defaultTrigger" + , Menu.menuId "defaultTrigger" ] [] } @@ -421,6 +423,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "button") [ Menu.button "Log in" [] , Menu.isOpen (isOpen "button") + , Menu.buttonId "button" + , Menu.menuId "button" ] [] } @@ -429,6 +433,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "clickableText") [ Menu.clickableText "Log in" [] , Menu.isOpen (isOpen "clickableText") + , Menu.buttonId "clickableText" + , Menu.menuId "clickableText" ] [] } @@ -437,6 +443,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "clickableSvg") [ Menu.clickableSvg "Log in" UiIcon.gear [] , Menu.isOpen (isOpen "clickableSvg") + , Menu.buttonId "clickableSvg" + , Menu.menuId "clickableSvg" ] [] } @@ -445,6 +453,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "clickableSvgWithoutIndicator") [ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear [] , Menu.isOpen (isOpen "clickableSvgWithoutIndicator") + , Menu.buttonId "clickableSvgWithoutIndicator" + , Menu.menuId "clickableSvgWithoutIndicator" ] [] } diff --git a/deprecated-modules.csv b/deprecated-modules.csv index d3d542ae..535b213a 100644 --- a/deprecated-modules.csv +++ b/deprecated-modules.csv @@ -2,6 +2,7 @@ Nri.Ui.Accordion.V3,upgrade to V4 Nri.Ui.Block.V4,upgrade to V6 Nri.Ui.Block.V5,upgrade to V6 Nri.Ui.Carousel.V1,upgrade to V2 +Nri.Ui.ClickableText.V3,upgrade to V4 Nri.Ui.WhenFocusLeaves.V1,upgrade to V2 Nri.Ui.Highlighter.V4,upgrade to V5 Nri.Ui.Mark.V2,upgrade to V5 diff --git a/forbidden-imports.toml b/forbidden-imports.toml index d96756ce..37635fe2 100644 --- a/forbidden-imports.toml +++ b/forbidden-imports.toml @@ -88,6 +88,9 @@ hint = 'upgrade to V7' hint = 'upgrade to V2' usages = ['component-catalog-app/Examples/Tooltip.elm'] +[forbidden."Nri.Ui.ClickableText.V3"] +hint = 'upgrade to V4' + [forbidden."Nri.Ui.Container.V1"] hint = 'upgrade to V2' From 86e887fcf363d326edebda27bf3a245a7f083efd Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 1 Feb 2024 15:25:56 -0700 Subject: [PATCH 16/21] Fix axe checks by changing versions --- package-lock.json | 12 ++++++------ package.json | 2 +- script/puppeteer-tests.js | 1 + 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 330300ed..879362ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -728,9 +728,9 @@ "dev": true }, "node_modules/axe-core": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz", - "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz", + "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==", "dev": true, "engines": { "node": ">=4" @@ -5351,9 +5351,9 @@ "dev": true }, "axe-core": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz", - "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz", + "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==", "dev": true }, "balanced-match": { diff --git a/package.json b/package.json index fe736041..b9bf11d0 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "@axe-core/puppeteer": "^4.4.3", "@percy/cli": "^1.4.0", "@percy/puppeteer": "^2.0.2", - "axe-core": "^4.7.0", + "axe-core": "^4.8.3", "browserify": "^17.0.0", "elm-test": "0.19.1-revision12", "expect": "29.5.0", diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index fcb55b9f..002fe1bd 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -230,6 +230,7 @@ describe("UI tests", function () { }; const skippedRules = { + Block: ["scrollable-region-focusable"], // Loading's color contrast check seems to change behavior depending on whether Percy snapshots are taken or not Loading: ["color-contrast"], Outline: ["color-contrast"], From d3ee026e2299b7781257548784c25712af56d023 Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Fri, 2 Feb 2024 09:30:47 -0300 Subject: [PATCH 17/21] Add elm-live You might need to delete your local .direnv to update it --- flake.nix | 1 + 1 file changed, 1 insertion(+) diff --git a/flake.nix b/flake.nix index 966d35fd..c8a82612 100644 --- a/flake.nix +++ b/flake.nix @@ -39,6 +39,7 @@ # preview dependencies pkgs.python3 pkgs.watchexec + pkgs.elmPackages.elm-live # stuff we need for running builds in a `nix-shell --pure` environment. pkgs.which From 6aff072f02b6ec8470a9565e724ee70e606321eb Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Fri, 2 Feb 2024 09:44:29 -0300 Subject: [PATCH 18/21] Add new script/develop based on elm-live The formar python is left for a bit in case elm-live does not work fully, we then do cleanup later. --- script/develop.sh | 11 +---------- script/legacy-develop.sh | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 10 deletions(-) create mode 100755 script/legacy-develop.sh diff --git a/script/develop.sh b/script/develop.sh index 4ce4df6b..02ab25a3 100755 --- a/script/develop.sh +++ b/script/develop.sh @@ -23,13 +23,4 @@ To quit, hit ctrl-c. EOF -# start a web server in the background and tear it down when exiting -./script/serve.sh public & -SERVER_PID=$! -cleanup() { - kill "$SERVER_PID" -} -trap cleanup EXIT INT - -# start a watcher. This loops forever, so we don't need to loop ourselves. -watchexec --clear --postpone -- shake --compact "$SHAKE_TARGET" +(cd ./component-catalog; elm-live ./src/Main.elm --pushstate --hot --dir=../$SHAKE_TARGET -- --output=../$SHAKE_TARGET/elm.js) diff --git a/script/legacy-develop.sh b/script/legacy-develop.sh new file mode 100755 index 00000000..4ce4df6b --- /dev/null +++ b/script/legacy-develop.sh @@ -0,0 +1,35 @@ +#!/usr/bin/env bash +set -euo pipefail + +if test -d public; then + rm -rf public +fi + +SHAKE_TARGET="${1:-public}" + +shake --compact "$SHAKE_TARGET" + +cat < Date: Fri, 2 Feb 2024 10:51:44 -0300 Subject: [PATCH 19/21] Store examples model only in the App model Otherwise the hot reload will not update the view, which was stored in the App model. --- component-catalog/src/App.elm | 124 ++++++++++++++++++++-------------- 1 file changed, 74 insertions(+), 50 deletions(-) diff --git a/component-catalog/src/App.elm b/component-catalog/src/App.elm index 83b9ce1d..48c82559 100644 --- a/component-catalog/src/App.elm +++ b/component-catalog/src/App.elm @@ -40,8 +40,8 @@ type alias Model key = { -- Global UI route : Route , previousRoute : Maybe Route - , moduleStates : Dict String (Example Examples.State Examples.Msg) - , usageExampleStates : Dict String (UsageExample UsageExamples.State UsageExamples.Msg) + , moduleStates : Dict String Examples.State + , usageExampleStates : Dict String UsageExamples.State , isSideNavOpen : Bool , openTooltip : Maybe TooltipId , selectedContent : Content @@ -55,17 +55,8 @@ init : () -> Url -> key -> ( Model key, Effect ) init () url key = ( { route = Routes.fromLocation url , previousRoute = Nothing - , moduleStates = - Dict.fromList - (List.map - (\example -> ( Example.routeName example, example )) - Examples.all - ) - , usageExampleStates = - Dict.fromList - (List.map (\example -> ( UsageExample.routeName example, example )) - UsageExamples.all - ) + , moduleStates = Dict.map (\_ example -> example.state) examplesDict + , usageExampleStates = Dict.map (\_ example -> example.state) usageExamplesDict , isSideNavOpen = False , openTooltip = Nothing , selectedContent = ComponentExamples @@ -101,21 +92,54 @@ type Msg | SwallowEvent +examplesDict : Dict String (Example Examples.State Examples.Msg) +examplesDict = + Dict.fromList + (List.map + (\example -> ( Example.routeName example, example )) + Examples.all + ) + + +findExample : Model k -> String -> Maybe ( Example Examples.State Examples.Msg, Examples.State ) +findExample model key = + Dict.get key model.moduleStates + |> Maybe.andThen + (\state -> + Dict.get key examplesDict + |> Maybe.map (\example -> ( example, state )) + ) + + +usageExamplesDict : Dict String (UsageExample UsageExamples.State UsageExamples.Msg) +usageExamplesDict = + Dict.fromList + (List.map (\example -> ( UsageExample.routeName example, example )) + UsageExamples.all + ) + + +findUsageExample : Model k -> String -> Maybe ( UsageExample UsageExamples.State UsageExamples.Msg, UsageExamples.State ) +findUsageExample model key = + Dict.get key model.usageExampleStates + |> Maybe.andThen + (\state -> + Dict.get key usageExamplesDict + |> Maybe.map (\example -> ( example, state )) + ) + + update : Msg -> Model key -> ( Model key, Effect ) update action model = case action of UpdateModuleStates key exampleMsg -> - case Dict.get key model.moduleStates of - Just example -> - example.update exampleMsg example.state + case findExample model key of + Just ( example, exampleState ) -> + example.update exampleMsg exampleState |> Tuple.mapFirst (\newState -> - let - newExample = - { example | state = newState } - in { model - | moduleStates = Dict.insert key newExample model.moduleStates + | moduleStates = Dict.insert key newState model.moduleStates } ) |> Tuple.mapSecond (Cmd.map (UpdateModuleStates key) >> Command) @@ -124,17 +148,13 @@ update action model = ( model, None ) UpdateUsageExamples key exampleMsg -> - case Dict.get key model.usageExampleStates of - Just usageExample -> - usageExample.update exampleMsg usageExample.state + case findUsageExample model key of + Just ( usageExample, usageExampleState ) -> + usageExample.update exampleMsg usageExampleState |> Tuple.mapFirst (\newState -> - let - newExample = - { usageExample | state = newState } - in { model - | usageExampleStates = Dict.insert key newExample model.usageExampleStates + | usageExampleStates = Dict.insert key newState model.usageExampleStates } ) |> Tuple.mapSecond (Cmd.map (UpdateUsageExamples key) >> Command) @@ -160,7 +180,7 @@ update action model = , previousRoute = Just model.route , isSideNavOpen = False } - , Maybe.map FocusOn (Routes.headerId route model.moduleStates model.usageExampleStates) + , Maybe.map FocusOn (Routes.headerId route examplesDict usageExamplesDict) |> Maybe.withDefault None ) @@ -267,10 +287,10 @@ subscriptions : Model key -> Sub Msg subscriptions model = let exampleSubs exampleName = - case Dict.get exampleName model.moduleStates of - Just example -> + case findExample model exampleName of + Just ( example, exampleState ) -> Sub.map (UpdateModuleStates exampleName) - (example.subscriptions example.state) + (example.subscriptions exampleState) Nothing -> Sub.none @@ -284,10 +304,10 @@ subscriptions model = exampleSubs exampleName Routes.Usage exampleName -> - case Dict.get exampleName model.usageExampleStates of - Just example -> + case findUsageExample model exampleName of + Just ( example, exampleState ) -> Sub.map (UpdateUsageExamples exampleName) - (example.subscriptions example.state) + (example.subscriptions exampleState) Nothing -> Sub.none @@ -313,10 +333,10 @@ view model = ] exampleDocument exampleName = - case Dict.get exampleName model.moduleStates of - Just example -> + case findExample model exampleName of + Just ( example, exampleState ) -> { title = example.name ++ " in the NoRedInk Component Catalog" - , body = viewExample model example |> toBody + , body = viewExample model example exampleState |> toBody } Nothing -> @@ -340,7 +360,7 @@ view model = } Routes.Usage exampleName -> - case Dict.get exampleName model.usageExampleStates of + case Dict.get exampleName usageExamplesDict of Just example -> { title = example.name ++ " Usage Example in the NoRedInk Component Catalog" , body = viewUsageExample model example |> toBody @@ -360,8 +380,12 @@ view model = } -viewExample : Model key -> Example a Examples.Msg -> Html Msg -viewExample model example = +viewExample : Model key -> Example a Examples.Msg -> a -> Html Msg +viewExample model example0 exampleState = + let + example = + { example0 | state = exampleState } + in Example.view { packageDependencies = model.elliePackageDependencies } example |> Html.map (UpdateModuleStates example.name) |> viewLayout model [ Example.extraLinks (UpdateModuleStates example.name) example ] @@ -394,8 +418,8 @@ viewAll model = , navigate = UsageExample.routeName >> Routes.Usage >> ChangeRoute , exampleHref = UsageExample.routeName >> Routes.Usage >> Routes.toString } - (Dict.values model.moduleStates) - (Dict.values model.usageExampleStates) + Examples.all + UsageExamples.all model.selectedContent @@ -409,7 +433,7 @@ viewCategory model category = (Set.fromList Category.sorter item.categories) category ) - (Dict.values items) + items in viewLayout model [] <| viewExamplePreviews (Category.forId category) @@ -421,8 +445,8 @@ viewCategory model category = , navigate = UsageExample.routeName >> Routes.Usage >> ChangeRoute , exampleHref = UsageExample.routeName >> Routes.Usage >> Routes.toString } - (filtered model.moduleStates) - (filtered model.usageExampleStates) + (filtered Examples.all) + (filtered UsageExamples.all) model.selectedContent @@ -431,8 +455,8 @@ viewLayout model headerExtras content = Html.div [] [ Html.header [] [ Routes.viewHeader model.route - model.moduleStates - model.usageExampleStates + examplesDict + usageExamplesDict headerExtras ] , Html.div @@ -530,7 +554,7 @@ navigation : Model key -> Html Msg navigation { moduleStates, route, isSideNavOpen, openTooltip } = let examples = - Dict.values moduleStates + Examples.all exampleEntriesForCategory category = List.filter (\{ categories } -> List.any ((==) category) categories) examples From e60ca1ef89cd3be7e6e7a7e6eb644d6635328e3b Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Fri, 2 Feb 2024 11:17:26 -0300 Subject: [PATCH 20/21] Rename Example.state to Example.init. Add state to view --- component-catalog/src/App.elm | 24 ++++++++----------- component-catalog/src/Example.elm | 18 +++++++------- component-catalog/src/Examples/Accordion.elm | 2 +- .../src/Examples/AnimatedIcon.elm | 2 +- component-catalog/src/Examples/Balloon.elm | 2 +- component-catalog/src/Examples/Block.elm | 2 +- .../src/Examples/BreadCrumbs.elm | 2 +- component-catalog/src/Examples/Button.elm | 2 +- component-catalog/src/Examples/Carousel.elm | 2 +- component-catalog/src/Examples/Checkbox.elm | 2 +- .../src/Examples/ClickableSvg.elm | 2 +- .../src/Examples/ClickableText.elm | 2 +- component-catalog/src/Examples/Colors.elm | 2 +- component-catalog/src/Examples/Confetti.elm | 2 +- component-catalog/src/Examples/Container.elm | 2 +- component-catalog/src/Examples/Divider.elm | 2 +- component-catalog/src/Examples/FocusRing.elm | 2 +- component-catalog/src/Examples/Fonts.elm | 2 +- component-catalog/src/Examples/Header.elm | 2 +- component-catalog/src/Examples/Heading.elm | 2 +- .../src/Examples/Highlighter.elm | 2 +- .../src/Examples/HighlighterToolbar.elm | 2 +- .../src/Examples/IconExamples.elm | 2 +- component-catalog/src/Examples/Loading.elm | 2 +- component-catalog/src/Examples/Menu.elm | 2 +- component-catalog/src/Examples/Message.elm | 2 +- component-catalog/src/Examples/Modal.elm | 2 +- component-catalog/src/Examples/Outline.elm | 2 +- component-catalog/src/Examples/Page.elm | 2 +- component-catalog/src/Examples/Pagination.elm | 2 +- component-catalog/src/Examples/Panel.elm | 2 +- .../src/Examples/PremiumCheckbox.elm | 2 +- .../src/Examples/QuestionBox.elm | 2 +- .../src/Examples/RadioButton.elm | 2 +- .../src/Examples/RadioButtonDotless.elm | 2 +- component-catalog/src/Examples/RingGauge.elm | 2 +- .../src/Examples/SegmentedControl.elm | 2 +- component-catalog/src/Examples/Select.elm | 2 +- component-catalog/src/Examples/Shadows.elm | 2 +- component-catalog/src/Examples/SideNav.elm | 2 +- .../src/Examples/SortableTable.elm | 2 +- component-catalog/src/Examples/Spacing.elm | 2 +- component-catalog/src/Examples/Switch.elm | 2 +- component-catalog/src/Examples/Table.elm | 2 +- component-catalog/src/Examples/Tabs.elm | 2 +- .../src/Examples/TabsMinimal.elm | 2 +- component-catalog/src/Examples/Text.elm | 2 +- component-catalog/src/Examples/TextArea.elm | 2 +- component-catalog/src/Examples/TextInput.elm | 2 +- component-catalog/src/Examples/Tooltip.elm | 2 +- component-catalog/src/UsageExample.elm | 18 +++++++------- .../ClickableCardWithTooltip.elm | 2 +- .../src/UsageExamples/FocusLoop.elm | 2 +- component-catalog/src/UsageExamples/Form.elm | 2 +- 54 files changed, 79 insertions(+), 83 deletions(-) diff --git a/component-catalog/src/App.elm b/component-catalog/src/App.elm index 48c82559..8c3b76d4 100644 --- a/component-catalog/src/App.elm +++ b/component-catalog/src/App.elm @@ -55,8 +55,8 @@ init : () -> Url -> key -> ( Model key, Effect ) init () url key = ( { route = Routes.fromLocation url , previousRoute = Nothing - , moduleStates = Dict.map (\_ example -> example.state) examplesDict - , usageExampleStates = Dict.map (\_ example -> example.state) usageExamplesDict + , moduleStates = Dict.map (\_ example -> example.init) examplesDict + , usageExampleStates = Dict.map (\_ example -> example.init) usageExamplesDict , isSideNavOpen = False , openTooltip = Nothing , selectedContent = ComponentExamples @@ -360,10 +360,10 @@ view model = } Routes.Usage exampleName -> - case Dict.get exampleName usageExamplesDict of - Just example -> + case findUsageExample model exampleName of + Just ( example, state ) -> { title = example.name ++ " Usage Example in the NoRedInk Component Catalog" - , body = viewUsageExample model example |> toBody + , body = viewUsageExample model example state |> toBody } Nothing -> @@ -381,19 +381,15 @@ view model = viewExample : Model key -> Example a Examples.Msg -> a -> Html Msg -viewExample model example0 exampleState = - let - example = - { example0 | state = exampleState } - in - Example.view { packageDependencies = model.elliePackageDependencies } example +viewExample model example state = + Example.view { packageDependencies = model.elliePackageDependencies } example state |> Html.map (UpdateModuleStates example.name) |> viewLayout model [ Example.extraLinks (UpdateModuleStates example.name) example ] -viewUsageExample : Model key -> UsageExample a UsageExamples.Msg -> Html Msg -viewUsageExample model example = - UsageExample.view example +viewUsageExample : Model key -> UsageExample a UsageExamples.Msg -> a -> Html Msg +viewUsageExample model example state = + UsageExample.view example state |> Html.map (UpdateUsageExamples (UsageExample.routeName example)) |> viewLayout model [] diff --git a/component-catalog/src/Example.elm b/component-catalog/src/Example.elm index d4d8be66..053fca39 100644 --- a/component-catalog/src/Example.elm +++ b/component-catalog/src/Example.elm @@ -22,7 +22,7 @@ import Nri.Ui.MediaQuery.V1 exposing (mobile) type alias Example state msg = { name : String , version : Int - , state : state + , init : state , update : msg -> state -> ( state, Cmd msg ) , subscriptions : state -> Sub msg , preview : List (Html Never) @@ -56,7 +56,7 @@ wrapMsg : wrapMsg wrapMsg_ unwrapMsg example = { name = example.name , version = example.version - , state = example.state + , init = example.init , update = \msg2 state -> case unwrapMsg msg2 of @@ -86,7 +86,7 @@ wrapState : wrapState wrapState_ unwrapState example = { name = example.name , version = example.version - , state = wrapState_ example.state + , init = wrapState_ example.init , update = \msg state2 -> case unwrapState state2 of @@ -160,14 +160,14 @@ preview_ { swallowEvent, navigate, exampleHref } example = ] -view : EllieLink.Config -> Example state msg -> Html msg -view ellieLinkConfig example = +view : EllieLink.Config -> Example state msg -> state -> Html msg +view ellieLinkConfig example state = Html.div [ Attributes.id (String.replace "." "-" example.name) ] - (view_ ellieLinkConfig example) + (view_ ellieLinkConfig example state) -view_ : EllieLink.Config -> Example state msg -> List (Html msg) -view_ ellieLinkConfig example = +view_ : EllieLink.Config -> Example state msg -> state -> List (Html msg) +view_ ellieLinkConfig example state = [ Html.div [ Attributes.css [ Css.displayFlex @@ -184,7 +184,7 @@ view_ ellieLinkConfig example = , KeyboardSupport.view example.keyboardSupport ] , Html.div [ Attributes.css [ Css.marginBottom (Css.px 200) ] ] - (example.view ellieLinkConfig example.state) + (example.view ellieLinkConfig state) ] diff --git a/component-catalog/src/Examples/Accordion.elm b/component-catalog/src/Examples/Accordion.elm index 6520feb5..0dc3eee0 100644 --- a/component-catalog/src/Examples/Accordion.elm +++ b/component-catalog/src/Examples/Accordion.elm @@ -52,7 +52,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/AnimatedIcon.elm b/component-catalog/src/Examples/AnimatedIcon.elm index 2cc88252..b496291e 100644 --- a/component-catalog/src/Examples/AnimatedIcon.elm +++ b/component-catalog/src/Examples/AnimatedIcon.elm @@ -40,7 +40,7 @@ example = , version = version , categories = [ Animations, Icons ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Balloon.elm b/component-catalog/src/Examples/Balloon.elm index f07071cb..1c2b4817 100644 --- a/component-catalog/src/Examples/Balloon.elm +++ b/component-catalog/src/Examples/Balloon.elm @@ -41,7 +41,7 @@ example = , version = version , categories = [ Messaging ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Block.elm b/component-catalog/src/Examples/Block.elm index bb65aa7c..93c48adf 100644 --- a/component-catalog/src/Examples/Block.elm +++ b/component-catalog/src/Examples/Block.elm @@ -48,7 +48,7 @@ example = , version = version , categories = [ Instructional ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/BreadCrumbs.elm b/component-catalog/src/Examples/BreadCrumbs.elm index e80e21d2..e243e710 100644 --- a/component-catalog/src/Examples/BreadCrumbs.elm +++ b/component-catalog/src/Examples/BreadCrumbs.elm @@ -52,7 +52,7 @@ example = , version = version , categories = [ Navigation ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Button.elm b/component-catalog/src/Examples/Button.elm index 60e0c3a7..5b209a85 100644 --- a/component-catalog/src/Examples/Button.elm +++ b/component-catalog/src/Examples/Button.elm @@ -41,7 +41,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Carousel.elm b/component-catalog/src/Examples/Carousel.elm index 70643345..71b43f1f 100644 --- a/component-catalog/src/Examples/Carousel.elm +++ b/component-catalog/src/Examples/Carousel.elm @@ -207,7 +207,7 @@ example = , result = "Select the tab to the right of the currently-selected Tab" } ] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Checkbox.elm b/component-catalog/src/Examples/Checkbox.elm index be434a54..aa00d6c4 100644 --- a/component-catalog/src/Examples/Checkbox.elm +++ b/component-catalog/src/Examples/Checkbox.elm @@ -48,7 +48,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = preview diff --git a/component-catalog/src/Examples/ClickableSvg.elm b/component-catalog/src/Examples/ClickableSvg.elm index 21fe045a..33af2183 100644 --- a/component-catalog/src/Examples/ClickableSvg.elm +++ b/component-catalog/src/Examples/ClickableSvg.elm @@ -39,7 +39,7 @@ example = , version = version , categories = [ Buttons, Icons ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/ClickableText.elm b/component-catalog/src/Examples/ClickableText.elm index 9ab7b0ee..57ff7502 100644 --- a/component-catalog/src/Examples/ClickableText.elm +++ b/component-catalog/src/Examples/ClickableText.elm @@ -35,7 +35,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Colors.elm b/component-catalog/src/Examples/Colors.elm index 8aa432e0..a75b10c6 100644 --- a/component-catalog/src/Examples/Colors.elm +++ b/component-catalog/src/Examples/Colors.elm @@ -43,7 +43,7 @@ example = , version = 1 , categories = [ Atoms ] , keyboardSupport = [] - , state = () + , init = () , update = \_ state -> ( state, Cmd.none ) , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Confetti.elm b/component-catalog/src/Examples/Confetti.elm index 21047587..e9193e6a 100644 --- a/component-catalog/src/Examples/Confetti.elm +++ b/component-catalog/src/Examples/Confetti.elm @@ -43,7 +43,7 @@ example = , version = version , categories = [ Animations ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \state -> diff --git a/component-catalog/src/Examples/Container.elm b/component-catalog/src/Examples/Container.elm index 0ef4cfc0..7efa7be7 100644 --- a/component-catalog/src/Examples/Container.elm +++ b/component-catalog/src/Examples/Container.elm @@ -38,7 +38,7 @@ example = , version = version , categories = [ Layout ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Divider.elm b/component-catalog/src/Examples/Divider.elm index e36466d4..42d2f3a4 100644 --- a/component-catalog/src/Examples/Divider.elm +++ b/component-catalog/src/Examples/Divider.elm @@ -28,7 +28,7 @@ example = , version = 2 , categories = [ Layout ] , keyboardSupport = [] - , state = {} + , init = {} , update = \_ state -> ( state, Cmd.none ) , subscriptions = \_ -> Sub.none , preview = [ Divider.view "Dividing Line" ] diff --git a/component-catalog/src/Examples/FocusRing.elm b/component-catalog/src/Examples/FocusRing.elm index 7993aee2..fbac688d 100644 --- a/component-catalog/src/Examples/FocusRing.elm +++ b/component-catalog/src/Examples/FocusRing.elm @@ -39,7 +39,7 @@ example = , version = 1 , categories = [ Atoms ] , keyboardSupport = [] - , state = { isAccordionOpen = False } + , init = { isAccordionOpen = False } , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Fonts.elm b/component-catalog/src/Examples/Fonts.elm index d2e0baca..69284eaf 100644 --- a/component-catalog/src/Examples/Fonts.elm +++ b/component-catalog/src/Examples/Fonts.elm @@ -36,7 +36,7 @@ example = , version = 1 , categories = [ Text, Atoms ] , keyboardSupport = [] - , state = () + , init = () , update = \_ state -> ( state, Cmd.none ) , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Header.elm b/component-catalog/src/Examples/Header.elm index 9c60ebb8..0fe7b626 100644 --- a/component-catalog/src/Examples/Header.elm +++ b/component-catalog/src/Examples/Header.elm @@ -45,7 +45,7 @@ example = , version = version , categories = [ Layout ] , keyboardSupport = [] - , state = init Nothing + , init = init Nothing , update = update , subscriptions = \_ -> Sub.none , preview = [ viewPreview ] diff --git a/component-catalog/src/Examples/Heading.elm b/component-catalog/src/Examples/Heading.elm index 9dbde77d..cfabbf86 100644 --- a/component-catalog/src/Examples/Heading.elm +++ b/component-catalog/src/Examples/Heading.elm @@ -36,7 +36,7 @@ example = , version = version , categories = [ Text ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Highlighter.elm b/component-catalog/src/Examples/Highlighter.elm index 257de734..f365c43c 100644 --- a/component-catalog/src/Examples/Highlighter.elm +++ b/component-catalog/src/Examples/Highlighter.elm @@ -47,7 +47,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.map HighlighterMsg subscriptions , preview = diff --git a/component-catalog/src/Examples/HighlighterToolbar.elm b/component-catalog/src/Examples/HighlighterToolbar.elm index 06719721..8448fee7 100644 --- a/component-catalog/src/Examples/HighlighterToolbar.elm +++ b/component-catalog/src/Examples/HighlighterToolbar.elm @@ -39,7 +39,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/IconExamples.elm b/component-catalog/src/Examples/IconExamples.elm index 7134a87b..88cb27ec 100644 --- a/component-catalog/src/Examples/IconExamples.elm +++ b/component-catalog/src/Examples/IconExamples.elm @@ -53,7 +53,7 @@ example config = , version = config.version , categories = [ Icons ] , keyboardSupport = [] - , state = init config + , init = init config , update = update , subscriptions = \_ -> Sub.none , preview = config.preview diff --git a/component-catalog/src/Examples/Loading.elm b/component-catalog/src/Examples/Loading.elm index 9422f84d..d69ac09c 100644 --- a/component-catalog/src/Examples/Loading.elm +++ b/component-catalog/src/Examples/Loading.elm @@ -90,7 +90,7 @@ example = , version = 1 , categories = [ Animations ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = subscriptions , preview = diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm index dd4b004d..b0fb5a2d 100644 --- a/component-catalog/src/Examples/Menu.elm +++ b/component-catalog/src/Examples/Menu.elm @@ -54,7 +54,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , categories = [ Layout ] diff --git a/component-catalog/src/Examples/Message.elm b/component-catalog/src/Examples/Message.elm index a843a55a..1fb41648 100644 --- a/component-catalog/src/Examples/Message.elm +++ b/component-catalog/src/Examples/Message.elm @@ -145,7 +145,7 @@ example = , version = version , categories = [ Messaging ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Modal.elm b/component-catalog/src/Examples/Modal.elm index 895739cc..e2a8d728 100644 --- a/component-catalog/src/Examples/Modal.elm +++ b/component-catalog/src/Examples/Modal.elm @@ -136,7 +136,7 @@ example = , result = "If 'dismissOnEscAndOverlayClick' is set to true, closes the modal. Else, does nothing." } ] - , state = init + , init = init , update = update , subscriptions = subscriptions , preview = diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 8c6d7f6b..b993e22a 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -42,7 +42,7 @@ example = , version = version , categories = [ Layout, Instructional ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = [ preview ] diff --git a/component-catalog/src/Examples/Page.elm b/component-catalog/src/Examples/Page.elm index 13727fec..9abc0adf 100644 --- a/component-catalog/src/Examples/Page.elm +++ b/component-catalog/src/Examples/Page.elm @@ -61,7 +61,7 @@ example = , version = version , categories = [ Messaging ] , keyboardSupport = [] - , state = controlSettings + , init = controlSettings , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Pagination.elm b/component-catalog/src/Examples/Pagination.elm index ef97f655..51ca53da 100644 --- a/component-catalog/src/Examples/Pagination.elm +++ b/component-catalog/src/Examples/Pagination.elm @@ -39,7 +39,7 @@ example = , version = version , categories = [ Navigation ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Panel.elm b/component-catalog/src/Examples/Panel.elm index 7d5828ef..36d1a32d 100644 --- a/component-catalog/src/Examples/Panel.elm +++ b/component-catalog/src/Examples/Panel.elm @@ -40,7 +40,7 @@ example = , version = version , categories = [ Layout ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/PremiumCheckbox.elm b/component-catalog/src/Examples/PremiumCheckbox.elm index 39ced3a5..f1db1ecd 100644 --- a/component-catalog/src/Examples/PremiumCheckbox.elm +++ b/component-catalog/src/Examples/PremiumCheckbox.elm @@ -45,7 +45,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = preview diff --git a/component-catalog/src/Examples/QuestionBox.elm b/component-catalog/src/Examples/QuestionBox.elm index f4da4b98..a4547b1a 100644 --- a/component-catalog/src/Examples/QuestionBox.elm +++ b/component-catalog/src/Examples/QuestionBox.elm @@ -46,7 +46,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , categories = [ Instructional ] diff --git a/component-catalog/src/Examples/RadioButton.elm b/component-catalog/src/Examples/RadioButton.elm index 0fbfffdb..c0bc017d 100644 --- a/component-catalog/src/Examples/RadioButton.elm +++ b/component-catalog/src/Examples/RadioButton.elm @@ -59,7 +59,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = subscriptions , preview = preview diff --git a/component-catalog/src/Examples/RadioButtonDotless.elm b/component-catalog/src/Examples/RadioButtonDotless.elm index 365fa571..c4011194 100644 --- a/component-catalog/src/Examples/RadioButtonDotless.elm +++ b/component-catalog/src/Examples/RadioButtonDotless.elm @@ -157,7 +157,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = preview diff --git a/component-catalog/src/Examples/RingGauge.elm b/component-catalog/src/Examples/RingGauge.elm index 7a656cd6..0c103e14 100644 --- a/component-catalog/src/Examples/RingGauge.elm +++ b/component-catalog/src/Examples/RingGauge.elm @@ -41,7 +41,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = controlSettings + , init = controlSettings , update = update , subscriptions = \_ -> Sub.none , categories = [ Progress, Icons ] diff --git a/component-catalog/src/Examples/SegmentedControl.elm b/component-catalog/src/Examples/SegmentedControl.elm index 32041dd6..1060eda3 100644 --- a/component-catalog/src/Examples/SegmentedControl.elm +++ b/component-catalog/src/Examples/SegmentedControl.elm @@ -50,7 +50,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = [ viewPreview ] diff --git a/component-catalog/src/Examples/Select.elm b/component-catalog/src/Examples/Select.elm index 68bb153f..25645295 100644 --- a/component-catalog/src/Examples/Select.elm +++ b/component-catalog/src/Examples/Select.elm @@ -39,7 +39,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , categories = [ Inputs ] diff --git a/component-catalog/src/Examples/Shadows.elm b/component-catalog/src/Examples/Shadows.elm index 51f379e4..90a7e2df 100644 --- a/component-catalog/src/Examples/Shadows.elm +++ b/component-catalog/src/Examples/Shadows.elm @@ -32,7 +32,7 @@ example = , version = 1 , categories = [ Atoms ] , keyboardSupport = [] - , state = () + , init = () , update = \_ state -> ( state, Cmd.none ) , subscriptions = \_ -> Sub.none , preview = List.map (\( _, style, _ ) -> viewPreviewShadow style) allShadows diff --git a/component-catalog/src/Examples/SideNav.elm b/component-catalog/src/Examples/SideNav.elm index 7bba0790..5838253a 100644 --- a/component-catalog/src/Examples/SideNav.elm +++ b/component-catalog/src/Examples/SideNav.elm @@ -36,7 +36,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , categories = [ Layout, Navigation ] diff --git a/component-catalog/src/Examples/SortableTable.elm b/component-catalog/src/Examples/SortableTable.elm index 1c0b097a..a8a60553 100644 --- a/component-catalog/src/Examples/SortableTable.elm +++ b/component-catalog/src/Examples/SortableTable.elm @@ -41,7 +41,7 @@ example = , version = version , categories = [ Layout ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Spacing.elm b/component-catalog/src/Examples/Spacing.elm index e423e1ae..dfeef7aa 100644 --- a/component-catalog/src/Examples/Spacing.elm +++ b/component-catalog/src/Examples/Spacing.elm @@ -43,7 +43,7 @@ example = , version = version , categories = [ Layout ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = preview diff --git a/component-catalog/src/Examples/Switch.elm b/component-catalog/src/Examples/Switch.elm index a6568baf..76cc1c24 100644 --- a/component-catalog/src/Examples/Switch.elm +++ b/component-catalog/src/Examples/Switch.elm @@ -42,7 +42,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Table.elm b/component-catalog/src/Examples/Table.elm index 03e1a8e0..19a1416f 100644 --- a/component-catalog/src/Examples/Table.elm +++ b/component-catalog/src/Examples/Table.elm @@ -39,7 +39,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = controlSettings + , init = controlSettings , update = update , subscriptions = \_ -> Sub.none , categories = [ Layout ] diff --git a/component-catalog/src/Examples/Tabs.elm b/component-catalog/src/Examples/Tabs.elm index f6649e3b..6273448a 100644 --- a/component-catalog/src/Examples/Tabs.elm +++ b/component-catalog/src/Examples/Tabs.elm @@ -57,7 +57,7 @@ example = , result = "Select the tab to the right of the currently-selected Tab" } ] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/TabsMinimal.elm b/component-catalog/src/Examples/TabsMinimal.elm index 483d125e..e2fce15b 100644 --- a/component-catalog/src/Examples/TabsMinimal.elm +++ b/component-catalog/src/Examples/TabsMinimal.elm @@ -54,7 +54,7 @@ example = , result = "Select the tab to the right of the currently-selected Tab" } ] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Text.elm b/component-catalog/src/Examples/Text.elm index d3d3fe5e..a1f1df71 100644 --- a/component-catalog/src/Examples/Text.elm +++ b/component-catalog/src/Examples/Text.elm @@ -38,7 +38,7 @@ example = , version = version , categories = [ Text ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/TextArea.elm b/component-catalog/src/Examples/TextArea.elm index d6fdf29d..a7c179ee 100644 --- a/component-catalog/src/Examples/TextArea.elm +++ b/component-catalog/src/Examples/TextArea.elm @@ -39,7 +39,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , categories = [ Inputs ] diff --git a/component-catalog/src/Examples/TextInput.elm b/component-catalog/src/Examples/TextInput.elm index 5f2b4350..199d7378 100644 --- a/component-catalog/src/Examples/TextInput.elm +++ b/component-catalog/src/Examples/TextInput.elm @@ -42,7 +42,7 @@ example = , version = version , categories = [ Inputs ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/Examples/Tooltip.elm b/component-catalog/src/Examples/Tooltip.elm index 39dcdb59..c4d5df47 100644 --- a/component-catalog/src/Examples/Tooltip.elm +++ b/component-catalog/src/Examples/Tooltip.elm @@ -59,7 +59,7 @@ example = , result = "While focusing a tooltip trigger, opens/closes the tooltip. May trigger the underlying action too." } ] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/component-catalog/src/UsageExample.elm b/component-catalog/src/UsageExample.elm index 2d9fda3f..b8fdba3f 100644 --- a/component-catalog/src/UsageExample.elm +++ b/component-catalog/src/UsageExample.elm @@ -18,7 +18,7 @@ import Nri.Ui.Text.V6 as Text type alias UsageExample state msg = { name : String - , state : state + , init : state , update : msg -> state -> ( state, Cmd msg ) , subscriptions : state -> Sub msg , view : state -> List (Html msg) @@ -49,7 +49,7 @@ wrapMsg : -> UsageExample state msg2 wrapMsg wrapMsg_ unwrapMsg example = { name = example.name - , state = example.state + , init = example.init , update = \msg2 state -> case unwrapMsg msg2 of @@ -76,7 +76,7 @@ wrapState : -> UsageExample state2 msg wrapState wrapState_ unwrapState example = { name = example.name - , state = wrapState_ example.state + , init = wrapState_ example.init , update = \msg state2 -> case unwrapState state2 of @@ -140,14 +140,14 @@ preview_ { swallowEvent, navigate, exampleHref } example = ] -view : UsageExample state msg -> Html msg -view example = +view : UsageExample state msg -> state -> Html msg +view example state = Html.div [ Attributes.id (String.replace " " "-" example.name) ] - (view_ example) + (view_ example state) -view_ : UsageExample state msg -> List (Html msg) -view_ example = +view_ : UsageExample state msg -> state -> List (Html msg) +view_ example state = [ Html.div [ Attributes.css [ Css.displayFlex @@ -163,7 +163,7 @@ view_ example = example.about ] , Html.div [ Attributes.css [ Css.marginBottom (Css.px 200) ] ] - (example.view example.state) + (example.view state) ] diff --git a/component-catalog/src/UsageExamples/ClickableCardWithTooltip.elm b/component-catalog/src/UsageExamples/ClickableCardWithTooltip.elm index e6059102..aa80988d 100644 --- a/component-catalog/src/UsageExamples/ClickableCardWithTooltip.elm +++ b/component-catalog/src/UsageExamples/ClickableCardWithTooltip.elm @@ -21,7 +21,7 @@ example : UsageExample State Msg example = { name = "Clickable Card with Tooltip" , categories = [ Messaging ] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , about = [] diff --git a/component-catalog/src/UsageExamples/FocusLoop.elm b/component-catalog/src/UsageExamples/FocusLoop.elm index bed6f9b8..740e9e39 100644 --- a/component-catalog/src/UsageExamples/FocusLoop.elm +++ b/component-catalog/src/UsageExamples/FocusLoop.elm @@ -31,7 +31,7 @@ example : UsageExample State Msg example = { name = "Focus Loop" , categories = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , about = [] diff --git a/component-catalog/src/UsageExamples/Form.elm b/component-catalog/src/UsageExamples/Form.elm index 330786e8..65338b3a 100644 --- a/component-catalog/src/UsageExamples/Form.elm +++ b/component-catalog/src/UsageExamples/Form.elm @@ -21,7 +21,7 @@ example : UsageExample State Msg example = { name = "Form" , categories = [ Inputs ] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , about = [] From 2babfc5807a3f123acf62ad3274843c339f63bcd Mon Sep 17 00:00:00 2001 From: "Brian J. Cardiff" Date: Fri, 2 Feb 2024 11:36:28 -0300 Subject: [PATCH 21/21] Fix example order --- component-catalog/src/Examples.elm | 38 +++++++++++++++--------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/component-catalog/src/Examples.elm b/component-catalog/src/Examples.elm index d4f0b7af..3016e7e1 100644 --- a/component-catalog/src/Examples.elm +++ b/component-catalog/src/Examples.elm @@ -359,25 +359,6 @@ all = DividerState childState -> Just childState - _ -> - Nothing - ) - , Fonts.example - |> Example.wrapMsg FontsMsg - (\msg -> - case msg of - FontsMsg childMsg -> - Just childMsg - - _ -> - Nothing - ) - |> Example.wrapState FontsState - (\msg -> - case msg of - FontsState childState -> - Just childState - _ -> Nothing ) @@ -397,6 +378,25 @@ all = FocusRingState childState -> Just childState + _ -> + Nothing + ) + , Fonts.example + |> Example.wrapMsg FontsMsg + (\msg -> + case msg of + FontsMsg childMsg -> + Just childMsg + + _ -> + Nothing + ) + |> Example.wrapState FontsState + (\msg -> + case msg of + FontsState childState -> + Just childState + _ -> Nothing )