diff --git a/component-catalog/src/Examples/Accordion.elm b/component-catalog/src/Examples/Accordion.elm index d3180b0a..6520feb5 100644 --- a/component-catalog/src/Examples/Accordion.elm +++ b/component-catalog/src/Examples/Accordion.elm @@ -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 @@ -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 =