NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-04 12:47:53 +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 Accessibility.Styled as Html exposing (Html)
import Css import Css
import Css.Foreign exposing (Snippet, children, descendants, everything, selector) import Css.Foreign
import Html as RootHtml
import Html.Styled exposing (fromUnstyled) import Html.Styled exposing (fromUnstyled)
import Html.Styled.Attributes exposing (css) import Html.Styled.Attributes exposing (css)
import Markdown import Markdown
@ -32,8 +31,7 @@ error : { r | attention_svg : Nri.Ui.AssetPath.Asset } -> String -> Html msg
error assets = error assets =
alert (Icon.attention assets) alert (Icon.attention assets)
Nri.Ui.Colors.V1.purple 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 = success assets =
alert (Icon.checkMarkSvg assets) alert (Icon.checkMarkSvg assets)
Nri.Ui.Colors.V1.green 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 = tip assets =
alert (Icon.bulb assets) alert (Icon.bulb assets)
Nri.Ui.Colors.V1.white 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 = warning assets =
alert (Icon.attention assets) alert (Icon.attention assets)
Nri.Ui.Colors.V1.red 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.IconType -> Css.ColorValue compatible -> Css.ColorValue compatible -> String -> Html msg
alert icon iconBackgroundColor styles content = alert icon iconBackgroundColor color content =
Html.div [ css (alertStyles ++ styles) ] Html.div [ css alertStyles ]
[ viewIcon icon iconBackgroundColor [ viewIcon icon iconBackgroundColor
, viewAlertContent content , viewAlertContent color content
] ]
@ -91,28 +86,24 @@ viewIcon icon iconBackgroundColor =
[ Icon.decorativeIcon icon ] [ Icon.decorativeIcon icon ]
viewAlertContent : String -> Html.Styled.Html msg viewAlertContent : Css.ColorValue compatible -> String -> Html.Styled.Html msg
viewAlertContent content = viewAlertContent color content =
RootHtml.div [] (Markdown.toHtml Nothing content) Html.div
|> fromUnstyled [ 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 : List Css.Style
alertStyles = alertStyles =
[ Css.displayFlex [ Css.displayFlex
, Css.fontSize (Css.px 13)
, Css.lineHeight (Css.num 1.2)
, Css.listStyleType Css.none
, Css.overflow Css.hidden , Css.overflow Css.hidden
, Css.padding4 (Css.px 6) (Css.px 8) (Css.px 8) (Css.px 30) , Css.padding4 (Css.px 6) (Css.px 8) (Css.px 8) (Css.px 30)
, Css.position Css.relative , Css.position Css.relative
, Css.Foreign.children
[ Css.Foreign.div
[ Css.Foreign.children
[ Css.Foreign.p
[ Css.margin Css.zero
]
]
]
]
] ]