accept and apply styles

src/Nri/Ui/Text/V5.elm

@@ -87,12 +87,35 @@ singleLine =
     SingleLine
 
 
+styleForAttributes : List Attribute -> Style
+styleForAttributes attrs =
+    let
+        config =
+            List.foldl
+                (\attr soFar ->
+                    case attr of
+                        SingleLine ->
+                            { soFar | singleLine = True }
+                )
+                { singleLine = False }
+                attrs
+    in
+    batch
+        [ if config.singleLine then
+            whiteSpace noWrap
+
+          else
+            batch []
+        ]
+
+
 {-| This is some medium body copy.
 -}
 mediumBody : List Attribute -> List (Html msg) -> Html msg
 mediumBody attributes content =
     p
         [ paragraphStyles
+            attributes
             { font = Fonts.baseFont
             , color = gray20
             , size = 18
@@ -110,6 +133,7 @@ smallBody : List Attribute -> List (Html msg) -> Html msg
 smallBody attributes content =
     p
         [ paragraphStyles
+            attributes
             { font = Fonts.baseFont
             , color = gray20
             , size = 15
@@ -127,6 +151,7 @@ smallBodyGray : List Attribute -> List (Html msg) -> Html msg
 smallBodyGray attributes content =
     p
         [ paragraphStyles
+            attributes
             { font = Fonts.baseFont
             , color = gray45
             , size = 15
@@ -138,7 +163,18 @@ smallBodyGray attributes content =
         content
 
 
-paragraphStyles config =
+paragraphStyles :
+    List Attribute
+    ->
+        { color : Color
+        , font : Style
+        , lineHeight : Float
+        , margin : Float
+        , size : Float
+        , weight : Int
+        }
+    -> Html.Styled.Attribute msg
+paragraphStyles attributes config =
     css
         [ config.font
         , fontSize (px config.size)
@@ -160,6 +196,7 @@ paragraphStyles config =
         , lastChild
             [ margin zero
             ]
+        , styleForAttributes attributes
         ]
 
 
@@ -169,6 +206,7 @@ caption : List Attribute -> List (Html msg) -> Html msg
 caption attributes content =
     p
         [ paragraphStyles
+            attributes
             { font = Fonts.baseFont
             , color = gray45
             , size = 13
@@ -183,7 +221,7 @@ caption attributes content =
 {-| User-generated text.
 -}
 ugMediumBody : List Attribute -> List (Html msg) -> Html msg
-ugMediumBody =
+ugMediumBody attributes =
     p
         [ css
             [ Fonts.quizFont
@@ -192,6 +230,7 @@ ugMediumBody =
             , whiteSpace preLine
             , color gray20
             , margin zero
+            , styleForAttributes attributes
             ]
         ]
 
@@ -199,7 +238,7 @@ ugMediumBody =
 {-| User-generated text.
 -}
 ugSmallBody : List Attribute -> List (Html msg) -> Html msg
-ugSmallBody =
+ugSmallBody attributes =
     p
         [ css
             [ Fonts.quizFont
@@ -208,6 +247,7 @@ ugSmallBody =
             , whiteSpace preLine
             , color gray20
             , margin zero
+            , styleForAttributes attributes
             ]
         ]
 

styleguide-app/Examples/Text.elm

@@ -13,7 +13,7 @@ import Html.Styled as Html
 import Html.Styled.Attributes as Attributes
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Heading.V2 as Heading
-import Nri.Ui.Text.V4 as Text
+import Nri.Ui.Text.V5 as Text
 
 
 {-| -}
@@ -58,14 +58,14 @@ example =
                     , 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\"" ]
+            [ 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 (exampleHtml "mediumBody")
-            , Text.smallBody (exampleHtml "smallBody")
-            , Text.smallBodyGray (exampleHtml "smallBodyGray")
-            , Text.caption (exampleHtml "caption")
+            , 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 (exampleUGHtml "ugMediumBody")
-            , Text.ugSmallBody (exampleUGHtml "ugSmallBody")
+            , Text.ugMediumBody [] (exampleUGHtml "ugMediumBody")
+            , Text.ugSmallBody [] (exampleUGHtml "ugSmallBody")
             ]
     }