From ccf793d5e18b428125266f76950bed047319cb3f Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 11 Jul 2019 15:18:49 -0700 Subject: [PATCH] Generalize the button --- src/Nri/Ui/Button/V9.elm | 40 +++++++++++++++++---------- styleguide-app/Examples/Button.elm | 44 +++++++++++++++--------------- styleguide-app/NriModules.elm | 4 +-- 3 files changed, 50 insertions(+), 38 deletions(-) diff --git a/src/Nri/Ui/Button/V9.elm b/src/Nri/Ui/Button/V9.elm index bd83cf51..e112bd38 100644 --- a/src/Nri/Ui/Button/V9.elm +++ b/src/Nri/Ui/Button/V9.elm @@ -97,6 +97,7 @@ import Nri.Ui.AssetPath as AssetPath exposing (Asset) import Nri.Ui.Colors.Extra as ColorsExtra import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 +import Nri.Ui.Html.Attributes.V2 as AttributesExtra import Nri.Ui.Svg.V1 as NriSvg exposing (Svg) import Svg import Svg.Attributes @@ -110,7 +111,7 @@ styledName suffix = {-| -} type ButtonOrLink msg = ButtonOrLink - { onClick : msg + { onClick : Maybe msg , url : String , linkType : Link , size : ButtonSize @@ -124,10 +125,10 @@ type ButtonOrLink msg {-| -} -build : ButtonOrLink () +build : ButtonOrLink msg build = ButtonOrLink - { onClick = () + { onClick = Nothing , url = "#" , linkType = Default , size = Medium @@ -141,10 +142,10 @@ build = {-| -} -onClick : msg -> ButtonOrLink () -> ButtonOrLink msg +onClick : msg -> ButtonOrLink msg -> ButtonOrLink msg onClick msg (ButtonOrLink config) = ButtonOrLink - { onClick = msg + { onClick = Just msg , url = config.url , linkType = config.linkType , size = config.size @@ -153,12 +154,12 @@ onClick msg (ButtonOrLink config) = , label = config.label , state = config.state , icon = config.icon - , customAttributes = [] + , customAttributes = config.customAttributes } {-| -} -href : String -> ButtonOrLink () -> ButtonOrLink () +href : String -> ButtonOrLink msg -> ButtonOrLink msg href url (ButtonOrLink config) = ButtonOrLink { onClick = config.onClick @@ -170,7 +171,7 @@ href url (ButtonOrLink config) = , label = config.label , state = config.state , icon = config.icon - , customAttributes = [] + , customAttributes = config.customAttributes } @@ -247,7 +248,9 @@ renderLink (ButtonOrLink config) = SinglePageApp -> linkBase "linkSpa" - (EventExtras.onClickPreventDefaultForLinkWithHref config.onClick + ((Maybe.map EventExtras.onClickPreventDefaultForLinkWithHref config.onClick + |> Maybe.withDefault AttributesExtra.none + ) :: config.customAttributes ) @@ -260,8 +263,14 @@ renderLink (ButtonOrLink config) = WithTracking -> linkBase "linkWithTracking" - (Events.preventDefaultOn "click" - (Json.Decode.succeed ( config.onClick, True )) + ((Maybe.map + (\msg -> + Events.preventDefaultOn "click" + (Json.Decode.succeed ( msg, True )) + ) + config.onClick + |> Maybe.withDefault AttributesExtra.none + ) :: config.customAttributes ) @@ -273,7 +282,8 @@ renderLink (ButtonOrLink config) = linkBase "linkExternalWithTracking" (List.append [ Attributes.target "_blank" - , EventExtras.onClickForLinkWithHref config.onClick + , Maybe.map EventExtras.onClickForLinkWithHref config.onClick + |> Maybe.withDefault AttributesExtra.none ] config.customAttributes ) @@ -286,7 +296,7 @@ withCustomAttributes customAttributes (ButtonOrLink config) = {-| -} -withLabel : String -> ButtonOrLink () -> ButtonOrLink () +withLabel : String -> ButtonOrLink msg -> ButtonOrLink msg withLabel label (ButtonOrLink config) = ButtonOrLink { config | label = label } @@ -493,7 +503,9 @@ renderButton (ButtonOrLink config) = Nri.Ui.styled Html.button (styledName "customButton") [ buttonStyles config.size config.width buttonStyle_ ] - (Events.onClick config.onClick + ((Maybe.map Events.onClick config.onClick + |> Maybe.withDefault AttributesExtra.none + ) :: Attributes.disabled isDisabled :: Attributes.type_ "button" :: config.customAttributes diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index ce005e87..11167f2e 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -20,8 +20,8 @@ import Nri.Ui.Text.V3 as Text {-| -} -type State - = State (Control Model) +type State parentMsg + = State (Control (Model parentMsg)) {-| -} @@ -32,8 +32,8 @@ type ButtonType {-| -} example : - (String -> ModuleMessages Msg parentMsg) - -> State + (String -> ModuleMessages (Msg parentMsg) parentMsg) + -> State parentMsg -> ModuleExample parentMsg example unnamedMessages state = let @@ -47,13 +47,13 @@ example unnamedMessages state = {-| -} -type Msg - = SetState State +type Msg parentMsg + = SetState (State parentMsg) | NoOp {-| -} -update : Msg -> State -> ( State, Cmd Msg ) +update : Msg msg -> State msg -> ( State msg, Cmd (Msg msg) ) update msg state = case msg of SetState newState -> @@ -67,21 +67,27 @@ update msg state = -- INTERNAL -type alias Model = +type alias Model msg = { label : String , icon : Maybe Svg - , width : ButtonOrLink () -> ButtonOrLink () , buttonType : ButtonType - , state : ButtonOrLink () -> ButtonOrLink () + , width : ButtonOrLink msg -> ButtonOrLink msg + , state : ButtonOrLink msg -> ButtonOrLink msg } {-| -} -init : { r | performance : String, lock : String } -> State +init : { r | performance : String, lock : String } -> State msg init assets = Control.record Model |> Control.field "label" (Control.string "Label") |> Control.field "icon" (iconChoice assets) + |> Control.field "button type" + (Control.choice + ( "button", Control.value Button ) + [ ( "link", Control.value Link ) + ] + ) |> Control.field "width" (Control.choice ( "exactWidth 120", Control.value (Button.exactWidth 120) ) @@ -90,12 +96,6 @@ init assets = , ( "fillContainerWidth", Control.value Button.fillContainerWidth ) ] ) - |> Control.field "button type" - (Control.choice - ( "button", Control.value Button ) - [ ( "link", Control.value Link ) - ] - ) |> Control.field "state (button only)" (Control.choice ( "enabled", Control.value Button.enabled ) @@ -131,8 +131,8 @@ iconChoice assets = viewButtonExamples : - ModuleMessages Msg parentMsg - -> State + ModuleMessages (Msg parentMsg) parentMsg + -> State parentMsg -> Html parentMsg viewButtonExamples messages (State control) = let @@ -159,8 +159,8 @@ viewButtonExamples messages (State control) = buttons : - ModuleMessages Msg parentMsg - -> Model + ModuleMessages (Msg parentMsg) parentMsg + -> Model parentMsg -> Html parentMsg buttons messages model = let @@ -232,7 +232,7 @@ buttons messages model = |> table [] -toggleButtons : ModuleMessages Msg parentMsg -> Html parentMsg +toggleButtons : ModuleMessages (Msg parentMsg) parentMsg -> Html parentMsg toggleButtons messages = div [] [ Headings.h3 [ text "Button toggle" ] diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index e757c83f..637d5cd9 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -30,7 +30,7 @@ import Url exposing (Url) type alias ModuleStates = - { buttonExampleState : Examples.Button.State + { buttonExampleState : Examples.Button.State Msg , bannerAlertExampleState : Examples.BannerAlert.State , clickableTextExampleState : Examples.ClickableText.State , checkboxExampleState : Examples.Checkbox.State @@ -69,7 +69,7 @@ init = type Msg - = ButtonExampleMsg Examples.Button.Msg + = ButtonExampleMsg (Examples.Button.Msg Msg) | BannerAlertExampleMsg Examples.BannerAlert.Msg | ClickableTextExampleMsg Examples.ClickableText.Msg | CheckboxExampleMsg Examples.Checkbox.Msg