diff --git a/src/Nri/Ui/Text/V4.elm b/src/Nri/Ui/Text/V4.elm index 6ad26bcd..9e9c9ba3 100644 --- a/src/Nri/Ui/Text/V4.elm +++ b/src/Nri/Ui/Text/V4.elm @@ -4,7 +4,11 @@ module Nri.Ui.Text.V4 exposing , noWidow ) -{-| Changes from V3: +{-| Post-release patches + + - adjusts link styles + +Changes from V3: - Removes Headings (they now live in Nri.Ui.Heading.V2) @@ -54,6 +58,7 @@ API. See the Nri.Ui.Heading.V2 docs for details. -} import Css exposing (..) +import Css.Global exposing (a, descendants) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) import Nri.Ui.Colors.V1 exposing (..) @@ -121,6 +126,15 @@ paragraphStyles config = , 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 ] diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index 26a467cd..aec83453 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -7,6 +7,7 @@ module Examples.Text exposing (example) -} import Html.Styled as Html +import Html.Styled.Attributes as Attributes import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Text.V4 as Text @@ -19,21 +20,33 @@ example = , category = Text , content = let - longerBody = - """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. - """ + 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." + ] in [ Text.caption [ Html.text "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ] , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ] - , Text.mediumBody [ Html.text <| "This is a mediumBody. " ++ longerBody ] - , Text.smallBody [ Html.text <| "This is a smallBody. " ++ longerBody ] - , Text.smallBodyGray [ Html.text <| "This is a smallBodyGray. " ++ longerBody ] - , Text.caption [ Html.text <| "This is a caption. " ++ longerBody ] + , Text.mediumBody (exampleHtml "mediumBody") + , Text.smallBody (exampleHtml "smallBody") + , Text.smallBodyGray (exampleHtml "smallBodyGray") + , Text.caption (exampleHtml "caption") , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ] - , Text.ugMediumBody [ Html.text <| "This is an ugMediumBody. " ++ longerBody ] - , Text.ugSmallBody [ Html.text <| "This is an ugSmallBody. " ++ longerBody ] + , Text.ugMediumBody (exampleUGHtml "ugMediumBody") + , Text.ugSmallBody (exampleUGHtml "ugSmallBody") ] }