[WIP] Prototype new Text components

docs/App.jsx

@@ -126,7 +126,8 @@ const componentv2Loaders = [
   "Clip",
   "Link",
   "QRCode",
-  "Slat"
+  "Slat",
+  "Text"
 ].map(fromComponentPathv2);
 
 const App = () => {

docs/Examples2/Text.example.purs

@@ -0,0 +1,43 @@
+module Lumi.Components2.Examples.Text where
+
+import Prelude
+
+import Lumi.Components (($$$))
+import Lumi.Components.Example (example)
+import Lumi.Components2.Box (box)
+import Lumi.Components2.Text as T
+import React.Basic (JSX, fragment)
+
+docs :: JSX
+docs =
+  box
+  $$$ [ example
+        $ fragment
+        $ [ T.sectionHeader $$$ "A tiny story"
+          , T.subsectionHeader $$$ "Hello!"
+          , T.paragraph
+            $$$ [ T.text
+                  $ T._emphasis
+                  $$$ "How are you? "
+                , T.text
+                  $$$ "Hope you're doing "
+                , T.text
+                  $ T._strong
+                  $$$ "fine. "
+                , T.text
+                  $ T._subtext
+                  $ T._muted
+                  $$$ "Yes, I do."
+                ]
+          , T.paragraph
+            $$$ [ T.text $$$ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue ligula et odio rutrum, eu imperdiet ante laoreet. Cras mollis faucibus urna, eu luctus ligula condimentum ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et mi mattis, maximus urna id, luctus neque. Sed non lorem molestie nibh suscipit condimentum id quis enim. Nunc tortor elit, posuere eu metus sed, finibus sagittis est. Fusce dapibus lacus vitae augue vulputate, in convallis lectus congue. "
+                , T.text $ T._strong $$$ "Hi! "
+                , T.text $ T._subtext $$$ "Hey!"
+                ]
+          , T.paragraph_
+            $$$ "Vestibulum eu arcu eget lectus interdum maximus feugiat sed velit. Integer ullamcorper urna quis cursus mattis. Nam vel hendrerit purus. Aliquam fringilla dictum nunc at ornare. Morbi ornare blandit tincidunt. Etiam sodales fringilla libero, vitae pulvinar sapien luctus ac. Proin condimentum vitae risus id vestibulum. Sed sed turpis leo. Quisque ligula leo, facilisis eget metus ullamcorper, aliquet mollis tortor. Donec purus metus, maximus rutrum nunc eget, rhoncus tempor erat. Sed efficitur tellus id velit ullamcorper, ut dignissim neque pretium. Sed id metus porta, efficitur est non, vulputate sapien."
+          , T.paragraph_
+            $ T._subtext
+            $$$ "Donec maximus commodo ipsum vel elementum. Sed at nunc dapibus, vulputate tellus eu, finibus ante. Nunc dolor ante, auctor et rutrum quis, sagittis ut nulla. Integer vel tempus ipsum, vel laoreet orci. Curabitur eu sem bibendum, rhoncus risus vel, tristique mauris. Cras lobortis elit sit amet quam semper pretium. Nullam fermentum ut velit ac cursus."
+          ]
+      ]

src/Lumi/Components2/Text.purs

@@ -0,0 +1,194 @@
+module Lumi.Components2.Text where
+
+import Prelude
+
+import Data.Lens (Setter')
+import Effect.Unsafe (unsafePerformEffect)
+import Lumi.Components (LumiComponent, LumiProps, PropsModifier, lumiComponent, propsModifier)
+import Lumi.Styles as S
+import Lumi.Styles.Theme (LumiTheme(..), useTheme)
+import React.Basic (JSX, ReactComponent)
+import React.Basic.DOM as R
+import React.Basic.Emotion as E
+import React.Basic.Hooks as Hooks
+
+-- Text
+
+data Text = Text
+
+type TextProps =
+  ( component :: Text
+  , element :: TextElement
+  , content :: String
+  )
+
+type TextElement = ReactComponent { children :: Array JSX, className :: String }
+
+text :: LumiComponent TextProps
+text =
+  unsafePerformEffect $ lumiComponent "Text" defaults \props -> Hooks.do
+    theme <- useTheme
+    pure $
+      E.element props.element
+        { children: [ R.text props.content ]
+        , className: props.className
+        , css: defaultTextStyle <> props.css theme
+        }
+  where
+    defaults :: Record TextProps
+    defaults =
+      { component: Text
+      , element: R.span'
+      , content: ""
+      }
+
+    defaultTextStyle =
+      S.css
+        { fontSize: S.str "14px"
+        , lineHeight: S.str "17px"
+        , margin: S.str "0"
+        , padding: S.str "0"
+        }
+
+type TextModifier = forall r. PropsModifier (component :: Text, element :: TextElement | r)
+
+_body :: TextModifier
+_body = propsModifier _{ element = R.span' :: TextElement }
+
+_strong :: TextModifier
+_strong = propsModifier _{ element = R.strong' :: TextElement }
+
+_emphasis :: TextModifier
+_emphasis = propsModifier _{ element = R.em' :: TextElement }
+
+_subtext :: TextModifier
+_subtext =
+  propsModifier _{ element = R.small' :: TextElement }
+  <<< S.style_
+        ( S.css
+            { fontSize: S.str "12px"
+            , lineHeight: S.str "14px"
+            , marginBottom: S.str "6px"
+            }
+        )
+
+_muted :: TextModifier
+_muted =
+  S.style \(LumiTheme { colors }) ->
+    S.css { color: S.color colors.black1 }
+
+-- Paragraph
+
+type ParagraphProps =
+  ( component :: Text
+  , element :: TextElement
+  , content :: Array JSX
+  )
+
+paragraph_ :: LumiComponent TextProps
+paragraph_ = paragraph <<< renderInnerText
+  where
+    renderInnerText :: Setter' (LumiProps ParagraphProps) (LumiProps TextProps)
+    renderInnerText f props =
+      let
+        props' = f $ props { content = "" }
+      in
+        props'
+          { content =
+              [ text _
+                  { element = props'.element
+                  , content = props'.content
+                  , css = \_ -> S.css { fontSize: S.str "inherit", lineHeight: S.str "inherit" }
+                  }
+              ]
+          }
+
+paragraph :: LumiComponent ParagraphProps
+paragraph =
+  unsafePerformEffect $ lumiComponent "Paragraph" defaults \props -> Hooks.do
+    theme <- useTheme
+    pure $
+      E.element R.p'
+        { children: props.content
+        , className: props.className
+        , css: defaultParagraphStyle <> props.css theme
+        }
+  where
+    defaults :: Record ParagraphProps
+    defaults =
+      { component: Text
+      , element: R.span'
+      , content: []
+      }
+
+    defaultParagraphStyle =
+      S.css
+        { fontSize: S.str "14px"
+        , lineHeight: S.str "17px"
+        , margin: S.str "0"
+        , marginBottom: S.str "7px"
+        , padding: S.str "0"
+        }
+
+-- Headers
+
+type HeaderProps = (content :: String)
+
+subsectionHeader :: LumiComponent HeaderProps
+subsectionHeader = mkHeaderComponent R.h4'
+
+sectionHeader :: LumiComponent HeaderProps
+sectionHeader =
+  mkHeaderComponent R.h3'
+  <<< S.style_
+        ( S.css
+            { fontSize: S.str "20px"
+            , lineHeight: S.str "24px"
+            , marginBottom: S.str "10px"
+            }
+        )
+
+title :: LumiComponent HeaderProps
+title =
+  mkHeaderComponent R.h2'
+  <<< S.style_
+        ( S.css
+            { fontSize: S.str "24px"
+            , lineHeight: S.str "29px"
+            , marginBottom: S.str "12px"
+            }
+        )
+
+mainHeader :: LumiComponent HeaderProps
+mainHeader =
+  mkHeaderComponent R.h1'
+  <<< S.style_
+        ( S.css
+            { fontSize: S.str "30px"
+            , lineHeight: S.str "36px"
+            , marginBottom: S.str "15px"
+            }
+        )
+
+mkHeaderComponent
+  :: TextElement
+  -> LumiComponent HeaderProps
+mkHeaderComponent el =
+  unsafePerformEffect $ lumiComponent "Header" { content: "" } \props -> Hooks.do
+    theme <- useTheme
+    pure $
+      E.element el
+        { children: [ R.text props.content ]
+        , className: props.className
+        , css: defaultHeaderStyle <> props.css theme
+        }
+  where
+    defaultHeaderStyle =
+      S.css
+        { fontSize: S.str "17px"
+        , fontWeight: S.str "400"
+        , lineHeight: S.str "20px"
+        , padding: S.str "0"
+        , margin: S.str "0"
+        , marginBottom: S.str "9px"
+        }