/
Pill.purs
73 lines (62 loc) · 1.87 KB
/
Pill.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
module Lumi.Components.Pill where
import Prelude
import Color (cssStringHSLA)
import Data.Maybe (Maybe(..))
import Data.Nullable (Nullable, toNullable)
import JSS (JSS, jss)
import Lumi.Components.Color (colors)
import Lumi.Components.Status (Status)
import React.Basic (Component, JSX, createComponent, element, makeStateless)
import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
type PillProps =
{ status :: Status
, style :: CSS
, testId :: Nullable String
, title :: String
}
component :: Component PillProps
component = createComponent "Pill"
pill :: PillProps -> JSX
pill = makeStateless component $ lumiPillElement <<< mapProps
where
lumiPillElement = element (unsafeCreateDOMComponent "lumi-pill")
mapProps props =
{ "data-status": show props.status
, "data-testid": props.testId
, children: props.title
, style: props.style
}
pill_ :: Status -> String -> JSX
pill_ status title = pill
{ status
, style: css {}
, testId: toNullable Nothing
, title
}
styles :: JSS
styles = jss
{ "@global":
{ "lumi-pill":
{ padding: "2px 8px"
, borderRadius: "20px"
, fontSize: "13px"
, border: "1px solid"
, "&[data-status=\"active\"]":
{ color: cssStringHSLA colors.accent1
, borderColor: cssStringHSLA colors.accent1
}
, "&[data-status=\"warning\"]":
{ color: cssStringHSLA colors.accent2
, borderColor: cssStringHSLA colors.accent2
}
, "&[data-status=\"error\"]":
{ color: cssStringHSLA colors.accent3
, borderColor: cssStringHSLA colors.accent3
}
, "&[data-status=\"unknown\"]":
{ color: cssStringHSLA colors.black1
, borderColor: cssStringHSLA colors.black1
}
}
}
}