NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-24 08:53:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Include code example

Browse Source
This commit is contained in:
Tessa Kelly 2021-11-04 11:56:59 -07:00
parent b0e9be0aaf
commit be8f033605
1 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
styleguide-app/Examples/Select.elm
View File

@ -12,7 +12,7 @@ import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Example exposing (Example)
import Html.Styled
import Html.Styled.Attributes
import Html.Styled.Attributes exposing (css)
import KeyboardSupport exposing (Direction(..), Key(..))
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Select.V8 as Select exposing (Choice)
@ -30,12 +30,33 @@ example =
, keyboardSupport = []
, view =
\state ->
let
label =
Control.currentValue state.label
( attributesCode, attributes ) =
List.unzip (Control.currentValue state.attributes)
in
[ Control.view UpdateLabel state.label
|> Html.Styled.fromUnstyled
, Control.view UpdateAttributes state.attributes
|> Html.Styled.fromUnstyled
, Select.view (Control.currentValue state.label)
(Control.currentValue state.attributes)
, Html.Styled.code
[ css
[ Css.display Css.block
, Css.margin2 (Css.px 20) Css.zero
, Css.whiteSpace Css.preWrap
]
]
[ Html.Styled.text <|
"Select.view \""
++ label
++ "\""
++ "\n [ "
++ String.join "\n , " attributesCode
++ "\n ] "
]
, Select.view label attributes
|> Html.Styled.map ConsoleLog
]
}
@ -57,39 +78,73 @@ init =
type alias Settings =
List (Select.Attribute String)
List ( String, Select.Attribute String )
initControls : Control Settings
initControls =
ControlExtra.list
|> ControlExtra.listItem "choices"
(Control.map (Select.choices identity) initChoices)
(Control.map
(\( code, choices ) ->
( "Select.choices identity" ++ code
, Select.choices identity choices
)
)
initChoices
)
|> ControlExtra.optionalListItem "defaultDisplayText"
(Control.map Select.defaultDisplayText <|
Control.string "Select a tasty tortilla based treat!"
(Control.map
(\str ->
( "Select.defaultDisplayText \"" ++ str ++ "\""
, Select.defaultDisplayText str
)
)
(Control.string "Select a tasty tortilla based treat!")
)
|> ControlExtra.listItem "errorIf"
(Control.map
(\bool ->
( "Select.errorIf " ++ Debug.toString bool
, Select.errorIf bool
)
)
(Control.bool False)
)
|> ControlExtra.optionalListItem "errorIf"
(Control.map Select.errorIf <| Control.bool True)
|> ControlExtra.optionalListItem "errorMessage"
(Control.map (Just >> Select.errorMessage) <|
Control.string "The right item must be selected."
(Control.map
(\str ->
( "Select.errorMessage (Just \"" ++ str ++ "\")"
, Select.errorMessage (Just str)
)
)
(Control.string "The right item must be selected.")
)
initChoices : Control (List (Choice String))
initChoices : Control ( String, List (Choice String) )
initChoices =
Control.choice
[ ( "Short choices"
, [ { label = "Tacos", value = "tacos" }
, { label = "Burritos", value = "burritos" }
, { label = "Enchiladas", value = "enchiladas" }
]
, ( """
[ { label = "Tacos", value = "tacos" }
, { label = "Burritos", value = "burritos" }
, { label = "Enchiladas", value = "enchiladas" }
]"""
, [ { label = "Tacos", value = "tacos" }
, { label = "Burritos", value = "burritos" }
, { label = "Enchiladas", value = "enchiladas" }
]
)
|> Control.value
)
, ( "Overflowing text choices"
, [ { label = "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that? My mistress' eyes are nothing like the sun. Coral be far more red than her lips red.", value = "design-coastlines" }
]
, ( """
[ { label = "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that? My mistress' eyes are nothing like the sun. Coral be far more red than her lips red.", value = "design-coastlines" }
]"""
, [ { label = "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that? My mistress' eyes are nothing like the sun. Coral be far more red than her lips red.", value = "design-coastlines" }
]
)
|> Control.value
)
]