diff --git a/component-catalog/src/App.elm b/component-catalog/src/App.elm index 83b9ce1d..8c3b76d4 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.init) examplesDict + , usageExampleStates = Dict.map (\_ example -> example.init) 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,10 +360,10 @@ view model = } Routes.Usage exampleName -> - case Dict.get exampleName model.usageExampleStates 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 -> @@ -360,16 +380,16 @@ view model = } -viewExample : Model key -> Example a Examples.Msg -> Html Msg -viewExample model example = - Example.view { packageDependencies = model.elliePackageDependencies } example +viewExample : Model key -> Example a Examples.Msg -> a -> Html Msg +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 [] @@ -394,8 +414,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 +429,7 @@ viewCategory model category = (Set.fromList Category.sorter item.categories) category ) - (Dict.values items) + items in viewLayout model [] <| viewExamplePreviews (Category.forId category) @@ -421,8 +441,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 +451,8 @@ viewLayout model headerExtras content = Html.div [] [ Html.header [] [ Routes.viewHeader model.route - model.moduleStates - model.usageExampleStates + examplesDict + usageExamplesDict headerExtras ] , Html.div @@ -530,7 +550,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 diff --git a/component-catalog/src/Example.elm b/component-catalog/src/Example.elm index 3525b010..053fca39 100644 --- a/component-catalog/src/Example.elm +++ b/component-catalog/src/Example.elm @@ -17,13 +17,12 @@ 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 = { name : String , version : Int - , state : state + , init : state , update : msg -> state -> ( state, Cmd msg ) , subscriptions : state -> Sub msg , preview : List (Html Never) @@ -57,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 @@ -87,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 @@ -161,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 @@ -185,13 +184,13 @@ 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) ] 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.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 ) diff --git a/component-catalog/src/Examples/Accordion.elm b/component-catalog/src/Examples/Accordion.elm index d3180b0a..0dc3eee0 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 @@ -51,7 +52,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = @@ -69,7 +70,19 @@ example = , Text.caption [ Text.plaintext "Accordion content." ] ] ] - , about = [] + , about = + [ 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." + ] + ] + ] , view = view , categories = [ Layout ] , keyboardSupport = 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 4e9a24a5..13b5ea9b 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 9b2a18f8..48992873 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 = @@ -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 243a51d1..436dba98 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 @@ -25,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 @@ -50,7 +52,7 @@ example = , version = version , categories = [ Navigation ] , keyboardSupport = [] - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = @@ -71,7 +73,21 @@ example = , previewText "Sub-Category " ] ] - , about = [] + , about = + [ 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 "." + ] + ] + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/Button.elm b/component-catalog/src/Examples/Button.elm index f9558458..7210a48f 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 @@ -40,7 +41,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , preview = @@ -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/Carousel.elm b/component-catalog/src/Examples/Carousel.elm index 8d412f0a..07c7381d 100644 --- a/component-catalog/src/Examples/Carousel.elm +++ b/component-catalog/src/Examples/Carousel.elm @@ -206,7 +206,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 ea3504fd..f81ed7b6 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 dc03ccb2..b5c816a5 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 c9f9f15b..cfc96bc0 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 0ac2bd71..01845fff 100644 --- a/component-catalog/src/Examples/Confetti.elm +++ b/component-catalog/src/Examples/Confetti.elm @@ -42,7 +42,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 16976f1b..e15d3849 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 dc4f1edc..fbac688d 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 @@ -38,7 +39,7 @@ example = , version = 1 , categories = [ Atoms ] , keyboardSupport = [] - , state = { isAccordionOpen = False } + , init = { isAccordionOpen = False } , update = update , subscriptions = \_ -> Sub.none , preview = @@ -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..69284eaf 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 {-| -} @@ -35,7 +36,7 @@ example = , version = 1 , categories = [ Text, Atoms ] , keyboardSupport = [] - , state = () + , init = () , update = \_ state -> ( state, Cmd.none ) , subscriptions = \_ -> Sub.none , preview = @@ -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/Examples/Header.elm b/component-catalog/src/Examples/Header.elm index e80a0164..dfd8ec0a 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 f1f14de8..36f9d83d 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 eabf823b..2b208910 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 724cb43d..88cb27ec 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 @@ -52,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 @@ -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. +- 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). + +""" + + viewWithCustomStyles : Settings -> String -> List ( String, Svg.Svg, List Css.Style ) -> Html msg viewWithCustomStyles { showIconName } headerText icons = Html.section 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 b16512d7..ca86935d 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 ] @@ -388,6 +388,77 @@ 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.buttonId "defaultTrigger" + , Menu.menuId "defaultTrigger" + ] + [] + } + , { menu = "Menu.button" + , example = + Menu.view (FocusAndToggle "button") + [ Menu.button "Log in" [] + , Menu.isOpen (isOpen "button") + , Menu.buttonId "button" + , Menu.menuId "button" + ] + [] + } + , { menu = "Menu.clickableText" + , example = + Menu.view (FocusAndToggle "clickableText") + [ Menu.clickableText "Log in" [] + , Menu.isOpen (isOpen "clickableText") + , Menu.buttonId "clickableText" + , Menu.menuId "clickableText" + ] + [] + } + , { menu = "Menu.clickableSvg with UiIcon.gear" + , example = + Menu.view (FocusAndToggle "clickableSvg") + [ Menu.clickableSvg "Log in" UiIcon.gear [] + , Menu.isOpen (isOpen "clickableSvg") + , Menu.buttonId "clickableSvg" + , Menu.menuId "clickableSvg" + ] + [] + } + , { menu = "Menu.clickableSvgWithoutIndicator with UiIcon.gear" + , example = + Menu.view (FocusAndToggle "clickableSvgWithoutIndicator") + [ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear [] + , Menu.isOpen (isOpen "clickableSvgWithoutIndicator") + , Menu.buttonId "clickableSvgWithoutIndicator" + , Menu.menuId "clickableSvgWithoutIndicator" + ] + [] + } + ] ] diff --git a/component-catalog/src/Examples/Message.elm b/component-catalog/src/Examples/Message.elm index 7de1a855..7a54a0f9 100644 --- a/component-catalog/src/Examples/Message.elm +++ b/component-catalog/src/Examples/Message.elm @@ -154,7 +154,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 df48c7a2..7bfca5e3 100644 --- a/component-catalog/src/Examples/Pagination.elm +++ b/component-catalog/src/Examples/Pagination.elm @@ -38,7 +38,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 ce199162..54a8b899 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 bbe3b804..969ded8a 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 e15c22b4..8af702d5 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 3858217d..55986228 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 @@ -58,17 +59,19 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , 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 diff --git a/component-catalog/src/Examples/RadioButtonDotless.elm b/component-catalog/src/Examples/RadioButtonDotless.elm index fd069478..31b107cd 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 e82dc61a..30e452b3 100644 --- a/component-catalog/src/Examples/RingGauge.elm +++ b/component-catalog/src/Examples/RingGauge.elm @@ -40,7 +40,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 d818ff54..dccad0d0 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 4dcf5a00..2e854c48 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 @@ -35,7 +36,7 @@ example : Example State Msg example = { name = moduleName , version = version - , state = init + , init = init , update = update , subscriptions = \_ -> Sub.none , categories = [ Layout, Navigation ] @@ -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/component-catalog/src/Examples/SortableTable.elm b/component-catalog/src/Examples/SortableTable.elm index 0ef6e3e1..47bd2525 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 927deb58..0df186de 100644 --- a/component-catalog/src/Examples/Spacing.elm +++ b/component-catalog/src/Examples/Spacing.elm @@ -42,7 +42,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 997a25dd..4bc5bd48 100644 --- a/component-catalog/src/Examples/Switch.elm +++ b/component-catalog/src/Examples/Switch.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/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 48eb478f..47bc6e9c 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 cb8c6ebb..4b1b7991 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 9e638f4f..a681b012 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 1f8a926c..fc688861 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 11504cb0..cded460d 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/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 ++ ".") ] 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 = [] 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/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 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 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' diff --git a/package.json b/package.json index 1f1571e8..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.8.0", + "axe-core": "^4.8.3", "browserify": "^17.0.0", "elm-test": "0.19.1-revision12", "expect": "29.5.0", 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 <li` structure + - honor icon/rightIcon for entries with children ### Changes from V4 @@ -456,7 +457,7 @@ viewSidebarEntry config extraStyles entry_ = id_ = AttributesExtra.safeIdWithPrefix "sidenav-group" entryConfig.title in - li [] + li [ Attributes.css extraStyles ] [ styled span (sharedEntryStyles ++ [ backgroundColor Colors.gray92 @@ -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 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 ]