NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-16 01:13:08 +03:00
Code Issues Packages Projects Releases Wiki Activity
f18656157c
noredink-ui/styleguide-app/Examples/SlideModal.elm

253 lines
13 KiB
Elm
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

module Examples.SlideModal exposing (Msg, State, example, init, update)
{-|
@docs Msg, State, example, init, update
-}
import Accessibility.Styled as Html exposing (Html, div, h3, p, text)
import Category exposing (Category(..))
import Css
import Html.Styled exposing (fromUnstyled)
import Html.Styled.Attributes exposing (css)
import ModuleExample exposing (ModuleExample)
import Nri.Ui.Button.V8 as Button
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.SlideModal.V2 as SlideModal
import Sort.Set as Set exposing (Set)
import Svg exposing (..)
import Svg.Attributes exposing (..)
{-| -}
type Msg
= ModalMsg SlideModal.State
{-| -}
type alias State =
{ modal : SlideModal.State }
{-| -}
example : (Msg -> msg) -> State -> ModuleExample msg
example parentMessage state =
{ name = "Nri.Ui.SlideModal.V2"
, categories = Set.fromList Category.sorter <| List.singleton Modals
, content =
[ viewModal state.modal
, modalLaunchButton
]
|> List.map (Html.map parentMessage)
}
{-| -}
init : State
init =
{ modal = SlideModal.closed
}
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
ModalMsg modal ->
( { state | modal = modal }, Cmd.none )
-- INTERNAL
modalLaunchButton : Html Msg
modalLaunchButton =
Button.button
{ onClick = ModalMsg SlideModal.open
, size = Button.Small
, style = Button.Secondary
, width = Button.WidthUnbounded
}
{ label = "Launch Modal"
, state = Button.Enabled
, icon = Nothing
}
viewModal : SlideModal.State -> Html Msg
viewModal state =
SlideModal.view
{ panels =
[ { icon = grayBox
, title = "Welcome to Self-Review, FirstName!"
, content = Html.text "This is where the content goes!"
, buttonLabel = "Continue"
}
, { icon = fancyIcon
, title = "Here are the steps we’ll take:"
, content =
div [ css [ Css.height (Css.px 400) ] ]
[ Html.text "Sometimes the content may change height."
]
, buttonLabel = "Okay, keep going!"
}
, { icon = grayBox
, title = "As you revise, remember:"
, content = Html.text "Sometimes things may change back."
, buttonLabel = "Let's get to it!"
}
]
, height = Css.px 400
, parentMsg = ModalMsg
}
state
grayBox : Html msg
grayBox =
div
[ css
[ Css.backgroundColor Colors.gray45
, Css.height (Css.pct 100)
, Css.width (Css.pct 100)
]
]
[]
{-| -}
fancyIcon : Html msg
fancyIcon =
svg [ viewBox "0 0 100 100", version "1.1" ]
[ g
[ id "Page-1"
, stroke "none"
, strokeWidth "1"
, fill "none"
, fillRule "evenodd"
]
[ g
[ id "tree-3"
, fillRule "nonzero"
]
[ Svg.path
[ d "M44.2554458,76.2957186 C36.1962642,76.2957186 29.6386609,69.7388768 29.6386609,61.6796952 L29.6386609,55.8332857 C29.6386609,54.2174899 30.9468311,52.9100811 32.5618657,52.9100811 C34.1776615,52.9100811 35.4858318,54.2174899 35.4858318,55.8332857 L35.4858318,61.6796952 C35.4858318,66.5156609 39.4194799,70.4493092 44.2554458,70.4493092 C45.8712416,70.4493092 47.1786506,71.7567179 47.1786506,73.3725139 C47.1786506,74.9883097 45.8712416,76.2957186 44.2554458,76.2957186 L44.2554458,76.2957186 Z"
, id "Path"
, fill "#D55F05"
]
[]
, Svg.path
[ d "M61.7946739,70.4493092 L55.9482646,70.4493092 C54.3324686,70.4493092 53.0250599,69.1419004 53.0250599,67.5261044 C53.0250599,65.9103087 54.3324686,64.6028997 55.9482646,64.6028997 L61.7946739,64.6028997 C66.6298784,64.6028997 70.5642881,60.6692516 70.5642881,55.8332857 C70.5642881,54.2174899 71.8716969,52.9100811 73.4874928,52.9100811 C75.1032886,52.9100811 76.4106974,54.2174899 76.4106974,55.8332857 C76.4106974,63.8924673 69.8530942,70.4493092 61.7946739,70.4493092 L61.7946739,70.4493092 Z"
, id "Path"
, fill "#913F02"
]
[]
, Svg.path
[ d "M58.8714693,55.8332857 L58.8714693,95.7256259 L41.3322411,95.7256259 L41.3322411,55.8332857 C41.3322411,54.1961693 42.6175679,52.9100811 44.2554458,52.9100811 L55.9482646,52.9100811 C57.585381,52.9100811 58.8714693,54.1961693 58.8714693,55.8332857 L58.8714693,55.8332857 Z"
, id "Path"
, fill "#D97F4A"
]
[]
, Svg.path
[ d "M58.8714693,55.8332857 L58.8714693,95.7256259 L50.1018553,95.7256259 L50.1018553,52.9100811 L55.9482646,52.9100811 C57.585381,52.9100811 58.8714693,54.1961693 58.8714693,55.8332857 L58.8714693,55.8332857 Z"
, id "Path"
, fill "#D55F05"
]
[]
, Svg.path
[ d "M99.9326344,40.1063075 L99.9326344,40.164939 C98.9975744,50.2206412 90.0916609,58.1716972 79.5090354,58.7564904 L44.2554458,58.7564904 L49.9259604,51.7412561 C49.984592,51.7412561 50.0432236,51.6826243 50.1018553,51.6239928 C55.246208,49.4020832 58.8714693,44.2569686 58.8714693,38.2940576 C58.8714693,32.2725149 55.246208,27.1274003 50.1018553,24.9054908 C48.2888439,24.0876939 46.3014607,23.6780341 44.2554458,23.6780341 L26.7154562,23.6780341 C25.0783398,23.6780341 23.7922517,22.391946 23.7922517,20.7548294 C23.7922517,9.47090917 32.9715254,0.097465538 44.2554458,0.097465538 L67.6410834,0.097465538 C78.5739756,0.097465538 87.5773547,8.94474751 88.1035161,19.7611378 C95.7621755,23.4442691 100.633929,31.5118267 99.9326344,40.1063075 L99.9326344,40.1063075 Z"
, id "Path"
, fill "#9CDD05"
]
[]
, Svg.path
[ d "M99.9326344,40.1063075 L99.9326344,40.164939 C98.9975744,50.2206412 90.0916609,58.1716972 79.5090354,58.7564904 L50.1018553,58.7564904 L50.1018553,51.6239928 C55.246208,49.4020832 58.8714693,44.2569686 58.8714693,38.2940576 C58.8714693,32.2725149 55.246208,27.1274003 50.1018553,24.9054908 L50.1018553,0.097465538 L67.6410834,0.097465538 C78.5739756,0.097465538 87.5773547,8.94474751 88.1035161,19.7611378 C95.7621755,23.4442691 100.633929,31.5118267 99.9326344,40.1063075 L99.9326344,40.1063075 Z"
, id "Path"
, fill "#66BB00"
]
[]
, Svg.path
[ d "M50.1018553,18.7080531 C48.2309737,18.1240213 46.3014607,17.8316247 44.2554458,17.8316247 L20.8690469,17.8316247 C15.1985323,17.8316247 9.93615468,20.0535344 6.07789013,24.1455642 C2.16099382,28.2383552 -0.0220819872,33.6751048 0.211682965,39.4050125 C0.796476291,50.045508 10.5795797,58.7564904 21.8048683,58.7564904 L44.2554458,58.7564904 C46.3014607,58.7564904 48.2309737,58.4640938 50.1018553,57.8793006 C58.5204412,55.3657558 64.7178786,47.5312018 64.7178786,38.2940576 C64.7178786,29.0569135 58.5204412,21.2223595 50.1018553,18.7080531 Z"
, id "Path"
, fill "#C3EA21"
]
[]
, Svg.path
[ d "M64.7178786,38.2940576 C64.7178786,47.5312018 58.5204412,55.3657558 50.1018553,57.8793006 L50.1018553,18.7080531 C58.5204412,21.2223595 64.7178786,29.0569135 64.7178786,38.2940576 L64.7178786,38.2940576 Z"
, id "Path"
, fill "#9CDD05"
]
[]
, Svg.path
[ d "M88.1035161,38.2940576 C88.1035161,39.9083306 86.7945844,41.2172622 85.1803114,41.2172622 C83.5660384,41.2172622 82.2571069,39.9083306 82.2571069,38.2940576 C82.2571069,36.6797847 83.5660384,35.3708529 85.1803114,35.3708529 C86.7945844,35.3708529 88.1035161,36.6797847 88.1035161,38.2940576 L88.1035161,38.2940576 Z"
, id "Path"
, fill "#CD0000"
]
[]
, Svg.path
[ d "M76.4106974,20.7548294 C76.4106974,22.3691024 75.1017658,23.6780341 73.4874928,23.6780341 C71.8732199,23.6780341 70.5642881,22.3691024 70.5642881,20.7548294 C70.5642881,19.1405564 71.8732199,17.8316247 73.4874928,17.8316247 C75.1017658,17.8316247 76.4106974,19.1405564 76.4106974,20.7548294 L76.4106974,20.7548294 Z"
, id "Path"
, fill "#CD0000"
]
[]
, Svg.path
[ d "M53.0250599,38.2940576 C53.0250599,39.931174 51.7389717,41.2172622 50.1018553,41.2172622 C48.4639774,41.2172622 47.1786506,39.931174 47.1786506,38.2940576 C47.1786506,36.6569411 48.4639774,35.3708529 50.1018553,35.3708529 C51.7389717,35.3708529 53.0250599,36.6569411 53.0250599,38.2940576 Z"
, id "Path"
, fill "#FF637B"
]
[]
, Svg.path
[ d "M76.4106974,44.1404669 C76.4106974,45.7547399 75.1017658,47.0636717 73.4874928,47.0636717 C71.8732199,47.0636717 70.5642881,45.7547399 70.5642881,44.1404669 C70.5642881,42.5261939 71.8732199,41.2172622 73.4874928,41.2172622 C75.1017658,41.2172622 76.4106974,42.5261939 76.4106974,44.1404669 L76.4106974,44.1404669 Z"
, id "Path"
, fill "#CD0000"
]
[]
, Svg.path
[ d "M41.3322411,44.1404669 C41.3322411,45.7547399 40.0233093,47.0636717 38.4090364,47.0636717 C36.794002,47.0636717 35.4858318,45.7547399 35.4858318,44.1404669 C35.4858318,42.5261939 36.794002,41.2172622 38.4090364,41.2172622 C40.0233093,41.2172622 41.3322411,42.5261939 41.3322411,44.1404669 Z"
, id "Path"
, fill "#FF637B"
]
[]
, Svg.path
[ d "M23.7922517,44.1404669 C23.7922517,45.7547399 22.4840813,47.0636717 20.8690469,47.0636717 C19.2547739,47.0636717 17.9458422,45.7547399 17.9458422,44.1404669 C17.9458422,42.5261939 19.2547739,41.2172622 20.8690469,41.2172622 C22.4840813,41.2172622 23.7922517,42.5261939 23.7922517,44.1404669 Z"
, id "Path"
, fill "#FF637B"
]
[]
, Svg.path
[ d "M64.7178786,14.9084201 C64.7178786,16.5226931 63.4089469,17.8316247 61.7946739,17.8316247 C60.1796395,17.8316247 58.8714693,16.5226931 58.8714693,14.9084201 C58.8714693,13.2941471 60.1796395,11.9852154 61.7946739,11.9852154 C63.4089469,11.9852154 64.7178786,13.2941471 64.7178786,14.9084201 L64.7178786,14.9084201 Z"
, id "Path"
, fill "#CD0000"
]
[]
, Svg.path
[ d "M29.6386609,32.4476482 C29.6386609,34.0619211 28.3304908,35.3708529 26.7154562,35.3708529 C25.1011832,35.3708529 23.7922517,34.0619211 23.7922517,32.4476482 C23.7922517,30.8333752 25.1011832,29.5244436 26.7154562,29.5244436 C28.3304908,29.5244436 29.6386609,30.8333752 29.6386609,32.4476482 Z"
, id "Path"
, fill "#FF637B"
]
[]
, Svg.path
[ d "M50.1018553,41.2172622 L50.1018553,35.3708529 C51.7389717,35.3708529 53.0250599,36.6569411 53.0250599,38.2940576 C53.0250599,39.931174 51.7389717,41.2172622 50.1018553,41.2172622 Z"
, id "Path"
, fill "#FF001E"
]
[]
, Svg.path
[ d "M76.4106974,96.9530825 C76.4106974,98.5901989 75.1246092,99.8762872 73.4874928,99.8762872 L26.7154562,99.8762872 C25.0783398,99.8762872 23.7922517,98.5901989 23.7922517,96.9530825 C23.7922517,95.3159659 25.0783398,94.0298778 26.7154562,94.0298778 L73.4874928,94.0298778 C75.1246092,94.0298778 76.4106974,95.3159659 76.4106974,96.9530825 L76.4106974,96.9530825 Z"
, id "Path"
, fill "#C3EA21"
]
[]
, Svg.path
[ d "M76.4106974,96.9530825 C76.4106974,98.5901989 75.1246092,99.8762872 73.4874928,99.8762872 L50.1018553,99.8762872 L50.1018553,94.0298778 L73.4874928,94.0298778 C75.1246092,94.0298778 76.4106974,95.3159659 76.4106974,96.9530825 L76.4106974,96.9530825 Z"
, id "Path"
, fill "#9CDD05"
]
[]
]
]
]
|> fromUnstyled
Reference in New Issue View Git Blame Copy Permalink