Merge pull request #882 from NoRedInk/bat/text-and-heading

Bat/text and heading

package-lock.json

@@ -2469,13 +2469,13 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "dev": true,
       "requires": {
@@ -2484,7 +2484,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         }
@@ -2933,7 +2933,7 @@
     },
     "readable-stream": {
       "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+      "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
       "dev": true,
       "requires": {

styleguide-app/Examples/Heading.elm

@@ -7,33 +7,35 @@ module Examples.Heading exposing (example, State, Msg)
 -}
 
 import Category exposing (Category(..))
-import Css
+import CommonControls
+import Debug.Control as Control exposing (Control)
+import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled as Html
-import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import ViewHelpers exposing (viewExamples)
 
 
-{-| -}
+moduleName : String
-type alias State =
+moduleName =
-    ()
+    "Heading"
 
 
-{-| -}
+version : Int
-type alias Msg =
+version =
-    ()
+    2
 
 
 {-| -}
 example : Example State Msg
 example =
-    { name = "Heading"
+    { name = moduleName
-    , version = 2
+    , version = version
     , categories = [ Text, Layout ]
     , keyboardSupport = []
-    , state = ()
+    , state = init
-    , update = \_ state -> ( state, Cmd.none )
+    , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
         [ Heading.h1 [] [ Html.text "h1" ]
@@ -42,16 +44,97 @@ example =
         , Heading.h4 [] [ Html.text "h4" ]
         ]
     , view =
-        \_ ->
+        \state ->
-            [ viewExamples
+            let
-                [ ( "h1", Heading.h1 [] [ Html.text "This is the main page heading." ] )
+                examples =
-                , ( "h2", Heading.h2 [] [ Html.text "This is a tagline" ] )
+                    [ ( "h1", Heading.h1, "This is the main page heading." )
-                , ( "h3", Heading.h3 [] [ Html.text "This is a subHeading" ] )
+                    , ( "h2", Heading.h2, "This is a tagline" )
-                , ( "h4", Heading.h4 [] [ Html.text "This is a smallHeading" ] )
+                    , ( "h3", Heading.h3, "This is a subHeading" )
-                ]
+                    , ( "h4", Heading.h4, "This is a smallHeading" )
-            , Heading.h2 [ Heading.style Heading.Top ]
+                    , ( "h5", Heading.h5, "This is also a smallHeading" )
-                [ Html.text "Heading.h2 [ Heading.style Heading.Top ]" ]
+                    ]
-            , Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]
+
-                [ Html.text "Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]" ]
+                attributes =
+                    List.map Tuple.second (Control.currentValue state.control)
+            in
+            [ ControlView.view
+                { name = moduleName
+                , version = version
+                , update = UpdateControl
+                , settings = state.control
+                , toExampleCode =
+                    \settings ->
+                        let
+                            toExampleCode ( name, _, content ) =
+                                { sectionName = name
+                                , code =
+                                    moduleName
+                                        ++ "."
+                                        ++ name
+                                        ++ "\n    [ "
+                                        ++ String.join "\n    , " (List.map Tuple.first settings)
+                                        ++ "\n    ]"
+                                        ++ ("\n    [ Html.text \"" ++ content ++ "\" ]")
+                                }
+                        in
+                        List.map toExampleCode examples
+                }
+            , examples
+                |> List.map
+                    (\( name, view, content ) ->
+                        ( name, view attributes [ Html.text content ] )
+                    )
+                |> viewExamples
             ]
     }
+
+
+{-| -}
+type alias State =
+    { control : Control Settings
+    }
+
+
+init : State
+init =
+    { control =
+        ControlExtra.list
+            |> CommonControls.css { moduleName = moduleName, use = Heading.css }
+            |> ControlExtra.optionalBoolListItem "error" ( "Heading.error", Heading.error )
+            |> ControlExtra.optionalListItem "style" controlStyle
+    }
+
+
+controlStyle : Control ( String, Heading.Attribute msg )
+controlStyle =
+    [ ( "Top", Heading.Top )
+    , ( "Tagline", Heading.Tagline )
+    , ( "Subhead", Heading.Subhead )
+    , ( "Small", Heading.Small )
+    ]
+        |> List.map
+            (\( name, val ) ->
+                ( name
+                , Control.value
+                    ( "Heading.style Heading." ++ name
+                    , Heading.style val
+                    )
+                )
+            )
+        |> Control.choice
+
+
+type alias Settings =
+    List ( String, Heading.Attribute Msg )
+
+
+{-| -}
+type Msg
+    = UpdateControl (Control Settings)
+
+
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        UpdateControl settings ->
+            ( { state | control = settings }, Cmd.none )

styleguide-app/Examples/Text.elm

@@ -11,41 +11,76 @@ import CommonControls
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Text.V6 as Text
 
 
+moduleName : String
+moduleName =
+    "Text"
+
+
+version : Int
+version =
+    6
+
+
 {-| -}
 example : Example State Msg
 example =
-    { name = "Text"
+    { name = moduleName
-    , version = 6
+    , version = version
     , categories = [ Text ]
     , keyboardSupport = []
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ ( "caption", Text.caption )
+        [ Text.caption [ Text.plaintext "caption" ]
-        , ( "smallBody", Text.smallBody )
+        , Text.smallBody [ Text.plaintext "smallBody" ]
-        , ( "mediumBody", Text.mediumBody )
+        , Text.mediumBody [ Text.plaintext "mediumBody" ]
-        , ( "ugMediumBody", Text.ugMediumBody )
+        , Text.ugMediumBody [ Text.plaintext "ugMediumBody" ]
         ]
-            |> List.map viewPreview
     , view =
         \state ->
             let
                 attributes =
-                    Control.currentValue state.control
+                    List.map Tuple.second (Control.currentValue state.control)
             in
             [ 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
+            , ControlView.view
-                |> Html.fromUnstyled
+                { name = moduleName
-            , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ]
+                , version = version
+                , update = UpdateControl
+                , settings = state.control
+                , toExampleCode =
+                    \settings ->
+                        let
+                            toExampleCode name =
+                                { sectionName = name
+                                , code =
+                                    moduleName
+                                        ++ "."
+                                        ++ name
+                                        ++ "\n    [ "
+                                        ++ String.join "\n    , " (List.map Tuple.first settings)
+                                        ++ "\n    ]"
+                                }
+                        in
+                        [ toExampleCode "mediumBody"
+                        , toExampleCode "smallBody"
+                        , toExampleCode "smallBodyGray"
+                        , toExampleCode "caption"
+                        , toExampleCode "ugMediumBody"
+                        , toExampleCode "ugSmallBody"
+                        ]
+                }
+            , Heading.h2 [] [ Html.text "Examples" ]
+            , Heading.h3 [] [ Html.text "Paragraph styles" ]
             , viewExamples
                 [ ( "mediumBody", Text.mediumBody )
                 , ( "smallBody", Text.smallBody )
@@ -53,7 +88,7 @@ example =
                 , ( "caption", Text.caption )
                 ]
                 attributes
-            , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
+            , Heading.h3 [] [ Html.text "Paragraph styles for user-authored content" ]
             , viewExamples
                 [ ( "ugMediumBody", Text.ugMediumBody )
                 , ( "ugSmallBody", Text.ugSmallBody )
@@ -63,11 +98,6 @@ example =
     }
 
 
-viewPreview : ( String, List (Text.Attribute msg) -> Html msg ) -> Html msg
-viewPreview ( name, view ) =
-    view [ Text.plaintext name ]
-
-
 viewExamples : List ( String, List (Text.Attribute msg) -> Html msg ) -> List (Text.Attribute msg) -> Html msg
 viewExamples examples attributes =
     let
@@ -85,7 +115,7 @@ viewExamples examples attributes =
 
 {-| -}
 type alias State =
-    { control : Control (List (Text.Attribute Msg))
+    { control : Control (List ( String, Text.Attribute Msg ))
     }
 
 
@@ -95,20 +125,13 @@ init =
     { control =
         ControlExtra.list
             |> ControlExtra.listItem "content" controlContent
-            |> ControlExtra.listItem "noBreak"
+            |> ControlExtra.optionalBoolListItem "noBreak"
-                (Control.map Text.noBreak (Control.bool False))
+                ( "Text.noBreak True", Text.noBreak True )
-            |> ControlExtra.optionalListItem "css"
+            |> CommonControls.css { moduleName = "Text", use = Text.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 ( String, Text.Attribute msg )
 controlContent =
     CommonControls.content
         { moduleName = "Text"
@@ -117,12 +140,11 @@ controlContent =
         , html = Text.html
         , httpError = Nothing
         }
-        |> Control.map Tuple.second
 
 
 {-| -}
 type Msg
-    = UpdateControl (Control (List (Text.Attribute Msg)))
+    = UpdateControl (Control (List ( String, Text.Attribute Msg )))
 
 
 {-| -}