From 18452954d86c5bcfd9e6394603b3c78cdd3a2069 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 11 Sep 2023 14:57:30 -0600 Subject: [PATCH 01/23] Copy in Nri.Outline --- src/Nri/Ui/Outline/V1.elm | 144 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 src/Nri/Ui/Outline/V1.elm diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm new file mode 100644 index 00000000..1bc03989 --- /dev/null +++ b/src/Nri/Ui/Outline/V1.elm @@ -0,0 +1,144 @@ +module Nri.Ui.Outline.V1 exposing + ( Outline + , view + , row, rowWithExtraContent, customRow + ) + +{-| A nestable layout that can be themed. + +@docs Outline +@docs view + + +## Rows + +@docs row, rowWithExtraContent, customRow + +-} + +import Css exposing (Color) +import Html.Styled exposing (..) +import Html.Styled.Attributes exposing (css) +import Nri.Outline.RowTheme exposing (RowTheme) +import Nri.Outline.Utils as Utils + + +{-| -} +type Outline msg + = Outline + { extraContent : Maybe { border : Maybe Color, content : Html msg } + , rows : List (Outline msg) + , title : Maybe String + , content : Html msg + , palette : RowTheme + } + + +{-| + + import Html.Styled exposing (..) + import Nri.Outline as Outline + + main : Html msg + main = + Outline.view [] + +-} +view : List (Outline msg) -> Html msg +view rows = + Html.Styled.ul + [ Html.Styled.Attributes.css + [ Css.listStyle Css.none + , Css.margin4 (Css.px 10) Css.zero Css.zero Css.zero + , Css.padding Css.zero + ] + ] + (viewRows Utils.Root rows) + + +viewRows : Utils.Hierarchy -> List (Outline msg) -> List (Html msg) +viewRows hierarchy rows = + let + orderedNodeColors = + (List.map (\(Outline { palette }) -> Just palette.border) rows ++ [ Nothing ]) + |> List.drop 1 + in + List.map2 (viewRow hierarchy) orderedNodeColors rows + + +viewRow : Utils.Hierarchy -> Maybe Css.Color -> Outline msg -> Html msg +viewRow hierarchy nextNodeColor (Outline config) = + Utils.viewRow hierarchy nextNodeColor config <| + Html.Styled.ul + [ css + [ Css.marginLeft (Css.px 25) + , Css.paddingLeft (Css.px 25) + , Css.paddingTop (Css.px 25) + , Css.listStyleType Css.none + ] + ] + (viewRows Utils.Child config.rows) + + +{-| + + import Html.Styled exposing (..) + import Nri.Outline as Outline exposing (Outline) + + myRow : Outline msg + myRow = + Outline.row + { title = Just "My node" + , content = text "This is my content" + , palette = RowTheme.red + , rows = [] + } + +-} +row : + { title : Maybe String + , content : Html msg + , palette : RowTheme + , rows : List (Outline msg) + } + -> Outline msg +row config = + Outline + { title = config.title + , content = config.content + , palette = config.palette + , rows = config.rows + , extraContent = Nothing + } + + +{-| -} +customRow : + { extraContent : Maybe { border : Maybe Color, content : Html msg } + , rows : List (Outline msg) + , title : Maybe String + , content : Html msg + , palette : RowTheme + } + -> Outline msg +customRow config = + Outline config + + +{-| -} +rowWithExtraContent : + { rows : List (Outline msg) + , extraContent : { border : Maybe Color, content : Html msg } + , title : Maybe String + , content : Html msg + , palette : RowTheme + } + -> Outline msg +rowWithExtraContent config = + Outline + { title = config.title + , content = config.content + , palette = config.palette + , rows = config.rows + , extraContent = Just config.extraContent + } From 04a4f58faba34dd3c8d364de1d3eafeef6f3e79d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 11 Sep 2023 15:00:00 -0600 Subject: [PATCH 02/23] Row with extra content is not used --- src/Nri/Ui/Outline/V1.elm | 23 ++--------------------- 1 file changed, 2 insertions(+), 21 deletions(-) diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm index 1bc03989..11099578 100644 --- a/src/Nri/Ui/Outline/V1.elm +++ b/src/Nri/Ui/Outline/V1.elm @@ -1,7 +1,7 @@ module Nri.Ui.Outline.V1 exposing ( Outline , view - , row, rowWithExtraContent, customRow + , row, customRow ) {-| A nestable layout that can be themed. @@ -12,7 +12,7 @@ module Nri.Ui.Outline.V1 exposing ## Rows -@docs row, rowWithExtraContent, customRow +@docs row, customRow -} @@ -123,22 +123,3 @@ customRow : -> Outline msg customRow config = Outline config - - -{-| -} -rowWithExtraContent : - { rows : List (Outline msg) - , extraContent : { border : Maybe Color, content : Html msg } - , title : Maybe String - , content : Html msg - , palette : RowTheme - } - -> Outline msg -rowWithExtraContent config = - Outline - { title = config.title - , content = config.content - , palette = config.palette - , rows = config.rows - , extraContent = Just config.extraContent - } From 1be6d726eeb11d4b90865777f7028b62c322be9e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 11 Sep 2023 15:08:13 -0600 Subject: [PATCH 03/23] Fix compilation of OUtline --- deprecated-modules.csv | 1 + elm.json | 1 + forbidden-imports.toml | 3 + src/Nri/Ui/Outline/V1.elm | 377 ++++++++++++++++++++++++++++++++- tests/elm-verify-examples.json | 2 + 5 files changed, 374 insertions(+), 10 deletions(-) diff --git a/deprecated-modules.csv b/deprecated-modules.csv index c097740f..db811096 100644 --- a/deprecated-modules.csv +++ b/deprecated-modules.csv @@ -1,5 +1,6 @@ Nri.Ui.Block.V4,upgrade to V6 Nri.Ui.Block.V5,upgrade to V6 +Nri.Ui.Carousel.V1,upgrade to V2 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 a4d101d0..01026f9f 100644 --- a/elm.json +++ b/elm.json @@ -59,6 +59,7 @@ "Nri.Ui.Message.V4", "Nri.Ui.Modal.V11", "Nri.Ui.Modal.V12", + "Nri.Ui.Outline.V1", "Nri.Ui.Page.V3", "Nri.Ui.Pagination.V1", "Nri.Ui.Palette.V1", diff --git a/forbidden-imports.toml b/forbidden-imports.toml index d8729314..2b19a85b 100644 --- a/forbidden-imports.toml +++ b/forbidden-imports.toml @@ -63,6 +63,9 @@ hint = 'upgrade to V2' hint = 'upgrade to V10' usages = ['component-catalog-app/../src/Nri/Ui/SlideModal/V2.elm'] +[forbidden."Nri.Ui.Carousel.V1"] +hint = 'upgrade to V2' + [forbidden."Nri.Ui.CharacterIcon.V1"] hint = 'upgrade to V2' usages = [ diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm index 11099578..657de17f 100644 --- a/src/Nri/Ui/Outline/V1.elm +++ b/src/Nri/Ui/Outline/V1.elm @@ -2,6 +2,10 @@ module Nri.Ui.Outline.V1 exposing ( Outline , view , row, customRow + , RowTheme + , white, gray, darkGray, blue, darkBlue, purple, turquoise, green, red, aqua, cornflower + , blueDashBordered + , purpleBordered, greenBordered ) {-| A nestable layout that can be themed. @@ -14,13 +18,23 @@ module Nri.Ui.Outline.V1 exposing @docs row, customRow + +## Predefined color palettes for use with Outline. + +@docs RowTheme +@docs white, gray, darkGray, blue, darkBlue, purple, turquoise, green, red, aqua, cornflower +@docs blueDashBordered +@docs purpleBordered, greenBordered + -} -import Css exposing (Color) +import Css exposing (..) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) -import Nri.Outline.RowTheme exposing (RowTheme) -import Nri.Outline.Utils as Utils +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Html.Attributes.V2 as Attributes +import Nri.Ui.Html.V3 exposing (viewJust) {-| -} @@ -37,7 +51,7 @@ type Outline msg {-| import Html.Styled exposing (..) - import Nri.Outline as Outline + import Nri.Ui.Outline.V1 as Outline main : Html msg main = @@ -53,10 +67,10 @@ view rows = , Css.padding Css.zero ] ] - (viewRows Utils.Root rows) + (viewRows Root rows) -viewRows : Utils.Hierarchy -> List (Outline msg) -> List (Html msg) +viewRows : Hierarchy -> List (Outline msg) -> List (Html msg) viewRows hierarchy rows = let orderedNodeColors = @@ -66,9 +80,9 @@ viewRows hierarchy rows = List.map2 (viewRow hierarchy) orderedNodeColors rows -viewRow : Utils.Hierarchy -> Maybe Css.Color -> Outline msg -> Html msg +viewRow : Hierarchy -> Maybe Css.Color -> Outline msg -> Html msg viewRow hierarchy nextNodeColor (Outline config) = - Utils.viewRow hierarchy nextNodeColor config <| + utilViewRow hierarchy nextNodeColor config <| Html.Styled.ul [ css [ Css.marginLeft (Css.px 25) @@ -77,13 +91,13 @@ viewRow hierarchy nextNodeColor (Outline config) = , Css.listStyleType Css.none ] ] - (viewRows Utils.Child config.rows) + (viewRows Child config.rows) {-| import Html.Styled exposing (..) - import Nri.Outline as Outline exposing (Outline) + import Nri.Ui.Outline.V1 as Outline exposing (Outline) myRow : Outline msg myRow = @@ -123,3 +137,346 @@ customRow : -> Outline msg customRow config = Outline config + + + +-- THEMES + + +{-| -} +type alias RowTheme = + { border : Color + , borderStyle : Style + , background : Color + } + + +{-| Aqua palette +-} +aqua : RowTheme +aqua = + { border = Colors.aquaDark + , borderStyle = Css.batch [] + , background = Colors.aquaLight + } + + +{-| Dark Gray palette +-} +darkGray : RowTheme +darkGray = + { border = Colors.gray45 + , borderStyle = Css.batch [] + , background = Colors.gray96 + } + + +{-| -} +gray : RowTheme +gray = + { border = Colors.gray45 + , borderStyle = Css.batch [] + , background = Colors.white + } + + +{-| Blue palette +-} +blue : RowTheme +blue = + { border = Colors.azure + , borderStyle = Css.batch [] + , background = Colors.frost + } + + +{-| Blue palette +-} +blueDashBordered : RowTheme +blueDashBordered = + { border = Colors.azure + , borderStyle = Css.batch [ Css.borderWidth (Css.px 1), Css.borderStyle Css.dashed ] + , background = Colors.frost + } + + +{-| Dark blue palette +-} +darkBlue : RowTheme +darkBlue = + { border = Colors.navy + , borderStyle = Css.batch [] + , background = Colors.frost + } + + +{-| Purple palette with a purple border instead of a purple background color +-} +purple : RowTheme +purple = + { border = Colors.purple + , borderStyle = Css.batch [] + , background = Colors.purpleLight + } + + +{-| Purple palette with a purple border instead of a purple background color +-} +purpleBordered : RowTheme +purpleBordered = + { border = Colors.purple + , borderStyle = Css.batch [ Css.borderWidth (Css.px 1), Css.borderStyle Css.solid ] + , background = Colors.white + } + + +{-| Turquoise palette +-} +turquoise : RowTheme +turquoise = + { border = Colors.turquoiseDark + , borderStyle = Css.batch [] + , background = Colors.turquoiseLight + } + + +{-| Green palette +-} +green : RowTheme +green = + { border = Colors.greenDarkest + , borderStyle = Css.batch [] + , background = Colors.greenLightest + } + + +{-| Green palette with a green border instead of a green background color +-} +greenBordered : RowTheme +greenBordered = + { border = Colors.greenDarkest + , borderStyle = Css.batch [ Css.borderWidth (Css.px 1), Css.borderStyle Css.solid ] + , background = Colors.white + } + + +{-| Red palette +-} +red : RowTheme +red = + { border = Colors.red + , borderStyle = Css.batch [] + , background = Colors.redLight + } + + +{-| White palette (borders are blue) +-} +white : RowTheme +white = + { border = Colors.navy + , borderStyle = Css.batch [] + , background = Colors.white + } + + +{-| Cornflower palette +-} +cornflower : RowTheme +cornflower = + { border = Colors.cornflowerDark + , borderStyle = Css.batch [] + , background = Colors.cornflowerLight + } + + + +-- UTILS + + +wrapViewWithTitleBubble : + { title : String + , content : Html msg + , palette : RowTheme + } + -> Html msg +wrapViewWithTitleBubble config = + let + kebabTitle = + String.replace " " "-" (String.toLower config.title) + in + Html.Styled.div [] + [ Html.Styled.div + [ Html.Styled.Attributes.attribute "data-nri-description" "outline-title" + , css + [ Fonts.baseFont + , borderRadius (px 18) + , color Colors.white + , display inlineBlock + , fontSize (px 15) + , fontWeight bold + , height (px 35) + , lineHeight (px 35) + , left (px -10) + , padding2 zero (px 15) + , position absolute + , top (px -15) + , backgroundColor config.palette.border + ] + ] + [ Html.Styled.text config.title ] + , Html.Styled.div + [ Attributes.testId (kebabTitle ++ "-text") + , css + [ borderRadius (px 8) + , color Colors.gray20 + , fontSize (px 18) + , Fonts.quizFont + , padding3 (px 30) (px 15) (px 15) + , lineHeight (px 30) + , backgroundColor config.palette.background + , config.palette.borderStyle + , borderColor config.palette.border + , after [ borderColor config.palette.border ] + ] + ] + [ config.content ] + ] + + +{-| -} +utilViewRow : + Hierarchy + -> Maybe Color + -> + { title : Maybe String + , content : Html msg + , extraContent : Maybe { border : Maybe Color, content : Html msg } + , palette : RowTheme + , rows : List outline + } + -> Html msg + -> Html msg +utilViewRow hierarchy nextNodeColor config children = + let + rowAttrs = + [ Html.Styled.Attributes.attribute "data-nri-description" "outline-row" + , css + [ paddingBottom (px 25) + , position relative + , lastChild [ paddingBottom zero ] + , case hierarchy of + Child -> + verticalChildConnector config.palette.border nextNodeColor + + Root -> + Css.batch [] + ] + ] + in + Html.Styled.li + rowAttrs + [ Html.Styled.div + [ css + [ position relative + , case hierarchy of + Child -> + horizontalChildConnector config.palette.border + + Root -> + Css.batch [] + ] + ] + [ case config.title of + Just title -> + wrapViewWithTitleBubble + { title = title + , content = config.content + , palette = config.palette + } + + Nothing -> + config.content + , viewJust viewExtraContent config.extraContent + ] + , if List.isEmpty config.rows then + text "" + + else + children + ] + + +verticalChildConnector : Color -> Maybe Color -> Style +verticalChildConnector paletteBorder nextNodeColor = + Css.batch + [ after + [ property "content" "''" + , position absolute + , top (px -25) + , left (px -18) + , width (px 18) + , borderLeft3 (px 1) solid Colors.gray75 + , property "height" "calc(16px)" + , borderColor paletteBorder + ] + , before + (case nextNodeColor of + Just border -> + [ property "content" "''" + , position absolute + , left (px -18) + , width (px 18) + , borderLeft3 (px 1) solid Colors.gray75 + , property "height" "calc(100%)" + , borderColor border + ] + + Nothing -> + [] + ) + , lastChild + [ after [ borderLeftWidth zero ] + , before [ borderLeftWidth zero ] + ] + ] + + +horizontalChildConnector : Color -> Style +horizontalChildConnector paletteBorder = + after + [ property "content" "''" + , height (pct 80) + , width (px 18) + , borderBottom3 (px 1) solid Colors.gray75 + , borderLeft3 (px 1) solid Colors.gray75 + , left (px -18) + , borderRadius4 zero zero zero (px 4) + , top (px -25) + , position absolute + , maxHeight (px 60) + , borderColor paletteBorder + ] + + +viewExtraContent : { border : Maybe Color, content : Html msg } -> Html msg +viewExtraContent { border, content } = + div + [ css + [ marginLeft (px 32) + , Maybe.map (borderLeft3 (px 1) solid) border + |> Maybe.withDefault (Css.batch []) + , paddingLeft (px 15) + ] + ] + [ content ] + + + +-- Types + + +{-| -} +type Hierarchy + = Root + | Child diff --git a/tests/elm-verify-examples.json b/tests/elm-verify-examples.json index a303c650..e97c219c 100644 --- a/tests/elm-verify-examples.json +++ b/tests/elm-verify-examples.json @@ -13,6 +13,7 @@ "Nri.Ui.BreadCrumbs.V2", "Nri.Ui.Button.V10", "Nri.Ui.Carousel.V1", + "Nri.Ui.Carousel.V2", "Nri.Ui.CharacterIcon.V2", "Nri.Ui.Checkbox.V7", "Nri.Ui.ClickableSvg.V2", @@ -54,6 +55,7 @@ "Nri.Ui.Message.V4", "Nri.Ui.Modal.V11", "Nri.Ui.Modal.V12", + "Nri.Ui.Outline.V1", "Nri.Ui.Page.V3", "Nri.Ui.Pagination.V1", "Nri.Ui.Palette.V1", From 8a164e5a6fba9f7aea3abdb9e4b060e0ba9cd1a5 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 11 Sep 2023 15:28:26 -0600 Subject: [PATCH 04/23] Adds Outline example --- component-catalog/src/Examples.elm | 22 +++++ component-catalog/src/Examples/Outline.elm | 110 +++++++++++++++++++++ 2 files changed, 132 insertions(+) create mode 100644 component-catalog/src/Examples/Outline.elm diff --git a/component-catalog/src/Examples.elm b/component-catalog/src/Examples.elm index 05e8540b..d4f0b7af 100644 --- a/component-catalog/src/Examples.elm +++ b/component-catalog/src/Examples.elm @@ -28,6 +28,7 @@ import Examples.Logo as Logo import Examples.Menu as Menu import Examples.Message as Message import Examples.Modal as Modal +import Examples.Outline as Outline import Examples.Page as Page import Examples.Pagination as Pagination import Examples.Panel as Panel @@ -567,6 +568,25 @@ all = ModalState childState -> Just childState + _ -> + Nothing + ) + , Outline.example + |> Example.wrapMsg OutlineMsg + (\msg -> + case msg of + OutlineMsg childMsg -> + Just childMsg + + _ -> + Nothing + ) + |> Example.wrapState OutlineState + (\msg -> + case msg of + OutlineState childState -> + Just childState + _ -> Nothing ) @@ -1076,6 +1096,7 @@ type State | MenuState Menu.State | MessageState Message.State | ModalState Modal.State + | OutlineState Outline.State | PageState Page.State | PaginationState Pagination.State | PanelState Panel.State @@ -1132,6 +1153,7 @@ type Msg | TabsMinimalMsg TabsMinimal.Msg | MessageMsg Message.Msg | ModalMsg Modal.Msg + | OutlineMsg Outline.Msg | PageMsg Page.Msg | PaginationMsg Pagination.Msg | PanelMsg Panel.Msg diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm new file mode 100644 index 00000000..84ba43a8 --- /dev/null +++ b/component-catalog/src/Examples/Outline.elm @@ -0,0 +1,110 @@ +module Examples.Outline exposing (example, State, Msg) + +{-| + +@docs example, State, Msg + +-} + +import Category exposing (Category(..)) +import Code +import CommonControls +import Css +import Debug.Control as Control exposing (Control) +import Debug.Control.Extra as ControlExtra +import Debug.Control.View as ControlView +import Example exposing (Example) +import Html.Styled exposing (..) +import Html.Styled.Attributes exposing (css) +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Heading.V3 as Heading +import Nri.Ui.Outline.V1 as Outline + + +moduleName : String +moduleName = + "Outline" + + +version : Int +version = + 1 + + +{-| -} +example : Example State Msg +example = + { name = moduleName + , version = version + , categories = [ Layout ] + , keyboardSupport = [] + , state = init + , update = update + , subscriptions = \_ -> Sub.none + , preview = + [] + , about = [] + , view = + \ellieLinkConfig state -> + let + settings = + Control.currentValue state.control + + attributes = + List.map Tuple.second settings + in + [ ControlView.view + { ellieLinkConfig = ellieLinkConfig + , name = moduleName + , version = version + , update = UpdateControl + , settings = state.control + , mainType = Just "RootHtml.Html msg" + , extraCode = [] + , renderExample = Code.unstyledView + , toExampleCode = + \_ -> + [ { sectionName = "Example" + , code = + Code.fromModule moduleName "view" + ++ Code.list (List.map Tuple.first settings) + } + ] + } + , Heading.h2 + [ Heading.plaintext "Example" + , Heading.css [ Css.marginTop (Css.px 30) ] + ] + , Outline.view [] + ] + } + + +{-| -} +type alias State = + { control : Control Settings + } + + +init : State +init = + { control = + ControlExtra.list + } + + +type alias Settings = + List ( String, () ) + + +{-| -} +type Msg + = UpdateControl (Control Settings) + + +update : Msg -> State -> ( State, Cmd Msg ) +update msg state = + case msg of + UpdateControl settings -> + ( { state | control = settings }, Cmd.none ) From c34db5ad5ffe2b1e4c589cd4be3a97116f60c41e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 11 Sep 2023 15:37:44 -0600 Subject: [PATCH 05/23] Adds row theme example list --- component-catalog/src/Examples/Outline.elm | 50 +++++++++++++++++++++- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 84ba43a8..d7068f1d 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -19,7 +19,8 @@ import Html.Styled.Attributes exposing (css) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading -import Nri.Ui.Outline.V1 as Outline +import Nri.Ui.Outline.V1 as Outline exposing (RowTheme) +import Nri.Ui.Spacing.V1 as Spacing moduleName : String @@ -74,13 +75,58 @@ example = } , Heading.h2 [ Heading.plaintext "Example" - , Heading.css [ Css.marginTop (Css.px 30) ] + , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] ] , Outline.view [] + , Heading.h2 + [ Heading.plaintext "Row Themes" + , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] + ] + , Outline.view + [ Outline.row + { title = Just "Row Themes" + , content = text "Outline supports custom row themes (like this node's theme), but it also has a predefined list of themes." + , palette = + { border = Colors.azure + , borderStyle = Css.batch [] + , background = Colors.gray96 + } + , rows = + List.map + (\( themeName, theme ) -> + Outline.row + { title = Just themeName + , content = text "" + , palette = theme + , rows = [] + } + ) + allRowThemes + } + ] ] } +allRowThemes : List ( String, RowTheme ) +allRowThemes = + [ ( "purpleBordered", Outline.purpleBordered ) + , ( "greenBordered", Outline.greenBordered ) + , ( "blueDashBordered", Outline.blueDashBordered ) + , ( "red", Outline.red ) + , ( "green", Outline.green ) + , ( "aqua", Outline.aqua ) + , ( "turquoise", Outline.turquoise ) + , ( "cornflower", Outline.cornflower ) + , ( "blue", Outline.blue ) + , ( "darkBlue", Outline.darkBlue ) + , ( "purple", Outline.purple ) + , ( "darkGray", Outline.darkGray ) + , ( "gray", Outline.gray ) + , ( "white", Outline.white ) + ] + + {-| -} type alias State = { control : Control Settings From fb50ef7fe7c7c4bac11063de68e432f47c2b6521 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 11 Sep 2023 16:15:43 -0600 Subject: [PATCH 06/23] Adds preview for outline --- component-catalog/src/Examples/Outline.elm | 100 ++++++++++++++++++++- 1 file changed, 98 insertions(+), 2 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index d7068f1d..e8489d92 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -21,6 +21,8 @@ import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Outline.V1 as Outline exposing (RowTheme) import Nri.Ui.Spacing.V1 as Spacing +import Svg.Styled as Svg +import Svg.Styled.Attributes as SvgAttrs moduleName : String @@ -43,8 +45,7 @@ example = , state = init , update = update , subscriptions = \_ -> Sub.none - , preview = - [] + , preview = [ preview ] , about = [] , view = \ellieLinkConfig state -> @@ -108,6 +109,101 @@ example = } +preview : Html msg +preview = + Svg.svg + [ SvgAttrs.viewBox "5 0 90 90" + , SvgAttrs.width "100%" + , SvgAttrs.height "100%" + ] + [ -- Connecting lines + Svg.path + [ SvgAttrs.d "M14 41, 14 58 Q14 60 16 60 L 20 60" + , SvgAttrs.stroke Colors.purple.value + , SvgAttrs.fill "none" + ] + [] + , Svg.path + [ SvgAttrs.d "M14 29, 14 40 Q14 42 16 42 L 20 42" + , SvgAttrs.stroke Colors.greenDarkest.value + , SvgAttrs.fill "none" + ] + [] + + -- Azure node + , -- white box + Svg.rect + [ SvgAttrs.x "10" + , SvgAttrs.y "13" + , SvgAttrs.width "80" + , SvgAttrs.height "16" + , SvgAttrs.rx "2" + , SvgAttrs.fill Colors.white.value + , SvgAttrs.stroke Colors.azure.value + , SvgAttrs.strokeWidth "0.5" + ] + [] + , -- azure label + Svg.rect + [ SvgAttrs.x "5" + , SvgAttrs.y "10" + , SvgAttrs.width "16" + , SvgAttrs.height "6" + , SvgAttrs.rx "4" + , SvgAttrs.fill Colors.azure.value + ] + [] + + -- Green node + , -- white box + Svg.rect + [ SvgAttrs.x "20" + , SvgAttrs.y "35" + , SvgAttrs.width "70" + , SvgAttrs.height "12" + , SvgAttrs.rx "2" + , SvgAttrs.fill Colors.white.value + , SvgAttrs.stroke Colors.greenDarkest.value + , SvgAttrs.strokeWidth "0.5" + ] + [] + , -- green label + Svg.rect + [ SvgAttrs.x "16" + , SvgAttrs.y "32" + , SvgAttrs.width "14" + , SvgAttrs.height "6" + , SvgAttrs.rx "4" + , SvgAttrs.fill Colors.greenDarkest.value + ] + [] + + -- Purple node + , -- white box + Svg.rect + [ SvgAttrs.x "20" + , SvgAttrs.y "54" + , SvgAttrs.width "70" + , SvgAttrs.height "12" + , SvgAttrs.rx "2" + , SvgAttrs.fill Colors.white.value + , SvgAttrs.stroke Colors.purple.value + , SvgAttrs.strokeWidth "0.5" + ] + [] + , -- purple label + Svg.rect + [ SvgAttrs.x "16" + , SvgAttrs.y "50" + , SvgAttrs.width "17" + , SvgAttrs.height "6" + , SvgAttrs.rx "4" + , SvgAttrs.fill Colors.purple.value + ] + [] + ] + + allRowThemes : List ( String, RowTheme ) allRowThemes = [ ( "purpleBordered", Outline.purpleBordered ) From 1a2625fcc9669b82df8f99f3bec131c8bd3fcc69 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 09:39:58 -0600 Subject: [PATCH 07/23] Adds some customizability --- component-catalog/src/Examples/Outline.elm | 36 ++++++++++++++++------ 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index e8489d92..9bbc3cfe 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -52,9 +52,6 @@ example = let settings = Control.currentValue state.control - - attributes = - List.map Tuple.second settings in [ ControlView.view { ellieLinkConfig = ellieLinkConfig @@ -67,18 +64,35 @@ example = , renderExample = Code.unstyledView , toExampleCode = \_ -> - [ { sectionName = "Example" + [ { sectionName = "Customizable Example" , code = Code.fromModule moduleName "view" - ++ Code.list (List.map Tuple.first settings) + ++ Code.listMultiline + [ Code.fromModule moduleName "row " + ++ Code.recordMultiline + [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) + , ( "content", "text \"\"" ) + , ( "palette", Tuple.first settings.palette ) + , ( "rows", Code.list [] ) + ] + 2 + ] + 1 } ] } , Heading.h2 - [ Heading.plaintext "Example" + [ Heading.plaintext "Customizable Example" , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] ] - , Outline.view [] + , Outline.view + [ Outline.row + { title = settings.title + , content = text "" + , palette = Tuple.second settings.palette + , rows = [] + } + ] , Heading.h2 [ Heading.plaintext "Row Themes" , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] @@ -232,12 +246,16 @@ type alias State = init : State init = { control = - ControlExtra.list + Control.record Settings + |> Control.field "title" (Control.maybe True (Control.string "Title")) + |> Control.field "palette" (CommonControls.choice "palette" allRowThemes) } type alias Settings = - List ( String, () ) + { title : Maybe String + , palette : ( String, RowTheme ) + } {-| -} From 3d943f91ceeac979d645f3e83b2f0b2fa899bc47 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 09:49:37 -0600 Subject: [PATCH 08/23] Adds custom palette example --- component-catalog/src/Examples/Outline.elm | 75 +++++++++++++++++++++- 1 file changed, 73 insertions(+), 2 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 9bbc3cfe..45e9baf7 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -9,7 +9,7 @@ module Examples.Outline exposing (example, State, Msg) import Category exposing (Category(..)) import Code import CommonControls -import Css +import Css exposing (Color) import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView @@ -237,6 +237,34 @@ allRowThemes = ] +borderColorList : List ( String, Color ) +borderColorList = + [ ( "azure", Colors.azure ) + , ( "cornflower", Colors.cornflower ) + , ( "gray45", Colors.gray45 ) + , ( "gray75", Colors.gray75 ) + , ( "green", Colors.green ) + , ( "navy", Colors.navy ) + , ( "purple", Colors.purple ) + , ( "red", Colors.red ) + , ( "turquoise", Colors.turquoise ) + ] + + +backgroundColorList : List ( String, Color ) +backgroundColorList = + [ ( "gray96", Colors.gray96 ) + , ( "aquaLight", Colors.aquaLight ) + , ( "cornflowerLight", Colors.cornflowerLight ) + , ( "frost", Colors.frost ) + , ( "greenLightest", Colors.greenLightest ) + , ( "purpleLight", Colors.purpleLight ) + , ( "redLight", Colors.redLight ) + , ( "turquoiseLight", Colors.turquoiseLight ) + , ( "white", Colors.white ) + ] + + {-| -} type alias State = { control : Control Settings @@ -248,10 +276,53 @@ init = { control = Control.record Settings |> Control.field "title" (Control.maybe True (Control.string "Title")) - |> Control.field "palette" (CommonControls.choice "palette" allRowThemes) + |> Control.field "palette" + (Control.choice + (List.map + (\( name, value ) -> + ( name, Control.value ( Code.fromModule moduleName "." ++ name, value ) ) + ) + allRowThemes + ++ [ ( "custom", customRowTheme ) ] + ) + ) } +customRowTheme : Control ( String, RowTheme ) +customRowTheme = + Control.record + (\( a1, a2 ) ( b1, b2 ) ( c1, c2 ) -> + ( Code.recordMultiline + [ ( "border", a1 ) + , ( "borderStyle", b1 ) + , ( "background", c1 ) + ] + 3 + , RowTheme a2 b2 c2 + ) + ) + |> Control.field "border" (CommonControls.choice "Colors" borderColorList) + |> Control.field "borderStyle" + (Control.choice + [ ( "none", Control.value ( "Css.batch []", Css.batch [] ) ) + , ( "1px solid" + , Control.value + ( "Css.batch [ Css.borderWidth (Css.px 1), Css.borderStyle Css.solid ]" + , Css.batch [ Css.borderWidth (Css.px 1), Css.borderStyle Css.solid ] + ) + ) + , ( "1px dashed" + , Control.value + ( "Css.batch [ Css.borderWidth (Css.px 1), Css.borderStyle Css.dashed ]" + , Css.batch [ Css.borderWidth (Css.px 1), Css.borderStyle Css.dashed ] + ) + ) + ] + ) + |> Control.field "background" (CommonControls.choice "Colors" backgroundColorList) + + type alias Settings = { title : Maybe String , palette : ( String, RowTheme ) From ad6fbe2142e47c9f422f3ea619e83178fd5e27f0 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 09:53:41 -0600 Subject: [PATCH 09/23] Adds child nodes to example --- component-catalog/src/Examples/Outline.elm | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 45e9baf7..054a442d 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -73,7 +73,7 @@ example = [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) , ( "content", "text \"\"" ) , ( "palette", Tuple.first settings.palette ) - , ( "rows", Code.list [] ) + , ( "rows", Code.listMultiline [ "-- …" ] 3 ) ] 2 ] @@ -90,7 +90,20 @@ example = { title = settings.title , content = text "" , palette = Tuple.second settings.palette - , rows = [] + , rows = + [ Outline.row + { title = Just "Node 2" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + , Outline.row + { title = Just "Node 3" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + ] } ] , Heading.h2 From 5b8796ec5dd8b05d98ab820ae410982a01e2fe7f Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 09:55:33 -0600 Subject: [PATCH 10/23] Allow customation of the content --- component-catalog/src/Examples/Outline.elm | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 054a442d..b1d90d0a 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -71,7 +71,7 @@ example = [ Code.fromModule moduleName "row " ++ Code.recordMultiline [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) - , ( "content", "text \"\"" ) + , ( "content", "text " ++ Code.string settings.content ) , ( "palette", Tuple.first settings.palette ) , ( "rows", Code.listMultiline [ "-- …" ] 3 ) ] @@ -88,7 +88,7 @@ example = , Outline.view [ Outline.row { title = settings.title - , content = text "" + , content = text settings.content , palette = Tuple.second settings.palette , rows = [ Outline.row @@ -284,11 +284,19 @@ type alias State = } +type alias Settings = + { title : Maybe String + , content : String + , palette : ( String, RowTheme ) + } + + init : State init = { control = Control.record Settings |> Control.field "title" (Control.maybe True (Control.string "Title")) + |> Control.field "content" (Control.string "") |> Control.field "palette" (Control.choice (List.map @@ -336,12 +344,6 @@ customRowTheme = |> Control.field "background" (CommonControls.choice "Colors" backgroundColorList) -type alias Settings = - { title : Maybe String - , palette : ( String, RowTheme ) - } - - {-| -} type Msg = UpdateControl (Control Settings) From 77a6c6081e7f9b738b7d29942dec73cf63f09cde Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 09:59:16 -0600 Subject: [PATCH 11/23] :skull: extraContent is never used for non-keyed outlines --- src/Nri/Ui/Outline/V1.elm | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm index 657de17f..73e6399e 100644 --- a/src/Nri/Ui/Outline/V1.elm +++ b/src/Nri/Ui/Outline/V1.elm @@ -40,8 +40,7 @@ import Nri.Ui.Html.V3 exposing (viewJust) {-| -} type Outline msg = Outline - { extraContent : Maybe { border : Maybe Color, content : Html msg } - , rows : List (Outline msg) + { rows : List (Outline msg) , title : Maybe String , content : Html msg , palette : RowTheme @@ -82,8 +81,15 @@ viewRows hierarchy rows = viewRow : Hierarchy -> Maybe Css.Color -> Outline msg -> Html msg viewRow hierarchy nextNodeColor (Outline config) = - utilViewRow hierarchy nextNodeColor config <| - Html.Styled.ul + utilViewRow hierarchy + nextNodeColor + { rows = config.rows + , title = config.title + , content = config.content + , palette = config.palette + , extraContent = Nothing + } + (Html.Styled.ul [ css [ Css.marginLeft (Css.px 25) , Css.paddingLeft (Css.px 25) @@ -92,6 +98,7 @@ viewRow hierarchy nextNodeColor (Outline config) = ] ] (viewRows Child config.rows) + ) {-| @@ -122,14 +129,12 @@ row config = , content = config.content , palette = config.palette , rows = config.rows - , extraContent = Nothing } {-| -} customRow : - { extraContent : Maybe { border : Maybe Color, content : Html msg } - , rows : List (Outline msg) + { rows : List (Outline msg) , title : Maybe String , content : Html msg , palette : RowTheme From 1c9f27033fdb558bd1d6fdf675e1a8e74fcfc196 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 10:05:17 -0600 Subject: [PATCH 12/23] Adds Keyed outline helpers --- src/Nri/Ui/Outline/V1.elm | 159 +++++++++++++++++++++++++++++++++++--- 1 file changed, 148 insertions(+), 11 deletions(-) diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm index 73e6399e..4ff36251 100644 --- a/src/Nri/Ui/Outline/V1.elm +++ b/src/Nri/Ui/Outline/V1.elm @@ -1,7 +1,6 @@ module Nri.Ui.Outline.V1 exposing - ( Outline - , view - , row, customRow + ( Outline, view, row, customRow + , KeyedOutline, viewKeyed, keyedRow, keyedRowWithExtraContent , RowTheme , white, gray, darkGray, blue, darkBlue, purple, turquoise, green, red, aqua, cornflower , blueDashBordered @@ -10,16 +9,14 @@ module Nri.Ui.Outline.V1 exposing {-| A nestable layout that can be themed. -@docs Outline -@docs view +@docs Outline, view, row, customRow + +When you're adding or removing elements, use KeyedOutline and corresponding helpers: + +@docs KeyedOutline, viewKeyed, keyedRow, keyedRowWithExtraContent -## Rows - -@docs row, customRow - - -## Predefined color palettes for use with Outline. +## Predefined color palettes for use with Outlines and KeyedOutlines. @docs RowTheme @docs white, gray, darkGray, blue, darkBlue, purple, turquoise, green, red, aqua, cornflower @@ -31,6 +28,7 @@ module Nri.Ui.Outline.V1 exposing import Css exposing (..) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) +import Html.Styled.Keyed import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Html.Attributes.V2 as Attributes @@ -145,6 +143,145 @@ customRow config = +-- KEYED OUTLINE + + +{-| Aliased strictly for exporting +-} +type KeyedOutline msg + = KeyedOutline + String + { extraContent : Maybe { border : Maybe Color, content : Html msg } + , rows : List (KeyedOutline msg) + , title : Maybe String + , content : Html msg + , palette : RowTheme + } + + +{-| The row view. + + import Html.Styled exposing (..) + import Nri.Ui.Outline.V1 as Outline + + main : Html msg + main = + Outline.viewKeyed [{- Rows go here -}] + +-} +viewKeyed : List (KeyedOutline msg) -> Html msg +viewKeyed rows = + Html.Styled.Keyed.node "ul" + [ Html.Styled.Attributes.css + [ Css.listStyle Css.none + , Css.margin4 (Css.px 10) Css.zero Css.zero Css.zero + , Css.padding Css.zero + ] + ] + (viewKeyedRows Root rows) + + +viewKeyedRows : Hierarchy -> List (KeyedOutline msg) -> List ( String, Html msg ) +viewKeyedRows hierarchy rows = + let + orderedNodeColors = + (List.map (\(KeyedOutline _ { palette }) -> Just palette.border) rows ++ [ Nothing ]) + |> List.drop 1 + in + List.map2 (viewKeyedRow hierarchy) orderedNodeColors rows + + +viewKeyedRow : Hierarchy -> Maybe Css.Color -> KeyedOutline msg -> ( String, Html msg ) +viewKeyedRow hierarchy nextNodeColor (KeyedOutline key config) = + ( key + , utilViewRow hierarchy nextNodeColor config <| + Html.Styled.Keyed.node "ul" + [ css + [ Css.marginLeft (Css.px 25) + , Css.paddingLeft (Css.px 25) + , Css.paddingTop (Css.px 25) + , Css.listStyleType Css.none + ] + ] + (viewKeyedRows Child config.rows) + ) + + +{-| Render an unstyled row with only the outline styles. + + import Html.Styled exposing (..) + import Nri.Ui.Outline.V1 as Outline + + main : Html msg + main = + Outline.viewKeyed [] + [ Outline.keyedRow someKey + { title = Just "My outline node" + , content = text "This is my content" + , palette = RowTheme.red + , rows = [] + } + ] + +-} +keyedRow : + String + -> + { title : Maybe String + , content : Html msg + , palette : RowTheme + , rows : List (KeyedOutline msg) + } + -> KeyedOutline msg +keyedRow key config = + KeyedOutline key + { title = config.title + , content = config.content + , palette = config.palette + , rows = config.rows + , extraContent = Nothing + } + + +{-| Render a row with extra content. This row cannot have child rows. + + import Html.Styled exposing (..) + import Nri.Ui.Outline.V1 as Outline + + main : Html msg + main = + Outline.view + [ Outline.keyedRowWithExtraContent someKey + { title = Just "My outline node" + , content = text "This is my content" + , palette = RowTheme.red + , extraContent = { border = Just RowTheme.blue, content = text "My extra content" } + , rows = [] + } + ] + +-} +keyedRowWithExtraContent : + String + -> + { rows : List (KeyedOutline msg) + , extraContent : { border : Maybe Color, content : Html msg } + , title : Maybe String + , content : Html msg + , palette : RowTheme + } + -> KeyedOutline msg +keyedRowWithExtraContent key config = + KeyedOutline key + { title = config.title + , content = config.content + , palette = config.palette + , rows = config.rows + , extraContent = Just config.extraContent + } + + + -- THEMES From dfbd4239ba483f90be2c5ec67bfd73885a93f12a Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 10:09:47 -0600 Subject: [PATCH 13/23] Adds row themes for keyed view --- component-catalog/src/Examples/Outline.elm | 72 ++++++++++++++++------ 1 file changed, 52 insertions(+), 20 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index b1d90d0a..28d4cf70 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -10,6 +10,7 @@ import Category exposing (Category(..)) import Code import CommonControls import Css exposing (Color) +import Css.Media exposing (withMedia) import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView @@ -19,6 +20,7 @@ import Html.Styled.Attributes exposing (css) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading +import Nri.Ui.MediaQuery.V1 exposing (mobile) import Nri.Ui.Outline.V1 as Outline exposing (RowTheme) import Nri.Ui.Spacing.V1 as Spacing import Svg.Styled as Svg @@ -110,27 +112,57 @@ example = [ Heading.plaintext "Row Themes" , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] ] - , Outline.view - [ Outline.row - { title = Just "Row Themes" - , content = text "Outline supports custom row themes (like this node's theme), but it also has a predefined list of themes." - , palette = - { border = Colors.azure - , borderStyle = Css.batch [] - , background = Colors.gray96 + , div + [ css + [ Css.displayFlex + , Css.property "gap" "20px" + , withMedia [ mobile ] [ Css.flexWrap Css.wrap ] + ] + ] + [ Outline.view + [ Outline.row + { title = Just "Outline.view" + , content = text "Regular outlines support custom row themes (like this node's theme) as well as predefined themes." + , palette = + { border = Colors.azure + , borderStyle = Css.batch [] + , background = Colors.gray96 + } + , rows = + List.map + (\( themeName, theme ) -> + Outline.row + { title = Just themeName + , content = text "" + , palette = theme + , rows = [] + } + ) + allRowThemes } - , rows = - List.map - (\( themeName, theme ) -> - Outline.row - { title = Just themeName - , content = text "" - , palette = theme - , rows = [] - } - ) - allRowThemes - } + ] + , Outline.viewKeyed + [ Outline.keyedRow "base" + { title = Just "Outline.viewKeyed" + , content = text "Keyed outlines support custom row themes (like this node's theme) as well as predefined themes." + , palette = + { border = Colors.azure + , borderStyle = Css.batch [] + , background = Colors.gray96 + } + , rows = + List.map + (\( themeName, theme ) -> + Outline.keyedRow ("row-" ++ themeName) + { title = Just themeName + , content = text "" + , palette = theme + , rows = [] + } + ) + allRowThemes + } + ] ] ] } From d7b9851111dbfcc82aa6adb137b08a7d1a922cdc Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 10:13:07 -0600 Subject: [PATCH 14/23] Adds keyed view --- component-catalog/src/Examples/Outline.elm | 108 ++++++++++++++------- 1 file changed, 75 insertions(+), 33 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 28d4cf70..bf0cfd85 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -68,18 +68,34 @@ example = \_ -> [ { sectionName = "Customizable Example" , code = - Code.fromModule moduleName "view" - ++ Code.listMultiline - [ Code.fromModule moduleName "row " - ++ Code.recordMultiline - [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) - , ( "content", "text " ++ Code.string settings.content ) - , ( "palette", Tuple.first settings.palette ) - , ( "rows", Code.listMultiline [ "-- …" ] 3 ) - ] - 2 - ] - 1 + if settings.keyed then + Code.fromModule moduleName "viewKeyed" + ++ Code.listMultiline + [ Code.fromModule moduleName "keyedRow " + ++ Code.string "base-node" + ++ Code.recordMultiline + [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) + , ( "content", "text " ++ Code.string settings.content ) + , ( "palette", Tuple.first settings.palette ) + , ( "rows", Code.listMultiline [ "-- …" ] 3 ) + ] + 2 + ] + 1 + + else + Code.fromModule moduleName "view" + ++ Code.listMultiline + [ Code.fromModule moduleName "row " + ++ Code.recordMultiline + [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) + , ( "content", "text " ++ Code.string settings.content ) + , ( "palette", Tuple.first settings.palette ) + , ( "rows", Code.listMultiline [ "-- …" ] 3 ) + ] + 2 + ] + 1 } ] } @@ -87,27 +103,51 @@ example = [ Heading.plaintext "Customizable Example" , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] ] - , Outline.view - [ Outline.row - { title = settings.title - , content = text settings.content - , palette = Tuple.second settings.palette - , rows = - [ Outline.row - { title = Just "Node 2" - , content = text "" - , palette = Outline.cornflower - , rows = [] - } - , Outline.row - { title = Just "Node 3" - , content = text "" - , palette = Outline.cornflower - , rows = [] - } - ] - } - ] + , if settings.keyed then + Outline.viewKeyed + [ Outline.keyedRow "base-node" + { title = settings.title + , content = text settings.content + , palette = Tuple.second settings.palette + , rows = + [ Outline.keyedRow "node-2" + { title = Just "Node 2" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + , Outline.keyedRow "node-3" + { title = Just "Node 3" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + ] + } + ] + + else + Outline.view + [ Outline.row + { title = settings.title + , content = text settings.content + , palette = Tuple.second settings.palette + , rows = + [ Outline.row + { title = Just "Node 2" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + , Outline.row + { title = Just "Node 3" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + ] + } + ] , Heading.h2 [ Heading.plaintext "Row Themes" , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] @@ -320,6 +360,7 @@ type alias Settings = { title : Maybe String , content : String , palette : ( String, RowTheme ) + , keyed : Bool } @@ -339,6 +380,7 @@ init = ++ [ ( "custom", customRowTheme ) ] ) ) + |> Control.field "keyed" (Control.bool False) } From 46f2c876994041ae9d6d1d58480df561ead6b86d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 10:20:20 -0600 Subject: [PATCH 15/23] Set up configurability for every row type --- component-catalog/src/Examples/Outline.elm | 191 +++++++++++++-------- 1 file changed, 117 insertions(+), 74 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index bf0cfd85..0404e119 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -21,7 +21,7 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading import Nri.Ui.MediaQuery.V1 exposing (mobile) -import Nri.Ui.Outline.V1 as Outline exposing (RowTheme) +import Nri.Ui.Outline.V1 as Outline exposing (KeyedOutline, Outline, RowTheme) import Nri.Ui.Spacing.V1 as Spacing import Svg.Styled as Svg import Svg.Styled.Attributes as SvgAttrs @@ -68,34 +68,41 @@ example = \_ -> [ { sectionName = "Customizable Example" , code = - if settings.keyed then - Code.fromModule moduleName "viewKeyed" - ++ Code.listMultiline - [ Code.fromModule moduleName "keyedRow " - ++ Code.string "base-node" - ++ Code.recordMultiline - [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) - , ( "content", "text " ++ Code.string settings.content ) - , ( "palette", Tuple.first settings.palette ) - , ( "rows", Code.listMultiline [ "-- …" ] 3 ) - ] - 2 - ] - 1 + case settings.type_ of + Plain -> + Code.fromModule moduleName "view" + ++ Code.listMultiline + [ Code.fromModule moduleName "row " + ++ Code.recordMultiline + [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) + , ( "content", "text " ++ Code.string settings.content ) + , ( "palette", Tuple.first settings.palette ) + , ( "rows", Code.listMultiline [ "-- …" ] 3 ) + ] + 2 + ] + 1 - else - Code.fromModule moduleName "view" - ++ Code.listMultiline - [ Code.fromModule moduleName "row " - ++ Code.recordMultiline - [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) - , ( "content", "text " ++ Code.string settings.content ) - , ( "palette", Tuple.first settings.palette ) - , ( "rows", Code.listMultiline [ "-- …" ] 3 ) - ] - 2 - ] - 1 + Custom -> + "TODO" + + Keyed -> + Code.fromModule moduleName "viewKeyed" + ++ Code.listMultiline + [ Code.fromModule moduleName "keyedRow " + ++ Code.string "base-node" + ++ Code.recordMultiline + [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) + , ( "content", "text " ++ Code.string settings.content ) + , ( "palette", Tuple.first settings.palette ) + , ( "rows", Code.listMultiline [ "-- …" ] 3 ) + ] + 2 + ] + 1 + + KeyedWithExtraContent -> + "TODO" } ] } @@ -103,51 +110,39 @@ example = [ Heading.plaintext "Customizable Example" , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] ] - , if settings.keyed then - Outline.viewKeyed - [ Outline.keyedRow "base-node" - { title = settings.title - , content = text settings.content - , palette = Tuple.second settings.palette - , rows = - [ Outline.keyedRow "node-2" - { title = Just "Node 2" - , content = text "" - , palette = Outline.cornflower - , rows = [] - } - , Outline.keyedRow "node-3" - { title = Just "Node 3" - , content = text "" - , palette = Outline.cornflower - , rows = [] - } - ] - } - ] + , case settings.type_ of + Plain -> + Outline.view + [ Outline.row + { title = settings.title + , content = text settings.content + , palette = Tuple.second settings.palette + , rows = plainRows + } + ] - else - Outline.view - [ Outline.row - { title = settings.title - , content = text settings.content - , palette = Tuple.second settings.palette - , rows = - [ Outline.row - { title = Just "Node 2" - , content = text "" - , palette = Outline.cornflower - , rows = [] - } - , Outline.row - { title = Just "Node 3" - , content = text "" - , palette = Outline.cornflower - , rows = [] - } - ] - } - ] + Custom -> + Outline.view + [ Outline.customRow + { title = settings.title + , content = text settings.content + , palette = Tuple.second settings.palette + , rows = plainRows + } + ] + + Keyed -> + Outline.viewKeyed + [ Outline.keyedRow "base-node" + { title = settings.title + , content = text settings.content + , palette = Tuple.second settings.palette + , rows = keyedRows + } + ] + + KeyedWithExtraContent -> + text "TODO" , Heading.h2 [ Heading.plaintext "Row Themes" , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] @@ -208,6 +203,40 @@ example = } +plainRows : List (Outline msg) +plainRows = + [ Outline.row + { title = Just "Node 2" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + , Outline.row + { title = Just "Node 3" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + ] + + +keyedRows : List (KeyedOutline msg) +keyedRows = + [ Outline.keyedRow "node-2" + { title = Just "Node 2" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + , Outline.keyedRow "node-3" + { title = Just "Node 3" + , content = text "" + , palette = Outline.cornflower + , rows = [] + } + ] + + preview : Html msg preview = Svg.svg @@ -360,7 +389,7 @@ type alias Settings = { title : Maybe String , content : String , palette : ( String, RowTheme ) - , keyed : Bool + , type_ : RowType } @@ -380,10 +409,24 @@ init = ++ [ ( "custom", customRowTheme ) ] ) ) - |> Control.field "keyed" (Control.bool False) + |> Control.field "type" + (Control.choice + [ ( "plain", Control.value Plain ) + , ( "custom", Control.value Custom ) + , ( "keyed", Control.value Keyed ) + , ( "keyed with extra content", Control.value KeyedWithExtraContent ) + ] + ) } +type RowType + = Plain + | Custom + | Keyed + | KeyedWithExtraContent + + customRowTheme : Control ( String, RowTheme ) customRowTheme = Control.record From 7a9873dbebafb03e4b97fa2480db753d522c8a60 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 10:22:07 -0600 Subject: [PATCH 16/23] customRow is never used with extra content, which means its identical to row --- component-catalog/src/Examples/Outline.elm | 15 --------------- src/Nri/Ui/Outline/V1.elm | 21 ++------------------- 2 files changed, 2 insertions(+), 34 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 0404e119..76fbd310 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -83,9 +83,6 @@ example = ] 1 - Custom -> - "TODO" - Keyed -> Code.fromModule moduleName "viewKeyed" ++ Code.listMultiline @@ -121,16 +118,6 @@ example = } ] - Custom -> - Outline.view - [ Outline.customRow - { title = settings.title - , content = text settings.content - , palette = Tuple.second settings.palette - , rows = plainRows - } - ] - Keyed -> Outline.viewKeyed [ Outline.keyedRow "base-node" @@ -412,7 +399,6 @@ init = |> Control.field "type" (Control.choice [ ( "plain", Control.value Plain ) - , ( "custom", Control.value Custom ) , ( "keyed", Control.value Keyed ) , ( "keyed with extra content", Control.value KeyedWithExtraContent ) ] @@ -422,7 +408,6 @@ init = type RowType = Plain - | Custom | Keyed | KeyedWithExtraContent diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm index 4ff36251..0b790bf0 100644 --- a/src/Nri/Ui/Outline/V1.elm +++ b/src/Nri/Ui/Outline/V1.elm @@ -1,5 +1,5 @@ module Nri.Ui.Outline.V1 exposing - ( Outline, view, row, customRow + ( Outline, view, row , KeyedOutline, viewKeyed, keyedRow, keyedRowWithExtraContent , RowTheme , white, gray, darkGray, blue, darkBlue, purple, turquoise, green, red, aqua, cornflower @@ -9,7 +9,7 @@ module Nri.Ui.Outline.V1 exposing {-| A nestable layout that can be themed. -@docs Outline, view, row, customRow +@docs Outline, view, row When you're adding or removing elements, use KeyedOutline and corresponding helpers: @@ -122,23 +122,6 @@ row : } -> Outline msg row config = - Outline - { title = config.title - , content = config.content - , palette = config.palette - , rows = config.rows - } - - -{-| -} -customRow : - { rows : List (Outline msg) - , title : Maybe String - , content : Html msg - , palette : RowTheme - } - -> Outline msg -customRow config = Outline config From 31d6a0dc1394dfc3c4de3cfcd25fe859aa1594e7 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 11:42:32 -0600 Subject: [PATCH 17/23] Implement extra content example --- component-catalog/src/Examples/Outline.elm | 52 +++++++++++++++++++--- 1 file changed, 46 insertions(+), 6 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 76fbd310..5aa89ec4 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -98,8 +98,26 @@ example = ] 1 - KeyedWithExtraContent -> - "TODO" + KeyedWithExtraContent extraContent -> + Code.fromModule moduleName "viewKeyed" + ++ Code.listMultiline + [ Code.fromModule moduleName "keyedRowWithExtraContent " + ++ Code.string "base-node" + ++ Code.recordMultiline + [ ( "title", Code.maybe (Maybe.map Code.string settings.title) ) + , ( "content", "text " ++ Code.string settings.content ) + , ( "palette", Tuple.first settings.palette ) + , ( "rows", Code.listMultiline [ "-- …" ] 3 ) + , ( "extraContent" + , Code.record + [ ( "border", Code.maybe (Just "Outline.cornflower.border") ) + , ( "content", "text " ++ Code.string "Extra content…" ) + ] + ) + ] + 2 + ] + 1 } ] } @@ -128,8 +146,21 @@ example = } ] - KeyedWithExtraContent -> - text "TODO" + KeyedWithExtraContent extraContent -> + Outline.viewKeyed + [ Outline.keyedRowWithExtraContent "base-node" + { title = settings.title + , content = text settings.content + , palette = Tuple.second settings.palette + , rows = keyedRows + , extraContent = + { border = Just Outline.cornflower.border + , content = + pre [ css [ Css.margin Css.zero ] ] + [ text extraContent ] + } + } + ] , Heading.h2 [ Heading.plaintext "Row Themes" , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] @@ -400,7 +431,16 @@ init = (Control.choice [ ( "plain", Control.value Plain ) , ( "keyed", Control.value Keyed ) - , ( "keyed with extra content", Control.value KeyedWithExtraContent ) + , ( "keyed with extra content" + , [ "Extra content!" + , "This content requires the height of the connecting arrow to increase. Do NOT use vertical margin on this element." + , "Extra content is used for selecting which drafts to compare on the results views for Topic Sentence Peer Review results." + , "Check it out!" + ] + |> String.join "\n\n" + |> Control.stringTextarea + |> Control.map KeyedWithExtraContent + ) ] ) } @@ -409,7 +449,7 @@ init = type RowType = Plain | Keyed - | KeyedWithExtraContent + | KeyedWithExtraContent String customRowTheme : Control ( String, RowTheme ) From 122637f5a8c118d73905f0bc13623f3b6de2c064 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 12:06:46 -0600 Subject: [PATCH 18/23] Simplify the API for extra content border --- component-catalog/src/Examples/Outline.elm | 12 +++------- src/Nri/Ui/Outline/V1.elm | 26 +++++++++++++--------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 5aa89ec4..6651308b 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -109,10 +109,7 @@ example = , ( "palette", Tuple.first settings.palette ) , ( "rows", Code.listMultiline [ "-- …" ] 3 ) , ( "extraContent" - , Code.record - [ ( "border", Code.maybe (Just "Outline.cornflower.border") ) - , ( "content", "text " ++ Code.string "Extra content…" ) - ] + , "text " ++ Code.string "Extra content…" ) ] 2 @@ -154,11 +151,8 @@ example = , palette = Tuple.second settings.palette , rows = keyedRows , extraContent = - { border = Just Outline.cornflower.border - , content = - pre [ css [ Css.margin Css.zero ] ] - [ text extraContent ] - } + pre [ css [ Css.margin Css.zero ] ] + [ text extraContent ] } ] , Heading.h2 diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm index 0b790bf0..def759a1 100644 --- a/src/Nri/Ui/Outline/V1.elm +++ b/src/Nri/Ui/Outline/V1.elm @@ -87,6 +87,7 @@ viewRow hierarchy nextNodeColor (Outline config) = , palette = config.palette , extraContent = Nothing } + (\(Outline { palette }) -> palette.border) (Html.Styled.ul [ css [ Css.marginLeft (Css.px 25) @@ -134,7 +135,7 @@ row config = type KeyedOutline msg = KeyedOutline String - { extraContent : Maybe { border : Maybe Color, content : Html msg } + { extraContent : Maybe (Html msg) , rows : List (KeyedOutline msg) , title : Maybe String , content : Html msg @@ -177,8 +178,11 @@ viewKeyedRows hierarchy rows = viewKeyedRow : Hierarchy -> Maybe Css.Color -> KeyedOutline msg -> ( String, Html msg ) viewKeyedRow hierarchy nextNodeColor (KeyedOutline key config) = ( key - , utilViewRow hierarchy nextNodeColor config <| - Html.Styled.Keyed.node "ul" + , utilViewRow hierarchy + nextNodeColor + config + (\(KeyedOutline _ { palette }) -> palette.border) + (Html.Styled.Keyed.node "ul" [ css [ Css.marginLeft (Css.px 25) , Css.paddingLeft (Css.px 25) @@ -187,6 +191,7 @@ viewKeyedRow hierarchy nextNodeColor (KeyedOutline key config) = ] ] (viewKeyedRows Child config.rows) + ) ) @@ -238,7 +243,7 @@ keyedRow key config = { title = Just "My outline node" , content = text "This is my content" , palette = RowTheme.red - , extraContent = { border = Just RowTheme.blue, content = text "My extra content" } + , extraContent = text "My extra content" , rows = [] } ] @@ -248,7 +253,7 @@ keyedRowWithExtraContent : String -> { rows : List (KeyedOutline msg) - , extraContent : { border : Maybe Color, content : Html msg } + , extraContent : Html msg , title : Maybe String , content : Html msg , palette : RowTheme @@ -476,13 +481,14 @@ utilViewRow : -> { title : Maybe String , content : Html msg - , extraContent : Maybe { border : Maybe Color, content : Html msg } + , extraContent : Maybe (Html msg) , palette : RowTheme , rows : List outline } + -> (outline -> Color) -> Html msg -> Html msg -utilViewRow hierarchy nextNodeColor config children = +utilViewRow hierarchy nextNodeColor config getOutlineBorder children = let rowAttrs = [ Html.Styled.Attributes.attribute "data-nri-description" "outline-row" @@ -522,7 +528,7 @@ utilViewRow hierarchy nextNodeColor config children = Nothing -> config.content - , viewJust viewExtraContent config.extraContent + , viewJust (viewExtraContent (Maybe.map getOutlineBorder (List.head config.rows))) config.extraContent ] , if List.isEmpty config.rows then text "" @@ -584,8 +590,8 @@ horizontalChildConnector paletteBorder = ] -viewExtraContent : { border : Maybe Color, content : Html msg } -> Html msg -viewExtraContent { border, content } = +viewExtraContent : Maybe Color -> Html msg -> Html msg +viewExtraContent border content = div [ css [ marginLeft (px 32) From ed1c0aab6bf52e174747485236dc75d0f42e528d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 12:20:10 -0600 Subject: [PATCH 19/23] Adds basic tests --- tests/Spec/Nri/Ui/Outline.elm | 62 +++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 tests/Spec/Nri/Ui/Outline.elm diff --git a/tests/Spec/Nri/Ui/Outline.elm b/tests/Spec/Nri/Ui/Outline.elm new file mode 100644 index 00000000..b092d394 --- /dev/null +++ b/tests/Spec/Nri/Ui/Outline.elm @@ -0,0 +1,62 @@ +module Spec.Nri.Ui.Outline exposing (spec) + +import Expect exposing (Expectation) +import Html.Styled as Html exposing (Html, toUnstyled) +import Nri.Ui.Outline.V1 as Outline +import Test exposing (..) +import Test.Html.Query as Query +import Test.Html.Selector exposing (..) + + +spec = + describe "Nri.Ui.Outline" + [ test "view without rows does not render anything" <| + \() -> + Outline.view [] + |> hasNoUl + , test "viewKeyed without rows does not render anything" <| + \() -> + Outline.viewKeyed [] + |> hasNoUl + , test "view with rows renders ul with lis" <| + \() -> + Outline.view + [ Outline.row + { title = Nothing + , content = Html.text "" + , palette = Outline.gray + , rows = [] + } + ] + |> hasOneUlWithOneLi + , test "viewKeyed with rows renders ul with lis" <| + \() -> + Outline.viewKeyed + [ Outline.keyedRow "key" + { title = Nothing + , content = Html.text "" + , palette = Outline.gray + , rows = [] + } + ] + |> hasOneUlWithOneLi + ] + + +hasNoUl : Html msg -> Expectation +hasNoUl content = + Html.div [] [ content ] + |> toUnstyled + |> Query.fromHtml + |> Query.hasNot [ tag "ul" ] + + +hasOneUlWithOneLi : Html msg -> Expectation +hasOneUlWithOneLi content = + Html.div [] [ content ] + |> toUnstyled + |> Query.fromHtml + |> Expect.all + [ Query.count (Expect.equal 1) << Query.findAll [ tag "ul" ] + , Query.count (Expect.equal 1) << Query.findAll [ tag "li" ] + ] From aaacba747768a53740f90f826c46ddb9de433c77 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 12:21:43 -0600 Subject: [PATCH 20/23] Fix tests --- src/Nri/Ui/Outline/V1.elm | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm index def759a1..58b877b9 100644 --- a/src/Nri/Ui/Outline/V1.elm +++ b/src/Nri/Ui/Outline/V1.elm @@ -57,6 +57,16 @@ type Outline msg -} view : List (Outline msg) -> Html msg view rows = + case rows of + [] -> + text "" + + _ -> + view_ rows + + +view_ : List (Outline msg) -> Html msg +view_ rows = Html.Styled.ul [ Html.Styled.Attributes.css [ Css.listStyle Css.none @@ -155,6 +165,16 @@ type KeyedOutline msg -} viewKeyed : List (KeyedOutline msg) -> Html msg viewKeyed rows = + case rows of + [] -> + text "" + + _ -> + viewKeyed_ rows + + +viewKeyed_ : List (KeyedOutline msg) -> Html msg +viewKeyed_ rows = Html.Styled.Keyed.node "ul" [ Html.Styled.Attributes.css [ Css.listStyle Css.none From 3fa96425df0cf0431ddf05831fc8d971cca9b2c1 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 12:31:08 -0600 Subject: [PATCH 21/23] Elm review --- component-catalog/src/Examples/Outline.elm | 2 -- tests/Spec/Nri/Ui/Outline.elm | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 6651308b..0c7a505e 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -12,13 +12,11 @@ import CommonControls import Css exposing (Color) import Css.Media exposing (withMedia) import Debug.Control as Control exposing (Control) -import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import Example exposing (Example) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) import Nri.Ui.Colors.V1 as Colors -import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading import Nri.Ui.MediaQuery.V1 exposing (mobile) import Nri.Ui.Outline.V1 as Outline exposing (KeyedOutline, Outline, RowTheme) diff --git a/tests/Spec/Nri/Ui/Outline.elm b/tests/Spec/Nri/Ui/Outline.elm index b092d394..d1e65f47 100644 --- a/tests/Spec/Nri/Ui/Outline.elm +++ b/tests/Spec/Nri/Ui/Outline.elm @@ -8,6 +8,7 @@ import Test.Html.Query as Query import Test.Html.Selector exposing (..) +spec : Test spec = describe "Nri.Ui.Outline" [ test "view without rows does not render anything" <| From 42781f9979c55b6fa0ab722752ec2b475c556f82 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 12:38:46 -0600 Subject: [PATCH 22/23] Expect color contrast issues --- script/puppeteer-tests.js | 1 + 1 file changed, 1 insertion(+) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index ce7782cf..c0a1b446 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -232,6 +232,7 @@ describe("UI tests", function () { const skippedRules = { // Loading's color contrast check seems to change behavior depending on whether Percy snapshots are taken or not Loading: ["color-contrast"], + Outline: ["color-contrast"], RadioButton: ["duplicate-id"], }; From 0db6ec2eaf4e2974fc2f10ddc5b473191652c604 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 12 Sep 2023 14:31:56 -0600 Subject: [PATCH 23/23] Adds to instructional category --- component-catalog/src/Examples/Outline.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/component-catalog/src/Examples/Outline.elm b/component-catalog/src/Examples/Outline.elm index 0c7a505e..8c6d7f6b 100644 --- a/component-catalog/src/Examples/Outline.elm +++ b/component-catalog/src/Examples/Outline.elm @@ -40,7 +40,7 @@ example : Example State Msg example = { name = moduleName , version = version - , categories = [ Layout ] + , categories = [ Layout, Instructional ] , keyboardSupport = [] , state = init , update = update