@instructure/ui-badge 8.12.1-snapshot.7 → 8.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/es/Badge/__examples__/Badge.examples.js +5 -0
  3. package/es/Badge/props.js +1 -1
  4. package/es/Badge/styles.js +33 -17
  5. package/es/Badge/theme.js +1 -0
  6. package/lib/Badge/__examples__/Badge.examples.js +5 -0
  7. package/lib/Badge/index.js +1 -1
  8. package/lib/Badge/props.js +2 -2
  9. package/lib/Badge/styles.js +33 -17
  10. package/lib/Badge/theme.js +1 -0
  11. package/package.json +15 -16
  12. package/src/Badge/README.md +48 -29
  13. package/src/Badge/__examples__/Badge.examples.tsx +10 -2
  14. package/src/Badge/props.ts +2 -2
  15. package/src/Badge/styles.ts +40 -13
  16. package/src/Badge/theme.ts +1 -0
  17. package/types/Badge/__examples__/Badge.examples.d.ts +3 -14
  18. package/types/Badge/__examples__/Badge.examples.d.ts.map +1 -1
  19. package/types/Badge/index.d.ts +2 -2
  20. package/types/Badge/props.d.ts +1 -1
  21. package/types/Badge/props.d.ts.map +1 -1
  22. package/types/Badge/styles.d.ts.map +1 -1
  23. package/types/Badge/theme.d.ts.map +1 -1
  24. package/LICENSE.md +0 -27
package/CHANGELOG.md CHANGED
@@ -3,6 +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
+ # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
7
+
8
+ ### Features
9
+
10
+ - **ui-badge:** add `inverse` variant to Badge ([036388d](https://github.com/instructure/instructure-ui/commit/036388de53addbf7a2ca8b20c48fda441057aa5e))
11
+
6
12
  # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
7
13
 
8
14
  **Note:** Version bump only for package @instructure/ui-badge
package/es/Badge/__examples__/Badge.examples.js CHANGED
@@ -44,5 +44,10 @@ export default {
44
44
  },
45
45
  filter: props => {
46
46
  return props.type === 'notification' && props.countUntil || props.standalone && props.placement !== 'start top';
47
+ },
48
+ getExampleProps: props => {
49
+ return props.variant === 'inverse' ? {
50
+ background: 'primary-inverse'
51
+ } : {};
47
52
  }
48
53
  };
package/es/Badge/props.js CHANGED
@@ -31,7 +31,7 @@ const propTypes = {
31
31
  type: PropTypes.oneOf(['count', 'notification']),
32
32
  standalone: PropTypes.bool,
33
33
  pulse: PropTypes.bool,
34
- variant: PropTypes.oneOf(['primary', 'success', 'danger']),
34
+ variant: PropTypes.oneOf(['primary', 'success', 'danger', 'inverse']),
35
35
  placement: PositionPropTypes.placement,
36
36
  margin: ThemeablePropTypes.spacing,
37
37
  elementRef: PropTypes.func,
package/es/Badge/styles.js CHANGED
@@ -51,26 +51,43 @@ const generateStyle = (componentTheme, props) => {
51
51
  const start = placement.indexOf('start') > -1;
52
52
  const end = placement.indexOf('end') > -1;
53
53
  const center = placement.indexOf('center') > -1;
54
- const variantVariants = {
54
+ const variants = {
55
55
  danger: {
56
- backgroundColor: componentTheme.colorDanger
56
+ badge: {
57
+ color: componentTheme.color,
58
+ backgroundColor: componentTheme.colorDanger
59
+ },
60
+ pulseBorder: {
61
+ borderColor: componentTheme.colorDanger
62
+ }
57
63
  },
58
64
  success: {
59
- backgroundColor: componentTheme.colorSuccess
65
+ badge: {
66
+ color: componentTheme.color,
67
+ backgroundColor: componentTheme.colorSuccess
68
+ },
69
+ pulseBorder: {
70
+ borderColor: componentTheme.colorSuccess
71
+ }
60
72
  },
61
73
  primary: {
62
- backgroundColor: componentTheme.colorPrimary
63
- }
64
- };
65
- const pulseBorderVariants = {
66
- danger: {
67
- borderColor: componentTheme.colorDanger
68
- },
69
- success: {
70
- borderColor: componentTheme.colorSuccess
74
+ badge: {
75
+ color: componentTheme.color,
76
+ backgroundColor: componentTheme.colorPrimary
77
+ },
78
+ pulseBorder: {
79
+ borderColor: componentTheme.colorPrimary
80
+ }
71
81
  },
72
- primary: {
73
- borderColor: componentTheme.colorPrimary
82
+ inverse: {
83
+ // text and background colors are swapped
84
+ badge: {
85
+ color: componentTheme.colorInverse,
86
+ backgroundColor: componentTheme.color
87
+ },
88
+ pulseBorder: {
89
+ borderColor: componentTheme.color
90
+ }
74
91
  }
75
92
  };
76
93
  const countPositions = { ...(top && {
@@ -151,11 +168,10 @@ const generateStyle = (componentTheme, props) => {
151
168
  boxSizing: 'border-box',
152
169
  pointerEvents: 'none',
153
170
  textAlign: 'center',
154
- color: componentTheme.color,
155
171
  fontSize: componentTheme.fontSize,
156
172
  whiteSpace: 'nowrap',
157
173
  borderRadius: componentTheme.borderRadius,
158
- ...variantVariants[variant],
174
+ ...variants[variant].badge,
159
175
  ...(pulse && {
160
176
  position: 'relative',
161
177
  '&::before': {
@@ -175,7 +191,7 @@ const generateStyle = (componentTheme, props) => {
175
191
  animationDuration: '1s',
176
192
  animationIterationCount: '4',
177
193
  animationDirection: 'alternate',
178
- ...pulseBorderVariants[variant]
194
+ ...variants[variant].pulseBorder
179
195
  }
180
196
  }),
181
197
  ...typeVariant[type],
package/es/Badge/theme.js CHANGED
@@ -47,6 +47,7 @@ const generateComponentTheme = theme => {
47
47
  colorDanger: colors === null || colors === void 0 ? void 0 : colors.textDanger,
48
48
  colorSuccess: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
49
49
  colorPrimary: colors === null || colors === void 0 ? void 0 : colors.textBrand,
50
+ colorInverse: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
50
51
  size: '1.25rem',
51
52
  countOffset: '0.5rem',
52
53
  notificationOffset: '0.125rem',
package/lib/Badge/__examples__/Badge.examples.js CHANGED
@@ -32,6 +32,11 @@ var _default = {
32
32
  },
33
33
  filter: props => {
34
34
  return props.type === 'notification' && props.countUntil || props.standalone && props.placement !== 'start top';
35
+ },
36
+ getExampleProps: props => {
37
+ return props.variant === 'inverse' ? {
38
+ background: 'primary-inverse'
39
+ } : {};
35
40
  }
36
41
  };
37
42
  exports.default = _default;
package/lib/Badge/index.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.Badge = exports.default = void 0;
8
+ exports.default = exports.Badge = void 0;
9
9
 
10
10
  var _react = require("react");
11
11
 
package/lib/Badge/props.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.allowedProps = exports.propTypes = void 0;
8
+ exports.propTypes = exports.allowedProps = void 0;
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
@@ -43,7 +43,7 @@ const propTypes = {
43
43
  type: _propTypes.default.oneOf(['count', 'notification']),
44
44
  standalone: _propTypes.default.bool,
45
45
  pulse: _propTypes.default.bool,
46
- variant: _propTypes.default.oneOf(['primary', 'success', 'danger']),
46
+ variant: _propTypes.default.oneOf(['primary', 'success', 'danger', 'inverse']),
47
47
  placement: _PositionPropTypes.PositionPropTypes.placement,
48
48
  margin: _emotion.ThemeablePropTypes.spacing,
49
49
  elementRef: _propTypes.default.func,
package/lib/Badge/styles.js CHANGED
@@ -59,26 +59,43 @@ const generateStyle = (componentTheme, props) => {
59
59
  const start = placement.indexOf('start') > -1;
60
60
  const end = placement.indexOf('end') > -1;
61
61
  const center = placement.indexOf('center') > -1;
62
- const variantVariants = {
62
+ const variants = {
63
63
  danger: {
64
- backgroundColor: componentTheme.colorDanger
64
+ badge: {
65
+ color: componentTheme.color,
66
+ backgroundColor: componentTheme.colorDanger
67
+ },
68
+ pulseBorder: {
69
+ borderColor: componentTheme.colorDanger
70
+ }
65
71
  },
66
72
  success: {
67
- backgroundColor: componentTheme.colorSuccess
73
+ badge: {
74
+ color: componentTheme.color,
75
+ backgroundColor: componentTheme.colorSuccess
76
+ },
77
+ pulseBorder: {
78
+ borderColor: componentTheme.colorSuccess
79
+ }
68
80
  },
69
81
  primary: {
70
- backgroundColor: componentTheme.colorPrimary
71
- }
72
- };
73
- const pulseBorderVariants = {
74
- danger: {
75
- borderColor: componentTheme.colorDanger
76
- },
77
- success: {
78
- borderColor: componentTheme.colorSuccess
82
+ badge: {
83
+ color: componentTheme.color,
84
+ backgroundColor: componentTheme.colorPrimary
85
+ },
86
+ pulseBorder: {
87
+ borderColor: componentTheme.colorPrimary
88
+ }
79
89
  },
80
- primary: {
81
- borderColor: componentTheme.colorPrimary
90
+ inverse: {
91
+ // text and background colors are swapped
92
+ badge: {
93
+ color: componentTheme.colorInverse,
94
+ backgroundColor: componentTheme.color
95
+ },
96
+ pulseBorder: {
97
+ borderColor: componentTheme.color
98
+ }
82
99
  }
83
100
  };
84
101
  const countPositions = { ...(top && {
@@ -159,11 +176,10 @@ const generateStyle = (componentTheme, props) => {
159
176
  boxSizing: 'border-box',
160
177
  pointerEvents: 'none',
161
178
  textAlign: 'center',
162
- color: componentTheme.color,
163
179
  fontSize: componentTheme.fontSize,
164
180
  whiteSpace: 'nowrap',
165
181
  borderRadius: componentTheme.borderRadius,
166
- ...variantVariants[variant],
182
+ ...variants[variant].badge,
167
183
  ...(pulse && {
168
184
  position: 'relative',
169
185
  '&::before': {
@@ -183,7 +199,7 @@ const generateStyle = (componentTheme, props) => {
183
199
  animationDuration: '1s',
184
200
  animationIterationCount: '4',
185
201
  animationDirection: 'alternate',
186
- ...pulseBorderVariants[variant]
202
+ ...variants[variant].pulseBorder
187
203
  }
188
204
  }),
189
205
  ...typeVariant[type],
package/lib/Badge/theme.js CHANGED
@@ -54,6 +54,7 @@ const generateComponentTheme = theme => {
54
54
  colorDanger: colors === null || colors === void 0 ? void 0 : colors.textDanger,
55
55
  colorSuccess: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
56
56
  colorPrimary: colors === null || colors === void 0 ? void 0 : colors.textBrand,
57
+ colorInverse: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
57
58
  size: '1.25rem',
58
59
  countOffset: '0.5rem',
59
60
  notificationOffset: '0.125rem',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-badge",
3
- "version": "8.12.1-snapshot.7+1e7ac8219",
3
+ "version": "8.13.0",
4
4
  "description": "A badge component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -25,22 +25,22 @@
25
25
  "license": "MIT",
26
26
  "dependencies": {
27
27
  "@babel/runtime": "^7.13.10",
28
- "@instructure/console": "8.12.1-snapshot.7+1e7ac8219",
29
- "@instructure/emotion": "8.12.1-snapshot.7+1e7ac8219",
30
- "@instructure/shared-types": "8.12.1-snapshot.7+1e7ac8219",
31
- "@instructure/ui-color-utils": "8.12.1-snapshot.7+1e7ac8219",
32
- "@instructure/ui-position": "8.12.1-snapshot.7+1e7ac8219",
33
- "@instructure/ui-react-utils": "8.12.1-snapshot.7+1e7ac8219",
34
- "@instructure/ui-testable": "8.12.1-snapshot.7+1e7ac8219",
35
- "@instructure/ui-view": "8.12.1-snapshot.7+1e7ac8219",
36
- "@instructure/uid": "8.12.1-snapshot.7+1e7ac8219",
28
+ "@instructure/console": "8.13.0",
29
+ "@instructure/emotion": "8.13.0",
30
+ "@instructure/shared-types": "8.13.0",
31
+ "@instructure/ui-color-utils": "8.13.0",
32
+ "@instructure/ui-position": "8.13.0",
33
+ "@instructure/ui-react-utils": "8.13.0",
34
+ "@instructure/ui-testable": "8.13.0",
35
+ "@instructure/ui-view": "8.13.0",
36
+ "@instructure/uid": "8.13.0",
37
37
  "prop-types": "^15"
38
38
  },
39
39
  "devDependencies": {
40
- "@instructure/ui-babel-preset": "8.12.1-snapshot.7+1e7ac8219",
41
- "@instructure/ui-test-locator": "8.12.1-snapshot.7+1e7ac8219",
42
- "@instructure/ui-test-utils": "8.12.1-snapshot.7+1e7ac8219",
43
- "@instructure/ui-themes": "8.12.1-snapshot.7+1e7ac8219"
40
+ "@instructure/ui-babel-preset": "8.13.0",
41
+ "@instructure/ui-test-locator": "8.13.0",
42
+ "@instructure/ui-test-utils": "8.13.0",
43
+ "@instructure/ui-themes": "8.13.0"
44
44
  },
45
45
  "peerDependencies": {
46
46
  "react": ">=16.8 <=17"
@@ -48,6 +48,5 @@
48
48
  "publishConfig": {
49
49
  "access": "public"
50
50
  },
51
- "sideEffects": false,
52
- "gitHead": "1e7ac821932a91fe9ef761c96f747c7ea1f3925a"
51
+ "sideEffects": false
53
52
  }
package/src/Badge/README.md CHANGED
@@ -3,6 +3,7 @@ describes: Badge
3
3
  ---
4
4
 
5
5
  ### Making badges accessible
6
+
6
7
  Badge counts are automatically fed to screenreaders through the `aria-describedby`
7
8
  attribute. Often a stand alone number doesn't give a screenreader user enough context (_"3" vs. "You have 3 unread emails"_).
8
9
  The examples below use the `formatOutput` prop to make the badge more screenreader-friendly.
@@ -78,40 +79,57 @@ Setting `type="notification"` will render small circles that should not contain
78
79
  example: true
79
80
  ---
80
81
  <div>
81
- <Badge standalone count={6} margin="0 small 0 0" />
82
- <Badge standalone variant="success" count={12} margin="0 small 0 0" />
83
- <Badge standalone variant="danger" count={18} countUntil={10} margin="0 small 0 0" />
84
- <Badge
85
- type="notification"
86
- standalone
87
- formatOutput={function () {
88
- return <ScreenReaderContent>This is a notification</ScreenReaderContent>
89
- }}
90
- margin="0 small 0 0"
91
- />
92
- <Badge
93
- variant="success"
94
- type="notification"
95
- standalone
96
- formatOutput={function () {
97
- return <ScreenReaderContent>This is a success notification</ScreenReaderContent>
98
- }}
99
- margin="0 small 0 0"
100
- />
101
- <Badge
102
- variant="danger"
103
- type="notification"
104
- standalone
105
- formatOutput={function () {
106
- return <ScreenReaderContent>This is a danger notification</ScreenReaderContent>
107
- }}
108
- />
82
+ <Flex padding='small' display='inline-flex' alignItems="center">
83
+ <Badge standalone count={6} margin='0 small 0 0' />
84
+ <Badge
85
+ type="notification"
86
+ standalone
87
+ formatOutput={function () {
88
+ return <ScreenReaderContent>This is a notification</ScreenReaderContent>
89
+ }}
90
+ />
91
+ </Flex>
92
+ <Flex padding='small' display='inline-flex' alignItems="center">
93
+ <Badge standalone variant="success" count={12} margin='0 small 0 0' />
94
+ <Badge
95
+ variant="success"
96
+ type="notification"
97
+ standalone
98
+ formatOutput={function () {
99
+ return <ScreenReaderContent>This is a success notification</ScreenReaderContent>
100
+ }}
101
+ />
102
+ </Flex>
103
+ <Flex padding='small' display='inline-flex' alignItems="center">
104
+ <Badge standalone variant="danger" count={18} countUntil={10} margin='0 small 0 0' />
105
+ <Badge
106
+ variant="danger"
107
+ type="notification"
108
+ standalone
109
+ formatOutput={function () {
110
+ return <ScreenReaderContent>This is a danger notification</ScreenReaderContent>
111
+ }}
112
+ />
113
+ </Flex>
114
+ <View display='inline-flex' background='primary-inverse'>
115
+ <Flex padding='small' display='inline-flex' alignItems="center" background='primary-inverse'>
116
+ <Badge standalone variant="inverse" count={8} margin='0 small 0 0' />
117
+ <Badge
118
+ variant="inverse"
119
+ type="notification"
120
+ standalone
121
+ formatOutput={function () {
122
+ return <ScreenReaderContent>This is a danger notification</ScreenReaderContent>
123
+ }}
124
+ />
125
+ </Flex>
126
+ </View>
109
127
  </div>
110
128
  ```
111
129
 
112
130
  ### Placement
113
131
 
114
- Default is `top end`. __Note that standalone badges can't be placed.__
132
+ Default is `top end`. **Note that standalone badges can't be placed.**
115
133
 
116
134
  ```js
117
135
  ---
@@ -214,6 +232,7 @@ const Example = () => (
214
232
 
215
233
  render(<Example />)
216
234
  ```
235
+
217
236
  ### Guidelines
218
237
 
219
238
  ```js
package/src/Badge/__examples__/Badge.examples.tsx CHANGED
@@ -23,7 +23,8 @@
23
23
  */
24
24
  import React from 'react'
25
25
  import { View } from '@instructure/ui-view'
26
- import { BadgeProps } from '../props'
26
+ import type { StoryConfig } from '@instructure/ui-test-utils'
27
+ import type { BadgeProps } from '../props'
27
28
 
28
29
  export default {
29
30
  sectionProp: 'variant',
@@ -44,5 +45,12 @@ export default {
44
45
  (props.type === 'notification' && props.countUntil) ||
45
46
  (props.standalone && props.placement !== 'start top')
46
47
  )
48
+ },
49
+ getExampleProps: (props) => {
50
+ return props.variant === 'inverse'
51
+ ? {
52
+ background: 'primary-inverse'
53
+ }
54
+ : {}
47
55
  }
48
- }
56
+ } as StoryConfig<BadgeProps>
package/src/Badge/props.ts CHANGED
@@ -62,7 +62,7 @@ type BadgeOwnProps = {
62
62
  * Make the Badge slowly pulse twice to get the user's attention.
63
63
  */
64
64
  pulse?: boolean
65
- variant?: 'primary' | 'success' | 'danger'
65
+ variant?: 'primary' | 'success' | 'danger' | 'inverse'
66
66
  /**
67
67
  * provides a reference to the underlying html root element
68
68
  */
@@ -98,7 +98,7 @@ const propTypes: PropValidators<PropKeys> = {
98
98
  type: PropTypes.oneOf(['count', 'notification']),
99
99
  standalone: PropTypes.bool,
100
100
  pulse: PropTypes.bool,
101
- variant: PropTypes.oneOf(['primary', 'success', 'danger']),
101
+ variant: PropTypes.oneOf(['primary', 'success', 'danger', 'inverse']),
102
102
  placement: PositionPropTypes.placement,
103
103
  margin: ThemeablePropTypes.spacing,
104
104
  elementRef: PropTypes.func,
package/src/Badge/styles.ts CHANGED
@@ -57,16 +57,44 @@ const generateStyle = (
57
57
  const end = placement.indexOf('end') > -1
58
58
  const center = placement.indexOf('center') > -1
59
59
 
60
- const variantVariants = {
61
- danger: { backgroundColor: componentTheme.colorDanger },
62
- success: { backgroundColor: componentTheme.colorSuccess },
63
- primary: { backgroundColor: componentTheme.colorPrimary }
64
- }
65
-
66
- const pulseBorderVariants = {
67
- danger: { borderColor: componentTheme.colorDanger },
68
- success: { borderColor: componentTheme.colorSuccess },
69
- primary: { borderColor: componentTheme.colorPrimary }
60
+ const variants = {
61
+ danger: {
62
+ badge: {
63
+ color: componentTheme.color,
64
+ backgroundColor: componentTheme.colorDanger
65
+ },
66
+ pulseBorder: {
67
+ borderColor: componentTheme.colorDanger
68
+ }
69
+ },
70
+ success: {
71
+ badge: {
72
+ color: componentTheme.color,
73
+ backgroundColor: componentTheme.colorSuccess
74
+ },
75
+ pulseBorder: {
76
+ borderColor: componentTheme.colorSuccess
77
+ }
78
+ },
79
+ primary: {
80
+ badge: {
81
+ color: componentTheme.color,
82
+ backgroundColor: componentTheme.colorPrimary
83
+ },
84
+ pulseBorder: {
85
+ borderColor: componentTheme.colorPrimary
86
+ }
87
+ },
88
+ inverse: {
89
+ // text and background colors are swapped
90
+ badge: {
91
+ color: componentTheme.colorInverse,
92
+ backgroundColor: componentTheme.color
93
+ },
94
+ pulseBorder: {
95
+ borderColor: componentTheme.color
96
+ }
97
+ }
70
98
  }
71
99
 
72
100
  const countPositions = {
@@ -147,12 +175,11 @@ const generateStyle = (
147
175
  boxSizing: 'border-box',
148
176
  pointerEvents: 'none',
149
177
  textAlign: 'center',
150
- color: componentTheme.color,
151
178
  fontSize: componentTheme.fontSize,
152
179
  whiteSpace: 'nowrap',
153
180
  borderRadius: componentTheme.borderRadius,
154
181
 
155
- ...variantVariants[variant!],
182
+ ...variants[variant!].badge,
156
183
 
157
184
  ...(pulse && {
158
185
  position: 'relative',
@@ -174,7 +201,7 @@ const generateStyle = (
174
201
  animationDuration: '1s',
175
202
  animationIterationCount: '4',
176
203
  animationDirection: 'alternate',
177
- ...pulseBorderVariants[variant!]
204
+ ...variants[variant!].pulseBorder
178
205
  }
179
206
  }),
180
207
 
package/src/Badge/theme.ts CHANGED
@@ -54,6 +54,7 @@ const generateComponentTheme = (theme: Theme): BadgeTheme => {
54
54
  colorDanger: colors?.textDanger,
55
55
  colorSuccess: colors?.textSuccess,
56
56
  colorPrimary: colors?.textBrand,
57
+ colorInverse: colors?.textDarkest,
57
58
  size: '1.25rem',
58
59
  countOffset: '0.5rem',
59
60
  notificationOffset: '0.125rem',
package/types/Badge/__examples__/Badge.examples.d.ts CHANGED
@@ -1,16 +1,5 @@
1
- /// <reference types="react" />
2
- import { BadgeProps } from '../props';
3
- declare const _default: {
4
- sectionProp: string;
5
- propValues: {
6
- placement: string[];
7
- countUntil: (number | null)[];
8
- };
9
- getComponentProps: () => {
10
- count: number;
11
- children: JSX.Element;
12
- };
13
- filter: (props: BadgeProps) => number | boolean | undefined;
14
- };
1
+ import type { StoryConfig } from '@instructure/ui-test-utils';
2
+ import type { BadgeProps } from '../props';
3
+ declare const _default: StoryConfig<BadgeProps>;
15
4
  export default _default;
16
5
  //# sourceMappingURL=Badge.examples.d.ts.map
package/types/Badge/__examples__/Badge.examples.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.examples.d.ts","sourceRoot":"","sources":["../../../src/Badge/__examples__/Badge.examples.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;oBAgBnB,UAAU;;AAd5B,wBAoBC"}
1
+ {"version":3,"file":"Badge.examples.d.ts","sourceRoot":"","sources":["../../../src/Badge/__examples__/Badge.examples.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;;AAE1C,wBA2B4B"}
package/types/Badge/index.d.ts CHANGED
@@ -17,7 +17,7 @@ declare class Badge extends Component<BadgeProps> {
17
17
  type?: "count" | "notification" | undefined;
18
18
  standalone?: boolean | undefined;
19
19
  pulse?: boolean | undefined;
20
- variant?: "primary" | "success" | "danger" | undefined;
20
+ variant?: "primary" | "success" | "danger" | "inverse" | undefined;
21
21
  elementRef?: ((element: Element | null) => void) | undefined;
22
22
  formatOverflowText?: ((count: number, countUntil: number) => string) | undefined;
23
23
  formatOutput?: ((formattedCount: string) => string | number | JSX.Element) | undefined;
@@ -32,7 +32,7 @@ declare class Badge extends Component<BadgeProps> {
32
32
  type?: "count" | "notification" | undefined;
33
33
  standalone?: boolean | undefined;
34
34
  pulse?: boolean | undefined;
35
- variant?: "primary" | "success" | "danger" | undefined;
35
+ variant?: "primary" | "success" | "danger" | "inverse" | undefined;
36
36
  elementRef?: ((element: Element | null) => void) | undefined;
37
37
  formatOverflowText?: ((count: number, countUntil: number) => string) | undefined;
38
38
  formatOutput?: ((formattedCount: string) => string | number | JSX.Element) | undefined;
package/types/Badge/props.d.ts CHANGED
@@ -25,7 +25,7 @@ declare type BadgeOwnProps = {
25
25
  * Make the Badge slowly pulse twice to get the user's attention.
26
26
  */
27
27
  pulse?: boolean;
28
- variant?: 'primary' | 'success' | 'danger';
28
+ variant?: 'primary' | 'success' | 'danger' | 'inverse';
29
29
  /**
30
30
  * provides a reference to the underlying html root element
31
31
  */
package/types/Badge/props.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Badge/props.ts"],"names":[],"mappings":";AA6BA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,cAAc,EACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,aAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,cAAc,CAAA;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;IAC1C;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,CAAA;IAClE,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IACxE,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB;;;;OAIG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,SAAS,EAAE,mBAAmB,CAAA;CAC/B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,aAAa,CAAA;AAEnC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AAExE,aAAK,UAAU,GAAG,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAcvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAcnB,CAAA;AAED,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Badge/props.ts"],"names":[],"mappings":";AA6BA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,cAAc,EACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,aAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,cAAc,CAAA;IAC/B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,CAAA;IAClE,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IACxE,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB;;;;OAIG;IACH,MAAM,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,SAAS,EAAE,mBAAmB,CAAA;CAC/B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,aAAa,CAAA;AAEnC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,UAAU,EAAE,UAAU,CAAC,CAAA;AAExE,aAAK,UAAU,GAAG,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAcvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAcnB,CAAA;AAED,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
package/types/Badge/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Badge/styles.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUrD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,UAAU,SACnB,UAAU,KAChB,UAkJF,CAAA;AAED,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Badge/styles.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAUrD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,UAAU,SACnB,UAAU,KAChB,UA6KF,CAAA;AAED,eAAe,aAAa,CAAA"}
package/types/Badge/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/Badge/theme.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,KAAK,EAAsB,MAAM,wBAAwB,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAEtD;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,UAAW,KAAK,KAAG,UAsC9C,CAAA;AAED,eAAe,sBAAsB,CAAA"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/Badge/theme.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,KAAK,EAAsB,MAAM,wBAAwB,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAEtD;;;;GAIG;AACH,QAAA,MAAM,sBAAsB,UAAW,KAAK,KAAG,UAuC9C,CAAA;AAED,eAAe,sBAAsB,CAAA"}
package/LICENSE.md DELETED
@@ -1,27 +0,0 @@
1
- ---
2
- title: The MIT License (MIT)
3
- category: Getting Started
4
- order: 9
5
- ---
6
-
7
- # The MIT License (MIT)
8
-
9
- Copyright (c) 2015 Instructure, Inc.
10
-
11
- **Permission is hereby granted, free of charge, to any person obtaining a copy
12
- of this software and associated documentation files (the "Software"), to deal
13
- in the Software without restriction, including without limitation the rights
14
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
- copies of the Software, and to permit persons to whom the Software is
16
- furnished to do so, subject to the following conditions.**
17
-
18
- The above copyright notice and this permission notice shall be included in all
19
- copies or substantial portions of the Software.
20
-
21
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
- SOFTWARE.