From 71c33243765d8680a388bfbb4357932fd07f4627 Mon Sep 17 00:00:00 2001
From: Aaron VonderHaar <av@noredink.com>
Date: Tue, 28 Apr 2020 12:25:05 -0700
Subject: [PATCH] Add Message.V1.large

---
 src/Nri/Ui/Message/V1.elm           | 113 +++++++++++++++++++++++++++-
 styleguide-app/Examples/Message.elm |  11 ++-
 2 files changed, 121 insertions(+), 3 deletions(-)

diff --git a/src/Nri/Ui/Message/V1.elm b/src/Nri/Ui/Message/V1.elm
index 34a9ddd4..e000ea54 100644
--- a/src/Nri/Ui/Message/V1.elm
+++ b/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
diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm
index 467dd4fb..38e20206 100644
--- a/styleguide-app/Examples/Message.elm
+++ b/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 [])