orcs-design-system 3.3.24 → 3.3.25
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/es/components/Box/index.js +2 -2
- package/es/components/Flex/index.js +2 -2
- package/es/components/Notification/Notification.stories.js +60 -0
- package/es/components/Notification/index.js +23 -9
- package/es/components/Tag/Tag.stories.js +215 -5
- package/es/components/Tag/index.js +35 -25
- package/es/systemThemeCollapsed.js +5 -4
- package/es/systemtheme.js +5 -4
- package/package.json +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { forwardRef } from "react";
|
|
2
2
|
import styled, { ThemeProvider } from "styled-components";
|
|
3
|
-
import { space, layout, flexbox, color, border, variant, compose } from "styled-system";
|
|
3
|
+
import { space, layout, flexbox, color, border, position, variant, compose } from "styled-system";
|
|
4
4
|
import shouldForwardProp from "@styled-system/should-forward-prop";
|
|
5
5
|
import { css } from "@styled-system/css";
|
|
6
6
|
import PropTypes from "prop-types";
|
|
7
7
|
import { themeGet } from "@styled-system/theme-get";
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
const boxStyles = compose(space, layout, flexbox, color, border);
|
|
9
|
+
const boxStyles = compose(space, layout, flexbox, color, border, position);
|
|
10
10
|
const BoxWrapper = styled("div").withConfig({
|
|
11
11
|
shouldForwardProp,
|
|
12
12
|
displayName: "Box__BoxWrapper",
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import styled, { ThemeProvider } from "styled-components";
|
|
4
|
-
import { space, layout, flexbox, color, border, compose } from "styled-system";
|
|
4
|
+
import { space, layout, flexbox, color, border, position, compose } from "styled-system";
|
|
5
5
|
import { css } from "@styled-system/css";
|
|
6
6
|
import shouldForwardProp from "@styled-system/should-forward-prop";
|
|
7
7
|
import styledPropTypes from "@styled-system/prop-types";
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
const FlexStyles = compose(space, layout, flexbox, color, border);
|
|
9
|
+
const FlexStyles = compose(space, layout, flexbox, color, border, position);
|
|
10
10
|
const FlexWrapper = styled("div").withConfig({
|
|
11
11
|
shouldForwardProp,
|
|
12
12
|
displayName: "Flex__FlexWrapper",
|
|
@@ -78,6 +78,61 @@ export const centeredNotification = () => /*#__PURE__*/_jsx(Notification, {
|
|
|
78
78
|
children: "Centered notification"
|
|
79
79
|
});
|
|
80
80
|
centeredNotification.storyName = "Floating and Centered";
|
|
81
|
+
export const altStyleNotification = () => /*#__PURE__*/_jsxs(Spacer, {
|
|
82
|
+
m: "r",
|
|
83
|
+
children: [/*#__PURE__*/_jsx(Notification, {
|
|
84
|
+
altStyle: true,
|
|
85
|
+
closable: false,
|
|
86
|
+
children: "Default notification message for standard messages that are not super important."
|
|
87
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
88
|
+
altStyle: true,
|
|
89
|
+
colour: "success",
|
|
90
|
+
closable: false,
|
|
91
|
+
children: "Green notification for good/successful notifications, e.g. Details updated successfully!"
|
|
92
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
93
|
+
altStyle: true,
|
|
94
|
+
colour: "warning",
|
|
95
|
+
closable: false,
|
|
96
|
+
children: "Yellow warning notification e.g. This may take a few minutes to update."
|
|
97
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
98
|
+
altStyle: true,
|
|
99
|
+
colour: "danger",
|
|
100
|
+
closable: false,
|
|
101
|
+
children: "Red error notification e.g. Update failed! Please try again."
|
|
102
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
103
|
+
altStyle: true,
|
|
104
|
+
icon: ["fas", "bell"],
|
|
105
|
+
children: "Notification with icon"
|
|
106
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
107
|
+
altStyle: true,
|
|
108
|
+
loading: true,
|
|
109
|
+
children: "Loading notification with alternate style"
|
|
110
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
111
|
+
altStyle: true,
|
|
112
|
+
icon: ["fas", "bell"],
|
|
113
|
+
loading: true,
|
|
114
|
+
children: "Loading notification with icon and alternate style"
|
|
115
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
116
|
+
altStyle: true,
|
|
117
|
+
icon: ["fas", "bell"],
|
|
118
|
+
loading: true,
|
|
119
|
+
colour: "success",
|
|
120
|
+
children: "Success notification with all variations"
|
|
121
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
122
|
+
altStyle: true,
|
|
123
|
+
icon: ["fas", "bell"],
|
|
124
|
+
loading: true,
|
|
125
|
+
colour: "warning",
|
|
126
|
+
children: "Warning notification with all variations"
|
|
127
|
+
}), /*#__PURE__*/_jsx(Notification, {
|
|
128
|
+
altStyle: true,
|
|
129
|
+
icon: ["fas", "bell"],
|
|
130
|
+
loading: true,
|
|
131
|
+
colour: "danger",
|
|
132
|
+
children: "Danger notification with all variations"
|
|
133
|
+
})]
|
|
134
|
+
});
|
|
135
|
+
altStyleNotification.storyName = "Alternate Style";
|
|
81
136
|
basicNotification.__docgenInfo = {
|
|
82
137
|
"description": "",
|
|
83
138
|
"methods": [],
|
|
@@ -112,4 +167,9 @@ centeredNotification.__docgenInfo = {
|
|
|
112
167
|
"description": "",
|
|
113
168
|
"methods": [],
|
|
114
169
|
"displayName": "centeredNotification"
|
|
170
|
+
};
|
|
171
|
+
altStyleNotification.__docgenInfo = {
|
|
172
|
+
"description": "",
|
|
173
|
+
"methods": [],
|
|
174
|
+
"displayName": "altStyleNotification"
|
|
115
175
|
};
|
|
@@ -17,7 +17,7 @@ const NotificationWrapper = styled("div").withConfig({
|
|
|
17
17
|
className: props.notifClass
|
|
18
18
|
}))(props => css({
|
|
19
19
|
position: "relative",
|
|
20
|
-
color: themeGet("colors.white")(props),
|
|
20
|
+
color: props.altStyle ? themeGet("colors.black90")(props) : themeGet("colors.white")(props),
|
|
21
21
|
fontSize: themeGet("fontSizes.1")(props),
|
|
22
22
|
fontWeight: themeGet("fontWeights.2")(props),
|
|
23
23
|
px: "s",
|
|
@@ -27,7 +27,7 @@ const NotificationWrapper = styled("div").withConfig({
|
|
|
27
27
|
alignItems: "center",
|
|
28
28
|
justifyContent: "flex-start",
|
|
29
29
|
borderRadius: themeGet("radii.1")(props),
|
|
30
|
-
bg: themeGet("colors.primaryDark")(props),
|
|
30
|
+
bg: props.altStyle ? themeGet("colors.primaryLighter")(props) : themeGet("colors.primaryDark")(props),
|
|
31
31
|
"&.floating": {
|
|
32
32
|
zIndex: "13",
|
|
33
33
|
position: "fixed"
|
|
@@ -41,14 +41,16 @@ const NotificationWrapper = styled("div").withConfig({
|
|
|
41
41
|
prop: "colour",
|
|
42
42
|
variants: {
|
|
43
43
|
success: {
|
|
44
|
-
bg: themeGet("colors.successDark")(props)
|
|
44
|
+
bg: props.altStyle ? themeGet("colors.successLightest")(props) : themeGet("colors.successDark")(props),
|
|
45
|
+
color: props.altStyle ? themeGet("colors.black90")(props) : themeGet("colors.white")(props)
|
|
45
46
|
},
|
|
46
47
|
danger: {
|
|
47
|
-
bg: themeGet("colors.dangerDark")(props)
|
|
48
|
+
bg: props.altStyle ? themeGet("colors.dangerLightest")(props) : themeGet("colors.dangerDark")(props),
|
|
49
|
+
color: props.altStyle ? themeGet("colors.black90")(props) : themeGet("colors.white")(props)
|
|
48
50
|
},
|
|
49
51
|
warning: {
|
|
50
|
-
bg: themeGet("colors.
|
|
51
|
-
color: themeGet("colors.
|
|
52
|
+
bg: props.altStyle ? themeGet("colors.warningLightest")(props) : themeGet("colors.warning")(props),
|
|
53
|
+
color: props.altStyle ? themeGet("colors.black90")(props) : themeGet("colors.white")(props)
|
|
52
54
|
},
|
|
53
55
|
default: {}
|
|
54
56
|
}
|
|
@@ -100,7 +102,7 @@ const NotificationIcon = styled(Icon).withConfig({
|
|
|
100
102
|
displayName: "Notification__NotificationIcon",
|
|
101
103
|
componentId: "sc-1p26rkq-3"
|
|
102
104
|
})(props => css({
|
|
103
|
-
color: props.
|
|
105
|
+
color: props.altStyle ? themeGet("colors.black70")(props) : themeGet("colors.white")(props),
|
|
104
106
|
fontSize: themeGet("fontSizes.2")(props),
|
|
105
107
|
mr: "s"
|
|
106
108
|
}));
|
|
@@ -120,6 +122,7 @@ export default function Notification(_ref) {
|
|
|
120
122
|
theme,
|
|
121
123
|
iconProps,
|
|
122
124
|
loading,
|
|
125
|
+
altStyle,
|
|
123
126
|
...props
|
|
124
127
|
} = _ref;
|
|
125
128
|
const [dismissed, handleDismiss] = useState(false);
|
|
@@ -157,14 +160,16 @@ export default function Notification(_ref) {
|
|
|
157
160
|
iconProps: iconProps,
|
|
158
161
|
notifClass: notifClass,
|
|
159
162
|
role: "alert",
|
|
163
|
+
altStyle: altStyle,
|
|
160
164
|
...props,
|
|
161
165
|
children: [icon && /*#__PURE__*/_jsx(NotificationIcon, {
|
|
162
166
|
colour: colour,
|
|
163
167
|
icon: icon,
|
|
168
|
+
altStyle: altStyle,
|
|
164
169
|
...iconProps
|
|
165
170
|
}), loading && /*#__PURE__*/_jsx(Loading, {
|
|
166
171
|
small: true,
|
|
167
|
-
inverted:
|
|
172
|
+
inverted: !altStyle,
|
|
168
173
|
mr: "s"
|
|
169
174
|
}), /*#__PURE__*/_jsx(NotificationContent, {
|
|
170
175
|
closable: closable,
|
|
@@ -177,7 +182,7 @@ export default function Notification(_ref) {
|
|
|
177
182
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
178
183
|
icon: ["fas", "times"],
|
|
179
184
|
size: "lg",
|
|
180
|
-
color:
|
|
185
|
+
color: altStyle ? "black70" : "white"
|
|
181
186
|
})
|
|
182
187
|
})]
|
|
183
188
|
});
|
|
@@ -212,6 +217,8 @@ Notification.propTypes = {
|
|
|
212
217
|
onDismiss: PropTypes.func,
|
|
213
218
|
/** Showing the close button, default to true.*/
|
|
214
219
|
closable: PropTypes.bool,
|
|
220
|
+
/** Specifies if the notification should use the alternate style. */
|
|
221
|
+
altStyle: PropTypes.bool,
|
|
215
222
|
/** Specifies the system design theme. */
|
|
216
223
|
theme: PropTypes.object
|
|
217
224
|
};
|
|
@@ -339,6 +346,13 @@ Notification.__docgenInfo = {
|
|
|
339
346
|
},
|
|
340
347
|
"required": false
|
|
341
348
|
},
|
|
349
|
+
"altStyle": {
|
|
350
|
+
"description": "Specifies if the notification should use the alternate style.",
|
|
351
|
+
"type": {
|
|
352
|
+
"name": "bool"
|
|
353
|
+
},
|
|
354
|
+
"required": false
|
|
355
|
+
},
|
|
342
356
|
"theme": {
|
|
343
357
|
"description": "Specifies the system design theme.",
|
|
344
358
|
"type": {
|
|
@@ -5,11 +5,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
5
5
|
export default {
|
|
6
6
|
title: "Components/Tag",
|
|
7
7
|
component: Tag,
|
|
8
|
-
decorators: [storyFn =>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
decorators: [(storyFn, _ref) => {
|
|
9
|
+
let {
|
|
10
|
+
parameters
|
|
11
|
+
} = _ref;
|
|
12
|
+
// Skip decorator if excludeDecorator parameter is true
|
|
13
|
+
if (parameters?.excludeDecorator) {
|
|
14
|
+
return storyFn();
|
|
15
|
+
}
|
|
16
|
+
return /*#__PURE__*/_jsx(Flex, {
|
|
17
|
+
flexWrap: "wrap",
|
|
18
|
+
gap: "xs",
|
|
19
|
+
children: storyFn()
|
|
20
|
+
});
|
|
21
|
+
}]
|
|
13
22
|
};
|
|
14
23
|
export const defaultTag = () => /*#__PURE__*/_jsx(Tag, {
|
|
15
24
|
children: "Default Tag"
|
|
@@ -378,6 +387,202 @@ export const personTagSmall = () => /*#__PURE__*/_jsxs(_Fragment, {
|
|
|
378
387
|
children: "Maximillian Dubois"
|
|
379
388
|
})]
|
|
380
389
|
});
|
|
390
|
+
export const AllCombinations = () => /*#__PURE__*/_jsxs(Flex, {
|
|
391
|
+
flexWrap: "wrap",
|
|
392
|
+
gap: "xs",
|
|
393
|
+
width: "250px",
|
|
394
|
+
border: "1px solid red",
|
|
395
|
+
children: [/*#__PURE__*/_jsx(Tag, {
|
|
396
|
+
children: "Digital Transformation Strategy"
|
|
397
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
398
|
+
small: true,
|
|
399
|
+
children: "Digital Transformation Strategy"
|
|
400
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
401
|
+
selected: true,
|
|
402
|
+
children: "Digital Transformation Strategy"
|
|
403
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
404
|
+
small: true,
|
|
405
|
+
selected: true,
|
|
406
|
+
children: "Digital Transformation Strategy"
|
|
407
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
408
|
+
highlighted: true,
|
|
409
|
+
children: "Digital Transformation Strategy"
|
|
410
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
411
|
+
small: true,
|
|
412
|
+
highlighted: true,
|
|
413
|
+
children: "Digital Transformation Strategy"
|
|
414
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
415
|
+
selected: true,
|
|
416
|
+
highlighted: true,
|
|
417
|
+
children: "Digital Transformation Strategy"
|
|
418
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
419
|
+
small: true,
|
|
420
|
+
selected: true,
|
|
421
|
+
highlighted: true,
|
|
422
|
+
children: "Digital Transformation Strategy"
|
|
423
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
424
|
+
disabled: true,
|
|
425
|
+
children: "Digital Transformation Strategy"
|
|
426
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
427
|
+
small: true,
|
|
428
|
+
disabled: true,
|
|
429
|
+
children: "Digital Transformation Strategy"
|
|
430
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
431
|
+
tagType: "Software Engineering Expertise",
|
|
432
|
+
children: "TPC3193EnterpriseArchitectureDesign"
|
|
433
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
434
|
+
small: true,
|
|
435
|
+
tagType: "Software Engineering Expertise",
|
|
436
|
+
children: "Software Engineering Principles"
|
|
437
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
438
|
+
selected: true,
|
|
439
|
+
tagType: "Software Engineering Expertise",
|
|
440
|
+
children: "Software Engineering Principles"
|
|
441
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
442
|
+
small: true,
|
|
443
|
+
selected: true,
|
|
444
|
+
tagType: "Software Engineering Expertise",
|
|
445
|
+
children: "Software Engineering Principles"
|
|
446
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
447
|
+
personEntity: true,
|
|
448
|
+
children: "Product Management Expertise"
|
|
449
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
450
|
+
small: true,
|
|
451
|
+
personEntity: true,
|
|
452
|
+
children: "Product Management Expertise"
|
|
453
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
454
|
+
personEntity: {
|
|
455
|
+
initials: "PM"
|
|
456
|
+
},
|
|
457
|
+
children: "Product Management Expertise"
|
|
458
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
459
|
+
small: true,
|
|
460
|
+
personEntity: {
|
|
461
|
+
initials: "PM"
|
|
462
|
+
},
|
|
463
|
+
children: "Product Management Expertise"
|
|
464
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
465
|
+
personEntity: {
|
|
466
|
+
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=product"
|
|
467
|
+
},
|
|
468
|
+
children: "Product Management Expertise"
|
|
469
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
470
|
+
small: true,
|
|
471
|
+
personEntity: {
|
|
472
|
+
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=product"
|
|
473
|
+
},
|
|
474
|
+
children: "Product Management Expertise"
|
|
475
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
476
|
+
showInfo: true,
|
|
477
|
+
tagType: "Enterprise Architecture Solutions",
|
|
478
|
+
children: "Enterprise Architecture Design"
|
|
479
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
480
|
+
small: true,
|
|
481
|
+
showInfo: true,
|
|
482
|
+
tagType: "Enterprise Architecture Solutions",
|
|
483
|
+
children: "Enterprise Architecture Design"
|
|
484
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
485
|
+
showEdit: true,
|
|
486
|
+
children: "Enterprise Architecture Design"
|
|
487
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
488
|
+
small: true,
|
|
489
|
+
showEdit: true,
|
|
490
|
+
children: "Enterprise Architecture Design"
|
|
491
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
492
|
+
showRemove: true,
|
|
493
|
+
children: "Enterprise Architecture Design"
|
|
494
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
495
|
+
small: true,
|
|
496
|
+
showRemove: true,
|
|
497
|
+
children: "Enterprise Architecture Design"
|
|
498
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
499
|
+
showEdit: true,
|
|
500
|
+
showRemove: true,
|
|
501
|
+
children: "Enterprise Architecture Design"
|
|
502
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
503
|
+
small: true,
|
|
504
|
+
showEdit: true,
|
|
505
|
+
showRemove: true,
|
|
506
|
+
children: "Enterprise Architecture Design"
|
|
507
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
508
|
+
showEdit: true,
|
|
509
|
+
showInfo: true,
|
|
510
|
+
tagType: "Enterprise Architecture Solutions",
|
|
511
|
+
children: "Enterprise Architecture Design"
|
|
512
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
513
|
+
small: true,
|
|
514
|
+
showEdit: true,
|
|
515
|
+
showInfo: true,
|
|
516
|
+
tagType: "Enterprise Architecture Solutions",
|
|
517
|
+
children: "Enterprise Architecture Design"
|
|
518
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
519
|
+
showRemove: true,
|
|
520
|
+
showInfo: true,
|
|
521
|
+
tagType: "Enterprise Architecture Solutions",
|
|
522
|
+
children: "Enterprise Architecture Design"
|
|
523
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
524
|
+
small: true,
|
|
525
|
+
showRemove: true,
|
|
526
|
+
showInfo: true,
|
|
527
|
+
tagType: "Enterprise Architecture Solutions",
|
|
528
|
+
children: "Enterprise Architecture Design"
|
|
529
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
530
|
+
showEdit: true,
|
|
531
|
+
showRemove: true,
|
|
532
|
+
showInfo: true,
|
|
533
|
+
tagType: "Enterprise Architecture Solutions",
|
|
534
|
+
children: "Enterprise Architecture Design"
|
|
535
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
536
|
+
small: true,
|
|
537
|
+
showEdit: true,
|
|
538
|
+
showRemove: true,
|
|
539
|
+
showInfo: true,
|
|
540
|
+
tagType: "Enterprise Architecture Solutions",
|
|
541
|
+
children: "Enterprise Architecture Design"
|
|
542
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
543
|
+
selected: true,
|
|
544
|
+
highlighted: true,
|
|
545
|
+
personEntity: {
|
|
546
|
+
initials: "DT"
|
|
547
|
+
},
|
|
548
|
+
showInfo: true,
|
|
549
|
+
tagType: "Data Science Implementation Strategy",
|
|
550
|
+
children: "Data Science Implementation"
|
|
551
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
552
|
+
small: true,
|
|
553
|
+
selected: true,
|
|
554
|
+
highlighted: true,
|
|
555
|
+
personEntity: {
|
|
556
|
+
initials: "DT"
|
|
557
|
+
},
|
|
558
|
+
showInfo: true,
|
|
559
|
+
tagType: "Data Science Implementation Strategy",
|
|
560
|
+
children: "Data Science Implementation"
|
|
561
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
562
|
+
selected: true,
|
|
563
|
+
highlighted: true,
|
|
564
|
+
personEntity: {
|
|
565
|
+
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=data"
|
|
566
|
+
},
|
|
567
|
+
showEdit: true,
|
|
568
|
+
showRemove: true,
|
|
569
|
+
children: "Data Science Implementation"
|
|
570
|
+
}), /*#__PURE__*/_jsx(Tag, {
|
|
571
|
+
small: true,
|
|
572
|
+
selected: true,
|
|
573
|
+
highlighted: true,
|
|
574
|
+
personEntity: {
|
|
575
|
+
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=data"
|
|
576
|
+
},
|
|
577
|
+
showEdit: true,
|
|
578
|
+
showRemove: true,
|
|
579
|
+
children: "Data Science Implementation"
|
|
580
|
+
})]
|
|
581
|
+
});
|
|
582
|
+
AllCombinations.parameters = {
|
|
583
|
+
excludeDecorator: true
|
|
584
|
+
};
|
|
585
|
+
AllCombinations.storyName = "All Prop Combinations";
|
|
381
586
|
defaultTag.__docgenInfo = {
|
|
382
587
|
"description": "",
|
|
383
588
|
"methods": [],
|
|
@@ -442,4 +647,9 @@ personTagSmall.__docgenInfo = {
|
|
|
442
647
|
"description": "",
|
|
443
648
|
"methods": [],
|
|
444
649
|
"displayName": "personTagSmall"
|
|
650
|
+
};
|
|
651
|
+
AllCombinations.__docgenInfo = {
|
|
652
|
+
"description": "",
|
|
653
|
+
"methods": [],
|
|
654
|
+
"displayName": "AllCombinations"
|
|
445
655
|
};
|
|
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
|
|
|
4
4
|
import { space, layout } from "styled-system";
|
|
5
5
|
import Avatar from "../Avatar";
|
|
6
6
|
import Icon from "../Icon";
|
|
7
|
+
import Flex from "../Flex";
|
|
7
8
|
import Loading from "../Loading";
|
|
8
9
|
import { themeGet } from "@styled-system/theme-get";
|
|
9
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -16,27 +17,31 @@ const TagValue = styled.button.attrs(props => ({
|
|
|
16
17
|
})).withConfig({
|
|
17
18
|
displayName: "Tag__TagValue",
|
|
18
19
|
componentId: "sc-1dh2aa8-1"
|
|
19
|
-
})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:", ";display:flex;align-items:center;flex-wrap:
|
|
20
|
+
})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:", ";display:flex;gap:", ";align-items:center;flex-wrap:wrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], props => themeGet("fontSizes.1")(props), props => props.small ? "3px" : "4px", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "default" : "pointer", themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.highlighted ? themeGet("colors.warningDark")(props) : themeGet("colors.primary")(props), props => props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault"), props => props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black80")(props) : props.highlighted ? themeGet("colors.warningDarker")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props), props => props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningLight")(props)}` : props.highlighted ? `solid 1px ${themeGet("colors.warningDark")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : props.selected ? themeGet("colors.primaryDark")(props) : props.highlighted ? themeGet("colors.warningLightest")(props) : themeGet("colors.primaryLightest")(props), props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.highlighted ? themeGet("colors.warningDarkest")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? "rgba(255,255,255,0.3)" : props.highlighted ? themeGet("colors.warning30")(props) : props.selected ? "rgba(0,0,0,0.3)" : themeGet("colors.primary20")(props)));
|
|
20
21
|
const TagValueText = styled.div.withConfig({
|
|
21
22
|
displayName: "Tag__TagValueText",
|
|
22
23
|
componentId: "sc-1dh2aa8-2"
|
|
23
|
-
})(["text-decoration:", ";white-space:normal;
|
|
24
|
+
})(["text-decoration:", ";white-space:normal;word-break:break-word;max-width:100%;text-align:left;line-height:", ";padding-bottom:1px;"], props => props.showStrikeThrough ? "line-through" : "none", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props));
|
|
24
25
|
const TagActionIconWrapper = styled(TagValue).withConfig({
|
|
25
26
|
displayName: "Tag__TagActionIconWrapper",
|
|
26
27
|
componentId: "sc-1dh2aa8-3"
|
|
27
|
-
})(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], props => props.showRemove ? "0" : "
|
|
28
|
+
})(["border-radius:", ";border-top-left-radius:0;border-bottom-left-radius:0;padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], props => props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.showRemove && props.small ? "0 3px 0 4px" : props.showRemove ? "0 5px 0 5px" : props.showInfo && props.small ? "0 8px 0 7px" : props.showInfo ? "0 10px 0 9px" : props.small ? "0 4px 0 3px" : "0 6px 0 5px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`) : css(["border-left:0;&:hover,&:focus{background-color:", ";color:", ";border-left:0;}"], props => props.highlighted ? themeGet("colors.warningLightest")(props) : themeGet("colors.primaryLightest")(props), props => props.highlighted ? themeGet("colors.warningDarkest")(props) : themeGet("colors.primaryDark")(props)));
|
|
28
29
|
const TagRemoveIconWrapper = styled(TagValue).withConfig({
|
|
29
30
|
displayName: "Tag__TagRemoveIconWrapper",
|
|
30
31
|
componentId: "sc-1dh2aa8-4"
|
|
31
|
-
})(["border-radius:
|
|
32
|
+
})(["border-radius:", ";border-top-left-radius:0;border-bottom-left-radius:0;padding:", ";&:focus{z-index:2;}", ""], themeGet("tagScale.tagBorderRadius"), props => props.small ? "2px 6px 2px 5px" : "2px 8px 2px 7px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`, props => props.selected && props.highlighted ? `solid 1px ${themeGet("colors.warningDarker")(props)}` : `solid 1px ${themeGet("colors.primaryDark")(props)}`) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;color:", ";}"], props => props.highlighted ? themeGet("colors.warningLightest")(props) : themeGet("colors.primaryLightest")(props), props => props.highlighted ? themeGet("colors.warningDarkest")(props) : themeGet("colors.primaryDark")(props)));
|
|
32
33
|
const TagType = styled.div.withConfig({
|
|
33
34
|
displayName: "Tag__TagType",
|
|
34
35
|
componentId: "sc-1dh2aa8-5"
|
|
35
|
-
})(["text-transform:uppercase;
|
|
36
|
+
})(["text-transform:uppercase;padding:", ";line-height:1;white-space:normal;word-break:break-word;text-align:left;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], props => props.small ? themeGet("space.2")(props) : themeGet("space.2")(props), props => themeGet("radii.1")(props), props => props.small ? "1rem" : themeGet("fontSizes.0")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningLightest")(props) : props.highlighted ? themeGet("colors.warning30")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props), props => props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.highlighted ? themeGet("colors.warningDarkest")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props));
|
|
37
|
+
const TagAvatarWrapper = styled.div.withConfig({
|
|
38
|
+
displayName: "Tag__TagAvatarWrapper",
|
|
39
|
+
componentId: "sc-1dh2aa8-6"
|
|
40
|
+
})(["margin-left:", ";"], props => props.small ? themeGet("tagScale.tagAvatarMarginLeftSmall") : themeGet("tagScale.tagAvatarMarginLeftDefault"));
|
|
36
41
|
const TagAvatar = styled(Avatar).withConfig({
|
|
37
42
|
displayName: "Tag__TagAvatar",
|
|
38
|
-
componentId: "sc-1dh2aa8-
|
|
39
|
-
})(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;
|
|
43
|
+
componentId: "sc-1dh2aa8-7"
|
|
44
|
+
})(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;font-size:", ";background:", ";color:", ";}"], props => props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault"), props => props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault"), props => props.small ? themeGet("tagScale.tagAvatarFontSizeSmall") : themeGet("tagScale.tagAvatarFontSizeDefault"), props => props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props), props => props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props));
|
|
40
45
|
|
|
41
46
|
/**
|
|
42
47
|
* The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.
|
|
@@ -79,30 +84,35 @@ export default function Tag(_ref) {
|
|
|
79
84
|
onClick: onSelect,
|
|
80
85
|
small: small,
|
|
81
86
|
"aria-label": ariaLabel,
|
|
82
|
-
children: [
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}),
|
|
87
|
+
children: [/*#__PURE__*/_jsxs(Flex, {
|
|
88
|
+
flexWrap: "nowrap",
|
|
89
|
+
gap: props.small ? "3px" : "4px",
|
|
90
|
+
alignItems: "center",
|
|
91
|
+
children: [personEntity && /*#__PURE__*/_jsx(TagAvatarWrapper, {
|
|
92
|
+
children: /*#__PURE__*/_jsx(TagAvatar, {
|
|
93
|
+
selected: selected,
|
|
94
|
+
highlighted: highlighted,
|
|
95
|
+
disabled: disabled,
|
|
96
|
+
small: small,
|
|
97
|
+
imageAlt: `Avatar for ${children}`,
|
|
98
|
+
image: personEntity.avatarSrc,
|
|
99
|
+
initials: personEntity.initials
|
|
100
|
+
})
|
|
101
|
+
}), /*#__PURE__*/_jsxs(TagValueText, {
|
|
102
|
+
showStrikeThrough: showStrikeThrough,
|
|
103
|
+
small: small,
|
|
104
|
+
children: [showStrikeThrough && /*#__PURE__*/_jsx("span", {
|
|
105
|
+
className: "sr-only",
|
|
106
|
+
children: "Striked out:"
|
|
107
|
+
}), children]
|
|
108
|
+
})]
|
|
97
109
|
}), tagType && /*#__PURE__*/_jsx(TagType, {
|
|
98
110
|
selected: selected,
|
|
99
111
|
highlighted: highlighted,
|
|
100
112
|
disabled: disabled,
|
|
101
113
|
small: small,
|
|
102
114
|
children: tagType
|
|
103
|
-
}), isPending && /*#__PURE__*/_jsx(Loading, {
|
|
104
|
-
ml: "s"
|
|
105
|
-
})]
|
|
115
|
+
}), isPending && /*#__PURE__*/_jsx(Loading, {})]
|
|
106
116
|
}), showEdit && /*#__PURE__*/_jsx(TagActionIconWrapper, {
|
|
107
117
|
selected: selected,
|
|
108
118
|
highlighted: highlighted,
|
|
@@ -233,12 +233,13 @@ export const appScale = {
|
|
|
233
233
|
export const tagScale = {
|
|
234
234
|
tagHeightDefault: "22px",
|
|
235
235
|
tagHeightSmall: "18px",
|
|
236
|
-
tagPaddingDefault: "
|
|
237
|
-
tagPaddingSmall: "
|
|
236
|
+
tagPaddingDefault: "3px 6px",
|
|
237
|
+
tagPaddingSmall: "2px 4px",
|
|
238
|
+
tagBorderRadius: "11px",
|
|
238
239
|
tagAvatarSizeDefault: "16px",
|
|
239
240
|
tagAvatarSizeSmall: "14px",
|
|
240
|
-
tagAvatarMarginLeftDefault: "-
|
|
241
|
-
tagAvatarMarginLeftSmall: "-
|
|
241
|
+
tagAvatarMarginLeftDefault: "-3px",
|
|
242
|
+
tagAvatarMarginLeftSmall: "-1px",
|
|
242
243
|
tagAvatarFontSizeDefault: "0.8rem",
|
|
243
244
|
tagAvatarFontSizeSmall: "0.7rem"
|
|
244
245
|
};
|
package/es/systemtheme.js
CHANGED
|
@@ -232,12 +232,13 @@ export const appScale = {
|
|
|
232
232
|
export const tagScale = {
|
|
233
233
|
tagHeightDefault: "28px",
|
|
234
234
|
tagHeightSmall: "24px",
|
|
235
|
-
tagPaddingDefault: "
|
|
236
|
-
tagPaddingSmall: "
|
|
235
|
+
tagPaddingDefault: "4px 8px",
|
|
236
|
+
tagPaddingSmall: "3px 6px",
|
|
237
|
+
tagBorderRadius: "14px",
|
|
237
238
|
tagAvatarSizeDefault: "20px",
|
|
238
239
|
tagAvatarSizeSmall: "18px",
|
|
239
|
-
tagAvatarMarginLeftDefault: "-
|
|
240
|
-
tagAvatarMarginLeftSmall: "-
|
|
240
|
+
tagAvatarMarginLeftDefault: "-3px",
|
|
241
|
+
tagAvatarMarginLeftSmall: "-1px",
|
|
241
242
|
tagAvatarFontSizeDefault: "0.9rem",
|
|
242
243
|
tagAvatarFontSizeSmall: "0.8rem"
|
|
243
244
|
};
|