1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-24 06:02:36 +03:00
noredink-ui/styleguide-app/Examples/ClickableSvg.elm
2020-03-31 16:35:17 -07:00

122 lines
4.1 KiB
Elm

module Examples.ClickableSvg exposing (Msg, State, example)
{-|
@docs Msg, State, example
-}
import Category exposing (Category(..))
import Color exposing (Color)
import Css
import Examples.IconExamples as IconExamples
import Html.Styled as Html
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
import Nri.Ui.ClickableSvg.V1 as ClickableSvg
import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Select.V6 as Select
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.UiIcon.V1 as UiIcon
{-| -}
example =
{ name = "Nri.Ui.ClickableSvg.V1"
, categories = [ Buttons, Icons ]
, state = init
, update = update
, subscriptions = \_ -> Sub.none
, view =
\state ->
[ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ ClickableSvg.button "Back"
UiIcon.arrowLeft
[ ClickableSvg.onClick (ShowItWorked "You clicked the back button!") ]
, viewCode
"ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
]
, Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ ClickableSvg.link "Back" UiIcon.arrowLeft [ ClickableSvg.linkSpa "some_link" ]
, viewCode
"ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]"
]
, Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ ClickableSvg.button "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
, viewCode
"ClickableSvg.button \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
]
, Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ ClickableSvg.link "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
, viewCode
"ClickableSvg.link \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
]
, Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ ClickableSvg.button "Go to tutorial"
UiIcon.footsteps
[ ClickableSvg.width (Css.px 80)
, ClickableSvg.height (Css.px 80)
, ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
, ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
, ClickableSvg.css
[ Css.border3 (Css.px 3) Css.dashed Colors.purple
]
]
, viewCode
"""
ClickableSvg.button "Go to tutorial"
UiIcon.footsteps
[ ClickableSvg.width (Css.px 80)
, ClickableSvg.height (Css.px 80)
, ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
, ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
, ClickableSvg.css
[ Css.border3 (Css.px 3) Css.dashed Colors.purple
]
]
"""
]
]
}
viewCode : String -> Html.Html msg
viewCode renderStrategy =
Html.code
[ Attributes.css
[ Css.width (Css.px 400)
, Css.marginRight (Css.px 20)
]
]
[ Html.pre [] [ Html.text renderStrategy ] ]
{-| -}
type alias State =
{}
{-| -}
init : State
init =
{}
{-| -}
type Msg
= ShowItWorked String
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
ShowItWorked message ->
let
_ =
Debug.log "ClickableSvg" message
in
( state, Cmd.none )