Merge pull request #756 from NoRedInk/tessa/standardize-text-api

Tessa/standardize text api

deprecated-modules.csv

@@ -8,4 +8,5 @@ Nri.Ui.RadioButton.V1,upgrade to V2
 Nri.Ui.Select.V5,upgrade to V7
 Nri.Ui.Table.V4,upgrade to V5
 Nri.Ui.Tabs.V6,upgrade to V7
+Nri.Ui.Text.V5,upgrade to V6
 Nri.Ui.Tooltip.V1,upgrade to V2

elm.json

@@ -61,6 +61,7 @@
         "Nri.Ui.Tabs.V6",
         "Nri.Ui.Tabs.V7",
         "Nri.Ui.Text.V5",
+        "Nri.Ui.Text.V6",
         "Nri.Ui.Text.Writing.V1",
         "Nri.Ui.TextArea.V4",
         "Nri.Ui.TextInput.V6",

forbidden-imports.toml

@@ -122,6 +122,9 @@ usages = [
     'styleguide-app/Examples/Tooltip.elm',
 ]
 
+[forbidden."Nri.Ui.Text.V5"]
+hint = 'upgrade to V6'
+
 [forbidden."Nri.Ui.Tooltip.V1"]
 hint = 'upgrade to V2'
 usages = ['styleguide-app/../src/Nri/Ui/Menu/V1.elm']

src/Nri/Ui/Container/V1.elm

@@ -17,7 +17,7 @@ import Html.Styled.Attributes
 import Nri.Ui
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -197,13 +197,15 @@ interactableWithLabel label content =
             "label"
             labelStyles
             []
-            [ Text.smallBody []
-                [ div
-                    [ Html.Styled.Attributes.css
-                        [ margin (px 7)
+            [ Text.smallBody
+                [ Text.html
+                    [ div
+                        [ Html.Styled.Attributes.css
+                            [ margin (px 7)
+                            ]
+                        ]
+                        [ text label
                         ]
-                    ]
-                    [ text label
                     ]
                 ]
             ]

src/Nri/Ui/Container/V2.elm

@@ -54,7 +54,7 @@ import Nri.Ui
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
 import Nri.Ui.MediaQuery.V1 exposing (mobile)
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}

src/Nri/Ui/Text/V6.elm

@@ -0,0 +1,346 @@
+module Nri.Ui.Text.V6 exposing
+    ( caption, mediumBody, mediumBodyGray, smallBody, smallBodyGray
+    , ugMediumBody, ugSmallBody
+    , plaintext, markdown, html
+    , Attribute, noBreak, css, id, custom
+    , nriDescription, testId
+    )
+
+{-| Changes from V5:
+
+  - adds helpers: `custom`, `nriDescription`,`testId`,`id`
+  - instead of view helpers that take HTML, offer attribute helpers supporting plaintext, markdown, and html content
+  - :skull: remove noWidow, which is not used
+  - noBreak now takes a bool
+
+
+## Understanding spacing
+
+  - All text styles have a specific line-height. This is set so that when text in the given style
+    is long enough to wrap, the spacing between wrapped lines looks good.
+  - No text styles have padding.
+  - **Paragraph styles** only have bottom margin, but with **:last-child bottom margin set to zero**.
+    This bottom margin is set to look good when multiple paragraphs of the same style follow one another.
+      - If you want content after the paragraph and don't want the margin, put the paragraph in a `div` so that it will be the last-child, which will get rid of the bottom margin.
+  - **User-authored content blocks** preserve line breaks and do not have margin.
+
+
+## Headings
+
+You're in the wrong place! Headings live in Nri.Ui.Heading.V2.
+
+
+## Paragraph styles
+
+@docs caption, mediumBody, mediumBodyGray, smallBody, smallBodyGray
+
+
+## User-authored content blocks:
+
+@docs ugMediumBody, ugSmallBody
+
+
+# Content
+
+@docs plaintext, markdown, html
+
+
+## Customizations
+
+@docs Attribute, noBreak, css, id, custom
+@docs nriDescription, testId
+
+-}
+
+import Accessibility.Styled as Html exposing (..)
+import Css exposing (..)
+import Css.Global exposing (a, descendants)
+import Html.Styled.Attributes as Attributes
+import Markdown
+import Nri.Ui.Colors.V1 exposing (..)
+import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
+
+
+{-| -}
+type Attribute msg
+    = Attribute (Settings msg -> Settings msg)
+
+
+type alias Settings msg =
+    { noBreak : Bool
+    , styles : List Css.Style
+    , customAttributes : List (Html.Attribute Never)
+    , content : List (Html msg)
+    }
+
+
+defaultSettings : Settings msg
+defaultSettings =
+    { noBreak = False
+    , styles = []
+    , customAttributes = []
+    , content = []
+    }
+
+
+buildSettings : List (Attribute msg) -> Settings msg
+buildSettings =
+    List.foldl (\(Attribute f) acc -> f acc) defaultSettings
+
+
+{-| Pass True to prevent text from ever wrapping.
+
+The default Text behavior is `noBreak False`, which means content will wrap.
+
+-}
+noBreak : Bool -> Attribute msg
+noBreak noBreak_ =
+    Attribute (\config -> { config | noBreak = noBreak_ })
+
+
+{-| Use this helper to add custom attributes.
+
+Do NOT use this helper to add css styles, as they may not be applied the way
+you want/expect if underlying styles change.
+Instead, please use the `css` helper.
+
+-}
+custom : List (Html.Attribute Never) -> Attribute msg
+custom attributes =
+    Attribute <|
+        \config ->
+            { config
+                | customAttributes = List.append config.customAttributes attributes
+            }
+
+
+{-| -}
+nriDescription : String -> Attribute msg
+nriDescription description =
+    custom [ ExtraAttributes.nriDescription description ]
+
+
+{-| -}
+testId : String -> Attribute msg
+testId id_ =
+    custom [ ExtraAttributes.testId id_ ]
+
+
+{-| -}
+id : String -> Attribute msg
+id id_ =
+    custom [ Attributes.id id_ ]
+
+
+{-| Add some custom CSS to the text. If you find yourself using this a lot,
+please add a stricter attribute to noredink-ui!
+-}
+css : List Style -> Attribute msg
+css styles =
+    Attribute (\config -> { config | styles = config.styles ++ styles })
+
+
+{-| -}
+view : List (Attribute msg) -> Html msg
+view attributes =
+    let
+        settings : Settings msg
+        settings =
+            buildSettings attributes
+    in
+    p
+        (Attributes.css
+            [ if settings.noBreak then
+                whiteSpace noWrap
+
+              else
+                batch []
+            , batch settings.styles
+            ]
+            :: settings.customAttributes
+        )
+        settings.content
+
+
+{-| This is some medium body copy.
+-}
+mediumBody : List (Attribute msg) -> Html msg
+mediumBody attributes =
+    view
+        (css
+            (paragraphStyles
+                { font = Fonts.baseFont
+                , color = gray20
+                , size = 18
+                , lineHeight = 28
+                , weight = 400
+                , margin = 10
+                }
+            )
+            :: attributes
+        )
+
+
+{-| `mediumBody`, but with a lighter gray color than the default.
+-}
+mediumBodyGray : List (Attribute msg) -> Html msg
+mediumBodyGray attributes =
+    mediumBody (css [ Css.color gray45 ] :: attributes)
+
+
+{-| This is some small body copy.
+-}
+smallBody : List (Attribute msg) -> Html msg
+smallBody attributes =
+    view
+        (css
+            (paragraphStyles
+                { font = Fonts.baseFont
+                , color = gray20
+                , size = 15
+                , lineHeight = 23
+                , weight = 400
+                , margin = 7
+                }
+            )
+            :: attributes
+        )
+
+
+{-| This is some small body copy but it's gray.
+-}
+smallBodyGray : List (Attribute msg) -> Html msg
+smallBodyGray attributes =
+    view
+        (css
+            (paragraphStyles
+                { font = Fonts.baseFont
+                , color = gray45
+                , size = 15
+                , lineHeight = 23
+                , weight = 400
+                , margin = 7
+                }
+            )
+            :: attributes
+        )
+
+
+paragraphStyles :
+    { color : Color
+    , font : Style
+    , lineHeight : Float
+    , margin : Float
+    , size : Float
+    , weight : Int
+    }
+    -> List Css.Style
+paragraphStyles config =
+    [ config.font
+    , fontSize (px config.size)
+    , color config.color
+    , lineHeight (px config.lineHeight)
+    , fontWeight (int config.weight)
+    , padding zero
+    , textAlign left
+    , margin4 (px 0) (px 0) (px config.margin) (px 0)
+    , Css.Global.descendants
+        [ Css.Global.a
+            [ textDecoration none
+            , color azure
+            , borderBottom3 (px 1) solid azure
+            , visited
+                [ color azure ]
+            ]
+        ]
+    , lastChild
+        [ margin zero
+        ]
+    ]
+
+
+{-| This is a little note or caption.
+-}
+caption : List (Attribute msg) -> Html msg
+caption attributes =
+    view
+        (css
+            (paragraphStyles
+                { font = Fonts.baseFont
+                , color = gray45
+                , size = 13
+                , lineHeight = 18
+                , weight = 400
+                , margin = 5
+                }
+            )
+            :: attributes
+        )
+
+
+{-| User-generated text.
+-}
+ugMediumBody : List (Attribute msg) -> Html msg
+ugMediumBody attributes =
+    view
+        (css
+            (whiteSpace preLine
+                :: paragraphStyles
+                    { font = Fonts.quizFont
+                    , color = gray20
+                    , size = 18
+                    , lineHeight = 30
+                    , weight = 400
+                    , margin = 0
+                    }
+            )
+            :: attributes
+        )
+
+
+{-| User-generated text.
+-}
+ugSmallBody : List (Attribute msg) -> Html msg
+ugSmallBody attributes =
+    view
+        (css
+            (whiteSpace preLine
+                :: paragraphStyles
+                    { font = Fonts.quizFont
+                    , color = gray20
+                    , size = 16
+                    , lineHeight = 25
+                    , weight = 400
+                    , margin = 0
+                    }
+            )
+            :: attributes
+        )
+
+
+{-| Provide a plain-text string.
+-}
+plaintext : String -> Attribute msg
+plaintext content =
+    Attribute <| \config -> { config | content = [ text content ] }
+
+
+{-| Provide a string that will be rendered as markdown.
+-}
+markdown : String -> Attribute msg
+markdown content =
+    Attribute <|
+        \config ->
+            { config
+                | content =
+                    Markdown.toHtml Nothing content
+                        |> List.map fromUnstyled
+            }
+
+
+{-| Provide a list of custom HTML.
+-}
+html : List (Html msg) -> Attribute msg
+html content =
+    Attribute <| \config -> { config | content = content }

styleguide-app/CommonControls.elm

@@ -1,6 +1,8 @@
-module CommonControls exposing (httpError)
+module CommonControls exposing (exampleHtml, httpError, quickBrownFox, romeoAndJulietQuotation)
 
 import Debug.Control as Control exposing (Control)
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes as Attributes
 import Http
 
 
@@ -38,3 +40,42 @@ httpError =
                 )
           )
         ]
+
+
+quickBrownFox : String
+quickBrownFox =
+    "The quick brown fox jumps over the lazy dog."
+
+
+romeoAndJulietQuotation : String
+romeoAndJulietQuotation =
+    """
+        Two households, both alike in dignity,
+        In fair Verona, where we lay our scene,
+        From ancient grudge break to new mutiny,
+        Where civil blood makes civil hands unclean.
+        From forth the fatal loins of these two foes
+        A pair of star-cross’d lovers take their life;
+        Whose misadventured piteous overthrows
+        Do with their death bury their parents’ strife.
+        The fearful passage of their death-mark’d love,
+        And the continuance of their parents’ rage,
+        Which, but their children’s end, nought could remove,
+        Is now the two hours’ traffic of our stage;
+        The which if you with patient ears attend,
+        What here shall miss, our toil shall strive to mend.
+    """
+
+
+exampleHtml : List (Html msg)
+exampleHtml =
+    [ Html.text "This is a "
+    , Html.strong [] [ Html.text "bolded phrase" ]
+    , Html.text ". "
+    , Html.a
+        [ Attributes.href "http://www.noredink.com"
+        , Attributes.target "_blank"
+        ]
+        [ Html.text quickBrownFox ]
+    , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home."
+    ]

styleguide-app/Examples/ClickableText.elm

@@ -15,7 +15,7 @@ import Html.Styled.Attributes exposing (css, id)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 import Nri.Ui.UiIcon.V1 as UiIcon
 
 
@@ -94,21 +94,23 @@ viewExamples (State control) =
     [ Control.view (State >> SetState) control
         |> fromUnstyled
     , buttons model
-    , Text.smallBody []
-        [ text "Sometimes, we'll want our clickable links: "
-        , ClickableText.link model.label
-            [ ClickableText.small
-            , Maybe.map ClickableText.icon model.icon
-                |> Maybe.withDefault (ClickableText.custom [])
+    , Text.smallBody
+        [ Text.html
+            [ text "Sometimes, we'll want our clickable links: "
+            , ClickableText.link model.label
+                [ ClickableText.small
+                , Maybe.map ClickableText.icon model.icon
+                    |> Maybe.withDefault (ClickableText.custom [])
+                ]
+            , text " and clickable buttons: "
+            , ClickableText.button model.label
+                [ ClickableText.small
+                , ClickableText.onClick (ShowItWorked "ClickableText" "in-line button")
+                , Maybe.map ClickableText.icon model.icon
+                    |> Maybe.withDefault (ClickableText.custom [])
+                ]
+            , text " to show up in-line."
             ]
-        , text " and clickable buttons: "
-        , ClickableText.button model.label
-            [ ClickableText.small
-            , ClickableText.onClick (ShowItWorked "ClickableText" "in-line button")
-            , Maybe.map ClickableText.icon model.icon
-                |> Maybe.withDefault (ClickableText.custom [])
-            ]
-        , text " to show up in-line."
         ]
     ]
         |> div []

styleguide-app/Examples/Container.elm

@@ -7,6 +7,7 @@ module Examples.Container exposing (Msg, State, example)
 -}
 
 import Category exposing (Category(..))
+import CommonControls exposing (romeoAndJulietQuotation)
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
@@ -20,7 +21,7 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Svg.V1 as Svg
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 import Nri.Ui.UiIcon.V1 as UiIcon
 
 
@@ -149,26 +150,6 @@ controlContent =
         ]
 
 
-romeoAndJulietQuotation : String
-romeoAndJulietQuotation =
-    """
-        Two households, both alike in dignity,
-        In fair Verona, where we lay our scene,
-        From ancient grudge break to new mutiny,
-        Where civil blood makes civil hands unclean.
-        From forth the fatal loins of these two foes
-        A pair of star-cross’d lovers take their life;
-        Whose misadventured piteous overthrows
-        Do with their death bury their parents’ strife.
-        The fearful passage of their death-mark’d love,
-        And the continuance of their parents’ rage,
-        Which, but their children’s end, nought could remove,
-        Is now the two hours’ traffic of our stage;
-        The which if you with patient ears attend,
-        What here shall miss, our toil shall strive to mend.
-    """
-
-
 {-| -}
 type Msg
     = UpdateControl (Control (List (Container.Attribute Msg)))

styleguide-app/Examples/DisclosureIndicator.elm

@@ -16,7 +16,7 @@ import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -38,7 +38,7 @@ example =
     , subscriptions = \_ -> Sub.none
     , view =
         \state ->
-            [ Text.smallBodyGray [] [ Html.text "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
+            [ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
             , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ]
                 [ Button.button "Toggle large indicator"
                     [ Button.onClick ToggleLarge, Button.small, Button.secondary ]

styleguide-app/Examples/IconExamples.elm

@@ -6,7 +6,7 @@ import Html.Styled.Attributes exposing (css, style, title)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Svg.V1 as Svg
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 
 
 view : String -> List ( String, Svg.Svg ) -> Html msg
@@ -55,5 +55,5 @@ viewIcon ( name, icon, style ) =
             ]
         ]
         [ Html.div [ css style ] [ Svg.toHtml icon ]
-        , Text.smallBody [] [ Html.text name ]
+        , Text.smallBody [ Text.plaintext name ]
         ]

styleguide-app/Examples/Loading.elm

@@ -20,7 +20,7 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Loading.V1 as Loading
 import Nri.Ui.Svg.V1 as Svg
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -113,7 +113,7 @@ example =
                     [ Loading.spinningPencil
                         |> Svg.withColor Colors.blue
                         |> Svg.toHtml
-                    , Text.caption [] [ Html.text "By default, the spinningPencil is white. Showing as blue for visibility." ]
+                    , Text.caption [ Text.plaintext "By default, the spinningPencil is white. Showing as blue for visibility." ]
                     , Loading.spinningDots
                         |> Svg.toHtml
                     ]

styleguide-app/Examples/Modal.elm

@@ -21,7 +21,7 @@ import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.FocusTrap.V1 as FocusTrap
 import Nri.Ui.Modal.V11 as Modal
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 import Task
 
 
@@ -228,7 +228,10 @@ launchModalButton settings =
 
 viewModalContent : String -> Html msg
 viewModalContent content =
-    Text.mediumBody [] [ span [ css [ whiteSpace preLine ] ] [ text content ] ]
+    Text.mediumBody
+        [ Text.css [ whiteSpace preLine ]
+        , Text.plaintext content
+        ]
 
 
 continueButtonId : String

styleguide-app/Examples/RadioButton.elm

@@ -23,7 +23,7 @@ import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Modal.V10 as Modal
 import Nri.Ui.RadioButton.V2 as RadioButton
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -65,7 +65,7 @@ view model =
             Modal.MultipleFocusableElements
                 (\{ firstFocusableElement, autofocusElement, lastFocusableElement, closeButton } ->
                     { content =
-                        [ Text.mediumBody [] [ text "Often, we'll launch a modal showing the benefits of premium when a locked radio button is clicked." ]
+                        [ Text.mediumBody [ Text.plaintext "Often, we'll launch a modal showing the benefits of premium when a locked radio button is clicked." ]
                         , closeButton (autofocusElement :: firstFocusableElement)
                         ]
                     , footer =

styleguide-app/Examples/Switch.elm

@@ -11,7 +11,7 @@ import Example exposing (Example)
 import Html.Styled as Html
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Switch.V1 as Switch
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -34,36 +34,42 @@ example =
     , view =
         \interactiveIsOn ->
             [ Heading.h3 [] [ Html.text "Interactive" ]
-            , Text.mediumBody []
-                [ Switch.view
-                    [ Switch.onSwitch Switch
-                    , Switch.id "switch-interactive"
-                    , Switch.label
-                        (if interactiveIsOn then
-                            Html.text "On"
+            , Text.mediumBody
+                [ Text.html
+                    [ Switch.view
+                        [ Switch.onSwitch Switch
+                        , Switch.id "switch-interactive"
+                        , Switch.label
+                            (if interactiveIsOn then
+                                Html.text "On"
 
-                         else
-                            Html.text "Off"
-                        )
+                             else
+                                Html.text "Off"
+                            )
+                        ]
+                        interactiveIsOn
                     ]
-                    interactiveIsOn
                 ]
             , Heading.h3 [] [ Html.text "Disabled" ]
-            , Text.mediumBody []
-                [ Switch.view
-                    [ Switch.disabled
-                    , Switch.id "switch-disabled-on"
-                    , Switch.label (Html.text "Permanently on")
+            , Text.mediumBody
+                [ Text.html
+                    [ Switch.view
+                        [ Switch.disabled
+                        , Switch.id "switch-disabled-on"
+                        , Switch.label (Html.text "Permanently on")
+                        ]
+                        True
                     ]
-                    True
                 ]
-            , Text.mediumBody []
-                [ Switch.view
-                    [ Switch.disabled
-                    , Switch.id "switch-disabled-off"
-                    , Switch.label (Html.text "Permanently off")
+            , Text.mediumBody
+                [ Text.html
+                    [ Switch.view
+                        [ Switch.disabled
+                        , Switch.id "switch-disabled-off"
+                        , Switch.label (Html.text "Permanently off")
+                        ]
+                        False
                     ]
-                    False
                 ]
             ]
     , categories = [ Category.Inputs ]

styleguide-app/Examples/Text.elm

@@ -7,79 +7,125 @@ module Examples.Text exposing (example, State, Msg)
 -}
 
 import Category exposing (Category(..))
+import CommonControls exposing (exampleHtml, quickBrownFox, romeoAndJulietQuotation)
 import Css
+import Debug.Control as Control exposing (Control)
+import Debug.Control.Extra as ControlExtra
 import Example exposing (Example)
-import Html.Styled as Html
-import Html.Styled.Attributes as Attributes
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
-import Nri.Ui.Text.V5 as Text
-
-
-{-| -}
-type alias State =
-    ()
-
-
-{-| -}
-type alias Msg =
-    ()
+import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
 example : Example State Msg
 example =
     { name = "Text"
-    , version = 5
+    , version = 6
     , categories = [ Text ]
     , keyboardSupport = []
-    , state = ()
-    , update = \_ state -> ( state, Cmd.none )
+    , state = init
+    , update = update
     , subscriptions = \_ -> Sub.none
     , view =
-        \_ ->
+        \state ->
             let
-                exampleHtml kind =
-                    [ Html.text "This is a "
-                    , Html.strong [] [ Html.text kind ]
-                    , Html.text ". "
-                    , Html.a
-                        [ Attributes.href "http://www.noredink.com"
-                        , Attributes.target "_blank"
-                        ]
-                        [ Html.text "The quick brown fox jumps over the lazy dog." ]
-                    , Html.text " Be on the lookout for a new and improved assignment creation form! Soon, you'll be able to easily see a summary of the content you're assigning, as well as an estimate for how long the assignment will take."
-                    ]
-
-                exampleUGHtml kind =
-                    [ Html.text "This is a "
-                    , Html.strong [] [ Html.text kind ]
-                    , Html.text ". The quick brown fox jumps over the lazy dog."
-                    , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home."
-                    ]
+                attributes =
+                    Control.currentValue state.control
             in
-            [ Text.caption [] [ Html.text "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ]
+            [ Text.caption [ Text.plaintext "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ]
+            , Control.view UpdateControl state.control
+                |> Html.fromUnstyled
             , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ]
-            , Text.mediumBody [] (exampleHtml "mediumBody")
-            , Text.smallBody [] (exampleHtml "smallBody")
-            , Text.smallBodyGray [] (exampleHtml "smallBodyGray")
-            , Text.caption [] (exampleHtml "caption")
+            , viewExamples
+                [ ( "mediumBody", Text.mediumBody )
+                , ( "smallBody", Text.smallBody )
+                , ( "smallBodyGray", Text.smallBodyGray )
+                , ( "caption", Text.caption )
+                ]
+                attributes
             , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
-            , Text.ugMediumBody [] (exampleUGHtml "ugMediumBody")
-            , Text.ugSmallBody [] (exampleUGHtml "ugSmallBody")
-            , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "One-Off Styles" ]
-            , Text.mediumBody
-                [ Text.css [ Css.padding (Css.px 20) ] ]
-                [ Html.text "I've got more padding than my siblings!" ]
-            , Html.div
-                [ Attributes.css
-                    [ Css.width (Css.px 80)
-                    , Css.border3 (Css.px 1) Css.solid (Css.hex "000")
-                    ]
-                ]
-                [ Text.mediumBody
-                    [ Text.noBreak ]
-                    [ Html.text "I won't ever break, no matter how narrow my container is." ]
+            , viewExamples
+                [ ( "ugMediumBody", Text.ugMediumBody )
+                , ( "ugSmallBody", Text.ugSmallBody )
                 ]
+                attributes
             ]
     }
+
+
+viewExamples : List ( String, List (Text.Attribute msg) -> Html msg ) -> List (Text.Attribute msg) -> Html msg
+viewExamples examples attributes =
+    let
+        viewExample ( name, view ) =
+            Html.tr []
+                [ Html.th [] [ Html.text name ]
+                , Html.td [] [ view attributes ]
+                ]
+    in
+    Html.table [ css [ Css.width (Css.pct 100) ] ]
+        [ Html.tbody [] <|
+            List.map viewExample examples
+        ]
+
+
+{-| -}
+type alias State =
+    { control : Control (List (Text.Attribute Msg))
+    }
+
+
+{-| -}
+init : State
+init =
+    { control =
+        ControlExtra.list
+            |> ControlExtra.listItem "content" controlContent
+            |> ControlExtra.listItem "noBreak"
+                (Control.map Text.noBreak (Control.bool False))
+            |> ControlExtra.optionalListItem "css"
+                (Control.value
+                    (Text.css
+                        [ Css.border3 (Css.px 1) Css.solid Colors.aqua
+                        , Css.color Colors.aquaDark
+                        ]
+                    )
+                )
+    }
+
+
+controlContent : Control (Text.Attribute msg)
+controlContent =
+    Control.choice
+        [ ( "HTML"
+          , Control.value (Text.html exampleHtml)
+          )
+        , ( "plain text (short)"
+          , Control.string quickBrownFox
+                |> Control.map Text.plaintext
+          )
+        , ( "plain text (long)"
+          , Control.stringTextarea romeoAndJulietQuotation
+                |> Control.map Text.plaintext
+          )
+        , ( "markdown"
+          , Control.string romeoAndJulietQuotation
+                |> Control.map Text.markdown
+          )
+        ]
+
+
+{-| -}
+type Msg
+    = UpdateControl (Control (List (Text.Attribute Msg)))
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        UpdateControl newControl ->
+            ( { state | control = newControl }, Cmd.none )

styleguide-app/Examples/Tooltip.elm

@@ -18,7 +18,7 @@ import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Svg.V1 as Svg
-import Nri.Ui.Text.V5 as Text
+import Nri.Ui.Text.V6 as Text
 import Nri.Ui.Tooltip.V2 as Tooltip
 import Nri.Ui.UiIcon.V1 as UiIcon
 
@@ -77,13 +77,15 @@ update msg model =
 view : State -> List (Html Msg)
 view model =
     [ Heading.h3 [] [ Html.text "Using the Tooltip module" ]
-    , Text.mediumBody []
-        [ Html.text "Label the Tooltip as either being the "
-        , viewPrimaryLabelTooltip model.openTooltip
-        , Html.text " or the "
-        , viewAuxillaryDescriptionToolip model.openTooltip
-        , Html.text " for the trigger content."
-        , viewToggleTip model.openTooltip
+    , Text.mediumBody
+        [ Text.html
+            [ Html.text "Label the Tooltip as either being the "
+            , viewPrimaryLabelTooltip model.openTooltip
+            , Html.text " or the "
+            , viewAuxillaryDescriptionToolip model.openTooltip
+            , Html.text " for the trigger content."
+            , viewToggleTip model.openTooltip
+            ]
         ]
     , viewCustomizableExample model.staticExampleSettings
     ]

tests/elm-verify-examples.json

@@ -57,6 +57,7 @@
         "Nri.Ui.Tabs.V6",
         "Nri.Ui.Tabs.V7",
         "Nri.Ui.Text.V5",
+        "Nri.Ui.Text.V6",
         "Nri.Ui.Text.Writing.V1",
         "Nri.Ui.TextArea.V4",
         "Nri.Ui.TextInput.V6",