/
Icon.purs
168 lines (137 loc) · 3.29 KB
/
Icon.purs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
module Lumi.Components.Icon where
import Prelude
import Effect.Unsafe (unsafePerformEffect)
import JSS (JSS, jss)
import React.Basic.Classic (Component, JSX, createComponent, element, makeStateless)
import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
data IconType
= ArrowDown
| ArrowLeft
| ArrowRight
| ArrowUp
| Bin
| Cart
| Check
| Close
| Currency
| Grid
| Hamburger
| Indeterminate
| Info
| List
| Minus
| Overflow
| Percent
| Plus
| Remove
| Search
| Rearrange
instance showIconType :: Show IconType where
show ArrowDown = "↓"
show ArrowLeft = "←"
show ArrowRight = "→"
show ArrowUp = "↑"
show Bin = "🗑"
show Cart = "🛒"
show Check = "✓"
show Close = "X"
show Currency = "$"
show Grid = "⌗"
show Hamburger = ""
show Indeterminate = "⎻"
show Info = "?"
show List = ""
show Minus = "-"
show Overflow = "⋯"
show Percent = "%"
show Plus = "+"
show Remove = "x"
show Search = "🔍"
show Rearrange = ""
iconArrowDown :: IconType
iconArrowDown = ArrowDown
iconArrowLeft :: IconType
iconArrowLeft = ArrowLeft
iconArrowRight :: IconType
iconArrowRight = ArrowRight
iconArrowUp :: IconType
iconArrowUp = ArrowUp
iconBin :: IconType
iconBin = Bin
iconCart :: IconType
iconCart = Cart
iconClose :: IconType
iconClose = Close
iconCurrency :: IconType
iconCurrency = Currency
iconGrid :: IconType
iconGrid = Grid
iconHamburger :: IconType
iconHamburger = Hamburger
iconIndeterminate :: IconType
iconIndeterminate = Indeterminate
iconInfo :: IconType
iconInfo = Info
iconList :: IconType
iconList = List
iconMinus :: IconType
iconMinus = Minus
iconOverflow :: IconType
iconOverflow = Overflow
iconPercent :: IconType
iconPercent = Percent
iconPlus :: IconType
iconPlus = Plus
iconRemove :: IconType
iconRemove = Remove
iconSearch :: IconType
iconSearch = Search
iconRearrange :: IconType
iconRearrange = Rearrange
type IconProps =
{ type_ :: IconType
, style :: CSS
}
component :: Component IconProps
component = createComponent "Icon"
icon :: IconProps -> JSX
icon = makeStateless component $ lumiIconElement <<< mapProps
where
lumiIconElement = element (unsafePerformEffect $ unsafeCreateDOMComponent "lumi-font-icon")
mapProps props =
{ "data-icon-char": show props.type_
, style: props.style
}
icon_ :: IconType -> JSX
icon_ type_ = icon
{ type_
, style: css {}
}
styles :: JSS
styles = jss
{ "@font-face":
{ fontFamily: "lumi-font-icons"
, src: "url(https://s3-us-west-2.amazonaws.com/lumi-gumball/fonts/unicode/lumi-font-icons.woff)"
, fontWeight: "400"
, fontStyle: "normal"
}
, "@global":
{ "lumi-font-icon":
{ fontSize: "inherit"
, color: "inherit"
, lineHeight: "inherit"
, "&::before":
{ fontFamily: "lumi-font-icons!important"
, content: "attr(data-icon-char)"
, fontStyle: "normal!important"
, fontWeight: "normal!important"
, fontVariant: "normal!important"
, textTransform: "none!important"
, speak: "none"
, "WebkitFontSmoothing": "antialiased"
, "MozOsxFontSmoothing": "grayscale"
, verticalAlign: "middle"
}
}
}
}