@factorearth/component-library 3.3.13-alpha.0 → 3.5.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -11
- package/dist/Atoms/Buttons/Button.d.ts +1 -1
- package/dist/Atoms/Buttons/Button.js +17 -17
- package/dist/Atoms/Buttons/Button.js.map +1 -1
- package/dist/Atoms/DateField/DateField.d.ts +1 -1
- package/dist/Atoms/DateField/DateField.js +94 -94
- package/dist/Atoms/DateField/DateField.js.map +1 -1
- package/dist/Atoms/DropdownField/DropdownField.d.ts +1 -1
- package/dist/Atoms/FieldWrapper/FieldWrapper.js +21 -21
- package/dist/Atoms/MoreHorizonButton/MoreHorizonButton.js +52 -52
- package/dist/Atoms/NoteField/NoteField.js +38 -38
- package/dist/Atoms/NumberField/NumberField.d.ts +1 -1
- package/dist/Atoms/NumberField/NumberField.js +63 -63
- package/dist/Atoms/NumberField/NumberField.js.map +1 -1
- package/dist/Atoms/Pagination/Pagination.js +26 -26
- package/dist/Atoms/PhoneNumberField/PhoneNumberField.d.ts +1 -1
- package/dist/Atoms/PhoneNumberField/PhoneNumberField.js +6 -8
- package/dist/Atoms/PhoneNumberField/PhoneNumberField.js.map +1 -1
- package/dist/Atoms/SelectField/SelectField.d.ts +1 -1
- package/dist/Atoms/SelectField/SelectField.js +14 -1
- package/dist/Atoms/SelectField/SelectField.js.map +1 -1
- package/dist/Atoms/SortDropdown/SortDropdown.js +39 -39
- package/dist/Atoms/TextField/TextField.d.ts +1 -1
- package/dist/Atoms/TextField/TextField.js +20 -23
- package/dist/Atoms/TextField/TextField.js.map +1 -1
- package/dist/Atoms/Toggle/Toggle.d.ts +13 -0
- package/dist/Atoms/Toggle/Toggle.js +59 -0
- package/dist/Atoms/Toggle/Toggle.js.map +1 -0
- package/dist/Molecules/NavMenu/NavMenu.d.ts +38 -0
- package/dist/Molecules/NavMenu/NavMenu.js +178 -0
- package/dist/Molecules/NavMenu/NavMenu.js.map +1 -0
- package/dist/Molecules/Thumbnail/Thumbnail.d.ts +1 -1
- package/dist/Molecules/Thumbnail/Thumbnail.js +51 -51
- package/dist/Molecules/Thumbnail/Thumbnail.js.map +1 -1
- package/dist/Organisms/Card/Card.d.ts +1 -1
- package/dist/Organisms/Card/Card.js +36 -36
- package/dist/Organisms/Card/Card.js.map +1 -1
- package/dist/Organisms/Modal/Modal.d.ts +2 -2
- package/dist/Organisms/Modal/Modal.js +68 -68
- package/dist/Organisms/Modal/Modal.js.map +1 -1
- package/dist/Theme/ThemeProvider.js +15 -43
- package/dist/Theme/ThemeProvider.js.map +1 -1
- package/dist/Theme/tokens.json +105 -36
- package/dist/Theme/types.d.ts +2 -22
- package/dist/index.d.ts +2 -5
- package/dist/index.js +2 -8
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/dist/Atoms/ContentDropdown/ContentDropdown.d.ts +0 -11
- package/dist/Atoms/ContentDropdown/ContentDropdown.js +0 -37
- package/dist/Atoms/ContentDropdown/ContentDropdown.js.map +0 -1
- package/dist/Atoms/Tab/Tab.d.ts +0 -10
- package/dist/Atoms/Tab/Tab.js +0 -26
- package/dist/Atoms/Tab/Tab.js.map +0 -1
- package/dist/Molecules/Form/Form.d.ts +0 -14
- package/dist/Molecules/Form/Form.js +0 -16
- package/dist/Molecules/Form/Form.js.map +0 -1
- package/dist/Organisms/TabManager/TabManager.d.ts +0 -9
- package/dist/Organisms/TabManager/TabManager.js +0 -46
- package/dist/Organisms/TabManager/TabManager.js.map +0 -1
|
@@ -1,16 +1,6 @@
|
|
|
1
1
|
import React, { createContext, useContext, useState } from "react";
|
|
2
2
|
import tokens from "./tokens.json";
|
|
3
|
-
const {
|
|
4
|
-
black: {
|
|
5
|
-
1000: tokens.global["Base Colors"]["1000-black"].value
|
|
6
|
-
},
|
|
7
|
-
blue: {
|
|
8
|
-
300: tokens.global["Base Colors"]["300-light-blue"].value,
|
|
9
|
-
700: tokens.global["Base Colors"]["700-blue"].value,
|
|
10
|
-
},
|
|
11
|
-
green: {
|
|
12
|
-
500: tokens.global["Base Colors"]["500-green"].value,
|
|
13
|
-
},
|
|
3
|
+
const { grey, blue, green, red } = {
|
|
14
4
|
grey: {
|
|
15
5
|
200: tokens.global["Base Colors"]["200-white-grey"].value,
|
|
16
6
|
300: tokens.global["Base Colors"]["300-French-grey"].value,
|
|
@@ -18,14 +8,16 @@ const { black, blue, green, grey, red, white } = {
|
|
|
18
8
|
500: tokens.global["Base Colors"]["500-slate-grey"].value,
|
|
19
9
|
600: tokens.global["Base Colors"]["600-space-grey"].value,
|
|
20
10
|
700: tokens.global["Base Colors"]["700-grey"].value,
|
|
21
|
-
800: tokens.global["Base Colors"]["800-grey"].value,
|
|
22
|
-
1000: tokens.global["Base Colors"]["1000-grey"].value
|
|
23
11
|
},
|
|
24
|
-
|
|
25
|
-
|
|
12
|
+
blue: {
|
|
13
|
+
300: tokens.global["Base Colors"]["300-light-blue"].value,
|
|
14
|
+
700: tokens.global["Base Colors"]["700-blue"].value,
|
|
15
|
+
},
|
|
16
|
+
green: {
|
|
17
|
+
500: tokens.global["Base Colors"]["500-green"].value,
|
|
26
18
|
},
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
red: {
|
|
20
|
+
700: tokens.global["Base Colors"]["700-red"].value,
|
|
29
21
|
},
|
|
30
22
|
};
|
|
31
23
|
export const lightTheme = {
|
|
@@ -36,12 +28,10 @@ export const lightTheme = {
|
|
|
36
28
|
badge: grey["700"],
|
|
37
29
|
},
|
|
38
30
|
background: {
|
|
39
|
-
absolute: white["100"],
|
|
40
31
|
primary: grey["200"],
|
|
41
32
|
secondary: grey["300"],
|
|
42
33
|
tertiary: blue["300"],
|
|
43
34
|
tableRow: blue["300"],
|
|
44
|
-
disabledInput: grey["800"]
|
|
45
35
|
},
|
|
46
36
|
border: {
|
|
47
37
|
primary: grey["500"],
|
|
@@ -54,7 +44,7 @@ export const lightTheme = {
|
|
|
54
44
|
},
|
|
55
45
|
utils: {
|
|
56
46
|
success: green["500"],
|
|
57
|
-
error: red["
|
|
47
|
+
error: red["700"],
|
|
58
48
|
icon: grey["700"],
|
|
59
49
|
disabled: grey["500"],
|
|
60
50
|
},
|
|
@@ -67,23 +57,15 @@ export const lightTheme = {
|
|
|
67
57
|
buttonBorder: {
|
|
68
58
|
filled: blue["700"],
|
|
69
59
|
outlined: blue["700"],
|
|
70
|
-
destructive: red["
|
|
60
|
+
destructive: red["700"],
|
|
71
61
|
success: green["500"],
|
|
72
62
|
},
|
|
73
63
|
buttonBackground: {
|
|
74
64
|
filled: blue["700"],
|
|
75
65
|
outlined: grey["200"],
|
|
76
|
-
destructive: red["
|
|
66
|
+
destructive: red["700"],
|
|
77
67
|
success: green["500"],
|
|
78
68
|
},
|
|
79
|
-
tab: {
|
|
80
|
-
selected: grey["500"],
|
|
81
|
-
notSelected: white["100"],
|
|
82
|
-
},
|
|
83
|
-
tabText: {
|
|
84
|
-
selected: white["100"],
|
|
85
|
-
notSelected: grey["500"]
|
|
86
|
-
},
|
|
87
69
|
theme: "light",
|
|
88
70
|
};
|
|
89
71
|
export const darkTheme = {
|
|
@@ -94,12 +76,10 @@ export const darkTheme = {
|
|
|
94
76
|
badge: grey["700"],
|
|
95
77
|
},
|
|
96
78
|
background: {
|
|
97
|
-
absolute: black["1000"],
|
|
98
79
|
primary: grey["700"],
|
|
99
80
|
secondary: grey["600"],
|
|
100
81
|
tertiary: blue["700"],
|
|
101
82
|
tableRow: grey["600"],
|
|
102
|
-
disabledInput: grey["1000"]
|
|
103
83
|
},
|
|
104
84
|
border: {
|
|
105
85
|
primary: grey["500"],
|
|
@@ -112,7 +92,7 @@ export const darkTheme = {
|
|
|
112
92
|
},
|
|
113
93
|
utils: {
|
|
114
94
|
success: green["500"],
|
|
115
|
-
error: red["
|
|
95
|
+
error: red["700"],
|
|
116
96
|
icon: grey["200"],
|
|
117
97
|
disabled: grey["700"],
|
|
118
98
|
},
|
|
@@ -125,23 +105,15 @@ export const darkTheme = {
|
|
|
125
105
|
buttonBorder: {
|
|
126
106
|
filled: blue["700"],
|
|
127
107
|
outlined: grey["200"],
|
|
128
|
-
destructive: red["
|
|
108
|
+
destructive: red["700"],
|
|
129
109
|
success: green["500"]
|
|
130
110
|
},
|
|
131
111
|
buttonBackground: {
|
|
132
112
|
filled: grey["200"],
|
|
133
113
|
outlined: grey["700"],
|
|
134
|
-
destructive: red["
|
|
114
|
+
destructive: red["700"],
|
|
135
115
|
success: green["500"],
|
|
136
116
|
},
|
|
137
|
-
tab: {
|
|
138
|
-
selected: grey["400"],
|
|
139
|
-
notSelected: black["1000"],
|
|
140
|
-
},
|
|
141
|
-
tabText: {
|
|
142
|
-
selected: black["1000"],
|
|
143
|
-
notSelected: grey["400"]
|
|
144
|
-
},
|
|
145
117
|
theme: "dark",
|
|
146
118
|
};
|
|
147
119
|
const ThemeContext = createContext({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../lib/Theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,MAAM,MAAM,eAAe,CAAC;AAInC,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../lib/Theme/ThemeProvider.tsx"],"names":[],"mappings":"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"}
|
package/dist/Theme/tokens.json
CHANGED
|
@@ -5,88 +5,115 @@
|
|
|
5
5
|
"type": "lineHeights"
|
|
6
6
|
},
|
|
7
7
|
"Base Colors": {
|
|
8
|
-
"100-white": {
|
|
9
|
-
"value": "#FFF",
|
|
10
|
-
"type": "color",
|
|
11
|
-
"parent": "Collection 1/Mode 1",
|
|
12
|
-
"description": "Text Color for Selected Tab on Light Mode"
|
|
13
|
-
},
|
|
14
|
-
"1000-black": {
|
|
15
|
-
"value": "#000",
|
|
16
|
-
"type": "color",
|
|
17
|
-
"parent": "Collection 1/Mode 1",
|
|
18
|
-
"description": "Text Color for Selected Tab on Dark Mode"
|
|
19
|
-
},
|
|
20
8
|
"200-white-grey": {
|
|
21
9
|
"value": "#FCFCFD",
|
|
22
10
|
"type": "color",
|
|
23
|
-
"parent": "Collection 1/Mode 1"
|
|
11
|
+
"parent": "Collection 1/Mode 1",
|
|
12
|
+
"description": "Container Background, Text Dark"
|
|
24
13
|
},
|
|
25
14
|
"300-French-grey": {
|
|
26
15
|
"value": "#d0d8dc",
|
|
27
16
|
"type": "color",
|
|
28
17
|
"parent": "Collection 1/Mode 1",
|
|
29
|
-
"description": ""
|
|
18
|
+
"description": "Text 2 Dark"
|
|
30
19
|
},
|
|
31
20
|
"400-cadet-grey": {
|
|
32
21
|
"value": "#9aa3ac",
|
|
33
22
|
"type": "color",
|
|
34
23
|
"parent": "Collection 1/Mode 1",
|
|
35
|
-
"description": ""
|
|
24
|
+
"description": "Text 3"
|
|
36
25
|
},
|
|
37
26
|
"500-slate-grey": {
|
|
38
27
|
"value": "#6e7a87",
|
|
39
28
|
"type": "color",
|
|
40
29
|
"parent": "Collection 1/Mode 1",
|
|
41
|
-
"description": ""
|
|
30
|
+
"description": "Text 3"
|
|
42
31
|
},
|
|
43
32
|
"600-space-grey": {
|
|
44
33
|
"value": "#2f3034",
|
|
45
34
|
"type": "color",
|
|
46
35
|
"parent": "Collection 1/Mode 1",
|
|
47
|
-
"description": ""
|
|
36
|
+
"description": "Text 2, Container Background 2 Dark"
|
|
48
37
|
},
|
|
49
38
|
"700-grey": {
|
|
50
39
|
"value": "#1b1b1e",
|
|
51
40
|
"type": "color",
|
|
52
41
|
"parent": "Collection 1/Mode 1",
|
|
53
|
-
"description": ""
|
|
42
|
+
"description": "Text, Container Background Dark, Primary Label Dark"
|
|
54
43
|
},
|
|
55
44
|
"300-light-blue": {
|
|
56
45
|
"value": "#ebf7ff",
|
|
57
46
|
"type": "color",
|
|
58
47
|
"parent": "Collection 1/Mode 1",
|
|
59
|
-
"description": ""
|
|
48
|
+
"description": "Container Background 2"
|
|
60
49
|
},
|
|
61
50
|
"700-blue": {
|
|
62
|
-
"value": "#
|
|
51
|
+
"value": "#004F80",
|
|
63
52
|
"type": "color",
|
|
64
53
|
"parent": "Collection 1/Mode 1",
|
|
65
|
-
"description": ""
|
|
54
|
+
"description": "Primary Button Background, Primary Link"
|
|
66
55
|
},
|
|
67
56
|
"500-green": {
|
|
68
|
-
"value": "#
|
|
57
|
+
"value": "#365E3D",
|
|
69
58
|
"type": "color",
|
|
70
|
-
"parent": "Collection 1/Mode 1"
|
|
71
|
-
"description": ""
|
|
59
|
+
"parent": "Collection 1/Mode 1"
|
|
72
60
|
},
|
|
73
|
-
"
|
|
74
|
-
"value": "#
|
|
61
|
+
"700-red": {
|
|
62
|
+
"value": "#BF4040",
|
|
75
63
|
"type": "color",
|
|
76
|
-
"parent": "Collection 1/Mode 1"
|
|
77
|
-
"description": ""
|
|
64
|
+
"parent": "Collection 1/Mode 1"
|
|
78
65
|
},
|
|
79
|
-
"
|
|
80
|
-
"value": "#
|
|
66
|
+
"100-white": {
|
|
67
|
+
"value": "#FFFFFF",
|
|
81
68
|
"type": "color",
|
|
82
|
-
"
|
|
83
|
-
"description": "Disabled Text Inputs"
|
|
69
|
+
"description": "Background, Primary Button Background Dark, Primary Link Dark"
|
|
84
70
|
},
|
|
85
|
-
"
|
|
86
|
-
"value": "#
|
|
71
|
+
"500-regent-grey": {
|
|
72
|
+
"value": "#89949F",
|
|
87
73
|
"type": "color",
|
|
88
|
-
"
|
|
89
|
-
|
|
74
|
+
"description": "Border"
|
|
75
|
+
},
|
|
76
|
+
"300-iron-grey": {
|
|
77
|
+
"value": "#DCDEE0",
|
|
78
|
+
"type": "color",
|
|
79
|
+
"description": "Border 2, Border Dark"
|
|
80
|
+
},
|
|
81
|
+
"800-black": {
|
|
82
|
+
"value": "#000000",
|
|
83
|
+
"type": "color",
|
|
84
|
+
"description": "Background Dark"
|
|
85
|
+
},
|
|
86
|
+
"300-porcelain-grey": {
|
|
87
|
+
"value": "#EFF0F0",
|
|
88
|
+
"type": "color",
|
|
89
|
+
"description": "Border 2 Dark"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
"Brand Colors": {
|
|
93
|
+
"Factor Earth Fuscia": {
|
|
94
|
+
"value": "#A44D9B",
|
|
95
|
+
"type": "color",
|
|
96
|
+
"description": "Factor Earth Fuscia"
|
|
97
|
+
},
|
|
98
|
+
"Factor Earth Grain": {
|
|
99
|
+
"value": "#DCCAAD",
|
|
100
|
+
"type": "color",
|
|
101
|
+
"description": "Factor Earth Grain"
|
|
102
|
+
},
|
|
103
|
+
"Factor Earth Tea Flower": {
|
|
104
|
+
"value": "#BEDFB9",
|
|
105
|
+
"type": "color",
|
|
106
|
+
"description": "Factor Earth Tea Flower"
|
|
107
|
+
},
|
|
108
|
+
"Factor Earth Tropaz": {
|
|
109
|
+
"value": "#325690",
|
|
110
|
+
"type": "color",
|
|
111
|
+
"description": "Factor Earth Tropaz"
|
|
112
|
+
},
|
|
113
|
+
"Metcalf Bison Blue": {
|
|
114
|
+
"value": "#142541",
|
|
115
|
+
"type": "color",
|
|
116
|
+
"description": "Metcalf Bison Blue"
|
|
90
117
|
}
|
|
91
118
|
},
|
|
92
119
|
"border-radius-sm": {
|
|
@@ -206,6 +233,48 @@
|
|
|
206
233
|
"paragraphIndent": "0"
|
|
207
234
|
},
|
|
208
235
|
"type": "typography"
|
|
236
|
+
},
|
|
237
|
+
"Badge Colors": {
|
|
238
|
+
"Info Blue Background": {
|
|
239
|
+
"value": "#E6EEFE",
|
|
240
|
+
"type": "color",
|
|
241
|
+
"description": "Info Blue Background"
|
|
242
|
+
},
|
|
243
|
+
"Info Blue Label": {
|
|
244
|
+
"value": "#002266",
|
|
245
|
+
"type": "color",
|
|
246
|
+
"description": "Info Blue Label"
|
|
247
|
+
},
|
|
248
|
+
"Success Green Background": {
|
|
249
|
+
"value": "#EBFAED",
|
|
250
|
+
"type": "color",
|
|
251
|
+
"description": "Success Green Background"
|
|
252
|
+
},
|
|
253
|
+
"Sucess Green Label": {
|
|
254
|
+
"value": "#365E3D",
|
|
255
|
+
"type": "color",
|
|
256
|
+
"description": "Success Green Label"
|
|
257
|
+
},
|
|
258
|
+
"Warning Orange Background": {
|
|
259
|
+
"value": "#FCF2E9",
|
|
260
|
+
"type": "color",
|
|
261
|
+
"description": "Warning Orange Background"
|
|
262
|
+
},
|
|
263
|
+
"Warning Orange Label": {
|
|
264
|
+
"value": "#663300",
|
|
265
|
+
"type": "color",
|
|
266
|
+
"description": "Warning Orange Label"
|
|
267
|
+
},
|
|
268
|
+
"Error Red Background": {
|
|
269
|
+
"value": "#FCE9E9",
|
|
270
|
+
"type": "color",
|
|
271
|
+
"description": "Error Red Background"
|
|
272
|
+
},
|
|
273
|
+
"Error Red Label": {
|
|
274
|
+
"value": "#660000",
|
|
275
|
+
"type": "color",
|
|
276
|
+
"description": "Error Red Label"
|
|
277
|
+
}
|
|
209
278
|
}
|
|
210
279
|
},
|
|
211
280
|
"$themes": [],
|
package/dist/Theme/types.d.ts
CHANGED
|
@@ -5,8 +5,6 @@ interface GreyColorMapping {
|
|
|
5
5
|
500: string;
|
|
6
6
|
600: string;
|
|
7
7
|
700: string;
|
|
8
|
-
800: string;
|
|
9
|
-
1000: string;
|
|
10
8
|
}
|
|
11
9
|
interface BlueColorMapping {
|
|
12
10
|
300: string;
|
|
@@ -16,21 +14,13 @@ interface GreenColorMapping {
|
|
|
16
14
|
500: string;
|
|
17
15
|
}
|
|
18
16
|
interface RedColorMapping {
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
interface WhiteColorMapping {
|
|
22
|
-
100: string;
|
|
23
|
-
}
|
|
24
|
-
interface BlackColorMapping {
|
|
25
|
-
1000: string;
|
|
17
|
+
700: string;
|
|
26
18
|
}
|
|
27
19
|
export interface ThemeBaseColors {
|
|
28
|
-
|
|
20
|
+
grey: GreyColorMapping;
|
|
29
21
|
blue: BlueColorMapping;
|
|
30
22
|
green: GreenColorMapping;
|
|
31
|
-
grey: GreyColorMapping;
|
|
32
23
|
red: RedColorMapping;
|
|
33
|
-
white: WhiteColorMapping;
|
|
34
24
|
}
|
|
35
25
|
export interface Colors {
|
|
36
26
|
text: {
|
|
@@ -40,12 +30,10 @@ export interface Colors {
|
|
|
40
30
|
badge: string;
|
|
41
31
|
};
|
|
42
32
|
background: {
|
|
43
|
-
absolute: string;
|
|
44
33
|
primary: string;
|
|
45
34
|
secondary: string;
|
|
46
35
|
tertiary: string;
|
|
47
36
|
tableRow: string;
|
|
48
|
-
disabledInput: string;
|
|
49
37
|
};
|
|
50
38
|
border: {
|
|
51
39
|
primary: string;
|
|
@@ -80,14 +68,6 @@ export interface Colors {
|
|
|
80
68
|
icon: string;
|
|
81
69
|
disabled: string;
|
|
82
70
|
};
|
|
83
|
-
tab: {
|
|
84
|
-
selected: string;
|
|
85
|
-
notSelected: string;
|
|
86
|
-
};
|
|
87
|
-
tabText: {
|
|
88
|
-
selected: string;
|
|
89
|
-
notSelected: string;
|
|
90
|
-
};
|
|
91
71
|
theme: "light" | "dark";
|
|
92
72
|
}
|
|
93
73
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -7,11 +7,8 @@ export * from "./Atoms/TextField/TextField";
|
|
|
7
7
|
export * from "./Atoms/Buttons/Button";
|
|
8
8
|
export * from "./Atoms/FieldWrapper/FieldWrapper";
|
|
9
9
|
export * from "./Atoms/DropdownField/DropdownField";
|
|
10
|
-
export * from "./Atoms/NoteField/NoteField";
|
|
11
|
-
export * from "./Atoms/SelectField/SelectField";
|
|
12
|
-
export * from "./Atoms/Tab/Tab";
|
|
13
|
-
export * from "./Molecules/Form/Form";
|
|
14
10
|
export * from "./Molecules/Thumbnail/Thumbnail";
|
|
15
11
|
export * from "./Organisms/Card/Card";
|
|
12
|
+
export * from "./Atoms/NoteField/NoteField";
|
|
13
|
+
export * from "./Atoms/SelectField/SelectField";
|
|
16
14
|
export * from "./Organisms/Modal/Modal";
|
|
17
|
-
export * from "./Organisms/TabManager/TabManager";
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// Atoms
|
|
2
1
|
export * from "./Atoms/MoreHorizonButton/MoreHorizonButton";
|
|
3
2
|
export * from "./Atoms/NumberField/NumberField";
|
|
4
3
|
export * from "./Atoms/PhoneNumberField/PhoneNumberField";
|
|
@@ -9,14 +8,9 @@ export * from "./Atoms/TextField/TextField";
|
|
|
9
8
|
export * from "./Atoms/Buttons/Button";
|
|
10
9
|
export * from "./Atoms/FieldWrapper/FieldWrapper";
|
|
11
10
|
export * from "./Atoms/DropdownField/DropdownField";
|
|
12
|
-
export * from "./Atoms/NoteField/NoteField";
|
|
13
|
-
export * from "./Atoms/SelectField/SelectField";
|
|
14
|
-
export * from "./Atoms/Tab/Tab";
|
|
15
|
-
// Molecules
|
|
16
|
-
export * from "./Molecules/Form/Form";
|
|
17
11
|
export * from "./Molecules/Thumbnail/Thumbnail";
|
|
18
|
-
// Organisms
|
|
19
12
|
export * from "./Organisms/Card/Card";
|
|
13
|
+
export * from "./Atoms/NoteField/NoteField";
|
|
14
|
+
export * from "./Atoms/SelectField/SelectField";
|
|
20
15
|
export * from "./Organisms/Modal/Modal";
|
|
21
|
-
export * from "./Organisms/TabManager/TabManager";
|
|
22
16
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,qDAAqD;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yBAAyB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0-alpha.0",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "968ab00e210b58e0d2f799442c8f32754bba2fe3",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Colors } from "../../Theme/types";
|
|
3
|
-
interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
4
|
-
colors: Colors;
|
|
5
|
-
expanded: boolean;
|
|
6
|
-
handleClick: () => void;
|
|
7
|
-
icon?: JSX.Element;
|
|
8
|
-
label: string;
|
|
9
|
-
}
|
|
10
|
-
declare function ContentDropdown(props: Props): React.JSX.Element;
|
|
11
|
-
export default ContentDropdown;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import styled from "@emotion/styled";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { FiChevronDown, FiChevronUp } from "react-icons/fi";
|
|
4
|
-
const Container = styled.div `
|
|
5
|
-
display: flex;
|
|
6
|
-
width: 100%;
|
|
7
|
-
padding: 16px 0px;
|
|
8
|
-
flex-direction: column;
|
|
9
|
-
background-color: ${({ colors }) => colors.buttonBackground.outlined};
|
|
10
|
-
`;
|
|
11
|
-
const PseudoButton = styled.div `
|
|
12
|
-
display: flex;
|
|
13
|
-
padding: 8px 16px;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
align-items: center;
|
|
16
|
-
gap: 10px;
|
|
17
|
-
border-radius: 4px;
|
|
18
|
-
`;
|
|
19
|
-
const Label = styled.p `
|
|
20
|
-
color: ${({ colors }) => colors.buttonText.outlined};
|
|
21
|
-
font-size: 20.992px;
|
|
22
|
-
font-style: normal;
|
|
23
|
-
font-weight: 700;
|
|
24
|
-
line-height: 150%;
|
|
25
|
-
`;
|
|
26
|
-
function ContentDropdown(props) {
|
|
27
|
-
const { colors, expanded, handleClick, icon, label, ...remainderProps } = props;
|
|
28
|
-
return (React.createElement(Container, { colors: colors, onClick: handleClick, role: "button", ...remainderProps },
|
|
29
|
-
React.createElement(PseudoButton, { colors: colors },
|
|
30
|
-
icon && icon,
|
|
31
|
-
React.createElement(Label, { colors: colors }, label),
|
|
32
|
-
expanded ?
|
|
33
|
-
React.createElement(FiChevronUp, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }) :
|
|
34
|
-
React.createElement(FiChevronDown, { color: colors.buttonText.outlined, style: { width: "24px", height: "24px" } }))));
|
|
35
|
-
}
|
|
36
|
-
export default ContentDropdown;
|
|
37
|
-
//# sourceMappingURL=ContentDropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ContentDropdown.js","sourceRoot":"","sources":["../../../lib/Atoms/ContentDropdown/ContentDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG5D,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;qBAK5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ;CACpE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;;CAOnD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAqB;UACjC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ;;;;;CAKnD,CAAC;AAUF,SAAS,eAAe,CAAC,KAAY;IACpC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IAEhF,OAAO,CACN,oBAAC,SAAS,IACT,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,KACT,cAAc;QAElB,oBAAC,YAAY,IACZ,MAAM,EAAE,MAAM;YAEb,IAAI,IAAI,IAAI;YACb,oBAAC,KAAK,IAAC,MAAM,EAAE,MAAM,IAAG,KAAK,CAAS;YACrC,QAAQ,CAAC,CAAC;gBACV,oBAAC,WAAW,IACX,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACvC,CAAC,CAAC;gBACJ,oBAAC,aAAa,IACb,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,QAAQ,EACjC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GACvC,CAEW,CACJ,CACZ,CAAC;AACH,CAAC;AAED,eAAe,eAAe,CAAC"}
|
package/dist/Atoms/Tab/Tab.d.ts
DELETED
package/dist/Atoms/Tab/Tab.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import styled from "@emotion/styled";
|
|
2
|
-
import React from "react";
|
|
3
|
-
const TabDiv = styled.div `
|
|
4
|
-
display: flex;
|
|
5
|
-
padding: 6px 12px;
|
|
6
|
-
justify-content: center;
|
|
7
|
-
align-items: center;
|
|
8
|
-
gap: 8px;
|
|
9
|
-
border-radius: 4px 4px 0px 0px;
|
|
10
|
-
background: ${({ colors, selected }) => selected ? colors.tab.selected : colors.tab.notSelected};
|
|
11
|
-
cursor: ${({ selected }) => selected ? "auto" : "pointer"};
|
|
12
|
-
border: .5px solid ${({ colors }) => colors.tab.selected};
|
|
13
|
-
`;
|
|
14
|
-
const Label = styled.p `
|
|
15
|
-
color: ${({ colors, selected }) => selected ? colors.tabText.selected : colors.tabText.notSelected};
|
|
16
|
-
font-size: 14px;
|
|
17
|
-
line-height: 150%;
|
|
18
|
-
font-weight: 700;
|
|
19
|
-
margin: 0px;
|
|
20
|
-
`;
|
|
21
|
-
export function Tab(props) {
|
|
22
|
-
const { colors, handleClick, label, selected, ...remainingProps } = props;
|
|
23
|
-
return (React.createElement(TabDiv, { colors: colors, selected: selected, role: !selected ? "button" : undefined, "aria-label": `${label} tab`, onClick: !selected ? handleClick : undefined, key: `${label} form`, ...remainingProps },
|
|
24
|
-
React.createElement(Label, { colors: colors, selected: selected }, label)));
|
|
25
|
-
}
|
|
26
|
-
//# sourceMappingURL=Tab.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../lib/Atoms/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAyC;;;;;;;eAOnD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW;WACrF,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;sBACpC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ;CACxD,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAyC;UACrD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW;;;;;CAKlG,CAAC;AASF,MAAM,UAAU,GAAG,CAAC,KAAY;IAC/B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IAC1E,OAAO,CACN,oBAAC,MAAM,IACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAC1B,GAAG,KAAK,MAAM,EAC1B,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC5C,GAAG,EAAE,GAAG,KAAK,OAAO,KAChB,cAAc;QAElB,oBAAC,KAAK,IACL,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,IAEjB,KAAK,CACC,CACA,CACT,CAAC;AACH,CAAC"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Colors } from "../../Theme/types";
|
|
3
|
-
export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
|
|
4
|
-
theme?: import("@emotion/react").Theme;
|
|
5
|
-
as?: React.ElementType;
|
|
6
|
-
} & {
|
|
7
|
-
colors: Colors;
|
|
8
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
-
interface Props {
|
|
10
|
-
colors: Colors;
|
|
11
|
-
children: JSX.Element[];
|
|
12
|
-
}
|
|
13
|
-
export declare function Form(props: Props): React.JSX.Element;
|
|
14
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import styled from "@emotion/styled";
|
|
2
|
-
import React from "react";
|
|
3
|
-
export const ContentContainer = styled.div `
|
|
4
|
-
display: flex;
|
|
5
|
-
padding: 24px;
|
|
6
|
-
flex-direction: column;
|
|
7
|
-
align-items: center;
|
|
8
|
-
gap: 8px;
|
|
9
|
-
align-self: stretch;
|
|
10
|
-
background-color: ${({ colors }) => colors.background.primary};
|
|
11
|
-
`;
|
|
12
|
-
export function Form(props) {
|
|
13
|
-
const { children, colors } = props;
|
|
14
|
-
return (React.createElement(ContentContainer, { colors: colors }, children));
|
|
15
|
-
}
|
|
16
|
-
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../lib/Molecules/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;;;qBAO1C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO;CAC7D,CAAC;AAOF,MAAM,UAAU,IAAI,CAAC,KAAY;IAChC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,CACN,oBAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,IAC9B,QAAQ,CACS,CACnB,CAAC;AACH,CAAC"}
|