mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-11 14:57:58 +03:00
Move BannerAlert examples into Message examples
This commit is contained in:
Aaron VonderHaar
parent
6e712bb79e
commit
c419ee292d
@ -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
|
||||
|
||||
@ -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 )
|
||||
@ -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
|
||||
"""
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user