From c83ffc0ce170a93a7c3b151b06d6f34ac4f492d6 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 11 Apr 2019 12:54:14 -0700 Subject: [PATCH] Adds animation example --- styleguide-app/Examples/Slide.elm | 164 ++++++++++++++++++++++++++++++ styleguide-app/NriModules.elm | 14 +++ 2 files changed, 178 insertions(+) create mode 100644 styleguide-app/Examples/Slide.elm diff --git a/styleguide-app/Examples/Slide.elm b/styleguide-app/Examples/Slide.elm new file mode 100644 index 00000000..eb341782 --- /dev/null +++ b/styleguide-app/Examples/Slide.elm @@ -0,0 +1,164 @@ +module Examples.Slide exposing (Msg, State, example, init, update) + +{-| + +@docs Msg, State, example, init, update + +-} + +import Accessibility.Styled as Html +import Css +import Html.Styled.Attributes exposing (css) +import Html.Styled.Keyed as Keyed +import ModuleExample exposing (Category(..), ModuleExample) +import Nri.Ui.Button.V8 as Button +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Slide.V1 as Slide + + +{-| -} +type Msg + = TriggerAnimation Slide.AnimationDirection + + +{-| -} +type alias State = + { direction : Slide.AnimationDirection + , current : Panel + , previous : Maybe Panel + } + + +{-| -} +example : (Msg -> msg) -> State -> ModuleExample msg +example parentMessage state = + { filename = "Nri.Ui.Slide.V1.elm" + , category = Behaviors + , content = + [ Keyed.node "div" + [ css + [ Slide.withSlidingContents + , Css.border3 (Css.px 3) Css.solid Colors.gray75 + , Css.padding (Css.px 20) + , Css.width (Css.px 600) + ] + ] + (case state.previous of + Just previousPanel -> + [ viewPanel previousPanel (Slide.animateOut state.direction) + , viewPanel state.current (Slide.animateIn state.direction) + ] + + Nothing -> + [ viewPanel state.current (Css.batch []) + ] + ) + , Html.div + [ css + [ Css.displayFlex + , Css.justifyContent Css.spaceBetween + , Css.marginTop (Css.px 20) + , Css.width (Css.px 300) + ] + ] + [ triggerAnimation Slide.FromLTR "Left-to-right" + , triggerAnimation Slide.FromRTL "Right-to-left" + ] + ] + |> List.map (Html.map parentMessage) + } + + +{-| -} +init : State +init = + { direction = Slide.FromRTL + , current = One + , previous = Nothing + } + + +{-| -} +update : Msg -> State -> ( State, Cmd Msg ) +update msg state = + case msg of + TriggerAnimation direction -> + ( { state + | direction = direction + , current = + case ( direction, state.current ) of + ( Slide.FromRTL, One ) -> + Three + + ( Slide.FromRTL, Two ) -> + One + + ( Slide.FromRTL, Three ) -> + Two + + ( Slide.FromLTR, One ) -> + Two + + ( Slide.FromLTR, Two ) -> + Three + + ( Slide.FromLTR, Three ) -> + One + , previous = Just state.current + } + , Cmd.none + ) + + + +-- INTERNAL + + +type Panel + = One + | Two + | Three + + +viewPanel : Panel -> Css.Style -> ( String, Html.Html msg ) +viewPanel panel animation = + let + ( color, text, key ) = + case panel of + One -> + ( Colors.red, "Panel One", "panel-1" ) + + Two -> + ( Colors.yellow, "Panel Two", "panel-2" ) + + Three -> + ( Colors.green, "Panel Three", "panel-3" ) + in + ( key + , Html.div + [ css + [ Css.border3 (Css.px 2) Css.dashed color + , Css.color color + , Css.padding (Css.px 10) + , Css.width (Css.px 100) + , Css.textAlign Css.center + , animation + ] + ] + [ Html.text text + ] + ) + + +triggerAnimation : Slide.AnimationDirection -> String -> Html.Html Msg +triggerAnimation direction label = + Button.button + { onClick = TriggerAnimation direction + , size = Button.Small + , style = Button.Secondary + , width = Button.WidthUnbounded + } + { label = label + , state = Button.Enabled + , icon = Nothing + } diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index 8c34866c..2e6681f5 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -15,6 +15,7 @@ import Examples.Modal import Examples.Page import Examples.SegmentedControl import Examples.Select +import Examples.Slide import Examples.SlideModal import Examples.Table import Examples.Tabs @@ -41,6 +42,7 @@ type alias ModuleStates = , disclosureIndicatorExampleState : Examples.DisclosureIndicator.State , modalExampleState : Examples.Modal.State , slideModalExampleState : Examples.SlideModal.State + , slideExampleState : Examples.Slide.State , tabsExampleState : Examples.Tabs.Tab } @@ -59,6 +61,7 @@ init = , disclosureIndicatorExampleState = Examples.DisclosureIndicator.init , modalExampleState = Examples.Modal.init , slideModalExampleState = Examples.SlideModal.init + , slideExampleState = Examples.Slide.init , tabsExampleState = Examples.Tabs.First } @@ -77,6 +80,7 @@ type Msg | DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg | ModalExampleMsg Examples.Modal.Msg | SlideModalExampleMsg Examples.SlideModal.Msg + | SlideExampleMsg Examples.Slide.Msg | TabsExampleMsg Examples.Tabs.Tab | NoOp @@ -197,6 +201,15 @@ update outsideMsg moduleStates = , Cmd.map SlideModalExampleMsg cmd ) + SlideExampleMsg msg -> + let + ( slideExampleState, cmd ) = + Examples.Slide.update msg moduleStates.slideExampleState + in + ( { moduleStates | slideExampleState = slideExampleState } + , Cmd.map SlideExampleMsg cmd + ) + TabsExampleMsg tab -> ( { moduleStates | tabsExampleState = tab } , Cmd.none @@ -246,6 +259,7 @@ nriThemedModules model = , Examples.Colors.example , Examples.Modal.example ModalExampleMsg model.modalExampleState , Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState + , Examples.Slide.example SlideExampleMsg model.slideExampleState , Examples.Tabs.example TabsExampleMsg model.tabsExampleState ]