@momentum-design/components 0.9.5 → 0.9.6

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 (23) hide show
  1. package/dist/browser/index.js +236 -27
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/button/button.component.d.ts +227 -0
  4. package/dist/components/button/button.component.js +438 -0
  5. package/dist/components/button/button.constants.d.ts +46 -0
  6. package/dist/components/button/button.constants.js +44 -0
  7. package/dist/components/button/button.styles.d.ts +2 -0
  8. package/dist/components/button/button.styles.js +195 -0
  9. package/dist/components/button/button.types.d.ts +9 -0
  10. package/dist/components/button/button.types.js +1 -0
  11. package/dist/components/button/button.utils.d.ts +16 -0
  12. package/dist/components/button/button.utils.js +27 -0
  13. package/dist/components/button/index.d.ts +8 -0
  14. package/dist/components/button/index.js +5 -0
  15. package/dist/custom-elements.json +439 -0
  16. package/dist/index.d.ts +2 -1
  17. package/dist/index.js +2 -1
  18. package/dist/react/button/index.d.ts +35 -0
  19. package/dist/react/button/index.js +44 -0
  20. package/dist/react/index.d.ts +1 -0
  21. package/dist/react/index.js +1 -0
  22. package/dist/utils/styles/index.js +3 -1
  23. package/package.json +1 -1
package/dist/components/button/button.constants.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ declare const TAG_NAME: "mdc-button";
2
+ declare const BUTTON_VARIANTS: {
3
+ readonly PRIMARY: "primary";
4
+ readonly SECONDARY: "secondary";
5
+ readonly TERTIARY: "tertiary";
6
+ };
7
+ declare const PILL_BUTTON_SIZES: {
8
+ readonly 40: 40;
9
+ readonly 32: 32;
10
+ readonly 28: 28;
11
+ readonly 24: 24;
12
+ };
13
+ declare const ICON_BUTTON_SIZES: {
14
+ readonly 40: 40;
15
+ readonly 32: 32;
16
+ readonly 28: 28;
17
+ readonly 24: 24;
18
+ readonly 64: 64;
19
+ readonly 52: 52;
20
+ readonly 20: 20;
21
+ };
22
+ declare const BUTTON_COLORS: {
23
+ readonly POSITIVE: "positive";
24
+ readonly NEGATIVE: "negative";
25
+ readonly ACCENT: "accent";
26
+ readonly PROMOTIONAL: "promotional";
27
+ readonly DEFAULT: "default";
28
+ };
29
+ declare const BUTTON_TYPE_INTERNAL: {
30
+ readonly PILL: "pill";
31
+ readonly ICON: "icon";
32
+ readonly PILL_WITH_ICON: "pill-with-icon";
33
+ };
34
+ declare const BUTTON_TYPE: {
35
+ readonly BUTTON: "button";
36
+ readonly SUBMIT: "submit";
37
+ readonly RESET: "reset";
38
+ };
39
+ declare const DEFAULTS: {
40
+ VARIANT: "primary";
41
+ SIZE: 32;
42
+ COLOR: "default";
43
+ TYPE_INTERNAL: "icon";
44
+ TYPE: "button";
45
+ };
46
+ export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };
package/dist/components/button/button.constants.js ADDED
@@ -0,0 +1,44 @@
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('button');
3
+ const BUTTON_VARIANTS = {
4
+ PRIMARY: 'primary',
5
+ SECONDARY: 'secondary',
6
+ TERTIARY: 'tertiary',
7
+ };
8
+ const PILL_BUTTON_SIZES = {
9
+ 40: 40,
10
+ 32: 32,
11
+ 28: 28,
12
+ 24: 24,
13
+ };
14
+ const ICON_BUTTON_SIZES = {
15
+ 64: 64,
16
+ 52: 52,
17
+ 20: 20,
18
+ ...PILL_BUTTON_SIZES,
19
+ };
20
+ const BUTTON_COLORS = {
21
+ POSITIVE: 'positive',
22
+ NEGATIVE: 'negative',
23
+ ACCENT: 'accent',
24
+ PROMOTIONAL: 'promotional',
25
+ DEFAULT: 'default',
26
+ };
27
+ const BUTTON_TYPE_INTERNAL = {
28
+ PILL: 'pill',
29
+ ICON: 'icon',
30
+ PILL_WITH_ICON: 'pill-with-icon',
31
+ };
32
+ const BUTTON_TYPE = {
33
+ BUTTON: 'button',
34
+ SUBMIT: 'submit',
35
+ RESET: 'reset',
36
+ };
37
+ const DEFAULTS = {
38
+ VARIANT: BUTTON_VARIANTS.PRIMARY,
39
+ SIZE: PILL_BUTTON_SIZES[32],
40
+ COLOR: BUTTON_COLORS.DEFAULT,
41
+ TYPE_INTERNAL: BUTTON_TYPE_INTERNAL.ICON,
42
+ TYPE: BUTTON_TYPE.BUTTON,
43
+ };
44
+ export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };
package/dist/components/button/button.styles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const styles: import("lit").CSSResult[];
2
+ export default styles;
package/dist/components/button/button.styles.js ADDED
@@ -0,0 +1,195 @@
1
+ import { css } from 'lit';
2
+ import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
3
+ const styles = [hostFitContentStyles, css `
4
+ :host {
5
+ cursor: pointer;
6
+ border-radius: 1.25rem;
7
+ font-weight: var(--mds-font-apps-body-large-medium-font-weight);
8
+ outline: none;
9
+ border: 0.0625rem solid transparent;
10
+
11
+ --mdc-button-primary-color: var(--mds-color-theme-inverted-text-primary-normal);
12
+ --mdc-button-primary-background-color: var(--mds-color-theme-button-primary-normal);
13
+ --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-primary-hover);
14
+ --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-primary-pressed);
15
+ --mdc-button-primary-disabled-background-color: var(--mds-color-theme-button-primary-disabled);
16
+ --mdc-button-primary-disabled-color: var(--mds-color-theme-text-primary-disabled);
17
+
18
+ --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
19
+ --mdc-button-secondary-border-color: var(--mds-color-theme-outline-button-normal);
20
+ --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
21
+ --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
22
+ --mdc-button-secondary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
23
+ --mdc-button-secondary-disabled-color: var(--mds-color-theme-text-primary-disabled);
24
+ --mdc-button-secondary-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
25
+
26
+ --mdc-button-tertiary-color: var(--mds-color-theme-text-primary-normal);
27
+ --mdc-button-tertiary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
28
+ --mdc-button-tertiary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
29
+ --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
30
+ --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
31
+
32
+ --mdc-button-height-size-64: 4rem;
33
+ --mdc-button-height-size-52: 3.25rem;
34
+ --mdc-button-height-size-40: 2.5rem;
35
+ --mdc-button-height-size-32: 2rem;
36
+ --mdc-button-height-size-28: 1.75rem;
37
+ --mdc-button-height-size-24: 1.5rem;
38
+ --mdc-button-height-size-20: 1.25rem;
39
+
40
+ --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
41
+ --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
42
+ --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
43
+ --mdc-button-line-height-size-24: var(--mds-font-lineheight-body-small);
44
+ }
45
+
46
+ :host([active]){
47
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
48
+ }
49
+
50
+
51
+ :host([variant="primary"]){
52
+ background: var(--mdc-button-primary-background-color);
53
+ color: var(--mdc-button-primary-color);
54
+ }
55
+ :host([variant="primary"]:hover){
56
+ background: var(--mdc-button-primary-hover-background-color);
57
+ }
58
+ :host([variant="primary"]:active), :host([variant="primary"].pressed){
59
+ background: var(--mdc-button-primary-pressed-background-color);
60
+ }
61
+ :host([variant="primary"][disabled]), :host([variant="primary"][soft-disabled]){
62
+ background: var(--mdc-button-primary-disabled-background-color);
63
+ color: var(--mdc-button-primary-disabled-color);
64
+ cursor: auto;
65
+ }
66
+
67
+ :host([variant="secondary"]){
68
+ color: var(--mdc-button-secondary-color);
69
+ border-color: var(--mdc-button-secondary-border-color);
70
+ }
71
+ :host([variant="secondary"]:hover){
72
+ background: var(--mdc-button-secondary-hover-background-color);
73
+ }
74
+ :host([variant="secondary"]:active), :host([variant="secondary"].pressed){
75
+ background: var(--mdc-button-secondary-pressed-background-color);
76
+ }
77
+ :host([variant="secondary"][disabled]),
78
+ :host([variant="secondary"][soft-disabled]){
79
+ color: var(--mdc-button-primary-disabled-color);
80
+ border-color: var(--mdc-button-secondary-disabled-border-color);
81
+ background: var(--mdc-button-secondary-disabled-background-color);
82
+ cursor: auto;
83
+ }
84
+
85
+ :host([variant="tertiary"]){
86
+ border-color: transparent;
87
+ color: var(--mdc-button-tertiary-color);
88
+ }
89
+ :host([variant="tertiary"]:hover){
90
+ background: var(--mdc-button-tertiary-hover-background-color);
91
+ }
92
+ :host([variant="tertiary"]:active), :host([variant="tertiary"].pressed){
93
+ background: var(--mdc-button-tertiary-pressed-background-color);
94
+ }
95
+ :host([variant="tertiary"][disabled]),
96
+ :host([variant="tertiary"][soft-disabled]){
97
+ color: var(--mdc-button-tertiary-disabled-color);
98
+ background: var(--mdc-button-tertiary-disabled-background-color);
99
+ cursor: auto;
100
+ }
101
+
102
+ :host([size="64"].mdc-icon-button),
103
+ :host([size="52"].mdc-icon-button),
104
+ :host([size="40"].mdc-icon-button),
105
+ :host([size="32"].mdc-icon-button),
106
+ :host([size="28"].mdc-icon-button),
107
+ :host([size="24"].mdc-icon-button){
108
+ border-radius: 6.25rem;
109
+ aspect-ratio: 1;
110
+ padding: unset;
111
+ }
112
+ :host([size="64"]){
113
+ height: var(--mdc-button-height-size-64);
114
+ }
115
+ :host([size="52"]){
116
+ height: var(--mdc-button-height-size-52);
117
+ }
118
+ :host([size="40"]){
119
+ height: var(--mdc-button-height-size-40);
120
+ font-size: var(--mds-font-size-body-large);
121
+ line-height: var(--mdc-button-line-height-size-40);
122
+ padding: 0 1rem;
123
+ gap: 0.5rem;
124
+ }
125
+ :host([size="32"]){
126
+ height: var(--mdc-button-height-size-32);
127
+ font-size: var(--mds-font-size-body-large);
128
+ line-height: var(--mdc-button-line-height-size-32);
129
+ padding: 0 0.75rem;
130
+ gap: 0.375rem;
131
+ }
132
+ :host([size="28"]){
133
+ height: var(--mdc-button-height-size-28);
134
+ font-size: var(--mds-font-size-body-midsize);
135
+ line-height: var(--mdc-button-line-height-size-28);
136
+ padding: 0 0.75rem;
137
+ gap: 0.375rem;
138
+ }
139
+ :host([size="24"]){
140
+ height: var(--mdc-button-height-size-24);
141
+ font-size: var(--mds-font-size-body-small);
142
+ line-height: var(--mdc-button-line-height-size-24);
143
+ padding: 0 0.625rem;
144
+ gap: 0.25rem;
145
+ }
146
+ :host([size="20"]){
147
+ height: var(--mdc-button-height-size-20);
148
+ }
149
+
150
+ :host([color="accent"]){
151
+ --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
152
+ --mdc-button-primary-background-color: var(--mds-color-theme-button-accent-normal);
153
+ --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-accent-hover);
154
+ --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-accent-pressed);
155
+
156
+ --mdc-button-secondary-color: var(--mds-color-theme-text-accent-normal);
157
+ --mdc-button-secondary-border-color: var(--mds-color-theme-outline-theme-normal);
158
+ --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
159
+ --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
160
+ }
161
+ :host([color="positive"]){
162
+ --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
163
+ --mdc-button-primary-background-color: var(--mds-color-theme-button-join-normal);
164
+ --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-join-hover);
165
+ --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-join-pressed);
166
+
167
+ --mdc-button-secondary-color: var(--mds-color-theme-text-success-normal);
168
+ --mdc-button-secondary-border-color: var(--mds-color-theme-outline-join-normal);
169
+ --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
170
+ --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
171
+ }
172
+ :host([color="negative"]){
173
+ --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
174
+ --mdc-button-primary-background-color: var(--mds-color-theme-button-cancel-normal);
175
+ --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-cancel-hover);
176
+ --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-cancel-pressed);
177
+
178
+ --mdc-button-secondary-color: var(--mds-color-theme-text-error-normal);
179
+ --mdc-button-secondary-border-color: var(--mds-color-theme-outline-cancel-normal);
180
+ --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
181
+ --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
182
+ }
183
+ :host([color="promotional"]){
184
+ --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
185
+ --mdc-button-primary-background-color: var(--mds-color-theme-common-button-promotion-normal);
186
+ --mdc-button-primary-hover-background-color: var(--mds-color-theme-common-button-promotion-hover);
187
+ --mdc-button-primary-pressed-background-color: var(--mds-color-theme-common-button-promotion-active);
188
+
189
+ --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
190
+ --mdc-button-secondary-border-color: var(--mds-color-theme-outline-promotion-normal);
191
+ --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
192
+ --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
193
+ }
194
+ `, hostFocusRingStyles];
195
+ export default styles;
package/dist/components/button/button.types.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { ValueOf } from '../../utils/types';
2
+ import { BUTTON_COLORS, BUTTON_TYPE, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './button.constants';
3
+ type ButtonVariant = ValueOf<typeof BUTTON_VARIANTS>;
4
+ type PillButtonSize = ValueOf<typeof PILL_BUTTON_SIZES>;
5
+ type IconButtonSize = ValueOf<typeof ICON_BUTTON_SIZES>;
6
+ type ButtonTypeInternal = ValueOf<typeof BUTTON_TYPE_INTERNAL>;
7
+ type ButtonType = ValueOf<typeof BUTTON_TYPE>;
8
+ type ButtonColor = ValueOf<typeof BUTTON_COLORS>;
9
+ export { ButtonVariant, PillButtonSize, IconButtonSize, ButtonTypeInternal, ButtonType, ButtonColor, };
package/dist/components/button/button.types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/components/button/button.utils.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { IconButtonSize } from './button.types';
2
+ /**
3
+ * Returns the icon size multiplier based on the provided button size.
4
+ *
5
+ * @param size - The size of the button.
6
+ * @returns The multiplier for the icon size.
7
+ */
8
+ declare const getIconSize: (size: IconButtonSize) => number;
9
+ /**
10
+ * Returns the name of the icon without the style suffix.
11
+ *
12
+ * @param iconName - The name of the icon.
13
+ * @returns The name of the icon without the suffix.
14
+ */
15
+ declare const getIconNameWithoutStyle: (iconName: string) => string;
16
+ export { getIconSize, getIconNameWithoutStyle };
package/dist/components/button/button.utils.js ADDED
@@ -0,0 +1,27 @@
1
+ import { ICON_BUTTON_SIZES } from './button.constants';
2
+ /**
3
+ * Returns the icon size multiplier based on the provided button size.
4
+ *
5
+ * @param size - The size of the button.
6
+ * @returns The multiplier for the icon size.
7
+ */
8
+ const getIconSize = (size) => {
9
+ switch (size) {
10
+ case ICON_BUTTON_SIZES[64]: return 2;
11
+ case ICON_BUTTON_SIZES[52]: return 1.75;
12
+ case ICON_BUTTON_SIZES[40]: return 1.25;
13
+ default: return 1;
14
+ }
15
+ };
16
+ /**
17
+ * Returns the name of the icon without the style suffix.
18
+ *
19
+ * @param iconName - The name of the icon.
20
+ * @returns The name of the icon without the suffix.
21
+ */
22
+ const getIconNameWithoutStyle = (iconName) => {
23
+ const iconParts = iconName.split('-');
24
+ const variants = ['bold', 'filled', 'regular', 'light'];
25
+ return iconParts.filter((part) => !variants.includes(part)).join('-');
26
+ };
27
+ export { getIconSize, getIconNameWithoutStyle };
package/dist/components/button/index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import Button from './button.component';
2
+ import '../icon';
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ ['mdc-button']: Button;
6
+ }
7
+ }
8
+ export default Button;
package/dist/components/button/index.js ADDED
@@ -0,0 +1,5 @@
1
+ import Button from './button.component';
2
+ import { TAG_NAME } from './button.constants';
3
+ import '../icon';
4
+ Button.register(TAG_NAME);
5
+ export default Button;