diff --git a/src/Nri/Ui/Heading/V2.elm b/src/Nri/Ui/Heading/V2.elm index 29a65471..50513426 100644 --- a/src/Nri/Ui/Heading/V2.elm +++ b/src/Nri/Ui/Heading/V2.elm @@ -22,60 +22,88 @@ 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 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.) + +Use this to upgrade from `Nri.Ui.Text.V2.tagline`. + -} 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.) + +Use this to upgrade from `Nri.Ui.Text.V2.subHeading`. + -} 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.) + +Use this to upgrade from `Nri.Ui.Text.V2.smallHeading`. + -} 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 +145,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 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!" ] ] }