From 9fcfdc7318cfeb0070ed4677e7a4e41ace39cdf2 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 2 Sep 2021 10:55:19 -0700 Subject: [PATCH 1/4] Change model to use a record so that we can add the toggle button state to it --- styleguide-app/Examples/Button.elm | 31 +++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 15f7d910..84d6c4b3 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -34,8 +34,16 @@ example = {-| -} -type State - = State (Control Model) +type alias State = + { debugControlsState : Control Model + } + + +{-| -} +init : State +init = + { debugControlsState = initDebugControls + } {-| -} @@ -46,7 +54,7 @@ type ButtonType {-| -} type Msg - = SetState State + = SetDebugControlsState (Control Model) | ShowItWorked String String | NoOp @@ -55,8 +63,10 @@ type Msg update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of - SetState newState -> - ( newState, Cmd.none ) + SetDebugControlsState newDebugControlsState -> + ( { state | debugControlsState = newDebugControlsState } + , Cmd.none + ) ShowItWorked group message -> let @@ -83,8 +93,8 @@ type alias Model = {-| -} -init : State -init = +initDebugControls : Control Model +initDebugControls = Control.record Model |> Control.field "label" (Control.string "Label") |> Control.field "icon" iconChoice @@ -113,7 +123,6 @@ init = , ( "success", Control.value Button.success ) ] ) - |> State iconChoice : Control.Control (Maybe Svg) @@ -129,12 +138,12 @@ iconChoice = viewButtonExamples : State -> Html Msg -viewButtonExamples (State control) = +viewButtonExamples state = let model = - Control.currentValue control + Control.currentValue state.debugControlsState in - [ Control.view (State >> SetState) control + [ Control.view SetDebugControlsState state.debugControlsState |> fromUnstyled , buttons model , toggleButtons From a63bd360297e552a27bc031b87de8bc767b4df94 Mon Sep 17 00:00:00 2001 From: Liz Krane Date: Thu, 2 Sep 2021 11:35:18 -0700 Subject: [PATCH 2/4] Add toggle button state to model, pass to toggleButtons --- styleguide-app/Examples/Button.elm | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 84d6c4b3..f8c7e351 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -17,6 +17,7 @@ import Nri.Ui.Button.V10 as Button import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.UiIcon.V1 as UiIcon +import Set exposing (Set) {-| -} @@ -36,6 +37,7 @@ example = {-| -} type alias State = { debugControlsState : Control Model + , pressedToggleButtons : Set Int } @@ -43,6 +45,7 @@ type alias State = init : State init = { debugControlsState = initDebugControls + , pressedToggleButtons = Set.singleton 1 } @@ -146,7 +149,7 @@ viewButtonExamples state = [ Control.view SetDebugControlsState state.debugControlsState |> fromUnstyled , buttons model - , toggleButtons + , toggleButtons state.pressedToggleButtons , Button.link "linkExternalWithTracking" [ Button.unboundedWidth , Button.secondary @@ -229,8 +232,8 @@ buttons model = |> table [] -toggleButtons : Html Msg -toggleButtons = +toggleButtons : Set Int -> Html Msg +toggleButtons pressedToggleButtons = div [] [ Heading.h3 [] [ text "Button toggle" ] , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ] @@ -238,13 +241,13 @@ toggleButtons = { onDeselect = ShowItWorked "ButtonExample" "onDeselect" , onSelect = ShowItWorked "ButtonExample" "onSelect" , label = "5" - , pressed = False + , pressed = Set.member 0 pressedToggleButtons } , Button.toggleButton { onDeselect = ShowItWorked "ButtonExample" "onDeselect" , onSelect = ShowItWorked "ButtonExample" "onSelect" , label = "5" - , pressed = True + , pressed = Set.member 1 pressedToggleButtons } ] ] From c720d333bca864f2ce52f8ab60ed54a3994aa8b7 Mon Sep 17 00:00:00 2001 From: Liz Krane Date: Thu, 2 Sep 2021 13:05:50 -0700 Subject: [PATCH 3/4] Update toggle button state on click --- styleguide-app/Examples/Button.elm | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index f8c7e351..7aa74786 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -59,6 +59,7 @@ type ButtonType type Msg = SetDebugControlsState (Control Model) | ShowItWorked String String + | ToggleToggleButton Int | NoOp @@ -78,6 +79,16 @@ update msg state = in ( state, Cmd.none ) + ToggleToggleButton id -> + ( { state | pressedToggleButtons = + if Set.member id state.pressedToggleButtons then + Set.remove id state.pressedToggleButtons + else + Set.insert id state.pressedToggleButtons + } + , Cmd.none + ) + NoOp -> ( state, Cmd.none ) @@ -238,15 +249,15 @@ toggleButtons pressedToggleButtons = [ Heading.h3 [] [ text "Button toggle" ] , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ] [ Button.toggleButton - { onDeselect = ShowItWorked "ButtonExample" "onDeselect" - , onSelect = ShowItWorked "ButtonExample" "onSelect" + { onDeselect = ToggleToggleButton 0 + , onSelect = ToggleToggleButton 0 , label = "5" , pressed = Set.member 0 pressedToggleButtons } , Button.toggleButton - { onDeselect = ShowItWorked "ButtonExample" "onDeselect" - , onSelect = ShowItWorked "ButtonExample" "onSelect" - , label = "5" + { onDeselect = ToggleToggleButton 1 + , onSelect = ToggleToggleButton 1 + , label = "Kindergarten" , pressed = Set.member 1 pressedToggleButtons } ] From 36280b73af4e40550d37373f1af2844788e44c4f Mon Sep 17 00:00:00 2001 From: Liz Krane Date: Thu, 2 Sep 2021 14:33:25 -0700 Subject: [PATCH 4/4] Run elm-format --elm-version=0.19 --- styleguide-app/Examples/Button.elm | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 7aa74786..af5d809b 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -80,12 +80,14 @@ update msg state = ( state, Cmd.none ) ToggleToggleButton id -> - ( { state | pressedToggleButtons = - if Set.member id state.pressedToggleButtons then - Set.remove id state.pressedToggleButtons - else - Set.insert id state.pressedToggleButtons - } + ( { state + | pressedToggleButtons = + if Set.member id state.pressedToggleButtons then + Set.remove id state.pressedToggleButtons + + else + Set.insert id state.pressedToggleButtons + } , Cmd.none )