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

Merge pull request #902 from NoRedInk/bat/accordion-code

Browse Source 
Add Accordion code example
This commit is contained in:
Tessa 2022-04-18 11:44:19 -07:00 committed by GitHub
commit 301f1bac54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 196 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

6
styleguide-app/EllieLink.elm
View File

@ -16,6 +16,8 @@ type alias SectionExample =
{ name : String
, fullModuleName : String
, sectionName : String
, mainType : String
, extraImports : List String
, code : String
}
@ -76,12 +78,14 @@ 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
, String.join "\n" example.extraImports
, ""
, ""
]
++ maybeErrorMessages
++ [ "main : RootHtml.Html msg"
++ [ "main : " ++ example.mainType
, "main ="
, " " ++ example.code
, " |> toUnstyled"

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

@ -13,8 +13,11 @@ 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)
import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import Html.Styled.Attributes as Attributes exposing (css, src)
@ -23,7 +26,6 @@ import Nri.Ui.Accordion.V3 as Accordion exposing (AccordionEntry(..))
import Nri.Ui.Colors.Extra as ColorsExtra
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Text.V6 as Text
import Nri.Ui.UiIcon.V1 as UiIcon
@ -31,11 +33,21 @@ import Set exposing (Set)
import Task
moduleName : String
moduleName =
"Accordion"
version : Int
version =
3
{-| -}
example : Example State Msg
example =
{ name = "Accordion"
, version = 3
{ name = moduleName
, version = version
, state = init
, update = update
, subscriptions = \_ -> Sub.none
@ -81,17 +93,76 @@ defaultCaret =
{-| -}
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig model =
[ Heading.h3 [] [ Html.text "Accordion.view" ]
let
settings_ =
Control.currentValue model.settings
in
[ ControlView.view
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControls
, settings = model.settings
, mainType = "RootHtml.Html String"
, extraImports = [ "import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator" ]
, toExampleCode =
\settings ->
[ { sectionName = "Partial example"
, code =
String.join "\n"
[ " div [] ["
, " Accordion.view"
, " { entries ="
, " [ Accordion.AccordionEntry"
, " { caret = " ++ Tuple.first settings.icon
, " , content = \\() -> " ++ Tuple.first settings.content
, " , entryClass = \"customizable-example\""
, " , headerContent = " ++ Tuple.first settings.headerContent
, " , 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.styleAccordion"
, " { entryStyles = []"
, " , entryExpandedStyles = []"
, " , entryClosedStyles = []"
, " , headerStyles = []"
, " , headerExpandedStyles = []"
, " , headerClosedStyles = []"
, " , contentStyles = []"
, " }"
, " ]"
]
}
]
}
, Accordion.view
{ entries =
[ AccordionEntry
{ caret = Tuple.second settings_.icon
, content = \() -> Tuple.second settings_.content
, entryClass = "customizable-example"
, headerContent = Tuple.second settings_.headerContent
, headerId = "customizable-example-header"
, headerLevel = Accordion.H4
, isExpanded = Set.member 4 model.expanded
, toggle = Just (Toggle 4)
}
[]
, AccordionEntry
{ caret = defaultCaret
, content = \_ -> Html.text "🍎 There are many kinds of apples! Apples are more genetically diverse than humans. The genetic diversity of apples means that to preserve delicious apple varieties, growers must use grafting rather than seeds. In the apple market, clones have already taken over! 🍏"
, entryClass = "accordion-example"
, headerContent = Html.text "Apples"
, headerContent = Html.text "Apples (has children)"
, headerId = "accordion-entry__1"
, headerLevel = Accordion.H4
, isExpanded = Set.member 1 model
, isExpanded = Set.member 1 model.expanded
, toggle = Just (Toggle 1)
}
[ AccordionEntry
@ -110,7 +181,7 @@ view ellieLinkConfig model =
, headerContent = Html.text "Gala"
, headerId = "accordion-entry__11"
, headerLevel = Accordion.H5
, isExpanded = Set.member 11 model
, isExpanded = Set.member 11 model.expanded
, toggle = Just (Toggle 11)
}
[]
@ -130,7 +201,7 @@ view ellieLinkConfig model =
, headerContent = Html.text "Granny Smith"
, headerId = "accordion-entry__12"
, headerLevel = Accordion.H5
, isExpanded = Set.member 12 model
, isExpanded = Set.member 12 model.expanded
, toggle = Just (Toggle 12)
}
[]
@ -150,7 +221,7 @@ view ellieLinkConfig model =
, headerContent = Html.text "Fuji"
, headerId = "accordion-entry__13"
, headerLevel = Accordion.H5
, isExpanded = Set.member 13 model
, isExpanded = Set.member 13 model.expanded
, toggle = Just (Toggle 13)
}
[]
@ -162,21 +233,10 @@ view ellieLinkConfig model =
, headerContent = Html.text "Oranges"
, headerId = "accordion-entry__2"
, headerLevel = Accordion.H4
, isExpanded = Set.member 2 model
, isExpanded = Set.member 2 model.expanded
, toggle = Just (Toggle 2)
}
[]
, AccordionEntry
{ caret = defaultCaret
, content = \_ -> Html.text "There are many types of berries and all of them are delicious (or poisonous (or both)). Blackberries and mulberries are especially drool-worthy."
, entryClass = "accordion-example"
, headerContent = Html.text "Berries"
, headerId = "accordion-entry__4"
, headerLevel = Accordion.H5
, isExpanded = Set.member 4 model
, toggle = Just (Toggle 4)
}
[]
, AccordionEntry
{ caret =
\isOpen ->
@ -205,7 +265,7 @@ view ellieLinkConfig model =
, headerContent = Html.text "Advanced Example: Expand & Scroll!"
, headerId = "accordion-entry__6"
, headerLevel = Accordion.H4
, isExpanded = Set.member 6 model
, isExpanded = Set.member 6 model.expanded
, toggle = Just (Toggle 6)
}
[]
@ -251,33 +311,99 @@ view ellieLinkConfig model =
]
type Msg
= Toggle Int Bool
| Focus String
| Focused (Result Dom.Error ())
{-| -}
init : State
init =
Set.empty
{ settings = initSettings
, expanded = Set.empty
}
{-| -}
type alias State =
Set Int
{ settings : Control Settings
, expanded : Set Int
}
type alias Settings =
{ icon : ( String, Bool -> Html Msg )
, headerContent : ( String, Html Msg )
, content : ( String, Html Msg )
}
initSettings : Control Settings
initSettings =
Control.record Settings
|> Control.field "icon" controlIcon
|> Control.field "headerContent" controlHeaderContent
|> Control.field "content" controlContent
controlIcon : Control ( String, Bool -> Html Msg )
controlIcon =
Control.choice
[ ( "DisclosureIndicator"
, Control.value
( "DisclosureIndicator.large [ Css.marginRight (Css.px 8) ]"
, DisclosureIndicator.large [ Css.marginRight (Css.px 8) ]
)
)
, ( "none", Control.value ( "\\_ -> text \"\"", \_ -> Html.text "" ) )
, ( "UiIcon"
, Control.map
(\( code, icon ) ->
( "\\_ -> Svg.toHtml " ++ code
, \_ -> Svg.toHtml icon
)
)
CommonControls.uiIcon
)
]
controlHeaderContent : Control ( String, Html Msg )
controlHeaderContent =
Control.map
(\v -> ( quoteF "text" v, Html.text v ))
(Control.string "Berries")
controlContent : Control ( String, Html Msg )
controlContent =
Control.map
(\v -> ( quoteF "text" v, Html.text v ))
(Control.stringTextarea "🍓 There are many types of berries and all of them are delicious (or poisonous (or both)). Blackberries and mulberries are especially drool-worthy.")
quoteF : String -> String -> String
quoteF f v =
f ++ " \"" ++ v ++ "\""
type Msg
= UpdateControls (Control Settings)
| Toggle Int Bool
| Focus String
| Focused (Result Dom.Error ())
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg model =
case msg of
UpdateControls settings ->
( { model | settings = settings }
, Cmd.none
)
Toggle id expand ->
( if expand then
Set.insert id model
{ model | expanded = Set.insert id model.expanded }
else
Set.remove id model
{ model | expanded = Set.remove id model.expanded }
, Cmd.none
)

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

@ -150,6 +150,8 @@ view ellieLinkConfig state =
, version = version
, update = SetAttributes
, settings = state
, mainType = "RootHtml.Html msg"
, extraImports = []
, toExampleCode =
\{ copy, attributes } ->
[ { sectionName = "Balloon"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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