Merge pull request #458 from NoRedInk/dansby/text-links

Text links

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
             ]

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")
         ]
     }