diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index e46efbd0..ad868077 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -73,32 +73,18 @@ describe('UI tests', function () { const skippedRules = { 'Accordion': ['heading-order', 'region'], - 'Balloon': ['color-contrast', 'heading-order', 'label'], - 'Button': ['heading-order'], - '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'], + 'Balloon': ['color-contrast', 'label'], + 'Checkbox': ['region'], 'Loading': ['color-contrast'], - 'Menu': ['heading-order', 'region'], + 'Menu': ['region'], 'Modal': ['region'], - 'Message': ['heading-order', 'region'], - 'Page': ['color-contrast', 'heading-order', 'select-name'], + 'Message': ['region'], + 'Page': ['color-contrast', 'select-name'], 'RadioButton': ['duplicate-id', 'region'], - 'SegmentedControl': ['heading-order', 'region'], + 'SegmentedControl': ['region'], 'Select': ['label'], - 'SideNav': ['heading-order'], - 'SortableTable': ['heading-order'], - 'Switch': ['aria-allowed-attr', 'heading-order'], - 'Table': ['heading-order'], + 'Switch': ['aria-allowed-attr'], 'Tabs': ['region'], - 'Text': ['heading-order'], - 'Tooltip': ['heading-order'], } const specialProcessing = { diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm index 0c093b5a..211d7bec 100644 --- a/styleguide-app/Debug/Control/View.elm +++ b/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 ) diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 1de05a49..2857ca02 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/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" diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm index 91f3c516..206fb65a 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.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" ) diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm index d8f5d542..b78248ee 100644 --- a/styleguide-app/Examples/Fonts.elm +++ b/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" ] ] diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm index 52360e71..fb0c1ab8 100644 --- a/styleguide-app/Examples/Page.elm +++ b/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 <| diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm index c15dbf3e..d38c05ea 100644 --- a/styleguide-app/Examples/SortableTable.elm +++ b/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 ] } diff --git a/styleguide-app/Examples/Switch.elm b/styleguide-app/Examples/Switch.elm index 04c67912..9e870fb7 100644 --- a/styleguide-app/Examples/Switch.elm +++ b/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" diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index 629a8237..a2f6bae1 100644 --- a/styleguide-app/Examples/Table.elm +++ b/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 ] } diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm index 396e52ad..74e6d9f7 100644 --- a/styleguide-app/Examples/Tooltip.elm +++ b/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 "