NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-18 11:11:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Bat/fix heading order
This commit is contained in:
Tessa 2022-04-14 13:43:07 -07:00 committed by GitHub
commit 4c46e46cfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 30 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
script/puppeteer-tests.js
View File

@ -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 = {

5
styleguide-app/Debug/Control/View.elm
View File

@ -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
)

5
styleguide-app/Examples/Checkbox.elm
View File

@ -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"

4
styleguide-app/Examples/Colors.elm
View File

@ -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" )

6
styleguide-app/Examples/Fonts.elm
View File

@ -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" ]
]

2
styleguide-app/Examples/Page.elm
View File

@ -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 <|

4
styleguide-app/Examples/SortableTable.elm
View File

@ -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
]
}

6
styleguide-app/Examples/Switch.elm
View File

@ -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"

10
styleguide-app/Examples/Table.elm
View File

@ -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
]
}

2
styleguide-app/Examples/Tooltip.elm
View File

@ -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 "