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

Make a compilable code example for Accordion

Browse Source
This commit is contained in:
Tessa Kelly 2022-04-12 17:08:59 -07:00
parent f65530582f
commit 4918939201
17 changed files with 81 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ view :
, version : Int
, update : Control a -> msg
, settings : Control a
, mainType : String
, toExampleCode : a -> List { sectionName : String, code : String }
}
-> Html msg
@ -46,7 +47,7 @@ view config =
viewExampleCode :
(EllieLink.SectionExample -> Html msg)
-> { component | name : String, version : Int }
-> { component | name : String, version : Int, mainType : String }
-> List { sectionName : String, code : String }
-> Html msg
viewExampleCode ellieLink component values =
@ -68,6 +69,7 @@ viewExampleCode ellieLink component values =
{ fullModuleName = Example.fullName component
, name = component.name
, sectionName = example.sectionName
, mainType = component.mainType
, code = example.code
}
, code

4
styleguide-app/EllieLink.elm
View File

@ -16,6 +16,7 @@ type alias SectionExample =
{ name : String
, fullModuleName : String
, sectionName : String
, mainType : String
, code : String
}
@ -76,12 +77,13 @@ generateElmExampleModule config example =
, "import Html.Styled exposing (..)"
, "import Nri.Ui.Colors.V1 as Colors"
, "import Nri.Ui.UiIcon.V1 as UiIcon"
, "import Nri.Ui.Svg.V1 as Svg"
, "import " ++ example.fullModuleName ++ " as " ++ example.name
, ""
, ""
]
++ maybeErrorMessages
++ [ "main : RootHtml.Html msg"
++ [ "main : " ++ example.mainType
, "main ="
, " " ++ example.code
, " |> toUnstyled"

63
styleguide-app/Examples/Accordion.elm
View File

@ -13,6 +13,7 @@ module Examples.Accordion exposing
import Accessibility.Styled as Html exposing (Html)
import Browser.Dom as Dom
import Category exposing (Category(..))
import CommonControls
import Css exposing (..)
import Css.Global
import Debug.Control as Control exposing (Control)
@ -93,13 +94,58 @@ defaultCaret =
{-| -}
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig model =
let
settings_ =
Control.currentValue model.settings
in
[ ControlView.view
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControls
, settings = model.settings
, toExampleCode = \settings -> []
, mainType = "RootHtml.Html String"
, toExampleCode =
\settings ->
[ { sectionName = "Basic example"
, code =
String.join "\n"
[ "Accordion.view"
, " { entries ="
, " [ Accordion.AccordionEntry"
, " { caret = " ++ Tuple.first settings.icon
, " , content = \\_ -> text \"TODO\""
, " , entryClass = \"customizable-example\""
, " , headerContent = text \"TODO\""
, " , headerId = \"customizable-example-header\""
, " , headerLevel = Accordion.H4"
, " , isExpanded = True"
, " , toggle = Nothing"
, " }"
, " []"
, " ]"
, " , -- When using Accordion, be sure to wire up Focus management correctly!"
, " focus = identity"
, " }"
]
}
]
}
, Accordion.view
{ entries =
[ AccordionEntry
{ caret = Tuple.second settings_.icon
, content = \_ -> Html.text "TODO"
, entryClass = "customizable-example"
, headerContent = Html.text "TODO"
, headerId = "customizable-example-header"
, headerLevel = Accordion.H4
, isExpanded = True
, toggle = Nothing
}
[]
]
, focus = Focus
}
, Accordion.view
{ entries =
@ -286,12 +332,25 @@ type alias State =
type alias Settings =
{}
{ icon : ( String, Bool -> Html Msg )
}
initSettings : Control Settings
initSettings =
Control.record Settings
|> Control.field "icon" controlIcon
controlIcon : Control ( String, Bool -> Html Msg )
controlIcon =
Control.map
(\( code, icon ) ->
( "\\_ -> Svg.toHtml " ++ code
, \_ -> Svg.toHtml icon
)
)
CommonControls.uiIcon
type Msg

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

@ -148,6 +148,7 @@ view ellieLinkConfig state =
, version = version
, update = SetAttributes
, settings = state.attributes
, mainType = "RootHtml.Html msg"
, toExampleCode =
\attrs ->
[ { sectionName = "Balloon"

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

@ -201,6 +201,7 @@ viewButtonExamples ellieLinkConfig state =
, version = version
, update = SetDebugControlsState
, settings = state.debugControlsState
, mainType = "RootHtml.Html msg"
, toExampleCode =
\{ label, attributes } ->
let

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

@ -64,6 +64,7 @@ example =
, version = version
, update = SetControls
, settings = state.settings
, mainType = "RootHtml.Html msg"
, toExampleCode =
\{ label, icon, attributes } ->
let

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

@ -142,6 +142,7 @@ viewExamples ellieLinkConfig (State control) =
, version = version
, update = SetState
, settings = control
, mainType = "RootHtml.Html msg"
, toExampleCode =
\{ label, attributes } ->
let

1
styleguide-app/Examples/Confetti.elm
View File

@ -57,6 +57,7 @@ example =
, version = version
, update = UpdateControl
, settings = state.settings
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings -> [ { sectionName = "TODO", code = "TODO" } ]
}

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

@ -62,6 +62,7 @@ example =
, version = version
, update = UpdateControl
, settings = state.control
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings ->
let

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

@ -57,6 +57,7 @@ example =
, version = version
, update = UpdateSettings
, settings = state.settings
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings ->
let

1
styleguide-app/Examples/Heading.elm
View File

@ -63,6 +63,7 @@ example =
, version = version
, update = UpdateControl
, settings = state.control
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings ->
let

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

@ -86,6 +86,7 @@ view ellieLinkConfig state =
, version = version
, update = UpdateControls
, settings = state.settings
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings ->
let

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

@ -157,6 +157,7 @@ example =
, version = version
, update = UpdateControl
, settings = state.control
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings ->
let

1
styleguide-app/Examples/SegmentedControl.elm
View File

@ -69,6 +69,7 @@ example =
, version = version
, update = ChangeOptions
, settings = state.optionsControl
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings ->
[ { sectionName = "view"

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

@ -88,6 +88,7 @@ view ellieLinkConfig state =
, version = version
, update = SetControls
, settings = state.settings
, mainType = "RootHtml.Html msg"
, toExampleCode =
\{ entries } ->
[ { sectionName = "View"

1
styleguide-app/Examples/Text.elm
View File

@ -58,6 +58,7 @@ example =
, version = version
, update = UpdateControl
, settings = state.control
, mainType = "RootHtml.Html msg"
, toExampleCode =
\settings ->
let

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

@ -286,6 +286,7 @@ viewCustomizableExample ellieLinkConfig controlSettings =
, version = version
, update = SetControl
, settings = controlSettings
, mainType = "RootHtml.Html msg"
, toExampleCode =
\controls ->
[ { sectionName = "Example"