noredink-ui/styleguide-app/Examples/BreadCrumbs.elm

254 lines
8.1 KiB
Elm
Raw Normal View History

2022-05-20 21:57:47 +03:00
module Examples.BreadCrumbs exposing (example, State, Msg)
{-|
@docs example, State, Msg
-}
2022-05-24 19:52:46 +03:00
import Accessibility.Styled exposing (..)
2022-05-20 21:57:47 +03:00
import Category exposing (Category(..))
2022-05-24 21:09:05 +03:00
import CommonControls
2022-05-24 19:52:46 +03:00
import Css
2022-05-24 20:27:15 +03:00
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
2022-05-20 21:57:47 +03:00
import Example exposing (Example)
2022-05-24 21:17:15 +03:00
import Html.Styled.Attributes exposing (css, href)
2022-05-24 20:27:15 +03:00
import Nri.Ui.BreadCrumbs.V1 as BreadCrumbs exposing (BreadCrumb, BreadCrumbs)
2022-05-24 19:52:46 +03:00
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Nri.Ui.Table.V5 as Table
import Nri.Ui.Text.V6 as Text
2022-05-24 19:52:46 +03:00
import Nri.Ui.UiIcon.V1 as UiIcon
2022-05-20 21:57:47 +03:00
{-| -}
type alias State =
2022-05-24 20:27:15 +03:00
Control Settings
2022-05-20 21:57:47 +03:00
2022-05-24 20:27:15 +03:00
moduleName : String
moduleName =
"BreadCrumbs"
version : Int
version =
1
2022-05-20 21:57:47 +03:00
{-| -}
example : Example State Msg
example =
2022-05-24 20:27:15 +03:00
{ name = moduleName
, version = version
2022-05-20 21:57:47 +03:00
, categories = [ Layout ]
, keyboardSupport = []
2022-05-24 20:27:15 +03:00
, state = init
, update = update
2022-05-20 21:57:47 +03:00
, subscriptions = \_ -> Sub.none
2022-05-24 19:52:46 +03:00
, preview =
[ previewContainer [ previewText "🏠 Home" ]
, previewContainer [ previewText "🏠 Home", previewArrowRight, previewText "🟠 Category " ]
, previewContainer [ previewText "🏠", previewArrowRight, previewText "🟠", previewArrowRight, previewText "🟣 Sub-Category " ]
]
2022-05-20 21:57:47 +03:00
, view =
2022-05-24 20:27:15 +03:00
\ellieLinkConfig state ->
let
breadCrumbs : BreadCrumbs String
breadCrumbs =
Tuple.second (Control.currentValue state).breadCrumbs
in
2022-05-24 20:27:15 +03:00
[ ControlView.view
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControl
, settings = state
, mainType = "RootHtml.Html msg"
, extraImports = []
, toExampleCode = \settings -> [ { sectionName = moduleName ++ ".view", code = viewExampleCode settings } ]
2022-05-24 20:27:15 +03:00
}
, Table.view
[ Table.string
{ header = "Name"
, value = .name
, width = Css.pct 15
, cellStyles = always []
}
, Table.string
{ header = "About"
, value = .about
, width = Css.px 200
, cellStyles = always []
}
, Table.string
{ header = "Result"
, value = \{ result } -> result breadCrumbs
, width = Css.px 50
, cellStyles = always []
}
]
[ { name = "headerId"
, about = "When changing routes in a SPA, moving focus to the heading of the new page orients screenreader users to the new location."
, result = BreadCrumbs.headerId
}
, { name = "toPageTitle"
, about = "When changing routes in a SPA, the HTML title of the page should be updated to match the new route."
, result = BreadCrumbs.toPageTitle
}
, { name = "toPageTitleWithSecondaryBreadCrumbs"
, about = "(Tessa doesn't know why this helper exists/why it includes less context than `toPageTitle` does)"
, result = BreadCrumbs.toPageTitleWithSecondaryBreadCrumbs
}
]
, viewExample breadCrumbs
]
2022-05-20 21:57:47 +03:00
}
2022-05-24 19:52:46 +03:00
previewContainer : List (Html msg) -> Html msg
previewContainer =
span
[ css
[ Css.displayFlex
, Css.alignItems Css.center
, Fonts.baseFont
, Css.fontSize (Css.px 10)
, Css.fontWeight (Css.int 600)
, Css.color Colors.navy
]
]
previewText : String -> Html msg
previewText name =
span [ css [ Css.margin (Css.px 2) ] ] [ text name ]
previewArrowRight : Html msg
previewArrowRight =
UiIcon.arrowRight
|> Svg.withColor Colors.gray75
|> Svg.withHeight (Css.px 10)
|> Svg.withWidth (Css.px 8)
|> Svg.withCss [ Css.flexShrink Css.zero ]
|> Svg.toHtml
2022-05-24 20:27:15 +03:00
2022-05-24 23:31:50 +03:00
viewExampleCode : Settings -> String
viewExampleCode settings =
String.join ("\n" ++ ControlView.withIndentLevel 1)
[ "BreadCrumbs.view"
, "{ aTagAttributes = \\route -> [ href route ]"
, ", isCurrentRoute = \\route -> route == \"/current/route\""
, "}"
, Tuple.first settings.breadCrumbs
2022-05-24 23:31:50 +03:00
]
viewExample : BreadCrumbs String -> Html msg
viewExample breadCrumbs =
BreadCrumbs.view
{ aTagAttributes = \route -> [ href route ]
, isCurrentRoute = \route -> route == "/current/route"
}
breadCrumbs
2022-05-24 20:27:15 +03:00
{-| -}
type Msg
= UpdateControl (Control Settings)
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
UpdateControl control ->
( control, Cmd.none )
type alias Settings =
{ breadCrumbs : ( String, BreadCrumbs String )
2022-05-24 20:27:15 +03:00
}
init : Control Settings
init =
2022-05-24 22:14:30 +03:00
Control.map Settings controlBreadCrumbs
2022-05-24 20:27:15 +03:00
controlBreadCrumbs : Control ( String, BreadCrumbs String )
2022-05-24 20:27:15 +03:00
controlBreadCrumbs =
2022-05-24 22:14:30 +03:00
Control.map (\f -> f Nothing) (controlBreadCrumbs_ 1)
2022-05-24 20:27:15 +03:00
controlBreadCrumbs_ : Int -> Control (Maybe ( String, BreadCrumbs String ) -> ( String, BreadCrumbs String ))
2022-05-24 22:14:30 +03:00
controlBreadCrumbs_ index =
Control.record (composeBreadCrumbs index)
|> Control.field "icon" (Control.maybe False CommonControls.uiIcon)
2022-05-24 21:09:05 +03:00
|> Control.field "iconStyle"
(CommonControls.choice moduleName
[ ( "Default", BreadCrumbs.Default )
, ( "Circled", BreadCrumbs.Circled )
2022-05-24 21:09:05 +03:00
]
)
|> Control.field "text" (ControlExtra.string ("Category " ++ String.fromInt index))
2022-05-24 22:14:30 +03:00
|> Control.field ("category " ++ String.fromInt (index + 1))
(Control.maybe False
(Control.lazy
(\() -> controlBreadCrumbs_ (index + 1))
)
)
composeBreadCrumbs :
Int
-> Maybe ( String, Svg )
-> ( String, BreadCrumbs.IconStyle )
-> ( String, String )
-> Maybe (Maybe ( String, BreadCrumbs String ) -> ( String, BreadCrumbs String ))
-> (Maybe ( String, BreadCrumbs String ) -> ( String, BreadCrumbs String ))
composeBreadCrumbs index icon ( iconStyleStr, iconStyle ) ( textStr, text ) after maybeBase =
let
breadCrumb =
{ icon = Maybe.map Tuple.second icon
, iconStyle = iconStyle
, text = text
, id = "breadcrumb-id-" ++ String.fromInt index
2022-05-25 00:08:36 +03:00
, route = "/breadcrumb" ++ String.fromInt index
}
breadCrumbStr =
String.join ("\n" ++ ControlView.withIndentLevel 2)
[ "{ icon = " ++ Maybe.withDefault "Nothing" (Maybe.map (\( iconStr, _ ) -> "Just " ++ iconStr) icon)
, ", iconStyle = " ++ iconStyleStr
, ", text = " ++ textStr
, ", id = " ++ "\"breadcrumb-id-" ++ String.fromInt index ++ "\""
2022-05-25 00:08:36 +03:00
, ", route = " ++ "\"/breadcrumb" ++ String.fromInt index ++ "\""
, "}\n"
]
newBase =
case maybeBase of
Just ( baseStr, base ) ->
( "(BreadCrumbs.after "
++ baseStr
++ ("\n" ++ ControlView.withIndentLevel 2)
++ breadCrumbStr
++ (ControlView.withIndentLevel 1 ++ ")")
, BreadCrumbs.after base breadCrumb
)
Nothing ->
( "(BreadCrumbs.init "
++ ("\n" ++ ControlView.withIndentLevel 2)
++ breadCrumbStr
++ (ControlView.withIndentLevel 1 ++ ")")
, BreadCrumbs.init breadCrumb
)
in
Maybe.map (\f -> f (Just newBase)) after |> Maybe.withDefault newBase