From c419ee292d29d5ba9612628ea3c4771b2b83443f Mon Sep 17 00:00:00 2001 From: Aaron VonderHaar Date: Mon, 27 Apr 2020 14:40:50 -0700 Subject: [PATCH] Move BannerAlert examples into Message examples --- styleguide-app/Examples.elm | 22 ---- styleguide-app/Examples/BannerAlert.elm | 134 ------------------------ styleguide-app/Examples/Message.elm | 113 ++++++++++++++++++-- 3 files changed, 106 insertions(+), 163 deletions(-) delete mode 100644 styleguide-app/Examples/BannerAlert.elm diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 1fa87645..925ffbb5 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -3,7 +3,6 @@ module Examples exposing (Msg, State, all) import Example exposing (Example) import Examples.Accordion as Accordion import Examples.AssignmentIcon as AssignmentIcon -import Examples.BannerAlert as BannerAlert import Examples.Button as Button import Examples.Callout as Callout import Examples.Checkbox as Checkbox @@ -76,25 +75,6 @@ all = AssignmentIconState childState -> Just childState - _ -> - Nothing - ) - , BannerAlert.example - |> Example.wrapMsg BannerAlertMsg - (\msg -> - case msg of - BannerAlertMsg childMsg -> - Just childMsg - - _ -> - Nothing - ) - |> Example.wrapState BannerAlertState - (\msg -> - case msg of - BannerAlertState childState -> - Just childState - _ -> Nothing ) @@ -731,7 +711,6 @@ all = type State = AccordionState Accordion.State | AssignmentIconState AssignmentIcon.State - | BannerAlertState BannerAlert.State | ButtonState Button.State | CalloutState Callout.State | CheckboxState Checkbox.State @@ -770,7 +749,6 @@ type State type Msg = AccordionMsg Accordion.Msg | AssignmentIconMsg AssignmentIcon.Msg - | BannerAlertMsg BannerAlert.Msg | ButtonMsg Button.Msg | CalloutMsg Callout.Msg | CheckboxMsg Checkbox.Msg diff --git a/styleguide-app/Examples/BannerAlert.elm b/styleguide-app/Examples/BannerAlert.elm deleted file mode 100644 index 0097c4c2..00000000 --- a/styleguide-app/Examples/BannerAlert.elm +++ /dev/null @@ -1,134 +0,0 @@ -module Examples.BannerAlert exposing (example, State, init, Msg, update) - -{-| - -@docs example, State, init, Msg, update -@docs example_ - --} - -import Category exposing (Category(..)) -import Css -import Example exposing (Example) -import Html.Styled exposing (Html, a, div, h3, pre, text) -import Html.Styled.Attributes as Attributes -import Nri.Ui.BannerAlert.V6 as BannerAlert -import Nri.Ui.Colors.V1 as Colors -import Nri.Ui.Fonts.V1 as Fonts -import Nri.Ui.Pennant.V2 as Pennant -import Nri.Ui.Svg.V1 as Svg -import Nri.Ui.UiIcon.V1 as UiIcon - - -{-| -} -example : Example State Msg -example = - { name = "Nri.Ui.BannerAlert.V6" - , state = init - , update = update - , subscriptions = \_ -> Sub.none - , view = view - , categories = [ Messaging ] - } - - -view : State -> List (Html Msg) -view state = - [ if state.show then - div - [] - [ h3 [] [ text "alert" ] - , BannerAlert.alert [ text "Dismiss this alert message to see a success message!" ] (Just Dismiss) - , pre [] [ text "BannerAlert.alert [ text \"Dismiss this alert message to see a success message!\" ] (Just Dismiss)" ] - ] - - else - div - [] - [ h3 [] [ text "success" ] - , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing - , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ] - ] - , h3 [] [ text "error" ] - , BannerAlert.error [ text "This is an error message!" ] Nothing - , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ] - , h3 [] [ text "neutral" ] - , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing - , pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ] - , h3 [] [ text "custom" ] - , BannerAlert.custom - { color = Colors.aquaDark - , backgroundColor = Colors.gray92 - , icon = Pennant.premiumFlag - , content = [ text "This is a a custom message!" ] - , dismiss = Nothing - } - , pre [] - [ text - """BannerAlert.custom - { color = Colors.aquaDark - , backgroundColor = Colors.gray92 - , icon = Pennant.premiumFlag - , content = [ text "This is a a custom message!" ] - , dismiss = Nothing - } - """ - ] - , h3 [] [ text "with multi-line link and icon" ] - , BannerAlert.success - [ text "Click " - , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ] - [ text - """here, yes, HERE, right here on this very long success message. - Wow, how successful! You're the biggest success I've ever seen! - You should feel great about yourself! Give yourself a very big round of applause! - """ - , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ] - [ Svg.toHtml UiIcon.gear ] - ] - , text " to check out NoRedInk." - ] - Nothing - , pre [] - [ text - """BannerAlert.success - [ text "Click " - , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ] - [ text - \"\"\"here, yes, HERE, right here on this very long success message. - Wow, how successful! You're the biggest success I've ever seen! - You should feel great about yourself! Give yourself a very big round of applause! - \"\"\" - , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ] - [ Svg.toHtml UiIcon.gear ] - ] - , text " to check out NoRedInk." - ] - Nothing - """ - ] - ] - - -type alias State = - { show : Bool } - - -init : State -init = - { show = True } - - -type Msg - = NoOp - | Dismiss - - -update : Msg -> State -> ( State, Cmd Msg ) -update msg state = - case msg of - NoOp -> - ( state, Cmd.none ) - - Dismiss -> - ( { state | show = False }, Cmd.none ) diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm index 6affdf4d..60cd7629 100644 --- a/styleguide-app/Examples/Message.elm +++ b/styleguide-app/Examples/Message.elm @@ -1,29 +1,53 @@ module Examples.Message exposing (Msg, State, example) import Category exposing (Category(..)) +import Css import Example exposing (Example) -import Html.Styled as Html +import Html.Styled as Html exposing (Html, a, div, h3, pre, text) +import Html.Styled.Attributes as Attributes import Nri.Ui.Alert.V4 as Alert +import Nri.Ui.BannerAlert.V6 as BannerAlert +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V2 as Heading +import Nri.Ui.Pennant.V2 as Pennant +import Nri.Ui.Svg.V1 as Svg +import Nri.Ui.UiIcon.V1 as UiIcon type alias State = - () + { show : Bool } -type alias Msg = - () +init : State +init = + { show = True } + + +type Msg + = NoOp + | Dismiss + + +update : Msg -> State -> ( State, Cmd Msg ) +update msg state = + case msg of + NoOp -> + ( state, Cmd.none ) + + Dismiss -> + ( { state | show = False }, Cmd.none ) example : Example State Msg example = { name = "Nri.Ui.Message.V1" , categories = [ Messaging ] - , state = () - , update = \_ state -> ( state, Cmd.none ) + , state = init + , update = update , subscriptions = \_ -> Sub.none , view = - \_ -> + \state -> [ Heading.h3 [] [ Html.text "Message.tiny" ] , Alert.error "This is an **error**" , Alert.warning "This is a **warning**" @@ -32,6 +56,81 @@ example = , Html.hr [] [] , Heading.h3 [] [ Html.text "Message.internalError" ] , Alert.somethingWentWrong exampleRailsError + , Html.hr [] [] + , Heading.h3 [] [ Html.text "Message.banner" ] + , if state.show then + div + [] + [ h3 [] [ text "alert" ] + , BannerAlert.alert [ text "Dismiss this alert message to see a success message!" ] (Just Dismiss) + , pre [] [ text "BannerAlert.alert [ text \"Dismiss this alert message to see a success message!\" ] (Just Dismiss)" ] + ] + + else + div + [] + [ h3 [] [ text "success" ] + , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing + , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ] + ] + , h3 [] [ text "error" ] + , BannerAlert.error [ text "This is an error message!" ] Nothing + , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ] + , h3 [] [ text "neutral" ] + , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing + , pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ] + , h3 [] [ text "custom" ] + , BannerAlert.custom + { color = Colors.aquaDark + , backgroundColor = Colors.gray92 + , icon = Pennant.premiumFlag + , content = [ text "This is a a custom message!" ] + , dismiss = Nothing + } + , pre [] + [ text + """BannerAlert.custom + { color = Colors.aquaDark + , backgroundColor = Colors.gray92 + , icon = Pennant.premiumFlag + , content = [ text "This is a a custom message!" ] + , dismiss = Nothing + } + """ + ] + , h3 [] [ text "with multi-line link and icon" ] + , BannerAlert.success + [ text "Click " + , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ] + [ text + """here, yes, HERE, right here on this very long success message. + Wow, how successful! You're the biggest success I've ever seen! + You should feel great about yourself! Give yourself a very big round of applause! + """ + , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ] + [ Svg.toHtml UiIcon.gear ] + ] + , text " to check out NoRedInk." + ] + Nothing + , pre [] + [ text + """ BannerAlert.success + [ text "Click " + , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ] + [ text + \"\"\"here, yes, HERE, right here on this very long success message. + Wow, how successful! You're the biggest success I've ever seen! + You should feel great about yourself! Give yourself a very big round of applause! + \"\"\" + , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ] + [ Svg.toHtml UiIcon.gear ] + ] + , text " to check out NoRedInk." + ] + Nothing + """ + ] ] }