@momentum-design/components 0.3.0 → 0.4.1

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 (22) hide show
  1. package/dist/browser/index.js +248 -110
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/iconprovider/iconprovider.component.d.ts +1 -1
  4. package/dist/components/iconprovider/iconprovider.component.js +1 -1
  5. package/dist/components/text/fonts.styles.js +211 -74
  6. package/dist/components/text/text.component.d.ts +56 -13
  7. package/dist/components/text/text.component.js +80 -16
  8. package/dist/components/text/text.constants.d.ts +7 -4
  9. package/dist/components/text/text.constants.js +48 -16
  10. package/dist/components/text/text.types.d.ts +2 -1
  11. package/dist/components/themeprovider/themeprovider.component.d.ts +1 -1
  12. package/dist/components/themeprovider/themeprovider.component.js +1 -1
  13. package/dist/custom-elements.json +39 -18
  14. package/dist/react/iconprovider/index.d.ts +1 -1
  15. package/dist/react/iconprovider/index.js +1 -1
  16. package/dist/react/text/index.d.ts +12 -5
  17. package/dist/react/text/index.js +12 -5
  18. package/dist/react/themeprovider/index.d.ts +1 -1
  19. package/dist/react/themeprovider/index.js +1 -1
  20. package/package.json +1 -1
  21. package/dist/components/text/text.utils.d.ts +0 -20
  22. package/dist/components/text/text.utils.js +0 -50
package/dist/components/iconprovider/iconprovider.component.d.ts CHANGED
@@ -10,7 +10,7 @@ import IconProviderContext from './iconprovider.context';
10
10
  *
11
11
  * @tagname mdc-iconprovider
12
12
  *
13
- * @slot default - children
13
+ * @slot - children
14
14
  */
15
15
  declare class IconProvider extends Provider<IconProviderContext> {
16
16
  constructor();
package/dist/components/iconprovider/iconprovider.component.js CHANGED
@@ -15,7 +15,7 @@ const iconprovider_constants_1 = require("./iconprovider.constants");
15
15
  *
16
16
  * @tagname mdc-iconprovider
17
17
  *
18
- * @slot default - children
18
+ * @slot - children
19
19
  */
20
20
  class IconProvider extends models_1.Provider {
21
21
  constructor() {
package/dist/components/text/fonts.styles.js CHANGED
@@ -2,99 +2,236 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.fontsStyles = void 0;
4
4
  const lit_1 = require("lit");
5
- // todo: change definition to tokens once available
6
5
  exports.fontsStyles = (0, lit_1.css) `
7
- :host([type="heading-1"]) {
8
- font-size: 7.5rem;
9
- font-style: normal;
10
- font-weight: 700;
11
- line-height: 125%; /* 9.375rem */
12
- text-transform: capitalize;
6
+ :host([type="headline-small-regular"])::part(text) {
7
+ font-size: var(--mds-font-apps-headline-small-regular-font-size);
8
+ font-weight: var(--mds-font-apps-headline-small-regular-font-weight);
9
+ line-height: var(--mds-font-apps-headline-small-regular-line-height);
10
+ text-decoration: var(--mds-font-apps-headline-small-regular-text-decoration);
11
+ text-transform: var(--mds-font-apps-headline-small-regular-text-case);
13
12
  }
14
13
 
15
- :host([type="heading-2"]) {
16
- font-size: 6rem;
17
- font-style: normal;
18
- font-weight: 700;
19
- line-height: 125%; /* 7.5rem */
20
- text-transform: capitalize;
14
+ :host([type="headline-small-light"])::part(text) {
15
+ font-size: var(--mds-font-apps-headline-small-light-font-size);
16
+ font-weight: var(--mds-font-apps-headline-small-light-font-weight);
17
+ line-height: var(--mds-font-apps-headline-small-light-line-height);
18
+ text-decoration: var(--mds-font-apps-headline-small-light-text-decoration);
19
+ text-transform: var(--mds-font-apps-headline-small-light-text-case);
21
20
  }
22
21
 
23
- :host([type="heading-3"]) {
24
- font-size: 3rem;
25
- font-style: normal;
26
- font-weight: 700;
27
- line-height: 125%; /* 3.75rem */
22
+ :host([type="heading-xlarge-bold"])::part(text) {
23
+ font-size: var(--mds-font-apps-heading-xlarge-bold-font-size);
24
+ font-weight: var(--mds-font-apps-heading-xlarge-bold-font-weight);
25
+ line-height: var(--mds-font-apps-heading-xlarge-bold-line-height);
26
+ text-decoration: var(--mds-font-apps-heading-xlarge-bold-text-decoration);
27
+ text-transform: var(--mds-font-apps-heading-xlarge-bold-text-case);
28
28
  }
29
-
30
- :host([type="heading-4"]) {
31
- font-size: 2.5rem;
32
- font-style: normal;
33
- font-weight: 700;
34
- line-height: 125%; /* 3.125rem */
29
+
30
+ :host([type="heading-xlarge-medium"])::part(text) {
31
+ font-size: var(--mds-font-apps-heading-xlarge-medium-font-size);
32
+ font-weight: var(--mds-font-apps-heading-xlarge-medium-font-weight);
33
+ line-height: var(--mds-font-apps-heading-xlarge-medium-line-height);
34
+ text-decoration: var(--mds-font-apps-heading-xlarge-medium-text-decoration);
35
+ text-transform: var(--mds-font-apps-heading-xlarge-medium-text-case);
35
36
  }
36
-
37
- :host([type="heading-5"]) {
38
- font-size: 2rem;
39
- font-style: normal;
40
- font-weight: 700;
41
- line-height: 125%; /* 2.5rem */
42
- letter-spacing: 0.5rem;
43
- text-transform: uppercase;
37
+
38
+ :host([type="heading-xlarge-regular"])::part(text) {
39
+ font-size: var(--mds-font-apps-heading-xlarge-regular-font-size);
40
+ font-weight: var(--mds-font-apps-heading-xlarge-regular-font-weight);
41
+ line-height: var(--mds-font-apps-heading-xlarge-regular-line-height);
42
+ text-decoration: var(--mds-font-apps-heading-xlarge-regular-text-decoration);
43
+ text-transform: var(--mds-font-apps-heading-xlarge-regular-text-case);
44
44
  }
45
45
 
46
- :host([type="heading-6"]) {
47
- font-size: 1.75rem;
48
- font-style: normal;
49
- font-weight: 700;
50
- line-height: 3rem; /* 171.429% */
46
+ :host([type="heading-large-bold"])::part(text) {
47
+ font-size: var(--mds-font-apps-heading-large-bold-font-size);
48
+ font-weight: var(--mds-font-apps-heading-large-bold-font-weight);
49
+ line-height: var(--mds-font-apps-heading-large-bold-line-height);
50
+ text-decoration: var(--mds-font-apps-heading-large-bold-text-decoration);
51
+ text-transform: var(--mds-font-apps-heading-large-bold-text-case);
51
52
  }
52
-
53
- :host([type="heading-7"]) {
54
- font-size: 1.5rem;
55
- font-style: normal;
56
- font-weight: 700;
57
- line-height: 140%; /* 2.1rem */
53
+
54
+ :host([type="heading-large-medium"])::part(text) {
55
+ font-size: var(--mds-font-apps-heading-large-medium-font-size);
56
+ font-weight: var(--mds-font-apps-heading-large-medium-font-weight);
57
+ line-height: var(--mds-font-apps-heading-large-medium-line-height);
58
+ text-decoration: var(--mds-font-apps-heading-large-medium-text-decoration);
59
+ text-transform: var(--mds-font-apps-heading-large-medium-text-case);
60
+ }
61
+
62
+ :host([type="heading-large-regular"])::part(text) {
63
+ font-size: var(--mds-font-apps-heading-large-regular-font-size);
64
+ font-weight: var(--mds-font-apps-heading-large-regular-font-weight);
65
+ line-height: var(--mds-font-apps-heading-large-regular-line-height);
66
+ text-decoration: var(--mds-font-apps-heading-large-regular-text-decoration);
67
+ text-transform: var(--mds-font-apps-heading-large-regular-text-case);
58
68
  }
59
69
 
60
- :host([type="body-large"]) {
61
- font-size: 2rem;
62
- font-style: normal;
63
- font-weight: 400;
64
- line-height: 150%; /* 3rem */
65
- margin-block-end: 1.875em; /* paragraph spacing, 30px */
70
+ :host([type="heading-midsize-bold"])::part(text) {
71
+ font-size: var(--mds-font-apps-heading-midsize-bold-font-size);
72
+ font-weight: var(--mds-font-apps-heading-midsize-bold-font-weight);
73
+ line-height: var(--mds-font-apps-heading-midsize-bold-line-height);
74
+ text-decoration: var(--mds-font-apps-heading-midsize-bold-text-decoration);
75
+ text-transform: var(--mds-font-apps-heading-midsize-bold-text-case);
76
+ }
77
+
78
+ :host([type="heading-midsize-medium"])::part(text) {
79
+ font-size: var(--mds-font-apps-heading-midsize-medium-font-size);
80
+ font-weight: var(--mds-font-apps-heading-midsize-medium-font-weight);
81
+ line-height: var(--mds-font-apps-heading-midsize-medium-line-height);
82
+ text-decoration: var(--mds-font-apps-heading-midsize-medium-text-decoration);
83
+ text-transform: var(--mds-font-apps-heading-midsize-medium-text-case);
84
+ }
85
+
86
+ :host([type="heading-midsize-regular"])::part(text) {
87
+ font-size: var(--mds-font-apps-heading-midsize-regular-font-size);
88
+ font-weight: var(--mds-font-apps-heading-midsize-regular-font-weight);
89
+ line-height: var(--mds-font-apps-heading-midsize-regular-line-height);
90
+ text-decoration: var(--mds-font-apps-heading-midsize-regular-text-decoration);
91
+ text-transform: var(--mds-font-apps-heading-midsize-regular-text-case);
66
92
  }
67
93
 
68
- :host([type="body-regular"]) {
69
- font-size: 1.5rem;
70
- font-style: normal;
71
- font-weight: 400;
72
- line-height: 150%; /* 2.25rem */
73
- margin-block-end: 1.5em; /* paragraph spacing, 24px */
94
+ :host([type="heading-small-bold"])::part(text) {
95
+ font-size: var(--mds-font-apps-heading-small-bold-font-size);
96
+ font-weight: var(--mds-font-apps-heading-small-bold-font-weight);
97
+ line-height: var(--mds-font-apps-heading-small-bold-line-height);
98
+ text-decoration: var(--mds-font-apps-heading-small-bold-text-decoration);
99
+ text-transform: var(--mds-font-apps-heading-small-bold-text-case);
100
+ }
101
+
102
+ :host([type="heading-small-medium"])::part(text) {
103
+ font-size: var(--mds-font-apps-heading-small-medium-font-size);
104
+ font-weight: var(--mds-font-apps-heading-small-medium-font-weight);
105
+ line-height: var(--mds-font-apps-heading-small-medium-line-height);
106
+ text-decoration: var(--mds-font-apps-heading-small-medium-text-decoration);
107
+ text-transform: var(--mds-font-apps-heading-small-medium-text-case);
108
+ }
109
+
110
+ :host([type="heading-small-regular"])::part(text) {
111
+ font-size: var(--mds-font-apps-heading-small-regular-font-size);
112
+ font-weight: var(--mds-font-apps-heading-small-regular-font-weight);
113
+ line-height: var(--mds-font-apps-heading-small-regular-line-height);
114
+ text-decoration: var(--mds-font-apps-heading-small-regular-text-decoration);
115
+ text-transform: var(--mds-font-apps-heading-small-regular-text-case);
74
116
  }
75
117
 
76
- :host([type="body-small"]) {
77
- font-size: 1.25rem;
78
- font-style: normal;
79
- font-weight: 400;
80
- line-height: 150%; /* 1.875rem */
81
- margin-block-end: 0.125rem; /* paragraph spacing, 2px */
118
+ :host([type="body-large-bold"])::part(text) {
119
+ font-size: var(--mds-font-apps-body-large-bold-font-size);
120
+ font-weight: var(--mds-font-apps-body-large-bold-font-weight);
121
+ line-height: var(--mds-font-apps-body-large-bold-line-height);
122
+ text-decoration: var(--mds-font-apps-body-large-bold-text-decoration);
123
+ text-transform: var(--mds-font-apps-body-large-bold-text-case);
124
+ }
125
+
126
+ :host([type="body-large-medium-underline"])::part(text) {
127
+ font-size: var(--mds-font-apps-body-large-medium-underline-font-size);
128
+ font-weight: var(--mds-font-apps-body-large-medium-underline-font-weight);
129
+ line-height: var(--mds-font-apps-body-large-medium-underline-line-height);
130
+ text-decoration: var(--mds-font-apps-body-large-medium-underline-text-decoration);
131
+ text-transform: var(--mds-font-apps-body-large-medium-underline-text-case);
132
+ }
133
+
134
+ :host([type="body-large-medium"])::part(text) {
135
+ font-size: var(--mds-font-apps-body-large-medium-font-size);
136
+ font-weight: var(--mds-font-apps-body-large-medium-font-weight);
137
+ line-height: var(--mds-font-apps-body-large-medium-line-height);
138
+ text-decoration: var(--mds-font-apps-body-large-medium-text-decoration);
139
+ text-transform: var(--mds-font-apps-body-large-medium-text-case);
140
+ }
141
+
142
+ :host([type="body-large-regular-underline"])::part(text) {
143
+ font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
144
+ font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
145
+ line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
146
+ text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
147
+ text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
148
+ }
149
+
150
+ :host([type="body-large-regular"])::part(text) {
151
+ font-size: var(--mds-font-apps-body-large-regular-font-size);
152
+ font-weight: var(--mds-font-apps-body-large-regular-font-weight);
153
+ line-height: var(--mds-font-apps-body-large-regular-line-height);
154
+ text-decoration: var(--mds-font-apps-body-large-regular-text-decoration);
155
+ text-transform: var(--mds-font-apps-body-large-regular-text-case);
82
156
  }
83
157
 
84
- :host([type="image-title"]) {
85
- font-size: 1rem;
86
- font-style: normal;
87
- font-weight: 700;
88
- line-height: 150%; /* 1.5rem */
89
- letter-spacing: 0.04rem;
90
- text-transform: uppercase;
158
+ :host([type="body-midsize-bold"])::part(text) {
159
+ font-size: var(--mds-font-apps-body-midsize-bold-font-size);
160
+ font-weight: var(--mds-font-apps-body-midsize-bold-font-weight);
161
+ line-height: var(--mds-font-apps-body-midsize-bold-line-height);
162
+ text-decoration: var(--mds-font-apps-body-midsize-bold-text-decoration);
163
+ text-transform: var(--mds-font-apps-body-midsize-bold-text-case);
164
+ }
165
+
166
+ :host([type="body-midsize-medium-underline"])::part(text) {
167
+ font-size: var(--mds-font-apps-body-midsize-medium-underline-font-size);
168
+ font-weight: var(--mds-font-apps-body-midsize-medium-underline-font-weight);
169
+ line-height: var(--mds-font-apps-body-midsize-medium-underline-line-height);
170
+ text-decoration: var(--mds-font-apps-body-midsize-medium-underline-text-decoration);
171
+ text-transform: var(--mds-font-apps-body-midsize-medium-underline-text-case);
172
+ }
173
+
174
+ :host([type="body-midsize-medium"])::part(text) {
175
+ font-size: var(--mds-font-apps-body-midsize-medium-font-size);
176
+ font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
177
+ line-height: var(--mds-font-apps-body-midsize-medium-line-height);
178
+ text-decoration: var(--mds-font-apps-body-midsize-medium-text-decoration);
179
+ text-transform: var(--mds-font-apps-body-midsize-medium-text-case);
180
+ }
181
+
182
+ :host([type="body-midsize-regular-underline"])::part(text) {
183
+ font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
184
+ font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
185
+ line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
186
+ text-decoration: var(--mds-font-apps-body-midsize-regular-underline-text-decoration);
187
+ text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
188
+ }
189
+
190
+ :host([type="body-midsize-regular"])::part(text) {
191
+ font-size: var(--mds-font-apps-body-midsize-regular-font-size);
192
+ font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
193
+ line-height: var(--mds-font-apps-body-midsize-regular-line-height);
194
+ text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
195
+ text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
91
196
  }
92
197
 
93
- :host([type="label"]) {
94
- font-size: 1rem;
95
- font-style: normal;
96
- font-weight: 700;
97
- line-height: 150%; /* 1.5rem */
98
- letter-spacing: 0.02rem;
198
+ :host([type="body-small-bold"])::part(text) {
199
+ font-size: var(--mds-font-apps-body-small-bold-font-size);
200
+ font-weight: var(--mds-font-apps-body-small-bold-font-weight);
201
+ line-height: var(--mds-font-apps-body-small-bold-line-height);
202
+ text-decoration: var(--mds-font-apps-body-small-bold-text-decoration);
203
+ text-transform: var(--mds-font-apps-body-small-bold-text-case);
204
+ }
205
+
206
+ :host([type="body-small-medium-underline"])::part(text) {
207
+ font-size: var(--mds-font-apps-body-small-medium-underline-font-size);
208
+ font-weight: var(--mds-font-apps-body-small-medium-underline-font-weight);
209
+ line-height: var(--mds-font-apps-body-small-medium-underline-line-height);
210
+ text-decoration: var(--mds-font-apps-body-small-medium-underline-text-decoration);
211
+ text-transform: var(--mds-font-apps-body-small-medium-underline-text-case);
212
+ }
213
+
214
+ :host([type="body-small-medium"])::part(text) {
215
+ font-size: var(--mds-font-apps-body-small-medium-font-size);
216
+ font-weight: var(--mds-font-apps-body-small-medium-font-weight);
217
+ line-height: var(--mds-font-apps-body-small-medium-line-height);
218
+ text-decoration: var(--mds-font-apps-body-small-medium-text-decoration);
219
+ text-transform: var(--mds-font-apps-body-small-medium-text-case);
220
+ }
221
+
222
+ :host([type="body-small-regular-underline"])::part(text) {
223
+ font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
224
+ font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
225
+ line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
226
+ text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
227
+ text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
228
+ }
229
+
230
+ :host([type="body-small-regular"])::part(text) {
231
+ font-size: var(--mds-font-apps-body-small-regular-font-size);
232
+ font-weight: var(--mds-font-apps-body-small-regular-font-weight);
233
+ line-height: var(--mds-font-apps-body-small-regular-line-height);
234
+ text-decoration: var(--mds-font-apps-body-small-regular-text-decoration);
235
+ text-transform: var(--mds-font-apps-body-small-regular-text-case);
99
236
  }
100
237
  `;
package/dist/components/text/text.component.d.ts CHANGED
@@ -1,28 +1,71 @@
1
1
  import { CSSResult } from 'lit';
2
2
  import { Component } from '../../models';
3
- import type { FontType } from './text.types';
3
+ import type { FontType, ValidTextTags } from './text.types';
4
4
  /**
5
- * Text component, which helps creating a text element aligning with
6
- * styling.
5
+ * Text component for creating styled text elements.
6
+ * It has to be mounted within the ThemeProvider to access color and font tokens.
7
7
  *
8
- * The `type` attribute allows changing the type of text, like `heading-1`, etc.
8
+ * The `type` attribute allows changing the text style.
9
+ * The `tagname` attribute allows changing the tag name of the text element.
10
+ * The default tag name is `p`.
9
11
  *
10
- * For accessibility the `role` and `aria-level` on the component are going to be set
11
- * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
12
+ * The `tagname` attribute should be a valid HTML tag name.
13
+ * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.
14
+ *
15
+ * The styling is applied based on the `type` attribute.
12
16
  *
13
17
  * @tagname mdc-text
18
+ * @slot - Default slot for text content
19
+ *
20
+ * @csspart text - The text element
14
21
  */
15
22
  declare class Text extends Component {
16
23
  /**
17
- * Text Type - defines how the text should be rendered
24
+ * Specifies the text style to be applied.
25
+ *
26
+ * Acceptable values include:
27
+ *
28
+ * - 'body-small-regular'
29
+ * - 'body-small-medium'
30
+ * - 'body-small-bold'
31
+ * - 'body-midsize-regular'
32
+ * - 'body-midsize-medium'
33
+ * - 'body-midsize-bold'
34
+ * - 'body-large-regular'
35
+ * - 'body-large-medium'
36
+ * - 'body-large-bold'
37
+ * - 'body-small-regular-underline'
38
+ * - 'body-small-medium-underline'
39
+ * - 'body-midsize-regular-underline'
40
+ * - 'body-midsize-medium-underline'
41
+ * - 'body-large-regular-underline'
42
+ * - 'body-large-medium-underline'
43
+ * - 'heading-small-regular'
44
+ * - 'heading-small-medium'
45
+ * - 'heading-small-bold'
46
+ * - 'heading-midsize-regular'
47
+ * - 'heading-midsize-medium'
48
+ * - 'heading-midsize-bold'
49
+ * - 'heading-large-regular'
50
+ * - 'heading-large-medium'
51
+ * - 'heading-large-bold'
52
+ * - 'heading-xlarge-regular'
53
+ * - 'heading-xlarge-medium'
54
+ * - 'heading-xlarge-bold'
55
+ * - 'headline-small-light'
56
+ * - 'headline-small-regular'
57
+ */
58
+ type: FontType;
59
+ /**
60
+ * Specifies the HTML tag name for the text element. The default tag name is `p`.
61
+ * This attribute is optional. When set, it changes the tag name of the text element.
62
+ *
63
+ * Acceptable values include: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', 'span', 'div', 'section'.
18
64
  *
19
- * Possible values: `heading-1` | `heading-2` | `heading-3` | `heading-4`
20
- | `heading-5` | `heading-6` | `heading-7` | `body-large` | `body-regular`
21
- | `body-small` | `image-title` | `label`;
65
+ * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
66
+ * Note that the styling is determined by the `type` attribute.
22
67
  */
23
- type?: FontType;
24
- protected handleTypeChanged(): void;
25
- protected updated(changedProperties: Map<string, any>): void;
68
+ tagname?: ValidTextTags;
26
69
  render(): import("lit-html").TemplateResult<1>;
27
70
  static styles: Array<CSSResult>;
28
71
  }
package/dist/components/text/text.component.js CHANGED
@@ -5,31 +5,91 @@ const lit_1 = require("lit");
5
5
  const decorators_js_1 = require("lit/decorators.js");
6
6
  const text_styles_1 = tslib_1.__importDefault(require("./text.styles"));
7
7
  const models_1 = require("../../models");
8
- const text_utils_1 = require("./text.utils");
8
+ const text_constants_1 = require("./text.constants");
9
9
  /**
10
- * Text component, which helps creating a text element aligning with
11
- * styling.
10
+ * Text component for creating styled text elements.
11
+ * It has to be mounted within the ThemeProvider to access color and font tokens.
12
12
  *
13
- * The `type` attribute allows changing the type of text, like `heading-1`, etc.
13
+ * The `type` attribute allows changing the text style.
14
+ * The `tagname` attribute allows changing the tag name of the text element.
15
+ * The default tag name is `p`.
14
16
  *
15
- * For accessibility the `role` and `aria-level` on the component are going to be set
16
- * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
17
+ * The `tagname` attribute should be a valid HTML tag name.
18
+ * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.
19
+ *
20
+ * The styling is applied based on the `type` attribute.
17
21
  *
18
22
  * @tagname mdc-text
23
+ * @slot - Default slot for text content
24
+ *
25
+ * @csspart text - The text element
19
26
  */
20
27
  class Text extends models_1.Component {
21
- handleTypeChanged() {
22
- this.role = (0, text_utils_1.getRole)(this.type);
23
- this.ariaLevel = (0, text_utils_1.getAriaLevel)(this.type);
24
- }
25
- updated(changedProperties) {
26
- super.updated(changedProperties);
27
- if (changedProperties.has('type')) {
28
- this.handleTypeChanged();
29
- }
28
+ constructor() {
29
+ super(...arguments);
30
+ /**
31
+ * Specifies the text style to be applied.
32
+ *
33
+ * Acceptable values include:
34
+ *
35
+ * - 'body-small-regular'
36
+ * - 'body-small-medium'
37
+ * - 'body-small-bold'
38
+ * - 'body-midsize-regular'
39
+ * - 'body-midsize-medium'
40
+ * - 'body-midsize-bold'
41
+ * - 'body-large-regular'
42
+ * - 'body-large-medium'
43
+ * - 'body-large-bold'
44
+ * - 'body-small-regular-underline'
45
+ * - 'body-small-medium-underline'
46
+ * - 'body-midsize-regular-underline'
47
+ * - 'body-midsize-medium-underline'
48
+ * - 'body-large-regular-underline'
49
+ * - 'body-large-medium-underline'
50
+ * - 'heading-small-regular'
51
+ * - 'heading-small-medium'
52
+ * - 'heading-small-bold'
53
+ * - 'heading-midsize-regular'
54
+ * - 'heading-midsize-medium'
55
+ * - 'heading-midsize-bold'
56
+ * - 'heading-large-regular'
57
+ * - 'heading-large-medium'
58
+ * - 'heading-large-bold'
59
+ * - 'heading-xlarge-regular'
60
+ * - 'heading-xlarge-medium'
61
+ * - 'heading-xlarge-bold'
62
+ * - 'headline-small-light'
63
+ * - 'headline-small-regular'
64
+ */
65
+ this.type = text_constants_1.DEFAULTS.TYPE;
66
+ /**
67
+ * Specifies the HTML tag name for the text element. The default tag name is `p`.
68
+ * This attribute is optional. When set, it changes the tag name of the text element.
69
+ *
70
+ * Acceptable values include: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', 'span', 'div', 'section'.
71
+ *
72
+ * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
73
+ * Note that the styling is determined by the `type` attribute.
74
+ */
75
+ this.tagname = text_constants_1.DEFAULTS.TEXT_ELEMENT_TAGNAME;
30
76
  }
31
77
  render() {
32
- return (0, lit_1.html) `<slot></slot>`;
78
+ // Lit does not support dynamically changing values for the tag name of a custom element.
79
+ // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
80
+ switch (this.tagname) {
81
+ case 'h1': return (0, lit_1.html) `<h1 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
82
+ case 'h2': return (0, lit_1.html) `<h2 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
83
+ case 'h3': return (0, lit_1.html) `<h3 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
84
+ case 'h4': return (0, lit_1.html) `<h4 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
85
+ case 'h5': return (0, lit_1.html) `<h5 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
86
+ case 'h6': return (0, lit_1.html) `<h6 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
87
+ case 'div': return (0, lit_1.html) `<div part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
88
+ case 'span': return (0, lit_1.html) `<span part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
89
+ case 'small': return (0, lit_1.html) `<small part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
90
+ case 'p':
91
+ default: return (0, lit_1.html) `<p part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
92
+ }
33
93
  }
34
94
  }
35
95
  Text.styles = [...models_1.Component.styles, ...text_styles_1.default];
@@ -37,4 +97,8 @@ tslib_1.__decorate([
37
97
  (0, decorators_js_1.property)({ attribute: 'type', reflect: true, type: String }),
38
98
  tslib_1.__metadata("design:type", String)
39
99
  ], Text.prototype, "type", void 0);
100
+ tslib_1.__decorate([
101
+ (0, decorators_js_1.property)({ attribute: 'tagname', reflect: true, type: String }),
102
+ tslib_1.__metadata("design:type", String)
103
+ ], Text.prototype, "tagname", void 0);
40
104
  exports.default = Text;
package/dist/components/text/text.constants.d.ts CHANGED
@@ -1,9 +1,12 @@
1
- import type { FontType } from './text.types';
1
+ import type { FontType, ValidTextTags } from './text.types';
2
2
  declare const TAG_NAME: "mdc-text";
3
- declare const DEFAULTS: {
4
- TYPE: "body-regular";
5
- };
6
3
  declare const VALUES: {
7
4
  TYPE: Array<FontType>;
5
+ TAGNAME: Array<ValidTextTags>;
6
+ };
7
+ declare const DEFAULTS: {
8
+ TYPE: FontType;
9
+ TEXT_ELEMENT_TAGNAME: ValidTextTags;
10
+ CSS_PART_TEXT: string;
8
11
  };
9
12
  export { TAG_NAME, DEFAULTS, VALUES };
package/dist/components/text/text.constants.js CHANGED
@@ -5,24 +5,56 @@ const tslib_1 = require("tslib");
5
5
  const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
6
6
  const TAG_NAME = tag_name_1.default.constructTagName('text');
7
7
  exports.TAG_NAME = TAG_NAME;
8
- const DEFAULTS = {
9
- TYPE: 'body-regular',
10
- };
11
- exports.DEFAULTS = DEFAULTS;
12
8
  const VALUES = {
13
9
  TYPE: [
14
- 'heading-1',
15
- 'heading-2',
16
- 'heading-3',
17
- 'heading-4',
18
- 'heading-5',
19
- 'heading-6',
20
- 'heading-7',
21
- 'body-large',
22
- 'body-regular',
23
- 'body-small',
24
- 'image-title',
25
- 'label',
10
+ 'body-small-regular',
11
+ 'body-small-medium',
12
+ 'body-small-bold',
13
+ 'body-midsize-regular',
14
+ 'body-midsize-medium',
15
+ 'body-midsize-bold',
16
+ 'body-large-regular',
17
+ 'body-large-medium',
18
+ 'body-large-bold',
19
+ 'body-small-regular-underline',
20
+ 'body-small-medium-underline',
21
+ 'body-midsize-regular-underline',
22
+ 'body-midsize-medium-underline',
23
+ 'body-large-regular-underline',
24
+ 'body-large-medium-underline',
25
+ 'heading-small-regular',
26
+ 'heading-small-medium',
27
+ 'heading-small-bold',
28
+ 'heading-midsize-regular',
29
+ 'heading-midsize-medium',
30
+ 'heading-midsize-bold',
31
+ 'heading-large-regular',
32
+ 'heading-large-medium',
33
+ 'heading-large-bold',
34
+ 'heading-xlarge-regular',
35
+ 'heading-xlarge-medium',
36
+ 'heading-xlarge-bold',
37
+ 'headline-small-light',
38
+ 'headline-small-regular',
39
+ ],
40
+ TAGNAME: [
41
+ 'h1',
42
+ 'h2',
43
+ 'h3',
44
+ 'h4',
45
+ 'h5',
46
+ 'h6',
47
+ 'p',
48
+ 'small',
49
+ 'span',
50
+ 'div',
51
+ 'section',
26
52
  ],
27
53
  };
28
54
  exports.VALUES = VALUES;
55
+ const DEFAULTS = {
56
+ TYPE: 'body-midsize-regular',
57
+ TEXT_ELEMENT_TAGNAME: 'p',
58
+ CSS_PART_TEXT: 'text',
59
+ };
60
+ exports.DEFAULTS = DEFAULTS;
package/dist/components/text/text.types.d.ts CHANGED
@@ -1 +1,2 @@
1
- export type FontType = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6' | 'heading-7' | 'body-large' | 'body-regular' | 'body-small' | 'image-title' | 'label';
1
+ export type FontType = 'body-small-regular' | 'body-small-medium' | 'body-small-bold' | 'body-midsize-regular' | 'body-midsize-medium' | 'body-midsize-bold' | 'body-large-regular' | 'body-large-medium' | 'body-large-bold' | 'body-small-regular-underline' | 'body-small-medium-underline' | 'body-midsize-regular-underline' | 'body-midsize-medium-underline' | 'body-large-regular-underline' | 'body-large-medium-underline' | 'heading-small-regular' | 'heading-small-medium' | 'heading-small-bold' | 'heading-midsize-regular' | 'heading-midsize-medium' | 'heading-midsize-bold' | 'heading-large-regular' | 'heading-large-medium' | 'heading-large-bold' | 'heading-xlarge-regular' | 'heading-xlarge-medium' | 'heading-xlarge-bold' | 'headline-small-light' | 'headline-small-regular';
2
+ export type ValidTextTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'small' | 'span' | 'div' | 'section';
package/dist/components/themeprovider/themeprovider.component.d.ts CHANGED
@@ -15,7 +15,7 @@ import ThemeProviderContext from './themeprovider.context';
15
15
  *
16
16
  * @tagname mdc-themeprovider
17
17
  *
18
- * @slot default - children
18
+ * @slot - children
19
19
  *
20
20
  * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,
21
21
  * default: color-theme-text-primary-normal
package/dist/components/themeprovider/themeprovider.component.js CHANGED
@@ -20,7 +20,7 @@ const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.
20
20
  *
21
21
  * @tagname mdc-themeprovider
22
22
  *
23
- * @slot default - children
23
+ * @slot - children
24
24
  *
25
25
  * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,
26
26
  * default: color-theme-text-primary-normal