From e4a5f96d98e97535cf17382583dd654d8bcd4564 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 10:10:55 -0700 Subject: [PATCH 1/9] Improve the extra content example for header to be a bit more realistic --- styleguide-app/Examples/Header.elm | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/styleguide-app/Examples/Header.elm b/styleguide-app/Examples/Header.elm index 45f61486c..379d5b253 100644 --- a/styleguide-app/Examples/Header.elm +++ b/styleguide-app/Examples/Header.elm @@ -22,6 +22,7 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Header.V1 as Header import Nri.Ui.Heading.V3 as Heading +import Nri.Ui.Select.V8 as Select import Nri.Ui.Svg.V1 as Svg import Nri.Ui.UiIcon.V1 as UiIcon @@ -43,7 +44,7 @@ example = , version = version , categories = [ Layout ] , keyboardSupport = [] - , state = init + , state = init Nothing , update = update , subscriptions = \_ -> Sub.none , preview = [ viewPreview ] @@ -143,17 +144,28 @@ viewPreview = {-| -} type alias State = { control : Control Settings + , selection : Maybe String } -init : State -init = +init : Maybe String -> State +init selection = { control = ControlExtra.list |> ControlExtra.optionalListItem "extraContent" (Control.value ( "Header.extraContent [ Html.text \"…\" ]" - , Header.extraContent CommonControls.exampleHtml + , Header.extraContent + [ Select.view "Tortilla Selector" + [ Select.choices identity + [ { label = "Tacos", value = "tacos" } + , { label = "Burritos", value = "burritos" } + , { label = "Enchiladas", value = "enchiladas" } + ] + , Select.value selection + ] + |> map Select + ] ) ) |> ControlExtra.optionalListItem "description" @@ -180,6 +192,7 @@ init = ) (ControlExtra.float 750) ) + , selection = Nothing } @@ -190,6 +203,7 @@ type alias Settings = {-| -} type Msg = UpdateControl (Control Settings) + | Select String update : Msg -> State -> ( State, Cmd Msg ) @@ -197,3 +211,6 @@ update msg state = case msg of UpdateControl settings -> ( { state | control = settings }, Cmd.none ) + + Select value -> + ( { state | selection = Just value }, Cmd.none ) From db7b92280ca4938d528e1c55a97f647771aaf7f1 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 10:16:07 -0700 Subject: [PATCH 2/9] Mark extraSubheadContent as deprecated --- src/Nri/Ui/Header/V1.elm | 3 ++- styleguide-app/Examples/Header.elm | 6 ------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/Nri/Ui/Header/V1.elm b/src/Nri/Ui/Header/V1.elm index a016349d0..c17a110e2 100644 --- a/src/Nri/Ui/Header/V1.elm +++ b/src/Nri/Ui/Header/V1.elm @@ -40,7 +40,8 @@ extraContent value = Attribute (\soFar -> { soFar | extraContent = value }) -{-| -} +{-| This attribute is unused and will be removed in the next version of Header. +-} extraSubheadContent : List (Html msg) -> Attribute route msg extraSubheadContent value = Attribute (\soFar -> { soFar | extraSubheadContent = value }) diff --git a/styleguide-app/Examples/Header.elm b/styleguide-app/Examples/Header.elm index 379d5b253..364ba3d33 100644 --- a/styleguide-app/Examples/Header.elm +++ b/styleguide-app/Examples/Header.elm @@ -177,12 +177,6 @@ init selection = ) (Control.string "This page has some good content.") ) - |> ControlExtra.optionalListItem "extraSubheadContent" - (Control.value - ( "Header.extraSubheadContent [ Html.text \"…\" ]" - , Header.extraSubheadContent CommonControls.exampleHtml - ) - ) |> ControlExtra.optionalListItem "customPageWidth" (Control.map (\width -> From cf1d893c551c17a52896b621d94063ba039d36dc Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 10:33:36 -0700 Subject: [PATCH 3/9] Add and use extraNav from Header in styleguide styling is not done --- src/Nri/Ui/Header/V1.elm | 73 +++++++++++++++++++++++++++++++++++--- styleguide-app/App.elm | 8 ++--- styleguide-app/Example.elm | 33 +++++------------ styleguide-app/Routes.elm | 11 +++--- 4 files changed, 86 insertions(+), 39 deletions(-) diff --git a/src/Nri/Ui/Header/V1.elm b/src/Nri/Ui/Header/V1.elm index c17a110e2..65729bc35 100644 --- a/src/Nri/Ui/Header/V1.elm +++ b/src/Nri/Ui/Header/V1.elm @@ -1,16 +1,42 @@ module Nri.Ui.Header.V1 exposing - ( view - , Attribute, aTagAttributes, extraContent, description, extraSubheadContent, customPageWidth, breadCrumbsLabel + ( view, Attribute + , aTagAttributes, customPageWidth, breadCrumbsLabel + , extraContent, description, extraNav + , extraSubheadContent ) {-| -@docs view -@docs Attribute, aTagAttributes, extraContent, description, extraSubheadContent, customPageWidth, breadCrumbsLabel + +## Changelog + + +### Patch changes + + - marked extraSubheadContent as deprecated + - added extraNav + +@docs view, Attribute + + +## Customize the header + +@docs aTagAttributes, customPageWidth, breadCrumbsLabel + + +## Add additional content to the header + +@docs extraContent, description, extraNav + + +### Deprecated, to be removed: + +@docs extraSubheadContent -} import Accessibility.Styled as Html exposing (Html) +import Accessibility.Styled.Aria as Aria import Css import Css.Media as Media import Html.Styled.Attributes exposing (css) @@ -40,6 +66,22 @@ extraContent value = Attribute (\soFar -> { soFar | extraContent = value }) +{-| -} +extraNav : String -> List (Html msg) -> Attribute route msg +extraNav label value = + Attribute + (\soFar -> + { soFar + | extraNav = + if List.isEmpty value then + Nothing + + else + Just ( label, value ) + } + ) + + {-| This attribute is unused and will be removed in the next version of Header. -} extraSubheadContent : List (Html msg) -> Attribute route msg @@ -78,6 +120,7 @@ type alias Config route msg = , description : Maybe String , pageWidth : Css.Px , breadCrumbsLabel : String + , extraNav : Maybe ( String, List (Html msg) ) } @@ -91,6 +134,7 @@ customize = , description = Nothing , pageWidth = MediaQuery.mobileBreakpoint , breadCrumbsLabel = "breadcrumbs" + , extraNav = Nothing } @@ -148,6 +192,7 @@ view attrs { breadCrumbs, isCurrentRoute } = :: config.extraContent ) , viewJust (viewDescription config.pageWidth) config.description + , viewJust viewExtraNav config.extraNav ] @@ -162,3 +207,23 @@ viewDescription pageWidth description_ = ] , Text.plaintext description_ ] + + +viewExtraNav : ( String, List (Html msg) ) -> Html msg +viewExtraNav ( label, values ) = + Html.nav [ Aria.label label ] + [ Html.ul + [ css + [ Css.margin Css.zero + , Css.padding Css.zero + , Css.displayFlex + , Css.alignItems Css.center + , Css.justifyContent Css.flexStart + , Css.flexWrap Css.wrap + ] + ] + (List.map + (\i -> Html.li [ css [ Css.listStyle Css.none ] ] [ i ]) + values + ) + ] diff --git a/styleguide-app/App.elm b/styleguide-app/App.elm index 89e6c8187..fcd0c83ba 100644 --- a/styleguide-app/App.elm +++ b/styleguide-app/App.elm @@ -18,6 +18,7 @@ import InputMethod exposing (InputMethod) import Json.Decode as Decode import Nri.Ui.CssVendorPrefix.V1 as VendorPrefixed import Nri.Ui.FocusRing.V1 as FocusRing +import Nri.Ui.Header.V1 as Header import Nri.Ui.MediaQuery.V1 exposing (mobile) import Nri.Ui.Page.V3 as Page import Nri.Ui.SideNav.V4 as SideNav @@ -277,10 +278,7 @@ viewExample : Model key -> Example a Examples.Msg -> Html Msg viewExample model example = Example.view { packageDependencies = model.elliePackageDependencies } example |> Html.map (UpdateModuleStates example.name) - |> viewLayout model - [ Example.extraLinks example - |> Html.map (UpdateModuleStates example.name) - ] + |> viewLayout model [ Example.extraLinks (UpdateModuleStates example.name) example ] notFound : Html Msg @@ -319,7 +317,7 @@ viewCategory model category = ) -viewLayout : Model key -> List (Html Msg) -> Html Msg -> Html Msg +viewLayout : Model key -> List (Header.Attribute (Routes.Route Examples.State Examples.Msg) Msg) -> Html Msg -> Html Msg viewLayout model headerExtras content = Html.div [] [ Routes.viewHeader model.route headerExtras diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index efd58e2ee..57508c270 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -12,6 +12,7 @@ import KeyboardSupport exposing (KeyboardSupport) import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Container.V2 as Container +import Nri.Ui.Header.V1 as Header type alias Example state msg = @@ -154,33 +155,15 @@ view_ ellieLinkConfig example = ] -extraLinks : Example state msg -> Html msg -extraLinks example = - Html.nav [ Aria.label (fullName example) ] - [ Html.ul - [ Attributes.css - [ margin zero - , padding zero - , displayFlex - , alignItems center - , justifyContent flexStart - , flexWrap Css.wrap - ] - ] - (List.map - (\i -> - Html.li - [ Attributes.css - [ Css.listStyle Css.none ] - ] - [ i ] - ) - [ docsLink example, srcLink example ] - ) +extraLinks : (msg -> msg2) -> Example state msg -> Header.Attribute route msg2 +extraLinks f example = + Header.extraNav (fullName example) + [ Html.map f (docsLink example) + , Html.map f (srcLink example) ] -docsLink : Example state msg -> Html msg +docsLink : Example state msg -> Html msg2 docsLink example = let link = @@ -192,7 +175,7 @@ docsLink example = ] -srcLink : Example state msg -> Html msg +srcLink : Example state msg -> Html msg2 srcLink example = let link = diff --git a/styleguide-app/Routes.elm b/styleguide-app/Routes.elm index 350db1ae4..d76de0b8f 100644 --- a/styleguide-app/Routes.elm +++ b/styleguide-app/Routes.elm @@ -103,16 +103,17 @@ fromLocation examples location = |> Result.withDefault All -viewHeader : Route state msg -> List (Html msg2) -> Html msg2 +viewHeader : Route state msg -> List (Header.Attribute (Route state msg) msg2) -> Html msg2 viewHeader currentRoute extraContent = breadCrumbs currentRoute |> Maybe.map (\crumbs -> Header.view - [ Header.aTagAttributes (\r -> [ Attributes.href ("/" ++ toString r) ]) - , Header.extraContent extraContent - , Header.customPageWidth (Css.px 1400) - ] + ([ Header.aTagAttributes (\r -> [ Attributes.href ("/" ++ toString r) ]) + , Header.customPageWidth (Css.px 1400) + ] + ++ extraContent + ) { breadCrumbs = crumbs , isCurrentRoute = (==) currentRoute } From 28d65261ef55d0bb1a86c4b273e54987a38235e1 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 10:37:34 -0700 Subject: [PATCH 4/9] Put the links back where they previously appeared --- src/Nri/Ui/Header/V1.elm | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Nri/Ui/Header/V1.elm b/src/Nri/Ui/Header/V1.elm index 65729bc35..e68a0fc3e 100644 --- a/src/Nri/Ui/Header/V1.elm +++ b/src/Nri/Ui/Header/V1.elm @@ -150,6 +150,20 @@ view attrs { breadCrumbs, isCurrentRoute } = let config = customize attrs + + ( extraContent_, extraNav_ ) = + -- when there's no content in the "extra content" hole to the right of the breadcrumbs, + -- put the extra nav there. If there is content there, put the links directly above the description. + case config.extraContent of + [] -> + ( [ viewJust viewExtraNav config.extraNav ] + , Html.text "" + ) + + _ -> + ( config.extraContent + , viewJust viewExtraNav config.extraNav + ) in Html.div [ css @@ -189,10 +203,10 @@ view attrs { breadCrumbs, isCurrentRoute } = _ -> Html.div [] (breadcrumbsView :: config.extraSubheadContent) ] - :: config.extraContent + :: extraContent_ ) + , extraNav_ , viewJust (viewDescription config.pageWidth) config.description - , viewJust viewExtraNav config.extraNav ] From bc86509fb75bb0da8046cbe499e853492718ed34 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 10:46:43 -0700 Subject: [PATCH 5/9] Adds extranav to the header example --- styleguide-app/Examples/Header.elm | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/styleguide-app/Examples/Header.elm b/styleguide-app/Examples/Header.elm index 364ba3d33..133ad584f 100644 --- a/styleguide-app/Examples/Header.elm +++ b/styleguide-app/Examples/Header.elm @@ -18,6 +18,7 @@ import Example exposing (Example) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs +import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Header.V1 as Header @@ -168,6 +169,23 @@ init selection = ] ) ) + |> ControlExtra.optionalListItem "extraNav" + (Control.value + ( Code.fromModule "Header" "extraNav " + ++ Code.string "Resources" + ++ Code.listMultiline + [ Code.fromModule "ClickableText" "link " ++ Code.string "Zendesk" ++ " []" + , Code.fromModule "ClickableText" "link " ++ Code.string "FAQ" ++ " []" + , Code.fromModule "ClickableText" "link " ++ Code.string "About" ++ " []" + ] + 2 + , Header.extraNav "Resources" + [ ClickableText.link "Zendesk" [] + , ClickableText.link "FAQ" [] + , ClickableText.link "About" [] + ] + ) + ) |> ControlExtra.optionalListItem "description" (Control.map (\value -> From 0b03ec8f8b92113d5003b0aa2219aef561e0f67b Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 10:50:28 -0700 Subject: [PATCH 6/9] Handle the spacing within the header component --- src/Nri/Ui/Header/V1.elm | 1 + styleguide-app/Example.elm | 9 ++------- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/Nri/Ui/Header/V1.elm b/src/Nri/Ui/Header/V1.elm index e68a0fc3e..e43f1981b 100644 --- a/src/Nri/Ui/Header/V1.elm +++ b/src/Nri/Ui/Header/V1.elm @@ -234,6 +234,7 @@ viewExtraNav ( label, values ) = , Css.alignItems Css.center , Css.justifyContent Css.flexStart , Css.flexWrap Css.wrap + , Css.property "column-gap" (.value Spacing.horizontalSpacerPx) ] ] (List.map diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index 57508c270..c22d7e83e 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -170,9 +170,7 @@ docsLink example = "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/" ++ String.replace "." "-" (fullName example) in - ClickableText.link "Docs" - [ ClickableText.linkExternal link - ] + ClickableText.link "Docs" [ ClickableText.linkExternal link ] srcLink : Example state msg -> Html msg2 @@ -183,7 +181,4 @@ srcLink example = ++ ".elm" |> (++) "https://github.com/NoRedInk/noredink-ui/blob/master/src/" in - ClickableText.link "Source" - [ ClickableText.linkExternal link - , ClickableText.css [ Css.marginLeft (Css.px 20) ] - ] + ClickableText.link "Source" [ ClickableText.linkExternal link ] From d2618d526a5cca6dc94e60df42f8593af8b3ba5f Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 11:09:32 -0700 Subject: [PATCH 7/9] :bowtie: adjust the styles a bit --- src/Nri/Ui/Header/V1.elm | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/Nri/Ui/Header/V1.elm b/src/Nri/Ui/Header/V1.elm index e43f1981b..546fc7c35 100644 --- a/src/Nri/Ui/Header/V1.elm +++ b/src/Nri/Ui/Header/V1.elm @@ -156,19 +156,29 @@ view attrs { breadCrumbs, isCurrentRoute } = -- put the extra nav there. If there is content there, put the links directly above the description. case config.extraContent of [] -> - ( [ viewJust viewExtraNav config.extraNav ] + ( [ viewJust (viewExtraNav []) config.extraNav ] , Html.text "" ) _ -> ( config.extraContent - , viewJust viewExtraNav config.extraNav + , viewJust + (viewExtraNav + [ Spacing.centeredContentWithSidePaddingAndCustomWidth config.pageWidth + ] + ) + config.extraNav ) in Html.div [ css [ Css.backgroundColor Colors.gray96 , Css.borderBottom3 (Css.px 1) Css.solid Colors.gray92 + , Css.paddingTop (Css.px 30) + , Css.paddingBottom (Css.px 20) + , Media.withMedia [ MediaQuery.mobile ] + [ Css.important (Css.padding2 (Css.px 20) (Css.px 15)) + ] ] , AttributesExtra.nriDescription "Nri-Header" ] @@ -177,12 +187,7 @@ view attrs { breadCrumbs, isCurrentRoute } = [ Spacing.centeredContentWithSidePaddingAndCustomWidth config.pageWidth , Css.alignItems Css.center , Css.displayFlex - , Css.paddingTop (Css.px 30) - , Css.paddingBottom (Css.px 20) - , Media.withMedia [ MediaQuery.mobile ] - [ Css.important (Css.padding2 (Css.px 20) (Css.px 15)) - , Css.flexDirection Css.column - ] + , Media.withMedia [ MediaQuery.mobile ] [ Css.flexDirection Css.column ] ] :: config.containerAttributes ) @@ -217,15 +222,15 @@ viewDescription pageWidth description_ = [ Spacing.centeredContentWithSidePaddingAndCustomWidth pageWidth , Css.color Colors.gray45 , Css.important (Css.margin Css.auto) - , Css.important (Css.paddingBottom (Css.px 20)) + , Css.important (Css.paddingTop (Css.px 20)) ] , Text.plaintext description_ ] -viewExtraNav : ( String, List (Html msg) ) -> Html msg -viewExtraNav ( label, values ) = - Html.nav [ Aria.label label ] +viewExtraNav : List Css.Style -> ( String, List (Html msg) ) -> Html msg +viewExtraNav styles ( label, values ) = + Html.nav [ Aria.label label, css styles ] [ Html.ul [ css [ Css.margin Css.zero From d2f0e81eb9c499795b5d6925943fdd1edd010dc9 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 11:12:21 -0700 Subject: [PATCH 8/9] Mark the component library links as opening in new tabs --- styleguide-app/Example.elm | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index c22d7e83e..3f0c2f0e7 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -13,6 +13,8 @@ import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Container.V2 as Container import Nri.Ui.Header.V1 as Header +import Nri.Ui.Svg.V1 as Svg +import Nri.Ui.UiIcon.V1 as UiIcon type alias Example state msg = @@ -170,7 +172,10 @@ docsLink example = "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/" ++ String.replace "." "-" (fullName example) in - ClickableText.link "Docs" [ ClickableText.linkExternal link ] + ClickableText.link "Docs" + [ ClickableText.linkExternal link + , ClickableText.rightIcon (Svg.withLabel "Opens in a new tab" UiIcon.openInNewTab) + ] srcLink : Example state msg -> Html msg2 @@ -181,4 +186,7 @@ srcLink example = ++ ".elm" |> (++) "https://github.com/NoRedInk/noredink-ui/blob/master/src/" in - ClickableText.link "Source" [ ClickableText.linkExternal link ] + ClickableText.link "Source" + [ ClickableText.linkExternal link + , ClickableText.rightIcon (Svg.withLabel "Opens in a new tab" UiIcon.openInNewTab) + ] From da9fe9a4e3dd401656c38c6edb15b6e4231e5e5c Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 27 Dec 2022 11:16:43 -0700 Subject: [PATCH 9/9] elm review --- styleguide-app/CommonControls.elm | 4 ++-- styleguide-app/Example.elm | 2 +- styleguide-app/Examples/Header.elm | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/styleguide-app/CommonControls.elm b/styleguide-app/CommonControls.elm index c75a9c191..95c702dc6 100644 --- a/styleguide-app/CommonControls.elm +++ b/styleguide-app/CommonControls.elm @@ -6,7 +6,7 @@ module CommonControls exposing , customIcon , specificColor , string - , content, exampleHtml + , content , httpError, badBodyString , guidanceAndErrorMessage , disabledListItem, premiumDisplay @@ -25,7 +25,7 @@ module CommonControls exposing ### Content @docs string -@docs content, exampleHtml +@docs content @docs httpError, badBodyString @docs guidanceAndErrorMessage diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index 3f0c2f0e7..630ac66eb 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -2,7 +2,7 @@ module Example exposing (Example, extraLinks, fullName, preview, view, wrapMsg, import Accessibility.Styled.Aria as Aria import Category exposing (Category) -import Css exposing (..) +import Css import EllieLink import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes diff --git a/styleguide-app/Examples/Header.elm b/styleguide-app/Examples/Header.elm index 133ad584f..346fe5d7e 100644 --- a/styleguide-app/Examples/Header.elm +++ b/styleguide-app/Examples/Header.elm @@ -9,7 +9,6 @@ module Examples.Header exposing (example, State, Msg) import Accessibility.Styled.Role as Role import Category exposing (Category(..)) import Code -import CommonControls import Css import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra