From adb2d4bd875a6cfe8abf437864a14e158057b26d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 12:30:07 -0700 Subject: [PATCH 1/3] Fix heading order issues, exclusive of Accordion because there's a PR making major changes to that component's view currently open --- script/puppeteer-tests.js | 28 ++++++----------------- styleguide-app/Debug/Control/View.elm | 4 ++-- 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/Switch.elm | 6 ++--- styleguide-app/Examples/Table.elm | 10 ++++---- styleguide-app/Examples/Tooltip.elm | 2 +- 10 files changed, 28 insertions(+), 42 deletions(-) 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..b4cf93d7 100644 --- a/styleguide-app/Debug/Control/View.elm +++ b/styleguide-app/Debug/Control/View.elm @@ -59,7 +59,7 @@ viewExampleCode ellieLink component values = [ details [] [ summary [] - [ Heading.h4 + [ Heading.h3 [ Heading.css [ Css.display Css.inline ] ] [ text example.sectionName ] @@ -87,7 +87,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 [] [ text name ] :: children ) diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 1de05a49..6fcd61fa 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -46,7 +46,7 @@ example = , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state , viewDisabledCheckbox "styleguide-checkbox-disabled" state , viewMultilineCheckboxes state - , h3 [] [ text "Premium Checkboxes" ] + , h2 [] [ text "Premium Checkboxes" ] , viewPremiumCheckboxes state ] , categories = [ Inputs ] @@ -140,7 +140,7 @@ viewMultilineCheckboxes : State -> Html Msg viewMultilineCheckboxes state = Html.section [ css [ Css.width (Css.px 500) ] ] - [ Html.h3 [] [ Html.text "Multiline Text in Checkboxes" ] + [ Html.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 91f3c516..de37e606 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 [] [ 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 [] [ 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..045143e1 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 [] [ Html.text "baseFont" ] , Html.p [ css [ Fonts.baseFont ] ] [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] - , Heading.h3 [] [ Html.text "quizFont" ] + , Heading.h2 [] [ Html.text "quizFont" ] , Html.p [ css [ Fonts.quizFont ] ] [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] - , Heading.h3 [] [ 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 52360e71..86f9cb73 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 [] [ 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..a1a2e7e0 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 [] [ Html.text "With sortable headers" ] , SortableTable.view config sortState data - , Heading.h3 [] [ Html.text "Loading" ] + , Heading.h2 [] [ Html.text "Loading" ] , SortableTable.viewLoading config sortState ] } diff --git a/styleguide-app/Examples/Switch.elm b/styleguide-app/Examples/Switch.elm index 04c67912..59a2ef22 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 [] [ 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 [] [ 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 [] [ 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..95e10f78 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 [] [ Html.text "With header" ] , Table.view columns data - , Heading.h3 [] [ Html.text "Without header" ] + , Heading.h2 [] [ Html.text "Without header" ] , Table.viewWithoutHeader columns data - , Heading.h3 [] [ Html.text "With additional cell styles" ] + , Heading.h2 [] [ Html.text "With additional cell styles" ] , Table.view columns data - , Heading.h3 [] [ Html.text "Loading" ] + , Heading.h2 [] [ Html.text "Loading" ] , Table.viewLoading columns - , Heading.h3 [] [ Html.text "Loading without header" ] + , Heading.h2 [] [ Html.text "Loading without header" ] , Table.viewLoadingWithoutHeader columns ] } diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm index 396e52ad..9d3b45cd 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 [] [ Html.text "Using the Tooltip module" ] , Text.mediumBody [ Text.html [ Html.text "Label the Tooltip as either being the " From 0d6ef66411873b4c6d2e51fbd6ae5bfe1ce020b4 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 12:31:32 -0700 Subject: [PATCH 2/3] Use Heading in Checkbox example --- styleguide-app/Examples/Checkbox.elm | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 6fcd61fa..ac3ca4c4 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 - , h2 [] [ text "Premium Checkboxes" ] + , Heading.h2 [] [ 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.h2 [] [ Html.text "Multiline Text in Checkboxes" ] + [ Heading.h2 [] [ Html.text "Multiline Text in Checkboxes" ] , let id = "styleguide-checkbox-multiline" From aee387cc5ef8204791a79ef7b97fe555714eb716 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 13:38:33 -0700 Subject: [PATCH 3/3] Add the subhead styles back --- styleguide-app/Debug/Control/View.elm | 3 ++- 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/Switch.elm | 6 +++--- styleguide-app/Examples/Table.elm | 10 +++++----- styleguide-app/Examples/Tooltip.elm | 2 +- 9 files changed, 21 insertions(+), 20 deletions(-) diff --git a/styleguide-app/Debug/Control/View.elm b/styleguide-app/Debug/Control/View.elm index b4cf93d7..211d7bec 100644 --- a/styleguide-app/Debug/Control/View.elm +++ b/styleguide-app/Debug/Control/View.elm @@ -61,6 +61,7 @@ viewExampleCode ellieLink component values = [ summary [] [ 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.h2 [] [ 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 ac3ca4c4..2857ca02 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -47,7 +47,7 @@ example = , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state , viewDisabledCheckbox "styleguide-checkbox-disabled" state , viewMultilineCheckboxes state - , Heading.h2 [] [ text "Premium Checkboxes" ] + , Heading.h2 [ Heading.style Heading.Subhead ] [ text "Premium Checkboxes" ] , viewPremiumCheckboxes state ] , categories = [ Inputs ] @@ -141,7 +141,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.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 de37e606..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.h2 [] [ 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.h2 [] [ 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 045143e1..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.h2 [] [ Html.text "baseFont" ] + [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "baseFont" ] , Html.p [ css [ Fonts.baseFont ] ] [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] - , Heading.h2 [] [ Html.text "quizFont" ] + , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "quizFont" ] , Html.p [ css [ Fonts.quizFont ] ] [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] - , Heading.h2 [] [ 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 86f9cb73..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.h2 [] [ 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 a1a2e7e0..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.h2 [] [ Html.text "With sortable headers" ] + [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With sortable headers" ] , SortableTable.view config sortState data - , Heading.h2 [] [ 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 59a2ef22..9e870fb7 100644 --- a/styleguide-app/Examples/Switch.elm +++ b/styleguide-app/Examples/Switch.elm @@ -45,7 +45,7 @@ example = ] , view = \ellieLinkConfig interactiveIsOn -> - [ Heading.h2 [] [ 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.h2 [] [ 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.h2 [] [ 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 95e10f78..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.h2 [] [ Html.text "With header" ] + [ Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With header" ] , Table.view columns data - , Heading.h2 [] [ Html.text "Without header" ] + , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Without header" ] , Table.viewWithoutHeader columns data - , Heading.h2 [] [ Html.text "With additional cell styles" ] + , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "With additional cell styles" ] , Table.view columns data - , Heading.h2 [] [ Html.text "Loading" ] + , Heading.h2 [ Heading.style Heading.Subhead ] [ Html.text "Loading" ] , Table.viewLoading columns - , Heading.h2 [] [ 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 9d3b45cd..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.h2 [] [ 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 "