NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-03 03:46:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make more realistic examples of the different attribute types

Browse Source
This commit is contained in:
Tessa Kelly 2022-04-25 17:04:34 -07:00
parent 2885839d7a
commit e871638d92
1 changed files with 15 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
styleguide-app/Examples/Tooltip.elm
View File

@ -163,19 +163,17 @@ viewPrimaryLabelTooltip openTooltip =
{ id = "tooltip__primaryLabel"
, trigger =
\eventHandlers ->
ClickableText.button "primaryLabel"
[ ClickableText.custom eventHandlers
ClickableSvg.button "Download"
UiIcon.download
[ ClickableSvg.custom eventHandlers
]
}
[ Tooltip.html
[ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content"
, Html.br []
, Html.text "e.g. when the trigger content is an icon with no text."
]
, Tooltip.auxillaryDescription
[ Tooltip.plaintext "Download"
, Tooltip.primaryLabel
, Tooltip.onHover (ToggleTooltip PrimaryLabel)
, Tooltip.open (openTooltip == Just PrimaryLabel)
, Tooltip.onBottom
, Tooltip.smallPadding
, Tooltip.fitToContent
]
@ -185,31 +183,26 @@ viewAuxillaryDescriptionToolip openTooltip =
{ id = "tooltip__auxillaryDescription"
, trigger =
\eventHandlers ->
ClickableText.button "auxillaryDescription"
[ ClickableText.custom eventHandlers
ClickableSvg.button "Period 1"
UiIcon.class
[ ClickableSvg.custom eventHandlers
]
}
[ Tooltip.html
[ Html.text "An auxillary description is used when the tooltip content provides supplementary information about its trigger content"
, Html.br []
, Html.text "e.g. when the trigger content is a word in the middle of a body of text that requires additional explanation."
]
[ Tooltip.plaintext "Manage class and students"
, Tooltip.auxillaryDescription
, Tooltip.onHover (ToggleTooltip AuxillaryDescription)
, Tooltip.open (openTooltip == Just AuxillaryDescription)
, Tooltip.onBottom
, Tooltip.smallPadding
, Tooltip.fitToContent
]
viewToggleTip : Maybe TooltipId -> Html Msg
viewToggleTip openTooltip =
Tooltip.toggleTip { label = "tooltip__learn-more" }
[ Tooltip.plaintext "There's also a convenient `toggleTip` helper, for when you want to add some helpful extra info."
, Tooltip.primaryLabel
Tooltip.toggleTip { label = "What is mastery?" }
[ Tooltip.plaintext "Students master topics by correctly answering a series of questions of varying difficulty and scope."
, Tooltip.onHover (ToggleTooltip LearnMore)
, Tooltip.open (openTooltip == Just LearnMore)
, Tooltip.smallPadding
, Tooltip.fitToContent
]