Move Theme to be an attribute

src/Nri/Ui/Message/V2.elm

@@ -1,29 +1,30 @@
 module Nri.Ui.Message.V2 exposing
     ( tiny, large, banner
-    , Theme(..)
     , Attribute
     , plaintext, markdown, html
-    , alert, alertDialog
+    , tip, error, alert, success, customTheme
+    , alertRole, alertDialogRole
     , onDismiss
     , somethingWentWrong
     )
 
 {-| Changes from V1:
 
-  - adds `alert`, `alertDialog` role attributes
+  - adds `alertRole`, `alertDialogRole` role attributes
   - rename BannerAttribute -> Attribute
   - accept Attributes on any Message type
   - :skull: remove mapContent
   - expose `plaintext`, `markdown`, and `html` Attribute helpers instead of having `Content(..)` in the view APIs
+  - expose theme Attribute helpers instead of having `Theme(..)` in the view APIs
 
 @docs tiny, large, banner
-@docs Theme
 
 Attributes:
 
 @docs Attribute
 @docs plaintext, markdown, html
-@docs alert, alertDialog
+@docs tip, error, alert, success, customTheme
+@docs alertRole, alertDialogRole
 @docs onDismiss
 
 @docs somethingWentWrong
@@ -47,34 +48,23 @@ import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
 
 
-{-| `Error` / `Alert` / `Tip` / `Success`
--}
-type Theme
-    = Error
-    | Alert
-    | Tip
-    | Success
-    | Custom
-        { color : Color
-        , backgroundColor : Color
-        , icon : Svg
-        }
-
-
 {-| Shows a tiny alert message. We commonly use these for validation errors and small hints to users.
 
     view =
-        Message.tiny Message.Tip
+        Message.tiny
-            [ Message.Markdown "Don't tip too much, or your waitress will **fall over**!" ]
+            [ Message.tip
-
+            , Message.markdown "Don't tip too much, or your waitress will **fall over**!"
-NOTE: When using a `Custom` theme, `tiny` ignores the custom `backgroundColor`.
+            ]
 
 -}
-tiny : Theme -> List (Attribute msg) -> Html msg
+tiny : List (Attribute msg) -> Html msg
-tiny theme attr =
+tiny attr =
     let
+        attributes =
+            configFromAttributes attr
+
         config =
-            case theme of
+            case attributes.theme of
                 Error ->
                     { icon =
                         UiIcon.exclamation
@@ -107,13 +97,10 @@ tiny theme attr =
                     , fontColor = Colors.greenDarkest
                     }
 
-                Custom customTheme ->
+                Custom theme ->
-                    { icon = customTheme.icon
+                    { icon = theme.icon
-                    , fontColor = customTheme.color
+                    , fontColor = theme.color
                     }
-
-        attributes =
-            configFromAttributes attr
     in
     Nri.Ui.styled div
         "Nri-Ui-Message-V2--tiny"
@@ -189,15 +176,20 @@ tiny theme attr =
 {-| Shows a large alert or callout message. We commonly use these for highlighted tips, instructions, or asides in page copy.
 
     view =
-        Message.large Message.Tip
+        Message.large
-            [ Message.Plain "Two out of two parents agree: NoRedInk sounds like a fun place to work." ]
+            [ Message.success
+            , Message.plaintext "Two out of two parents agree: NoRedInk sounds like a fun place to work."
+            ]
 
 -}
-large : Theme -> List (Attribute msg) -> Html msg
+large : List (Attribute msg) -> Html msg
-large theme attr =
+large attr =
     let
+        attributes =
+            configFromAttributes attr
+
         config =
-            case theme of
+            case attributes.theme of
                 Error ->
                     { backgroundColor = Colors.purpleLight
                     , fontColor = Colors.purpleDark
@@ -234,14 +226,11 @@ large theme attr =
                             |> NriSvg.withLabel "Success"
                     }
 
-                Custom customTheme ->
+                Custom theme ->
-                    { backgroundColor = customTheme.backgroundColor
+                    { backgroundColor = theme.backgroundColor
-                    , fontColor = customTheme.color
+                    , fontColor = theme.color
-                    , icon = customTheme.icon
+                    , icon = theme.icon
                     }
-
-        attributes =
-            configFromAttributes attr
     in
     Nri.Ui.styled div
         "Nri-Ui-Message-V2--large"
@@ -294,17 +283,18 @@ large theme attr =
 We commonly use these for flash messages at the top of pages.
 
     view =
-        Message.banner Message.Success
+        Message.banner
-            [ Message.Plain "John Jacob Jingleheimer Schmidt has been dropped from First Period English."
+            [ Message.alertTheme
-            , Message.alert
+            , Message.alertRole
+            , Message.plaintext "John Jacob Jingleheimer Schmidt has been dropped from First Period English."
             ]
 
 -}
-banner : Theme -> List (Attribute msg) -> Html msg
+banner : List (Attribute msg) -> Html msg
-banner theme attr =
+banner attr =
     let
         config =
-            case theme of
+            case attributes.theme of
                 Error ->
                     { backgroundColor = Colors.purpleLight
                     , color = Colors.purpleDark
@@ -347,10 +337,10 @@ banner theme attr =
                             |> NriSvg.toHtml
                     }
 
-                Custom customTheme ->
+                Custom theme ->
-                    { backgroundColor = customTheme.backgroundColor
+                    { backgroundColor = theme.backgroundColor
-                    , color = customTheme.color
+                    , color = theme.color
-                    , icon = NriSvg.toHtml customTheme.icon
+                    , icon = NriSvg.toHtml theme.icon
                     }
 
         attributes =
@@ -428,8 +418,9 @@ banner theme attr =
 somethingWentWrong : String -> Html msg
 somethingWentWrong errorMessageForEngineers =
     div []
-        [ tiny Error
+        [ tiny
-            [ plaintext "Sorry, something went wrong.  Please try again later."
+            [ error
+            , plaintext "Sorry, something went wrong.  Please try again later."
             ]
         , details []
             [ summary
@@ -477,6 +468,37 @@ html content =
     Attribute <| \config -> { config | content = Html content }
 
 
+{-| -}
+tip : Attribute msg
+tip =
+    Attribute <| \config -> { config | theme = Tip }
+
+
+{-| -}
+error : Attribute msg
+error =
+    Attribute <| \config -> { config | theme = Error }
+
+
+{-| -}
+alert : Attribute msg
+alert =
+    Attribute <| \config -> { config | theme = Alert }
+
+
+{-| -}
+success : Attribute msg
+success =
+    Attribute <| \config -> { config | theme = Success }
+
+
+{-| When using a `custom` theme and `tiny` size, the custom `backgroundColor` will be ignored.
+-}
+customTheme : { color : Color, backgroundColor : Color, icon : Svg } -> Attribute msg
+customTheme custom_ =
+    Attribute <| \config -> { config | theme = Custom custom_ }
+
+
 {-| Adds a dismiss ("X" icon) to a message which will produce the given `msg` when clicked.
 -}
 onDismiss : msg -> Attribute msg
@@ -485,14 +507,14 @@ onDismiss msg =
 
 
 {-| -}
-alert : Attribute msg
+alertRole : Attribute msg
-alert =
+alertRole =
     Attribute <| \config -> { config | role = Just AlertRole }
 
 
 {-| -}
-alertDialog : Attribute msg
+alertDialogRole : Attribute msg
-alertDialog =
+alertDialogRole =
     Attribute <| \config -> { config | role = Just AlertDialog }
 
 
@@ -514,6 +536,7 @@ type alias BannerConfig msg =
     { onDismiss : Maybe msg
     , role : Maybe Role
     , content : Content msg
+    , theme : Theme
     }
 
 
@@ -525,6 +548,7 @@ configFromAttributes attr =
         { onDismiss = Nothing
         , role = Nothing
         , content = Plain ""
+        , theme = Tip
         }
         attr
 
@@ -560,6 +584,24 @@ contentToHtml content =
 
 
 
+-- Themes
+
+
+{-| `Error` / `Alert` / `Tip` / `Success`
+-}
+type Theme
+    = Error
+    | Alert
+    | Tip
+    | Success
+    | Custom
+        { color : Color
+        , backgroundColor : Color
+        , icon : Svg
+        }
+
+
+
 -- Role
 
 

styleguide-app/Examples/Message.elm

@@ -24,9 +24,9 @@ type alias State =
 
 
 type alias ExampleConfig =
-    { size : Message.Theme -> List (Message.Attribute Msg) -> Html Msg
+    { size : List (Message.Attribute Msg) -> Html Msg
-    , theme : Message.Theme
+    , theme : Maybe (Message.Attribute Msg)
-    , content : Message.Attribute Msg
+    , content : Maybe (Message.Attribute Msg)
     , role : Maybe (Message.Attribute Msg)
     , dismissable : Maybe (Message.Attribute Msg)
     }
@@ -45,7 +45,7 @@ init =
     }
 
 
-controlSize : Control (Message.Theme -> List (Message.Attribute Msg) -> Html Msg)
+controlSize : Control (List (Message.Attribute Msg) -> Html Msg)
 controlSize =
     Control.choice
         [ ( "banner", Control.value Message.banner )
@@ -54,38 +54,46 @@ controlSize =
         ]
 
 
-controlTheme : Control Message.Theme
+controlTheme : Control (Maybe (Message.Attribute msg))
 controlTheme =
     Control.choice
-        [ ( "Tip", Control.value Message.Tip )
+        [ ( "not set", Control.value Nothing )
-        , ( "Error", Control.value Message.Error )
+        , ( "tip", Control.value (Just Message.tip) )
-        , ( "Alert", Control.value Message.Alert )
+        , ( "error", Control.value (Just Message.error) )
-        , ( "Success", Control.value Message.Success )
+        , ( "alert", Control.value (Just Message.alert) )
-        , ( "Custom (aquaDark, gray92, premiumFlag)"
+        , ( "success", Control.value (Just Message.success) )
-          , Control.value <|
+        , ( "customTheme (aquaDark, gray92, premiumFlag)"
-                Message.Custom
+          , Message.customTheme
-                    { color = Colors.aquaDark
+                { color = Colors.aquaDark
-                    , backgroundColor = Colors.gray92
+                , backgroundColor = Colors.gray92
-                    , icon = Pennant.premiumFlag
+                , icon = Pennant.premiumFlag
-                    }
+                }
+                |> Just
+                |> Control.value
           )
         ]
 
 
-controlContent : Control (Message.Attribute msg)
+controlContent : Control (Maybe (Message.Attribute msg))
 controlContent =
     Control.choice
-        [ ( "plain text (short)"
+        [ ( "not set"
+          , Control.value Nothing
+          )
+        , ( "plain text (short)"
           , Control.string "Comic books do count as literature."
                 |> Control.map Message.plaintext
+                |> Control.map Just
           )
         , ( "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.plaintext
+                |> Control.map Just
           )
         , ( "markdown"
           , Control.string "_Katie's dad suggests:_ Don't tip too much, or your waitress will **fall over**!"
                 |> Control.map Message.markdown
+                |> Control.map Just
           )
         , ( "HTML (short)"
           , Control.value
@@ -94,6 +102,7 @@ controlContent =
                     , text " ⇄ "
                     , Html.em [] [ text "tries again" ]
                     ]
+                    |> Just
                 )
           )
         , ( "HTML (long)"
@@ -113,6 +122,7 @@ controlContent =
                         ]
                     , text " to check out NoRedInk."
                     ]
+                    |> Just
                 )
           )
         ]
@@ -121,9 +131,9 @@ controlContent =
 controlRole : Control (Maybe (Message.Attribute msg))
 controlRole =
     Control.choice
-        [ ( "Not set", Control.value Nothing )
+        [ ( "not set", Control.value Nothing )
-        , ( "Alert", Control.value (Just Message.alert) )
+        , ( "alertRole", Control.value (Just Message.alertRole) )
-        , ( "Alert Dialog", Control.value (Just Message.alertDialog) )
+        , ( "alertDialogRole", Control.value (Just Message.alertDialogRole) )
         ]
 
 
@@ -163,9 +173,11 @@ example =
                 { size, role, theme, dismissable, content } =
                     Control.currentValue state.control
 
+                attributes : List (Message.Attribute Msg)
                 attributes =
                     List.filterMap identity
-                        [ Just content
+                        [ theme
+                        , content
                         , role
                         , dismissable
                         ]
@@ -180,7 +192,7 @@ example =
             [ Control.view UpdateControl state.control
                 |> Html.fromUnstyled
             , Heading.h3 [] [ text "Message.view" ]
-            , orDismiss <| size theme attributes
+            , orDismiss <| size attributes
             , Heading.h3 [] [ text "Message.somethingWentWrong" ]
             , Message.somethingWentWrong exampleRailsError
             ]