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

Merge remote-tracking branch 'origin/master' into tessa/explore-debug-control

Browse Source
This commit is contained in:
Tessa Kelly 2024-02-02 12:28:05 -07:00
commit 238cd36472
65 changed files with 396 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
component-catalog/src/App.elm
View File

@ -40,8 +40,8 @@ type alias Model key =
{ -- Global UI
route : Route
, previousRoute : Maybe Route
, moduleStates : Dict String (Example Examples.State Examples.Msg)
, usageExampleStates : Dict String (UsageExample UsageExamples.State UsageExamples.Msg)
, moduleStates : Dict String Examples.State
, usageExampleStates : Dict String UsageExamples.State
, isSideNavOpen : Bool
, openTooltip : Maybe TooltipId
, selectedContent : Content
@ -55,17 +55,8 @@ init : () -> Url -> key -> ( Model key, Effect )
init () url key =
( { route = Routes.fromLocation url
, previousRoute = Nothing
, moduleStates =
Dict.fromList
(List.map
(\example -> ( Example.routeName example, example ))
Examples.all
)
, usageExampleStates =
Dict.fromList
(List.map (\example -> ( UsageExample.routeName example, example ))
UsageExamples.all
)
, moduleStates = Dict.map (\_ example -> example.init) examplesDict
, usageExampleStates = Dict.map (\_ example -> example.init) usageExamplesDict
, isSideNavOpen = False
, openTooltip = Nothing
, selectedContent = ComponentExamples
@ -101,21 +92,54 @@ type Msg
| SwallowEvent
examplesDict : Dict String (Example Examples.State Examples.Msg)
examplesDict =
Dict.fromList
(List.map
(\example -> ( Example.routeName example, example ))
Examples.all
)
findExample : Model k -> String -> Maybe ( Example Examples.State Examples.Msg, Examples.State )
findExample model key =
Dict.get key model.moduleStates
|> Maybe.andThen
(\state ->
Dict.get key examplesDict
|> Maybe.map (\example -> ( example, state ))
)
usageExamplesDict : Dict String (UsageExample UsageExamples.State UsageExamples.Msg)
usageExamplesDict =
Dict.fromList
(List.map (\example -> ( UsageExample.routeName example, example ))
UsageExamples.all
)
findUsageExample : Model k -> String -> Maybe ( UsageExample UsageExamples.State UsageExamples.Msg, UsageExamples.State )
findUsageExample model key =
Dict.get key model.usageExampleStates
|> Maybe.andThen
(\state ->
Dict.get key usageExamplesDict
|> Maybe.map (\example -> ( example, state ))
)
update : Msg -> Model key -> ( Model key, Effect )
update action model =
case action of
UpdateModuleStates key exampleMsg ->
case Dict.get key model.moduleStates of
Just example ->
example.update exampleMsg example.state
case findExample model key of
Just ( example, exampleState ) ->
example.update exampleMsg exampleState
|> Tuple.mapFirst
(\newState ->
let
newExample =
{ example | state = newState }
in
{ model
| moduleStates = Dict.insert key newExample model.moduleStates
| moduleStates = Dict.insert key newState model.moduleStates
}
)
|> Tuple.mapSecond (Cmd.map (UpdateModuleStates key) >> Command)
@ -124,17 +148,13 @@ update action model =
( model, None )
UpdateUsageExamples key exampleMsg ->
case Dict.get key model.usageExampleStates of
Just usageExample ->
usageExample.update exampleMsg usageExample.state
case findUsageExample model key of
Just ( usageExample, usageExampleState ) ->
usageExample.update exampleMsg usageExampleState
|> Tuple.mapFirst
(\newState ->
let
newExample =
{ usageExample | state = newState }
in
{ model
| usageExampleStates = Dict.insert key newExample model.usageExampleStates
| usageExampleStates = Dict.insert key newState model.usageExampleStates
}
)
|> Tuple.mapSecond (Cmd.map (UpdateUsageExamples key) >> Command)
@ -160,7 +180,7 @@ update action model =
, previousRoute = Just model.route
, isSideNavOpen = False
}
, Maybe.map FocusOn (Routes.headerId route model.moduleStates model.usageExampleStates)
, Maybe.map FocusOn (Routes.headerId route examplesDict usageExamplesDict)
|> Maybe.withDefault None
)
@ -267,10 +287,10 @@ subscriptions : Model key -> Sub Msg
subscriptions model =
let
exampleSubs exampleName =
case Dict.get exampleName model.moduleStates of
Just example ->
case findExample model exampleName of
Just ( example, exampleState ) ->
Sub.map (UpdateModuleStates exampleName)
(example.subscriptions example.state)
(example.subscriptions exampleState)
Nothing ->
Sub.none
@ -284,10 +304,10 @@ subscriptions model =
exampleSubs exampleName
Routes.Usage exampleName ->
case Dict.get exampleName model.usageExampleStates of
Just example ->
case findUsageExample model exampleName of
Just ( example, exampleState ) ->
Sub.map (UpdateUsageExamples exampleName)
(example.subscriptions example.state)
(example.subscriptions exampleState)
Nothing ->
Sub.none
@ -313,10 +333,10 @@ view model =
]
exampleDocument exampleName =
case Dict.get exampleName model.moduleStates of
Just example ->
case findExample model exampleName of
Just ( example, exampleState ) ->
{ title = example.name ++ " in the NoRedInk Component Catalog"
, body = viewExample model example |> toBody
, body = viewExample model example exampleState |> toBody
}
Nothing ->
@ -340,10 +360,10 @@ view model =
}
Routes.Usage exampleName ->
case Dict.get exampleName model.usageExampleStates of
Just example ->
case findUsageExample model exampleName of
Just ( example, state ) ->
{ title = example.name ++ " Usage Example in the NoRedInk Component Catalog"
, body = viewUsageExample model example |> toBody
, body = viewUsageExample model example state |> toBody
}
Nothing ->
@ -360,16 +380,16 @@ view model =
}
viewExample : Model key -> Example a Examples.Msg -> Html Msg
viewExample model example =
Example.view { packageDependencies = model.elliePackageDependencies } example
viewExample : Model key -> Example a Examples.Msg -> a -> Html Msg
viewExample model example state =
Example.view { packageDependencies = model.elliePackageDependencies } example state
|> Html.map (UpdateModuleStates example.name)
|> viewLayout model [ Example.extraLinks (UpdateModuleStates example.name) example ]
viewUsageExample : Model key -> UsageExample a UsageExamples.Msg -> Html Msg
viewUsageExample model example =
UsageExample.view example
viewUsageExample : Model key -> UsageExample a UsageExamples.Msg -> a -> Html Msg
viewUsageExample model example state =
UsageExample.view example state
|> Html.map (UpdateUsageExamples (UsageExample.routeName example))
|> viewLayout model []
@ -394,8 +414,8 @@ viewAll model =
, navigate = UsageExample.routeName >> Routes.Usage >> ChangeRoute
, exampleHref = UsageExample.routeName >> Routes.Usage >> Routes.toString
}
(Dict.values model.moduleStates)
(Dict.values model.usageExampleStates)
Examples.all
UsageExamples.all
model.selectedContent
@ -409,7 +429,7 @@ viewCategory model category =
(Set.fromList Category.sorter item.categories)
category
)
(Dict.values items)
items
in
viewLayout model [] <|
viewExamplePreviews (Category.forId category)
@ -421,8 +441,8 @@ viewCategory model category =
, navigate = UsageExample.routeName >> Routes.Usage >> ChangeRoute
, exampleHref = UsageExample.routeName >> Routes.Usage >> Routes.toString
}
(filtered model.moduleStates)
(filtered model.usageExampleStates)
(filtered Examples.all)
(filtered UsageExamples.all)
model.selectedContent
@ -431,8 +451,8 @@ viewLayout model headerExtras content =
Html.div []
[ Html.header []
[ Routes.viewHeader model.route
model.moduleStates
model.usageExampleStates
examplesDict
usageExamplesDict
headerExtras
]
, Html.div
@ -530,7 +550,7 @@ navigation : Model key -> Html Msg
navigation { moduleStates, route, isSideNavOpen, openTooltip } =
let
examples =
Dict.values moduleStates
Examples.all
exampleEntriesForCategory category =
List.filter (\{ categories } -> List.any ((==) category) categories) examples

21
component-catalog/src/Example.elm
View File

@ -17,13 +17,12 @@ import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Container.V2 as Container
import Nri.Ui.Header.V1 as Header
import Nri.Ui.MediaQuery.V1 exposing (mobile)
import Nri.Ui.Text.V6 as Text
type alias Example state msg =
{ name : String
, version : Int
, state : state
, init : state
, update : msg -> state -> ( state, Cmd msg )
, subscriptions : state -> Sub msg
, preview : List (Html Never)
@ -57,7 +56,7 @@ wrapMsg :
wrapMsg wrapMsg_ unwrapMsg example =
{ name = example.name
, version = example.version
, state = example.state
, init = example.init
, update =
\msg2 state ->
case unwrapMsg msg2 of
@ -87,7 +86,7 @@ wrapState :
wrapState wrapState_ unwrapState example =
{ name = example.name
, version = example.version
, state = wrapState_ example.state
, init = wrapState_ example.init
, update =
\msg state2 ->
case unwrapState state2 of
@ -161,14 +160,14 @@ preview_ { swallowEvent, navigate, exampleHref } example =
]
view : EllieLink.Config -> Example state msg -> Html msg
view ellieLinkConfig example =
view : EllieLink.Config -> Example state msg -> state -> Html msg
view ellieLinkConfig example state =
Html.div [ Attributes.id (String.replace "." "-" example.name) ]
(view_ ellieLinkConfig example)
(view_ ellieLinkConfig example state)
view_ : EllieLink.Config -> Example state msg -> List (Html msg)
view_ ellieLinkConfig example =
view_ : EllieLink.Config -> Example state msg -> state -> List (Html msg)
view_ ellieLinkConfig example state =
[ Html.div
[ Attributes.css
[ Css.displayFlex
@ -185,13 +184,13 @@ view_ ellieLinkConfig example =
, KeyboardSupport.view example.keyboardSupport
]
, Html.div [ Attributes.css [ Css.marginBottom (Css.px 200) ] ]
(example.view ellieLinkConfig example.state)
(example.view ellieLinkConfig state)
]
viewAbout : List (Html Never) -> Html msg
viewAbout about =
Text.mediumBody [ Text.html about ]
Html.div [] about
|> Html.map never

38
component-catalog/src/Examples.elm
View File

@ -359,25 +359,6 @@ all =
DividerState childState ->
Just childState
_ ->
Nothing
)
, Fonts.example
|> Example.wrapMsg FontsMsg
(\msg ->
case msg of
FontsMsg childMsg ->
Just childMsg
_ ->
Nothing
)
|> Example.wrapState FontsState
(\msg ->
case msg of
FontsState childState ->
Just childState
_ ->
Nothing
)
@ -397,6 +378,25 @@ all =
FocusRingState childState ->
Just childState
_ ->
Nothing
)
, Fonts.example
|> Example.wrapMsg FontsMsg
(\msg ->
case msg of
FontsMsg childMsg ->
Just childMsg
_ ->
Nothing
)
|> Example.wrapState FontsState
(\msg ->
case msg of
FontsState childState ->
Just childState
_ ->
Nothing
)

19
component-catalog/src/Examples/Accordion.elm
View File

@ -10,7 +10,7 @@ module Examples.Accordion exposing
-}
import Accessibility.Styled as Html exposing (Html)
import Accessibility.Styled as Html exposing (..)
import Browser.Dom as Dom
import Category exposing (Category(..))
import Code
@ -24,6 +24,7 @@ import Example exposing (Example)
import Html.Styled.Attributes as Attributes exposing (css, src)
import KeyboardSupport exposing (Key(..))
import Nri.Ui.Accordion.V4 as Accordion exposing (AccordionEntry(..))
import Nri.Ui.ClickableText.V4 as ClickableText
import Nri.Ui.Colors.Extra as ColorsExtra
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.FocusRing.V1 as FocusRing
@ -51,7 +52,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =
@ -69,7 +70,19 @@ example =
, Text.caption [ Text.plaintext "Accordion content." ]
]
]
, about = []
, about =
[ ul [ css [ paddingLeft (px 16), margin zero ] ]
[ li [] [ text "The Accordion component is designed to be used when you have either a list or a tree of expandables. It may also be used when there's only one expandable. " ]
, li []
[ text "Devs should watch the entirety of "
, ClickableText.link "Tessa's Accordion demo"
[ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/kLjOvS0PX5y-YYas6VmtUf5eEb1ViqNKKB-01gCELXG5tMjINEdop6dXrmfCyfC1A3Xj9kTUK8eIDe0.LO5NQR0X3udwz13x?canPlayFromShare=true&from=share_recording_detail&startTime=1681398154000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2F6R2Tk0FkzAYJ-44Q4Qs2Dx2RPR1GCXOCcaQsEai6vbtkO8oo9Ke8-_goIVwPDn9I.VVXdtb2PlpuTEqGs%3FstartTime%3D1681398154000"
, ClickableText.appearsInline
]
, text " before using. Discussion of how to attach styles correctly begins at 5:10."
]
]
]
, view = view
, categories = [ Layout ]
, keyboardSupport =

2
component-catalog/src/Examples/AnimatedIcon.elm
View File

@ -40,7 +40,7 @@ example =
, version = version
, categories = [ Animations, Icons ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Balloon.elm
View File

@ -41,7 +41,7 @@ example =
, version = version
, categories = [ Messaging ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

6
component-catalog/src/Examples/Block.elm
View File

@ -48,7 +48,7 @@ example =
, version = version
, categories = [ Instructional ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =
@ -80,11 +80,15 @@ example =
|> p [ css [ Fonts.baseFont, Css.fontSize (Css.px 12), Css.margin Css.zero ] ]
]
, about =
[ Text.mediumBody
[ Text.html
[ text "You might also know the Block element as a “Display Element”. Learn more in "
, ClickableText.link "Display Elements and Scaffolding Container: additional things to know"
[ ClickableText.linkExternal "https://paper.dropbox.com/doc/Display-Elements-and-Scaffolding-Container-additional-things-to-know--BwRhBMKyXFFSWz~1mljN29bcAg-6vszpNDLoYIiMyg7Wv66s"
]
]
]
]
, view =
\ellieLinkConfig state ->
let

20
component-catalog/src/Examples/BreadCrumbs.elm
View File

@ -18,6 +18,7 @@ import Example exposing (Example)
import Html.Styled.Attributes exposing (css, href)
import Nri.Ui.AssignmentIcon.V2 as AssignmentIcon
import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs exposing (BreadCrumbAttribute, BreadCrumbs)
import Nri.Ui.ClickableText.V4 as ClickableText
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Heading.V3 as Heading
@ -25,6 +26,7 @@ import Nri.Ui.Html.V3 exposing (viewJust)
import Nri.Ui.Spacing.V1 as Spacing
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Nri.Ui.Table.V7 as Table
import Nri.Ui.Text.V6 as Text
import Nri.Ui.UiIcon.V1 as UiIcon
@ -50,7 +52,7 @@ example =
, version = version
, categories = [ Navigation ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =
@ -71,7 +73,21 @@ example =
, previewText "Sub-Category "
]
]
, about = []
, about =
[ Text.mediumBody [ Text.markdown "`BreadCrumbs` orient users and provide convenient links to go \"up\" to parent pages." ]
, Text.mediumBody [ Text.markdown "Typically, you'll use `Header.view` (rather than `BreadCrumbs.view`) to render primary/`h1`-level `BreadCrumbs`. You may use `BreadCrumbs.viewSecondary` to render `h2`-level `BreadCrumbs`." ]
, Text.mediumBody [ Text.markdown "You should use `BreadCrumbs.headerId` to move focus to the current `h1` or `h2` and `BreadCrumbs.toPageTitle` to dynamically change the title when the page context changes." ]
, Text.mediumBody
[ Text.html
[ text "This and more is explained in depth in Tessa's "
, ClickableText.link "BreadCrumbs component demo"
[ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/x1x2Vz0fpj-qz0qf5gi5cpTy9Is1sIWGfwCoZ1_iOELkmkBtGUpdKyD6TydBM9vvFgJdD0jP3DUmZp4K.BU8uDgAVoRddWSd2?canPlayFromShare=true&from=share_recording_detail&startTime=1682608412000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2FtmIuIbuqWmFU20191vHs15QJv1ikMYQrcSKLXOMOOXlDQTHOg2-23ehZbZyG9f8L.c05C6jZecqKyPjub%3FstartTime%3D1682608412000"
, ClickableText.appearsInline
]
, text "."
]
]
]
, view =
\ellieLinkConfig state ->
let

17
component-catalog/src/Examples/Button.elm
View File

@ -20,6 +20,7 @@ import Examples.RadioButtonDotless as RadioButtonDotlessExample
import Html.Styled exposing (..)
import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.Button.V10 as Button
import Nri.Ui.ClickableText.V4 as ClickableText
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V3 as Heading
import Nri.Ui.Message.V4 as Message
@ -40,7 +41,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =
@ -76,12 +77,14 @@ example =
]
]
, about =
[ let
url =
Routes.exampleHref RadioButtonDotlessExample.example
in
Message.view
[ Message.markdown <| "Looking for a group of buttons where only one button is selectable at a time? Check out [RadioButtonDotless](" ++ url ++ ")"
[ Message.view
[ Message.html
[ text "Looking for a group of buttons where only one button is selectable at a time? Check out "
, ClickableText.link "RadioButtonDotless"
[ ClickableText.href (Routes.exampleHref RadioButtonDotlessExample.example)
, ClickableText.appearsInline
]
]
]
]
, view = \ellieLinkConfig state -> [ viewButtonExamples ellieLinkConfig state ]

2
component-catalog/src/Examples/Carousel.elm
View File

@ -206,7 +206,7 @@ example =
, result = "Select the tab to the right of the currently-selected Tab"
}
]
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Checkbox.elm
View File

@ -48,7 +48,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = preview

2
component-catalog/src/Examples/ClickableSvg.elm
View File

@ -39,7 +39,7 @@ example =
, version = version
, categories = [ Buttons, Icons ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/ClickableText.elm
View File

@ -35,7 +35,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Colors.elm
View File

@ -43,7 +43,7 @@ example =
, version = 1
, categories = [ Atoms ]
, keyboardSupport = []
, state = ()
, init = ()
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Confetti.elm
View File

@ -42,7 +42,7 @@ example =
, version = version
, categories = [ Animations ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions =
\state ->

2
component-catalog/src/Examples/Container.elm
View File

@ -38,7 +38,7 @@ example =
, version = version
, categories = [ Layout ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Divider.elm
View File

@ -28,7 +28,7 @@ example =
, version = 2
, categories = [ Layout ]
, keyboardSupport = []
, state = {}
, init = {}
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview = [ Divider.view "Dividing Line" ]

7
component-catalog/src/Examples/FocusRing.elm
View File

@ -27,6 +27,7 @@ import Nri.Ui.Spacing.V1 as Spacing
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Switch.V3 as Switch
import Nri.Ui.Table.V7 as Table
import Nri.Ui.Text.V6 as Text
import Nri.Ui.UiIcon.V1 as UiIcon
import Task
@ -38,7 +39,7 @@ example =
, version = 1
, categories = [ Atoms ]
, keyboardSupport = []
, state = { isAccordionOpen = False }
, init = { isAccordionOpen = False }
, update = update
, subscriptions = \_ -> Sub.none
, preview =
@ -46,6 +47,8 @@ example =
, example_ FocusRing.tightStyles
]
, about =
[ Text.mediumBody
[ Text.html
[ text "Custom high-contrast focus ring styles. Learn more about this component in "
, ClickableText.link "Custom Focus Rings on the NoRedInk blog"
[ ClickableText.linkExternal "https://blog.noredink.com/post/703458632758689792/custom-focus-rings"
@ -53,6 +56,8 @@ example =
]
, text "."
]
]
]
, view =
\_ state ->
[ Heading.h2

7
component-catalog/src/Examples/Fonts.elm
View File

@ -16,6 +16,7 @@ import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Heading.V3 as Heading
import Nri.Ui.Spacing.V1 as Spacing
import Nri.Ui.Table.V7 as Table
import Nri.Ui.Text.V6 as Text
{-| -}
@ -35,7 +36,7 @@ example =
, version = 1
, categories = [ Text, Atoms ]
, keyboardSupport = []
, state = ()
, init = ()
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview =
@ -45,6 +46,8 @@ example =
]
|> List.map viewPreview
, about =
[ Text.mediumBody
[ Text.html
[ Html.text "Learn more about kid-friendly and accessible fonts starting at 24:40 in "
, ClickableText.link "Kids Websites: Where Fun and Accessibility Come to Play"
[ ClickableText.linkExternal "https://www.deque.com/axe-con/sessions/kids-websites-where-fun-and-accessibility-come-to-play/"
@ -57,6 +60,8 @@ example =
]
, Html.text "."
]
]
]
, view =
\ellieLinkConfig _ ->
let

2
component-catalog/src/Examples/Header.elm
View File

@ -45,7 +45,7 @@ example =
, version = version
, categories = [ Layout ]
, keyboardSupport = []
, state = init Nothing
, init = init Nothing
, update = update
, subscriptions = \_ -> Sub.none
, preview = [ viewPreview ]

2
component-catalog/src/Examples/Heading.elm
View File

@ -36,7 +36,7 @@ example =
, version = version
, categories = [ Text ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Highlighter.elm
View File

@ -47,7 +47,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.map HighlighterMsg subscriptions
, preview =

2
component-catalog/src/Examples/HighlighterToolbar.elm
View File

@ -39,7 +39,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

19
component-catalog/src/Examples/IconExamples.elm
View File

@ -19,6 +19,7 @@ import Code
import Css
import Css.Global
import Example exposing (Example)
import ExampleSection
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Attributes exposing (css)
import Html.Styled.Events as Events
@ -52,7 +53,7 @@ example config =
, version = config.version
, categories = [ Icons ]
, keyboardSupport = []
, state = init config
, init = init config
, update = update
, subscriptions = \_ -> Sub.none
, preview = config.preview
@ -200,7 +201,8 @@ view settings groups =
viewExampleSection ( group, values ) =
viewWithCustomStyles settings group values
in
Heading.h2 [ Heading.plaintext "Grouped Icons" ]
ExampleSection.sectionWithCss "About" [ Css.flex (Css.int 1) ] Text.smallBody [ aboutMsg ]
:: Heading.h2 [ Heading.plaintext "Grouped Icons", Heading.css [ Css.marginTop (Css.px 10) ] ]
:: viewSettings settings
:: List.map viewExampleSection groups
++ [ Html.section []
@ -214,7 +216,18 @@ view settings groups =
]
{-| -}
aboutMsg : Text.Attribute msg
aboutMsg =
Text.markdown
"""
- Our icons are Elm SVGs, not separate files or sprites. We use an opaque type to represent them, which enables nice type-safe composability across our components.
- For decorative SVGs (which is the default), we add `aria-hidden=true` to the SVG node.
- For non-decorative SVGs, we use Pattern #5 `<svg>` + `role='img'` + `<title>` from [Accessible SVGs: Perfect Patterns For Screen Reader Users](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/).
- Instructions for adding new SVG icons can be found in the [monolith README](https://github.com/NoRedInk/NoRedInk/blob/master/monolith/README.md#adding-new-svg-icons).
"""
viewWithCustomStyles : Settings -> String -> List ( String, Svg.Svg, List Css.Style ) -> Html msg
viewWithCustomStyles { showIconName } headerText icons =
Html.section

2
component-catalog/src/Examples/Loading.elm
View File

@ -90,7 +90,7 @@ example =
, version = 1
, categories = [ Animations ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = subscriptions
, preview =

73
component-catalog/src/Examples/Menu.elm
View File

@ -54,7 +54,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Layout ]
@ -388,6 +388,77 @@ view ellieLinkConfig state =
]
}
]
, Heading.h2
[ Heading.plaintext "Menu trigger base styles"
, Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ]
]
, Table.view []
[ Table.string
{ header = "Trigger type"
, value = .menu
, width = Css.pct 30
, cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle, Css.fontWeight Css.bold ]
, sort = Nothing
}
, Table.custom
{ header = text "Example"
, view = .example
, width = Css.px 300
, cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ]
, sort = Nothing
}
]
[ { menu = "Menu.defaultTrigger"
, example =
Menu.view (FocusAndToggle "defaultTrigger")
[ Menu.defaultTrigger "Log in" []
, Menu.isOpen (isOpen "defaultTrigger")
, Menu.buttonId "defaultTrigger"
, Menu.menuId "defaultTrigger"
]
[]
}
, { menu = "Menu.button"
, example =
Menu.view (FocusAndToggle "button")
[ Menu.button "Log in" []
, Menu.isOpen (isOpen "button")
, Menu.buttonId "button"
, Menu.menuId "button"
]
[]
}
, { menu = "Menu.clickableText"
, example =
Menu.view (FocusAndToggle "clickableText")
[ Menu.clickableText "Log in" []
, Menu.isOpen (isOpen "clickableText")
, Menu.buttonId "clickableText"
, Menu.menuId "clickableText"
]
[]
}
, { menu = "Menu.clickableSvg with UiIcon.gear"
, example =
Menu.view (FocusAndToggle "clickableSvg")
[ Menu.clickableSvg "Log in" UiIcon.gear []
, Menu.isOpen (isOpen "clickableSvg")
, Menu.buttonId "clickableSvg"
, Menu.menuId "clickableSvg"
]
[]
}
, { menu = "Menu.clickableSvgWithoutIndicator with UiIcon.gear"
, example =
Menu.view (FocusAndToggle "clickableSvgWithoutIndicator")
[ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear []
, Menu.isOpen (isOpen "clickableSvgWithoutIndicator")
, Menu.buttonId "clickableSvgWithoutIndicator"
, Menu.menuId "clickableSvgWithoutIndicator"
]
[]
}
]
]

2
component-catalog/src/Examples/Message.elm
View File

@ -154,7 +154,7 @@ example =
, version = version
, categories = [ Messaging ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Modal.elm
View File

@ -136,7 +136,7 @@ example =
, result = "If 'dismissOnEscAndOverlayClick' is set to true, closes the modal. Else, does nothing."
}
]
, state = init
, init = init
, update = update
, subscriptions = subscriptions
, preview =

2
component-catalog/src/Examples/Outline.elm
View File

@ -42,7 +42,7 @@ example =
, version = version
, categories = [ Layout, Instructional ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = [ preview ]

2
component-catalog/src/Examples/Page.elm
View File

@ -61,7 +61,7 @@ example =
, version = version
, categories = [ Messaging ]
, keyboardSupport = []
, state = controlSettings
, init = controlSettings
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Pagination.elm
View File

@ -38,7 +38,7 @@ example =
, version = version
, categories = [ Navigation ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Panel.elm
View File

@ -40,7 +40,7 @@ example =
, version = version
, categories = [ Layout ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/PremiumCheckbox.elm
View File

@ -45,7 +45,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = preview

2
component-catalog/src/Examples/QuestionBox.elm
View File

@ -46,7 +46,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Instructional ]

17
component-catalog/src/Examples/RadioButton.elm
View File

@ -26,6 +26,7 @@ import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import KeyboardSupport exposing (Direction(..), Key(..))
import Nri.Ui.Button.V10 as Button
import Nri.Ui.ClickableText.V4 as ClickableText
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Data.PremiumDisplay as PremiumDisplay
import Nri.Ui.Heading.V3 as Heading
@ -58,17 +59,19 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = subscriptions
, preview = preview
, about =
[ let
url =
Routes.exampleHref RadioButtonDotlessExample.example
in
Message.view
[ Message.markdown <| "Looking for radio button that's styled more like a button?<br />Check out [RadioButtonDotless](" ++ url ++ ")"
[ Message.view
[ Message.html
[ text "Looking for a group of buttons where only one button is selectable at a time? Check out "
, ClickableText.link "RadioButtonDotless"
[ ClickableText.href (Routes.exampleHref RadioButtonDotlessExample.example)
, ClickableText.appearsInline
]
]
]
]
, view = view

2
component-catalog/src/Examples/RadioButtonDotless.elm
View File

@ -157,7 +157,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = preview

2
component-catalog/src/Examples/RingGauge.elm
View File

@ -40,7 +40,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = controlSettings
, init = controlSettings
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Progress, Icons ]

2
component-catalog/src/Examples/SegmentedControl.elm
View File

@ -50,7 +50,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = [ viewPreview ]

2
component-catalog/src/Examples/Select.elm
View File

@ -39,7 +39,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Inputs ]

2
component-catalog/src/Examples/Shadows.elm
View File

@ -32,7 +32,7 @@ example =
, version = 1
, categories = [ Atoms ]
, keyboardSupport = []
, state = ()
, init = ()
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview = List.map (\( _, style, _ ) -> viewPreviewShadow style) allShadows

7
component-catalog/src/Examples/SideNav.elm
View File

@ -23,6 +23,7 @@ import Nri.Ui.Heading.V3 as Heading
import Nri.Ui.SideNav.V5 as SideNav
import Nri.Ui.Spacing.V1 as Spacing
import Nri.Ui.Text.V6 as Text
import Nri.Ui.UiIcon.V1 as UiIcon
version : Int
@ -35,7 +36,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Layout, Navigation ]
@ -145,9 +146,9 @@ view ellieLinkConfig state =
, Text.css [ Css.paddingBottom (Css.px 10) ]
]
]
, SideNav.entry "Entry" []
, SideNav.entry "Entry" [ SideNav.icon UiIcon.person ]
, SideNav.entryWithChildren "Entry with Children"
[]
[ SideNav.icon UiIcon.bulb ]
[ SideNav.entry "Child 1"
[ SideNav.href "complex-example__child-1"
]

2
component-catalog/src/Examples/SortableTable.elm
View File

@ -41,7 +41,7 @@ example =
, version = version
, categories = [ Layout ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Spacing.elm
View File

@ -42,7 +42,7 @@ example =
, version = version
, categories = [ Layout ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = preview

2
component-catalog/src/Examples/Switch.elm
View File

@ -41,7 +41,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Table.elm
View File

@ -39,7 +39,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = controlSettings
, init = controlSettings
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Layout ]

2
component-catalog/src/Examples/Tabs.elm
View File

@ -57,7 +57,7 @@ example =
, result = "Select the tab to the right of the currently-selected Tab"
}
]
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/TabsMinimal.elm
View File

@ -54,7 +54,7 @@ example =
, result = "Select the tab to the right of the currently-selected Tab"
}
]
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Text.elm
View File

@ -38,7 +38,7 @@ example =
, version = version
, categories = [ Text ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/TextArea.elm
View File

@ -39,7 +39,7 @@ example : Example State Msg
example =
{ name = moduleName
, version = version
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, categories = [ Inputs ]

2
component-catalog/src/Examples/TextInput.elm
View File

@ -42,7 +42,7 @@ example =
, version = version
, categories = [ Inputs ]
, keyboardSupport = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

2
component-catalog/src/Examples/Tooltip.elm
View File

@ -59,7 +59,7 @@ example =
, result = "While focusing a tooltip trigger, opens/closes the tooltip. May trigger the underlying action too."
}
]
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, preview =

5
component-catalog/src/Guidance.elm
View File

@ -2,13 +2,18 @@ module Guidance exposing (..)
import Html.Styled exposing (..)
import Nri.Ui.ClickableText.V4 as ClickableText
import Nri.Ui.Text.V6 as Text
useATACGuide : String -> List (Html msg)
useATACGuide moduleName =
[ Text.mediumBody
[ Text.html
[ text ("To ensure your use of " ++ moduleName ++ " is accessible to assistive technology, please review the ")
, ClickableText.link "Assistive technology notification design & development guide"
[ ClickableText.linkExternal "https://noredinkaccessibility.screenstepslive.com/a/1651037-assistive-technology-notification-design-development-guide"
]
, text (" to see if your use case fits any listed in the guide. If it does, please follow the guide to learn how to properly implement " ++ moduleName ++ ".")
]
]
]

18
component-catalog/src/UsageExample.elm
View File

@ -18,7 +18,7 @@ import Nri.Ui.Text.V6 as Text
type alias UsageExample state msg =
{ name : String
, state : state
, init : state
, update : msg -> state -> ( state, Cmd msg )
, subscriptions : state -> Sub msg
, view : state -> List (Html msg)
@ -49,7 +49,7 @@ wrapMsg :
-> UsageExample state msg2
wrapMsg wrapMsg_ unwrapMsg example =
{ name = example.name
, state = example.state
, init = example.init
, update =
\msg2 state ->
case unwrapMsg msg2 of
@ -76,7 +76,7 @@ wrapState :
-> UsageExample state2 msg
wrapState wrapState_ unwrapState example =
{ name = example.name
, state = wrapState_ example.state
, init = wrapState_ example.init
, update =
\msg state2 ->
case unwrapState state2 of
@ -140,14 +140,14 @@ preview_ { swallowEvent, navigate, exampleHref } example =
]
view : UsageExample state msg -> Html msg
view example =
view : UsageExample state msg -> state -> Html msg
view example state =
Html.div [ Attributes.id (String.replace " " "-" example.name) ]
(view_ example)
(view_ example state)
view_ : UsageExample state msg -> List (Html msg)
view_ example =
view_ : UsageExample state msg -> state -> List (Html msg)
view_ example state =
[ Html.div
[ Attributes.css
[ Css.displayFlex
@ -163,7 +163,7 @@ view_ example =
example.about
]
, Html.div [ Attributes.css [ Css.marginBottom (Css.px 200) ] ]
(example.view example.state)
(example.view state)
]

2
component-catalog/src/UsageExamples/ClickableCardWithTooltip.elm
View File

@ -21,7 +21,7 @@ example : UsageExample State Msg
example =
{ name = "Clickable Card with Tooltip"
, categories = [ Messaging ]
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, about = []

2
component-catalog/src/UsageExamples/FocusLoop.elm
View File

@ -31,7 +31,7 @@ example : UsageExample State Msg
example =
{ name = "Focus Loop"
, categories = []
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, about = []

2
component-catalog/src/UsageExamples/Form.elm
View File

@ -21,7 +21,7 @@ example : UsageExample State Msg
example =
{ name = "Form"
, categories = [ Inputs ]
, state = init
, init = init
, update = update
, subscriptions = \_ -> Sub.none
, about = []

1
deprecated-modules.csv
View File

@ -2,6 +2,7 @@ Nri.Ui.Accordion.V3,upgrade to V4
Nri.Ui.Block.V4,upgrade to V6
Nri.Ui.Block.V5,upgrade to V6
Nri.Ui.Carousel.V1,upgrade to V2
Nri.Ui.ClickableText.V3,upgrade to V4
Nri.Ui.WhenFocusLeaves.V1,upgrade to V2
Nri.Ui.Highlighter.V4,upgrade to V5
Nri.Ui.Mark.V2,upgrade to V5

1 Nri.Ui.Accordion.V3 upgrade to V4
2 Nri.Ui.Block.V4 upgrade to V6
3 Nri.Ui.Block.V5 upgrade to V6
4 Nri.Ui.Carousel.V1 upgrade to V2
5 Nri.Ui.ClickableText.V3 upgrade to V4
6 Nri.Ui.WhenFocusLeaves.V1 upgrade to V2
7 Nri.Ui.Highlighter.V4 upgrade to V5
8 Nri.Ui.Mark.V2 upgrade to V5

2
elm.json
View File

@ -3,7 +3,7 @@
"name": "NoRedInk/noredink-ui",
"summary": "UI Widgets we use at NRI",
"license": "BSD-3-Clause",
"version": "27.9.0",
"version": "27.10.0",
"exposed-modules": [
"Browser.Events.Extra",
"Nri.Test.KeyboardHelpers.V1",

1
flake.nix
View File

@ -39,6 +39,7 @@
# preview dependencies
pkgs.python3
pkgs.watchexec
pkgs.elmPackages.elm-live
# stuff we need for running builds in a `nix-shell --pure` environment.
pkgs.which

3
forbidden-imports.toml
View File

@ -88,6 +88,9 @@ hint = 'upgrade to V7'
hint = 'upgrade to V2'
usages = ['component-catalog-app/Examples/Tooltip.elm']
[forbidden."Nri.Ui.ClickableText.V3"]
hint = 'upgrade to V4'
[forbidden."Nri.Ui.Container.V1"]
hint = 'upgrade to V2'

2
package.json
View File

@ -30,7 +30,7 @@
"@axe-core/puppeteer": "^4.4.3",
"@percy/cli": "^1.4.0",
"@percy/puppeteer": "^2.0.2",
"axe-core": "^4.8.0",
"axe-core": "^4.8.3",
"browserify": "^17.0.0",
"elm-test": "0.19.1-revision12",
"expect": "29.5.0",

11
script/develop.sh
View File

@ -23,13 +23,4 @@ To quit, hit ctrl-c.
EOF
# start a web server in the background and tear it down when exiting
./script/serve.sh public &
SERVER_PID=$!
cleanup() {
kill "$SERVER_PID"
}
trap cleanup EXIT INT
# start a watcher. This loops forever, so we don't need to loop ourselves.
watchexec --clear --postpone -- shake --compact "$SHAKE_TARGET"
(cd ./component-catalog; elm-live ./src/Main.elm --pushstate --hot --dir=../$SHAKE_TARGET -- --output=../$SHAKE_TARGET/elm.js)

35
script/legacy-develop.sh Executable file
View File

@ -0,0 +1,35 @@
#!/usr/bin/env bash
set -euo pipefail
if test -d public; then
rm -rf public
fi
SHAKE_TARGET="${1:-public}"
shake --compact "$SHAKE_TARGET"
cat <<EOF
== 👋 Hello! ==================================================================
I'm watching files in component-catalog and src for changes. If you make any
changes, I'll try to be smart about what should change (things end up in the
"public" directory if you want to check my work.) If you remove a file and it's
still showing up, delete the "public" directory and restart me.
To quit, hit ctrl-c.
== thaaat's it from me! =======================================================
EOF
# start a web server in the background and tear it down when exiting
./script/serve.sh public &
SERVER_PID=$!
cleanup() {
kill "$SERVER_PID"
}
trap cleanup EXIT INT
# start a watcher. This loops forever, so we don't need to loop ourselves.
watchexec --clear --postpone -- shake --compact "$SHAKE_TARGET"

8
src/Nri/Ui/SideNav/V5.elm
View File

@ -21,6 +21,7 @@ module Nri.Ui.SideNav.V5 exposing
- adds `aria-current="true"` to the parent of the current page
- expose missing import
- correct locked premium content to match `ul>li` structure
- honor icon/rightIcon for entries with children
### Changes from V4
@ -456,7 +457,7 @@ viewSidebarEntry config extraStyles entry_ =
id_ =
AttributesExtra.safeIdWithPrefix "sidenav-group" entryConfig.title
in
li []
li [ Attributes.css extraStyles ]
[ styled span
(sharedEntryStyles
++ [ backgroundColor Colors.gray92
@ -467,7 +468,10 @@ viewSidebarEntry config extraStyles entry_ =
]
)
[ Attributes.id id_, Aria.currentItem True ]
[ text entryConfig.title ]
[ viewLeftIcon entryConfig
, text entryConfig.title
, viewRightIcon entryConfig
]
, ul
[ Attributes.css
([ listStyle none

1
src/Nri/Ui/Table/V7.elm
View File

@ -261,6 +261,7 @@ headerStyles =
[ padding4 (px 11) (px 12) (px 14) (px 12)
, textAlign left
, fontWeight bold
, color gray20
]