@spaced-out/ui-design-system 0.0.6 → 0.0.8
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/.storybook/manager-head.html +4 -0
- package/.storybook/preview.js +0 -25
- package/CHANGELOG.md +93 -91
- package/design-tokens/size/base-size.json +3 -0
- package/lib/components/Avatar/Avatar.js +7 -5
- package/lib/components/Avatar/Avatar.js.flow +17 -5
- package/lib/components/Icon/Icon.js +6 -1
- package/lib/components/Icon/Icon.js.flow +6 -1
- package/lib/components/Menu/Menu.js +4 -0
- package/lib/components/Menu/Menu.js.flow +47 -28
- package/lib/components/Tab/Tab.js +90 -0
- package/lib/components/Tab/Tab.js.flow +130 -0
- package/lib/components/Tab/Tab.module.css +66 -0
- package/lib/components/Tab/index.js +18 -0
- package/lib/components/Tab/index.js.flow +4 -0
- package/lib/components/TabList/TabDropdown.js +80 -0
- package/lib/components/TabList/TabDropdown.js.flow +110 -0
- package/lib/components/TabList/TabDropdown.module.css +20 -0
- package/lib/components/TabList/TabList.js +127 -0
- package/lib/components/TabList/TabList.js.flow +146 -0
- package/lib/components/TabList/TabList.module.css +11 -0
- package/lib/components/TabList/index.js +16 -0
- package/lib/components/TabList/index.js.flow +4 -0
- package/lib/styles/variables/_size.css +2 -0
- package/lib/styles/variables/_size.js +3 -1
- package/lib/styles/variables/_size.js.flow +2 -0
- package/package.json +1 -1
package/.storybook/preview.js
CHANGED
|
@@ -68,32 +68,7 @@ export const parameters = {
|
|
|
68
68
|
'Design Tokens',
|
|
69
69
|
'Tokens',
|
|
70
70
|
'Components',
|
|
71
|
-
[
|
|
72
|
-
'Button',
|
|
73
|
-
'Icon',
|
|
74
|
-
'Search Input',
|
|
75
|
-
'Menu',
|
|
76
|
-
'Button Dropdown',
|
|
77
|
-
'Modal',
|
|
78
|
-
'Dialog',
|
|
79
|
-
'Panel',
|
|
80
|
-
'Tooltip',
|
|
81
|
-
'Linear Loader',
|
|
82
|
-
'Circular Loader',
|
|
83
|
-
],
|
|
84
71
|
'Form Components',
|
|
85
|
-
[
|
|
86
|
-
'Input',
|
|
87
|
-
'Textarea',
|
|
88
|
-
'Checkbox',
|
|
89
|
-
'Checkbox Group',
|
|
90
|
-
'Radio Button',
|
|
91
|
-
'Radio Group',
|
|
92
|
-
'Toggle',
|
|
93
|
-
'Dropdown',
|
|
94
|
-
'Typeahead',
|
|
95
|
-
],
|
|
96
|
-
|
|
97
72
|
'*',
|
|
98
73
|
],
|
|
99
74
|
locales: 'en-US',
|
package/CHANGELOG.md
CHANGED
|
@@ -2,101 +2,106 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
-
### [0.0.
|
|
5
|
+
### [0.0.8](https://github.com/spaced-out/ui-design-system/compare/v0.0.7...v0.0.8) (2022-12-12)
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
### Features
|
|
9
9
|
|
|
10
|
-
*
|
|
10
|
+
* **tabs:** [GDS-121] tab and tablist ([#41](https://github.com/spaced-out/ui-design-system/issues/41)) ([af1d639](https://github.com/spaced-out/ui-design-system/commit/af1d6392d3a8a553906879d85e7d08cb356ba2dd))
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
### Bug Fixes
|
|
14
14
|
|
|
15
|
-
*
|
|
15
|
+
* avatar text and icon fix ([49a4c78](https://github.com/spaced-out/ui-design-system/commit/49a4c7802f5e14ea662494e3791792663f571513))
|
|
16
|
+
* updated changelog ([5400aa5](https://github.com/spaced-out/ui-design-system/commit/5400aa53cfb8d1a4838d1e4f7e74492fbfbe8add))
|
|
16
17
|
|
|
17
|
-
### 0.0.
|
|
18
|
+
### [0.0.7](https://github.com/spaced-out/ui-design-system/compare/v0.0.6...v0.0.7) (2022-11-30)
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
- **docs:** documentation upodate ([#40](https://github.com/spaced-out/ui-design-system/issues/40)) ([1207236](https://github.com/spaced-out/ui-design-system/commit/120723696a4669db12d700c46e59fc73d867c962))
|
|
23
|
+
|
|
24
|
+
### [0.0.6](https://github.com/spaced-out/ui-design-system/compare/v0.0.6-beta.2...v0.0.6) (2022-11-29)
|
|
18
25
|
|
|
26
|
+
### Features
|
|
27
|
+
|
|
28
|
+
- fetch complete history of repo in publish action ([09ea18b](https://github.com/spaced-out/ui-design-system/commit/09ea18b9df507e1e51a6161e2300c5e09c62bdb4))
|
|
29
|
+
|
|
30
|
+
### Bug Fixes
|
|
31
|
+
|
|
32
|
+
- added comment to fetch complete history of repo in publish action ([94e5ae1](https://github.com/spaced-out/ui-design-system/commit/94e5ae146742e6e70c88a8cf428a974e7e8faaf3))
|
|
33
|
+
|
|
34
|
+
### 0.0.6-beta.2 (2022-11-29)
|
|
19
35
|
|
|
20
36
|
### Features
|
|
21
37
|
|
|
22
|
-
|
|
38
|
+
- git fix ([16e034a](https://github.com/spaced-out/ui-design-system/commit/16e034a9ea9fb7b4a0e0d3938e17d4a3cdaa86ff))
|
|
23
39
|
|
|
24
40
|
### 0.0.6-beta.1 (2022-11-29)
|
|
25
41
|
|
|
26
42
|
### 0.0.6-beta.0 (2022-11-29)
|
|
27
43
|
|
|
28
|
-
|
|
29
44
|
### Features
|
|
30
45
|
|
|
31
|
-
|
|
46
|
+
- script change to fetch all commits ([53a08cd](https://github.com/spaced-out/ui-design-system/commit/53a08cdbab66c32784bf672934ac6faa712d3996))
|
|
32
47
|
|
|
33
48
|
### 0.0.5 (2022-11-29)
|
|
34
49
|
|
|
35
|
-
|
|
36
50
|
### Features
|
|
37
51
|
|
|
38
|
-
|
|
52
|
+
- **avatar:** [GDS-116] avatar and avatar group ([#36](https://github.com/spaced-out/ui-design-system/issues/36)) ([d326415](https://github.com/spaced-out/ui-design-system/commit/d326415371d96ff6a3dcaf9cd068b1a3468d87ed))
|
|
39
53
|
|
|
40
54
|
### 0.0.4 (2022-11-24)
|
|
41
55
|
|
|
42
|
-
|
|
43
56
|
### Features
|
|
44
57
|
|
|
45
|
-
|
|
58
|
+
- pr template ([#35](https://github.com/Spaced-Out/ui-design-system/issues/35)) ([c18e112](https://github.com/Spaced-Out/ui-design-system/commit/c18e1123730acaad77e1334a949573ac0cfd3708))
|
|
46
59
|
|
|
47
60
|
### 0.0.3 (2022-11-22)
|
|
48
61
|
|
|
49
|
-
|
|
50
62
|
### Bug Fixes
|
|
51
63
|
|
|
52
|
-
|
|
64
|
+
- added new storybook pages ([2844a5e](https://github.com/Spaced-Out/ui-design-system/commit/2844a5e90cfa479268374bc8bfd4f46bc8458149))
|
|
53
65
|
|
|
54
66
|
### 0.0.3-beta.1 (2022-11-21)
|
|
55
67
|
|
|
56
|
-
|
|
57
68
|
### Bug Fixes
|
|
58
69
|
|
|
59
|
-
|
|
70
|
+
- rename showBackdrop in modal to hideBackdrop and releated changes ([303c4d8](https://github.com/Spaced-Out/ui-design-system/commit/303c4d8c95aa75219cf5eca682ebdecf53c27e7c))
|
|
60
71
|
|
|
61
72
|
### 0.0.3-beta.0 (2022-11-21)
|
|
62
73
|
|
|
63
|
-
|
|
64
74
|
### Bug Fixes
|
|
65
75
|
|
|
66
|
-
|
|
76
|
+
- documentation fixes and modal semantics ([45770ab](https://github.com/Spaced-Out/ui-design-system/commit/45770ab7e7a04ffa78c962fdef7bfc8971b54b3e))
|
|
67
77
|
|
|
68
78
|
### 0.0.2 (2022-11-16)
|
|
69
79
|
|
|
70
|
-
|
|
71
80
|
### Features
|
|
72
81
|
|
|
73
|
-
|
|
82
|
+
- documentation changes, storybook sidepanel redesign ([eb93ac3](https://github.com/Spaced-Out/ui-design-system/commit/eb93ac3ff1ffce7ab163f382633997a5c9999f6d))
|
|
74
83
|
|
|
75
84
|
### 0.0.2-beta.2 (2022-11-16)
|
|
76
85
|
|
|
77
|
-
|
|
78
86
|
### Bug Fixes
|
|
79
87
|
|
|
80
|
-
|
|
88
|
+
- textarea scrollbar fix ([53fc94c](https://github.com/Spaced-Out/ui-design-system/commit/53fc94cc58cfe6767f90b255584ad24e28044194))
|
|
81
89
|
|
|
82
90
|
### 0.0.2-beta.1 (2022-11-16)
|
|
83
91
|
|
|
84
|
-
|
|
85
92
|
### Bug Fixes
|
|
86
93
|
|
|
87
|
-
|
|
94
|
+
- added todo block ([f0c3e44](https://github.com/Spaced-Out/ui-design-system/commit/f0c3e440ca349539d5a7bdce9d28a1c1b0be7cdb))
|
|
88
95
|
|
|
89
96
|
### [0.0.2-beta.0](https://github.com/Spaced-Out/ui-design-system/compare/v0.0.1-beta.3...v0.0.2-beta.0) (2022-11-16)
|
|
90
97
|
|
|
91
|
-
|
|
92
98
|
### Features
|
|
93
99
|
|
|
94
|
-
|
|
95
|
-
|
|
100
|
+
- automated npm relases through github actions ([dd14a5d](https://github.com/Spaced-Out/ui-design-system/commit/dd14a5d43a56a2b4a91993dff49706182ff2d373))
|
|
96
101
|
|
|
97
102
|
### Bug Fixes
|
|
98
103
|
|
|
99
|
-
|
|
104
|
+
- fixed build script ([26e7765](https://github.com/Spaced-Out/ui-design-system/commit/26e77655f9409006a4195ddae695d0ba3746e8c1))
|
|
100
105
|
|
|
101
106
|
### 0.0.1 (2022-11-16)
|
|
102
107
|
|
|
@@ -110,77 +115,74 @@ All notable changes to this project will be documented in this file. See [standa
|
|
|
110
115
|
|
|
111
116
|
### [0.0.1-alpha.1](https://github.com/Spaced-Out/ui-design-system/compare/v0.0.1-alpha.0...v0.0.1-alpha.1) (2022-11-16)
|
|
112
117
|
|
|
113
|
-
|
|
114
118
|
### Bug Fixes
|
|
115
119
|
|
|
116
|
-
|
|
120
|
+
- revert babel change ([7ef81e9](https://github.com/Spaced-Out/ui-design-system/commit/7ef81e92a65a296f7eedebed0f3234038d63118c))
|
|
117
121
|
|
|
118
122
|
### [0.0.1-alpha.0](https://github.com/Spaced-Out/ui-design-system/compare/v0.0.0...v0.0.1-alpha.0) (2022-11-16)
|
|
119
123
|
|
|
120
|
-
|
|
121
124
|
### Features
|
|
122
125
|
|
|
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
|
-
|
|
126
|
+
- action and enter press ([359e652](https://github.com/Spaced-Out/ui-design-system/commit/359e65243e68885c43bb8fe9cf58ba34c8ab2998))
|
|
127
|
+
- added Commitlint ([017a1ad](https://github.com/Spaced-Out/ui-design-system/commit/017a1adfd4a78ff1d41f55b697f73d68395f8954))
|
|
128
|
+
- added font-awesome css ([8adad02](https://github.com/Spaced-Out/ui-design-system/commit/8adad023b27394196c9db1b43963eb9e6a26ce16))
|
|
129
|
+
- Added standard version ([29ee01c](https://github.com/Spaced-Out/ui-design-system/commit/29ee01c795d84ba86f50b63d1927f00d91585735))
|
|
130
|
+
- added tokens and used css vars ([12f5767](https://github.com/Spaced-Out/ui-design-system/commit/12f5767a4d1088dab09981da04e174a900ceacc1))
|
|
131
|
+
- **checkbox:** [GDS-34] Checkbox and checkbox group ([#12](https://github.com/Spaced-Out/ui-design-system/issues/12)) ([5c4604a](https://github.com/Spaced-Out/ui-design-system/commit/5c4604a5585ee31ce5200fef8cac0ea4548c4848))
|
|
132
|
+
- **docs:** [GDS-113] docs for form components and grid ([#32](https://github.com/Spaced-Out/ui-design-system/issues/32)) ([2337fd1](https://github.com/Spaced-Out/ui-design-system/commit/2337fd13a08f1a6754a25c382eab89bfe55768b7))
|
|
133
|
+
- **docs:** tokens doc ([#33](https://github.com/Spaced-Out/ui-design-system/issues/33)) ([7df345c](https://github.com/Spaced-Out/ui-design-system/commit/7df345c64690940730d36d15c92a880c61508a30))
|
|
134
|
+
- dropdown component ([#19](https://github.com/Spaced-Out/ui-design-system/issues/19)) ([8c8cf59](https://github.com/Spaced-Out/ui-design-system/commit/8c8cf59363034a568d45e7b98eaf8962462f82e0))
|
|
135
|
+
- error case for radio and group ([88afa2b](https://github.com/Spaced-Out/ui-design-system/commit/88afa2b4750a62521ef6319ee3bf8d5711354663))
|
|
136
|
+
- **grid:** [GDS-26] grid row and col + Import order lint rule ([#26](https://github.com/Spaced-Out/ui-design-system/issues/26)) ([02b988e](https://github.com/Spaced-Out/ui-design-system/commit/02b988e0f85de6a42022729c65cda09ade02cedb))
|
|
137
|
+
- icon Menu ([#9](https://github.com/Spaced-Out/ui-design-system/issues/9)) ([6819536](https://github.com/Spaced-Out/ui-design-system/commit/68195362130e7cb587a7316611575baed2244dd2))
|
|
138
|
+
- **icon:** added default values ([#5](https://github.com/Spaced-Out/ui-design-system/issues/5)) ([b4a4401](https://github.com/Spaced-Out/ui-design-system/commit/b4a440122b7f975cde3ed24ca984204832dac71a))
|
|
139
|
+
- **icon:** iconName prop changed to name ([#10](https://github.com/Spaced-Out/ui-design-system/issues/10)) ([42dc229](https://github.com/Spaced-Out/ui-design-system/commit/42dc22940b7a585a1245a9d75fde54c51a3cd329))
|
|
140
|
+
- **InContextAlert:** [GDS-58] In-Context Alert and Truncate component ([#27](https://github.com/Spaced-Out/ui-design-system/issues/27)) ([bd9827c](https://github.com/Spaced-Out/ui-design-system/commit/bd9827c093dc39ae76f2dd5d59a11feda5ea9d20))
|
|
141
|
+
- input component ([#15](https://github.com/Spaced-Out/ui-design-system/issues/15)) ([c78842e](https://github.com/Spaced-Out/ui-design-system/commit/c78842e5ce73613fac4eb3cc9f290537c5573e90))
|
|
142
|
+
- **loader:** [GDS-78] linear loader and circular loader ([#21](https://github.com/Spaced-Out/ui-design-system/issues/21)) ([44fe9dc](https://github.com/Spaced-Out/ui-design-system/commit/44fe9dc76920b7c6eadf70ee320fa2a08121e8c1))
|
|
143
|
+
- master merged ([6927f37](https://github.com/Spaced-Out/ui-design-system/commit/6927f372106250474fe3b660783dfd633767fc8d))
|
|
144
|
+
- notification and semantic color changes ([#30](https://github.com/Spaced-Out/ui-design-system/issues/30)) ([1dd6814](https://github.com/Spaced-Out/ui-design-system/commit/1dd68143deccbc401caad44e989de8981bef6686))
|
|
145
|
+
- radio group ([adae899](https://github.com/Spaced-Out/ui-design-system/commit/adae899d567463bacd7ad1857b0e25b596acec16))
|
|
146
|
+
- **RadioButton:** radio button component and story done ([cb0f64e](https://github.com/Spaced-Out/ui-design-system/commit/cb0f64e95c35ec22d8f7e438a788aa228d31c253))
|
|
147
|
+
- search component ([#20](https://github.com/Spaced-Out/ui-design-system/issues/20)) ([39c6560](https://github.com/Spaced-Out/ui-design-system/commit/39c65606508682a5aa448915295d7b7b99ace8c4))
|
|
148
|
+
- storybook test ([#14](https://github.com/Spaced-Out/ui-design-system/issues/14)) ([08feede](https://github.com/Spaced-Out/ui-design-system/commit/08feede4f43b9cac046e49a5fff6f6929aab03c9))
|
|
149
|
+
- **storybook:** [GDS-54] build and publish storybook to Github Pages ([#13](https://github.com/Spaced-Out/ui-design-system/issues/13)) ([93a4072](https://github.com/Spaced-Out/ui-design-system/commit/93a4072255f08ffd164b6076dd7f9edccf1a73ea))
|
|
150
|
+
- textarea component ([#16](https://github.com/Spaced-Out/ui-design-system/issues/16)) ([d4f2d43](https://github.com/Spaced-Out/ui-design-system/commit/d4f2d434f54983adaad3686da869357f9a45c69a))
|
|
151
|
+
- **toast:** [GDS-37] Toast and toast portal ([#29](https://github.com/Spaced-Out/ui-design-system/issues/29)) ([91e938b](https://github.com/Spaced-Out/ui-design-system/commit/91e938b9aa68845f5e806852dafd3d23260ddb8d))
|
|
152
|
+
- **toggle:** [GDS-35] toggle component ([#18](https://github.com/Spaced-Out/ui-design-system/issues/18)) ([8434d96](https://github.com/Spaced-Out/ui-design-system/commit/8434d96142f8f1cad1d04d2b8b82784c5c5c4522))
|
|
153
|
+
- tooltip and token stories ([#25](https://github.com/Spaced-Out/ui-design-system/issues/25)) ([8152db7](https://github.com/Spaced-Out/ui-design-system/commit/8152db76f6f284b0e8ad6acf70fea4f68993af07))
|
|
154
|
+
- truncate type export ([#28](https://github.com/Spaced-Out/ui-design-system/issues/28)) ([9b6ff39](https://github.com/Spaced-Out/ui-design-system/commit/9b6ff39b7c648f083c2e0c4a9c50cc76928a4ebe))
|
|
155
|
+
- typeahead component ([#23](https://github.com/Spaced-Out/ui-design-system/issues/23)) ([d7693bb](https://github.com/Spaced-Out/ui-design-system/commit/d7693bb832cb24e6eb01dbc109d4d2afb1b3d2e9))
|
|
154
156
|
|
|
155
157
|
### Bug Fixes
|
|
156
158
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
159
|
+
- added changelog in cspell ignore paths ([723f0d4](https://github.com/Spaced-Out/ui-design-system/commit/723f0d4c874c6558f96a5d78e464d3099e90c30d))
|
|
160
|
+
- added chromatic ([1685380](https://github.com/Spaced-Out/ui-design-system/commit/16853800d7e7ce8610f94b937a4e61bc26537018))
|
|
161
|
+
- added dislog ([e2967c1](https://github.com/Spaced-Out/ui-design-system/commit/e2967c1cf58778e1d6b492f5db9c4be9aaa0d0fc))
|
|
162
|
+
- added Elevation stories ([f0d5a0d](https://github.com/Spaced-Out/ui-design-system/commit/f0d5a0d2723ab60abaeb9a7dc33b7fe4d1f9695e))
|
|
163
|
+
- Added introduction page ([36eb7fd](https://github.com/Spaced-Out/ui-design-system/commit/36eb7fd4006c1a4ed7e0a440b9b1ef6216e09a7c))
|
|
164
|
+
- added more stories ([234b4c9](https://github.com/Spaced-Out/ui-design-system/commit/234b4c95df349db07864a20c10e632c4388cba48))
|
|
165
|
+
- added more text colors ([3ff7117](https://github.com/Spaced-Out/ui-design-system/commit/3ff7117bc0d9f1948765b1af1022a355a3cdbf7f))
|
|
166
|
+
- added spell check ([1fa6f08](https://github.com/Spaced-Out/ui-design-system/commit/1fa6f0890f17ff288d66abcf63e7480ac5fd1730))
|
|
167
|
+
- added spellcheck for storybook ([0c29edd](https://github.com/Spaced-Out/ui-design-system/commit/0c29edd6ca0f54e23bcafb79556b1af0bb486896))
|
|
168
|
+
- added standard version ([5146c63](https://github.com/Spaced-Out/ui-design-system/commit/5146c632fcc7cb499697b0968d4b8a0e51594fec))
|
|
169
|
+
- added test suite ([7676ca7](https://github.com/Spaced-Out/ui-design-system/commit/7676ca7c81efc942b8cbab4bead1fcf0bbdd715c))
|
|
170
|
+
- added text counter for input ([#17](https://github.com/Spaced-Out/ui-design-system/issues/17)) ([09544d2](https://github.com/Spaced-Out/ui-design-system/commit/09544d212547c6574a39b762345fc2eb0eaddf11))
|
|
171
|
+
- added yarn lock ([4052517](https://github.com/Spaced-Out/ui-design-system/commit/405251755d70d140c28fffbd138b2744f7ccb0cd))
|
|
172
|
+
- backdrop fix ([e680a6a](https://github.com/Spaced-Out/ui-design-system/commit/e680a6ae18e598196fd3e5518294ea1e2fba2ccc))
|
|
173
|
+
- color fix for panel ([5b9a9be](https://github.com/Spaced-Out/ui-design-system/commit/5b9a9be55d416129262f3f71a8fb805cbcfb288d))
|
|
174
|
+
- Deleted publish script ([a11cb77](https://github.com/Spaced-Out/ui-design-system/commit/a11cb77cf9b93e248187ca9e6b2eccd73de1aecd))
|
|
175
|
+
- design comments ([9718754](https://github.com/Spaced-Out/ui-design-system/commit/9718754b9a9293d5523f70bdc700e50503589866))
|
|
176
|
+
- design qa fixes ([052058b](https://github.com/Spaced-Out/ui-design-system/commit/052058baf72206f2c04e551f8d1e538c74bb571e))
|
|
177
|
+
- docs fix ([b001ed9](https://github.com/Spaced-Out/ui-design-system/commit/b001ed9613a2e5cd93dde72e81f4112114e30eff))
|
|
178
|
+
- Fixed indentation for Design Tokens ([417934b](https://github.com/Spaced-Out/ui-design-system/commit/417934b5105a4377449870d95152392068fa49d8))
|
|
179
|
+
- **icon:** icon center align ([#6](https://github.com/Spaced-Out/ui-design-system/issues/6)) ([f22ce7d](https://github.com/Spaced-Out/ui-design-system/commit/f22ce7d9eda9dfeaad7b15afd19c19f5e52a4d7e))
|
|
180
|
+
- linear loader fluid width ([#24](https://github.com/Spaced-Out/ui-design-system/issues/24)) ([e943d5f](https://github.com/Spaced-Out/ui-design-system/commit/e943d5fcd56a3bf9a4edaf29ed624c8bce931fb1))
|
|
181
|
+
- modal arch init ([71d8ce1](https://github.com/Spaced-Out/ui-design-system/commit/71d8ce1c42697cf3a3ba039d826db6fb672b5074))
|
|
182
|
+
- panel footer fixes ([11be4d9](https://github.com/Spaced-Out/ui-design-system/commit/11be4d99f11fec1acb67fffebcb59ea128593530))
|
|
183
|
+
- panel init ([5438d93](https://github.com/Spaced-Out/ui-design-system/commit/5438d9340f5796d5cc64902321ef9ee020738400))
|
|
184
|
+
- renamed folder ([931f139](https://github.com/Spaced-Out/ui-design-system/commit/931f13928337cda26db94d21bb5c15c0e57669a6))
|
|
185
|
+
- Selected option fix ([fac75f7](https://github.com/Spaced-Out/ui-design-system/commit/fac75f75588919903d85cfbe4f8df63f8826cb95))
|
|
186
|
+
- spell checks everywhere ([f81b8d4](https://github.com/Spaced-Out/ui-design-system/commit/f81b8d4cdbe7eccdb8b9a626edf057f66cdfe3b4))
|
|
187
|
+
- storybook upgrade ([78f0d84](https://github.com/Spaced-Out/ui-design-system/commit/78f0d84fd3ed73c0424f86c10c6b9100fbe7e18b))
|
|
188
|
+
- tooltip fixes ([b8b0bd0](https://github.com/Spaced-Out/ui-design-system/commit/b8b0bd0514af32c4f31dab1dbea99e70d221d5b5))
|
|
@@ -64,7 +64,7 @@ const AvatarConditionalContent = _ref2 => {
|
|
|
64
64
|
imageSrc,
|
|
65
65
|
text,
|
|
66
66
|
iconName,
|
|
67
|
-
size
|
|
67
|
+
size,
|
|
68
68
|
iconType,
|
|
69
69
|
color = 'blue'
|
|
70
70
|
} = _ref2;
|
|
@@ -89,7 +89,7 @@ const AvatarConditionalContent = _ref2 => {
|
|
|
89
89
|
const Avatar = _ref3 => {
|
|
90
90
|
let {
|
|
91
91
|
classNames,
|
|
92
|
-
size =
|
|
92
|
+
size = AVATAR_SIZE.medium,
|
|
93
93
|
imageSrc,
|
|
94
94
|
text,
|
|
95
95
|
style,
|
|
@@ -114,20 +114,22 @@ const Avatar = _ref3 => {
|
|
|
114
114
|
text: text,
|
|
115
115
|
iconName: iconName,
|
|
116
116
|
iconType: iconType,
|
|
117
|
-
color: color
|
|
117
|
+
color: color,
|
|
118
|
+
size: size
|
|
118
119
|
}))) : /*#__PURE__*/React.createElement(AvatarConditionalContent, {
|
|
119
120
|
imageSrc: imageSrc,
|
|
120
121
|
text: text,
|
|
121
122
|
iconName: iconName,
|
|
122
123
|
iconType: iconType,
|
|
123
|
-
color: color
|
|
124
|
+
color: color,
|
|
125
|
+
size: size
|
|
124
126
|
}));
|
|
125
127
|
};
|
|
126
128
|
exports.Avatar = Avatar;
|
|
127
129
|
const BaseAvatar = _ref4 => {
|
|
128
130
|
let {
|
|
129
131
|
classNames,
|
|
130
|
-
size =
|
|
132
|
+
size = AVATAR_SIZE.medium,
|
|
131
133
|
text = '',
|
|
132
134
|
style,
|
|
133
135
|
color = 'blue'
|
|
@@ -31,7 +31,7 @@ export const AVATAR_SIZE = Object.freeze({
|
|
|
31
31
|
});
|
|
32
32
|
export const avatarSizeOptions: Array<mixed> = [...Object.keys(AVATAR_SIZE)];
|
|
33
33
|
|
|
34
|
-
export type AvatarSize = $
|
|
34
|
+
export type AvatarSize = $Values<typeof AVATAR_SIZE>;
|
|
35
35
|
export const AVATAR_COLOR = Object.freeze({
|
|
36
36
|
red: colorDangerLightest,
|
|
37
37
|
orange: colorWarningLightest,
|
|
@@ -88,14 +88,24 @@ const iconSize = Object.freeze({
|
|
|
88
88
|
large: 'medium',
|
|
89
89
|
});
|
|
90
90
|
|
|
91
|
+
export type AvatarContentProps = {
|
|
92
|
+
imageSrc?: string,
|
|
93
|
+
text?: string,
|
|
94
|
+
iconName?: string,
|
|
95
|
+
iconType?: IconType,
|
|
96
|
+
size: AvatarSize,
|
|
97
|
+
color?: AvatarColorType,
|
|
98
|
+
ring?: boolean,
|
|
99
|
+
};
|
|
100
|
+
|
|
91
101
|
const AvatarConditionalContent = ({
|
|
92
102
|
imageSrc,
|
|
93
103
|
text,
|
|
94
104
|
iconName,
|
|
95
|
-
size
|
|
105
|
+
size,
|
|
96
106
|
iconType,
|
|
97
107
|
color = 'blue',
|
|
98
|
-
}) => (
|
|
108
|
+
}: AvatarContentProps) => (
|
|
99
109
|
<div className={css.innerContainer} style={{background: AVATAR_COLOR[color]}}>
|
|
100
110
|
{imageSrc ? (
|
|
101
111
|
<img src={imageSrc} alt="Avatar" className={css.avatar}></img>
|
|
@@ -109,7 +119,7 @@ const AvatarConditionalContent = ({
|
|
|
109
119
|
|
|
110
120
|
export const Avatar = ({
|
|
111
121
|
classNames,
|
|
112
|
-
size =
|
|
122
|
+
size = AVATAR_SIZE.medium,
|
|
113
123
|
imageSrc,
|
|
114
124
|
text,
|
|
115
125
|
style,
|
|
@@ -139,6 +149,7 @@ export const Avatar = ({
|
|
|
139
149
|
iconName={iconName}
|
|
140
150
|
iconType={iconType}
|
|
141
151
|
color={color}
|
|
152
|
+
size={size}
|
|
142
153
|
/>
|
|
143
154
|
</div>
|
|
144
155
|
</div>
|
|
@@ -149,6 +160,7 @@ export const Avatar = ({
|
|
|
149
160
|
iconName={iconName}
|
|
150
161
|
iconType={iconType}
|
|
151
162
|
color={color}
|
|
163
|
+
size={size}
|
|
152
164
|
/>
|
|
153
165
|
)}
|
|
154
166
|
</div>
|
|
@@ -156,7 +168,7 @@ export const Avatar = ({
|
|
|
156
168
|
|
|
157
169
|
export const BaseAvatar = ({
|
|
158
170
|
classNames,
|
|
159
|
-
size =
|
|
171
|
+
size = AVATAR_SIZE.medium,
|
|
160
172
|
text = '',
|
|
161
173
|
style,
|
|
162
174
|
color = 'blue',
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.Icon = void 0;
|
|
6
|
+
exports.Icon = exports.ICON_SIZE = void 0;
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
8
|
require("./FontAwesomeLibrary");
|
|
9
9
|
var _typography = require("../../types/typography");
|
|
@@ -15,6 +15,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
15
15
|
|
|
16
16
|
// get our fontawesome imports
|
|
17
17
|
|
|
18
|
+
const ICON_SIZE = Object.freeze({
|
|
19
|
+
small: 'small',
|
|
20
|
+
medium: 'medium'
|
|
21
|
+
});
|
|
22
|
+
exports.ICON_SIZE = ICON_SIZE;
|
|
18
23
|
const Icon = _ref => {
|
|
19
24
|
let {
|
|
20
25
|
type = 'regular',
|
|
@@ -14,7 +14,12 @@ import typographyStyle from '../../styles/typography.module.css';
|
|
|
14
14
|
|
|
15
15
|
export type IconType = 'regular' | 'solid';
|
|
16
16
|
|
|
17
|
-
export
|
|
17
|
+
export const ICON_SIZE = Object.freeze({
|
|
18
|
+
small: 'small',
|
|
19
|
+
medium: 'medium',
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
export type IconSize = $Keys<typeof ICON_SIZE>;
|
|
18
23
|
|
|
19
24
|
export type IconProps = {
|
|
20
25
|
type?: IconType,
|
|
@@ -38,7 +38,9 @@ const Menu = props => {
|
|
|
38
38
|
key,
|
|
39
39
|
label,
|
|
40
40
|
iconLeft,
|
|
41
|
+
iconLeftType,
|
|
41
42
|
iconRight,
|
|
43
|
+
iconRightType,
|
|
42
44
|
disabled
|
|
43
45
|
} = _ref;
|
|
44
46
|
return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
|
|
@@ -59,12 +61,14 @@ const Menu = props => {
|
|
|
59
61
|
autoFocus: selectedOption?.key === key
|
|
60
62
|
}, !!iconLeft && /*#__PURE__*/React.createElement(_Icon.Icon, {
|
|
61
63
|
name: iconLeft,
|
|
64
|
+
type: iconLeftType,
|
|
62
65
|
size: "small",
|
|
63
66
|
className: _MenuModule.default.icon
|
|
64
67
|
}), /*#__PURE__*/React.createElement("span", {
|
|
65
68
|
className: _MenuModule.default.optionText
|
|
66
69
|
}, label), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
|
|
67
70
|
name: iconRight,
|
|
71
|
+
type: iconRightType,
|
|
68
72
|
size: "small",
|
|
69
73
|
className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
|
|
70
74
|
}));
|
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import {classify} from '../../utils/classify';
|
|
5
5
|
import {UnstyledButton} from '../Button';
|
|
6
6
|
import {Icon} from '../Icon';
|
|
7
|
+
import type {IconType} from '../Icon/Icon.js';
|
|
7
8
|
|
|
8
9
|
import css from './Menu.module.css';
|
|
9
10
|
|
|
@@ -14,7 +15,9 @@ export type MenuOption = {
|
|
|
14
15
|
key?: string,
|
|
15
16
|
label: string,
|
|
16
17
|
iconLeft?: string,
|
|
18
|
+
iconLeftType?: IconType,
|
|
17
19
|
iconRight?: string,
|
|
20
|
+
iconRightType?: IconType,
|
|
18
21
|
disabled?: boolean,
|
|
19
22
|
};
|
|
20
23
|
|
|
@@ -50,36 +53,52 @@ export const Menu = (props: MenuProps): React.Node => {
|
|
|
50
53
|
})}
|
|
51
54
|
style={{width}}
|
|
52
55
|
>
|
|
53
|
-
{options.map(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
56
|
+
{options.map(
|
|
57
|
+
({
|
|
58
|
+
key,
|
|
59
|
+
label,
|
|
60
|
+
iconLeft,
|
|
61
|
+
iconLeftType,
|
|
62
|
+
iconRight,
|
|
63
|
+
iconRightType,
|
|
64
|
+
disabled,
|
|
65
|
+
}) => (
|
|
66
|
+
<UnstyledButton
|
|
67
|
+
className={classify(css.option, {
|
|
68
|
+
[css.selected]: key === selectedOption?.key,
|
|
69
|
+
[css.optionSmall]: size === 'small',
|
|
70
|
+
[css.optionMedium]: size === 'medium',
|
|
71
|
+
[css.disabled]: menuDisabled || disabled,
|
|
72
|
+
[css.withIconLeft]: !!iconLeft,
|
|
73
|
+
[css.withIconRight]: !!iconRight,
|
|
74
|
+
})}
|
|
75
|
+
key={key}
|
|
76
|
+
disabled={menuDisabled || disabled}
|
|
77
|
+
onClick={() => onSelect && onSelect({key, label})}
|
|
78
|
+
autoFocus={selectedOption?.key === key}
|
|
79
|
+
>
|
|
80
|
+
{!!iconLeft && (
|
|
81
|
+
<Icon
|
|
82
|
+
name={iconLeft}
|
|
83
|
+
type={iconLeftType}
|
|
84
|
+
size="small"
|
|
85
|
+
className={css.icon}
|
|
86
|
+
/>
|
|
87
|
+
)}
|
|
71
88
|
|
|
72
|
-
|
|
89
|
+
<span className={css.optionText}>{label}</span>
|
|
73
90
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
91
|
+
{!!iconRight && (
|
|
92
|
+
<Icon
|
|
93
|
+
name={iconRight}
|
|
94
|
+
type={iconRightType}
|
|
95
|
+
size="small"
|
|
96
|
+
className={classify(css.icon, css.rightIcon)}
|
|
97
|
+
/>
|
|
98
|
+
)}
|
|
99
|
+
</UnstyledButton>
|
|
100
|
+
),
|
|
101
|
+
)}
|
|
83
102
|
</div>
|
|
84
103
|
);
|
|
85
104
|
};
|