mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-14 03:48:13 +03:00
🎨 flatten the API
This commit is contained in:
Tessa Kelly
parent
07142a537f
commit
be67b97642
@ -1,8 +1,6 @@
|
||||
module Nri.Ui.Menu.V4 exposing
|
||||
( view, Config
|
||||
, Attribute
|
||||
( view, Attribute
|
||||
, isOpen, isDisabled
|
||||
, Button
|
||||
, defaultTrigger, button, clickableText, clickableSvg
|
||||
, buttonId
|
||||
, navMenuList, disclosure, dialog
|
||||
@ -22,8 +20,7 @@ A togglable menu view and related buttons.
|
||||
|
||||
## Menu rendering
|
||||
|
||||
@docs view, Config
|
||||
@docs Attribute
|
||||
@docs view, Attribute
|
||||
|
||||
|
||||
## Menu state
|
||||
@ -33,7 +30,6 @@ A togglable menu view and related buttons.
|
||||
|
||||
## Triggering button options
|
||||
|
||||
@docs Button
|
||||
@docs defaultTrigger, button, clickableText, clickableSvg
|
||||
@docs buttonId
|
||||
|
||||
@ -76,12 +72,6 @@ type Attribute msg
|
||||
= Attribute (MenuConfig msg -> MenuConfig msg)
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias Config msg =
|
||||
{ entries : List (Entry msg)
|
||||
}
|
||||
|
||||
|
||||
type alias MenuConfig msg =
|
||||
{ button : Button msg
|
||||
, alignment : Alignment
|
||||
@ -222,24 +212,21 @@ dialog exitFocusManager =
|
||||
|
||||
- `focusAndToggle`: the message produced to control the open/closed state and DOM focus
|
||||
- `attributes`: List of (attributes)[#menu-attributes] to apply to the menu.
|
||||
- `config`: Configuration parameters:
|
||||
- `button`: the `Button` to open the menu
|
||||
- `entries`: the entries of the menu
|
||||
- `isOpen`: whether the menu is currently open or not
|
||||
- `entries`: the entries of the menu
|
||||
|
||||
-}
|
||||
view :
|
||||
({ isOpen : Bool, focus : Maybe String } -> msg)
|
||||
-> List (Attribute msg)
|
||||
-> Config msg
|
||||
-> List (Entry msg)
|
||||
-> Html msg
|
||||
view focusAndToggle attributes config =
|
||||
view focusAndToggle attributes entries =
|
||||
let
|
||||
menuConfig : MenuConfig msg
|
||||
menuConfig =
|
||||
List.foldl (\(Attribute attr) c -> attr c) defaultConfig attributes
|
||||
in
|
||||
viewCustom focusAndToggle config menuConfig
|
||||
viewCustom focusAndToggle menuConfig entries
|
||||
|
||||
|
||||
|
||||
@ -392,11 +379,15 @@ clickableSvg title icon additionalAttributes =
|
||||
|> setButton
|
||||
|
||||
|
||||
viewCustom : ({ isOpen : Bool, focus : Maybe String } -> msg) -> Config msg -> MenuConfig msg -> Html msg
|
||||
viewCustom focusAndToggle config1 config =
|
||||
viewCustom :
|
||||
({ isOpen : Bool, focus : Maybe String } -> msg)
|
||||
-> MenuConfig msg
|
||||
-> List (Entry msg)
|
||||
-> Html msg
|
||||
viewCustom focusAndToggle config entries =
|
||||
let
|
||||
( maybeFirstFocusableElementId, maybeLastFocusableElementId ) =
|
||||
( List.head (getFirstIds config1.entries), List.head (getLastIds config1.entries) )
|
||||
( List.head (getFirstIds entries), List.head (getLastIds entries) )
|
||||
|
||||
contentVisible =
|
||||
config.isOpen && not config.isDisabled
|
||||
@ -636,7 +627,7 @@ viewCustom focusAndToggle config1 config =
|
||||
, previousId = Maybe.withDefault "" maybeLastFocusableElementId
|
||||
, nextId = Maybe.withDefault "" maybeFirstFocusableElementId
|
||||
}
|
||||
config1.entries
|
||||
entries
|
||||
)
|
||||
]
|
||||
]
|
||||
|
||||
@ -153,17 +153,14 @@ view ellieLinkConfig state =
|
||||
code =
|
||||
moduleName
|
||||
++ ".view "
|
||||
++ Code.newlineWithIndent 2
|
||||
++ "identity -- TODO: you will need a real msg type here"
|
||||
++ Code.listMultiline
|
||||
(("Menu.isOpen " ++ Code.bool (isOpen "interactiveExample"))
|
||||
:: List.map Tuple.first settings
|
||||
)
|
||||
1
|
||||
++ Code.recordMultiline
|
||||
[ ( "entries", "[]" )
|
||||
]
|
||||
1
|
||||
++ Code.newlineWithIndent 1
|
||||
++ "[]"
|
||||
in
|
||||
[ { sectionName = "Example"
|
||||
, code = code
|
||||
@ -177,8 +174,7 @@ view ellieLinkConfig state =
|
||||
, div [ css [ Css.displayFlex, Css.justifyContent Css.center ] ]
|
||||
[ Menu.view (FocusAndToggle "interactiveExample")
|
||||
(Menu.isOpen (isOpen "interactiveExample") :: menuAttributes)
|
||||
{ entries = []
|
||||
}
|
||||
[]
|
||||
]
|
||||
, Heading.h2
|
||||
[ Heading.plaintext "Menu types"
|
||||
@ -210,48 +206,46 @@ view ellieLinkConfig state =
|
||||
, Just <| Menu.isOpen (isOpen "1stPeriodEnglish")
|
||||
]
|
||||
)
|
||||
{ entries =
|
||||
[ Menu.entry "hello-button" <|
|
||||
[ Menu.entry "hello-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Hello"
|
||||
[ ClickableText.onClick (ConsoleLog "Hello")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
, Menu.group "Menu group"
|
||||
[ Menu.entry "gift-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Hello"
|
||||
[ ClickableText.onClick (ConsoleLog "Hello")
|
||||
ClickableText.button "Gift"
|
||||
[ ClickableText.onClick (ConsoleLog "Gift")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
, ClickableText.icon UiIcon.gift
|
||||
]
|
||||
, Menu.group "Menu group"
|
||||
[ Menu.entry "gift-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Gift"
|
||||
[ ClickableText.onClick (ConsoleLog "Gift")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
, ClickableText.icon UiIcon.gift
|
||||
]
|
||||
, Menu.entry "null-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Nope!"
|
||||
[ ClickableText.onClick (ConsoleLog "Nope!")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
, ClickableText.icon UiIcon.null
|
||||
]
|
||||
, Menu.entry "no-icon-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Skip"
|
||||
[ ClickableText.onClick (ConsoleLog "Skip")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
]
|
||||
, Menu.entry "performance-button" <|
|
||||
, Menu.entry "null-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Performance"
|
||||
[ ClickableText.onClick (ConsoleLog "Performance")
|
||||
ClickableText.button "Nope!"
|
||||
[ ClickableText.onClick (ConsoleLog "Nope!")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
, ClickableText.icon UiIcon.null
|
||||
]
|
||||
, Menu.entry "no-icon-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Skip"
|
||||
[ ClickableText.onClick (ConsoleLog "Skip")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
]
|
||||
}
|
||||
, Menu.entry "performance-button" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Performance"
|
||||
[ ClickableText.onClick (ConsoleLog "Performance")
|
||||
, ClickableText.small
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
]
|
||||
}
|
||||
, { menu = "Menu.navMenuList"
|
||||
, example =
|
||||
@ -262,30 +256,28 @@ view ellieLinkConfig state =
|
||||
, Menu.defaultTrigger "Dropdown list" []
|
||||
, Menu.isOpen (isOpen "dropdown_list")
|
||||
]
|
||||
{ entries =
|
||||
[ Menu.entry "dropdown_list__first" <|
|
||||
\attrs ->
|
||||
ClickableText.button "First"
|
||||
[ ClickableText.small
|
||||
, ClickableText.onClick (ConsoleLog "First")
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
, Menu.entry "dropdown_list__second" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Second"
|
||||
[ ClickableText.small
|
||||
, ClickableText.onClick (ConsoleLog "Second")
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
, Menu.entry "dropdown_list__third" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Third"
|
||||
[ ClickableText.small
|
||||
, ClickableText.onClick (ConsoleLog "Third")
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
]
|
||||
}
|
||||
[ Menu.entry "dropdown_list__first" <|
|
||||
\attrs ->
|
||||
ClickableText.button "First"
|
||||
[ ClickableText.small
|
||||
, ClickableText.onClick (ConsoleLog "First")
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
, Menu.entry "dropdown_list__second" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Second"
|
||||
[ ClickableText.small
|
||||
, ClickableText.onClick (ConsoleLog "Second")
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
, Menu.entry "dropdown_list__third" <|
|
||||
\attrs ->
|
||||
ClickableText.button "Third"
|
||||
[ ClickableText.small
|
||||
, ClickableText.onClick (ConsoleLog "Third")
|
||||
, ClickableText.custom attrs
|
||||
]
|
||||
]
|
||||
}
|
||||
, { menu = "Menu.disclosure"
|
||||
, example =
|
||||
@ -296,25 +288,23 @@ view ellieLinkConfig state =
|
||||
, Menu.defaultTrigger "Log In disclosure" []
|
||||
, Menu.isOpen (isOpen "with_disclosure")
|
||||
]
|
||||
{ entries =
|
||||
[ Menu.entry "disclosure__username" <|
|
||||
\attrs ->
|
||||
div []
|
||||
[ TextInput.view "Username"
|
||||
[ TextInput.id "disclosure__username__input"
|
||||
]
|
||||
, TextInput.view "Password"
|
||||
[ TextInput.id "disclosure__password__input"
|
||||
]
|
||||
, Button.button "Log in"
|
||||
[ Button.primary
|
||||
, Button.id "disclosure__login__button"
|
||||
, Button.fillContainerWidth
|
||||
, Button.css [ Css.marginTop (Css.px 15) ]
|
||||
]
|
||||
[ Menu.entry "disclosure__username" <|
|
||||
\attrs ->
|
||||
div []
|
||||
[ TextInput.view "Username"
|
||||
[ TextInput.id "disclosure__username__input"
|
||||
]
|
||||
]
|
||||
}
|
||||
, TextInput.view "Password"
|
||||
[ TextInput.id "disclosure__password__input"
|
||||
]
|
||||
, Button.button "Log in"
|
||||
[ Button.primary
|
||||
, Button.id "disclosure__login__button"
|
||||
, Button.fillContainerWidth
|
||||
, Button.css [ Css.marginTop (Css.px 15) ]
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
, { menu = "Menu.dialog"
|
||||
, example =
|
||||
@ -325,25 +315,23 @@ view ellieLinkConfig state =
|
||||
, Menu.defaultTrigger "Log In dialog" []
|
||||
, Menu.isOpen (isOpen "dialog")
|
||||
]
|
||||
{ entries =
|
||||
[ Menu.entry "dialog__username" <|
|
||||
\attrs ->
|
||||
div []
|
||||
[ TextInput.view "Username"
|
||||
[ TextInput.id "dialog__username__input"
|
||||
]
|
||||
, TextInput.view "Password"
|
||||
[ TextInput.id "dialog__password__input"
|
||||
]
|
||||
, Button.button "Log in"
|
||||
[ Button.primary
|
||||
, Button.id "dialog__login__button"
|
||||
, Button.fillContainerWidth
|
||||
, Button.css [ Css.marginTop (Css.px 15) ]
|
||||
]
|
||||
[ Menu.entry "dialog__username" <|
|
||||
\attrs ->
|
||||
div []
|
||||
[ TextInput.view "Username"
|
||||
[ TextInput.id "dialog__username__input"
|
||||
]
|
||||
]
|
||||
}
|
||||
, TextInput.view "Password"
|
||||
[ TextInput.id "dialog__password__input"
|
||||
]
|
||||
, Button.button "Log in"
|
||||
[ Button.primary
|
||||
, Button.id "dialog__login__button"
|
||||
, Button.fillContainerWidth
|
||||
, Button.css [ Css.marginTop (Css.px 15) ]
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user