From ded3c4571b9623a03dfeed8292285f0bf59d6c72 Mon Sep 17 00:00:00 2001 From: Ben Dansby Date: Mon, 17 Feb 2020 15:02:58 -0800 Subject: [PATCH 1/8] link styles --- src/Nri/Ui/Text/V4.elm | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Nri/Ui/Text/V4.elm b/src/Nri/Ui/Text/V4.elm index 6ad26bcd..c3a00917 100644 --- a/src/Nri/Ui/Text/V4.elm +++ b/src/Nri/Ui/Text/V4.elm @@ -54,6 +54,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 +122,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 ] From 43e7e0af258dd0b6b21b81815b19552c76ea10d4 Mon Sep 17 00:00:00 2001 From: Ben Dansby Date: Mon, 17 Feb 2020 15:03:11 -0800 Subject: [PATCH 2/8] update example --- styleguide-app/Examples/Text.elm | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index 26a467cd..92a83d13 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 @@ -35,5 +36,14 @@ example = , 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.mediumBody + [ Html.text "This is what text looks like with a link. " + , Html.a + [ Attributes.href "http://www.noredink.com" + , Attributes.target "_blank" + ] + [ Html.text "Praesent commodo cursus magna, vel scelerisque nisl consectetur \n et. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis \n risus eget urna mollis ornare vel eu leo." ] + , Html.text " Not bad, eh?" + ] ] } From 6672114dd0018ed943d008ae12c91e0306ae81b3 Mon Sep 17 00:00:00 2001 From: Ben Dansby Date: Mon, 17 Feb 2020 15:04:55 -0800 Subject: [PATCH 3/8] add note --- src/Nri/Ui/Text/V4.elm | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Nri/Ui/Text/V4.elm b/src/Nri/Ui/Text/V4.elm index c3a00917..e046bbb3 100644 --- a/src/Nri/Ui/Text/V4.elm +++ b/src/Nri/Ui/Text/V4.elm @@ -4,7 +4,13 @@ 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) From ea9c27b81e8b72f305adb46a497b0889ee9de506 Mon Sep 17 00:00:00 2001 From: Ben Dansby Date: Mon, 17 Feb 2020 15:08:22 -0800 Subject: [PATCH 4/8] Update V4.elm fix --- src/Nri/Ui/Text/V4.elm | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Nri/Ui/Text/V4.elm b/src/Nri/Ui/Text/V4.elm index e046bbb3..9e9c9ba3 100644 --- a/src/Nri/Ui/Text/V4.elm +++ b/src/Nri/Ui/Text/V4.elm @@ -4,9 +4,7 @@ module Nri.Ui.Text.V4 exposing , noWidow ) - {-| - -Post-release patches +{-| Post-release patches - adjusts link styles From b26acd6df3c569ce280d00050467eeaba46a4c27 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 18 Feb 2020 10:38:22 -0800 Subject: [PATCH 5/8] Avoid formatting with line breaks in the examples because it's confusing to me --- styleguide-app/Examples/Text.elm | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index 92a83d13..17fa6e29 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -21,11 +21,12 @@ example = , 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. - """ + [ "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." + ] + |> String.join " " 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" ] From 8204c0b2dc95ff3b393f5667ceb1832ecfe31835 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 18 Feb 2020 10:41:32 -0800 Subject: [PATCH 6/8] Move the mediumBody example with a link out of the UG section --- styleguide-app/Examples/Text.elm | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index 17fa6e29..907e9aa0 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -31,20 +31,19 @@ example = [ 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.mediumBody + [ Html.text "This is a mediumBody with with a link. " + , Html.a + [ Attributes.href "http://www.noredink.com" + , Attributes.target "_blank" + ] + [ Html.text 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 ] , 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.mediumBody - [ Html.text "This is what text looks like with a link. " - , Html.a - [ Attributes.href "http://www.noredink.com" - , Attributes.target "_blank" - ] - [ Html.text "Praesent commodo cursus magna, vel scelerisque nisl consectetur \n et. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis \n risus eget urna mollis ornare vel eu leo." ] - , Html.text " Not bad, eh?" - ] ] } From 7e261af7aa0d226b9e5cea3ab9ec0bff09cb0065 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 18 Feb 2020 10:45:59 -0800 Subject: [PATCH 7/8] Pull the link content up where it might be reused --- styleguide-app/Examples/Text.elm | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index 907e9aa0..d0c68b34 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -21,23 +21,30 @@ example = , content = let longerBody = - [ "Be on the lookout for a new and improved assignment" + [ " " + , "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." + , " " ] |> String.join " " + + link = + Html.a + [ Attributes.href "http://www.noredink.com" + , Attributes.target "_blank" + ] + [ Html.text "The quick brown fox jumps over the lazy dog." ] 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.mediumBody - [ Html.text "This is a mediumBody with with a link. " - , Html.a - [ Attributes.href "http://www.noredink.com" - , Attributes.target "_blank" - ] - [ Html.text longerBody ] + [ Html.text "This is a " + , Html.strong [] [ Html.text "mediumBody" ] + , Html.text ". " + , link + , Html.text longerBody ] , Text.smallBody [ Html.text <| "This is a smallBody. " ++ longerBody ] , Text.smallBodyGray [ Html.text <| "This is a smallBodyGray. " ++ longerBody ] From efd81325173aa3bc92fb77d45aef1601d15a2c34 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 18 Feb 2020 10:50:51 -0800 Subject: [PATCH 8/8] Adds helpers for example html and example ug html --- styleguide-app/Examples/Text.elm | 44 +++++++++++++++----------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index d0c68b34..aec83453 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -20,37 +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." - , " " - ] - |> String.join " " - - link = - Html.a + 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 " - , Html.strong [] [ Html.text "mediumBody" ] - , Html.text ". " - , link - , Html.text 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") ] }