diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm
index 1b1885a1..aeb83e52 100644
--- a/styleguide-app/Examples/Button.elm
+++ b/styleguide-app/Examples/Button.elm
@@ -5,6 +5,7 @@ module Examples.Button exposing (Msg, State, example, init, update)
-}
import Debug.Control as Control exposing (Control)
+import Headings
import Html exposing (..)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, ModuleMessages)
import Nri.Ui.AssetPath exposing (Asset)
@@ -207,7 +208,7 @@ buttons assets messages sizes model =
toggleButtons : ModuleMessages Msg parentMsg -> Html parentMsg
toggleButtons messages =
div []
- [ h3 [] [ text "Button toggle" ]
+ [ Headings.h3 [ text "Button toggle" ]
, Button.toggleButton
{ onDeselect = messages.showItWorked "onDeselect"
, onSelect = messages.showItWorked "onSelect"
diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm
index e710d960..8c11933e 100644
--- a/styleguide-app/Examples/Fonts.elm
+++ b/styleguide-app/Examples/Fonts.elm
@@ -6,6 +6,7 @@ module Examples.Fonts exposing (example)
-}
+import HeadingsStyled as Headings
import Html.Styled as Html
import Html.Styled.Attributes exposing (css)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
@@ -18,13 +19,13 @@ example =
{ filename = "Nri.Ui.Fonts.V1.elm"
, category = Fonts
, content =
- [ Html.h3 [ css [ Fonts.baseFont ] ] [ Html.text "baseFont" ]
+ [ Headings.h3 [ Html.text "baseFont" ]
, Html.p [ css [ Fonts.baseFont ] ]
[ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
- , Html.h3 [ css [ Fonts.quizFont ] ] [ Html.text "quizFont" ]
+ , Headings.h3 [ Html.text "quizFont" ]
, Html.p [ css [ Fonts.quizFont ] ]
[ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
- , Html.h3 [ css [ Fonts.ugFont ] ] [ Html.text "ugFont" ]
+ , Headings.h3 [ Html.text "ugFont" ]
, Html.p [ css [ Fonts.ugFont ] ]
[ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
]
diff --git a/styleguide-app/Examples/Icon.elm b/styleguide-app/Examples/Icon.elm
index 37c82a86..7f48c41d 100644
--- a/styleguide-app/Examples/Icon.elm
+++ b/styleguide-app/Examples/Icon.elm
@@ -9,6 +9,7 @@ module Examples.Icon exposing (example, styles)
import Assets exposing (assets)
import Css
import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
+import Headings
import Html exposing (Html)
import Html.Attributes exposing (style, title)
import ModuleExample exposing (Category(..), ModuleExample)
@@ -23,14 +24,14 @@ example =
{ filename = "Nri/Ui/Icon/V1.elm"
, category = Icons
, content =
- [ Html.h3 [] [ Html.text "Icon" ]
- , Html.h4 [] [ Html.text "Images" ]
+ [ Headings.h3 [ Html.text "Icon" ]
+ , Headings.h4 [ Html.text "Images" ]
, Html.div [ styles.class [ Container ] ]
(List.map viewIcon imageIcons)
- , Html.h4 [] [ Html.text "Scalable Vector Graphics (SVGs)" ]
+ , Headings.h4 [ Html.text "Scalable Vector Graphics (SVGs)" ]
, Html.div [ styles.class [ Container ] ]
(List.map viewIcon svgIcons)
- , Html.h5 [] [ Html.text "Assignment Types" ]
+ , Headings.h5 [ Html.text "Assignment Types" ]
, Html.div [ styles.class [ Container ] ]
(List.map viewIcon assignmentTypeSvgIcons)
]
diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm
index 4762b57f..a68c3a25 100644
--- a/styleguide-app/Examples/Page.elm
+++ b/styleguide-app/Examples/Page.elm
@@ -8,6 +8,7 @@ module Examples.Page exposing (example, styles)
import Css
import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
+import Headings
import Html exposing (Html)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Page.V1 as Page
@@ -20,18 +21,18 @@ example noOp =
{ filename = "Nri/Ui/Page/V1.elm"
, category = Pages
, content =
- [ Html.h3 [] [ Html.text "Pages for problems" ]
- , Html.h4 [] [ Html.text "Page: Not Found" ]
+ [ Headings.h3 [ Html.text "Pages for problems" ]
+ , Headings.h4 [ Html.text "Page: Not Found" ]
, Page.notFound
{ link = noOp
, name = "The Main Page"
}
- , Html.h4 [] [ Html.text "Page: Broken" ]
+ , Headings.h4 [ Html.text "Page: Broken" ]
, Page.broken
{ link = noOp
, name = "The Main Page"
}
- , Html.h4 [] [ Html.text "Page: No Permission" ]
+ , Headings.h4 [ Html.text "Page: No Permission" ]
, Page.noPermission
{ link = noOp
, name = "The Main Page"
diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm
index 3ca32bc4..a067a092 100644
--- a/styleguide-app/Examples/Table.elm
+++ b/styleguide-app/Examples/Table.elm
@@ -5,6 +5,7 @@ module Examples.Table exposing (Msg, State, example, init, update)
-}
import Css exposing (..)
+import Headings
import Html
import Html.Styled
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
@@ -70,16 +71,16 @@ example parentMessage state =
]
in
[ Html.Styled.toUnstyled Table.keyframeStyles
- , Html.h4 [] [ Html.text "With header" ]
+ , Headings.h4 [ Html.text "With header" ]
, Table.view columns data
|> Html.Styled.toUnstyled
- , Html.h4 [] [ Html.text "Without header" ]
+ , Headings.h4 [ Html.text "Without header" ]
, Table.viewWithoutHeader columns data
|> Html.Styled.toUnstyled
- , Html.h4 [] [ Html.text "Loading" ]
+ , Headings.h4 [ Html.text "Loading" ]
, Table.viewLoading columns
|> Html.Styled.toUnstyled
- , Html.h4 [] [ Html.text "Loading without header" ]
+ , Headings.h4 [ Html.text "Loading without header" ]
, Table.viewLoadingWithoutHeader columns
|> Html.Styled.toUnstyled
]
diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm
index 9cc58252..7aa89fe9 100644
--- a/styleguide-app/Examples/TextInput.elm
+++ b/styleguide-app/Examples/TextInput.elm
@@ -5,6 +5,7 @@ module Examples.TextInput exposing (Msg, State, example, init, update)
-}
import Dict exposing (Dict)
+import HeadingsStyled as Headings
import Html.Styled as Html
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.TextInput.V3 as TextInput
@@ -64,7 +65,7 @@ example parentMessage state =
, type_ = TextInput.number
, showLabel = True
}
- , Html.h3 [] [ Html.text "invisible label" ]
+ , Headings.h3 [ Html.text "invisible label" ]
, TextInput.view
{ label = "Criterion"
, isInError = False
@@ -86,7 +87,7 @@ example parentMessage state =
, type_ = TextInput.text
, showLabel = False
}
- , Html.h3 [] [ Html.text "Writing Style" ]
+ , Headings.h3 [ Html.text "Writing Style" ]
, TextInput.writing
{ label = "Writing!"
, isInError = False
diff --git a/styleguide-app/Headings.elm b/styleguide-app/Headings.elm
new file mode 100644
index 00000000..398e1698
--- /dev/null
+++ b/styleguide-app/Headings.elm
@@ -0,0 +1,38 @@
+module Headings exposing (h1, h2, h3, h4, h5)
+
+import HeadingsStyled
+import Html
+import Html.Styled
+
+
+h1 : List (Html.Html msg) -> Html.Html msg
+h1 =
+ toRootHtml HeadingsStyled.h1
+
+
+h2 : List (Html.Html msg) -> Html.Html msg
+h2 =
+ toRootHtml HeadingsStyled.h2
+
+
+h3 : List (Html.Html msg) -> Html.Html msg
+h3 =
+ toRootHtml HeadingsStyled.h3
+
+
+h4 : List (Html.Html msg) -> Html.Html msg
+h4 =
+ toRootHtml HeadingsStyled.h4
+
+
+h5 : List (Html.Html msg) -> Html.Html msg
+h5 =
+ toRootHtml HeadingsStyled.h5
+
+
+toRootHtml : (List (Html.Styled.Html msg) -> Html.Styled.Html msg) -> (List (Html.Html msg) -> Html.Html msg)
+toRootHtml node =
+ \children ->
+ List.map Html.Styled.fromUnstyled children
+ |> node
+ |> Html.Styled.toUnstyled
diff --git a/styleguide-app/HeadingsStyled.elm b/styleguide-app/HeadingsStyled.elm
new file mode 100644
index 00000000..f6eaf3c5
--- /dev/null
+++ b/styleguide-app/HeadingsStyled.elm
@@ -0,0 +1,29 @@
+module HeadingsStyled exposing (h1, h2, h3, h4, h5)
+
+import Html.Styled exposing (Html)
+import Nri.Ui.Text.V2 as Text
+
+
+h1 : List (Html msg) -> Html msg
+h1 =
+ Text.heading
+
+
+h2 : List (Html msg) -> Html msg
+h2 =
+ Text.heading
+
+
+h3 : List (Html msg) -> Html msg
+h3 =
+ Text.subHeading
+
+
+h4 : List (Html msg) -> Html msg
+h4 =
+ Text.subHeading
+
+
+h5 : List (Html msg) -> Html msg
+h5 =
+ Text.subHeading
diff --git a/styleguide-app/View.elm b/styleguide-app/View.elm
index ff1213fa..065834ca 100644
--- a/styleguide-app/View.elm
+++ b/styleguide-app/View.elm
@@ -4,6 +4,7 @@ import Css exposing (..)
import Css.Foreign exposing (Snippet)
import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
import DEPRECATED.Css.Namespace
+import Headings
import Html exposing (Html, img)
import Html.Attributes exposing (..)
import Html.CssHelpers
@@ -26,7 +27,7 @@ view model =
, Html.div [ class [ StyleGuideContent ] ]
(case model.route of
Routes.Doodad doodad ->
- [ Html.h2 []
+ [ Headings.h2
[ Html.a [ Html.Attributes.href "#" ] [ Html.text "(see all)" ] ]
, nriThemedModules model.moduleStates
|> List.filter (\m -> m.filename == ("Nri/" ++ doodad))
@@ -38,7 +39,7 @@ view model =
Routes.Category category ->
[ Html.section [ class [ Section ] ]
[ newComponentsLink
- , Html.h2 [] [ Html.text (toString category) ]
+ , Headings.h2 [ Html.text (toString category) ]
, nriThemedModules model.moduleStates
|> List.filter (\doodad -> category == doodad.category)
|> List.map (ModuleExample.view True)
@@ -50,8 +51,8 @@ view model =
Routes.All ->
[ Html.section [ class [ Section ] ]
[ newComponentsLink
- , Html.h2 [] [ Html.text "NRI-Themed Modules" ]
- , Html.h3 [] [ Html.text "All Categories" ]
+ , Headings.h2 [ Html.text "NRI-Themed Modules" ]
+ , Headings.h3 [ Html.text "All Categories" ]
, nriThemedModules model.moduleStates
|> List.map (ModuleExample.view True)
|> Html.div []
@@ -66,7 +67,7 @@ view model =
newComponentsLink : Html Msg
newComponentsLink =
Html.div []
- [ Html.h2 [] [ Html.text "New Styleguide Components" ]
+ [ Headings.h2 [ Html.text "New Styleguide Components" ]
, Html.div []
[ Html.text "Future styleguide components can be found in "
, Html.a [ href "https://app.zeplin.io/project/5973fb495395bdc871ebb055" ] [ Html.text "this Zepplin" ]
@@ -99,7 +100,7 @@ navigation route =
]
in
Html.div [ class [ CategoryMenu ] ]
- [ Html.h4 []
+ [ Headings.h4
[ Html.text "Categories" ]
, Html.ul [ class [ CategoryLinks ] ] <|
Html.li []
diff --git a/styleguide-app/assets/reset.css b/styleguide-app/assets/reset.css
new file mode 100644
index 00000000..ed11813c
--- /dev/null
+++ b/styleguide-app/assets/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/styleguide-app/index.html b/styleguide-app/index.html
index ae50e605..17d6b947 100644
--- a/styleguide-app/index.html
+++ b/styleguide-app/index.html
@@ -3,6 +3,7 @@
NoRedInk style guide
+