1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-26 07:04:33 +03:00
noredink-ui/styleguide-app/Examples/Svg.elm

190 lines
4.9 KiB
Elm
Raw Normal View History

2020-03-31 22:43:32 +03:00
module Examples.Svg exposing (Msg, State, example)
2019-11-26 04:38:07 +03:00
{-|
2020-03-31 22:43:32 +03:00
@docs Msg, State, example
2019-11-26 04:38:07 +03:00
-}
import Category exposing (Category(..))
2019-11-26 04:38:07 +03:00
import Color exposing (Color)
2019-11-26 04:58:50 +03:00
import Css
2020-03-31 23:20:03 +03:00
import Example exposing (Example)
2019-11-26 04:38:07 +03:00
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.Colors.Extra exposing (fromCssColor, toCssColor)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V2 as Heading
2020-04-24 23:11:09 +03:00
import Nri.Ui.Select.V7 as Select
2019-11-26 04:38:07 +03:00
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.UiIcon.V1 as UiIcon
{-| -}
2020-03-31 23:20:03 +03:00
example : Example State Msg
2020-03-31 22:43:32 +03:00
example =
2019-11-26 04:38:07 +03:00
{ name = "Nri.Ui.Svg.V1"
2020-03-31 22:43:32 +03:00
, categories = [ Icons ]
, state = init
, update = update
2020-03-31 22:48:26 +03:00
, subscriptions = \_ -> Sub.none
2020-03-31 22:43:32 +03:00
, view =
\state ->
[ viewSettings state
, viewResults state
]
2019-11-26 04:58:50 +03:00
}
viewSettings : State -> Html.Html Msg
viewSettings state =
2019-11-26 05:18:11 +03:00
Html.div
[ Attributes.css
[ Css.displayFlex
, Css.justifyContent Css.spaceBetween
]
]
2020-03-09 19:38:16 +03:00
[ Html.label []
2019-11-26 04:38:07 +03:00
[ Html.text "Color: "
, Html.input
[ Attributes.type_ "color"
, Attributes.value (Color.toHex state.color)
, Events.onInput (SetColor << Color.fromHex)
]
[]
]
2019-11-26 04:58:50 +03:00
, Html.label []
[ Html.text "Width: "
, Html.input
[ Attributes.type_ "range"
, Attributes.min "0"
, Attributes.max "200"
, Attributes.value (String.fromFloat state.width)
, Events.onInput (SetWidth << String.toFloat)
]
[]
]
, Html.label []
[ Html.text "Height: "
, Html.input
[ Attributes.type_ "range"
, Attributes.min "0"
, Attributes.max "200"
, Attributes.value (String.fromFloat state.height)
, Events.onInput (SetHeight << String.toFloat)
]
[]
]
2019-11-26 05:08:40 +03:00
, Html.label []
[ Html.text "Aria-label: "
, Html.input
[ Attributes.value state.label
, Events.onInput SetLabel
]
[]
]
2019-11-26 04:38:07 +03:00
]
2019-11-26 05:18:11 +03:00
2020-03-31 22:43:32 +03:00
viewResults : State -> Html.Html Msg
viewResults state =
2019-11-27 03:03:26 +03:00
let
( red, green, blue ) =
Color.toRGB state.color
in
2019-11-26 05:18:11 +03:00
Html.div [ Attributes.css [ Css.displayFlex ] ]
[ Html.pre
[ Attributes.css
[ Css.width (Css.px 400)
, Css.marginRight (Css.px 20)
]
]
2019-11-27 03:03:26 +03:00
[ [ "color : Css.Color"
, "color ="
, " Css.rgb " ++ String.fromFloat red ++ " " ++ String.fromFloat green ++ " " ++ String.fromFloat blue
, ""
, ""
, "renderedSvg : Svg "
, "renderedSvg = "
, " UiIcon.newspaper"
, " |> Svg.withColor color"
, " |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")"
, " |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")"
, " |> Svg.withLabel \"" ++ state.label ++ "\""
2020-03-09 19:38:16 +03:00
, " |> Svg.toHtml"
2019-11-26 05:18:11 +03:00
]
|> String.join "\n"
|> Html.text
]
, Html.div
[ Attributes.css
[ Css.backgroundColor Colors.gray92
, Css.flexGrow (Css.int 2)
]
]
[ UiIcon.newspaper
|> Svg.withColor (toCssColor state.color)
|> Svg.withWidth (Css.px state.width)
|> Svg.withHeight (Css.px state.height)
|> Svg.withLabel state.label
2020-03-09 19:38:16 +03:00
|> Svg.toHtml
2019-11-26 05:18:11 +03:00
]
]
2019-11-26 04:38:07 +03:00
2019-11-26 05:08:40 +03:00
{-| -}
type alias State =
{ color : Color
, width : Float
, height : Float
, label : String
}
2019-11-26 04:38:07 +03:00
{-| -}
init : State
init =
{ color = fromCssColor Colors.blue
2019-11-26 04:58:50 +03:00
, width = 30
, height = 30
2019-11-26 05:08:40 +03:00
, label = "Newspaper"
2019-11-26 04:38:07 +03:00
}
2019-11-26 04:58:50 +03:00
{-| -}
type Msg
= SetColor (Result String Color)
| SetWidth (Maybe Float)
| SetHeight (Maybe Float)
2019-11-26 05:08:40 +03:00
| SetLabel String
2019-11-26 04:58:50 +03:00
2019-11-26 04:38:07 +03:00
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
SetColor (Ok color) ->
( { state | color = color }
, Cmd.none
)
SetColor (Err err) ->
( state, Cmd.none )
2019-11-26 04:58:50 +03:00
SetWidth (Just width) ->
( { state | width = width }, Cmd.none )
SetWidth Nothing ->
( state, Cmd.none )
SetHeight (Just height) ->
( { state | height = height }, Cmd.none )
SetHeight Nothing ->
( state, Cmd.none )
2019-11-26 05:08:40 +03:00
SetLabel label ->
( { state | label = label }, Cmd.none )