@momentum-design/components 0.18.2 → 0.18.4
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/dist/browser/index.js +30 -39
- package/dist/browser/index.js.map +3 -3
- package/dist/components/badge/badge.component.d.ts +12 -0
- package/dist/components/badge/badge.component.js +12 -0
- package/dist/components/icon/icon.component.d.ts +12 -12
- package/dist/components/icon/icon.component.js +19 -40
- package/dist/components/icon/icon.styles.js +7 -4
- package/dist/components/icon/icon.utils.js +2 -0
- package/dist/components/presence/presence.component.d.ts +16 -0
- package/dist/components/presence/presence.component.js +16 -0
- package/dist/components/presence/presence.styles.js +0 -14
- package/dist/custom-elements.json +619 -529
- package/dist/react/badge/index.d.ts +12 -0
- package/dist/react/badge/index.js +12 -0
- package/dist/react/icon/index.d.ts +11 -2
- package/dist/react/icon/index.js +11 -2
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/presence/index.d.ts +16 -0
- package/dist/react/presence/index.js +16 -0
- package/dist/utils/styles/index.js +3 -0
- package/package.json +1 -1
@@ -20,6 +20,18 @@ import Component from '../../components/badge';
|
|
20
20
|
* @dependency mdc-text
|
21
21
|
*
|
22
22
|
* @tagname mdc-badge
|
23
|
+
*
|
24
|
+
* @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
|
25
|
+
* @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
|
26
|
+
* @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
|
27
|
+
* @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
|
28
|
+
* @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
|
29
|
+
* @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
|
30
|
+
* @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
|
31
|
+
* @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
|
32
|
+
* @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
|
33
|
+
* @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
|
34
|
+
* @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
|
23
35
|
*/
|
24
36
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
25
37
|
export default reactWrapper;
|
@@ -23,6 +23,18 @@ import { TAG_NAME } from '../../components/badge/badge.constants';
|
|
23
23
|
* @dependency mdc-text
|
24
24
|
*
|
25
25
|
* @tagname mdc-badge
|
26
|
+
*
|
27
|
+
* @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
|
28
|
+
* @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
|
29
|
+
* @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
|
30
|
+
* @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
|
31
|
+
* @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
|
32
|
+
* @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
|
33
|
+
* @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
|
34
|
+
* @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
|
35
|
+
* @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
|
36
|
+
* @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
|
37
|
+
* @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
|
26
38
|
*/
|
27
39
|
const reactWrapper = createComponent({
|
28
40
|
tagName: TAG_NAME,
|
@@ -17,7 +17,7 @@ import Component from '../../components/icon';
|
|
17
17
|
* if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
|
18
18
|
* `width: 1em; height: 1em`.
|
19
19
|
*
|
20
|
-
* Regarding accessibility, there are
|
20
|
+
* Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
|
21
21
|
*
|
22
22
|
* ### Decorative Icons
|
23
23
|
* - Decorative icons do not convey any essential information to the content of a page.
|
@@ -28,13 +28,22 @@ import Component from '../../components/icon';
|
|
28
28
|
* - Informative icons convey important information that is not adequately represented
|
29
29
|
* by surrounding text or components.
|
30
30
|
* - They provide valuable context and must be announced by assistive technologies.
|
31
|
-
* - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
|
31
|
+
* - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
|
32
32
|
* - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
|
33
33
|
* the role will be unset.
|
34
34
|
*
|
35
|
+
* ### Informative Standalone Icons
|
36
|
+
* - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
|
37
|
+
* have a Tooltip that describes what it means.
|
38
|
+
* - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
|
39
|
+
* and the `role` will be set to "img" automatically.
|
40
|
+
* - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
|
41
|
+
*
|
35
42
|
* @tagname mdc-icon
|
36
43
|
*
|
37
44
|
* @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
|
45
|
+
* @cssproperty --mdc-icon-size - Allows customization of the icon size.
|
46
|
+
* @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
|
38
47
|
*/
|
39
48
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
40
49
|
export default reactWrapper;
|
package/dist/react/icon/index.js
CHANGED
@@ -20,7 +20,7 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
|
|
20
20
|
* if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
|
21
21
|
* `width: 1em; height: 1em`.
|
22
22
|
*
|
23
|
-
* Regarding accessibility, there are
|
23
|
+
* Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.
|
24
24
|
*
|
25
25
|
* ### Decorative Icons
|
26
26
|
* - Decorative icons do not convey any essential information to the content of a page.
|
@@ -31,13 +31,22 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
|
|
31
31
|
* - Informative icons convey important information that is not adequately represented
|
32
32
|
* by surrounding text or components.
|
33
33
|
* - They provide valuable context and must be announced by assistive technologies.
|
34
|
-
* - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
|
34
|
+
* - For informative icons, an `aria-label` is required, and the `role` will be set to "img" automatically.
|
35
35
|
* - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
|
36
36
|
* the role will be unset.
|
37
37
|
*
|
38
|
+
* ### Informative Standalone Icons
|
39
|
+
* - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must
|
40
|
+
* have a Tooltip that describes what it means.
|
41
|
+
* - For informative standalone icons, an `aria-label` & `tabindex="0"` is required,
|
42
|
+
* and the `role` will be set to "img" automatically.
|
43
|
+
* - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**
|
44
|
+
*
|
38
45
|
* @tagname mdc-icon
|
39
46
|
*
|
40
47
|
* @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
|
48
|
+
* @cssproperty --mdc-icon-size - Allows customization of the icon size.
|
49
|
+
* @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
|
41
50
|
*/
|
42
51
|
const reactWrapper = createComponent({
|
43
52
|
tagName: TAG_NAME,
|
package/dist/react/index.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
export { default as Avatar } from './avatar';
|
2
|
-
export { default as AvatarButton } from './avatarbutton';
|
3
2
|
export { default as Badge } from './badge';
|
3
|
+
export { default as AvatarButton } from './avatarbutton';
|
4
4
|
export { default as Bullet } from './bullet';
|
5
5
|
export { default as Button } from './button';
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
package/dist/react/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
export { default as Avatar } from './avatar';
|
2
|
-
export { default as AvatarButton } from './avatarbutton';
|
3
2
|
export { default as Badge } from './badge';
|
3
|
+
export { default as AvatarButton } from './avatarbutton';
|
4
4
|
export { default as Bullet } from './bullet';
|
5
5
|
export { default as Button } from './button';
|
6
6
|
export { default as Buttonsimple } from './buttonsimple';
|
@@ -9,6 +9,22 @@ import Component from '../../components/presence';
|
|
9
9
|
* @dependency mdc-icon
|
10
10
|
*
|
11
11
|
* @tagname mdc-presence
|
12
|
+
*
|
13
|
+
* @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
|
14
|
+
* @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
|
15
|
+
* @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
|
16
|
+
* @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
|
17
|
+
* @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
|
18
|
+
* @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
|
19
|
+
* @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
|
20
|
+
* @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
|
21
|
+
* @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
|
22
|
+
* @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
|
23
|
+
* @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
|
24
|
+
* @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
|
25
|
+
* @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
|
26
|
+
* @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
|
27
|
+
* @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
|
12
28
|
*/
|
13
29
|
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
|
14
30
|
export default reactWrapper;
|
@@ -12,6 +12,22 @@ import { TAG_NAME } from '../../components/presence/presence.constants';
|
|
12
12
|
* @dependency mdc-icon
|
13
13
|
*
|
14
14
|
* @tagname mdc-presence
|
15
|
+
*
|
16
|
+
* @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
|
17
|
+
* @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
|
18
|
+
* @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
|
19
|
+
* @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
|
20
|
+
* @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
|
21
|
+
* @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
|
22
|
+
* @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
|
23
|
+
* @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
|
24
|
+
* @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
|
25
|
+
* @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
|
26
|
+
* @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
|
27
|
+
* @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
|
28
|
+
* @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
|
29
|
+
* @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
|
30
|
+
* @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
|
15
31
|
*/
|
16
32
|
const reactWrapper = createComponent({
|
17
33
|
tagName: TAG_NAME,
|
package/package.json
CHANGED