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

add examples of attribute-based customization to the style guide

Browse Source
This commit is contained in:
Brian Hicks 2020-07-13 10:11:33 -05:00
parent 1c14e66db2
commit 789d0ae7c8
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
styleguide-app/Examples/Text.elm
View File

@ -8,6 +8,7 @@ module Examples.Text exposing (example, State, Msg)
import AtomicDesignType exposing (AtomicDesignType(..))
import Category exposing (Category(..))
import Css
import Example exposing (Example)
import Html.Styled as Html
import Html.Styled.Attributes as Attributes
@ -67,5 +68,19 @@ example =
, Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
, Text.ugMediumBody [] (exampleUGHtml "ugMediumBody")
, Text.ugSmallBody [] (exampleUGHtml "ugSmallBody")
, Heading.h2 [ Heading.style Heading.Top ] [ Html.text "One-Off Styles" ]
, Text.mediumBody
[ Text.css [ Css.padding (Css.px 20) ] ]
[ Html.text "I've got more padding than my siblings!" ]
, Html.div
[ Attributes.css
[ Css.width (Css.px 80)
, Css.border3 (Css.px 1) Css.solid (Css.hex "000")
]
]
[ Text.mediumBody
[ Text.noBreak ]
[ Html.text "I won't ever break, no matter how narrow my container is." ]
]
]
}