Merge pull request #355 from NoRedInk/fix-style-precedence

Fix style precedence in Nri.Ui.Heading.V2

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
 

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!" ]
         ]
     }