orcs-design-system 3.3.2 → 3.3.3

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.
Files changed (3) hide show
  1. package/es/components/Badge/Badge.stories.js +102 -68
  2. package/es/components/Badge/index.js +87 -38
  3. package/package.json +2 -2
package/es/components/Badge/Badge.stories.js CHANGED
@@ -12,82 +12,116 @@ export const defaultBadge = () => /*#__PURE__*/_jsx(Badge, {
12
12
  children: "Default"
13
13
  });
14
14
  defaultBadge.storyName = "Default";
15
- export const colourVariants = () => /*#__PURE__*/_jsxs(_Fragment, {
16
- children: [/*#__PURE__*/_jsx(Box, {
17
- p: "r",
18
- children: /*#__PURE__*/_jsx(Flex, {
19
- flexWrap: "wrap",
20
- children: /*#__PURE__*/_jsxs(Spacer, {
21
- m: "1",
22
- children: [/*#__PURE__*/_jsx(Badge, {
23
- children: "Default"
24
- }), /*#__PURE__*/_jsx(Badge, {
25
- variant: "success",
26
- children: "Success"
27
- }), /*#__PURE__*/_jsx(Badge, {
28
- variant: "warning",
29
- children: "Warning"
30
- }), /*#__PURE__*/_jsx(Badge, {
31
- variant: "danger",
32
- children: "Danger"
33
- }), /*#__PURE__*/_jsx(Badge, {
34
- variant: "primaryLight",
35
- children: "Low priority"
36
- }), /*#__PURE__*/_jsx(Badge, {
37
- variant: "primary",
38
- children: "Medium priority"
39
- }), /*#__PURE__*/_jsx(Badge, {
40
- variant: "primaryDark",
41
- children: "High priority"
42
- }), /*#__PURE__*/_jsx(Badge, {
43
- variant: "secondary",
44
- children: "Secondary"
45
- })]
15
+
16
+ // eslint-disable-next-line react/prop-types
17
+ export const ColourVariants = function () {
18
+ let {
19
+ altStyle = false
20
+ } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
21
+ return /*#__PURE__*/_jsxs(_Fragment, {
22
+ children: [/*#__PURE__*/_jsx(Box, {
23
+ p: "r",
24
+ children: /*#__PURE__*/_jsx(Flex, {
25
+ flexWrap: "wrap",
26
+ children: /*#__PURE__*/_jsxs(Spacer, {
27
+ m: "1",
28
+ children: [/*#__PURE__*/_jsx(Badge, {
29
+ altStyle: altStyle,
30
+ children: "Default"
31
+ }), /*#__PURE__*/_jsx(Badge, {
32
+ altStyle: altStyle,
33
+ variant: "success",
34
+ children: "Success"
35
+ }), /*#__PURE__*/_jsx(Badge, {
36
+ altStyle: altStyle,
37
+ variant: "warning",
38
+ children: "Warning"
39
+ }), /*#__PURE__*/_jsx(Badge, {
40
+ altStyle: altStyle,
41
+ variant: "danger",
42
+ children: "Danger"
43
+ }), /*#__PURE__*/_jsx(Badge, {
44
+ altStyle: altStyle,
45
+ variant: "primaryLight",
46
+ children: "Low priority"
47
+ }), /*#__PURE__*/_jsx(Badge, {
48
+ altStyle: altStyle,
49
+ variant: "primary",
50
+ children: "Medium priority"
51
+ }), /*#__PURE__*/_jsx(Badge, {
52
+ altStyle: altStyle,
53
+ variant: "primaryDark",
54
+ children: "High priority"
55
+ }), /*#__PURE__*/_jsx(Badge, {
56
+ altStyle: altStyle,
57
+ variant: "secondary",
58
+ children: "Secondary"
59
+ })]
60
+ })
46
61
  })
47
- })
48
- }), /*#__PURE__*/_jsx(Box, {
49
- p: "r",
50
- bg: "greyDarkest",
51
- children: /*#__PURE__*/_jsx(Flex, {
52
- flexWrap: "wrap",
53
- children: /*#__PURE__*/_jsxs(Spacer, {
54
- m: "1",
55
- children: [/*#__PURE__*/_jsx(Badge, {
56
- children: "Default"
57
- }), /*#__PURE__*/_jsx(Badge, {
58
- variant: "success",
59
- children: "Success"
60
- }), /*#__PURE__*/_jsx(Badge, {
61
- variant: "warning",
62
- children: "Warning"
63
- }), /*#__PURE__*/_jsx(Badge, {
64
- variant: "danger",
65
- children: "Danger"
66
- }), /*#__PURE__*/_jsx(Badge, {
67
- variant: "primaryLight",
68
- children: "Low priority"
69
- }), /*#__PURE__*/_jsx(Badge, {
70
- variant: "primary",
71
- children: "Medium priority"
72
- }), /*#__PURE__*/_jsx(Badge, {
73
- variant: "primaryDark",
74
- children: "High priority"
75
- }), /*#__PURE__*/_jsx(Badge, {
76
- variant: "secondary",
77
- children: "Secondary"
78
- })]
62
+ }), !altStyle && /*#__PURE__*/_jsx(Box, {
63
+ p: "r",
64
+ bg: "greyDarkest",
65
+ children: /*#__PURE__*/_jsx(Flex, {
66
+ flexWrap: "wrap",
67
+ children: /*#__PURE__*/_jsxs(Spacer, {
68
+ m: "1",
69
+ children: [/*#__PURE__*/_jsx(Badge, {
70
+ altStyle: altStyle,
71
+ children: "Default"
72
+ }), /*#__PURE__*/_jsx(Badge, {
73
+ altStyle: altStyle,
74
+ variant: "success",
75
+ children: "Success"
76
+ }), /*#__PURE__*/_jsx(Badge, {
77
+ altStyle: altStyle,
78
+ variant: "warning",
79
+ children: "Warning"
80
+ }), /*#__PURE__*/_jsx(Badge, {
81
+ altStyle: altStyle,
82
+ variant: "danger",
83
+ children: "Danger"
84
+ }), /*#__PURE__*/_jsx(Badge, {
85
+ altStyle: altStyle,
86
+ variant: "primaryLight",
87
+ children: "Low priority"
88
+ }), /*#__PURE__*/_jsx(Badge, {
89
+ altStyle: altStyle,
90
+ variant: "primary",
91
+ children: "Medium priority"
92
+ }), /*#__PURE__*/_jsx(Badge, {
93
+ altStyle: altStyle,
94
+ variant: "primaryDark",
95
+ children: "High priority"
96
+ }), /*#__PURE__*/_jsx(Badge, {
97
+ altStyle: altStyle,
98
+ variant: "secondary",
99
+ children: "Secondary"
100
+ })]
101
+ })
79
102
  })
80
- })
81
- })]
103
+ })]
104
+ });
105
+ };
106
+
107
+ // eslint-disable-next-line react/no-unknown-property
108
+ export const altStyleColourVariants = () => /*#__PURE__*/_jsx(ColourVariants, {
109
+ altStyle: true
82
110
  });
83
- colourVariants.storyName = "Colour variants";
111
+ altStyleColourVariants.storyName = "Alt style colour variants";
112
+ ColourVariants.storyName = "Colour variants";
84
113
  defaultBadge.__docgenInfo = {
85
114
  "description": "",
86
115
  "methods": [],
87
116
  "displayName": "defaultBadge"
88
117
  };
89
- colourVariants.__docgenInfo = {
118
+ ColourVariants.__docgenInfo = {
119
+ "description": "",
120
+ "methods": [],
121
+ "displayName": "ColourVariants"
122
+ };
123
+ altStyleColourVariants.__docgenInfo = {
90
124
  "description": "",
91
125
  "methods": [],
92
- "displayName": "colourVariants"
126
+ "displayName": "altStyleColourVariants"
93
127
  };
package/es/components/Badge/index.js CHANGED
@@ -26,53 +26,93 @@ const Item = styled("span").withConfig({
26
26
  borderRadius: 1,
27
27
  color: themeGet("colors.greyDarkest")(props),
28
28
  bg: themeGet("colors.greyLighter")(props),
29
- whiteSpace: props.noWrap ? "nowrap" : "normal"
30
- }), props => variant({
31
- variants: {
32
- default: {},
33
- success: {
34
- color: themeGet("colors.successDarkest")(props),
35
- bg: themeGet("colors.successLightest")(props)
36
- },
37
- successPending: {
38
- color: themeGet("colors.successDark")(props),
39
- bg: themeGet("colors.successEvenLighter")(props)
40
- },
41
- warning: {
42
- color: themeGet("colors.warningDarkest")(props),
43
- bg: themeGet("colors.warningLighter")(props)
44
- },
45
- danger: {
46
- color: themeGet("colors.dangerDarkest")(props),
47
- bg: themeGet("colors.dangerLightest")(props)
48
- },
49
- primaryLight: {
50
- color: themeGet("colors.primaryDarker")(props),
51
- bg: themeGet("colors.primaryLightest")(props)
52
- },
53
- primary: {
54
- color: themeGet("colors.primaryDarkest")(props),
55
- bg: themeGet("colors.primaryLighter")(props)
56
- },
57
- primaryDark: {
58
- color: themeGet("colors.primaryDarkest")(props),
59
- bg: themeGet("colors.primaryLight")(props)
60
- },
61
- secondary: {
62
- color: themeGet("colors.secondaryDarkest")(props),
63
- bg: themeGet("colors.secondaryEvenLighter")(props)
64
- }
29
+ whiteSpace: props.noWrap ? "nowrap" : "normal",
30
+ ...(props.altStyle ? {
31
+ bg: themeGet("colors.white")(props),
32
+ p: "1px"
33
+ } : {})
34
+ }), props => {
35
+ if (props.altStyle) {
36
+ return variant({
37
+ variants: {
38
+ default: {},
39
+ success: {
40
+ color: themeGet("colors.success")(props)
41
+ },
42
+ successPending: {
43
+ color: themeGet("colors.success")(props)
44
+ },
45
+ warning: {
46
+ color: themeGet("colors.warningDark")(props)
47
+ },
48
+ danger: {
49
+ color: themeGet("colors.danger")(props)
50
+ },
51
+ primaryLight: {
52
+ color: themeGet("colors.primaryLight")(props)
53
+ },
54
+ primary: {
55
+ color: themeGet("colors.primary")(props)
56
+ },
57
+ primaryDark: {
58
+ color: themeGet("colors.primaryDark")(props)
59
+ },
60
+ secondary: {
61
+ color: themeGet("colors.secondary")(props)
62
+ }
63
+ }
64
+ });
65
+ } else {
66
+ return variant({
67
+ variants: {
68
+ default: {},
69
+ success: {
70
+ color: themeGet("colors.successDarkest")(props),
71
+ bg: themeGet("colors.successLightest")(props)
72
+ },
73
+ successPending: {
74
+ color: themeGet("colors.successDark")(props),
75
+ bg: themeGet("colors.successEvenLighter")(props)
76
+ },
77
+ warning: {
78
+ color: themeGet("colors.warningDarkest")(props),
79
+ bg: themeGet("colors.warningLighter")(props)
80
+ },
81
+ danger: {
82
+ color: themeGet("colors.dangerDarkest")(props),
83
+ bg: themeGet("colors.dangerLightest")(props)
84
+ },
85
+ primaryLight: {
86
+ color: themeGet("colors.primaryDarker")(props),
87
+ bg: themeGet("colors.primaryLightest")(props)
88
+ },
89
+ primary: {
90
+ color: themeGet("colors.primaryDarkest")(props),
91
+ bg: themeGet("colors.primaryLighter")(props)
92
+ },
93
+ primaryDark: {
94
+ color: themeGet("colors.primaryDarkest")(props),
95
+ bg: themeGet("colors.primaryLight")(props)
96
+ },
97
+ secondary: {
98
+ color: themeGet("colors.secondaryDarkest")(props),
99
+ bg: themeGet("colors.secondaryEvenLighter")(props)
100
+ }
101
+ }
102
+ });
65
103
  }
66
- }), BadgeStyles);
104
+ }, BadgeStyles);
67
105
  export default function Badge(_ref) {
68
106
  let {
69
107
  noWrap,
70
108
  children,
71
109
  theme,
110
+ altStyle,
72
111
  ...props
73
112
  } = _ref;
74
113
  const component = /*#__PURE__*/_jsx(Item, {
75
114
  noWrap: noWrap,
115
+ altStyle: altStyle,
76
116
  ...props,
77
117
  children: children
78
118
  });
@@ -89,7 +129,9 @@ Badge.propTypes = {
89
129
  /** The label text on the badge is passed as a child element. */
90
130
  children: PropTypes.node,
91
131
  /** Specifies the system theme. */
92
- theme: PropTypes.object
132
+ theme: PropTypes.object,
133
+ /** Specifies use the alternative style */
134
+ altStyle: PropTypes.bool
93
135
  };
94
136
  Badge.__docgenInfo = {
95
137
  "description": "",
@@ -145,6 +187,13 @@ Badge.__docgenInfo = {
145
187
  "name": "object"
146
188
  },
147
189
  "required": false
190
+ },
191
+ "altStyle": {
192
+ "description": "Specifies use the alternative style",
193
+ "type": {
194
+ "name": "bool"
195
+ },
196
+ "required": false
148
197
  }
149
198
  }
150
199
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "orcs-design-system",
3
- "version": "3.3.2",
3
+ "version": "3.3.3",
4
4
  "engines": {
5
5
  "node": "20.12.2"
6
6
  },
@@ -36,7 +36,7 @@
36
36
  "module": "BABEL_ENV=es babel lib -d es",
37
37
  "deploy-stack": "serverless deploy",
38
38
  "deploy-client": "serverless client deploy --no-confirm",
39
- "storybook": "storybook dev",
39
+ "storybook": "storybook dev -p 1337",
40
40
  "build-storybook": "storybook build -o .build_storybook",
41
41
  "deploy-storybook": "storybook-to-ghpages",
42
42
  "playroom": "playroom start",