@momentum-design/components 0.3.0 → 0.4.1

Sign up to get free protection for your applications and to get access to all the features.
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