From 1c77b7f9c4ae2e90ef4de5b0991e0676551fae77 Mon Sep 17 00:00:00 2001
From: Ben Dansby <dansby@noredink.com>
Date: Fri, 15 Jul 2022 11:17:49 -0700
Subject: [PATCH 01/15] Add Heading V3

---
 src/Nri/Ui/Heading/V3.elm | 290 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 290 insertions(+)
 create mode 100644 src/Nri/Ui/Heading/V3.elm

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
new file mode 100644
index 00000000..bb2a7c6c
--- /dev/null
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -0,0 +1,290 @@
+module Nri.Ui.Heading.V3 exposing
+    ( h1, h2, h3, h4, h5
+    , Attribute, style, Style(..), error, errorIf
+    , custom, css, nriDescription, testId, id
+    , customAttr
+    )
+
+{-|
+
+
+# Patch changes:
+
+    - changes default h2 style to subhead
+
+Headings with customization options for accessibility.
+
+@docs h1, h2, h3, h4, h5
+
+@docs Attribute, style, Style, error, errorIf
+
+@docs custom, css, nriDescription, testId, id
+@docs customAttr
+
+-}
+
+import Css exposing (..)
+import Html.Styled exposing (..)
+import Html.Styled.Attributes as Attributes
+import Nri.Ui.Colors.V1 exposing (..)
+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) -> List (Html msg) -> Html msg
+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 =
+    view Html.Styled.h2
+        { style = Subhead
+        , css = []
+        , attributes = []
+        }
+
+
+{-| Make a third-level heading (styled like a subhead by default.)
+-}
+h3 : List (Attribute msg) -> List (Html msg) -> Html msg
+h3 =
+    view Html.Styled.h3
+        { style = Small
+        , css = []
+        , attributes = []
+        }
+
+
+{-| Make a fourth-level heading (styled like a small heading by default.)
+-}
+h4 : List (Attribute msg) -> List (Html msg) -> Html msg
+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 =
+    view Html.Styled.h5
+        { style = Small
+        , css = []
+        , attributes = []
+        }
+
+
+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
+        final =
+            List.foldl customize customizations attrs
+    in
+    tag
+        (Attributes.css [ getStyles final.style, Css.batch final.css ]
+            :: final.attributes
+        )
+        content
+
+
+{-| Like an `Html.Attribute msg`, but specifically for headings. Use things
+like `style` and `errorIf` in this module to construct them.
+-}
+type Attribute msg
+    = Style_ Style
+    | Css (List Css.Style)
+    | Attributes_ (List (Html.Styled.Attribute msg))
+    | Skip
+
+
+{-| -}
+type Style
+    = Top
+    | Tagline
+    | Subhead
+    | Small
+
+
+{-| Select which of the base styles this heading should look like. Each of h1..5
+has a default, check their docs to see if you don't need to override this.
+-}
+style : Style -> Attribute msg
+style =
+    Style_
+
+
+{-| Set some custom CSS in this heading. For example, maybe you need to tweak
+margins. Now you can!
+-}
+css : List Css.Style -> Attribute msg
+css =
+    Css
+
+
+{-| Use this when the header is on top of a section in an error state.
+-}
+error : Attribute msg
+error =
+    css [ Css.color purple ]
+
+
+{-| Show an error if some condition is met.
+
+    Heading.h1
+        [ Heading.errorIf (model.errorMessage /= Nothing) ]
+        [ Html.text "Hello! ]
+
+-}
+errorIf : Bool -> Attribute msg
+errorIf cond =
+    if cond then
+        error
+
+    else
+        Skip
+
+
+{-| 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_
+
+
+{-| -}
+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_ ]
+
+
+{-| Please prefer `custom` for API consistency.
+-}
+customAttr : Html.Styled.Attribute msg -> Attribute msg
+customAttr attr =
+    Attributes_ [ attr ]
+
+
+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_ }
+
+        Attributes_ attributes ->
+            { customizations | attributes = customizations.attributes ++ attributes }
+
+        Skip ->
+            customizations
+
+
+
+-- Style
+
+
+getStyles : Style -> Css.Style
+getStyles style_ =
+    case style_ of
+        Top ->
+            headingStyles
+                { font = Fonts.baseFont
+                , color = navy
+                , size = 30
+                , lineHeight = 38
+                , weight = 700
+                }
+
+        Tagline ->
+            headingStyles
+                { font = Fonts.baseFont
+                , color = gray45
+                , size = 20
+                , lineHeight = 30
+                , weight = 400
+                }
+
+        Subhead ->
+            headingStyles
+                { font = Fonts.baseFont
+                , color = navy
+                , size = 20
+                , lineHeight = 26
+                , weight = 700
+                }
+
+        Small ->
+            Css.batch
+                [ headingStyles
+                    { font = Fonts.baseFont
+                    , color = gray20
+                    , size = 16
+                    , lineHeight = 21
+                    , weight = 700
+                    }
+                , letterSpacing (px -0.13)
+                ]
+
+
+headingStyles :
+    { color : Color
+    , font : Css.Style
+    , lineHeight : Float
+    , size : Float
+    , weight : Int
+    }
+    -> Css.Style
+headingStyles config =
+    Css.batch
+        [ config.font
+        , fontSize (px config.size)
+        , color config.color
+        , lineHeight (px config.lineHeight)
+        , fontWeight (int config.weight)
+        , padding zero
+        , textAlign left
+        , margin zero
+        ]

From 52201c29d8e82e8b79465b6b47f099f12ccf6a39 Mon Sep 17 00:00:00 2001
From: Ben Dansby <dansby@noredink.com>
Date: Fri, 15 Jul 2022 11:18:01 -0700
Subject: [PATCH 02/15] V2 -> V3

---
 elm.json                                  | 2 +-
 src/Nri/Ui/Page/V3.elm                    | 2 +-
 src/Nri/Ui/Text/V6.elm                    | 2 +-
 styleguide-app/App.elm                    | 2 +-
 styleguide-app/Debug/Control/View.elm     | 2 +-
 styleguide-app/Examples/BreadCrumbs.elm   | 2 +-
 styleguide-app/Examples/Button.elm        | 2 +-
 styleguide-app/Examples/Checkbox.elm      | 2 +-
 styleguide-app/Examples/Colors.elm        | 2 +-
 styleguide-app/Examples/Container.elm     | 2 +-
 styleguide-app/Examples/Fonts.elm         | 2 +-
 styleguide-app/Examples/Heading.elm       | 8 ++++----
 styleguide-app/Examples/IconExamples.elm  | 2 +-
 styleguide-app/Examples/Message.elm       | 2 +-
 styleguide-app/Examples/Page.elm          | 2 +-
 styleguide-app/Examples/SortableTable.elm | 2 +-
 styleguide-app/Examples/Table.elm         | 2 +-
 styleguide-app/Examples/Text.elm          | 2 +-
 styleguide-app/Examples/TextArea.elm      | 2 +-
 styleguide-app/Examples/Tooltip.elm       | 2 +-
 tests/elm-verify-examples.json            | 2 +-
 21 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/elm.json b/elm.json
index 420e3470..a25f6c4d 100644
--- a/elm.json
+++ b/elm.json
@@ -29,7 +29,7 @@
         "Nri.Ui.WhenFocusLeaves.V1",
         "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",
diff --git a/src/Nri/Ui/Page/V3.elm b/src/Nri/Ui/Page/V3.elm
index d2aa85b3..9d40d2ea 100644
--- a/src/Nri/Ui/Page/V3.elm
+++ b/src/Nri/Ui/Page/V3.elm
@@ -18,7 +18,7 @@ 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)
 
 
diff --git a/src/Nri/Ui/Text/V6.elm b/src/Nri/Ui/Text/V6.elm
index 55adb9c7..825843f3 100644
--- a/src/Nri/Ui/Text/V6.elm
+++ b/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
diff --git a/styleguide-app/App.elm b/styleguide-app/App.elm
index d4d3e308..c9eca632 100644
--- a/styleguide-app/App.elm
+++ b/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
diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm
index a5650e21..aae2e7f7 100644
--- a/styleguide-app/Debug/Control/View.elm
+++ b/styleguide-app/Debug/Control/View.elm
@@ -24,7 +24,7 @@ import EllieLink
 import Example
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
 import Nri.Ui.Text.V6 as Text
 
diff --git a/styleguide-app/Examples/BreadCrumbs.elm b/styleguide-app/Examples/BreadCrumbs.elm
index f93ec5b5..ff80f574 100644
--- a/styleguide-app/Examples/BreadCrumbs.elm
+++ b/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.V5 as Table
 import Nri.Ui.UiIcon.V1 as UiIcon
diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm
index 7d40e40a..b329d3d6 100644
--- a/styleguide-app/Examples/Button.elm
+++ b/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)
 
diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm
index 7a62547d..39a85a92 100644
--- a/styleguide-app/Examples/Checkbox.elm
+++ b/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)
diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm
index 206fb65a..24bf54e1 100644
--- a/styleguide-app/Examples/Colors.elm
+++ b/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)
 
diff --git a/styleguide-app/Examples/Container.elm b/styleguide-app/Examples/Container.elm
index 32498119..cef9d93c 100644
--- a/styleguide-app/Examples/Container.elm
+++ b/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
diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm
index b78248ee..b3637c62 100644
--- a/styleguide-app/Examples/Fonts.elm
+++ b/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
 
 
 {-| -}
diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index 35168070..ba095d8d 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -13,7 +13,7 @@ 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)
 
 
@@ -48,10 +48,10 @@ example =
             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" )
+                    , ( "h2", Heading.h2, "This is a subheading" )
+                    , ( "h3", Heading.h3, "This is a smallHeading" )
                     , ( "h4", Heading.h4, "This is a smallHeading" )
-                    , ( "h5", Heading.h5, "This is also a smallHeading" )
+                    , ( "h5", Heading.h5, "This is a smallHeading" )
                     ]
 
                 attributes =
diff --git a/styleguide-app/Examples/IconExamples.elm b/styleguide-app/Examples/IconExamples.elm
index e02b93b1..a071f17a 100644
--- a/styleguide-app/Examples/IconExamples.elm
+++ b/styleguide-app/Examples/IconExamples.elm
@@ -18,7 +18,7 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.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.Svg.V1 as Svg
 import Nri.Ui.Text.V6 as Text
 
diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm
index 0c36fee7..7b0748e1 100644
--- a/styleguide-app/Examples/Message.elm
+++ b/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)
 
diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm
index 1e4e9a5b..cb15f41d 100644
--- a/styleguide-app/Examples/Page.elm
+++ b/styleguide-app/Examples/Page.elm
@@ -16,7 +16,7 @@ import Html.Styled.Attributes exposing (css)
 import Http
 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 (RecoveryText(..))
 
 
diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm
index bf918077..f027e225 100644
--- a/styleguide-app/Examples/SortableTable.elm
+++ b/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.V5 as Table
diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm
index aa26ee9d..5055b1b3 100644
--- a/styleguide-app/Examples/Table.elm
+++ b/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.V5 as Table exposing (Column)
 
 
diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm
index eaa73f1d..eecc8f5d 100644
--- a/styleguide-app/Examples/Text.elm
+++ b/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
 
 
diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm
index 4ae9841e..763d99d3 100644
--- a/styleguide-app/Examples/TextArea.elm
+++ b/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
 
diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm
index 8945ce34..9f3f6f7e 100644
--- a/styleguide-app/Examples/Tooltip.elm
+++ b/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.V5 as Table
 import Nri.Ui.Tooltip.V3 as Tooltip
diff --git a/tests/elm-verify-examples.json b/tests/elm-verify-examples.json
index 554341a3..f7558c16 100644
--- a/tests/elm-verify-examples.json
+++ b/tests/elm-verify-examples.json
@@ -25,7 +25,7 @@
         "Nri.Ui.WhenFocusLeaves.V1",
         "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",

From e3f3186c3003a79a2bc4349396a1c45695325443 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 15 Jul 2022 16:57:53 -0700
Subject: [PATCH 03/15] Update the version

---
 styleguide-app/Examples/Heading.elm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index ba095d8d..a0e55ff2 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -24,7 +24,7 @@ moduleName =
 
 version : Int
 version =
-    2
+    3
 
 
 {-| -}

From 982b719b526caed8c123b7e524268a41fbbff71f Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 15 Jul 2022 16:59:57 -0700
Subject: [PATCH 04/15] Shake ci fixups

---
 deprecated-modules.csv         | 1 +
 elm.json                       | 1 +
 forbidden-imports.toml         | 3 +++
 tests/elm-verify-examples.json | 1 +
 4 files changed, 6 insertions(+)

diff --git a/deprecated-modules.csv b/deprecated-modules.csv
index 230b2143..ceaf4d37 100644
--- a/deprecated-modules.csv
+++ b/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.Tabs.V6,upgrade to V7
diff --git a/elm.json b/elm.json
index a25f6c4d..fe229666 100644
--- a/elm.json
+++ b/elm.json
@@ -29,6 +29,7 @@
         "Nri.Ui.WhenFocusLeaves.V1",
         "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",
diff --git a/forbidden-imports.toml b/forbidden-imports.toml
index 3979ea69..aa520712 100644
--- a/forbidden-imports.toml
+++ b/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']
diff --git a/tests/elm-verify-examples.json b/tests/elm-verify-examples.json
index f7558c16..5c7deb19 100644
--- a/tests/elm-verify-examples.json
+++ b/tests/elm-verify-examples.json
@@ -25,6 +25,7 @@
         "Nri.Ui.WhenFocusLeaves.V1",
         "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",

From e46fd2c81cf6e3cd7514482bf4cda7bb621b3d7a Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:19:16 -0700
Subject: [PATCH 05/15] :skull: remove error style attributes

---
 src/Nri/Ui/Heading/V3.elm           | 27 ++-------------------------
 styleguide-app/Examples/Heading.elm |  1 -
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index bb2a7c6c..e3b04caa 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -1,6 +1,6 @@
 module Nri.Ui.Heading.V3 exposing
     ( h1, h2, h3, h4, h5
-    , Attribute, style, Style(..), error, errorIf
+    , Attribute, style, Style(..)
     , custom, css, nriDescription, testId, id
     , customAttr
     )
@@ -105,7 +105,7 @@ view tag customizations attrs content =
 
 
 {-| Like an `Html.Attribute msg`, but specifically for headings. Use things
-like `style` and `errorIf` in this module to construct them.
+like `style` in this module to construct an Attribute.
 -}
 type Attribute msg
     = Style_ Style
@@ -138,29 +138,6 @@ css =
     Css
 
 
-{-| Use this when the header is on top of a section in an error state.
--}
-error : Attribute msg
-error =
-    css [ Css.color purple ]
-
-
-{-| Show an error if some condition is met.
-
-    Heading.h1
-        [ Heading.errorIf (model.errorMessage /= Nothing) ]
-        [ Html.text "Hello! ]
-
--}
-errorIf : Bool -> Attribute msg
-errorIf cond =
-    if cond then
-        error
-
-    else
-        Skip
-
-
 {-| Set some custom attributes.
 
 Please don't make headers interactive! Use buttons or links instead so that keyboard and screen
diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index a0e55ff2..e75b86b9 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -103,7 +103,6 @@ init =
     { control =
         ControlExtra.list
             |> CommonControls.css { moduleName = moduleName, use = Heading.css }
-            |> ControlExtra.optionalBoolListItem "error" ( "Heading.error", Heading.error )
             |> ControlExtra.optionalListItem "style" controlStyle
     }
 

From 714cf28bc20e77e15052063c75fb43c14741f1b9 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:20:18 -0700
Subject: [PATCH 06/15] :skull: remove deprecated helper

---
 src/Nri/Ui/Heading/V3.elm | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index e3b04caa..b6d3284a 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -2,7 +2,6 @@ module Nri.Ui.Heading.V3 exposing
     ( h1, h2, h3, h4, h5
     , Attribute, style, Style(..)
     , custom, css, nriDescription, testId, id
-    , customAttr
     )
 
 {-|
@@ -19,7 +18,6 @@ Headings with customization options for accessibility.
 @docs Attribute, style, Style, error, errorIf
 
 @docs custom, css, nriDescription, testId, id
-@docs customAttr
 
 -}
 
@@ -169,13 +167,6 @@ id id_ =
     custom [ Attributes.id id_ ]
 
 
-{-| Please prefer `custom` for API consistency.
--}
-customAttr : Html.Styled.Attribute msg -> Attribute msg
-customAttr attr =
-    Attributes_ [ attr ]
-
-
 type alias Customizations msg =
     { style : Style
     , css : List Css.Style

From 8f3689380ab99794efd95eb21c0d32010982e584 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:21:06 -0700
Subject: [PATCH 07/15] Update docs to reflect removals

---
 src/Nri/Ui/Heading/V3.elm | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index b6d3284a..01721080 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -7,9 +7,11 @@ module Nri.Ui.Heading.V3 exposing
 {-|
 
 
-# Patch changes:
+# Changes from V2:
 
     - changes default h2 style to subhead
+    - remove `customAttr`
+    - remove `error` and `errorIf`
 
 Headings with customization options for accessibility.
 

From ae8f6fe345f4e37910a3a93d3fef691a6f9443df Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:27:32 -0700
Subject: [PATCH 08/15] :skull: remove uses of Heading.style in styleguide

---
 styleguide-app/Debug/Control/View.elm     | 7 ++-----
 styleguide-app/Examples/Checkbox.elm      | 4 ++--
 styleguide-app/Examples/Colors.elm        | 4 ++--
 styleguide-app/Examples/Fonts.elm         | 6 +++---
 styleguide-app/Examples/Page.elm          | 2 +-
 styleguide-app/Examples/SortableTable.elm | 4 ++--
 styleguide-app/Examples/Table.elm         | 2 +-
 styleguide-app/Examples/Tooltip.elm       | 2 +-
 8 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm
index aae2e7f7..d4356c93 100644
--- a/styleguide-app/Debug/Control/View.elm
+++ b/styleguide-app/Debug/Control/View.elm
@@ -78,10 +78,7 @@ viewExampleCode ellieLink component values =
                     [ details
                         []
                         [ summary []
-                            [ Heading.h3
-                                [ Heading.css [ Css.display Css.inline ]
-                                , Heading.style Heading.Small
-                                ]
+                            [ Heading.h3 [ Heading.css [ Css.display Css.inline ] ]
                                 [ text example.sectionName ]
                             ]
                         , ellieLink
@@ -109,7 +106,7 @@ viewExampleCode ellieLink component values =
 viewSection : String -> List (Html msg) -> Html msg
 viewSection name children =
     section [ css [ flex (int 1) ] ]
-        (Heading.h2 [ Heading.style Heading.Subhead ] [ text name ]
+        (Heading.h2 [] [ text name ]
             :: children
         )
 
diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm
index 39a85a92..3868962f 100644
--- a/styleguide-app/Examples/Checkbox.elm
+++ b/styleguide-app/Examples/Checkbox.elm
@@ -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 [] [ text "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 [] [ Html.text "Multiline Text in Checkboxes" ]
         , let
             id =
                 "styleguide-checkbox-multiline"
diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm
index 24bf54e1..bde69083 100644
--- a/styleguide-app/Examples/Colors.elm
+++ b/styleguide-app/Examples/Colors.elm
@@ -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 [] [ Html.text "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 [] [ Html.text "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" )
diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm
index b3637c62..b1cb7f0d 100644
--- a/styleguide-app/Examples/Fonts.elm
+++ b/styleguide-app/Examples/Fonts.elm
@@ -43,13 +43,13 @@ example =
             |> List.map viewPreview
     , view =
         \ellieLinkConfig _ ->
-            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "baseFont" ]
+            [ Heading.h2 [] [ Html.text "baseFont" ]
             , Html.p [ css [ Fonts.baseFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "quizFont" ]
+            , Heading.h2 [] [ Html.text "quizFont" ]
             , Html.p [ css [ Fonts.quizFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "ugFont" ]
+            , Heading.h2 [] [ Html.text "ugFont" ]
             , Html.p [ css [ Fonts.ugFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
             ]
diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm
index cb15f41d..dd61422b 100644
--- a/styleguide-app/Examples/Page.elm
+++ b/styleguide-app/Examples/Page.elm
@@ -124,7 +124,7 @@ viewExample viewName view recoveryText extras =
             , Css.marginBottom (Css.px 20)
             ]
         ]
-        [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text viewName ]
+        [ Heading.h2 [] [ Html.text viewName ]
         , Html.div [] extras
         , Html.code []
             [ Html.text <|
diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm
index f027e225..28a00a22 100644
--- a/styleguide-app/Examples/SortableTable.elm
+++ b/styleguide-app/Examples/SortableTable.elm
@@ -152,9 +152,9 @@ example =
                     , { firstName = "First5", lastName = "Last5", coins = 5 }
                     ]
             in
-            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With sortable headers" ]
+            [ Heading.h2 [] [ Html.text "With sortable headers" ]
             , SortableTable.view config sortState data
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Loading" ]
+            , Heading.h2 [] [ Html.text "Loading" ]
             , SortableTable.viewLoading config sortState
             ]
     }
diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm
index 5055b1b3..bab220dd 100644
--- a/styleguide-app/Examples/Table.elm
+++ b/styleguide-app/Examples/Table.elm
@@ -104,7 +104,7 @@ example =
                         , toExampleCode "viewLoadingWithoutHeader" ""
                         ]
                 }
-            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Example" ]
+            , Heading.h2 [] [ text "Example" ]
             , case ( showHeader, isLoading ) of
                 ( True, False ) ->
                     Table.view columns data
diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm
index 9f3f6f7e..e1571790 100644
--- a/styleguide-app/Examples/Tooltip.elm
+++ b/styleguide-app/Examples/Tooltip.elm
@@ -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 [] [ Html.text "What type of tooltip should I use?" ]
     , Table.view
         [ Table.string
             { header = "Type"

From ccae2cd92fb8baa755949cd9dfb8245c2474fc4a Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:28:04 -0700
Subject: [PATCH 09/15] :skull: remove tagline styles

---
 src/Nri/Ui/Heading/V3.elm           | 10 ----------
 styleguide-app/Examples/Heading.elm |  1 -
 2 files changed, 11 deletions(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index 01721080..115fd21f 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -117,7 +117,6 @@ type Attribute msg
 {-| -}
 type Style
     = Top
-    | Tagline
     | Subhead
     | Small
 
@@ -208,15 +207,6 @@ getStyles style_ =
                 , weight = 700
                 }
 
-        Tagline ->
-            headingStyles
-                { font = Fonts.baseFont
-                , color = gray45
-                , size = 20
-                , lineHeight = 30
-                , weight = 400
-                }
-
         Subhead ->
             headingStyles
                 { font = Fonts.baseFont
diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index e75b86b9..a7ba9238 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -110,7 +110,6 @@ init =
 controlStyle : Control ( String, Heading.Attribute msg )
 controlStyle =
     [ ( "Top", Heading.Top )
-    , ( "Tagline", Heading.Tagline )
     , ( "Subhead", Heading.Subhead )
     , ( "Small", Heading.Small )
     ]

From e2c3982fee0dd0b7500b1eca17c848e283ddd505 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:41:44 -0700
Subject: [PATCH 10/15] :art: use style helpers directly

---
 src/Nri/Ui/Heading/V3.elm           | 202 ++++++++++++++--------------
 styleguide-app/Examples/Heading.elm |  19 +--
 2 files changed, 103 insertions(+), 118 deletions(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index 115fd21f..6630d67f 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -1,6 +1,7 @@
 module Nri.Ui.Heading.V3 exposing
     ( h1, h2, h3, h4, h5
-    , Attribute, style, Style(..)
+    , Attribute
+    , top, subhead, small
     , custom, css, nriDescription, testId, id
     )
 
@@ -12,13 +13,14 @@ module Nri.Ui.Heading.V3 exposing
     - changes default h2 style to subhead
     - remove `customAttr`
     - remove `error` and `errorIf`
+    - replaces `style` with `top`, `subhead`, and `small`
 
 Headings with customization options for accessibility.
 
 @docs h1, h2, h3, h4, h5
 
-@docs Attribute, style, Style, error, errorIf
-
+@docs Attribute
+@docs top, subhead, small
 @docs custom, css, nriDescription, testId, id
 
 -}
@@ -34,103 +36,62 @@ 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) -> List (Html msg) -> Html msg
-h1 =
-    view Html.Styled.h1
-        { style = Top
-        , css = []
-        , attributes = []
-        }
+h1 attributes =
+    view Html.Styled.h1 (top :: attributes)
 
 
 {-| Make a second-level heading (styled like a tagline by default.)
 -}
 h2 : List (Attribute msg) -> List (Html msg) -> Html msg
-h2 =
-    view Html.Styled.h2
-        { style = Subhead
-        , css = []
-        , attributes = []
-        }
+h2 attributes =
+    view Html.Styled.h2 (subhead :: attributes)
 
 
 {-| Make a third-level heading (styled like a subhead by default.)
 -}
 h3 : List (Attribute msg) -> List (Html msg) -> Html msg
-h3 =
-    view Html.Styled.h3
-        { style = Small
-        , css = []
-        , attributes = []
-        }
+h3 attributes =
+    view Html.Styled.h3 (small :: attributes)
 
 
 {-| Make a fourth-level heading (styled like a small heading by default.)
 -}
 h4 : List (Attribute msg) -> List (Html msg) -> Html msg
-h4 =
-    view Html.Styled.h4
-        { style = Small
-        , css = []
-        , attributes = []
-        }
+h4 attributes =
+    view Html.Styled.h4 (small :: attributes)
 
 
 {-| Make a fifth-level heading (styled like a small heading by default.)
 -}
 h5 : List (Attribute msg) -> List (Html msg) -> Html msg
-h5 =
-    view Html.Styled.h5
-        { style = Small
-        , css = []
-        , attributes = []
-        }
+h5 attributes =
+    view Html.Styled.h5 (small :: attributes)
 
 
 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 =
+view tag attrs content =
     let
         final =
-            List.foldl customize customizations attrs
+            List.foldl customize emptyCustomizations attrs
     in
-    tag
-        (Attributes.css [ getStyles final.style, Css.batch final.css ]
-            :: final.attributes
-        )
-        content
+    tag (Attributes.css final.css :: final.attributes) content
 
 
 {-| Like an `Html.Attribute msg`, but specifically for headings. Use things
 like `style` in this module to construct an Attribute.
 -}
 type Attribute msg
-    = Style_ Style
-    | Css (List Css.Style)
+    = Css (List Css.Style)
     | Attributes_ (List (Html.Styled.Attribute msg))
     | Skip
 
 
-{-| -}
-type Style
-    = Top
-    | Subhead
-    | Small
-
-
-{-| Select which of the base styles this heading should look like. Each of h1..5
-has a default, check their docs to see if you don't need to override this.
--}
-style : Style -> Attribute msg
-style =
-    Style_
-
-
 {-| Set some custom CSS in this heading. For example, maybe you need to tweak
-margins. Now you can!
+margins.
 -}
 css : List Css.Style -> Attribute msg
 css =
@@ -168,9 +129,15 @@ id id_ =
     custom [ Attributes.id id_ ]
 
 
+emptyCustomizations : Customizations msg
+emptyCustomizations =
+    { css = []
+    , attributes = []
+    }
+
+
 type alias Customizations msg =
-    { style : Style
-    , css : List Css.Style
+    { css : List Css.Style
     , attributes : List (Html.Styled.Attribute msg)
     }
 
@@ -178,9 +145,6 @@ type alias Customizations 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_ }
 
@@ -195,38 +159,69 @@ customize attr customizations =
 -- Style
 
 
-getStyles : Style -> Css.Style
-getStyles style_ =
-    case style_ of
-        Top ->
-            headingStyles
+{-| `top` headings are navy and have:
+
+    font-size: 30px
+    line-height: 38px
+    font-weight: 700
+
+By default.
+
+-}
+top : Attribute msg
+top =
+    (css << headingStyles)
+        { font = Fonts.baseFont
+        , color = navy
+        , size = 30
+        , lineHeight = 38
+        , weight = 700
+        }
+
+
+{-| `subhead` headings are navy and have:
+
+    font-size: 20px
+    line-height: 26px
+    font-weight: 700
+
+By default.
+
+-}
+subhead : Attribute msg
+subhead =
+    (css << headingStyles)
+        { font = Fonts.baseFont
+        , color = navy
+        , size = 20
+        , lineHeight = 26
+        , weight = 700
+        }
+
+
+{-| `small` headings are 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
                 { font = Fonts.baseFont
-                , color = navy
-                , size = 30
-                , lineHeight = 38
+                , color = gray20
+                , size = 16
+                , lineHeight = 21
                 , weight = 700
                 }
-
-        Subhead ->
-            headingStyles
-                { font = Fonts.baseFont
-                , color = navy
-                , size = 20
-                , lineHeight = 26
-                , weight = 700
-                }
-
-        Small ->
-            Css.batch
-                [ headingStyles
-                    { font = Fonts.baseFont
-                    , color = gray20
-                    , size = 16
-                    , lineHeight = 21
-                    , weight = 700
-                    }
-                , letterSpacing (px -0.13)
-                ]
+        )
 
 
 headingStyles :
@@ -236,15 +231,14 @@ headingStyles :
     , size : Float
     , weight : Int
     }
-    -> Css.Style
+    -> List Css.Style
 headingStyles config =
-    Css.batch
-        [ config.font
-        , fontSize (px config.size)
-        , color config.color
-        , lineHeight (px config.lineHeight)
-        , fontWeight (int config.weight)
-        , padding zero
-        , textAlign left
-        , margin zero
-        ]
+    [ config.font
+    , fontSize (px config.size)
+    , color config.color
+    , lineHeight (px config.lineHeight)
+    , fontWeight (int config.weight)
+    , padding zero
+    , textAlign left
+    , margin zero
+    ]
diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index a7ba9238..2c65f75a 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -109,20 +109,11 @@ init =
 
 controlStyle : Control ( String, Heading.Attribute msg )
 controlStyle =
-    [ ( "Top", Heading.Top )
-    , ( "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 =

From 7ac3f0cb9a263ec79fed7a949ccd910e6bfc5b2c Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:43:50 -0700
Subject: [PATCH 11/15] Remove configurability of invariants

---
 src/Nri/Ui/Heading/V3.elm | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index 6630d67f..f670f7b1 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -28,7 +28,7 @@ Headings with customization options for accessibility.
 import Css exposing (..)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attributes
-import Nri.Ui.Colors.V1 exposing (..)
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
 
@@ -159,7 +159,7 @@ customize attr customizations =
 -- Style
 
 
-{-| `top` headings are navy and have:
+{-| `top` headings are Colors.navy and have:
 
     font-size: 30px
     line-height: 38px
@@ -171,15 +171,13 @@ By default.
 top : Attribute msg
 top =
     (css << headingStyles)
-        { font = Fonts.baseFont
-        , color = navy
+        { color = Colors.navy
         , size = 30
         , lineHeight = 38
-        , weight = 700
         }
 
 
-{-| `subhead` headings are navy and have:
+{-| `subhead` headings are Colors.navy and have:
 
     font-size: 20px
     line-height: 26px
@@ -191,15 +189,13 @@ By default.
 subhead : Attribute msg
 subhead =
     (css << headingStyles)
-        { font = Fonts.baseFont
-        , color = navy
+        { color = Colors.navy
         , size = 20
         , lineHeight = 26
-        , weight = 700
         }
 
 
-{-| `small` headings are gray20 and have:
+{-| `small` headings are Colors.gray20 and have:
 
     font-size: 16px
     line-height: 21px
@@ -215,29 +211,25 @@ small =
     css
         (letterSpacing (px -0.13)
             :: headingStyles
-                { font = Fonts.baseFont
-                , color = gray20
+                { color = Colors.gray20
                 , size = 16
                 , lineHeight = 21
-                , weight = 700
                 }
         )
 
 
 headingStyles :
     { color : Color
-    , font : Css.Style
     , lineHeight : Float
     , size : Float
-    , weight : Int
     }
     -> List Css.Style
 headingStyles config =
-    [ config.font
+    [ Fonts.baseFont
     , fontSize (px config.size)
     , color config.color
     , lineHeight (px config.lineHeight)
-    , fontWeight (int config.weight)
+    , fontWeight (int 700)
     , padding zero
     , textAlign left
     , margin zero

From c586360dcd8c1334c148a45a3c537419979eeee8 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 16:45:27 -0700
Subject: [PATCH 12/15] :skull: remove unused attribute

---
 src/Nri/Ui/Heading/V3.elm | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index f670f7b1..04e4790d 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -87,7 +87,6 @@ like `style` in this module to construct an Attribute.
 type Attribute msg
     = Css (List Css.Style)
     | Attributes_ (List (Html.Styled.Attribute msg))
-    | Skip
 
 
 {-| Set some custom CSS in this heading. For example, maybe you need to tweak
@@ -151,9 +150,6 @@ customize attr customizations =
         Attributes_ attributes ->
             { customizations | attributes = customizations.attributes ++ attributes }
 
-        Skip ->
-            customizations
-
 
 
 -- Style

From 9872a754cbe607792fad4b0a1ac78c8e36f150e1 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 17:04:25 -0700
Subject: [PATCH 13/15] Match Text api

---
 src/Nri/Ui/Heading/V3.elm                 | 98 +++++++++++++++--------
 src/Nri/Ui/Page/V3.elm                    |  4 +-
 styleguide-app/Debug/Control/View.elm     |  8 +-
 styleguide-app/Examples/BreadCrumbs.elm   |  2 +-
 styleguide-app/Examples/Button.elm        |  2 +-
 styleguide-app/Examples/Checkbox.elm      |  4 +-
 styleguide-app/Examples/Colors.elm        |  4 +-
 styleguide-app/Examples/Container.elm     |  2 +-
 styleguide-app/Examples/Fonts.elm         |  6 +-
 styleguide-app/Examples/Heading.elm       | 38 +++++----
 styleguide-app/Examples/IconExamples.elm  |  4 +-
 styleguide-app/Examples/Message.elm       |  2 +-
 styleguide-app/Examples/Page.elm          |  2 +-
 styleguide-app/Examples/SortableTable.elm |  4 +-
 styleguide-app/Examples/Table.elm         |  2 +-
 styleguide-app/Examples/Text.elm          |  6 +-
 styleguide-app/Examples/TextArea.elm      |  2 +-
 styleguide-app/Examples/Tooltip.elm       |  2 +-
 18 files changed, 118 insertions(+), 74 deletions(-)

diff --git a/src/Nri/Ui/Heading/V3.elm b/src/Nri/Ui/Heading/V3.elm
index 04e4790d..9346761e 100644
--- a/src/Nri/Ui/Heading/V3.elm
+++ b/src/Nri/Ui/Heading/V3.elm
@@ -1,5 +1,6 @@
 module Nri.Ui.Heading.V3 exposing
     ( h1, h2, h3, h4, h5
+    , plaintext, markdown, html
     , Attribute
     , top, subhead, small
     , custom, css, nriDescription, testId, id
@@ -10,15 +11,24 @@ module Nri.Ui.Heading.V3 exposing
 
 # Changes from V2:
 
-    - changes default h2 style to subhead
-    - remove `customAttr`
-    - remove `error` and `errorIf`
-    - replaces `style` with `top`, `subhead`, and `small`
+  - 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 for accessibility.
+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
@@ -28,6 +38,7 @@ Headings with customization options for accessibility.
 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
@@ -35,35 +46,35 @@ 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) -> List (Html msg) -> Html msg
+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) -> List (Html msg) -> Html msg
+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) -> List (Html msg) -> Html msg
+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) -> List (Html msg) -> Html msg
+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) -> List (Html msg) -> Html msg
+h5 : List (Attribute msg) -> Html msg
 h5 attributes =
     view Html.Styled.h5 (small :: attributes)
 
@@ -71,30 +82,58 @@ h5 attributes =
 view :
     (List (Html.Styled.Attribute msg) -> List (Html msg) -> Html msg)
     -> List (Attribute msg)
-    -> List (Html msg)
     -> Html msg
-view tag attrs content =
+view tag attrs =
     let
         final =
-            List.foldl customize emptyCustomizations attrs
+            List.foldl (\(Attribute f) acc -> f acc) emptyCustomizations attrs
     in
-    tag (Attributes.css final.css :: final.attributes) content
+    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
-    = Css (List Css.Style)
-    | Attributes_ (List (Html.Styled.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
+css css_ =
+    Attribute
+        (\customizations ->
+            { customizations | css = customizations.css ++ css_ }
+        )
 
 
 {-| Set some custom attributes.
@@ -106,8 +145,11 @@ For style customizations, be sure to use the Heading.css helper.
 
 -}
 custom : List (Html.Styled.Attribute msg) -> Attribute msg
-custom =
-    Attributes_
+custom attributes =
+    Attribute
+        (\customizations ->
+            { customizations | attributes = customizations.attributes ++ attributes }
+        )
 
 
 {-| -}
@@ -130,27 +172,19 @@ id id_ =
 
 emptyCustomizations : Customizations msg
 emptyCustomizations =
-    { css = []
+    { content = []
+    , css = []
     , attributes = []
     }
 
 
 type alias Customizations msg =
-    { css : List Css.Style
+    { content : List (Html msg)
+    , css : List Css.Style
     , attributes : List (Html.Styled.Attribute msg)
     }
 
 
-customize : Attribute msg -> Customizations msg -> Customizations msg
-customize attr customizations =
-    case attr of
-        Css css_ ->
-            { customizations | css = customizations.css ++ css_ }
-
-        Attributes_ attributes ->
-            { customizations | attributes = customizations.attributes ++ attributes }
-
-
 
 -- Style
 
diff --git a/src/Nri/Ui/Page/V3.elm b/src/Nri/Ui/Page/V3.elm
index 9d40d2ea..fab60df8 100644
--- a/src/Nri/Ui/Page/V3.elm
+++ b/src/Nri/Ui/Page/V3.elm
@@ -202,8 +202,8 @@ 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 ]
+        , Heading.h2 [ Heading.plaintext config.subtitle ]
         , viewButton
             [ viewExit config ]
         , viewIf
diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm
index d4356c93..6ddd686d 100644
--- a/styleguide-app/Debug/Control/View.elm
+++ b/styleguide-app/Debug/Control/View.elm
@@ -78,8 +78,10 @@ viewExampleCode ellieLink component values =
                     [ details
                         []
                         [ summary []
-                            [ Heading.h3 [ Heading.css [ Css.display Css.inline ] ]
-                                [ text example.sectionName ]
+                            [ Heading.h3
+                                [ Heading.css [ Css.display Css.inline ]
+                                , Heading.plaintext example.sectionName
+                                ]
                             ]
                         , ellieLink
                             { fullModuleName = Example.fullName component
@@ -106,7 +108,7 @@ viewExampleCode ellieLink component values =
 viewSection : String -> List (Html msg) -> Html msg
 viewSection name children =
     section [ css [ flex (int 1) ] ]
-        (Heading.h2 [] [ text name ]
+        (Heading.h2 [ Heading.plaintext name ]
             :: children
         )
 
diff --git a/styleguide-app/Examples/BreadCrumbs.elm b/styleguide-app/Examples/BreadCrumbs.elm
index ff80f574..ca6e5bb0 100644
--- a/styleguide-app/Examples/BreadCrumbs.elm
+++ b/styleguide-app/Examples/BreadCrumbs.elm
@@ -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
diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm
index 2200d930..6f21be34 100644
--- a/styleguide-app/Examples/Button.elm
+++ b/styleguide-app/Examples/Button.elm
@@ -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
diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm
index 3868962f..9d7abc50 100644
--- a/styleguide-app/Examples/Checkbox.elm
+++ b/styleguide-app/Examples/Checkbox.elm
@@ -51,7 +51,7 @@ example =
             , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
             , viewDisabledCheckbox "styleguide-checkbox-disabled" state
             , viewMultilineCheckboxes state
-            , Heading.h2 [] [ 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 [] [ Html.text "Multiline Text in Checkboxes" ]
+        [ Heading.h2 [ Heading.plaintext "Multiline Text in Checkboxes" ]
         , let
             id =
                 "styleguide-checkbox-multiline"
diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm
index bde69083..37135964 100644
--- a/styleguide-app/Examples/Colors.elm
+++ b/styleguide-app/Examples/Colors.elm
@@ -91,7 +91,7 @@ example =
               , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
               ]
                 |> viewColors
-            , Heading.h2 [] [ 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 [] [ 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" )
diff --git a/styleguide-app/Examples/Container.elm b/styleguide-app/Examples/Container.elm
index cef9d93c..c255b1ff 100644
--- a/styleguide-app/Examples/Container.elm
+++ b/styleguide-app/Examples/Container.elm
@@ -131,7 +131,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
         ]
diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm
index b1cb7f0d..89d2e2b6 100644
--- a/styleguide-app/Examples/Fonts.elm
+++ b/styleguide-app/Examples/Fonts.elm
@@ -43,13 +43,13 @@ example =
             |> List.map viewPreview
     , view =
         \ellieLinkConfig _ ->
-            [ Heading.h2 [] [ Html.text "baseFont" ]
+            [ Heading.h2 [ Heading.plaintext "baseFont" ]
             , Html.p [ css [ Fonts.baseFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h2 [] [ Html.text "quizFont" ]
+            , Heading.h2 [ Heading.plaintext "quizFont" ]
             , Html.p [ css [ Fonts.quizFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h2 [] [ Html.text "ugFont" ]
+            , Heading.h2 [ Heading.plaintext "ugFont" ]
             , Html.p [ css [ Fonts.ugFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
             ]
diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index 2c65f75a..04b79f41 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -38,20 +38,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 subheading" )
-                    , ( "h3", Heading.h3, "This is a smallHeading" )
-                    , ( "h4", Heading.h4, "This is a smallHeading" )
-                    , ( "h5", Heading.h5, "This is a smallHeading" )
+                    [ ( "h1", Heading.h1 )
+                    , ( "h2", Heading.h2 )
+                    , ( "h3", Heading.h3 )
+                    , ( "h4", Heading.h4 )
+                    , ( "h5", Heading.h5 )
                     ]
 
                 attributes =
@@ -68,7 +68,7 @@ example =
                 , toExampleCode =
                     \settings ->
                         let
-                            toExampleCode ( name, _, content ) =
+                            toExampleCode ( name, _ ) =
                                 { sectionName = name
                                 , code =
                                     moduleName
@@ -77,16 +77,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,11 +98,23 @@ init : State
 init =
     { control =
         ControlExtra.list
+            |> ControlExtra.listItem "content" controlContent
             |> CommonControls.css { moduleName = moduleName, use = Heading.css }
             |> 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 =
     CommonControls.choice moduleName
diff --git a/styleguide-app/Examples/IconExamples.elm b/styleguide-app/Examples/IconExamples.elm
index 571337ea..a783e0f2 100644
--- a/styleguide-app/Examples/IconExamples.elm
+++ b/styleguide-app/Examples/IconExamples.elm
@@ -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
diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm
index 7b0748e1..b4ee4d4b 100644
--- a/styleguide-app/Examples/Message.elm
+++ b/styleguide-app/Examples/Message.elm
@@ -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
             ]
     }
diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm
index dd61422b..752e1205 100644
--- a/styleguide-app/Examples/Page.elm
+++ b/styleguide-app/Examples/Page.elm
@@ -124,7 +124,7 @@ viewExample viewName view recoveryText extras =
             , Css.marginBottom (Css.px 20)
             ]
         ]
-        [ Heading.h2 [] [ Html.text viewName ]
+        [ Heading.h2 [ Heading.plaintext viewName ]
         , Html.div [] extras
         , Html.code []
             [ Html.text <|
diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm
index 28a00a22..3a9b4f25 100644
--- a/styleguide-app/Examples/SortableTable.elm
+++ b/styleguide-app/Examples/SortableTable.elm
@@ -152,9 +152,9 @@ example =
                     , { firstName = "First5", lastName = "Last5", coins = 5 }
                     ]
             in
-            [ Heading.h2 [] [ Html.text "With sortable headers" ]
+            [ Heading.h2 [ Heading.plaintext "With sortable headers" ]
             , SortableTable.view config sortState data
-            , Heading.h2 [] [ Html.text "Loading" ]
+            , Heading.h2 [ Heading.plaintext "Loading" ]
             , SortableTable.viewLoading config sortState
             ]
     }
diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm
index bab220dd..fd875e3d 100644
--- a/styleguide-app/Examples/Table.elm
+++ b/styleguide-app/Examples/Table.elm
@@ -104,7 +104,7 @@ example =
                         , toExampleCode "viewLoadingWithoutHeader" ""
                         ]
                 }
-            , Heading.h2 [] [ text "Example" ]
+            , Heading.h2 [ Heading.plaintext "Example" ]
             , case ( showHeader, isLoading ) of
                 ( True, False ) ->
                     Table.view columns data
diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm
index eecc8f5d..b12905d8 100644
--- a/styleguide-app/Examples/Text.elm
+++ b/styleguide-app/Examples/Text.elm
@@ -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 )
diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm
index 763d99d3..f59b51d8 100644
--- a/styleguide-app/Examples/TextArea.elm
+++ b/styleguide-app/Examples/TextArea.elm
@@ -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"
diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm
index e1571790..fb7ed4c8 100644
--- a/styleguide-app/Examples/Tooltip.elm
+++ b/styleguide-app/Examples/Tooltip.elm
@@ -134,7 +134,7 @@ update msg model =
 view : EllieLink.Config -> State -> List (Html Msg)
 view ellieLinkConfig model =
     [ viewCustomizableExample ellieLinkConfig model.staticExampleSettings
-    , Heading.h2 [] [ 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"

From e905226a294eb40f6af5ef5714d5689078058bfb Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Mon, 18 Jul 2022 17:56:47 -0700
Subject: [PATCH 14/15] elm review

---
 styleguide-app/Examples/Heading.elm | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index 04b79f41..e16e7492 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -12,7 +12,6 @@ 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.V3 as Heading
 import ViewHelpers exposing (viewExamples)
 

From 1c3e338f4e1652befc41632c0dea639651af3cd5 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Thu, 21 Jul 2022 09:24:33 -0600
Subject: [PATCH 15/15] Use styled text for the subtitl

---
 src/Nri/Ui/Page/V3.elm | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Nri/Ui/Page/V3.elm b/src/Nri/Ui/Page/V3.elm
index d719560f..7f70ec77 100644
--- a/src/Nri/Ui/Page/V3.elm
+++ b/src/Nri/Ui/Page/V3.elm
@@ -20,6 +20,7 @@ import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Colors.V1 as Colors
 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
@@ -203,7 +204,14 @@ view config =
     viewContainer
         [ viewEmoji [ Html.text config.emoji ]
         , Heading.h1 [ Heading.plaintext config.title ]
-        , Heading.h2 [ Heading.plaintext config.subtitle ]
+        , 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