mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-11 07:05:38 +03:00
Message.V1 replaces Alert.V4.error and Alert.V4.somethingWentWrong
This commit is contained in:
parent
65f30b295d
commit
cad02d44b9
14
elm-refactor/v8-to-v9/MessageV1.elm
Normal file
14
elm-refactor/v8-to-v9/MessageV1.elm
Normal file
@ -0,0 +1,14 @@
|
||||
module MessageV1 exposing (..)
|
||||
|
||||
{-| NOTE: requires elm-refactor alpha-220-g24db2f5 or later.
|
||||
-}
|
||||
|
||||
import Nri.Ui.Message.V1 as Message
|
||||
|
||||
|
||||
upgrade_Nri_Ui_Alert_V4_error content =
|
||||
Message.tiny Message.Error (Message.Markdown content)
|
||||
|
||||
|
||||
upgrade_Nri_Ui_Alert_V4_somethingWentWrong errorMessageForEngineers =
|
||||
Message.somethingWentWrong errorMessageForEngineers
|
176
src/Nri/Ui/Message/V1.elm
Normal file
176
src/Nri/Ui/Message/V1.elm
Normal file
@ -0,0 +1,176 @@
|
||||
module Nri.Ui.Message.V1 exposing
|
||||
( tiny
|
||||
, Theme(..), Content(..)
|
||||
, somethingWentWrong
|
||||
)
|
||||
|
||||
{-|
|
||||
|
||||
@docs tiny
|
||||
@docs Theme, Content
|
||||
|
||||
@docs somethingWentWrong
|
||||
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (..)
|
||||
import Css exposing (..)
|
||||
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 (exclamationMark)
|
||||
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
|
||||
|
||||
|
||||
type Theme
|
||||
= Error
|
||||
|
||||
|
||||
type Content msg
|
||||
= Plain String
|
||||
| Markdown String
|
||||
| Html (Html msg)
|
||||
|
||||
|
||||
tiny : Theme -> Content msg -> Html msg
|
||||
tiny theme content =
|
||||
let
|
||||
children =
|
||||
case theme of
|
||||
Error ->
|
||||
[ exclamation Colors.purple
|
||||
, alertString Colors.purple content
|
||||
]
|
||||
in
|
||||
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)
|
||||
]
|
||||
[]
|
||||
children
|
||||
|
||||
|
||||
{-| Shows an appropriate error message for when something unhandled happened.
|
||||
-}
|
||||
somethingWentWrong : String -> Html msg
|
||||
somethingWentWrong errorMessageForEngineers =
|
||||
Html.div []
|
||||
[ tiny Error (Plain "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 ]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
|
||||
--
|
||||
-- PRIVATE
|
||||
--
|
||||
|
||||
|
||||
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 -> Content msg -> Html msg
|
||||
alertString color content =
|
||||
let
|
||||
children =
|
||||
case content of
|
||||
Plain stringContent ->
|
||||
[ text stringContent ]
|
||||
|
||||
Markdown markdownContent ->
|
||||
Markdown.toHtml Nothing markdownContent |> List.map fromUnstyled
|
||||
|
||||
Html html ->
|
||||
[ html ]
|
||||
in
|
||||
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
|
||||
]
|
||||
]
|
||||
]
|
||||
[]
|
||||
children
|
@ -10,6 +10,7 @@ import Nri.Ui.BannerAlert.V6 as BannerAlert
|
||||
import Nri.Ui.Callout.V1 as Callout exposing (callout)
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Heading.V2 as Heading
|
||||
import Nri.Ui.Message.V1 as Message
|
||||
import Nri.Ui.Pennant.V2 as Pennant
|
||||
import Nri.Ui.Svg.V1 as Svg
|
||||
import Nri.Ui.UiIcon.V1 as UiIcon
|
||||
@ -49,13 +50,13 @@ example =
|
||||
, view =
|
||||
\state ->
|
||||
[ Heading.h3 [] [ text "Message.tiny" ]
|
||||
, Alert.error "This is an **error**"
|
||||
, Message.tiny Message.Error (Message.Markdown "This is an **error**")
|
||||
, Alert.warning "This is a **warning**"
|
||||
, Alert.tip "This is a **tip**"
|
||||
, Alert.success "This is a **success**"
|
||||
, Html.hr [] []
|
||||
, Heading.h3 [] [ text "Message.internalError" ]
|
||||
, Alert.somethingWentWrong exampleRailsError
|
||||
, Heading.h3 [] [ text "Message.somethingWentWrong" ]
|
||||
, Message.somethingWentWrong exampleRailsError
|
||||
, Html.hr [] []
|
||||
, Heading.h3 [] [ text "Message.banner" ]
|
||||
, if state.show then
|
||||
|
Loading…
Reference in New Issue
Block a user