diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 099a8a28..ab124e93 100644 --- a/styleguide-app/Examples.elm +++ b/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 diff --git a/styleguide-app/Examples/Container.elm b/styleguide-app/Examples/Container.elm new file mode 100644 index 00000000..eb2b319e --- /dev/null +++ b/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 )