Adds dismiss icon to spritesheet

This commit is contained in:
Tessa Kelly 2019-05-22 15:00:10 -07:00
parent 56d7921d25
commit de894d7687
2 changed files with 36 additions and 18 deletions

View File

@ -13,12 +13,11 @@ import Accessibility.Styled as Html exposing (Html)
import Css import Css
import Css.Global import Css.Global
import Html.Styled.Attributes as Attributes exposing (css) import Html.Styled.Attributes as Attributes exposing (css)
import Html.Styled.Events
import Nri.Ui import Nri.Ui
import Nri.Ui.AssetPath exposing (Asset(..))
import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 import Nri.Ui.Fonts.V1
import Nri.Ui.Icon.V4 as Icon import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark, xSvg)
import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark)
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg) import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
@ -98,7 +97,7 @@ banner config alertMessage dismissMsg =
Html.text "" Html.text ""
Just msg -> Just msg ->
dismissButton (Icon.xSvg { x = "xSvg" }) msg dismissButton msg
in in
Html.div Html.div
[ css [ css
@ -123,23 +122,23 @@ banner config alertMessage dismissMsg =
] ]
dismissButton : Icon.IconType -> msg -> Html msg dismissButton : msg -> Html msg
dismissButton xIcon msg = dismissButton msg =
Nri.Ui.styled Html.div Nri.Ui.styled Html.div
"dismiss-button-container" "dismiss-button-container"
[ Css.position Css.absolute
, Css.top Css.zero
, Css.right Css.zero
, Css.padding (Css.px 25)
]
[] []
[ Icon.button []
{ alt = "Dismiss banner" [ Html.button
, msg = msg [ Html.Styled.Events.onClick msg
, icon = xIcon , css
, disabled = False [ Css.borderWidth Css.zero
, size = Icon.Medium , Css.backgroundColor Css.unset
} , Css.color Colors.azure
]
]
[ -- TODO: add hidden text ("Dismiss banner") for what this is about
NriSvg.toHtml xSvg
]
] ]

View File

@ -3,6 +3,7 @@ module Nri.Ui.SpriteSheet exposing
, bulb , bulb
, checkmark , checkmark
, exclamationMark , exclamationMark
, xSvg
) )
{-| {-|
@ -11,6 +12,7 @@ module Nri.Ui.SpriteSheet exposing
@docs bulb @docs bulb
@docs checkmark @docs checkmark
@docs exclamationMark @docs exclamationMark
@docs xSvg
-} -}
@ -116,3 +118,20 @@ arrowLeft =
] ]
|> fromUnstyled |> fromUnstyled
|> NriSvg.fromHtml |> NriSvg.fromHtml
xSvg : NriSvg.Svg
xSvg =
svg
[ viewBox "0 0 25 25"
, width "100%"
, height "100%"
, fill "currentcolor"
]
[ Svg.path
[ d "M1.067 6.015c-1.423-1.422-1.423-3.526 0-4.948 1.422-1.423 3.526-1.423 4.948 0l6.371 6.37 6.371-6.37c1.422-1.423 3.783-1.423 5.176 0 1.423 1.422 1.423 3.782 0 5.176l-6.37 6.37 6.37 6.372c1.423 1.422 1.423 3.526 0 4.948-1.422 1.423-3.526 1.423-4.948 0l-6.371-6.37-6.371 6.37c-1.422 1.423-3.783 1.423-5.176 0-1.423-1.422-1.423-3.782 0-5.176l6.37-6.143-6.37-6.599z"
]
[]
]
|> fromUnstyled
|> NriSvg.fromHtml