@instructure/ui-badge 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (13) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Badge/v1/index.js +58 -50
  3. package/es/Badge/v1/styles.js +7 -6
  4. package/es/Badge/v1/theme.js +20 -19
  5. package/es/Badge/v2/index.js +58 -50
  6. package/es/Badge/v2/styles.js +7 -6
  7. package/lib/Badge/v1/index.js +58 -50
  8. package/lib/Badge/v1/styles.js +7 -6
  9. package/lib/Badge/v1/theme.js +20 -19
  10. package/lib/Badge/v2/index.js +58 -50
  11. package/lib/Badge/v2/styles.js +7 -6
  12. package/package.json +11 -11
  13. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-badge
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Badge/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class, _Badge;
1
+ var _dec, _dec2, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -36,41 +36,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
36
36
  category: components
37
37
  ---
38
38
  **/
39
- let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_Badge = class Badge extends Component {
39
+ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = class Badge extends Component {
40
+ static displayName = "Badge";
41
+ static componentId = 'Badge';
42
+ static allowedProps = allowedProps;
43
+ static defaultProps = {
44
+ standalone: false,
45
+ type: 'count',
46
+ variant: 'primary',
47
+ display: 'inline-block',
48
+ pulse: false,
49
+ placement: 'top end',
50
+ elementRef: () => {},
51
+ formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
52
+ };
40
53
  constructor(props) {
41
54
  super(props);
42
- this._defaultId = void 0;
43
- this.ref = null;
44
- this.handleRef = el => {
45
- const elementRef = this.props.elementRef;
46
- this.ref = el;
47
- if (typeof elementRef === 'function') {
48
- elementRef(el);
49
- }
50
- };
51
55
  this._defaultId = this.props.deterministicId();
52
56
  }
57
+ _defaultId;
58
+ ref = null;
59
+ handleRef = el => {
60
+ const {
61
+ elementRef
62
+ } = this.props;
63
+ this.ref = el;
64
+ if (typeof elementRef === 'function') {
65
+ elementRef(el);
66
+ }
67
+ };
53
68
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props;
55
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
69
+ this.props.makeStyles?.();
56
70
  }
57
71
  componentDidUpdate() {
58
- var _this$props$makeStyle2, _this$props2;
59
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
72
+ this.props.makeStyles?.();
60
73
  }
61
74
  countOverflow() {
62
- const _this$props3 = this.props,
63
- count = _this$props3.count,
64
- countUntil = _this$props3.countUntil;
75
+ const {
76
+ count,
77
+ countUntil
78
+ } = this.props;
65
79
  return countUntil && count && countUntil > 1 && count >= countUntil;
66
80
  }
67
81
  renderOutput() {
68
- const _this$props4 = this.props,
69
- count = _this$props4.count,
70
- countUntil = _this$props4.countUntil,
71
- formatOverflowText = _this$props4.formatOverflowText,
72
- formatOutput = _this$props4.formatOutput,
73
- type = _this$props4.type;
82
+ const {
83
+ count,
84
+ countUntil,
85
+ formatOverflowText,
86
+ formatOutput,
87
+ type
88
+ } = this.props;
74
89
 
75
90
  // If the badge count is >= than the countUntil limit, format the badge text
76
91
  // via the formatOverflowText function prop
@@ -85,17 +100,18 @@ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
85
100
  }
86
101
  }
87
102
  renderBadge() {
88
- const _this$props5 = this.props,
89
- count = _this$props5.count,
90
- margin = _this$props5.margin,
91
- standalone = _this$props5.standalone,
92
- type = _this$props5.type,
93
- styles = _this$props5.styles;
103
+ const {
104
+ count,
105
+ margin,
106
+ standalone,
107
+ type,
108
+ styles
109
+ } = this.props;
94
110
  return _jsx(View, {
95
111
  margin: standalone ? margin : 'none',
96
- css: styles === null || styles === void 0 ? void 0 : styles.badge,
97
- title: type === 'count' && this.countOverflow() ? count === null || count === void 0 ? void 0 : count.toString() : '',
98
- id: !standalone ? this._defaultId : void 0,
112
+ css: styles?.badge,
113
+ title: type === 'count' && this.countOverflow() ? count?.toString() : '',
114
+ id: !standalone ? this._defaultId : undefined,
99
115
  display: standalone ? 'inline-block' : 'block',
100
116
  ...(standalone && {
101
117
  elementRef: this.handleRef,
@@ -112,12 +128,13 @@ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
112
128
  });
113
129
  }
114
130
  render() {
115
- const _this$props6 = this.props,
116
- margin = _this$props6.margin,
117
- standalone = _this$props6.standalone,
118
- display = _this$props6.display,
119
- as = _this$props6.as,
120
- styles = _this$props6.styles;
131
+ const {
132
+ margin,
133
+ standalone,
134
+ display,
135
+ as,
136
+ styles
137
+ } = this.props;
121
138
  if (standalone) {
122
139
  return this.renderBadge();
123
140
  } else {
@@ -125,22 +142,13 @@ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
125
142
  as: as,
126
143
  margin: margin,
127
144
  elementRef: this.handleRef,
128
- css: styles === null || styles === void 0 ? void 0 : styles.wrapper,
145
+ css: styles?.wrapper,
129
146
  display: display,
130
147
  "data-cid": "Badge",
131
148
  children: [this.renderChildren(), this.renderBadge()]
132
149
  });
133
150
  }
134
151
  }
135
- }, _Badge.displayName = "Badge", _Badge.componentId = 'Badge', _Badge.allowedProps = allowedProps, _Badge.defaultProps = {
136
- standalone: false,
137
- type: 'count',
138
- variant: 'primary',
139
- display: 'inline-block',
140
- pulse: false,
141
- placement: 'top end',
142
- elementRef: () => {},
143
- formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
144
- }, _Badge)) || _class) || _class);
152
+ }) || _class) || _class);
145
153
  export default Badge;
146
154
  export { Badge };
package/es/Badge/v1/styles.js CHANGED
@@ -42,12 +42,13 @@ const pulseAnimation = keyframes`
42
42
  * @return {Object} The final style object, which will be used in the component
43
43
  */
44
44
  const generateStyle = (componentTheme, props) => {
45
- const type = props.type,
46
- variant = props.variant,
47
- _props$placement = props.placement,
48
- placement = _props$placement === void 0 ? '' : _props$placement,
49
- standalone = props.standalone,
50
- pulse = props.pulse;
45
+ const {
46
+ type,
47
+ variant,
48
+ placement = '',
49
+ standalone,
50
+ pulse
51
+ } = props;
51
52
  const top = placement.indexOf('top') > -1;
52
53
  const bottom = placement.indexOf('bottom') > -1;
53
54
  const start = placement.indexOf('start') > -1;
package/es/Badge/v1/theme.js CHANGED
@@ -28,35 +28,36 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
32
- const borders = theme.borders,
33
- colors = theme.colors,
34
- spacing = theme.spacing,
35
- typography = theme.typography,
36
- stacking = theme.stacking,
37
- themeName = theme.key;
31
+ const {
32
+ borders,
33
+ colors,
34
+ spacing,
35
+ typography,
36
+ stacking,
37
+ key: themeName
38
+ } = theme;
38
39
  const themeSpecificStyle = {
39
40
  canvas: {
40
41
  colorPrimary: theme['ic-brand-primary']
41
42
  }
42
43
  };
43
44
  const componentVariables = {
44
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
46
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
47
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
48
- colorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.red4570,
49
- colorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.green4570,
50
- colorPrimary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
51
- colorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey4570,
45
+ fontFamily: typography?.fontFamily,
46
+ fontWeight: typography?.fontWeightNormal,
47
+ color: colors?.contrasts?.white1010,
48
+ fontSize: typography?.fontSizeXSmall,
49
+ colorDanger: colors?.contrasts?.red4570,
50
+ colorSuccess: colors?.contrasts?.green4570,
51
+ colorPrimary: colors?.contrasts?.blue4570,
52
+ colorInverse: colors?.contrasts?.grey4570,
52
53
  size: '1.25rem',
53
54
  countOffset: '0.5rem',
54
55
  notificationOffset: '0.125rem',
55
- notificationZIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above,
56
- sizeNotification: spacing === null || spacing === void 0 ? void 0 : spacing.small,
56
+ notificationZIndex: stacking?.above,
57
+ sizeNotification: spacing?.small,
57
58
  borderRadius: '999rem',
58
- padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
59
- pulseBorderThickness: borders === null || borders === void 0 ? void 0 : borders.widthMedium
59
+ padding: spacing?.xxSmall,
60
+ pulseBorderThickness: borders?.widthMedium
60
61
  };
61
62
  return {
62
63
  ...componentVariables,
package/es/Badge/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class, _Badge;
1
+ var _dec, _dec2, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -35,41 +35,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
35
35
  category: components
36
36
  ---
37
37
  **/
38
- let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Badge = class Badge extends Component {
38
+ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = class Badge extends Component {
39
+ static displayName = "Badge";
40
+ static componentId = 'Badge';
41
+ static allowedProps = allowedProps;
42
+ static defaultProps = {
43
+ standalone: false,
44
+ type: 'count',
45
+ variant: 'primary',
46
+ display: 'inline-block',
47
+ pulse: false,
48
+ placement: 'top end',
49
+ elementRef: () => {},
50
+ formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
51
+ };
39
52
  constructor(props) {
40
53
  super(props);
41
- this._defaultId = void 0;
42
- this.ref = null;
43
- this.handleRef = el => {
44
- const elementRef = this.props.elementRef;
45
- this.ref = el;
46
- if (typeof elementRef === 'function') {
47
- elementRef(el);
48
- }
49
- };
50
54
  this._defaultId = this.props.deterministicId();
51
55
  }
56
+ _defaultId;
57
+ ref = null;
58
+ handleRef = el => {
59
+ const {
60
+ elementRef
61
+ } = this.props;
62
+ this.ref = el;
63
+ if (typeof elementRef === 'function') {
64
+ elementRef(el);
65
+ }
66
+ };
52
67
  componentDidMount() {
53
- var _this$props$makeStyle, _this$props;
54
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
68
+ this.props.makeStyles?.();
55
69
  }
56
70
  componentDidUpdate() {
57
- var _this$props$makeStyle2, _this$props2;
58
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
71
+ this.props.makeStyles?.();
59
72
  }
60
73
  countOverflow() {
61
- const _this$props3 = this.props,
62
- count = _this$props3.count,
63
- countUntil = _this$props3.countUntil;
74
+ const {
75
+ count,
76
+ countUntil
77
+ } = this.props;
64
78
  return countUntil && count && countUntil > 1 && count >= countUntil;
65
79
  }
66
80
  renderOutput() {
67
- const _this$props4 = this.props,
68
- count = _this$props4.count,
69
- countUntil = _this$props4.countUntil,
70
- formatOverflowText = _this$props4.formatOverflowText,
71
- formatOutput = _this$props4.formatOutput,
72
- type = _this$props4.type;
81
+ const {
82
+ count,
83
+ countUntil,
84
+ formatOverflowText,
85
+ formatOutput,
86
+ type
87
+ } = this.props;
73
88
 
74
89
  // If the badge count is >= than the countUntil limit, format the badge text
75
90
  // via the formatOverflowText function prop
@@ -84,17 +99,18 @@ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
84
99
  }
85
100
  }
86
101
  renderBadge() {
87
- const _this$props5 = this.props,
88
- count = _this$props5.count,
89
- margin = _this$props5.margin,
90
- standalone = _this$props5.standalone,
91
- type = _this$props5.type,
92
- styles = _this$props5.styles;
102
+ const {
103
+ count,
104
+ margin,
105
+ standalone,
106
+ type,
107
+ styles
108
+ } = this.props;
93
109
  return _jsx(View, {
94
110
  margin: standalone ? margin : 'none',
95
- css: styles === null || styles === void 0 ? void 0 : styles.badge,
96
- title: type === 'count' && this.countOverflow() ? count === null || count === void 0 ? void 0 : count.toString() : '',
97
- id: !standalone ? this._defaultId : void 0,
111
+ css: styles?.badge,
112
+ title: type === 'count' && this.countOverflow() ? count?.toString() : '',
113
+ id: !standalone ? this._defaultId : undefined,
98
114
  display: standalone ? 'inline-block' : 'block',
99
115
  ...(standalone && {
100
116
  elementRef: this.handleRef,
@@ -111,12 +127,13 @@ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
111
127
  });
112
128
  }
113
129
  render() {
114
- const _this$props6 = this.props,
115
- margin = _this$props6.margin,
116
- standalone = _this$props6.standalone,
117
- display = _this$props6.display,
118
- as = _this$props6.as,
119
- styles = _this$props6.styles;
130
+ const {
131
+ margin,
132
+ standalone,
133
+ display,
134
+ as,
135
+ styles
136
+ } = this.props;
120
137
  if (standalone) {
121
138
  return this.renderBadge();
122
139
  } else {
@@ -124,22 +141,13 @@ let Badge = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _de
124
141
  as: as,
125
142
  margin: margin,
126
143
  elementRef: this.handleRef,
127
- css: styles === null || styles === void 0 ? void 0 : styles.wrapper,
144
+ css: styles?.wrapper,
128
145
  display: display,
129
146
  "data-cid": "Badge",
130
147
  children: [this.renderChildren(), this.renderBadge()]
131
148
  });
132
149
  }
133
150
  }
134
- }, _Badge.displayName = "Badge", _Badge.componentId = 'Badge', _Badge.allowedProps = allowedProps, _Badge.defaultProps = {
135
- standalone: false,
136
- type: 'count',
137
- variant: 'primary',
138
- display: 'inline-block',
139
- pulse: false,
140
- placement: 'top end',
141
- elementRef: () => {},
142
- formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
143
- }, _Badge)) || _class) || _class);
151
+ }) || _class) || _class);
144
152
  export default Badge;
145
153
  export { Badge };
package/es/Badge/v2/styles.js CHANGED
@@ -42,12 +42,13 @@ const pulseAnimation = keyframes`
42
42
  * @return {Object} The final style object, which will be used in the component
43
43
  */
44
44
  const generateStyle = (componentTheme, props) => {
45
- const type = props.type,
46
- variant = props.variant,
47
- _props$placement = props.placement,
48
- placement = _props$placement === void 0 ? '' : _props$placement,
49
- standalone = props.standalone,
50
- pulse = props.pulse;
45
+ const {
46
+ type,
47
+ variant,
48
+ placement = '',
49
+ standalone,
50
+ pulse
51
+ } = props;
51
52
  const top = placement.indexOf('top') > -1;
52
53
  const bottom = placement.indexOf('bottom') > -1;
53
54
  const start = placement.indexOf('start') > -1;
package/lib/Badge/v1/index.js CHANGED
@@ -14,7 +14,7 @@ var _styles = _interopRequireDefault(require("./styles"));
14
14
  var _theme = _interopRequireDefault(require("./theme"));
15
15
  var _props = require("./props");
16
16
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
- var _dec, _dec2, _class, _Badge;
17
+ var _dec, _dec2, _class;
18
18
  /*
19
19
  * The MIT License (MIT)
20
20
  *
@@ -43,41 +43,56 @@ var _dec, _dec2, _class, _Badge;
43
43
  category: components
44
44
  ---
45
45
  **/
46
- let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Badge = class Badge extends _react.Component {
46
+ let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Badge extends _react.Component {
47
+ static displayName = "Badge";
48
+ static componentId = 'Badge';
49
+ static allowedProps = _props.allowedProps;
50
+ static defaultProps = {
51
+ standalone: false,
52
+ type: 'count',
53
+ variant: 'primary',
54
+ display: 'inline-block',
55
+ pulse: false,
56
+ placement: 'top end',
57
+ elementRef: () => {},
58
+ formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
59
+ };
47
60
  constructor(props) {
48
61
  super(props);
49
- this._defaultId = void 0;
50
- this.ref = null;
51
- this.handleRef = el => {
52
- const elementRef = this.props.elementRef;
53
- this.ref = el;
54
- if (typeof elementRef === 'function') {
55
- elementRef(el);
56
- }
57
- };
58
62
  this._defaultId = this.props.deterministicId();
59
63
  }
64
+ _defaultId;
65
+ ref = null;
66
+ handleRef = el => {
67
+ const {
68
+ elementRef
69
+ } = this.props;
70
+ this.ref = el;
71
+ if (typeof elementRef === 'function') {
72
+ elementRef(el);
73
+ }
74
+ };
60
75
  componentDidMount() {
61
- var _this$props$makeStyle, _this$props;
62
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
76
+ this.props.makeStyles?.();
63
77
  }
64
78
  componentDidUpdate() {
65
- var _this$props$makeStyle2, _this$props2;
66
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
79
+ this.props.makeStyles?.();
67
80
  }
68
81
  countOverflow() {
69
- const _this$props3 = this.props,
70
- count = _this$props3.count,
71
- countUntil = _this$props3.countUntil;
82
+ const {
83
+ count,
84
+ countUntil
85
+ } = this.props;
72
86
  return countUntil && count && countUntil > 1 && count >= countUntil;
73
87
  }
74
88
  renderOutput() {
75
- const _this$props4 = this.props,
76
- count = _this$props4.count,
77
- countUntil = _this$props4.countUntil,
78
- formatOverflowText = _this$props4.formatOverflowText,
79
- formatOutput = _this$props4.formatOutput,
80
- type = _this$props4.type;
89
+ const {
90
+ count,
91
+ countUntil,
92
+ formatOverflowText,
93
+ formatOutput,
94
+ type
95
+ } = this.props;
81
96
 
82
97
  // If the badge count is >= than the countUntil limit, format the badge text
83
98
  // via the formatOverflowText function prop
@@ -92,17 +107,18 @@ let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId
92
107
  }
93
108
  }
94
109
  renderBadge() {
95
- const _this$props5 = this.props,
96
- count = _this$props5.count,
97
- margin = _this$props5.margin,
98
- standalone = _this$props5.standalone,
99
- type = _this$props5.type,
100
- styles = _this$props5.styles;
110
+ const {
111
+ count,
112
+ margin,
113
+ standalone,
114
+ type,
115
+ styles
116
+ } = this.props;
101
117
  return (0, _jsxRuntime.jsx)(_v11_.View, {
102
118
  margin: standalone ? margin : 'none',
103
- css: styles === null || styles === void 0 ? void 0 : styles.badge,
104
- title: type === 'count' && this.countOverflow() ? count === null || count === void 0 ? void 0 : count.toString() : '',
105
- id: !standalone ? this._defaultId : void 0,
119
+ css: styles?.badge,
120
+ title: type === 'count' && this.countOverflow() ? count?.toString() : '',
121
+ id: !standalone ? this._defaultId : undefined,
106
122
  display: standalone ? 'inline-block' : 'block',
107
123
  ...(standalone && {
108
124
  elementRef: this.handleRef,
@@ -119,12 +135,13 @@ let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId
119
135
  });
120
136
  }
121
137
  render() {
122
- const _this$props6 = this.props,
123
- margin = _this$props6.margin,
124
- standalone = _this$props6.standalone,
125
- display = _this$props6.display,
126
- as = _this$props6.as,
127
- styles = _this$props6.styles;
138
+ const {
139
+ margin,
140
+ standalone,
141
+ display,
142
+ as,
143
+ styles
144
+ } = this.props;
128
145
  if (standalone) {
129
146
  return this.renderBadge();
130
147
  } else {
@@ -132,21 +149,12 @@ let Badge = exports.Badge = (_dec = (0, _withDeterministicId.withDeterministicId
132
149
  as: as,
133
150
  margin: margin,
134
151
  elementRef: this.handleRef,
135
- css: styles === null || styles === void 0 ? void 0 : styles.wrapper,
152
+ css: styles?.wrapper,
136
153
  display: display,
137
154
  "data-cid": "Badge",
138
155
  children: [this.renderChildren(), this.renderBadge()]
139
156
  });
140
157
  }
141
158
  }
142
- }, _Badge.displayName = "Badge", _Badge.componentId = 'Badge', _Badge.allowedProps = _props.allowedProps, _Badge.defaultProps = {
143
- standalone: false,
144
- type: 'count',
145
- variant: 'primary',
146
- display: 'inline-block',
147
- pulse: false,
148
- placement: 'top end',
149
- elementRef: () => {},
150
- formatOverflowText: (_count, countUntil) => `${countUntil - 1} +`
151
- }, _Badge)) || _class) || _class);
159
+ }) || _class) || _class);
152
160
  var _default = exports.default = Badge;
package/lib/Badge/v1/styles.js CHANGED
@@ -48,12 +48,13 @@ const pulseAnimation = (0, _emotion.keyframes)`
48
48
  * @return {Object} The final style object, which will be used in the component
49
49
  */
50
50
  const generateStyle = (componentTheme, props) => {
51
- const type = props.type,
52
- variant = props.variant,
53
- _props$placement = props.placement,
54
- placement = _props$placement === void 0 ? '' : _props$placement,
55
- standalone = props.standalone,
56
- pulse = props.pulse;
51
+ const {
52
+ type,
53
+ variant,
54
+ placement = '',
55
+ standalone,
56
+ pulse
57
+ } = props;
57
58
  const top = placement.indexOf('top') > -1;
58
59
  const bottom = placement.indexOf('bottom') > -1;
59
60
  const start = placement.indexOf('start') > -1;
package/lib/Badge/v1/theme.js CHANGED
@@ -34,35 +34,36 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
38
- const borders = theme.borders,
39
- colors = theme.colors,
40
- spacing = theme.spacing,
41
- typography = theme.typography,
42
- stacking = theme.stacking,
43
- themeName = theme.key;
37
+ const {
38
+ borders,
39
+ colors,
40
+ spacing,
41
+ typography,
42
+ stacking,
43
+ key: themeName
44
+ } = theme;
44
45
  const themeSpecificStyle = {
45
46
  canvas: {
46
47
  colorPrimary: theme['ic-brand-primary']
47
48
  }
48
49
  };
49
50
  const componentVariables = {
50
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
53
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
54
- colorDanger: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.red4570,
55
- colorSuccess: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.green4570,
56
- colorPrimary: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
57
- colorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey4570,
51
+ fontFamily: typography?.fontFamily,
52
+ fontWeight: typography?.fontWeightNormal,
53
+ color: colors?.contrasts?.white1010,
54
+ fontSize: typography?.fontSizeXSmall,
55
+ colorDanger: colors?.contrasts?.red4570,
56
+ colorSuccess: colors?.contrasts?.green4570,
57
+ colorPrimary: colors?.contrasts?.blue4570,
58
+ colorInverse: colors?.contrasts?.grey4570,
58
59
  size: '1.25rem',
59
60
  countOffset: '0.5rem',
60
61
  notificationOffset: '0.125rem',
61
- notificationZIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above,
62
- sizeNotification: spacing === null || spacing === void 0 ? void 0 : spacing.small,
62
+ notificationZIndex: stacking?.above,
63
+ sizeNotification: spacing?.small,
63
64
  borderRadius: '999rem',
64
- padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
65
- pulseBorderThickness: borders === null || borders === void 0 ? void 0 : borders.widthMedium
65
+ padding: spacing?.xxSmall,
66
+ pulseBorderThickness: borders?.widthMedium
66
67
  };
67
68
  return {
68
69
  ...componentVariables,