Merge pull request #986 from NoRedInk/dansby/heading-v3

Heading V3

deprecated-modules.csv

@@ -1,4 +1,5 @@
 Nri.Ui.Accordion.V1,upgrade to V3
+Nri.Ui.Heading.V2,upgrade to V3
 Nri.Ui.Menu.V1,upgrade to V3
 Nri.Ui.SortableTable.V2,upgrade to V3
 Nri.Ui.Table.V5,upgrade to V6

elm.json

@@ -30,6 +30,7 @@
         "Nri.Ui.FocusTrap.V1",
         "Nri.Ui.Fonts.V1",
         "Nri.Ui.Heading.V2",
+        "Nri.Ui.Heading.V3",
         "Nri.Ui.Html.Attributes.V2",
         "Nri.Ui.Html.V3",
         "Nri.Ui.InputStyles.V3",

forbidden-imports.toml

@@ -49,6 +49,9 @@ usages = ['styleguide-app/Examples/Tooltip.elm']
 [forbidden."Nri.Ui.Container.V1"]
 hint = 'upgrade to V2'
 
+[forbidden."Nri.Ui.Heading.V2"]
+hint = 'upgrade to V3'
+
 [forbidden."Nri.Ui.Icon.V3"]
 hint = 'upgrade to V5'
 usages = ['styleguide-app/../src/Nri/Ui/Modal/V3.elm']

src/Nri/Ui/Heading/V3.elm

@@ -0,0 +1,266 @@
+module Nri.Ui.Heading.V3 exposing
+    ( h1, h2, h3, h4, h5
+    , plaintext, markdown, html
+    , Attribute
+    , top, subhead, small
+    , custom, css, nriDescription, testId, id
+    )
+
+{-|
+
+
+# Changes from V2:
+
+  - changes default h2 style to subhead
+  - remove `customAttr`
+  - remove `error` and `errorIf`
+  - replaces `style` with `top`, `subhead`, and `small`
+  - replaces list of HTML attributes with content approach (`plaintext`, `markdown`, `html`) used in Text
+
+Headings with customization options.
+
+@docs h1, h2, h3, h4, h5
+
+
+# Content
+
+@docs plaintext, markdown, html
+
+
+## Customizations
+
+@docs Attribute
+@docs top, subhead, small
+@docs custom, css, nriDescription, testId, id
+
+-}
+
+import Css exposing (..)
+import Html.Styled exposing (..)
+import Html.Styled.Attributes as Attributes
+import Markdown
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
+
+
+{-| Make a first-level heading (styled like a top-level heading by default.)
+-}
+h1 : List (Attribute msg) -> Html msg
+h1 attributes =
+    view Html.Styled.h1 (top :: attributes)
+
+
+{-| Make a second-level heading (styled like a tagline by default.)
+-}
+h2 : List (Attribute msg) -> Html msg
+h2 attributes =
+    view Html.Styled.h2 (subhead :: attributes)
+
+
+{-| Make a third-level heading (styled like a subhead by default.)
+-}
+h3 : List (Attribute msg) -> Html msg
+h3 attributes =
+    view Html.Styled.h3 (small :: attributes)
+
+
+{-| Make a fourth-level heading (styled like a small heading by default.)
+-}
+h4 : List (Attribute msg) -> Html msg
+h4 attributes =
+    view Html.Styled.h4 (small :: attributes)
+
+
+{-| Make a fifth-level heading (styled like a small heading by default.)
+-}
+h5 : List (Attribute msg) -> Html msg
+h5 attributes =
+    view Html.Styled.h5 (small :: attributes)
+
+
+view :
+    (List (Html.Styled.Attribute msg) -> List (Html msg) -> Html msg)
+    -> List (Attribute msg)
+    -> Html msg
+view tag attrs =
+    let
+        final =
+            List.foldl (\(Attribute f) acc -> f acc) emptyCustomizations attrs
+    in
+    tag (Attributes.css final.css :: final.attributes) final.content
+
+
+{-| Provide a plain-text string.
+-}
+plaintext : String -> Attribute msg
+plaintext content =
+    Attribute <| \config -> { config | content = [ text content ] }
+
+
+{-| Provide a string that will be rendered as markdown.
+-}
+markdown : String -> Attribute msg
+markdown content =
+    Attribute <|
+        \config ->
+            { config
+                | content =
+                    Markdown.toHtml Nothing content
+                        |> List.map fromUnstyled
+            }
+
+
+{-| Provide a list of custom HTML.
+-}
+html : List (Html msg) -> Attribute msg
+html content =
+    Attribute <| \config -> { config | content = content }
+
+
+{-| Like an `Html.Attribute msg`, but specifically for headings. Use things
+like `style` in this module to construct an Attribute.
+-}
+type Attribute msg
+    = Attribute (Customizations msg -> Customizations msg)
+
+
+{-| Set some custom CSS in this heading. For example, maybe you need to tweak
+margins.
+-}
+css : List Css.Style -> Attribute msg
+css css_ =
+    Attribute
+        (\customizations ->
+            { customizations | css = customizations.css ++ css_ }
+        )
+
+
+{-| Set some custom attributes.
+
+Please don't make headers interactive! Use buttons or links instead so that keyboard and screen
+reader users can use the site too.
+
+For style customizations, be sure to use the Heading.css helper.
+
+-}
+custom : List (Html.Styled.Attribute msg) -> Attribute msg
+custom attributes =
+    Attribute
+        (\customizations ->
+            { customizations | attributes = customizations.attributes ++ attributes }
+        )
+
+
+{-| -}
+nriDescription : String -> Attribute msg
+nriDescription description =
+    custom [ ExtraAttributes.nriDescription description ]
+
+
+{-| -}
+testId : String -> Attribute msg
+testId id_ =
+    custom [ ExtraAttributes.testId id_ ]
+
+
+{-| -}
+id : String -> Attribute msg
+id id_ =
+    custom [ Attributes.id id_ ]
+
+
+emptyCustomizations : Customizations msg
+emptyCustomizations =
+    { content = []
+    , css = []
+    , attributes = []
+    }
+
+
+type alias Customizations msg =
+    { content : List (Html msg)
+    , css : List Css.Style
+    , attributes : List (Html.Styled.Attribute msg)
+    }
+
+
+
+-- Style
+
+
+{-| `top` headings are Colors.navy and have:
+
+    font-size: 30px
+    line-height: 38px
+    font-weight: 700
+
+By default.
+
+-}
+top : Attribute msg
+top =
+    (css << headingStyles)
+        { color = Colors.navy
+        , size = 30
+        , lineHeight = 38
+        }
+
+
+{-| `subhead` headings are Colors.navy and have:
+
+    font-size: 20px
+    line-height: 26px
+    font-weight: 700
+
+By default.
+
+-}
+subhead : Attribute msg
+subhead =
+    (css << headingStyles)
+        { color = Colors.navy
+        , size = 20
+        , lineHeight = 26
+        }
+
+
+{-| `small` headings are Colors.gray20 and have:
+
+    font-size: 16px
+    line-height: 21px
+    font-weight: 700
+
+By default.
+
+`small` heading default styles also make the [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) slightly narrower, by 0.13px.
+
+-}
+small : Attribute msg
+small =
+    css
+        (letterSpacing (px -0.13)
+            :: headingStyles
+                { color = Colors.gray20
+                , size = 16
+                , lineHeight = 21
+                }
+        )
+
+
+headingStyles :
+    { color : Color
+    , lineHeight : Float
+    , size : Float
+    }
+    -> List Css.Style
+headingStyles config =
+    [ Fonts.baseFont
+    , fontSize (px config.size)
+    , color config.color
+    , lineHeight (px config.lineHeight)
+    , fontWeight (int 700)
+    , padding zero
+    , textAlign left
+    , margin zero
+    ]

src/Nri/Ui/Page/V3.elm

@@ -18,8 +18,9 @@ import Html.Styled.Attributes as Attributes
 import Http
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Html.V3 exposing (viewIf)
+import Nri.Ui.Text.V6 as Text
 
 
 {-| The default page information is for the button
@@ -202,8 +203,15 @@ view : Config msg -> Html msg
 view config =
     viewContainer
         [ viewEmoji [ Html.text config.emoji ]
-        , Heading.h1 [] [ Html.text config.title ]
-        , Heading.h2 [] [ Html.text config.subtitle ]
+        , Heading.h1 [ Heading.plaintext config.title ]
+        , Text.mediumBody
+            [ Text.plaintext config.subtitle
+            , Text.css
+                [ Css.fontSize (Css.px 20)
+                , Css.color Colors.gray45
+                , Css.marginBottom Css.zero
+                ]
+            ]
         , viewButton
             [ viewExit config ]
         , viewIf

src/Nri/Ui/Text/V6.elm

@@ -27,7 +27,7 @@ module Nri.Ui.Text.V6 exposing
 
 ## Headings
 
-You're in the wrong place! Headings live in Nri.Ui.Heading.V2.
+You're in the wrong place! Headings live in Nri.Ui.Heading.V3.
 
 
 ## Paragraph styles

styleguide-app/App.elm

@@ -15,7 +15,7 @@ import Html.Styled.Attributes exposing (..)
 import Http
 import Json.Decode as Decode
 import Nri.Ui.CssVendorPrefix.V1 as VendorPrefixed
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
 import Nri.Ui.Page.V3 as Page
 import Nri.Ui.SideNav.V3 as SideNav

styleguide-app/Debug/Control/View.elm

@@ -26,7 +26,7 @@ import Example
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Fonts.V1 as Fonts
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Html.V3 exposing (viewIf)
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
 import Nri.Ui.Text.V6 as Text
@@ -89,9 +89,8 @@ viewExampleCode ellieLink component values =
                         [ summary []
                             [ Heading.h3
                                 [ Heading.css [ Css.display Css.inline ]
-                                , Heading.style Heading.Small
+                                , Heading.plaintext example.sectionName
                                 ]
-                                [ text example.sectionName ]
                             ]
                         , ellieLink
                             { fullModuleName = Example.fullName component
@@ -117,8 +116,9 @@ viewExampleCode ellieLink component values =
 
 viewSection : String -> List Css.Style -> List (Html msg) -> Html msg
 viewSection name styles children =
-    section [ css (flex (int 1) :: styles) ]
-        (Heading.h2 [ Heading.style Heading.Subhead ] [ text name ]
+    section
+        [ css (flex (int 1) :: styles) ]
+        (Heading.h2 [ Heading.plaintext name ]
             :: children
         )
 

styleguide-app/Examples/BreadCrumbs.elm

@@ -18,7 +18,7 @@ import Html.Styled.Attributes exposing (css, href)
 import Nri.Ui.BreadCrumbs.V1 as BreadCrumbs exposing (BreadCrumbs)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.Table.V6 as Table
 import Nri.Ui.UiIcon.V1 as UiIcon
@@ -72,7 +72,7 @@ example =
                 , toExampleCode = \settings -> [ { sectionName = moduleName ++ ".view", code = viewExampleCode settings } ]
                 }
             , section [ css [ Css.margin2 (Css.px 20) Css.zero ] ]
-                [ Heading.h2 [] [ text "Example" ]
+                [ Heading.h2 [ Heading.plaintext "Example" ]
                 , viewExample breadCrumbs
                 ]
             , Table.view

styleguide-app/Examples/Button.elm

@@ -18,7 +18,7 @@ import Example exposing (Example)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Button.V10 as Button
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.UiIcon.V1 as UiIcon
 import Set exposing (Set)
 
@@ -306,7 +306,7 @@ buttons model =
 toggleButtons : Set Int -> Html Msg
 toggleButtons pressedToggleButtons =
     div []
-        [ Heading.h3 [] [ text "Button toggle" ]
+        [ Heading.h3 [ Heading.plaintext "Button toggle" ]
         , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ]
             [ Button.toggleButton
                 { onDeselect = ToggleToggleButton 0

styleguide-app/Examples/Checkbox.elm

@@ -17,7 +17,7 @@ import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay
 import Nri.Ui.Fonts.V1 as Fonts
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.PremiumCheckbox.V8 as PremiumCheckbox
 import Nri.Ui.Svg.V1 as Svg
 import Set exposing (Set)
@@ -51,7 +51,7 @@ example =
             , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
             , viewDisabledCheckbox "styleguide-checkbox-disabled" state
             , viewMultilineCheckboxes state
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Premium Checkboxes" ]
+            , Heading.h2 [ Heading.plaintext "Premium Checkboxes" ]
             , viewPremiumCheckboxes state
             ]
     , categories = [ Inputs ]
@@ -171,7 +171,7 @@ viewMultilineCheckboxes : State -> Html Msg
 viewMultilineCheckboxes state =
     Html.section
         [ css [ Css.width (Css.px 500) ] ]
-        [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Multiline Text in Checkboxes" ]
+        [ Heading.h2 [ Heading.plaintext "Multiline Text in Checkboxes" ]
         , let
             id =
                 "styleguide-checkbox-multiline"

styleguide-app/Examples/Colors.elm

@@ -14,7 +14,7 @@ import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.Colors.Extra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Text.V6 as Text
 import SolidColor exposing (highContrast)
 
@@ -91,7 +91,7 @@ example =
               , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
               ]
                 |> viewColors
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Background Highlight Colors" ]
+            , Heading.h2 [ Heading.plaintext "Background Highlight Colors" ]
             , Text.mediumBody [ Text.plaintext "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ]
             , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" )
               , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" )
@@ -109,7 +109,7 @@ example =
               , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" )
               ]
                 |> viewColors
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Text Highlight Colors" ]
+            , Heading.h2 [ Heading.plaintext "Text Highlight Colors" ]
             , Text.mediumBody [ Text.plaintext "Colors for highlighting text on a white background.  These colors are readable at 14px bold and bigger." ]
             , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" )
               , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" )

styleguide-app/Examples/Container.elm

@@ -16,7 +16,7 @@ import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Container.V2 as Container
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 
 
 moduleName : String
@@ -119,7 +119,7 @@ viewExample { name, description } attributes =
             [ Css.marginTop (Css.px 20)
             ]
         ]
-        [ Heading.h3 [] [ Html.text name ]
+        [ Heading.h3 [ Heading.plaintext name ]
         , Html.text description
         , Container.view attributes
         ]

styleguide-app/Examples/Fonts.elm

@@ -12,7 +12,7 @@ import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Fonts.V1 as Fonts
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 
 
 {-| -}
@@ -43,13 +43,13 @@ example =
             |> List.map viewPreview
     , view =
         \ellieLinkConfig _ ->
-            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "baseFont" ]
+            [ Heading.h2 [ Heading.plaintext "baseFont" ]
             , Html.p [ css [ Fonts.baseFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "quizFont" ]
+            , Heading.h2 [ Heading.plaintext "quizFont" ]
             , Html.p [ css [ Fonts.quizFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "ugFont" ]
+            , Heading.h2 [ Heading.plaintext "ugFont" ]
             , Html.p [ css [ Fonts.ugFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
             ]

styleguide-app/Examples/Heading.elm

@@ -12,8 +12,7 @@ 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 as Html
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import ViewHelpers exposing (viewExamples)
 
 
@@ -24,7 +23,7 @@ moduleName =
 
 version : Int
 version =
-    2
+    3
 
 
 {-| -}
@@ -38,20 +37,20 @@ example =
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ Heading.h1 [] [ Html.text "h1" ]
-        , Heading.h2 [] [ Html.text "h2" ]
-        , Heading.h3 [] [ Html.text "h3" ]
-        , Heading.h4 [] [ Html.text "h4" ]
+        [ Heading.h1 [ Heading.plaintext "h1" ]
+        , Heading.h2 [ Heading.plaintext "h2" ]
+        , Heading.h3 [ Heading.plaintext "h3" ]
+        , Heading.h4 [ Heading.plaintext "h4" ]
         ]
     , view =
         \ellieLinkConfig state ->
             let
                 examples =
-                    [ ( "h1", Heading.h1, "This is the main page heading." )
-                    , ( "h2", Heading.h2, "This is a tagline" )
-                    , ( "h3", Heading.h3, "This is a subHeading" )
-                    , ( "h4", Heading.h4, "This is a smallHeading" )
-                    , ( "h5", Heading.h5, "This is also a smallHeading" )
+                    [ ( "h1", Heading.h1 )
+                    , ( "h2", Heading.h2 )
+                    , ( "h3", Heading.h3 )
+                    , ( "h4", Heading.h4 )
+                    , ( "h5", Heading.h5 )
                     ]
 
                 attributes =
@@ -68,7 +67,7 @@ example =
                 , toExampleCode =
                     \settings ->
                         let
-                            toExampleCode ( name, _, content ) =
+                            toExampleCode ( name, _ ) =
                                 { sectionName = name
                                 , code =
                                     moduleName
@@ -77,16 +76,12 @@ example =
                                         ++ "\n    [ "
                                         ++ String.join "\n    , " (List.map Tuple.first settings)
                                         ++ "\n    ]"
-                                        ++ ("\n    [ Html.text \"" ++ content ++ "\" ]")
                                 }
                         in
                         List.map toExampleCode examples
                 }
             , examples
-                |> List.map
-                    (\( name, view, content ) ->
-                        ( name, view attributes [ Html.text content ] )
-                    )
+                |> List.map (\( name, view ) -> ( name, view attributes ))
                 |> viewExamples
             ]
     }
@@ -102,29 +97,30 @@ init : State
 init =
     { control =
         ControlExtra.list
+            |> ControlExtra.listItem "content" controlContent
             |> CommonControls.css { moduleName = moduleName, use = Heading.css }
-            |> ControlExtra.optionalBoolListItem "error" ( "Heading.error", Heading.error )
             |> ControlExtra.optionalListItem "style" controlStyle
     }
 
 
+controlContent : Control ( String, Heading.Attribute msg )
+controlContent =
+    CommonControls.content
+        { moduleName = moduleName
+        , plaintext = Heading.plaintext
+        , markdown = Just Heading.markdown
+        , html = Heading.html
+        , httpError = Nothing
+        }
+
+
 controlStyle : Control ( String, Heading.Attribute msg )
 controlStyle =
-    [ ( "Top", Heading.Top )
-    , ( "Tagline", Heading.Tagline )
-    , ( "Subhead", Heading.Subhead )
-    , ( "Small", Heading.Small )
-    ]
-        |> List.map
-            (\( name, val ) ->
-                ( name
-                , Control.value
-                    ( "Heading.style Heading." ++ name
-                    , Heading.style val
-                    )
-                )
-            )
-        |> Control.choice
+    CommonControls.choice moduleName
+        [ ( "top", Heading.top )
+        , ( "subhead", Heading.subhead )
+        , ( "small", Heading.small )
+        ]
 
 
 type alias Settings =

styleguide-app/Examples/IconExamples.elm

@@ -24,7 +24,7 @@ import Html.Styled.Events as Events
 import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Select.V8 as Select
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.Text.V6 as Text
@@ -186,7 +186,7 @@ view settings groups =
     viewSettings settings
         :: List.map viewExampleSection groups
         ++ [ Html.section [ css [ Css.margin2 (Css.px 30) Css.zero ] ]
-                [ Heading.h3 [] [ Html.text "Example Usage" ]
+                [ Heading.h3 [ Heading.plaintext "Example Usage" ]
                 , viewSingularExampleSettings groups settings
                 , viewResults settings
                 ]
@@ -211,8 +211,8 @@ viewWithCustomStyles { showIconName } headerText icons =
                 , Css.lineHeight (Css.num 1.2)
                 , Css.fontWeight (Css.int 700)
                 ]
+            , Heading.plaintext headerText
             ]
-            [ Html.text headerText ]
         , Html.div
             [ css
                 [ Css.displayFlex

styleguide-app/Examples/Message.elm

@@ -9,7 +9,7 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Message.V3 as Message
 import ViewHelpers exposing (viewExamples)
 
@@ -194,8 +194,8 @@ example =
                     , Css.borderTop3 (Css.px 2) Css.solid Colors.gray96
                     , Css.paddingTop (Css.px 20)
                     ]
+                , Heading.plaintext "Message.somethingWentWrong"
                 ]
-                [ text "Message.somethingWentWrong" ]
             , Message.somethingWentWrong exampleRailsError
             ]
     }

styleguide-app/Examples/Page.elm

@@ -17,7 +17,7 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Page.V3 as Page exposing (DefaultPage, RecoveryText(..))
 
 
@@ -113,7 +113,7 @@ example =
                           }
                         ]
                 }
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Example" ]
+            , Heading.h2 [ Heading.plaintext "Example" ]
             , Tuple.second settings.page
                 { link = ShowItWorked
                 , recoveryText = settings.recoveryText

styleguide-app/Examples/RadioButton.elm

@@ -20,13 +20,13 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import EllieLink
 import Example exposing (Example)
-import Html.Styled as Html exposing (..)
+import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Modal.V11 as Modal
 import Nri.Ui.RadioButton.V4 as RadioButton
 import Nri.Ui.Text.V6 as Text
@@ -125,7 +125,7 @@ view ellieLinkConfig state =
                   }
                 ]
         }
-    , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Example" ]
+    , Heading.h2 [ Heading.plaintext "Example" ]
     , viewExamples selectionSettings state.selectedValue
     , Modal.view
         { title = "Go Premium!"

styleguide-app/Examples/Select.elm

@@ -15,7 +15,7 @@ import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Select.V8 as Select exposing (Choice)
 
 
@@ -77,7 +77,7 @@ example =
                           }
                         ]
                 }
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.Styled.text "Example" ]
+            , Heading.h2 [ Heading.plaintext "Example" ]
             , Select.view label attributes
                 |> Html.Styled.map ConsoleLog
             ]

styleguide-app/Examples/SortableTable.elm

@@ -13,7 +13,7 @@ import Html.Styled as Html exposing (..)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.SortableTable.V3 as SortableTable
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.Table.V6 as Table
@@ -154,9 +154,9 @@ example =
                     , { firstName = "First5", lastName = "Last5", coins = 5 }
                     ]
             in
-            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With sortable headers" ]
+            [ Heading.h2 [ Heading.plaintext "With sortable headers" ]
             , SortableTable.view config sortState data
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Loading" ]
+            , Heading.h2 [ Heading.plaintext "Loading" ]
             , SortableTable.viewLoading config sortState
             ]
     }

styleguide-app/Examples/Table.elm

@@ -13,7 +13,7 @@ import Debug.Control as Control exposing (Control)
 import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Nri.Ui.Button.V10 as Button
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Table.V6 as Table exposing (Column)
 
 
@@ -106,7 +106,7 @@ example =
                         , toExampleCode "viewLoadingWithoutHeader" ""
                         ]
                 }
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Example" ]
+            , Heading.h2 [ Heading.plaintext "Example" ]
             , case ( showHeader, isLoading ) of
                 ( True, False ) ->
                     Table.view columns data

styleguide-app/Examples/Text.elm

@@ -15,7 +15,7 @@ import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Text.V6 as Text
 
 
@@ -82,8 +82,8 @@ example =
                         , toExampleCode "ugSmallBody"
                         ]
                 }
-            , Heading.h2 [] [ Html.text "Examples" ]
-            , Heading.h3 [] [ Html.text "Paragraph styles" ]
+            , Heading.h2 [ Heading.plaintext "Examples" ]
+            , Heading.h3 [ Heading.plaintext "Paragraph styles" ]
             , viewExamples
                 [ ( "mediumBody", Text.mediumBody )
                 , ( "smallBody", Text.smallBody )
@@ -91,7 +91,7 @@ example =
                 , ( "caption", Text.caption )
                 ]
                 attributes
-            , Heading.h3 [] [ Html.text "Paragraph styles for user-authored content" ]
+            , Heading.h3 [ Heading.plaintext "Paragraph styles for user-authored content" ]
             , viewExamples
                 [ ( "ugMediumBody", Text.ugMediumBody )
                 , ( "ugSmallBody", Text.ugSmallBody )

styleguide-app/Examples/TextArea.elm

@@ -14,7 +14,7 @@ import Html.Styled as Html
 import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.InputStyles.V3 as InputStyles exposing (Theme(..))
 import Nri.Ui.TextArea.V4 as TextArea
 
@@ -71,7 +71,7 @@ example =
         ]
     , view =
         \ellieLinkConfig state ->
-            [ Heading.h1 [] [ Html.text "Textarea controls" ]
+            [ Heading.h1 [ Heading.plaintext "Textarea controls" ]
             , Html.div []
                 [ Checkbox.viewWithLabel
                     { identifier = "show-textarea-label"

styleguide-app/Examples/TextInput.elm

@@ -6,7 +6,7 @@ module Examples.TextInput exposing (Msg, State, example)
 
 -}
 
-import Accessibility.Styled as Html exposing (..)
+import Accessibility.Styled exposing (..)
 import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
 import Css
@@ -16,7 +16,7 @@ import Debug.Control.View as ControlView
 import Dict exposing (Dict)
 import Example exposing (Example)
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.TextInput.V7 as TextInput
 import ViewHelpers exposing (viewExamples)
 
@@ -62,7 +62,7 @@ example =
                 , extraImports = []
                 , toExampleCode = \_ -> []
                 }
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Example" ]
+            , Heading.h2 [ Heading.plaintext "Example" ]
             , viewExamples <|
                 ( "readOnlyText"
                 , TextInput.view "Shareable Assignment Link"

styleguide-app/Examples/Tooltip.elm

@@ -22,7 +22,7 @@ import Markdown
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Table.V6 as Table
 import Nri.Ui.Tooltip.V3 as Tooltip
@@ -134,7 +134,7 @@ update msg model =
 view : EllieLink.Config -> State -> List (Html Msg)
 view ellieLinkConfig model =
     [ viewCustomizableExample ellieLinkConfig model.staticExampleSettings
-    , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "What type of tooltip should I use?" ]
+    , Heading.h2 [ Heading.plaintext "What type of tooltip should I use?" ]
     , Table.view
         [ Table.string
             { header = "Type"

tests/elm-verify-examples.json

@@ -26,6 +26,7 @@
         "Nri.Ui.FocusTrap.V1",
         "Nri.Ui.Fonts.V1",
         "Nri.Ui.Heading.V2",
+        "Nri.Ui.Heading.V3",
         "Nri.Ui.Html.Attributes.V2",
         "Nri.Ui.Html.V3",
         "Nri.Ui.InputStyles.V3",