Skip to content

Commit 12e327f

Browse files
arthurxavierxarthurxavierx
authored
Add new Text components (#148)
1 parent 72e374b commit 12e327f

File tree

8 files changed

+423
-7
lines changed

8 files changed

+423
-7
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"purescript-profunctor-lenses": ">=4.0.0 <7.0.0",
3131
"purescript-random": "^4.0.0",
3232
"purescript-react-basic": "^13.0.0",
33-
"purescript-react-basic-emotion": "^4.0.0",
33+
"purescript-react-basic-emotion": "^4.2.1",
3434
"purescript-react-basic-hooks": "^4.1.1",
3535
"purescript-react-dnd-basic": "^6.1.4",
3636
"purescript-record": ">= 1.0.0 < 3.0.0",

‎docs/App.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,8 @@ const componentv2Loaders = [
126126
"Clip",
127127
"Link",
128128
"QRCode",
129-
"Slat"
129+
"Slat",
130+
"Text"
130131
].map(fromComponentPathv2);
131132

132133
const App = () => {

‎docs/Examples2/Text.example.purs

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
module Lumi.Components2.Examples.Text where
2+
3+
import Prelude
4+
5+
import Lumi.Components (($$$))
6+
import Lumi.Components.Divider (flexDivider_)
7+
import Lumi.Components.Example (example)
8+
import Lumi.Components.Spacing (Space(..), hspace)
9+
import Lumi.Components2.Box (column, row)
10+
import Lumi.Components2.Text as T
11+
import Lumi.Styles (StyleModifier)
12+
import Lumi.Styles as S
13+
import Lumi.Styles.Box (_flex)
14+
import React.Basic (JSX, fragment)
15+
16+
docs :: JSX
17+
docs =
18+
column
19+
$$$ [ T.sectionHeader $$$ "Paragraphs"
20+
, T.paragraph_ $$$ "Paragraphs are used for laying out chunks of text as concrete, individual and independent elements in a page."
21+
, example
22+
$ fragment
23+
$ [ T.paragraph_ $$$ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia imperdiet turpis, blandit mollis purus venenatis non. Curabitur tincidunt magna at purus facilisis tempus in ut massa. Donec egestas orci lacus, eu rhoncus ipsum finibus et. Curabitur eu dapibus massa."
24+
, T.paragraph_ $ T.subtext $$$ "Sed a arcu nibh. Aliquam rhoncus luctus gravida. Morbi pharetra sollicitudin arcu sit amet euismod. Maecenas blandit nisi ac metus tristique, ut euismod erat rhoncus. Donec semper ut est ac sodales. Sed elementum laoreet laoreet."
25+
]
26+
27+
, T.sectionHeader $$$ "Headers"
28+
, T.paragraph_ $$$ "Headers are block-level elements used for marking/separating sections of a layout or for displaying important pieces of information in a context."
29+
, example
30+
$ fragment
31+
$ [ T.mainHeader $$$ "MainHeader"
32+
, T.title $$$ "Title"
33+
, T.sectionHeader $$$ "SectionHeader"
34+
, T.subsectionHeader $$$ "SubsectionHeader"
35+
]
36+
37+
, T.paragraph_ $$$ "Text elements such as headers and paragraphs can be composed inside other block level elements such as boxes, columns and rows."
38+
, example
39+
$ fragment
40+
$ [ T.sectionHeader $ T.strong $$$ "A tiny story"
41+
, T.subsectionHeader $$$ "Hello!"
42+
, T.paragraph
43+
$$$ [ T.text
44+
$ T.emphasized
45+
$$$ "How are you? "
46+
, T.text
47+
$$$ "Hope you're doing "
48+
, T.text
49+
$ T.strong
50+
$$$ "fine. "
51+
, T.text
52+
$ T.subtext
53+
$ T.muted
54+
$$$ "Yes, I do."
55+
]
56+
, T.paragraph
57+
$$$ [ T.text
58+
$$$ "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. "
59+
, T.text
60+
$ T.strong
61+
$$$ "Hi! "
62+
, T.text
63+
$ T.subtext
64+
$$$ "Hey!"
65+
]
66+
, row
67+
$$$ [ T.paragraph
68+
$ T.emphasized
69+
$ _flex
70+
$$$ [ T.text
71+
$$$ "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. "
72+
, T.text
73+
$ nonItalic
74+
$$$ "Hi! "
75+
, T.text
76+
$ T.subtext
77+
$ nonItalic
78+
$$$ "Hey!"
79+
]
80+
, hspace S16
81+
, flexDivider_
82+
, hspace S16
83+
, column
84+
$ _flex
85+
$$$ [ T.paragraph_
86+
$$$ "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."
87+
, T.paragraph_
88+
$ T.subtext
89+
$$$ "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."
90+
]
91+
]
92+
]
93+
]
94+
95+
nonItalic :: StyleModifier
96+
nonItalic =
97+
S.style_ (S.css { fontStyle: S.str "normal" })

‎src/Lumi/Components.purs

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module Lumi.Components
22
( LumiProps
33
, PropsModifier
4+
, PropsModifier'
45
, propsModifier
56
, LumiComponent
67
, lumiComponent
@@ -35,9 +36,11 @@ type LumiComponent props = (LumiProps props -> LumiProps props) -> JSX
3536
type LumiProps props
3637
= { css :: LumiTheme -> Emotion.Style, className :: String | props }
3738

38-
type PropsModifier props
39+
type PropsModifier props = PropsModifier' props props
40+
41+
type PropsModifier' props props'
3942
= (LumiProps props -> LumiProps props) ->
40-
(LumiProps props -> LumiProps props)
43+
(LumiProps props' -> LumiProps props')
4144

4245
-- | Lift a `props -> props` function for composition with other `PropsModifier` functions.
4346
propsModifier :: forall props. (LumiProps props -> LumiProps props) -> PropsModifier props

0 commit comments

Comments
 (0)