NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-03 03:46:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into bat/menu-example-code

Browse Source
This commit is contained in:
Tessa Kelly 2022-03-28 14:19:21 -07:00
commit d692b93d90
17 changed files with 395 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Nri/Ui/SlideModal/V2.elm
View File

@ -4,7 +4,7 @@ module Nri.Ui.SlideModal.V2 exposing
, view
)
{-|
{-| DEPRECATED -- do not use! The next major version of noredink-ui will remove this component.
@docs Config, Panel
@docs State, closed, open

4
styleguide-app/CommonControls.elm
View File

@ -3,7 +3,7 @@ module CommonControls exposing
, choice
, icon, iconNotCheckedByDefault, uiIcon
, content
, romeoAndJulietQuotation, httpError
, httpError
, disabledListItem, premiumDisplay
)
@ -17,7 +17,7 @@ module CommonControls exposing
### Content
@docs content
@docs romeoAndJulietQuotation, httpError
@docs httpError
-}

18
styleguide-app/Debug/Control/Extra.elm
View File

@ -2,6 +2,7 @@ module Debug.Control.Extra exposing
( float, int
, list, listItem, optionalListItem, optionalListItemDefaultChecked
, optionalBoolListItem, optionalBoolListItemDefaultTrue
, bool
)
{-|
@ -9,6 +10,7 @@ module Debug.Control.Extra exposing
@docs float, int
@docs list, listItem, optionalListItem, optionalListItemDefaultChecked
@docs optionalBoolListItem, optionalBoolListItemDefaultTrue
@docs bool
-}
@ -104,3 +106,19 @@ optionalBoolListItemDefaultTrue name f accumulator =
(Control.bool True)
)
(Control.map (++) accumulator)
{-| -}
bool : Bool -> Control ( String, Bool )
bool default =
Control.map
(\val ->
( if val then
"True"
else
"False"
, val
)
)
(Control.bool default)

91
styleguide-app/Debug/Control/View.elm
View File

@ -3,15 +3,20 @@ module Debug.Control.View exposing (codeFromList, codeFromListWithIndentLevel, v
import Css exposing (..)
import Css.Media exposing (withMedia)
import Debug.Control as Control exposing (Control)
import Example
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.ClickableText.V3 as ClickableText
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.MediaQuery.V1 exposing (mobile)
import Url.Builder
{-| -}
view :
{ update : Control a -> msg
{ name : String
, version : Int
, update : Control a -> msg
, settings : Control a
, toExampleCode : a -> List { sectionName : String, code : String }
}
@ -31,32 +36,98 @@ view config =
]
[ viewSection "Settings" <|
[ fromUnstyled (Control.view config.update config.settings) ]
, viewExampleCode (config.toExampleCode value)
, viewExampleCode config (config.toExampleCode value)
]
viewExampleCode : List { sectionName : String, code : String } -> Html msg
viewExampleCode values =
viewExampleCode :
{ component | name : String, version : Int }
-> List { sectionName : String, code : String }
-> Html msg
viewExampleCode component values =
viewSection "Generated Code" <|
List.concatMap
(\{ sectionName, code } ->
[ details []
(\example ->
[ details
[]
[ summary []
[ Heading.h4
[ Heading.css [ Css.display Css.inline ]
]
[ text sectionName ]
[ text example.sectionName ]
]
, Html.Styled.code
[ css [ whiteSpace preWrap ]
, ClickableText.link ("View " ++ example.sectionName ++ " example on Ellie")
[ ClickableText.linkExternal (generateEllieLink component example)
, ClickableText.small
]
[ text code ]
, code
[ css
[ display block
, whiteSpace preWrap
, Css.marginTop (px 8)
]
]
[ text example.code ]
]
]
)
values
generateEllieLink : { component | name : String, version : Int } -> { sectionName : String, code : String } -> String
generateEllieLink component { sectionName, code } =
Url.Builder.crossOrigin "https://ellie-app.com/a/example/v1"
[]
[ Url.Builder.string "title" (component.name ++ " | " ++ sectionName)
, Url.Builder.string "elmcode" (generateElmExampleModule component code)
, Url.Builder.string "htmlcode" ellieHtmlSetup
, -- At some point, a system of some kind will be required to keep these values
-- in line with the allowed elm json values.
-- I think in most cases, the API to use a noredink-ui component should require _only_ the following
-- packages. Feel free to add packages if it seems necessary!
Url.Builder.string "packages" "elm/core@1.0.5"
, Url.Builder.string "packages" "elm/html@1.0.0"
, Url.Builder.string "packages" "rtfeldman/elm-css@17.0.5"
, Url.Builder.string "packages" "NoRedInk/noredink-ui@15.8.1"
, Url.Builder.string "packages" "pablohirafuji/elm-markdown@2.0.5"
, Url.Builder.string "elmversion" "0.19.1"
]
generateElmExampleModule : { component | name : String, version : Int } -> String -> String
generateElmExampleModule component code =
[ "module Main exposing (main)"
, ""
, "import Css exposing (Style)"
, "import Html as RootHtml"
, "import Html.Styled exposing (..)"
, "import Nri.Ui.Colors.V1 as Colors"
, "import Nri.Ui.UiIcon.V1 as UiIcon"
, "import " ++ Example.fullName component ++ " as " ++ component.name
, ""
, "main : RootHtml.Html msg"
, "main ="
, " " ++ code
, " |> toUnstyled"
]
|> String.join "\n"
|> String.replace "\t" " "
ellieHtmlSetup : String
ellieHtmlSetup =
"""
<html> <head></head>
<body>
<main></main>
<script>
var app = Elm.Main.init({ node: document.querySelector('main') })
</script>
</body>
</html>
"""
viewSection : String -> List (Html msg) -> Html msg
viewSection name children =
section [ css [ flex (int 1) ] ]

4
styleguide-app/Example.elm
View File

@ -1,4 +1,4 @@
module Example exposing (Example, preview, view, wrapMsg, wrapState)
module Example exposing (Example, fullName, preview, view, wrapMsg, wrapState)
import Category exposing (Category)
import Css exposing (..)
@ -31,7 +31,7 @@ type alias Example state msg =
}
fullName : Example state msg -> String
fullName : { example | version : Int, name : String } -> String
fullName example =
"Nri.Ui." ++ example.name ++ ".V" ++ String.fromInt example.version

22
styleguide-app/Examples.elm
View File

@ -27,7 +27,6 @@ import Examples.SegmentedControl as SegmentedControl
import Examples.Select as Select
import Examples.Shadows as Shadows
import Examples.SideNav as SideNav
import Examples.SlideModal as SlideModal
import Examples.SortableTable as SortableTable
import Examples.Sprite as Sprite
import Examples.Svg as Svg
@ -535,25 +534,6 @@ all =
SideNavState childState ->
Just childState
_ ->
Nothing
)
, SlideModal.example
|> Example.wrapMsg SlideModalMsg
(\msg ->
case msg of
SlideModalMsg childMsg ->
Just childMsg
_ ->
Nothing
)
|> Example.wrapState SlideModalState
(\msg ->
case msg of
SlideModalState childState ->
Just childState
_ ->
Nothing
)
@ -815,7 +795,6 @@ type State
| SelectState Select.State
| ShadowsState Shadows.State
| SideNavState SideNav.State
| SlideModalState SlideModal.State
| SortableTableState SortableTable.State
| SpriteState Sprite.State
| SvgState Svg.State
@ -857,7 +836,6 @@ type Msg
| SelectMsg Select.Msg
| ShadowsMsg Shadows.Msg
| SideNavMsg SideNav.Msg
| SlideModalMsg SlideModal.Msg
| SortableTableMsg SortableTable.Msg
| SpriteMsg Sprite.Msg
| SvgMsg Svg.Msg

18
styleguide-app/Examples/Balloon.elm
View File

@ -15,11 +15,21 @@ import Html.Styled exposing (Html, fromUnstyled, text)
import Nri.Ui.Balloon.V1 as Balloon
moduleName : String
moduleName =
"Balloon"
version : Int
version =
1
{-| -}
example : Example State Msg
example =
{ name = "Balloon"
, version = 1
{ name = moduleName
, version = version
, categories = [ Messaging ]
, keyboardSupport = []
, state = init
@ -132,7 +142,9 @@ view state =
in
[ Control.view SetCopy state.copy |> fromUnstyled
, ControlView.view
{ update = SetAttributes
{ name = moduleName
, version = version
, update = SetAttributes
, settings = state.attributes
, toExampleCode =
\attrs ->

37
styleguide-app/Examples/Button.elm
View File

@ -22,11 +22,16 @@ import Nri.Ui.UiIcon.V1 as UiIcon
import Set exposing (Set)
version : Int
version =
10
{-| -}
example : Example State Msg
example =
{ name = "Button"
, version = 10
{ name = moduleName
, version = version
, state = init
, update = update
, subscriptions = \_ -> Sub.none
@ -60,6 +65,11 @@ example =
}
moduleName : String
moduleName =
"Button"
{-| -}
type alias State =
{ debugControlsState : Control Model
@ -137,9 +147,9 @@ initDebugControls =
|> Control.field "label" (Control.string "Label")
|> Control.field "attributes"
(ControlExtra.list
|> CommonControls.icon "Button" Button.icon
|> CommonControls.icon moduleName Button.icon
|> ControlExtra.optionalListItem "width"
(CommonControls.choice "Button"
(CommonControls.choice moduleName
[ ( "exactWidth 120", Button.exactWidth 120 )
, ( "exactWidth 70", Button.exactWidth 70 )
, ( "boundedWidth 100 180", Button.boundedWidth { min = 100, max = 180 } )
@ -148,7 +158,7 @@ initDebugControls =
]
)
|> ControlExtra.optionalListItem "state (button only)"
(CommonControls.choice "Button"
(CommonControls.choice moduleName
[ ( "enabled", Button.enabled )
, ( "disabled", Button.disabled )
, ( "error", Button.error )
@ -160,19 +170,19 @@ initDebugControls =
|> ControlExtra.optionalBoolListItem "hideIconForMobile"
( "Button.hideIconForMobile", Button.hideIconForMobile )
|> CommonControls.css
{ moduleName = "Button"
{ moduleName = moduleName
, use = Button.css
}
|> CommonControls.mobileCss
{ moduleName = "Button"
{ moduleName = moduleName
, use = Button.mobileCss
}
|> CommonControls.quizEngineMobileCss
{ moduleName = "Button"
{ moduleName = moduleName
, use = Button.quizEngineMobileCss
}
|> CommonControls.notMobileCss
{ moduleName = "Button"
{ moduleName = moduleName
, use = Button.notMobileCss
}
)
@ -185,17 +195,20 @@ viewButtonExamples state =
Control.currentValue state.debugControlsState
in
[ ControlView.view
{ update = SetDebugControlsState
{ name = moduleName
, version = version
, update = SetDebugControlsState
, settings = state.debugControlsState
, toExampleCode =
\{ label, attributes } ->
let
toCode fName =
"Button."
moduleName
++ "."
++ fName
++ " \""
++ label
++ "\"\n\t"
++ "\"\t"
++ ControlView.codeFromList attributes
in
[ { sectionName = "Button"

21
styleguide-app/Examples/ClickableSvg.elm
View File

@ -24,11 +24,16 @@ import Nri.Ui.Tooltip.V2 as Tooltip
import Nri.Ui.UiIcon.V1 as UiIcon
version : Int
version =
2
{-| -}
example : Example State Msg
example =
{ name = "ClickableSvg"
, version = 2
{ name = moduleName
, version = version
, categories = [ Buttons, Icons ]
, keyboardSupport = []
, state = init
@ -54,13 +59,16 @@ example =
, view =
\state ->
[ ControlView.view
{ update = SetControls
{ name = moduleName
, version = version
, update = SetControls
, settings = state.settings
, toExampleCode =
\{ label, icon, attributes } ->
let
toCode fName =
"ClickableSvg."
moduleName
++ "."
++ fName
++ " \""
++ label
@ -119,6 +127,11 @@ Tooltip.view
}
moduleName : String
moduleName =
"ClickableSvg"
viewExampleTable : Settings Msg -> Html Msg
viewExampleTable { label, icon, attributes } =
let

32
styleguide-app/Examples/ClickableText.elm
View File

@ -21,11 +21,16 @@ import Nri.Ui.Text.V6 as Text
import Nri.Ui.UiIcon.V1 as UiIcon
version : Int
version =
3
{-| -}
example : Example State Msg
example =
{ name = "ClickableText"
, version = 3
{ name = moduleName
, version = version
, state = init
, update = update
, subscriptions = \_ -> Sub.none
@ -52,6 +57,11 @@ example =
}
moduleName : String
moduleName =
"ClickableText"
{-| -}
type State
= State (Control (Settings Msg))
@ -64,25 +74,25 @@ init =
|> Control.field "label" (Control.string "Clickable Text")
|> Control.field "attributes"
(ControlExtra.list
|> CommonControls.icon "ClickableText" ClickableText.icon
|> CommonControls.icon moduleName ClickableText.icon
|> ControlExtra.optionalBoolListItem "hideIconForMobile"
( "ClickableText.hideIconForMobile", ClickableText.hideIconForMobile )
|> ControlExtra.optionalBoolListItem "hideTextForMobile"
( "ClickableText.hideTextForMobile", ClickableText.hideTextForMobile )
|> CommonControls.css
{ moduleName = "ClickableText"
{ moduleName = moduleName
, use = ClickableText.css
}
|> CommonControls.mobileCss
{ moduleName = "ClickableText"
{ moduleName = moduleName
, use = ClickableText.mobileCss
}
|> CommonControls.quizEngineMobileCss
{ moduleName = "ClickableText"
{ moduleName = moduleName
, use = ClickableText.quizEngineMobileCss
}
|> CommonControls.notMobileCss
{ moduleName = "ClickableText"
{ moduleName = moduleName
, use = ClickableText.notMobileCss
}
)
@ -126,7 +136,9 @@ viewExamples (State control) =
List.map Tuple.second settings.attributes
in
[ ControlView.view
{ update = SetState
{ name = moduleName
, version = version
, update = SetState
, settings = control
, toExampleCode =
\{ label, attributes } ->
@ -156,7 +168,7 @@ viewExamples (State control) =
, text " and clickable buttons: "
, ClickableText.button settings.label
(ClickableText.small
:: ClickableText.onClick (ShowItWorked "ClickableText" "in-line button")
:: ClickableText.onClick (ShowItWorked moduleName "in-line button")
:: clickableAttributes
)
, text " to show up in-line."
@ -192,7 +204,7 @@ buttons settings =
(\( size, sizeLabel ) ->
ClickableText.button settings.label
(size
:: ClickableText.onClick (ShowItWorked "ClickableText" sizeLabel)
:: ClickableText.onClick (ShowItWorked moduleName sizeLabel)
:: List.map Tuple.second settings.attributes
)
|> exampleCell

120
styleguide-app/Examples/Container.elm
View File

@ -7,25 +7,33 @@ module Examples.Container exposing (Msg, State, example)
-}
import Category exposing (Category(..))
import CommonControls exposing (romeoAndJulietQuotation)
import CommonControls
import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import Example exposing (Example)
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Container.V2 as Container
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.UiIcon.V1 as UiIcon
moduleName : String
moduleName =
"Container"
version : Int
version =
2
{-| -}
example : Example State Msg
example =
{ name = "Container"
, version = 2
{ name = moduleName
, version = version
, categories = [ Layout ]
, keyboardSupport = []
, state = init
@ -46,10 +54,39 @@ example =
\state ->
let
attributes =
Control.currentValue state.control
List.map Tuple.second (Control.currentValue state.control)
in
[ Control.view UpdateControl state.control
|> Html.fromUnstyled
[ ControlView.view
{ name = moduleName
, version = version
, update = UpdateControl
, settings = state.control
, toExampleCode =
\settings ->
let
stringAttributes =
List.map Tuple.first settings
in
[ { sectionName = "Default Container"
, code = viewExampleCode stringAttributes
}
, { sectionName = "Gray Container"
, code = viewExampleCode ("Container.gray" :: stringAttributes)
}
, { sectionName = "Pillow Container"
, code = viewExampleCode ("Container.pillow" :: stringAttributes)
}
, { sectionName = "Buttony Container"
, code = viewExampleCode ("Container.buttony" :: stringAttributes)
}
, { sectionName = "Disabled Container"
, code = viewExampleCode ("Container.disabled" :: stringAttributes)
}
, { sectionName = "Invalid Container"
, code = viewExampleCode ("Container.invalid" :: stringAttributes)
}
]
}
, viewExample
{ name = "Default Container"
, description = "Your go-to container."
@ -97,9 +134,17 @@ viewExample { name, description } attributes =
]
viewExampleCode : List String -> String
viewExampleCode attributes =
moduleName
++ ".view\n [ "
++ String.join "\n , " attributes
++ "\n ]"
{-| -}
type alias State =
{ control : Control (List (Container.Attribute Msg))
{ control : Control (List ( String, Container.Attribute Msg ))
}
@ -109,57 +154,36 @@ init =
{ control =
ControlExtra.list
|> ControlExtra.optionalListItem "paddingPx" controlPaddingPx
|> ControlExtra.optionalListItem "css" controlCss
|> CommonControls.css { moduleName = "Container", use = Container.css }
|> ControlExtra.listItem "content" controlContent
}
controlPaddingPx : Control (Container.Attribute msg)
controlPaddingPx : Control ( String, Container.Attribute msg )
controlPaddingPx =
Control.map Container.paddingPx (ControlExtra.float 20)
controlCss : Control (Container.Attribute msg)
controlCss =
Control.map Container.css
(Control.value
[ Css.minHeight (Css.px 100)
, Css.hover [ Css.backgroundColor Colors.glacier ]
]
Control.map
(\val ->
( "Container.paddingPx " ++ String.fromFloat val
, Container.paddingPx val
)
)
(ControlExtra.float 20)
controlContent : Control (Container.Attribute msg)
controlContent : Control ( String, Container.Attribute msg )
controlContent =
Control.choice
[ ( "plain text (short)"
, Control.string "Content, content..."
|> Control.map Container.plaintext
)
, ( "plain text (long)"
, Control.stringTextarea romeoAndJulietQuotation
|> Control.map Container.plaintext
)
, ( "markdown"
, Control.string romeoAndJulietQuotation
|> Control.map Container.markdown
)
, ( "HTML (short)"
, Control.value
(Container.html
[ UiIcon.footsteps
|> Svg.withHeight (Css.px 200)
|> Svg.withColor Colors.grassland
|> Svg.toHtml
]
)
)
]
CommonControls.content
{ moduleName = "Container"
, plaintext = Container.plaintext
, markdown = Just Container.markdown
, html = Container.html
, httpError = Nothing
}
{-| -}
type Msg
= UpdateControl (Control (List (Container.Attribute Msg)))
= UpdateControl (Control (List ( String, Container.Attribute Msg )))
{-| -}

118
styleguide-app/Examples/DisclosureIndicator.elm
View File

@ -7,27 +7,32 @@ module Examples.DisclosureIndicator exposing (Msg, State, example)
-}
import Category exposing (Category(..))
import Css
import Css exposing (Style)
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import Example exposing (Example)
import Html.Styled as Html
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Button.V10 as Button
import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
import Nri.Ui.Text.V6 as Text
{-| -}
type alias State =
{ largeState : Bool
, mediumState : Bool
}
moduleName : String
moduleName =
"DisclosureIndicator"
version : Int
version =
2
{-| -}
example : Example State Msg
example =
{ name = "DisclosureIndicator"
, version = 2
{ name = moduleName
, version = version
, categories = [ Icons ]
, keyboardSupport = []
, state = init
@ -41,45 +46,96 @@ example =
]
, view =
\state ->
let
attributes =
Control.currentValue state.settings
in
[ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
, Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ]
[ Button.button "Toggle large indicator"
[ Button.onClick ToggleLarge, Button.small, Button.secondary ]
, Button.button "Toggle medium indicator"
[ Button.onClick ToggleMedium, Button.small, Button.secondary ]
, ControlView.view
{ name = moduleName
, version = version
, update = UpdateSettings
, settings = state.settings
, toExampleCode =
\settings ->
let
toCode viewName =
moduleName
++ "."
++ viewName
++ " "
++ Tuple.first settings.css
++ " "
++ Tuple.first settings.isOpen
in
[ { sectionName = "Large"
, code = toCode "large"
}
, { sectionName = "medium"
, code = toCode "medium"
}
]
}
, Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
[ DisclosureIndicator.large
(Tuple.second attributes.css)
(Tuple.second attributes.isOpen)
, Html.text "large is a 17px caret icon."
]
, Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
[ DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState
, Html.text "I'm a 17px caret icon."
]
, Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
[ DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState
, Html.text "I'm a 15px caret icon."
[ DisclosureIndicator.medium
(Tuple.second attributes.css)
(Tuple.second attributes.isOpen)
, Html.text "medium is a 15px caret icon."
]
]
}
{-| -}
init : State
init =
{ largeState = False
, mediumState = False
type alias State =
{ settings : Control Settings
}
{-| -}
init : State
init =
{ settings = initSettings
}
type alias Settings =
{ css : ( String, List Style )
, isOpen : ( String, Bool )
}
initSettings : Control Settings
initSettings =
Control.record Settings
|> Control.field "css"
(Control.choice
[ ( "[ Css.marginRight (Css.px 8) ]"
, Control.value
( "[ Css.marginRight (Css.px 8) ]"
, [ Css.marginRight (Css.px 8) ]
)
)
, ( "[]", Control.value ( "[]", [] ) )
]
)
|> Control.field "isOpen" (ControlExtra.bool False)
{-| -}
type Msg
= ToggleLarge
| ToggleMedium
= UpdateSettings (Control Settings)
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
ToggleLarge ->
( { state | largeState = not state.largeState }, Cmd.none )
ToggleMedium ->
( { state | mediumState = not state.mediumState }, Cmd.none )
UpdateSettings settings ->
( { state | settings = settings }, Cmd.none )

4
styleguide-app/Examples/Menu.elm
View File

@ -80,7 +80,9 @@ view state =
False
in
[ ControlView.view
{ update = UpdateControls
{ name = moduleName
, version = version
, update = UpdateControls
, settings = state.settings
, toExampleCode =
\settings ->

26
styleguide-app/Examples/Message.elm
View File

@ -14,6 +14,11 @@ import Nri.Ui.Message.V3 as Message
import ViewHelpers exposing (viewExamples)
version : Int
version =
3
type alias State =
{ show : Bool
, control : Control (List ( String, Message.Attribute Msg ))
@ -28,7 +33,7 @@ init =
|> ControlExtra.optionalListItem "theme" controlTheme
|> ControlExtra.listItem "content"
(CommonControls.content
{ moduleName = "Message"
{ moduleName = moduleName
, plaintext = Message.plaintext
, markdown = Just Message.markdown
, html = Message.html
@ -42,24 +47,29 @@ init =
|> ControlExtra.optionalBoolListItem "hideIconForMobile"
( "Message.hideIconForMobile", Message.hideIconForMobile )
|> CommonControls.css
{ moduleName = "Message"
{ moduleName = moduleName
, use = Message.css
}
|> CommonControls.mobileCss
{ moduleName = "Message"
{ moduleName = moduleName
, use = Message.mobileCss
}
|> CommonControls.quizEngineMobileCss
{ moduleName = "Message"
{ moduleName = moduleName
, use = Message.quizEngineMobileCss
}
|> CommonControls.notMobileCss
{ moduleName = "Message"
{ moduleName = moduleName
, use = Message.notMobileCss
}
}
moduleName : String
moduleName =
"Message"
controlTheme : Control ( String, Message.Attribute msg )
controlTheme =
Control.choice
@ -117,7 +127,7 @@ update msg state =
example : Example State Msg
example =
{ name = "Message"
, version = 3
, version = version
, categories = [ Messaging ]
, keyboardSupport = []
, state = init
@ -142,7 +152,9 @@ example =
text "Nice! The messages were dismissed. 👍"
in
[ ControlView.view
{ update = UpdateControl
{ name = moduleName
, version = version
, update = UpdateControl
, settings = state.control
, toExampleCode =
\settings ->

20
styleguide-app/Examples/SideNav.elm
View File

@ -19,11 +19,16 @@ import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.SideNav.V2 as SideNav
version : Int
version =
2
{-| -}
example : Example State Msg
example =
{ name = "SideNav"
, version = 2
{ name = moduleName
, version = version
, state = init
, update = update
, subscriptions = \_ -> Sub.none
@ -34,6 +39,11 @@ example =
}
moduleName : String
moduleName =
"SideNav"
viewPreview : Html msg
viewPreview =
div
@ -72,14 +82,16 @@ view state =
Control.currentValue state.settings
in
[ ControlView.view
{ update = SetControls
{ name = moduleName
, version = version
, update = SetControls
, settings = state.settings
, toExampleCode =
\{ entries } ->
[ { sectionName = "View"
, code =
String.join ""
[ "SideNav.view"
[ moduleName ++ ".view"
, "\n\t{ isCurrentRoute = (==) \"" ++ settings.currentRoute ++ "\""
, "\n\t, routeToString = identity"
, "\n\t, onSkipNav = SkipToContent"

244
styleguide-app/Examples/SlideModal.elm
View File

@ -1,244 +0,0 @@
module Examples.SlideModal exposing (Msg, State, example)
{-|
@docs Msg, State, example
-}
import Accessibility.Styled as Html exposing (Html, div)
import Category exposing (Category(..))
import Css
import Example exposing (Example)
import Html.Styled exposing (fromUnstyled)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Button.V10 as Button
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.SlideModal.V2 as SlideModal
import Svg exposing (..)
import Svg.Attributes exposing (..)
{-| -}
type Msg
= ModalMsg SlideModal.State
{-| -}
type alias State =
{ modal : SlideModal.State }
{-| -}
example : Example State Msg
example =
{ name = "SlideModal"
, version = 2
, categories = [ Layout, Messaging ]
, keyboardSupport = []
, state = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = []
, view =
\state ->
[ viewModal state.modal
, Button.button "Launch Modal"
[ Button.onClick (ModalMsg SlideModal.open), Button.small, Button.secondary ]
]
}
{-| -}
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
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

18
styleguide-app/Examples/Tooltip.elm
View File

@ -24,10 +24,15 @@ import Nri.Ui.Tooltip.V2 as Tooltip
import Nri.Ui.UiIcon.V1 as UiIcon
version : Int
version =
2
example : Example State Msg
example =
{ name = "Tooltip"
, version = 2
{ name = moduleName
, version = version
, categories = [ Messaging ]
, keyboardSupport = []
, state = init
@ -63,6 +68,11 @@ example =
}
moduleName : String
moduleName =
"Tooltip"
type alias State =
{ openTooltip : Maybe TooltipType
, staticExampleSettings : Control (List ( String, Tooltip.Attribute Never ))
@ -270,7 +280,9 @@ viewCustomizableExample : Control (List ( String, Tooltip.Attribute Never )) ->
viewCustomizableExample controlSettings =
Html.div []
[ ControlView.view
{ update = SetControl
{ name = moduleName
, version = version
, update = SetControl
, settings = controlSettings
, toExampleCode =
\controls ->