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

Add the subhead styles back

Browse Source
This commit is contained in:
Tessa Kelly 2022-04-14 13:38:33 -07:00
parent 0d6ef66411
commit aee387cc5e
9 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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