NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-09-21 04:07:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

Allow type selection for clickable text customizable example

Browse Source
This commit is contained in:
Tessa Kelly 2024-02-12 11:16:16 -07:00
parent 877fc211b4
commit c3277bb523
1 changed files with 56 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
component-catalog/src/Examples/ClickableText.elm
View File

@ -77,6 +77,12 @@ type State
init : State
init =
Control.record Settings
|> Control.field "type"
(Control.choice
[ ( "button", Control.value Button )
, ( "link", Control.value Link )
]
)
|> Control.field "label" (Control.string "Clickable Text")
|> Control.field ""
(Control.list
@ -89,12 +95,12 @@ init =
)
|> ControlExtra.listItems "State & Type"
(Control.list
|> ControlExtra.optionalBoolListItem "disabled"
( "ClickableText.disabled True", ClickableText.disabled True )
|> ControlExtra.optionalBoolListItem "submit (button only)"
( "ClickableText.submit", ClickableText.submit )
|> ControlExtra.optionalBoolListItem "opensModal (button only)"
( "ClickableText.opensModal", ClickableText.opensModal )
|> ControlExtra.optionalBoolListItem "disabled"
( "ClickableText.disabled True", ClickableText.disabled True )
)
|> ControlExtra.listItems "CSS & Extra style options"
(Control.list
@ -124,11 +130,17 @@ init =
type alias Settings msg =
{ label : String
{ type_ : Type
, label : String
, attributes : List ( String, ClickableText.Attribute msg )
}
type Type
= Button
| Link
{-| -}
type Msg
= SetState (Control (Settings Msg))
@ -162,25 +174,43 @@ viewExamples ellieLinkConfig (State control) =
, version = version
, update = SetState
, settings = control
, mainType = Just "RootHtml.Html msg"
, extraCode = []
, mainType = Just "RootHtml.Html Msg"
, extraCode =
[ Code.newlines
, Code.unionType "Msg" [ "DoAThing" ]
]
, renderExample = Code.unstyledView
, toExampleCode =
\{ label, attributes } ->
let
toCode fName =
toCode fName extraAttrs =
Code.fromModule moduleName fName
++ " "
++ Code.string label
++ Code.listMultiline (List.map Tuple.first attributes) 1
++ Code.listMultiline
(extraAttrs ++ List.map Tuple.first attributes)
1
in
[ { sectionName = "Button"
, code = toCode "button"
}
, { sectionName = "Link"
, code = toCode "link"
}
]
case settings.type_ of
Button ->
[ { sectionName = "Button"
, code =
toCode "button"
[ Code.fromModule moduleName "onClick "
++ "DoAThing"
]
}
]
Link ->
[ { sectionName = "Link"
, code =
toCode "link"
[ Code.fromModule moduleName "href "
++ Code.string "/"
]
}
]
}
, Heading.h2
[ Heading.plaintext "Customizable Example"
@ -194,10 +224,18 @@ viewExamples ellieLinkConfig (State control) =
, Css.minHeight (Css.px 150)
]
]
[ ClickableText.button settings.label
(ClickableText.onClick (ShowItWorked moduleName "customizable example")
:: List.map Tuple.second settings.attributes
)
[ case settings.type_ of
Button ->
ClickableText.button settings.label
(ClickableText.onClick (ShowItWorked moduleName "customizable example")
:: List.map Tuple.second settings.attributes
)
Link ->
ClickableText.link settings.label
(ClickableText.href "/"
:: List.map Tuple.second settings.attributes
)
]
, Heading.h2
[ Heading.plaintext "Set Sizes Examples"