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

🎨 put the font and color styles with the content

Browse Source
This commit is contained in:
Tessa Kelly 2018-08-15 15:52:11 -07:00
parent 51cefe942b
commit 7173a703eb
1 changed files with 21 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/Nri/Ui/Alert/V2.elm
View File

@ -17,8 +17,7 @@ module Nri.Ui.Alert.V2
import Accessibility.Styled as Html exposing (Html)
import Css
import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
import Html as RootHtml
import Css.Foreign
import Html.Styled exposing (fromUnstyled)
import Html.Styled.Attributes exposing (css)
import Markdown
@ -32,8 +31,7 @@ error : { r | attention_svg : Nri.Ui.AssetPath.Asset } -> String -> Html msg
error assets =
alert (Icon.attention assets)
Nri.Ui.Colors.V1.purple
[ Css.color Nri.Ui.Colors.V1.purple
]
Nri.Ui.Colors.V1.purple
{-| -}
@ -41,8 +39,7 @@ success : { r | checkmark : String } -> String -> Html msg
success assets =
alert (Icon.checkMarkSvg assets)
Nri.Ui.Colors.V1.green
[ Css.color Nri.Ui.Colors.V1.greenDarkest
]
Nri.Ui.Colors.V1.greenDarkest
{-| -}
@ -50,8 +47,7 @@ tip : { r | bulb : String } -> String -> Html msg
tip assets =
alert (Icon.bulb assets)
Nri.Ui.Colors.V1.white
[ Css.color Nri.Ui.Colors.V1.navy
]
Nri.Ui.Colors.V1.navy
{-| -}
@ -59,15 +55,14 @@ warning : { r | attention_svg : Nri.Ui.AssetPath.Asset } -> String -> Html msg
warning assets =
alert (Icon.attention assets)
Nri.Ui.Colors.V1.red
[ Css.color Nri.Ui.Colors.V1.red
]
Nri.Ui.Colors.V1.red
alert : Icon.IconType -> Css.ColorValue compatible -> List Css.Style -> String -> Html msg
alert icon iconBackgroundColor styles content =
Html.div [ css (alertStyles ++ styles) ]
alert : Icon.IconType -> Css.ColorValue compatible -> Css.ColorValue compatible -> String -> Html msg
alert icon iconBackgroundColor color content =
Html.div [ css alertStyles ]
[ viewIcon icon iconBackgroundColor
, viewAlertContent content
, viewAlertContent color content
]
@ -91,28 +86,24 @@ viewIcon icon iconBackgroundColor =
[ Icon.decorativeIcon icon ]
viewAlertContent : String -> Html.Styled.Html msg
viewAlertContent content =
RootHtml.div [] (Markdown.toHtml Nothing content)
|> fromUnstyled
viewAlertContent : Css.ColorValue compatible -> String -> Html.Styled.Html msg
viewAlertContent color content =
Html.div
[ css
[ Css.color color
, Css.fontSize (Css.px 13)
, Css.lineHeight (Css.num 1.2)
, Css.listStyleType Css.none
, Css.Foreign.descendants [ Css.Foreign.p [ Css.margin Css.zero ] ]
]
]
(Markdown.toHtml Nothing content |> List.map fromUnstyled)
alertStyles : List Css.Style
alertStyles =
[ Css.displayFlex
, Css.fontSize (Css.px 13)
, Css.lineHeight (Css.num 1.2)
, Css.listStyleType Css.none
, Css.overflow Css.hidden
, Css.padding4 (Css.px 6) (Css.px 8) (Css.px 8) (Css.px 30)
, Css.position Css.relative
, Css.Foreign.children
[ Css.Foreign.div
[ Css.Foreign.children
[ Css.Foreign.p
[ Css.margin Css.zero
]
]
]
]
]