NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-24 08:53:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #242 from NoRedInk/tessa/detangle-icons-banner-alert

Browse Source 
Tessa/detangle icons banner alert
This commit is contained in:
Tessa 2019-04-04 10:21:44 -07:00 committed by GitHub
commit e088a78963
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 257 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
elm.json
View File

@ -6,6 +6,7 @@
"version": "6.10.0",
"exposed-modules": [
"Nri.Ui.Alert.V2",
"Nri.Ui.Alert.V3",
"Nri.Ui.AssetPath",
"Nri.Ui.BannerAlert.V2",
"Nri.Ui.BannerAlert.V3",

136
src/Nri/Ui/Alert/V3.elm Normal file
View File

@ -0,0 +1,136 @@
module Nri.Ui.Alert.V3 exposing
( error
, success
, tip
, warning
)
{-| UI components that highlight information to the user.
@docs error
@docs success
@docs tip
@docs warning
-}
import Accessibility.Styled as Html exposing (Html)
import Css
import Css.Global
import Html.Styled exposing (fromUnstyled)
import Html.Styled.Attributes exposing (css)
import Markdown
import Nri.Ui
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Icon.V3 as Icon
import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark)
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
{-| -}
error : String -> Html msg
error content =
alert
[ exclamation Colors.purple
, viewAlertContent Colors.purpleDark content
]
{-| -}
success : String -> Html msg
success content =
alert
[ iconContainer
[ Css.color Colors.white
, Css.backgroundColor Colors.green
]
(Html.div
[ css
[ Css.width (Css.px 12)
, Css.height (Css.px 12)
, Css.margin Css.auto
]
]
[ NriSvg.toHtml checkmark ]
)
, viewAlertContent Colors.greenDarkest content
]
{-| -}
tip : String -> Html msg
tip content =
alert
[ iconContainer [ Css.color Colors.yellow ] (NriSvg.toHtml bulb)
, viewAlertContent Colors.navy content
]
{-| -}
warning : String -> Html msg
warning content =
alert
[ exclamation Colors.red
, viewAlertContent Colors.red content
]
alert : List (Html msg) -> Html msg
alert =
Nri.Ui.styled Html.div
"Nri-Ui-Alert-V3__alert"
[ Css.displayFlex
, Css.justifyContent Css.start
, Css.alignItems Css.center
, Css.paddingTop (Css.px 6)
, Css.paddingBottom (Css.px 8)
]
[]
exclamation : Css.Color -> Html msg
exclamation backgroundColor =
iconContainer
[ Css.color Colors.white
, Css.backgroundColor backgroundColor
]
(Html.div
[ css [ Css.marginTop (Css.px 1), Css.height (Css.px 13) ] ]
[ NriSvg.toHtml exclamationMark ]
)
iconContainer : List Css.Style -> Html msg -> Html msg
iconContainer styles icon =
Nri.Ui.styled Html.div
"Nri-Ui-Alert-V3__iconContainer"
(styles
++ [ -- Content positioning
Css.marginRight (Css.px 5)
-- Size
, Css.borderRadius (Css.px 13)
, Css.maxHeight (Css.px 20)
, Css.maxWidth (Css.px 20)
, Css.minHeight (Css.px 20)
, Css.minWidth (Css.px 20)
]
)
[]
[ icon ]
viewAlertContent : Css.ColorValue compatible -> String -> Html.Styled.Html msg
viewAlertContent color content =
Nri.Ui.styled Html.div
"Nri-Ui-Alert-V3__viewAlertContent"
[ Css.color color
, Fonts.baseFont
, Css.fontSize (Css.px 13)
, Css.lineHeight (Css.num 1.2)
, Css.listStyleType Css.none
, Css.Global.descendants [ Css.Global.p [ Css.margin Css.zero ] ]
]
[]
(Markdown.toHtml Nothing content |> List.map fromUnstyled)

37
src/Nri/Ui/BannerAlert/V3.elm
View File

@ -10,53 +10,53 @@ import Accessibility.Styled as Html exposing (Html)
import Css
import Css.Global
import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.AssetPath as AssetPath exposing (Asset(..))
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1
import Nri.Ui.Icon.V4 as Icon exposing (IconType)
import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark)
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
{-| A banner to show error alerts
-}
error : { a | exclamationPoint_svg : Asset } -> String -> Html msg
error assets =
error : String -> Html msg
error =
banner
{ backgroundColor = Colors.purpleLight
, color = Colors.purpleDark
, icon =
{ backgroundColor = Colors.purple
, height = Css.px 25
, asset = assets.exclamationPoint_svg
, asset = exclamationMark
}
}
{-| A banner to show neutral alerts
-}
neutral : { a | tip_svg : Asset } -> String -> Html msg
neutral assets =
neutral : String -> Html msg
neutral =
banner
{ backgroundColor = Colors.frost
, color = Colors.navy
, icon =
{ backgroundColor = Colors.frost
, height = Css.px 50
, asset = assets.tip_svg
{ backgroundColor = Colors.navy
, height = Css.px 32
, asset = bulb
}
}
{-| A banner for success alerts
-}
success : { a | checkWhite_svg : Asset } -> String -> Html msg
success assets =
success : String -> Html msg
success =
banner
{ backgroundColor = Colors.greenLightest
, color = Colors.greenDarkest
, icon =
{ backgroundColor = Colors.green
, height = Css.px 20
, asset = assets.checkWhite_svg
, asset = checkmark
}
}
@ -95,7 +95,7 @@ banner config alertMessage =
type alias IconConfig =
{ backgroundColor : Css.Color
, height : Css.Px
, asset : Asset
, asset : Svg
}
@ -103,21 +103,24 @@ icon : IconConfig -> Html msg
icon config =
Html.div
[ css
[ Css.borderRadius (Css.pct 50)
[ Css.boxSizing Css.borderBox
, Css.borderRadius (Css.pct 50)
, Css.color Colors.white
, Css.displayFlex
, Css.alignItems Css.center
, Css.justifyContent Css.center
, Css.width (Css.px 50)
, Css.height (Css.px 50)
, Css.marginRight (Css.px 20)
, Css.padding (Css.px 8)
, Css.flexShrink (Css.num 0)
, Css.backgroundColor config.backgroundColor
]
]
[ Html.decorativeImg
[ Html.div
[ css [ Css.height config.height ]
, Attributes.src (AssetPath.url config.asset)
]
[ NriSvg.toHtml config.asset ]
]

91
src/Nri/Ui/SpriteSheet.elm Normal file
View File

@ -0,0 +1,91 @@
module Nri.Ui.SpriteSheet exposing (checkmark, exclamationMark, bulb)
{-|
@docs checkmark, exclamationMark, bulb
-}
import Html.Styled exposing (..)
import Nri.Ui.Svg.V1 as NriSvg
import Svg exposing (..)
import Svg.Attributes exposing (..)
{-| -}
exclamationMark : NriSvg.Svg
exclamationMark =
Svg.svg
[ viewBox "0 0 4 12", width "100%", height "100%" ]
[ Svg.path
[ d "M3.234 10.575a1.363 1.363 0 1 1-2.726 0 1.363 1.363 0 0 1 2.726 0zm.648-8.398a1.978 1.978 0 0 1-.007.047l-.834 5.294c-.079.53-.542.926-1.085.926h-.013a1.096 1.096 0 0 1-1.085-.926L.024 2.224A1.93 1.93 0 0 1 1.93 0h.04a1.94 1.94 0 0 1 1.912 1.663v.514z"
, fill "currentcolor"
, fillRule "evenodd"
]
[]
]
|> fromUnstyled
|> NriSvg.fromHtml
{-| -}
checkmark : NriSvg.Svg
checkmark =
Svg.svg
[ id "Layer_1"
, x "0px"
, y "0px"
, viewBox "0 0 21.7 17.1"
, Svg.Attributes.style "enable-background:new 0 0 21.7 17.1;"
, width "100%"
, height "100%"
]
[ Svg.style [] [ Svg.text " .st0{fill:currentcolor;} " ]
, Svg.path [ id "check-white", class "st0", d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1" ] []
]
|> fromUnstyled
|> NriSvg.fromHtml
{-| -}
bulb : NriSvg.Svg
bulb =
svg
[ version "1.1"
, id "Layer_1"
, x "0px"
, y "0px"
, viewBox "0 0 23 25"
, Svg.Attributes.style "enable-background:new 0 0 23 25;"
, width "100%"
, height "100%"
]
[ Svg.style [] [ Svg.text " .st0{fill:#FEC709;} " ]
, g [ id "feedback" ]
[ g [ id "dot-tip", transform "translate(-261.000000, -371.000000)" ]
[ g
[ id "alerts_x2F_tip"
, transform "translate(259.886945, 371.000000)"
]
[ g [ id "icon_x2F_bulb-yellow", transform "translate(0.859754, 0.051946)" ]
[ g [ id "Group", transform "translate(0.461538, 0.000000)" ]
[ Svg.path [ id "Fill-1", class "st0", d "M21.6,12.5H19c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6c0.3,0,0.6-0.3,0.6-0.6 S21.9,12.5,21.6,12.5z" ] []
, Svg.path [ id "Fill-2", class "st0", d "M18.1,9.3c0.1,0,0.2,0,0.3-0.1l2.3-1.4C20.9,7.7,21,7.3,20.8,7c-0.2-0.3-0.5-0.4-0.8-0.2 l-2.3,1.4c-0.2,0.1-0.3,0.4-0.3,0.7C17.6,9.1,17.8,9.3,18.1,9.3L18.1,9.3z" ] []
, Svg.path [ id "Fill-3", class "st0", d "M17.1,2c-0.3-0.2-0.6-0.1-0.8,0.2l-1.5,2.2h0c-0.1,0.1-0.1,0.3-0.1,0.5c0,0.2,0.1,0.3,0.2,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.3-0.1,0.4-0.3l1.5-2.2C17.4,2.6,17.4,2.2,17.1,2L17.1,2z" ] []
, Svg.path [ id "Fill-4", class "st0", d "M6.7,5.4c0.2,0,0.4-0.1,0.5-0.3c0.1-0.2,0.1-0.4,0-0.6L5.7,2.2v0C5.6,2.1,5.4,2,5.3,1.9 C5.1,1.9,5,1.9,4.9,2C4.7,2.1,4.6,2.3,4.6,2.4c0,0.2,0,0.3,0.1,0.4l1.5,2.2C6.3,5.3,6.5,5.4,6.7,5.4L6.7,5.4z" ] []
, Svg.path [ id "Fill-5", class "st0", d "M4,8.2L1.7,6.8C1.5,6.7,1.1,6.8,1,7C0.8,7.3,0.9,7.6,1.2,7.8l2.3,1.4c0.1,0.1,0.3,0.1,0.4,0.1 C4,9.2,4.1,9.1,4.2,9c0.1-0.1,0.1-0.3,0.1-0.5C4.2,8.4,4.1,8.2,4,8.2L4,8.2z" ] []
, Svg.path [ id "Fill-6", class "st0", d "M20.6,17.8l-2.2-1.4c-0.3-0.2-0.6-0.1-0.8,0.2c-0.2,0.3-0.1,0.6,0.2,0.8l2.3,1.4 c0.3,0.1,0.6,0,0.7-0.2C21,18.3,20.9,18,20.6,17.8L20.6,17.8z" ] []
, Svg.path [ id "Fill-7", class "st0", d "M3.5,16.4l-2.3,1.4h0C1.1,17.8,1,18,0.9,18.1c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.2,0.2,0.4,0.3 c0.1,0,0.3,0,0.4-0.1L4,17.4c0.3-0.2,0.3-0.5,0.2-0.8C4.1,16.4,3.7,16.3,3.5,16.4L3.5,16.4z" ] []
, Svg.path [ id "Fill-8", class "st0", d "M3.7,13.1c0-0.3-0.3-0.6-0.6-0.6H0.6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6 c0.1,0,0.3-0.1,0.4-0.2C3.7,13.4,3.7,13.2,3.7,13.1L3.7,13.1z" ] []
, Svg.path [ id "Fill-9", class "st0", d "M10.7,3.9c0.3,0,0.6-0.3,0.6-0.6V0.6C11.3,0.3,11,0,10.7,0c-0.3,0-0.6,0.3-0.6,0.6v2.7 c0,0.2,0.1,0.3,0.2,0.4S10.6,3.9,10.7,3.9L10.7,3.9z" ] []
, Svg.path [ id "Fill-10", class "st0", d "M13.4,20.2H8.9c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h4.5c0.3,0,0.6-0.3,0.6-0.6 C14,20.5,13.7,20.2,13.4,20.2z" ] []
, Svg.path [ id "Fill-11", class "st0", d "M10,23.5v0.3c0,0.4,0.3,0.7,0.6,0.7h0.9c0.4,0,0.6-0.3,0.6-0.7v-0.3c0.7,0,1.3-0.7,1.3-1.4 H8.8C8.9,22.8,9.4,23.4,10,23.5L10,23.5z" ] []
, Svg.path [ id "Fill-12", class "st0", d "M11.2,6.7c-3.1,0-5.6,2.7-5.6,6v0c0,0.8,0.1,1.5,0.4,2.3c0,0.1,0.1,0.2,0.1,0.3h0 c0.2,0.6,0.6,1.1,1,1.6l1.4,2.3h5.4l1.4-2.3c0.4-0.5,0.7-1,1-1.6c0-0.1,0.1-0.2,0.1-0.3h0c0.3-0.7,0.4-1.5,0.4-2.3 C16.8,9.4,14.3,6.7,11.2,6.7L11.2,6.7z M10.9,9c-0.6,0-1.2,0.2-1.7,0.5c-1.1,0.7-1.6,1.9-1.7,3.5v0c0,0.3-0.3,0.6-0.6,0.6 c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4c0-2.7,1.3-4,2.3-4.6c0.7-0.4,1.4-0.6,2.2-0.7c0.3,0,0.6,0.3,0.6,0.6 C11.5,8.7,11.2,9,10.9,9L10.9,9z" ] []
]
]
]
]
]
]
|> fromUnstyled
|> NriSvg.fromHtml

13
styleguide-app/Examples/Alert.elm
View File

@ -6,19 +6,18 @@ module Examples.Alert exposing (example)
-}
import Assets exposing (assets)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Alert.V2 as Alert
import Nri.Ui.Alert.V3 as Alert
example : ModuleExample msg
example =
{ filename = "Nri/Alerts.elm"
{ filename = "Nri.Ui.Alert.V3.elm"
, category = Messaging
, content =
[ Alert.error assets "This is an error"
, Alert.warning assets "This is a warning"
, Alert.tip assets "This is a tip"
, Alert.success assets "This is a success"
[ Alert.error "This is an error"
, Alert.warning "This is a warning"
, Alert.tip "This is a tip"
, Alert.success "This is a success"
]
}

7
styleguide-app/Examples/BannerAlert.elm
View File

@ -6,7 +6,6 @@ module Examples.BannerAlert exposing (example)
-}
import Assets exposing (Assets, assets)
import Html.Styled exposing (h3, text)
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.BannerAlert.V3 as BannerAlert
@ -18,11 +17,11 @@ example =
, category = Messaging
, content =
[ h3 [] [ text "error" ]
, BannerAlert.error assets "This is an error message!"
, BannerAlert.error "This is an error message!"
, h3 [] [ text "neutral" ]
, BannerAlert.neutral assets "This is a neutral message!"
, BannerAlert.neutral "This is a neutral message!"
, h3 [] [ text "success" ]
, BannerAlert.success assets
, BannerAlert.success
"""This is a success message!
Let's see what happens if there is a very long message!
Wow, how successful! You're the biggest success I've ever seen!