1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-24 06:02:36 +03:00
noredink-ui/styleguide-app/Examples/SideNav.elm

254 lines
7.6 KiB
Elm
Raw Normal View History

2022-03-11 02:39:37 +03:00
module Examples.SideNav exposing (Msg, State, example)
{-|
@docs Msg, State, example
-}
2022-03-11 02:53:50 +03:00
import Accessibility.Styled exposing (..)
2022-03-11 02:39:37 +03:00
import Category exposing (Category(..))
2022-03-12 00:35:57 +03:00
import CommonControls
2022-03-11 02:39:37 +03:00
import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
2022-03-11 03:36:59 +03:00
import Debug.Control.View as ControlView
2022-03-11 02:39:37 +03:00
import Example exposing (Example)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.SideNav.V2 as SideNav
{-| -}
example : Example State Msg
example =
{ name = "SideNav"
, version = 2
, state = init
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Layout ]
, keyboardSupport = []
2022-03-11 02:53:50 +03:00
, preview = [ viewPreview ]
2022-03-11 03:36:59 +03:00
, view = view
2022-03-11 02:39:37 +03:00
}
2022-03-11 02:53:50 +03:00
viewPreview : Html msg
viewPreview =
div
[ css
[ Css.height (Css.px 80)
, Css.backgroundColor Colors.white
, Css.padding (Css.px 8)
, Css.displayFlex
]
]
[ div
[ css
[ Css.flexGrow (Css.int 1)
, Css.backgroundColor Colors.gray96
, Css.borderRadius (Css.px 2)
]
]
[ div
[ css
[ Css.height (Css.px 8)
, Css.backgroundColor Colors.glacier
, Css.borderRadius (Css.px 2)
, Css.margin2 (Css.px 8) (Css.px 4)
]
]
[]
]
, div [ css [ Css.flexGrow (Css.int 2) ] ] []
]
2022-03-11 03:36:59 +03:00
view : State -> List (Html Msg)
view state =
let
settings =
2022-03-11 03:36:59 +03:00
Control.currentValue state.settings
in
[ ControlView.view
{ update = SetControls
, settings = state.settings
, toExampleCode =
\{ entries } ->
2022-03-11 03:36:59 +03:00
[ { sectionName = "View"
, code =
String.join ""
[ "SideNav.view"
2022-03-12 00:54:18 +03:00
, "\n\t{ isCurrentRoute = (==) \"" ++ settings.currentRoute ++ "\""
2022-03-12 00:47:03 +03:00
, "\n\t, routeToString = identity"
2022-03-11 03:36:59 +03:00
, "\n\t, onSkipNav = SkipToContent"
2022-03-12 00:35:57 +03:00
, "\n\t, css = " ++ Tuple.first settings.css
2022-03-11 03:36:59 +03:00
, "\n\t}"
, "\n\t[ "
, String.join "\n\t" (List.map Tuple.first entries)
, "\n\t]"
]
}
]
}
, SideNav.view
{ isCurrentRoute = (==) settings.currentRoute
2022-03-12 00:47:03 +03:00
, routeToString = identity
2022-03-11 03:36:59 +03:00
, onSkipNav = SkipToContent
2022-03-12 00:35:57 +03:00
, css = Tuple.second settings.css
2022-03-11 03:36:59 +03:00
}
(List.map Tuple.second settings.entries)
2022-03-11 03:36:59 +03:00
]
2022-03-11 02:39:37 +03:00
{-| -}
type alias State =
{ settings : Control Settings
2022-03-11 03:36:59 +03:00
}
type alias Settings =
2022-03-12 00:47:03 +03:00
{ currentRoute : String
2022-03-12 00:35:57 +03:00
, css : ( String, List Css.Style )
2022-03-12 00:47:03 +03:00
, entries : List ( String, SideNav.Entry String Msg )
}
2022-03-11 02:39:37 +03:00
{-| -}
init : State
init =
{ settings =
Control.record Settings
2022-03-12 00:47:03 +03:00
|> Control.field "currentRoute" (Control.string "#some-route")
2022-03-12 00:35:57 +03:00
|> Control.field "css"
(Control.maybe True
(Control.choice
[ ( "maxWidth"
, Control.value
( "[ Css.maxWidth (Css.px 300) ]"
, [ Css.maxWidth (Css.px 300) ]
)
)
, ( "purple border"
, Control.value
( "[ Css.border3 (Css.px 3) Css.dotted Colors.purple ]"
, [ Css.border3 (Css.px 3) Css.dotted Colors.purple ]
)
)
]
)
|> Control.map (Maybe.withDefault ( "[]", [] ))
)
2022-03-12 00:47:03 +03:00
|> Control.field "entries" (Control.map List.singleton (controlEntryType "#some-route"))
2022-03-11 03:36:59 +03:00
}
2022-03-12 00:47:03 +03:00
controlEntryType : String -> Control ( String, SideNav.Entry String Msg )
controlEntryType href =
2022-03-11 03:36:59 +03:00
Control.choice
2022-03-12 00:47:03 +03:00
[ ( "entry", controlEntry href )
, ( "entryWithChildren", controlEntryWithChildren href )
, ( "html", controlHtml )
2022-03-11 03:36:59 +03:00
]
2022-03-12 00:47:03 +03:00
controlEntry : String -> Control ( String, SideNav.Entry String Msg )
controlEntry href =
Control.record
(\title attributes ->
2022-03-12 00:54:18 +03:00
( "SideNav.entry \""
++ title
2022-03-12 00:54:18 +03:00
++ "\"\n\t\t[ "
++ String.join "\n\t\t, " (List.map Tuple.first attributes)
++ "\n\t\t]"
, SideNav.entry title (List.map Tuple.second attributes)
)
)
|> Control.field "title" (Control.string "Entry Category")
2022-03-12 00:47:03 +03:00
|> Control.field "attributes" (controlEntryAttributes href)
2022-03-12 00:47:03 +03:00
controlEntryWithChildren : String -> Control ( String, SideNav.Entry String Msg )
controlEntryWithChildren href =
Control.record
(\title attributes children ->
( "SideNav.entryWithChildren "
++ title
++ " [\n\t"
++ String.join "\n\t," (List.map Tuple.first attributes)
++ "\n\t]"
++ " [\n\t"
++ String.join "\n\t," (List.map Tuple.first children)
++ "\n\t]"
, SideNav.entryWithChildren title
(List.map Tuple.second attributes)
(List.map Tuple.second children)
)
)
|> Control.field "title" (Control.string "Entry Category")
2022-03-12 00:47:03 +03:00
|> Control.field "attributes" (controlEntryAttributes href)
|> Control.field "children"
(Control.lazy
(\() ->
Control.map List.singleton (controlEntryType (href ++ "-child"))
)
)
2022-03-12 00:47:03 +03:00
controlHtml : Control ( String, SideNav.Entry String Msg )
controlHtml =
Control.map
(\html ->
( "SideNav.html "
++ " [\n\t"
++ String.join "\n\t," (List.map Tuple.first html)
++ "\n\t]"
, SideNav.html (List.map Tuple.second html)
)
)
-- TODO: support HTML examples
(Control.value [])
2022-03-12 00:47:03 +03:00
controlEntryAttributes : String -> Control (List ( String, SideNav.Attribute String Msg ))
controlEntryAttributes href =
2022-03-11 03:36:59 +03:00
ControlExtra.list
|> ControlExtra.listItem "href"
2022-03-12 00:54:18 +03:00
(Control.map (\v -> ( "SideNav.href \"" ++ v ++ "\"", SideNav.href v ))
2022-03-12 00:47:03 +03:00
(Control.string href)
)
2022-03-12 00:35:57 +03:00
|> CommonControls.css { moduleName = "SideNav", use = SideNav.css }
2022-03-12 00:37:44 +03:00
|> CommonControls.iconNotCheckedByDefault "SideNav" SideNav.icon
2022-03-12 00:40:06 +03:00
|> ControlExtra.optionalBoolListItem "secondary" ( "SideNav.secondary", SideNav.secondary )
2022-03-12 00:50:35 +03:00
|> ControlExtra.optionalListItem "premiumDisplay"
(Control.map
(\( displayStr, display ) ->
( "SideNav.premiumDisplay " ++ displayStr
, SideNav.premiumDisplay display (ConsoleLog "Premium pennant clicked")
)
)
CommonControls.premiumDisplay
)
2022-03-11 02:39:37 +03:00
{-| -}
2022-03-11 03:36:59 +03:00
type Msg
= SetControls (Control Settings)
2022-03-11 03:36:59 +03:00
| SkipToContent
2022-03-12 00:50:35 +03:00
| ConsoleLog String
2022-03-11 02:39:37 +03:00
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
2022-03-11 03:36:59 +03:00
SetControls settings ->
( { state | settings = settings }, Cmd.none )
SkipToContent ->
2022-03-11 02:39:37 +03:00
( state, Cmd.none )
2022-03-12 00:50:35 +03:00
ConsoleLog message ->
2022-03-15 21:06:13 +03:00
( Debug.log "SideNav" message |> always state, Cmd.none )