mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-23 16:32:11 +03:00
💀 remove Alert and BannerAlert
This commit is contained in:
Tessa Kelly
parent
f7cf19a07e
commit
7e16ed19be
2
elm.json
2
elm.json
@ -7,10 +7,8 @@
|
||||
"exposed-modules": [
|
||||
"Nri.Ui",
|
||||
"Nri.Ui.Accordion.V1",
|
||||
"Nri.Ui.Alert.V4",
|
||||
"Nri.Ui.AssetPath",
|
||||
"Nri.Ui.AssignmentIcon.V1",
|
||||
"Nri.Ui.BannerAlert.V6",
|
||||
"Nri.Ui.Button.V5",
|
||||
"Nri.Ui.Button.V8",
|
||||
"Nri.Ui.Button.V10",
|
||||
|
||||
@ -1,217 +0,0 @@
|
||||
module Nri.Ui.Alert.V4 exposing
|
||||
( error, success, tip, warning
|
||||
, somethingWentWrong
|
||||
)
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.tiny` instead
|
||||
|
||||
|
||||
# Changes from V3:
|
||||
|
||||
- Changes the error font color from `purpleDark` to `purple`
|
||||
- Adds `somethingWentWrong` error for displaying stacktraces
|
||||
|
||||
|
||||
# About:
|
||||
|
||||
UI components that highlight information to the user.
|
||||
|
||||
@docs error, success, tip, warning
|
||||
@docs somethingWentWrong
|
||||
|
||||
-}
|
||||
|
||||
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.SpriteSheet exposing (bulb, checkmark, exclamationMark)
|
||||
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.somethingWentWrong` instead
|
||||
|
||||
-}
|
||||
somethingWentWrong : String -> Html msg
|
||||
somethingWentWrong errorMessageForEngineers =
|
||||
Html.div []
|
||||
[ error "Sorry, something went wrong. Please try again later."
|
||||
, Html.details []
|
||||
[ Html.summary
|
||||
[ css
|
||||
[ Fonts.baseFont
|
||||
, Css.fontSize (Css.px 14)
|
||||
, Css.color Colors.gray45
|
||||
]
|
||||
]
|
||||
[ Html.text "Details for NoRedInk engineers" ]
|
||||
, Html.code
|
||||
[ css
|
||||
[ Css.display Css.block
|
||||
, Css.whiteSpace Css.normal
|
||||
, Css.overflowWrap Css.breakWord
|
||||
, Css.color Colors.gray45
|
||||
, Css.backgroundColor Colors.gray96
|
||||
, Css.border3 (Css.px 1) Css.solid Colors.gray92
|
||||
, Css.borderRadius (Css.px 3)
|
||||
, Css.padding2 (Css.px 2) (Css.px 4)
|
||||
, Css.fontSize (Css.px 12)
|
||||
, Css.fontFamily Css.monospace
|
||||
]
|
||||
]
|
||||
[ Html.text errorMessageForEngineers ]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.tiny Error` instead
|
||||
|
||||
-}
|
||||
error : String -> Html msg
|
||||
error content =
|
||||
alert
|
||||
[ exclamation Colors.purple
|
||||
, alertString Colors.purple content
|
||||
]
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.tiny Success` instead
|
||||
|
||||
-}
|
||||
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.marginTop (Css.px 1) ] ]
|
||||
[ NriSvg.toHtml checkmark ]
|
||||
)
|
||||
, alertString Colors.greenDarkest content
|
||||
]
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.tiny Tip` instead
|
||||
|
||||
-}
|
||||
tip : String -> Html msg
|
||||
tip content =
|
||||
alert
|
||||
[ iconContainer [ Css.color Colors.yellow ] (NriSvg.toHtml bulb)
|
||||
, alertString Colors.navy content
|
||||
]
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.tiny Alert` instead
|
||||
|
||||
-}
|
||||
warning : String -> Html msg
|
||||
warning content =
|
||||
alert
|
||||
[ exclamation Colors.red
|
||||
, alertString Colors.redDark 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.flexStart
|
||||
, 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.height (Css.px 13), Css.marginTop (Css.px 1) ] ]
|
||||
[ NriSvg.toHtml exclamationMark ]
|
||||
)
|
||||
|
||||
|
||||
iconContainer : List Css.Style -> Html msg -> Html msg
|
||||
iconContainer styles icon =
|
||||
Nri.Ui.styled Html.div
|
||||
"Nri-Ui-Alert-V4__iconContainer"
|
||||
(styles
|
||||
++ [ -- Content positioning
|
||||
Css.displayFlex
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.center
|
||||
, Css.marginRight (Css.px 5)
|
||||
, Css.lineHeight (Css.px 13)
|
||||
, Css.flexShrink Css.zero
|
||||
|
||||
-- Size
|
||||
, Css.borderRadius (Css.px 13)
|
||||
, Css.height (Css.px 20)
|
||||
, Css.width (Css.px 20)
|
||||
]
|
||||
)
|
||||
[]
|
||||
[ icon ]
|
||||
|
||||
|
||||
alertString : Css.ColorValue compatible -> String -> Html msg
|
||||
alertString color content =
|
||||
Nri.Ui.styled Html.div
|
||||
"Nri-Ui-Alert-V4--alert"
|
||||
[ Css.color color
|
||||
, Fonts.baseFont
|
||||
, Css.fontSize (Css.px 13)
|
||||
|
||||
--, Css.lineHeight (Css.px 20)
|
||||
, Css.listStyleType Css.none
|
||||
|
||||
-- This global selector and overrides are necessary due to
|
||||
-- old stylesheets used on the monolith that set the
|
||||
-- `.txt p { font-size: 18px; }` -- without these overrides,
|
||||
-- we may see giant ugly alerts.
|
||||
-- Remove these if you want to! but be emotionally prepped
|
||||
-- to deal with visual regressions. 🙏
|
||||
, Css.Global.descendants
|
||||
[ Css.Global.p
|
||||
[ Css.margin Css.zero
|
||||
|
||||
--, Css.lineHeight (Css.px 20)
|
||||
, Css.fontSize (Css.px 13)
|
||||
, Fonts.baseFont
|
||||
]
|
||||
]
|
||||
]
|
||||
[]
|
||||
(Markdown.toHtml Nothing content |> List.map fromUnstyled)
|
||||
@ -1,285 +0,0 @@
|
||||
module Nri.Ui.BannerAlert.V6 exposing
|
||||
( alert, error, neutral, success
|
||||
, custom
|
||||
)
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.banner` instead
|
||||
|
||||
@docs alert, error, neutral, success
|
||||
@docs custom
|
||||
|
||||
|
||||
# Post-release patches
|
||||
|
||||
- adjusts link styles
|
||||
- exposes `custom` banner-maker
|
||||
|
||||
Changes from V5:
|
||||
|
||||
- takes HTML rather than BannerContent
|
||||
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (Html)
|
||||
import Accessibility.Styled.Widget as Widget
|
||||
import Css
|
||||
import Css.Global
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
import Html.Styled.Events
|
||||
import Nri.Ui
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Fonts.V1
|
||||
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
|
||||
import Nri.Ui.UiIcon.V1 as UiIcon
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.banner Alert` instead
|
||||
|
||||
-}
|
||||
alert : List (Html msg) -> Maybe msg -> Html msg
|
||||
alert content maybeDismiss =
|
||||
banner
|
||||
{ backgroundColor = Colors.sunshine
|
||||
, color = Colors.navy
|
||||
, icon =
|
||||
inCircle
|
||||
{ backgroundColor = Colors.ochre
|
||||
, color = Colors.white
|
||||
, height = Css.px 25
|
||||
, icon = UiIcon.attention
|
||||
}
|
||||
, content = content
|
||||
, dismiss = maybeDismiss
|
||||
}
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.banner Error` instead
|
||||
|
||||
-}
|
||||
error : List (Html msg) -> Maybe msg -> Html msg
|
||||
error content maybeDismiss =
|
||||
banner
|
||||
{ backgroundColor = Colors.purpleLight
|
||||
, color = Colors.purpleDark
|
||||
, icon =
|
||||
inCircle
|
||||
{ backgroundColor = Colors.purple
|
||||
, color = Colors.white
|
||||
, height = Css.px 25
|
||||
, icon = UiIcon.attention
|
||||
}
|
||||
, content = content
|
||||
, dismiss = maybeDismiss
|
||||
}
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.banner Tip` instead
|
||||
|
||||
-}
|
||||
neutral : List (Html msg) -> Maybe msg -> Html msg
|
||||
neutral content maybeDismiss =
|
||||
banner
|
||||
{ backgroundColor = Colors.frost
|
||||
, color = Colors.navy
|
||||
, icon =
|
||||
inCircle
|
||||
{ backgroundColor = Colors.navy
|
||||
, color = Colors.mustard
|
||||
, height = Css.px 32
|
||||
, icon = UiIcon.bulb
|
||||
}
|
||||
, content = content
|
||||
, dismiss = maybeDismiss
|
||||
}
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.banner Success` instead
|
||||
|
||||
-}
|
||||
success : List (Html msg) -> Maybe msg -> Html msg
|
||||
success content maybeDismiss =
|
||||
banner
|
||||
{ backgroundColor = Colors.greenLightest
|
||||
, color = Colors.greenDarkest
|
||||
, icon =
|
||||
inCircle
|
||||
{ backgroundColor = Colors.green
|
||||
, color = Colors.white
|
||||
, height = Css.px 20
|
||||
, icon = UiIcon.checkmark
|
||||
}
|
||||
, content = content
|
||||
, dismiss = maybeDismiss
|
||||
}
|
||||
|
||||
|
||||
{-|
|
||||
|
||||
|
||||
# DEPRECATED: Use `Nri.Ui.Message.V1.banner Custom` instead
|
||||
|
||||
-}
|
||||
custom :
|
||||
{ color : Css.Color
|
||||
, backgroundColor : Css.Color
|
||||
, icon : Svg
|
||||
, content : List (Html msg)
|
||||
, dismiss : Maybe msg
|
||||
}
|
||||
-> Html msg
|
||||
custom config =
|
||||
banner
|
||||
{ color = config.color
|
||||
, backgroundColor = config.backgroundColor
|
||||
, icon = Svg.toHtml config.icon
|
||||
, content = config.content
|
||||
, dismiss = config.dismiss
|
||||
}
|
||||
|
||||
|
||||
banner :
|
||||
{ color : Css.Color
|
||||
, backgroundColor : Css.Color
|
||||
, icon : Html Never
|
||||
, content : List (Html msg)
|
||||
, dismiss : Maybe msg
|
||||
}
|
||||
-> Html msg
|
||||
banner config =
|
||||
let
|
||||
maybeDismissButton =
|
||||
case config.dismiss of
|
||||
Nothing ->
|
||||
Html.text ""
|
||||
|
||||
Just msg ->
|
||||
dismissButton msg
|
||||
in
|
||||
Html.div
|
||||
[ css
|
||||
[ Css.displayFlex
|
||||
, Css.justifyContent Css.center
|
||||
, Css.alignItems Css.center
|
||||
, Css.backgroundColor config.backgroundColor
|
||||
, Css.color config.color
|
||||
]
|
||||
]
|
||||
[ Html.span
|
||||
[ css
|
||||
[ Css.alignItems Css.center
|
||||
, Css.displayFlex
|
||||
, Css.justifyContent Css.center
|
||||
, Css.padding (Css.px 20)
|
||||
, Css.width (Css.pct 100)
|
||||
, Css.Global.children
|
||||
[ Css.Global.button
|
||||
[ Css.position Css.relative
|
||||
, Css.right (Css.px 15)
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
[ iconContainer [ config.icon ]
|
||||
|> Html.map never
|
||||
, notification config.content
|
||||
]
|
||||
, maybeDismissButton
|
||||
]
|
||||
|
||||
|
||||
dismissButton : msg -> Html msg
|
||||
dismissButton msg =
|
||||
Nri.Ui.styled Html.div
|
||||
"dismiss-button-container"
|
||||
[ Css.padding (Css.px 25)
|
||||
]
|
||||
[]
|
||||
[ Html.button
|
||||
[ Html.Styled.Events.onClick msg
|
||||
, Widget.label "Dismiss banner"
|
||||
, css
|
||||
[ Css.borderWidth Css.zero
|
||||
, Css.backgroundColor Css.unset
|
||||
, Css.color Colors.azure
|
||||
, Css.width (Css.px 30)
|
||||
, Css.height (Css.px 30)
|
||||
, Css.padding2 Css.zero (Css.px 7)
|
||||
, Css.cursor Css.pointer
|
||||
]
|
||||
]
|
||||
[ Svg.toHtml UiIcon.x
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
iconContainer : List (Html msg) -> Html msg
|
||||
iconContainer =
|
||||
Html.div
|
||||
[ css
|
||||
[ Css.width (Css.px 50)
|
||||
, Css.height (Css.px 50)
|
||||
, Css.marginRight (Css.px 20)
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
inCircle :
|
||||
{ backgroundColor : Css.Color
|
||||
, color : Css.Color
|
||||
, height : Css.Px
|
||||
, icon : Svg
|
||||
}
|
||||
-> Html msg
|
||||
inCircle config =
|
||||
Html.div
|
||||
[ css
|
||||
[ Css.borderRadius (Css.pct 50)
|
||||
, Css.height (Css.pct 100)
|
||||
, Css.backgroundColor config.backgroundColor
|
||||
, Css.displayFlex
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.center
|
||||
]
|
||||
]
|
||||
[ config.icon
|
||||
|> Svg.withColor config.color
|
||||
|> Svg.withHeight config.height
|
||||
|> Svg.toHtml
|
||||
]
|
||||
|
||||
|
||||
notification : List (Html msg) -> Html msg
|
||||
notification =
|
||||
Nri.Ui.styled Html.div
|
||||
"banner-alert-notification"
|
||||
[ Css.fontSize (Css.px 20)
|
||||
, Css.fontWeight (Css.int 700)
|
||||
, Css.lineHeight (Css.px 27)
|
||||
, Css.maxWidth (Css.px 600)
|
||||
, Nri.Ui.Fonts.V1.baseFont
|
||||
, Css.Global.descendants
|
||||
[ Css.Global.a
|
||||
[ Css.textDecoration Css.none
|
||||
, Css.color Colors.azure
|
||||
, Css.borderBottom3 (Css.px 1) Css.solid Colors.azure
|
||||
, Css.visited
|
||||
[ Css.color Colors.azure ]
|
||||
]
|
||||
]
|
||||
]
|
||||
[]
|
||||
@ -35,9 +35,9 @@ import Css.Global
|
||||
import Html.Styled as Html exposing (..)
|
||||
import Html.Styled.Attributes as Attributes exposing (..)
|
||||
import Html.Styled.Events as Events exposing (onInput)
|
||||
import Nri.Ui.Alert.V4 as Alert
|
||||
import Nri.Ui.Html.Attributes.V2 as Extra
|
||||
import Nri.Ui.InputStyles.V2 as InputStyles
|
||||
import Nri.Ui.Message.V1 as Message
|
||||
import Nri.Ui.Util exposing (dashify)
|
||||
|
||||
|
||||
@ -392,7 +392,7 @@ view_ label (InputType inputType) config currentValue =
|
||||
[ Html.text label ]
|
||||
, case errorMessage_ of
|
||||
Just m ->
|
||||
Alert.error m
|
||||
Message.tiny Message.Error (Message.Plain m)
|
||||
|
||||
Nothing ->
|
||||
Html.text ""
|
||||
|
||||
@ -3,11 +3,10 @@
|
||||
"tests": [
|
||||
"Nri.Ui",
|
||||
"Nri.Ui.Accordion.V1",
|
||||
"Nri.Ui.Alert.V4",
|
||||
"Nri.Ui.AssetPath",
|
||||
"Nri.Ui.AssignmentIcon.V1",
|
||||
"Nri.Ui.BannerAlert.V6",
|
||||
"Nri.Ui.Button.V5",
|
||||
"Nri.Ui.Button.V8",
|
||||
"Nri.Ui.Button.V10",
|
||||
"Nri.Ui.Callout.V1",
|
||||
"Nri.Ui.Checkbox.V3",
|
||||
@ -22,9 +21,12 @@
|
||||
"Nri.Ui.Effects.V1",
|
||||
"Nri.Ui.Fonts.V1",
|
||||
"Nri.Ui.Heading.V2",
|
||||
"Nri.Ui.Html.Attributes.V2",
|
||||
"Nri.Ui.Html.V3",
|
||||
"Nri.Ui.Icon.V3",
|
||||
"Nri.Ui.Icon.V4",
|
||||
"Nri.Ui.Icon.V5",
|
||||
"Nri.Ui.InputStyles.V2",
|
||||
"Nri.Ui.Loading.V1",
|
||||
"Nri.Ui.Logo.V1",
|
||||
"Nri.Ui.MasteryIcon.V1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user