Add Message.V1.large

src/Nri/Ui/Message/V1.elm

@@ -1,5 +1,5 @@
 module Nri.Ui.Message.V1 exposing
-    ( tiny, banner
+    ( tiny, large, banner
     , Theme(..), Content(..), mapContent, BannerAttribute
     , onDismiss
     , somethingWentWrong
@@ -7,7 +7,7 @@ module Nri.Ui.Message.V1 exposing
 
 {-|
 
-@docs tiny, banner
+@docs tiny, large, banner
 @docs Theme, Content, mapContent, BannerAttribute
 @docs onDismiss
 
@@ -147,6 +147,96 @@ tiny theme content =
         children
 
 
+{-| Shows a large alert or callout message. We commonly use these for highlighted tips, instructions, or asides in page copy.
+
+    import Nri.Ui.Message.V1 as Message
+
+    view =
+        Message.large Message.Tip (Message.Plain "Two out of two parents agree: NoRedInk sounds like a fun place to work.")
+
+-}
+large : Theme -> Content msg -> Html msg
+large theme content =
+    let
+        config =
+            case theme of
+                Error ->
+                    { backgroundColor = Colors.purpleLight
+                    , fontColor = Colors.purple
+                    , icon =
+                        UiIcon.exclamation
+                            |> NriSvg.withColor Colors.purple
+                            |> NriSvg.withLabel "Error"
+                            |> NriSvg.toHtml
+                    }
+
+                Warning ->
+                    { backgroundColor = Colors.sunshine
+                    , fontColor = Colors.navy
+                    , icon =
+                        UiIcon.exclamation
+                            |> NriSvg.withColor Colors.ochre
+                            |> NriSvg.withLabel "Alert"
+                            |> NriSvg.toHtml
+                    }
+
+                Tip ->
+                    { backgroundColor = Colors.sunshine
+                    , fontColor = Colors.navy
+                    , icon =
+                        UiIcon.bulb
+                            |> NriSvg.withColor Colors.navy
+                            |> NriSvg.withLabel "Tip"
+                            |> NriSvg.toHtml
+                    }
+
+                Success ->
+                    { backgroundColor = Colors.greenLightest
+                    , fontColor = Colors.green
+                    , icon =
+                        checkmarkInCircle "Success" Colors.green
+                    }
+
+                Custom customTheme ->
+                    { backgroundColor = customTheme.backgroundColor
+                    , fontColor = customTheme.color
+                    , icon =
+                        customTheme.icon
+                            |> NriSvg.toHtml
+                    }
+    in
+    Nri.Ui.styled div
+        "Nri-Ui-Message-V1--large"
+        [ width (pct 100)
+        , backgroundColor config.backgroundColor
+        , Fonts.baseFont
+        , fontSize (px 15)
+        , fontWeight (int 600)
+        , boxSizing borderBox
+        , padding (px 20)
+        , borderRadius (px 8)
+        , color config.fontColor
+        , displayFlex
+        , alignItems center
+        ]
+        []
+        [ styled div
+            [ width (px 35)
+            , marginRight (px 10)
+            ]
+            []
+            [ config.icon
+            ]
+        , styled div
+            [ minWidth (px 100)
+            , flexBasis (px 100)
+            , flexGrow (int 1)
+            ]
+            []
+            (contentToHtml content)
+        ]
+
+
 {-| PRIVATE
 -}
 type BannerAttribute msg
@@ -445,6 +535,25 @@ inCircle config =
         ]
 
 
+{-| TODO: the sizing is hard to control; replace this with a single SVG.
+-}
+checkmarkInCircle : String -> Css.Color -> Html msg
+checkmarkInCircle label color =
+    styled div
+        [ borderRadius (pct 50)
+        , backgroundColor color
+        , displayFlex
+        , alignItems center
+        , justifyContent center
+        ]
+        []
+        [ UiIcon.checkmark
+            |> NriSvg.withColor Colors.white
+            |> NriSvg.withLabel label
+            |> NriSvg.toHtml
+        ]
+
+
 bannerDismissButton : msg -> Html msg
 bannerDismissButton msg =
     Nri.Ui.styled div

styleguide-app/Examples/Message.elm

@@ -56,10 +56,14 @@ init =
                 )
             |> Control.field "content"
                 (Control.choice
-                    [ ( "plain text"
+                    [ ( "plain text (short)"
                       , Control.string "Comic books do count as literature."
                             |> Control.map Message.Plain
                       )
+                    , ( "plain text (long)"
+                      , Control.stringTextarea "Share this link with students as an easy shortcut to join Jeffy's Favorite Class (no class code needed). The link works for students new to NoRedInk and those with existing accounts. Students only need to use this link once to join."
+                            |> Control.map Message.Plain
+                      )
                     , ( "markdown"
                       , Control.string "_Katie's dad suggests:_ Don't tip too much, or your waitress will **fall over**!"
                             |> Control.map Message.Markdown
@@ -129,6 +133,11 @@ example =
             , List.map (\theme -> Message.tiny theme content) exampleConfig.themes
                 |> div []
             , Html.hr [] []
+            , Heading.h3 [] [ text "Message.large" ]
+            , List.map (\theme -> Message.large theme content) exampleConfig.themes
+                |> List.intersperse (br [])
+                |> div []
+            , Html.hr [] []
             , Heading.h3 [] [ text "Message.banner" ]
             , List.map (\theme -> Message.banner theme content []) exampleConfig.themes
                 |> List.intersperse (br [])