rename to Writing and use Html.Styled

elm-package.json

@@ -19,7 +19,7 @@
         "Nri.Ui.Palette.V1",
         "Nri.Ui.Styles.V1",
         "Nri.Ui.Tabs.V1",
-        "Nri.Ui.Text.Quiz.V1",
+        "Nri.Ui.Text.Writing.V1",
         "Nri.Ui.Text.V1",
         "Nri.Ui.TextArea.V1",
         "Nri.Ui.TextInput.V1"

src/Nri/Ui/Text/Quiz/V1.elm

@@ -1,67 +0,0 @@
-module Nri.Ui.Text.Quiz.V1
-    exposing
-        ( footnote
-        , styles
-        )
-
-{-| Text types for quizzes:
-
-@docs footnote
-
-@docs styles
-
--}
-
-import Css exposing (..)
-import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
-import Html exposing (..)
-import Nri.Colors exposing (..)
-import Nri.Fonts exposing (quizFont)
-import Nri.Ui.Styles.V1
-
-
-{-| This is a little note or footnote.
--}
-footnote : List (Html msg) -> Html msg
-footnote content =
-    p [ class footnoteClasses ] content
-
-
-footnoteClasses : List CssClasses
-footnoteClasses =
-    [ Footnote ]
-
-
-namespace : String
-namespace =
-    "Nri-Ui-Text-Quiz-"
-
-
-type CssClasses
-    = Footnote
-
-
-{-| -}
-styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
-styles =
-    Nri.Ui.Styles.V1.styles namespace
-        [ Css.Foreign.class Footnote
-            [ makeQuizFont (px 13) gray45
-            , lineHeight (px 18)
-            , fontWeight (int 400)
-            , margin4 (px 5) (px 0) (px 0) (px 0)
-            ]
-        ]
-
-
-makeQuizFont : Css.FontSize a -> Css.ColorValue b -> Style
-makeQuizFont size fontColor =
-    Css.batch
-        [ quizFont
-        , fontSize size
-        , color fontColor
-        ]
-
-
-{ class } =
-    styles

src/Nri/Ui/Text/Writing/V1.elm

@@ -0,0 +1,37 @@
+module Nri.Ui.Text.Writing.V1
+    exposing
+        ( footnote
+        )
+
+{-| Text types for writing:
+
+@docs footnote
+
+-}
+
+import Css exposing (..)
+import Html.Styled exposing (..)
+import Nri.Colors exposing (..)
+import Nri.Fonts exposing (quizFont)
+
+
+{-| This is a little note or footnote.
+-}
+footnote : List (Html msg) -> Html msg
+footnote =
+    styled p
+        [ makeWritingFont (px 13) gray45
+        , lineHeight (px 18)
+        , fontWeight (int 400)
+        , margin4 (px 5) (px 0) (px 0) (px 0)
+        ]
+        []
+
+
+makeWritingFont : Css.FontSize a -> Css.ColorValue b -> Style
+makeWritingFont size fontColor =
+    Css.batch
+        [ quizFont
+        , fontSize size
+        , color fontColor
+        ]

styleguide-app/Examples/Text/Writing.elm

@@ -1,19 +1,19 @@
-module Examples.Text.Quiz exposing (example)
+module Examples.Text.Writing exposing (example)
 
 {- \
    @docs example
 -}
 
-import Html
+import Html.Styled exposing (text, toUnstyled)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
-import Nri.Ui.Text.Quiz.V1 as TextQuiz
+import Nri.Ui.Text.Writing.V1 as TextWriting
 
 
 {-| -}
 example : ModuleExample msg
 example =
-    { filename = "Nri.Ui.Text.Quiz.V1.elm"
-    , category = TextQuiz
+    { filename = "Nri.Ui.Text.Writing.V1.elm"
+    , category = TextWriting
     , content =
         let
             longerBody =
@@ -23,6 +23,7 @@ example =
                     how long the assignment will take.
                 """
         in
-        [ TextQuiz.footnote [ Html.text <| "This is a footnote. " ++ longerBody ]
+        [ TextWriting.footnote [ text <| "This is a footnote. " ++ longerBody ]
+            |> toUnstyled
         ]
     }

styleguide-app/ModuleExample.elm

@@ -46,7 +46,7 @@ type Category
     | NotesToDeveloper
     | Colors
     | Text
-    | TextQuiz
+    | TextWriting
     | DynamicSymbols
     | Pages
     | QuestionTypes
@@ -90,8 +90,8 @@ categoryFromString string =
         "Text" ->
             Ok Text
 
-        "TextQuiz" ->
-            Ok TextQuiz
+        "TextWriting" ->
+            Ok TextWriting
 
         "DynamicSymbols" ->
             Ok DynamicSymbols
@@ -142,8 +142,8 @@ categoryForDisplay category =
         Text ->
             "Text"
 
-        TextQuiz ->
-            "TextQuiz"
+        TextWriting ->
+            "TextWriting"
 
         DynamicSymbols ->
             "Dynamic Symbols"

styleguide-app/NriModules.elm

@@ -3,12 +3,11 @@ module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, styles, s
 import Css exposing (..)
 import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Examples.Text as TextExample
-import Examples.Text.Quiz as TextQuizExample
+import Examples.Text.Writing as TextWritingExample
 import Html exposing (Html, img)
 import Html.Attributes exposing (..)
 import ModuleExample exposing (Category(..), ModuleExample)
 import Navigation
-import Nri.Ui.Text.Quiz.V1 as TextQuiz
 import Nri.Ui.Text.V1 as Text
 import String.Extra
 
@@ -62,7 +61,7 @@ container width children =
 nriThemedModules : ModuleStates -> List (ModuleExample Msg)
 nriThemedModules model =
     [ TextExample.example
-    , TextQuizExample.example
+    , TextWritingExample.example
     ]
 
 
@@ -88,5 +87,4 @@ styles =
           [ ModuleExample.styles
           ]
         , (Text.styles |> .css) ()
-        , (TextQuiz.styles |> .css) ()
         ]

styleguide-app/View.elm

@@ -115,7 +115,7 @@ navigation route =
                 :: List.map
                     navLink
                     [ Text
-                    , TextQuiz
+                    , TextWriting
                     , Colors
                     , Layout
                     , Inputs