NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-09-21 04:07:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into bat/demos

Browse Source
This commit is contained in:
Tessa Kelly 2024-02-13 16:40:30 -07:00
commit 47f9a180b1
8 changed files with 270 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,18 +87,22 @@ example =
[ li []
[ 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"
, ClickableText.appearsInline
]
, text ", which identifies a number of interesting edge cases and known trade-offs."
]
, li []
[ ClickableText.link "Tessa's blog post"
[ ClickableText.linkExternal "https://blog.noredink.com/post/710448547697426432/word-labels]"
, ClickableText.appearsInline
]
, text " explaining the initial constraints and approach."
]
, li []
[ ClickableText.link "Tessa's demo on early versions of Block and Question Block"
[ ClickableText.linkExternal "https://www.dropbox.com/preview/NRI%20Engineering/Demos/2022-12-22%20-%20Tessa%20-%20QuestionBox%20and%20Block.mp4?role=work" ]
[ ClickableText.linkExternal "https://www.dropbox.com/preview/NRI%20Engineering/Demos/2022-12-22%20-%20Tessa%20-%20QuestionBox%20and%20Block.mp4?role=work"
, ClickableText.appearsInline
]
]
]
]

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

@ -10,7 +10,7 @@ import Accessibility.Styled.Key as Key
import Category exposing (Category(..))
import Code
import CommonControls
import Css exposing (middle, verticalAlign)
import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
@ -20,9 +20,9 @@ import Guidance
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.ClickableText.V4 as ClickableText
import Nri.Ui.Colors.V1 as Colors
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
import Nri.Ui.UiIcon.V1 as UiIcon
@ -78,31 +78,32 @@ type State
init : State
init =
Control.record Settings
|> Control.field "type"
(Control.choice
[ ( "button", Control.value Button )
, ( "link", Control.value Link )
, ( "linkExternal", Control.value LinkExternal )
]
)
|> Control.field "label" (Control.string "Clickable Text")
|> Control.field ""
(Control.list
|> ControlExtra.listItems "Icons"
(Control.list
|> CommonControls.icon moduleName ClickableText.icon
|> CommonControls.iconNotCheckedByDefault moduleName ClickableText.icon
|> CommonControls.rightIcon moduleName ClickableText.rightIcon
|> ControlExtra.optionalBoolListItem "hideIconForMobile"
( "ClickableText.hideIconForMobile", ClickableText.hideIconForMobile )
)
|> ControlExtra.listItems "State & Type"
(Control.list
|> ControlExtra.optionalBoolListItem "disabled"
( "ClickableText.disabled True", ClickableText.disabled True )
|> ControlExtra.optionalBoolListItem "submit (button only)"
( "ClickableText.submit", ClickableText.submit )
|> ControlExtra.optionalBoolListItem "opensModal (button only)"
( "ClickableText.opensModal", ClickableText.opensModal )
|> ControlExtra.optionalBoolListItem "disabled"
( "ClickableText.disabled True", ClickableText.disabled True )
)
|> ControlExtra.listItems "CSS & Extra style options"
|> ControlExtra.listItems "CSS"
(Control.list
|> ControlExtra.optionalBoolListItem "appearsInline"
( "ClickableText.appearsInline", ClickableText.appearsInline )
|> ControlExtra.optionalBoolListItem "hideTextForMobile"
( "ClickableText.hideTextForMobile", ClickableText.hideTextForMobile )
|> CommonControls.css
{ moduleName = moduleName
, use = ClickableText.css
@ -120,16 +121,39 @@ init =
, use = ClickableText.notMobileCss
}
)
|> ControlExtra.listItems "Compact mobile options"
(Control.list
|> ControlExtra.optionalBoolListItem "hideIconForMobile"
( "ClickableText.hideIconForMobile", ClickableText.hideIconForMobile )
|> ControlExtra.optionalBoolListItem "hideTextForMobile"
( "ClickableText.hideTextForMobile", ClickableText.hideTextForMobile )
)
|> ControlExtra.optionalListItem "Size and display options"
(CommonControls.choice moduleName
[ ( "appearsInline", ClickableText.appearsInline )
, ( "small", ClickableText.small )
, ( "medium", ClickableText.medium )
, ( "large", ClickableText.large )
, ( "modal", ClickableText.modal )
]
)
)
|> State
type alias Settings msg =
{ label : String
{ type_ : Type
, label : String
, attributes : List ( String, ClickableText.Attribute msg )
}
type Type
= Button
| Link
| LinkExternal
{-| -}
type Msg
= SetState (Control (Settings Msg))
@ -163,37 +187,150 @@ viewExamples ellieLinkConfig (State control) =
, version = version
, update = SetState
, settings = control
, mainType = Just "RootHtml.Html msg"
, extraCode = []
, mainType = Just "RootHtml.Html Msg"
, extraCode =
[ Code.newlines
, Code.unionType "Msg" [ "DoAThing" ]
]
, renderExample = Code.unstyledView
, toExampleCode =
\{ label, attributes } ->
let
toCode fName =
toCode fName extraAttrs =
Code.fromModule moduleName fName
++ " "
++ Code.string label
++ Code.listMultiline (List.map Tuple.first attributes) 1
++ Code.listMultiline
(extraAttrs ++ List.map Tuple.first attributes)
1
in
case settings.type_ of
Button ->
[ { sectionName = "Button"
, code = toCode "button"
, code =
toCode "button"
[ Code.fromModule moduleName "onClick "
++ "DoAThing"
]
}
, { sectionName = "Link"
, code = toCode "link"
]
Link ->
[ { sectionName = "Link"
, code =
toCode "link"
[ Code.fromModule moduleName "href "
++ Code.string "/"
]
}
]
LinkExternal ->
[ { sectionName = "Link"
, code =
toCode "link"
[ Code.fromModule moduleName "linkExternal "
++ Code.string "https://www.google.com"
]
}
]
}
, Heading.h2
[ Heading.plaintext "Customizable Examples"
[ Heading.plaintext "Customizable Example"
, Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
]
, buttons settings
, div
[ css
[ Css.displayFlex
, Css.justifyContent Css.center
, Css.alignItems Css.center
, Css.minHeight (Css.px 150)
]
]
[ case settings.type_ of
Button ->
ClickableText.button settings.label
(ClickableText.onClick (ShowItWorked moduleName "customizable example")
:: List.map Tuple.second settings.attributes
)
Link ->
ClickableText.link settings.label
(ClickableText.href "/"
:: List.map Tuple.second settings.attributes
)
LinkExternal ->
ClickableText.link settings.label
(ClickableText.linkExternal "https://www.google.com"
:: List.map Tuple.second settings.attributes
)
]
, Heading.h2
[ Heading.plaintext "Set Sizes Examples"
, Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
]
, sizeExamples settings
, Heading.h2
[ Heading.plaintext "Inline ClickableText Examples"
, Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
]
, Text.smallBody (inlineExample "Text.smallBody")
, Text.mediumBody (inlineExample "Text.mediumBody")
, Text.caption [ Text.markdown "Be sure to add the `appearsInline` property if the `ClickableText` appears inline. Otherwise, your styles will not match up nicely. You should not add an explicit size." ]
, Table.view []
[ Table.custom
{ header = text "Displayed"
, view = \( view, name ) -> view (inlineExample name)
, width = Css.pct 70
, cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ]
, sort = Nothing
}
, Table.custom
{ header = text "Pattern"
, view =
\( _, textName ) ->
code [ css [ Css.fontSize (Css.px 12) ] ]
[ text
(Code.fromModule "Text"
textName
++ Code.listMultiline
[ Code.fromModule "Text" "html"
++ Code.listMultiline
[ "…"
, Code.fromModule moduleName
"link "
++ Code.string "internal links"
++ Code.listMultiline
[ Code.fromModule moduleName "appearsInline"
, Code.fromModule moduleName "href " ++ Code.string "/"
]
3
, "…"
]
2
]
1
)
]
, width = Css.px 10
, cellStyles =
always
[ Css.padding2 (Css.px 14) (Css.px 7)
, Css.verticalAlign Css.top
, Css.whiteSpace Css.preWrap
]
, sort = Nothing
}
]
[ ( Text.caption, "caption" )
, ( Text.smallBody, "smallBody" )
, ( Text.smallBodyGray, "smallBodyGray" )
, ( Text.mediumBody, "mediumBody" )
, ( Text.mediumBodyGray, "mediumBodyGray" )
, ( Text.ugSmallBody, "ugSmallBody" )
, ( Text.ugMediumBody, "ugMediumBody" )
]
|> List.singleton
|> div [ css [ Css.overflow Css.auto ] ]
]
|> div []
@ -249,46 +386,72 @@ sizes =
]
buttons : Settings Msg -> Html Msg
buttons settings =
let
sizeRow label render =
row label (List.map render sizes)
in
table []
[ tr [] (td [] [] :: List.map (\( size, sizeLabel ) -> th [] [ text sizeLabel ]) sizes)
, sizeRow ".link"
(\( size, sizeLabel ) ->
ClickableText.link settings.label
(size :: List.map Tuple.second settings.attributes)
|> exampleCell
)
, sizeRow ".button"
(\( size, sizeLabel ) ->
ClickableText.button settings.label
(size
:: ClickableText.onClick (ShowItWorked moduleName sizeLabel)
:: List.map Tuple.second settings.attributes
)
|> exampleCell
)
sizeExamples : Settings Msg -> Html Msg
sizeExamples settings =
Table.view []
[ Table.custom
{ header = text "Size"
, view =
\{ sizeName } ->
code [ css [ Css.fontSize (Css.px 12) ] ]
[ text (Code.fromModule "ClickableText" sizeName)
]
, width = Css.px 10
, cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ]
, sort = Nothing
}
, Table.custom
{ header = text "Button"
, view = \{ size } -> sizeExamplesFor ClickableText.button [ size ]
, width = Css.px 10
, cellStyles =
always
[ Css.padding2 (Css.px 14) (Css.px 7)
, Css.verticalAlign Css.top
]
, sort = Nothing
}
, Table.custom
{ header = text "Link"
, view = \{ size } -> sizeExamplesFor ClickableText.link [ size ]
, width = Css.px 10
, cellStyles =
always
[ Css.padding2 (Css.px 14) (Css.px 7)
, Css.verticalAlign Css.top
]
, sort = Nothing
}
, Table.custom
{ header = text "External link"
, view = \{ size } -> sizeExamplesFor ClickableText.link [ size, ClickableText.linkExternal "https://www.google.com" ]
, width = Css.px 10
, cellStyles =
always
[ Css.padding2 (Css.px 14) (Css.px 7)
, Css.verticalAlign Css.top
]
, sort = Nothing
}
]
(List.map (\( size, sizeName ) -> { size = size, sizeName = sizeName }) sizes)
|> List.singleton
|> div [ css [ Css.overflow Css.auto ] ]
row : String -> List (Html msg) -> Html msg
row label tds =
tr [] (th [] [ td [] [ text label ] ] :: tds)
exampleCell : Html msg -> Html msg
exampleCell view =
td
[ css
[ verticalAlign middle
, Css.width (Css.px 200)
, Css.borderTop3 (Css.px 1) Css.solid Colors.gray85
sizeExamplesFor : (String -> List (ClickableText.Attribute msg) -> Html msg) -> List (ClickableText.Attribute msg) -> Html msg
sizeExamplesFor render attrs =
ul [ css [ Css.margin Css.zero ] ]
[ li [] [ render "No icons" attrs ]
, li [] [ render "Left icon" (attrs ++ [ ClickableText.icon UiIcon.arrowLeft ]) ]
, li [] [ render "Right icon" (attrs ++ [ ClickableText.rightIcon UiIcon.arrowRight ]) ]
, li []
[ render "Disabled w/icons"
(attrs
++ [ ClickableText.icon UiIcon.arrowLeft
, ClickableText.rightIcon UiIcon.arrowRight
, ClickableText.disabled True
]
)
]
]
[ view ]

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

@ -197,8 +197,7 @@ view ellieLinkConfig state =
(Code.newlineWithIndent 2
++ (Code.fromModule "ClickableText" "button " ++ Code.string "Button")
++ Code.listMultiline
[ Code.fromModule "ClickableText" "medium"
, Code.fromModule "ClickableText" "custom" ++ " attributes"
[ Code.fromModule "ClickableText" "custom" ++ " attributes"
]
3
)
@ -234,8 +233,7 @@ view ellieLinkConfig state =
[ Menu.entry "customizable-example" <|
\attrs ->
ClickableText.button "Button"
[ ClickableText.medium
, ClickableText.onClick (ConsoleLog "Interactive example")
[ ClickableText.onClick (ConsoleLog "Interactive example")
, ClickableText.custom attrs
]
]
@ -281,7 +279,6 @@ view ellieLinkConfig state =
\attrs ->
ClickableText.button "Hello"
[ ClickableText.onClick (ConsoleLog "Hello")
, ClickableText.medium
, ClickableText.custom attrs
]
, Menu.group "Menu group"
@ -289,7 +286,6 @@ view ellieLinkConfig state =
\attrs ->
ClickableText.button "Gift"
[ ClickableText.onClick (ConsoleLog "Gift")
, ClickableText.medium
, ClickableText.custom attrs
, ClickableText.icon UiIcon.gift
]
@ -297,7 +293,6 @@ view ellieLinkConfig state =
\attrs ->
ClickableText.button "Nope!"
[ ClickableText.onClick (ConsoleLog "Nope!")
, ClickableText.medium
, ClickableText.custom attrs
, ClickableText.icon UiIcon.null
]
@ -305,7 +300,6 @@ view ellieLinkConfig state =
\attrs ->
ClickableText.button "Skip"
[ ClickableText.onClick (ConsoleLog "Skip")
, ClickableText.medium
, ClickableText.custom attrs
]
]
@ -313,7 +307,6 @@ view ellieLinkConfig state =
\attrs ->
ClickableText.button "Performance"
[ ClickableText.onClick (ConsoleLog "Performance")
, ClickableText.medium
, ClickableText.custom attrs
]
]

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

@ -292,20 +292,21 @@ contentTypes :
}
contentTypes =
[ { contentType = "paragraph"
, content = Message.paragraph "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](google.com)."
, content = Message.paragraph "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](https://www.google.com)."
}
, { contentType = "plaintext"
, content = Message.plaintext "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](google.com)."
, content = Message.plaintext "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](https://www.google.com)."
}
, { contentType = "markdown"
, content = Message.markdown "Hello, there! Hope you're doing well. Use the following link to go to [a fake destination](google.com)."
, content = Message.markdown "Hello, there! Hope you're doing well. Use the following link to go to [a fake destination](https://www.google.com)."
}
, { contentType = "html"
, content =
Message.html
[ text "Hello, there! Hope you're doing well. Use the following link to go to "
, ClickableText.link "a fake destination"
[ ClickableText.href "google.com"
[ ClickableText.href "https://www.google.com"
, ClickableText.appearsInline
]
, text "."
]

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

@ -77,8 +77,7 @@ initViewSettings =
|> Control.field "Content"
(Control.stringTextarea <|
String.join "\n\n"
[ "Generally, you'll want to pair the Modal.warning theme with the Button.danger theme and the Modal.info theme with the Button.primary theme."
, "Muffin liquorice powder liquorice jujubes biscuit cookie candy canes lemon drops. Liquorice powder carrot cake dragée icing tootsie roll apple pie lemon drops lemon drops. Jujubes danish bear claw cotton candy. Dragée apple pie tiramisu. Sugar plum dessert pastry marzipan chocolate cake dragée sesame snaps. Marshmallow gingerbread lemon drops. Brownie chocolate fruitcake pastry. Powder jelly beans jujubes. Croissant macaroon dessert cookie candy canes jelly jujubes. Muffin liquorice ice cream wafer donut danish soufflé dragée chocolate bar. Candy croissant candy wafer toffee lemon drops croissant danish sugar plum. Cookie cake candy canes. Pastry powder muffin soufflé tootsie roll sweet cookie tiramisu."
[ "Muffin liquorice powder liquorice jujubes biscuit cookie candy canes lemon drops. Liquorice powder carrot cake dragée icing tootsie roll apple pie lemon drops lemon drops. Jujubes danish bear claw cotton candy. Dragée apple pie tiramisu. Sugar plum dessert pastry marzipan chocolate cake dragée sesame snaps. Marshmallow gingerbread lemon drops. Brownie chocolate fruitcake pastry. Powder jelly beans jujubes. Croissant macaroon dessert cookie candy canes jelly jujubes. Muffin liquorice ice cream wafer donut danish soufflé dragée chocolate bar. Candy croissant candy wafer toffee lemon drops croissant danish sugar plum. Cookie cake candy canes. Pastry powder muffin soufflé tootsie roll sweet cookie tiramisu."
, "Candy cake danish gingerbread. Caramels toffee cupcake toffee sweet. Gummi bears candy cheesecake sweet. Pie gingerbread sugar plum halvah muffin icing marzipan wafer icing. Candy fruitcake gummies icing marzipan. Halvah jelly beans candy candy canes biscuit bonbon sesame snaps. Biscuit carrot cake croissant cake chocolate lollipop candy biscuit croissant. Topping jujubes apple pie croissant chocolate cake. Liquorice cookie dragée gummies cotton candy fruitcake lemon drops candy canes. Apple pie lemon drops gummies cake chocolate bar cake jelly-o tiramisu. Chocolate bar icing pudding marshmallow cake soufflé soufflé muffin. Powder lemon drops biscuit sugar plum cupcake carrot cake powder cake dragée. Bear claw gummi bears liquorice sweet roll."
]
)
@ -184,7 +183,11 @@ example =
]
]
]
, about = [ Guidance.useATACGuide moduleName ]
, about =
[ Guidance.useATACGuide moduleName
, Text.smallBody
[ Text.markdown "Use `Button.modal` and/or `ClickableText.modal` within the `Modal` footer." ]
]
, view =
\ellieLinkConfig state ->
let

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

@ -66,7 +66,7 @@ message moduleName =
useATACGuide : String -> Html msg
useATACGuide moduleName =
Text.mediumBody
Text.smallBody
[ 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"

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.12.0",
"version": "27.12.1",
"exposed-modules": [
"Browser.Events.Extra",
"Nri.Test.KeyboardHelpers.V1",

18
src/Nri/Ui/ClickableText/V4.elm
View File

@ -14,7 +14,9 @@ module Nri.Ui.ClickableText.V4 exposing
, css, notMobileCss, mobileCss, quizEngineMobileCss, rightIconCss
)
{-|
{-| Patch changes
- switchs `Medium` size to the default
# Changes from V3
@ -117,7 +119,8 @@ small =
set (\attributes -> { attributes | size = Small })
{-| -}
{-| `Medium` is the default size.
-}
medium : Attribute msg
medium =
set (\attributes -> { attributes | size = Medium })
@ -387,7 +390,11 @@ disabled value =
-}
appearsInline : Attribute msg
appearsInline =
css
set
(\config ->
{ config
| customStyles =
List.append config.customStyles
[ Css.borderBottom3 (Css.px 1) Css.solid Colors.azure
, Css.Global.withAttribute "aria-disabled=true" [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ]
, Css.disabled [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ]
@ -396,6 +403,9 @@ appearsInline =
, Css.fontWeight Css.inherit
, Css.fontSize Css.inherit
]
, size = Inherited
}
)
{-| Specifies custom styles for the rightIcon
@ -695,7 +705,7 @@ type alias ClickableTextAttributes msg =
defaults : ClickableTextAttributes msg
defaults =
{ clickableAttributes = ClickableAttributes.init
, size = Inherited
, size = Medium
, label = ""
, icon = Nothing
, iconStyles = []