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

Add Nri.Ui.Text.V3

Browse Source
This commit is contained in:
Aaron VonderHaar 2019-06-27 15:35:06 -07:00
parent 6fbbf29405
commit ce30943436
8 changed files with 266 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
elm.json
View File

@ -64,6 +64,7 @@
"Nri.Ui.Tabs.V3",
"Nri.Ui.Tabs.V4",
"Nri.Ui.Text.V2",
"Nri.Ui.Text.V3",
"Nri.Ui.Text.Writing.V1",
"Nri.Ui.TextArea.V3",
"Nri.Ui.TextArea.V4",

258
src/Nri/Ui/Text/V3.elm Normal file
View File

@ -0,0 +1,258 @@
module Nri.Ui.Text.V3 exposing
( caption, heading, mediumBody, smallBody, smallBodyGray, subHeading, smallHeading, tagline
, ugMediumBody, ugSmallBody
, noWidow
)
{-|
## Semantic text types:
@docs caption, heading, mediumBody, smallBody, smallBodyGray, subHeading, smallHeading, tagline
## User-generated text styles:
@docs ugMediumBody, ugSmallBody
## Modifying strings to display nicely:
@docs noWidow
-}
import Css exposing (..)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Colors.V1 exposing (..)
import Nri.Ui.Fonts.V1 as Fonts
{-| This is a Page Heading.
-}
heading : List (Html msg) -> Html msg
heading content =
h1
[ css
(textStyles
++ [ Fonts.baseFont
, fontSize (px 30)
, color navy
, lineHeight (px 40.5)
, fontWeight (int 700)
, margin zero
]
)
]
content
{-| This is a tagline for a page heading.
-}
tagline : List (Html msg) -> Html msg
tagline content =
h2
[ css
(textStyles
++ [ Fonts.baseFont
, fontSize (px 20)
, color gray45
, lineHeight (px 27)
, fontWeight (int 400)
, margin4 (px 5) (px 0) (px 0) (px 0)
]
)
]
content
{-| This is a subhead.
-}
subHeading : List (Html msg) -> Html msg
subHeading content =
h3
[ css
(textStyles
++ [ Fonts.baseFont
, fontSize (px 20)
, color navy
, lineHeight (px 27)
, fontWeight (int 700)
, margin4 (px 20) (px 0) (px 10) (px 0)
]
)
]
content
{-| This is a small Page Heading.
-}
smallHeading : List (Html msg) -> Html msg
smallHeading content =
h4
[ css
(textStyles
++ [ Fonts.baseFont
, fontSize (px 16)
, color gray20
, lineHeight (px 23)
, fontWeight (int 700)
, margin zero
]
)
]
content
{-| This is some medium body copy.
-}
mediumBody : List (Html msg) -> Html msg
mediumBody content =
p
[ css
(textStyles
++ [ Fonts.baseFont
, fontSize (px 18)
, color gray20
, lineHeight (px 27)
, fontWeight (int 400)
, margin4 (px 10) (px 0) (px 0) (px 0)
]
)
]
content
{-| This is some small body copy.
-}
smallBody : List (Html msg) -> Html msg
smallBody content =
p
[ css
(textStyles
++ [ Fonts.baseFont
, fontSize (px 15)
, color gray20
, lineHeight (px 23)
, fontWeight (int 400)
, margin4 (px 7) (px 0) (px 0) (px 0)
]
)
]
content
{-| This is some small body copy but it's gray.
-}
smallBodyGray : List (Html msg) -> Html msg
smallBodyGray content =
p
[ css
(textStyles
++ [ Fonts.baseFont
, fontSize (px 15)
, color gray45
, lineHeight (px 23)
, fontWeight (int 400)
, margin4 (px 7) (px 0) (px 0) (px 0)
]
)
]
content
textStyles =
[ padding zero
, textAlign left
, firstChild
[ margin zero
]
]
{-| This is a little note or caption.
-}
caption : List (Html msg) -> Html msg
caption content =
p
[ css
[ Fonts.baseFont
, fontSize (px 13)
, color gray45
, lineHeight (px 18)
, fontWeight (int 400)
, margin4 (px 5) (px 0) (px 0) (px 0)
]
]
content
{-| User-generated text.
-}
ugMediumBody : List (Html msg) -> Html msg
ugMediumBody =
p
[ css
[ Fonts.quizFont
, fontSize (px 18)
, lineHeight (px 30)
, whiteSpace preLine
, color gray20
, margin4 (px 10) (px 0) (px 0) (px 0)
, firstChild [ margin zero ]
, firstOfType [ margin zero ]
]
]
{-| User-generated text.
-}
ugSmallBody : List (Html msg) -> Html msg
ugSmallBody =
p
[ css
[ Fonts.quizFont
, fontSize (px 16)
, lineHeight (px 25)
, whiteSpace preLine
, color gray20
, margin4 (px 7) (px 0) (px 0) (px 0)
, firstChild [ margin zero ]
, firstOfType [ margin zero ]
]
]
{-| Eliminate widows (single words on their own line caused by
wrapping) by inserting a non-breaking space if there are at least two
words.
-}
noWidow : String -> String
noWidow inputs =
let
-- this value is a unicode non-breaking space since Elm
-- doesn't support named character entities
nbsp =
"\u{00A0}"
words =
String.split " " inputs
insertPoint =
List.length words - 1
in
words
|> List.indexedMap
(\i word ->
if i == 0 then
word
else if i == insertPoint && insertPoint > 0 then
nbsp ++ word
else
" " ++ word
)
|> String.join ""

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

@ -14,7 +14,7 @@ import Nri.Ui.AssetPath exposing (Asset)
import Nri.Ui.Button.V8 as Button
import Nri.Ui.Icon.V5 as Icon
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
import Nri.Ui.Text.V2 as Text
import Nri.Ui.Text.V3 as Text
{-| -}

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

@ -15,7 +15,7 @@ import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, Mod
import Nri.Ui.ClickableText.V2 as ClickableText exposing (Size(..))
import Nri.Ui.Icon.V5 as Icon
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
import Nri.Ui.Text.V2 as Text
import Nri.Ui.Text.V3 as Text
{-| -}

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

@ -14,7 +14,7 @@ import Html.Styled.Attributes exposing (css, style, title)
import ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Colors.V1 exposing (..)
import Nri.Ui.Icon.V5 as Icon
import Nri.Ui.Text.V2 as Text
import Nri.Ui.Text.V3 as Text
{-| -}

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

@ -8,13 +8,13 @@ module Examples.Text exposing (example)
import Html.Styled as Html
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Text.V2 as Text
import Nri.Ui.Text.V3 as Text
{-| -}
example : ModuleExample msg
example =
{ name = "Nri.Ui.Text.V2"
{ name = "Nri.Ui.Text.V3"
, category = Text
, content =
let

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

@ -11,7 +11,7 @@ import Html.Styled as Html
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.AssetPath exposing (Asset(..))
import Nri.Ui.Checkbox.V5 as Checkbox
import Nri.Ui.Text.V2 as Text
import Nri.Ui.Text.V3 as Text
import Nri.Ui.TextArea.V4 as TextArea

2
styleguide-app/Headings.elm
View File

@ -1,7 +1,7 @@
module Headings exposing (h1, h2, h3, h4, h5)
import Html.Styled exposing (Html)
import Nri.Ui.Text.V2 as Text
import Nri.Ui.Text.V3 as Text
h1 : List (Html msg) -> Html msg