Adds styleguide example

styleguide-app/Examples.elm

@@ -10,6 +10,7 @@ import Examples.ClickableSvg as ClickableSvg
 import Examples.ClickableText as ClickableText
 import Examples.Colors as Colors
 import Examples.Confetti as Confetti
+import Examples.Container as Container
 import Examples.DisclosureIndicator as DisclosureIndicator
 import Examples.Divider as Divider
 import Examples.Fonts as Fonts
@@ -210,6 +211,25 @@ all =
                     ConfettiState childState ->
                         Just childState
 
+                    _ ->
+                        Nothing
+            )
+    , Container.example
+        |> Example.wrapMsg ContainerMsg
+            (\msg ->
+                case msg of
+                    ContainerMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ContainerState
+            (\msg ->
+                case msg of
+                    ContainerState childState ->
+                        Just childState
+
                     _ ->
                         Nothing
             )
@@ -758,6 +778,7 @@ type State
     | ClickableTextState ClickableText.State
     | ColorsState Colors.State
     | ConfettiState Confetti.State
+    | ContainerState Container.State
     | DisclosureIndicatorState DisclosureIndicator.State
     | DividerState Divider.State
     | FontsState Fonts.State
@@ -798,6 +819,7 @@ type Msg
     | ClickableTextMsg ClickableText.Msg
     | ColorsMsg Colors.Msg
     | ConfettiMsg Confetti.Msg
+    | ContainerMsg Container.Msg
     | DisclosureIndicatorMsg DisclosureIndicator.Msg
     | DividerMsg Divider.Msg
     | FontsMsg Fonts.Msg

styleguide-app/Examples/Container.elm

@@ -0,0 +1,83 @@
+module Examples.Container exposing (Msg, State, example)
+
+{-|
+
+@docs Msg, State, example
+
+-}
+
+import Category exposing (Category(..))
+import Css
+import Example exposing (Example)
+import Html.Styled as Html
+import Html.Styled.Attributes exposing (css)
+import Html.Styled.Events exposing (onClick)
+import KeyboardSupport exposing (Direction(..), Key(..))
+import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Container.V1 as Container
+import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Text.V5 as Text
+
+
+{-| -}
+example : Example State Msg
+example =
+    { name = "Container"
+    , version = 1
+    , categories = [ Layout ]
+    , keyboardSupport = []
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Heading.h3 [ Heading.css [ Css.marginTop (Css.px 8) ] ]
+                [ Html.text "General Container" ]
+            , Html.text "Used for the general container case."
+            , Container.general [] (Html.text "Content, content...")
+            , Heading.h3 [ Heading.css [ Css.marginTop (Css.px 8) ] ]
+                [ Html.text "Alternate Container" ]
+            , Html.text "Used when there are a lot of containers."
+            , Container.alternate [] (Html.text "Content, content...")
+            , Heading.h3 [ Heading.css [ Css.marginTop (Css.px 8) ] ]
+                [ Html.text "Interactable Container" ]
+            , Html.text "Usually used for larger containers with many elements inside."
+            , Container.interactable [] (Html.text "Content, content...")
+            , Heading.h3 [ Heading.css [ Css.marginTop (Css.px 8) ] ]
+                [ Html.text "Disabled Container" ]
+            , Html.text "Used to indicate content is locked/inaccessible"
+            , Container.disabled [] (Html.text "Content, content...")
+            , Heading.h3 [ Heading.css [ Css.marginTop (Css.px 8) ] ]
+                [ Html.text "Invalid Container" ]
+            , Html.text "Used to indicate content is invalid"
+            , Container.invalid [] (Html.text "Content, content...")
+            , Heading.h3 [ Heading.css [ Css.marginTop (Css.px 8) ] ]
+                [ Html.text "Interactable container with a label" ]
+            , Html.text "Used for helpful tidbits."
+            , Container.interactableWithLabel "The label" <|
+                Html.text "Content, content..."
+            ]
+    }
+
+
+{-| -}
+init : State
+init =
+    {}
+
+
+{-| -}
+type alias State =
+    {}
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    ( state, Cmd.none )