Skip to content

Commit 637f425

Browse files
kimispencerkimispencer
authored
Merge pull request #23 from lumihq/kimi/border-component
Add Border component
2 parents a0473c0 + fe34aa6 commit 637f425

File tree

5 files changed

+194
-0
lines changed

5 files changed

+194
-0
lines changed

‎docs/App.jsx‎

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

4848
const componentLoaders = [
49+
"Border",
4950
"Breadcrumb",
5051
"Button",
5152
"ButtonGroup",

‎docs/Examples/Border.example.purs‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
module Lumi.Components.Examples.Border where
2+
3+
import Prelude
4+
5+
import Data.Maybe (Maybe(..))
6+
import Lumi.Components.Border (border, borderSquare, borderRound, borderSquareTop, borderSquareBottom, borderTop, borderBottom)
7+
import Lumi.Components.Column (column, column_)
8+
import Lumi.Components.Example (example)
9+
import Lumi.Components.Spacing (Space(..))
10+
import Lumi.Components.Text (h2_)
11+
import React.Basic (Component, JSX, createComponent, makeStateless)
12+
import React.Basic.DOM (css)
13+
import React.Basic.DOM as R
14+
15+
docs :: JSX
16+
docs =
17+
column_
18+
[ h2_ "Rounded borders"
19+
, example
20+
$ borderRound $
21+
column
22+
{ children: [ R.text "bordered element" ]
23+
, style: R.css {}
24+
}
25+
, h2_ "Square borders"
26+
, example
27+
$ borderSquare $
28+
column
29+
{ children: [ R.text "bordered element" ]
30+
, style: R.css {}
31+
}
32+
, h2_ "Square Top borders"
33+
, example
34+
$ borderSquareTop $
35+
column
36+
{ children: [ R.text "bordered element" ]
37+
, style: R.css {}
38+
}
39+
, h2_ "Square Bottom borders"
40+
, example
41+
$ borderSquareBottom $
42+
column
43+
{ children: [ R.text "bordered element" ]
44+
, style: R.css {}
45+
}
46+
, h2_ "Top borders"
47+
, example
48+
$ borderTop $
49+
column
50+
{ children: [ R.text "bordered element" ]
51+
, style: R.css {}
52+
}
53+
, h2_ "Bottom borders"
54+
, example
55+
$ borderBottom $
56+
column
57+
{ children: [ R.text "bordered element" ]
58+
, style: R.css {}
59+
}
60+
]

‎src/Lumi/Components/Border.purs‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
module Lumi.Components.Border where
2+
3+
import Prelude
4+
5+
import Color (toHexString)
6+
import Lumi.Components.Color (colors)
7+
import JSS (JSS, jss)
8+
import React.Basic (Component, JSX, createComponent, element, makeStateless)
9+
import React.Basic.DOM (unsafeCreateDOMComponent)
10+
11+
data BorderStyle
12+
= SquareTop
13+
| SquareBottom
14+
| Round
15+
| Square
16+
| Top
17+
| Bottom
18+
19+
toStyle :: BorderStyle -> String
20+
toStyle SquareTop = "square-top"
21+
toStyle SquareBottom = "square-bottom"
22+
toStyle Round = "round"
23+
toStyle Square = "square"
24+
toStyle Top = "top"
25+
toStyle Bottom = "bottom"
26+
27+
component :: Component BorderProps
28+
component = createComponent "Border"
29+
30+
type BorderProps =
31+
{ children :: JSX
32+
, borderStyle :: BorderStyle
33+
}
34+
35+
border :: BorderProps -> JSX
36+
border = makeStateless component render
37+
where
38+
lumiBorderElement = element (unsafeCreateDOMComponent "lumi-border")
39+
40+
render props =
41+
lumiBorderElement
42+
{ "data-border-style": toStyle props.borderStyle
43+
, children: props.children
44+
}
45+
46+
borderSquare :: JSX -> JSX
47+
borderSquare children =
48+
border
49+
{ children
50+
, borderStyle: Square
51+
}
52+
53+
borderRound :: JSX -> JSX
54+
borderRound children =
55+
border
56+
{ children
57+
, borderStyle: Round
58+
}
59+
60+
borderSquareTop :: JSX -> JSX
61+
borderSquareTop children =
62+
border
63+
{ children
64+
, borderStyle: SquareTop
65+
}
66+
67+
borderSquareBottom :: JSX -> JSX
68+
borderSquareBottom children =
69+
border
70+
{ children
71+
, borderStyle: SquareBottom
72+
}
73+
74+
borderTop :: JSX -> JSX
75+
borderTop children =
76+
border
77+
{ children
78+
, borderStyle: Top
79+
}
80+
81+
borderBottom :: JSX -> JSX
82+
borderBottom children =
83+
border
84+
{ children
85+
, borderStyle: Bottom
86+
}
87+
88+
89+
styles :: JSS
90+
styles = jss
91+
{ "@global":
92+
{ "lumi-border":
93+
{ borderColor: toHexString colors.black3
94+
, borderStyle: "solid"
95+
, borderWidth: "1px"
96+
, padding: "16px"
97+
, overflow: "hidden"
98+
, "&[data-border-style='round']":
99+
{ borderRadius: "5px"
100+
}
101+
, "&[data-border-style='square']":
102+
{ borderRadius: "0px"
103+
}
104+
, "&[data-border-style='square-bottom']":
105+
{ borderTopRightRadius: "5px"
106+
, borderTopLeftRadius: "5px"
107+
, borderBottomRightRadius: "0px"
108+
, borderBottomLeftRadius: "0px"
109+
}
110+
, "&[data-border-style='square-top']":
111+
{ borderTopRightRadius: "0px"
112+
, borderTopLeftRadius: "0px"
113+
, borderBottomRightRadius: "5px"
114+
, borderBottomLeftRadius: "5px"
115+
}
116+
, "&[data-border-style='top']":
117+
{ border: "inherit"
118+
, borderTop: "1px solid " <> toHexString colors.black3
119+
, paddingLeft: "0px"
120+
, paddingRight: "0px"
121+
}
122+
, "&[data-border-style='bottom']":
123+
{ border: "inherit"
124+
, borderBottom: "1px solid " <> toHexString colors.black3
125+
, paddingLeft: "0px"
126+
, paddingRight: "0px"
127+
}
128+
}
129+
}
130+
}

‎src/Lumi/Components/Spacing.purs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ module Lumi.Components.Spacing
22
( Space(..)
33
, hspace
44
, vspace
5+
, toPixels
56
) where
67

78
import React.Basic.Compat (JSX)

‎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.Border as Border
1011
import Lumi.Components.Breadcrumb as Breadcrumb
1112
import Lumi.Components.Button (styles) as Button
1213
import Lumi.Components.ButtonGroup as ButtonGroup
@@ -60,6 +61,7 @@ attachGlobalComponentStyles = do
6061
jssInstance <- JSS.createInstance JSS.preset
6162
traverse_ (JSS.globalAttachStyleSheet <=< JSS.createStyleSheet jssInstance)
6263
[ globals
64+
, Border.styles
6365
, Breadcrumb.styles
6466
, Button.styles
6567
, ButtonGroup.styles

0 commit comments

Comments
 (0)