From af96fbe2add45964796a3daa9ffad054d2959608 Mon Sep 17 00:00:00 2001 From: Brian Hicks Date: Tue, 27 Aug 2019 08:57:44 -0500 Subject: [PATCH 1/4] rearrange code to make defaults more obvious --- src/Nri/Ui/Heading/V2.elm | 92 +++++++++++++++++++++++++++------------ 1 file changed, 64 insertions(+), 28 deletions(-) diff --git a/src/Nri/Ui/Heading/V2.elm b/src/Nri/Ui/Heading/V2.elm index 29a65471..e5f35f83 100644 --- a/src/Nri/Ui/Heading/V2.elm +++ b/src/Nri/Ui/Heading/V2.elm @@ -24,58 +24,74 @@ import Nri.Ui.Fonts.V1 as Fonts {-| Make a first-level heading (styled like a top-level heading by default.) -} h1 : List (Attribute msg) -> List (Html msg) -> Html msg -h1 attrs content = - view Html.Styled.h1 (style Top :: attrs) content +h1 = + view Html.Styled.h1 + { style = Top + , css = [] + , attributes = [] + } {-| Make a second-level heading (styled like a tagline by default.) -} h2 : List (Attribute msg) -> List (Html msg) -> Html msg -h2 attrs content = - view Html.Styled.h2 (style Tagline :: attrs) content +h2 = + view Html.Styled.h2 + { style = Tagline + , css = [] + , attributes = [] + } {-| Make a third-level heading (styled like a subhead by default.) -} h3 : List (Attribute msg) -> List (Html msg) -> Html msg -h3 attrs content = - view Html.Styled.h3 (style Subhead :: attrs) content +h3 = + view Html.Styled.h3 + { style = Subhead + , css = [] + , attributes = [] + } {-| Make a fourth-level heading (styled like a small heading by default.) -} h4 : List (Attribute msg) -> List (Html msg) -> Html msg -h4 attrs content = - view Html.Styled.h4 (style Small :: attrs) content +h4 = + view Html.Styled.h4 + { style = Small + , css = [] + , attributes = [] + } {-| Make a fifth-level heading (styled like a small heading by default.) -} h5 : List (Attribute msg) -> List (Html msg) -> Html msg -h5 attrs content = - view Html.Styled.h5 (style Small :: attrs) content +h5 = + view Html.Styled.h5 + { style = Small + , css = [] + , attributes = [] + } -view : (List (Html.Styled.Attribute msg) -> List (Html msg) -> Html msg) -> List (Attribute msg) -> List (Html msg) -> Html msg -view tag customizations content = +view : + (List (Html.Styled.Attribute msg) -> List (Html msg) -> Html msg) + -> Customizations msg + -> List (Attribute msg) + -> List (Html msg) + -> Html msg +view tag customizations attrs content = let - ( finalStyle, attributes ) = - List.foldr - (\wrapped ( style_, attrs ) -> - case wrapped of - Style_ newStyle -> - ( newStyle, attrs ) - - Css css_ -> - ( style_, Html.Styled.Attributes.css css_ :: attrs ) - - Attribute_ attribute -> - ( style_, attribute :: attrs ) - ) - ( Top, [] ) - customizations + final = + List.foldl customize customizations attrs in - tag (Html.Styled.Attributes.css [ getStyles finalStyle ] :: attributes) content + tag + (Html.Styled.Attributes.css [ getStyles final.style, Css.batch final.css ] + :: final.attributes + ) + content type Attribute msg @@ -117,6 +133,26 @@ customAttr = Attribute_ +type alias Customizations msg = + { style : Style + , css : List Css.Style + , attributes : List (Html.Styled.Attribute msg) + } + + +customize : Attribute msg -> Customizations msg -> Customizations msg +customize attr customizations = + case attr of + Style_ newStyle -> + { customizations | style = newStyle } + + Css css_ -> + { customizations | css = customizations.css ++ css_ } + + Attribute_ attribute -> + { customizations | attributes = customizations.attributes ++ [ attribute ] } + + -- Style From fd072091ed7cd3a7624a873996029704ec152040 Mon Sep 17 00:00:00 2001 From: Brian Hicks Date: Tue, 27 Aug 2019 09:04:23 -0500 Subject: [PATCH 2/4] add aliases for easier upgrades --- src/Nri/Ui/Heading/V2.elm | 50 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/src/Nri/Ui/Heading/V2.elm b/src/Nri/Ui/Heading/V2.elm index e5f35f83..42601d94 100644 --- a/src/Nri/Ui/Heading/V2.elm +++ b/src/Nri/Ui/Heading/V2.elm @@ -2,6 +2,7 @@ module Nri.Ui.Heading.V2 exposing ( h1, h2, h3, h4, h5 , style, Style(..), css , customAttr + , top, tagline, subHeading, smallHeading ) {-| Headings with customization options for accessibility. @@ -12,6 +13,11 @@ module Nri.Ui.Heading.V2 exposing @docs customAttr + +# Aliases + +@docs top, tagline, subHeading, smallHeading + -} import Css exposing (..) @@ -32,6 +38,17 @@ h1 = } +{-| Make a top-level heading. + +This is an alias of [`h1`](#h1) to make transitioning from old versions of +`Nri.Ui.Text` easier. + +-} +top : List (Attribute msg) -> List (Html msg) -> Html msg +top = + h1 + + {-| Make a second-level heading (styled like a tagline by default.) -} h2 : List (Attribute msg) -> List (Html msg) -> Html msg @@ -43,6 +60,17 @@ h2 = } +{-| Make a tagline heading. + +This is an alias of [`h2`](#h2) to make transitioning from old versions of +`Nri.Ui.Text` easier. + +-} +tagline : List (Attribute msg) -> List (Html msg) -> Html msg +tagline = + h2 + + {-| Make a third-level heading (styled like a subhead by default.) -} h3 : List (Attribute msg) -> List (Html msg) -> Html msg @@ -54,6 +82,17 @@ h3 = } +{-| Make a subhead. + +This is an alias of [`h3`](#h3) to make transitioning from old versions of +`Nri.Ui.Text` easier. + +-} +subHeading : List (Attribute msg) -> List (Html msg) -> Html msg +subHeading = + h3 + + {-| Make a fourth-level heading (styled like a small heading by default.) -} h4 : List (Attribute msg) -> List (Html msg) -> Html msg @@ -65,6 +104,17 @@ h4 = } +{-| Make a small heading. + +This is an alias of [`h4`](#h4) to make transitioning from old versions of +`Nri.Ui.Text` easier. + +-} +smallHeading : List (Attribute msg) -> List (Html msg) -> Html msg +smallHeading = + h4 + + {-| Make a fifth-level heading (styled like a small heading by default.) -} h5 : List (Attribute msg) -> List (Html msg) -> Html msg From 220895db013fc02ad44d057658193bd9244613d9 Mon Sep 17 00:00:00 2001 From: Brian Hicks Date: Tue, 27 Aug 2019 09:08:20 -0500 Subject: [PATCH 3/4] demonstrate customizations in the style guide --- styleguide-app/Examples/Text.elm | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index cc54c629..c47f2471 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -6,8 +6,10 @@ module Examples.Text exposing (example) -} +import Css import Html.Styled as Html import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Text.V4 as Text @@ -41,5 +43,15 @@ example = , Heading.h2 [] [ Html.text "Paragraph styles for user-authored content" ] , Text.ugMediumBody [ Html.text <| "This is an ugMediumBody. " ++ longerBody ] , Text.ugSmallBody [ Html.text <| "This is an ugSmallBody. " ++ longerBody ] + + --------------- + , Html.hr [] [] + , Heading.h2 [] [ Html.text "Headings with overrides" ] + , Heading.h2 + [ Heading.style Heading.Top ] + [ Html.text "I'm an H2 with the top style!" ] + , Heading.h2 + [ Heading.css [ Css.color Colors.highlightPurpleDark ] ] + [ Html.text "I have a custom color!" ] ] } From 394b087f98fcc398cd909b164b7d3deba6060a81 Mon Sep 17 00:00:00 2001 From: Brian Hicks Date: Wed, 28 Aug 2019 08:07:34 -0500 Subject: [PATCH 4/4] remove aliases --- src/Nri/Ui/Heading/V2.elm | 62 ++++++++------------------------------- 1 file changed, 12 insertions(+), 50 deletions(-) diff --git a/src/Nri/Ui/Heading/V2.elm b/src/Nri/Ui/Heading/V2.elm index 42601d94..50513426 100644 --- a/src/Nri/Ui/Heading/V2.elm +++ b/src/Nri/Ui/Heading/V2.elm @@ -2,7 +2,6 @@ module Nri.Ui.Heading.V2 exposing ( h1, h2, h3, h4, h5 , style, Style(..), css , customAttr - , top, tagline, subHeading, smallHeading ) {-| Headings with customization options for accessibility. @@ -13,11 +12,6 @@ module Nri.Ui.Heading.V2 exposing @docs customAttr - -# Aliases - -@docs top, tagline, subHeading, smallHeading - -} import Css exposing (..) @@ -28,6 +22,9 @@ import Nri.Ui.Fonts.V1 as Fonts {-| Make a first-level heading (styled like a top-level heading by default.) + +Use this to upgrade from `Nri.Ui.Text.V2.heading`. + -} h1 : List (Attribute msg) -> List (Html msg) -> Html msg h1 = @@ -38,18 +35,10 @@ h1 = } -{-| Make a top-level heading. - -This is an alias of [`h1`](#h1) to make transitioning from old versions of -`Nri.Ui.Text` easier. - --} -top : List (Attribute msg) -> List (Html msg) -> Html msg -top = - h1 - - {-| Make a second-level heading (styled like a tagline by default.) + +Use this to upgrade from `Nri.Ui.Text.V2.tagline`. + -} h2 : List (Attribute msg) -> List (Html msg) -> Html msg h2 = @@ -60,18 +49,10 @@ h2 = } -{-| Make a tagline heading. - -This is an alias of [`h2`](#h2) to make transitioning from old versions of -`Nri.Ui.Text` easier. - --} -tagline : List (Attribute msg) -> List (Html msg) -> Html msg -tagline = - h2 - - {-| Make a third-level heading (styled like a subhead by default.) + +Use this to upgrade from `Nri.Ui.Text.V2.subHeading`. + -} h3 : List (Attribute msg) -> List (Html msg) -> Html msg h3 = @@ -82,18 +63,10 @@ h3 = } -{-| Make a subhead. - -This is an alias of [`h3`](#h3) to make transitioning from old versions of -`Nri.Ui.Text` easier. - --} -subHeading : List (Attribute msg) -> List (Html msg) -> Html msg -subHeading = - h3 - - {-| Make a fourth-level heading (styled like a small heading by default.) + +Use this to upgrade from `Nri.Ui.Text.V2.smallHeading`. + -} h4 : List (Attribute msg) -> List (Html msg) -> Html msg h4 = @@ -104,17 +77,6 @@ h4 = } -{-| Make a small heading. - -This is an alias of [`h4`](#h4) to make transitioning from old versions of -`Nri.Ui.Text` easier. - --} -smallHeading : List (Attribute msg) -> List (Html msg) -> Html msg -smallHeading = - h4 - - {-| Make a fifth-level heading (styled like a small heading by default.) -} h5 : List (Attribute msg) -> List (Html msg) -> Html msg