Skip to content

Commit 5e148db

Browse files
arthurxavierxarthurxavierx
authored
Add badge and flexDivider components (#78)
* Add badge component and use it inside tabs * Add flexDivider * Code review
1 parent c369f56 commit 5e148db

File tree

7 files changed

+178
-26
lines changed

7 files changed

+178
-26
lines changed

‎docs/App.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const fromComponentPath = title => ({
4848
});
4949

5050
const componentLoaders = [
51+
"Badge",
5152
"Border",
5253
"Breadcrumb",
5354
"Button",

‎docs/Examples/Badge.example.purs

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
module Lumi.Components.Examples.Badge where
2+
3+
import Lumi.Components.Badge (badge, badge_)
4+
import Lumi.Components.Color (colors)
5+
import Lumi.Components.Column (column_)
6+
import Lumi.Components.Spacing (Space(..), vspace)
7+
import Lumi.Components.Text (nbsp)
8+
import React.Basic (JSX)
9+
import React.Basic.DOM as R
10+
11+
docs :: JSX
12+
docs =
13+
column_
14+
[ badge_ "1"
15+
, vspace S8
16+
17+
, badge_ "2"
18+
, vspace S8
19+
20+
, badge_ "3"
21+
, vspace S8
22+
23+
, badge_ "Hello!"
24+
, vspace S8
25+
26+
, badge
27+
{ background: colors.primary
28+
, color: colors.white
29+
, style: R.css {}
30+
, text: "1"
31+
}
32+
, vspace S8
33+
34+
, badge
35+
{ background: colors.primary
36+
, color: colors.white
37+
, style: R.css {}
38+
, text: nbsp
39+
}
40+
]

‎docs/Examples/Divider.example.purs

Lines changed: 46 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ module Lumi.Components.Examples.Divider where
22

33
import Prelude
44

5-
import Lumi.Components.Column (column_)
6-
import Lumi.Components.Divider (divider_)
5+
import Lumi.Components.Column (column, column_)
6+
import Lumi.Components.Divider (divider_, flexDivider_)
77
import Lumi.Components.Example (example)
8+
import Lumi.Components.Row (row)
9+
import Lumi.Components.Text as T
810
import React.Basic (Component, JSX, createComponent, makeStateless)
9-
import React.Basic.DOM (css)
1011
import React.Basic.DOM as R
1112

1213
component :: Component Unit
@@ -15,11 +16,48 @@ component = createComponent "DividerExample"
1516
docs :: JSX
1617
docs = unit # makeStateless component render
1718
where
19+
item t =
20+
T.text T.body
21+
{ style = R.css { margin: "12px" }
22+
, children = [ R.text t ]
23+
}
24+
1825
render _ =
1926
column_
20-
[ example
21-
$ R.div
22-
{ style: css { minWidth: 300 }
23-
, children: [ divider_ ]
24-
}
27+
[ T.text T.p
28+
{ children =
29+
[ R.code_ [ R.text "hr" ]
30+
, R.text " based divider:"
31+
]
32+
}
33+
, example $
34+
column
35+
{ style: R.css
36+
{ minWidth: 300
37+
, alignItems: "center"
38+
}
39+
, children:
40+
[ item "Lorem"
41+
, divider_
42+
, item "ipsum"
43+
]
44+
}
45+
46+
, T.p_ "Flexbox based divider:"
47+
, example $
48+
row
49+
{ style: R.css
50+
{ minHeight: 200
51+
, alignItems: "center"
52+
}
53+
, children:
54+
[ item "Lorem"
55+
, flexDivider_
56+
, column_
57+
[ item "ipsum"
58+
, flexDivider_
59+
, item "dolor"
60+
]
61+
]
62+
}
2563
]

‎src/Lumi/Components/Badge.purs

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
module Lumi.Components.Badge where
2+
3+
import Prelude
4+
5+
import Color (cssStringHSLA)
6+
import JSS (JSS, jss)
7+
import Lumi.Components.Color (Color, colors)
8+
import Lumi.Components.Text (lumiSubtextFontSize)
9+
import React.Basic (JSX, element)
10+
import React.Basic.DOM as R
11+
12+
type BadgeProps =
13+
{ background :: Color
14+
, color :: Color
15+
, style :: R.CSS
16+
, text :: String
17+
}
18+
19+
badge_ :: String -> JSX
20+
badge_ = badge <<< defaults { text = _ }
21+
22+
badge :: BadgeProps -> JSX
23+
badge { background, color, style, text } =
24+
lumiBadgeElement
25+
{ style: R.mergeStyles
26+
[ R.css
27+
{ color: cssStringHSLA color
28+
, background: cssStringHSLA background
29+
}
30+
, style
31+
]
32+
, children: R.text text
33+
}
34+
where
35+
lumiBadgeElement = element (R.unsafeCreateDOMComponent "lumi-badge")
36+
37+
defaults :: BadgeProps
38+
defaults =
39+
{ background: colors.black5
40+
, color: colors.secondary
41+
, style: R.css {}
42+
, text: ""
43+
}
44+
45+
styles :: JSS
46+
styles = jss
47+
{ "@global":
48+
{ "lumi-badge":
49+
{ alignSelf: "baseline"
50+
, display: "inline"
51+
, fontSize: lumiSubtextFontSize
52+
, lineHeight: "17px"
53+
, borderRadius: "9px"
54+
, marginTop: "2px"
55+
, padding: "0px 6px"
56+
}
57+
}
58+
}

‎src/Lumi/Components/Divider.purs

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Prelude
55
import Color (cssStringHSLA)
66
import JSS (JSS, jss)
77
import Lumi.Components.Color (colors)
8-
import React.Basic (Component, JSX, createComponent, makeStateless)
8+
import React.Basic (Component, JSX, createComponent, element, makeStateless)
99
import React.Basic.DOM as R
1010

1111
type DividerProps =
@@ -26,16 +26,39 @@ divider = makeStateless component $ R.hr <<< mapProps
2626
divider_ :: JSX
2727
divider_ = divider { style: R.css {} }
2828

29+
flexDivider :: DividerProps -> JSX
30+
flexDivider { style } =
31+
lumiFlexDividerElement
32+
{ style
33+
}
34+
where
35+
lumiFlexDividerElement = element (R.unsafeCreateDOMComponent "lumi-flex-divider")
36+
37+
flexDivider_ :: JSX
38+
flexDivider_ = flexDivider { style: R.css {} }
39+
2940
styles :: JSS
3041
styles = jss
3142
{ "@global":
3243
{ "hr.lumi":
3344
{ height: "1px"
45+
, alignSelf: "stretch"
46+
, color: cssStringHSLA colors.black4
47+
, background: cssStringHSLA colors.black4
48+
, fontSize: "0"
49+
, border: "0"
50+
, flexShrink: "0"
51+
, flexBasis: "1px"
52+
}
53+
54+
, "lumi-flex-divider":
55+
{ alignSelf: "stretch"
3456
, color: cssStringHSLA colors.black4
3557
, background: cssStringHSLA colors.black4
3658
, fontSize: "0"
3759
, border: "0"
3860
, flexShrink: "0"
61+
, flexBasis: "1px"
3962
}
4063
}
4164
}

‎src/Lumi/Components/Styles.purs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Data.Traversable (traverse_)
77
import Effect (Effect)
88
import JSS (JSS, jss)
99
import JSS as JSS
10+
import Lumi.Components.Badge as Badge
1011
import Lumi.Components.Border as Border
1112
import Lumi.Components.Breadcrumb as Breadcrumb
1213
import Lumi.Components.Button (styles) as Button
@@ -62,6 +63,7 @@ attachGlobalComponentStyles = do
6263
jssInstance <- JSS.createInstance JSS.preset
6364
traverse_ (JSS.globalAttachStyleSheet <=< JSS.createStyleSheet jssInstance)
6465
[ globals
66+
, Badge.styles
6567
, Border.styles
6668
, Breadcrumb.styles
6769
, Button.styles

‎src/Lumi/Components/Tab.purs

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import Data.String (Pattern(..), drop, indexOf, joinWith, null, split)
1212
import Effect (Effect)
1313
import Global.Unsafe (unsafeEncodeURIComponent)
1414
import JSS (JSS, jss)
15+
import Lumi.Components.Badge (badge)
1516
import Lumi.Components.Color (colors)
1617
import Lumi.Components.Column (column_)
1718
import Lumi.Components.Link as Link
18-
import Lumi.Components.Text (lumiSubtextFontSize)
1919
import React.Basic (Component, JSX, createComponent, element, empty, fragment, makeStateless)
2020
import React.Basic.DOM (CSS, mergeStyles)
2121
import React.Basic.DOM as R
@@ -38,7 +38,6 @@ tab :: TabProps -> JSX
3838
tab = makeStateless tabComponent render
3939
where
4040
lumiTabElement = element (R.unsafeCreateDOMComponent "lumi-tab")
41-
lumiTabCountElement = element (R.unsafeCreateDOMComponent "lumi-tab-count")
4241

4342
render props =
4443
lumiTabElement
@@ -51,9 +50,11 @@ tab = makeStateless tabComponent render
5150
fragment
5251
[ props.label
5352
, props.count # maybe mempty \count ->
54-
lumiTabCountElement
53+
badge
5554
{ style: R.css { marginLeft: "8px" }
56-
, children: [ R.text (show count) ]
55+
, background: colors.black5
56+
, color: colors.secondary
57+
, text: show count
5758
}
5859
]
5960
}
@@ -213,11 +214,12 @@ styles = jss
213214
{ "lumi-tab":
214215
{ flex: "0 0 auto"
215216
, display: "flex"
217+
, alignItems: "center"
216218
, boxSizing: "border-box"
217219
, "& > a.lumi":
218220
{ flex: "0 0 auto"
219221
, display: "flex"
220-
, alignItems: "center"
222+
, alignItems: "baseline"
221223
, fontSize: "14px "
222224
, cursor: "pointer"
223225
, whiteSpace: "nowrap"
@@ -229,18 +231,6 @@ styles = jss
229231
}
230232
}
231233

232-
, "& lumi-tab-count":
233-
{ fontSize: lumiSubtextFontSize
234-
, color: cssStringHSLA colors.secondary
235-
236-
, borderRadius: "9px"
237-
, backgroundColor: cssStringHSLA colors.black5
238-
239-
, marginTop: "2px"
240-
, padding: "0px 6px"
241-
, lineHeight: "17px"
242-
}
243-
244234
, "&[data-active=\"true\"]":
245235
{ boxShadow: "inset 0 -1px 0 0 " <> cssStringHSLA colors.black
246236
, "& > a.lumi, & > a.lumi:hover, & > a.lumi:visited":

0 commit comments

Comments
 (0)