add custom attributes for things like titles

src/Nri/Ui/Callout/V1.elm

@@ -2,7 +2,7 @@ module Nri.Ui.Callout.V1 exposing
     ( Attribute, callout
     , sideText
     , containerCss, contentCss
-    , Attrs, defaultAttrs
+    , custom
     )
 
 {-|
@@ -13,6 +13,8 @@ module Nri.Ui.Callout.V1 exposing
 
 @docs containerCss, contentCss
 
+@docs custom
+
 -}
 
 import Css
@@ -27,6 +29,7 @@ type Attribute msg
     = SideText (Maybe (Html msg))
     | ContentCss (List Css.Style)
     | ContainerCss (List Css.Style)
+    | Custom (Html.Attribute msg)
 
 
 sideText : Html msg -> Attribute msg
@@ -44,17 +47,25 @@ contentCss =
     ContentCss
 
 
+custom : Html.Attribute msg -> Attribute msg
+custom =
+    Custom
+
+
 type alias Attrs msg =
     { sideText : Maybe (Html msg)
     , containerCss : List Css.Style
     , contentCss : List Css.Style
+    , customAttrs : List (Html.Attribute msg)
     }
 
 
+defaultAttrs : Attrs msg
 defaultAttrs =
     { sideText = Nothing
     , containerCss = []
     , contentCss = []
+    , customAttrs = []
     }
 
 
@@ -70,6 +81,9 @@ customize attr attrs =
         ContainerCss css ->
             { attrs | containerCss = css }
 
+        Custom custom_ ->
+            { attrs | customAttrs = custom_ :: attrs.customAttrs }
+
 
 callout : List (Attribute msg) -> List (Html msg) -> Html msg
 callout attrs children =
@@ -78,8 +92,8 @@ callout attrs children =
             List.foldl customize defaultAttrs attrs
     in
     Html.aside
-        [ css finalAttrs.containerCss
-        , css
+        ([ css finalAttrs.containerCss
+         , css
             [ Css.boxSizing Css.borderBox
             , Css.backgroundColor Colors.sunshine
             , Css.displayFlex
@@ -89,7 +103,9 @@ callout attrs children =
             , Css.border3 (Css.px 1) Css.solid Colors.highlightYellow
             , Css.borderRadius (Css.px 4)
             ]
-        ]
+         ]
+            ++ finalAttrs.customAttrs
+        )
         [ case finalAttrs.sideText of
             Just text ->
                 Html.div

styleguide-app/Examples/Callout.elm

@@ -8,7 +8,7 @@ module Examples.Callout exposing (example)
 
 import Css
 import Html.Styled as Html
-import Html.Styled.Attributes exposing (href)
+import Html.Styled.Attributes exposing (href, title)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.Callout.V1 as Callout exposing (callout)
 
@@ -19,9 +19,11 @@ example =
     , category = Messaging
     , content =
         [ -- PLAIN
-          Html.h4 [] [ Html.text "Originally Designed Use Case" ]
+          Html.h3 [] [ Html.text "Originally Designed Use Case" ]
         , callout
-            [ Callout.sideText (Html.text "BETA") ]
+            [ Callout.sideText (Html.text "BETA")
+            , Callout.custom (title "beta warning")
+            ]
             [ Html.text "This tab is still a work in progress; some of your student's information may be missing."
             , Html.br [] []
             , Html.text "To share your thoughts and help us improve the experience, "
@@ -30,20 +32,23 @@ example =
             ]
 
         -- WITH SIDE TEXT
-        , Html.h4 [] [ Html.text "Without side text" ]
-        , callout []
+        , Html.h3 [] [ Html.text "Without side text" ]
+        , callout
+            [ Callout.custom (title "no side text") ]
             [ Html.text "I feel weird without my side text!" ]
 
         -- WITH CSS CUSTOMIZATIONS
-        , Html.h4 [] [ Html.text "With CSS customizations" ]
+        , Html.h3 [] [ Html.text "With CSS customizations" ]
         , callout
             [ Callout.containerCss [ Css.margin (Css.px 20) ]
             , Callout.sideText (Html.text "HMMM")
+            , Callout.custom (title "margin")
             ]
             [ Html.text "My container styles are customized to add margin around the callout" ]
         , callout
             [ Callout.contentCss [ Css.textTransform Css.uppercase ]
             , Callout.sideText (Html.text "WOW!")
+            , Callout.custom (title "yelling")
             ]
             [ Html.text "My content styles are customized to yell about everything" ]
         ]