Merge pull request #909 from NoRedInk/bat/fix-heading-order

Bat/fix heading order

script/puppeteer-tests.js

@@ -73,32 +73,18 @@ describe('UI tests', function () {
 
   const skippedRules = {
     'Accordion': ['heading-order', 'region'],
-    'Balloon': ['color-contrast', 'heading-order', 'label'],
+    'Balloon': ['color-contrast', 'label'],
-    'Button': ['heading-order'],
+    'Checkbox': ['region'],
-    'Checkbox': ['heading-order', 'region'],
-    'ClickableSvg': ['heading-order'],
-    'ClickableText': ['heading-order'],
-    'Colors': ['heading-order'],
-    'Confetti': ['heading-order'],
-    'Container': ['heading-order'],
-    'DisclosureIndicator': ['heading-order'],
-    'Fonts': ['heading-order'],
-    'Heading': ['heading-order'],
     'Loading': ['color-contrast'],
-    'Menu': ['heading-order', 'region'],
+    'Menu': ['region'],
     'Modal': ['region'],
-    'Message': ['heading-order', 'region'],
+    'Message': ['region'],
-    'Page': ['color-contrast', 'heading-order', 'select-name'],
+    'Page': ['color-contrast', 'select-name'],
     'RadioButton': ['duplicate-id', 'region'],
-    'SegmentedControl': ['heading-order', 'region'],
+    'SegmentedControl': ['region'],
     'Select': ['label'],
-    'SideNav': ['heading-order'],
+    'Switch': ['aria-allowed-attr'],
-    'SortableTable': ['heading-order'],
-    'Switch': ['aria-allowed-attr', 'heading-order'],
-    'Table': ['heading-order'],
     'Tabs': ['region'],
-    'Text': ['heading-order'],
-    'Tooltip': ['heading-order'],
   }
 
   const specialProcessing = {

styleguide-app/Debug/Control/View.elm

@@ -59,8 +59,9 @@ viewExampleCode ellieLink component values =
                     [ details
                         []
                         [ summary []
-                            [ Heading.h4
+                            [ Heading.h3
                                 [ Heading.css [ Css.display Css.inline ]
+                                , Heading.style Heading.Small
                                 ]
                                 [ text example.sectionName ]
                             ]
@@ -87,7 +88,7 @@ viewExampleCode ellieLink component values =
 viewSection : String -> List (Html msg) -> Html msg
 viewSection name children =
     section [ css [ flex (int 1) ] ]
-        (Heading.h3 [] [ text name ]
+        (Heading.h2 [ Heading.style Heading.Subhead ] [ text name ]
             :: children
         )
 

styleguide-app/Examples/Checkbox.elm

@@ -14,6 +14,7 @@ import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay
+import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.PremiumCheckbox.V8 as PremiumCheckbox
 import Set exposing (Set)
 
@@ -46,7 +47,7 @@ example =
             , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
             , viewDisabledCheckbox "styleguide-checkbox-disabled" state
             , viewMultilineCheckboxes state
-            , h3 [] [ text "Premium Checkboxes" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Premium Checkboxes" ]
             , viewPremiumCheckboxes state
             ]
     , categories = [ Inputs ]
@@ -140,7 +141,7 @@ viewMultilineCheckboxes : State -> Html Msg
 viewMultilineCheckboxes state =
     Html.section
         [ css [ Css.width (Css.px 500) ] ]
-        [ Html.h3 [] [ Html.text "Multiline Text in Checkboxes" ]
+        [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Multiline Text in Checkboxes" ]
         , let
             id =
                 "styleguide-checkbox-multiline"

styleguide-app/Examples/Colors.elm

@@ -91,7 +91,7 @@ example =
               , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
               ]
                 |> viewColors
-            , Heading.h3 [] [ Html.text "Background Highlight Colors" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ 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.h3 [] [ Html.text "Text Highlight Colors" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ 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" )

styleguide-app/Examples/Fonts.elm

@@ -43,13 +43,13 @@ example =
             |> List.map viewPreview
     , view =
         \ellieLinkConfig _ ->
-            [ Heading.h3 [] [ Html.text "baseFont" ]
+            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "baseFont" ]
             , Html.p [ css [ Fonts.baseFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h3 [] [ Html.text "quizFont" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "quizFont" ]
             , Html.p [ css [ Fonts.quizFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-            , Heading.h3 [] [ Html.text "ugFont" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "ugFont" ]
             , Html.p [ css [ Fonts.ugFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
             ]

styleguide-app/Examples/Page.elm

@@ -117,7 +117,7 @@ viewExample viewName view recoveryText extras =
             , Css.marginBottom (Css.px 20)
             ]
         ]
-        [ Heading.h3 [] [ Html.text viewName ]
+        [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text viewName ]
         , Html.div [] extras
         , Html.code []
             [ Html.text <|

styleguide-app/Examples/SortableTable.elm

@@ -137,9 +137,9 @@ example =
                     , { firstName = "First5", lastName = "Last5", coins = 5 }
                     ]
             in
-            [ Heading.h3 [] [ Html.text "With sortable headers" ]
+            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With sortable headers" ]
             , SortableTable.view config sortState data
-            , Heading.h3 [] [ Html.text "Loading" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Loading" ]
             , SortableTable.viewLoading config sortState
             ]
     }

styleguide-app/Examples/Switch.elm

@@ -45,7 +45,7 @@ example =
         ]
     , view =
         \ellieLinkConfig interactiveIsOn ->
-            [ Heading.h3 [] [ Html.text "Interactive" ]
+            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Interactive" ]
             , Switch.view
                 [ Switch.onSwitch Switch
                 , Switch.id "switch-interactive"
@@ -58,14 +58,14 @@ example =
                     )
                 ]
                 interactiveIsOn
-            , Heading.h3 [] [ Html.text "Disabled (On)" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Disabled (On)" ]
             , Switch.view
                 [ Switch.disabled
                 , Switch.id "switch-disabled-on"
                 , Switch.label (Html.text "Permanently on")
                 ]
                 True
-            , Heading.h3 [] [ Html.text "Disabled (Off)" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Disabled (Off)" ]
             , Switch.view
                 [ Switch.disabled
                 , Switch.id "switch-disabled-off"

styleguide-app/Examples/Table.elm

@@ -106,15 +106,15 @@ example =
                     , { firstName = "First5", lastName = "Last5", submitted = 8 }
                     ]
             in
-            [ Heading.h3 [] [ Html.text "With header" ]
+            [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With header" ]
             , Table.view columns data
-            , Heading.h3 [] [ Html.text "Without header" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Without header" ]
             , Table.viewWithoutHeader columns data
-            , Heading.h3 [] [ Html.text "With additional cell styles" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With additional cell styles" ]
             , Table.view columns data
-            , Heading.h3 [] [ Html.text "Loading" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Loading" ]
             , Table.viewLoading columns
-            , Heading.h3 [] [ Html.text "Loading without header" ]
+            , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Loading without header" ]
             , Table.viewLoadingWithoutHeader columns
             ]
     }

styleguide-app/Examples/Tooltip.elm

@@ -114,7 +114,7 @@ update msg model =
 
 view : EllieLink.Config -> State -> List (Html Msg)
 view ellieLinkConfig model =
-    [ Heading.h3 [] [ Html.text "Using the Tooltip module" ]
+    [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Using the Tooltip module" ]
     , Text.mediumBody
         [ Text.html
             [ Html.text "Label the Tooltip as either being the "