mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-28 10:17:49 +03:00
improve docs
This commit is contained in:
parent
131a39dfa8
commit
6fef551cb2
@ -1,7 +1,7 @@
|
|||||||
module Nri.Ui.Heading.V1 exposing
|
module Nri.Ui.Heading.V1 exposing
|
||||||
( Heading, heading
|
( Heading, heading
|
||||||
, VisualLevel(..), withVisualLevel
|
, withVisualLevel, VisualLevel(..)
|
||||||
, DocumentLevel(..), withDocumentLevel
|
, withDocumentLevel, DocumentLevel(..)
|
||||||
, view
|
, view
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -10,9 +10,9 @@ accessibility.
|
|||||||
|
|
||||||
@docs Heading, heading
|
@docs Heading, heading
|
||||||
|
|
||||||
@docs VisualLevel, withVisualLevel
|
@docs withVisualLevel, VisualLevel
|
||||||
|
|
||||||
@docs DocumentLevel, withDocumentLevel
|
@docs withDocumentLevel, DocumentLevel
|
||||||
|
|
||||||
@docs view
|
@docs view
|
||||||
|
|
||||||
@ -25,7 +25,7 @@ import Nri.Ui.Colors.V1 exposing (..)
|
|||||||
import Nri.Ui.Fonts.V1 as Fonts
|
import Nri.Ui.Fonts.V1 as Fonts
|
||||||
|
|
||||||
|
|
||||||
{-| a custom heading
|
{-| start a heading. Render it with `view`.
|
||||||
-}
|
-}
|
||||||
type Heading msg
|
type Heading msg
|
||||||
= Heading (List (Html msg)) VisualLevel DocumentLevel
|
= Heading (List (Html msg)) VisualLevel DocumentLevel
|
||||||
@ -40,8 +40,7 @@ heading content =
|
|||||||
-- VISUAL LEVEL
|
-- VISUAL LEVEL
|
||||||
|
|
||||||
|
|
||||||
{-| Customize the heading level for visual reasons.
|
{-| -}
|
||||||
-}
|
|
||||||
type VisualLevel
|
type VisualLevel
|
||||||
= Top
|
= Top
|
||||||
| Tagline
|
| Tagline
|
||||||
@ -49,6 +48,14 @@ type VisualLevel
|
|||||||
| Small
|
| Small
|
||||||
|
|
||||||
|
|
||||||
|
{-| Customize how the heading looks. The visual hierarchy should go Top ->
|
||||||
|
Tagline -> Subhead -> Small.
|
||||||
|
|
||||||
|
heading [ text "Hello, World!" ]
|
||||||
|
|> withVisualLevel Top
|
||||||
|
|> view
|
||||||
|
|
||||||
|
-}
|
||||||
withVisualLevel : VisualLevel -> Heading msg -> Heading msg
|
withVisualLevel : VisualLevel -> Heading msg -> Heading msg
|
||||||
withVisualLevel visualLevel (Heading content _ documentLevel) =
|
withVisualLevel visualLevel (Heading content _ documentLevel) =
|
||||||
Heading content visualLevel documentLevel
|
Heading content visualLevel documentLevel
|
||||||
@ -122,7 +129,14 @@ headingStyles config =
|
|||||||
-- DOCUMENT LEVEL
|
-- DOCUMENT LEVEL
|
||||||
|
|
||||||
|
|
||||||
{-| Customize the heading level for accessibility reasons.
|
{-| Customize the document level of the heading. For accessibility reasons, you
|
||||||
|
should have exactly one H1, and only increase the level by one. You can use a
|
||||||
|
tool like [axe](https://www.deque.com/axe/) to check this.
|
||||||
|
|
||||||
|
heading [ text "Hello, World!" ]
|
||||||
|
|> withDocumentLevel H1
|
||||||
|
|> view
|
||||||
|
|
||||||
-}
|
-}
|
||||||
type DocumentLevel
|
type DocumentLevel
|
||||||
= H1
|
= H1
|
||||||
@ -164,6 +178,9 @@ getTag documentLevel =
|
|||||||
-- VIEW
|
-- VIEW
|
||||||
|
|
||||||
|
|
||||||
|
{-| render a Heading to Html. See the other docs in this module for
|
||||||
|
customizations.
|
||||||
|
-}
|
||||||
view : Heading msg -> Html msg
|
view : Heading msg -> Html msg
|
||||||
view (Heading content visualLevel documentLevel) =
|
view (Heading content visualLevel documentLevel) =
|
||||||
getTag documentLevel
|
getTag documentLevel
|
||||||
|
@ -24,6 +24,9 @@ module Nri.Ui.Text.V3 exposing
|
|||||||
|
|
||||||
## Heading styles
|
## Heading styles
|
||||||
|
|
||||||
|
Please use `Nri.Ui.Heading.V1` instead of these in new code. If you're here to
|
||||||
|
make a new Text version, please remove them.
|
||||||
|
|
||||||
@docs heading, subHeading, smallHeading, tagline
|
@docs heading, subHeading, smallHeading, tagline
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user