mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2025-01-04 12:47:53 +03:00
Adds dismiss icon to spritesheet
This commit is contained in:
parent
56d7921d25
commit
de894d7687
@ -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
|
||||||
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user