@momentum-design/components 0.2.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/browser/index.js +248 -110
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/text/fonts.styles.js +211 -74
  4. package/dist/components/text/text.component.d.ts +54 -13
  5. package/dist/components/text/text.component.js +78 -16
  6. package/dist/components/text/text.constants.d.ts +8 -5
  7. package/dist/components/text/text.constants.js +50 -17
  8. package/dist/components/text/text.types.d.ts +2 -1
  9. package/dist/custom-elements.json +29 -14
  10. package/dist/react/text/index.d.ts +10 -5
  11. package/dist/react/text/index.js +10 -5
  12. package/package.json +1 -1
  13. package/dist/components/text/text.utils.d.ts +0 -20
  14. package/dist/components/text/text.utils.js +0 -50
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,69 @@
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
14
19
  */
15
20
  declare class Text extends Component {
16
21
  /**
17
- * Text Type - defines how the text should be rendered
22
+ * Specifies the text style to be applied.
23
+ *
24
+ * Acceptable values include:
25
+ *
26
+ * - 'body-small-regular'
27
+ * - 'body-small-medium'
28
+ * - 'body-small-bold'
29
+ * - 'body-midsize-regular'
30
+ * - 'body-midsize-medium'
31
+ * - 'body-midsize-bold'
32
+ * - 'body-large-regular'
33
+ * - 'body-large-medium'
34
+ * - 'body-large-bold'
35
+ * - 'body-small-regular-underline'
36
+ * - 'body-small-medium-underline'
37
+ * - 'body-midsize-regular-underline'
38
+ * - 'body-midsize-medium-underline'
39
+ * - 'body-large-regular-underline'
40
+ * - 'body-large-medium-underline'
41
+ * - 'heading-small-regular'
42
+ * - 'heading-small-medium'
43
+ * - 'heading-small-bold'
44
+ * - 'heading-midsize-regular'
45
+ * - 'heading-midsize-medium'
46
+ * - 'heading-midsize-bold'
47
+ * - 'heading-large-regular'
48
+ * - 'heading-large-medium'
49
+ * - 'heading-large-bold'
50
+ * - 'heading-xlarge-regular'
51
+ * - 'heading-xlarge-medium'
52
+ * - 'heading-xlarge-bold'
53
+ * - 'headline-small-light'
54
+ * - 'headline-small-regular'
55
+ */
56
+ type: FontType;
57
+ /**
58
+ * Specifies the HTML tag name for the text element. The default tag name is `p`.
59
+ * This attribute is optional. When set, it changes the tag name of the text element.
60
+ *
61
+ * Acceptable values include: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', 'span', 'div', 'section'.
18
62
  *
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`;
63
+ * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
64
+ * Note that the styling is determined by the `type` attribute.
22
65
  */
23
- type?: FontType;
24
- protected handleTypeChanged(): void;
25
- protected updated(changedProperties: Map<string, any>): void;
66
+ tagname?: ValidTextTags;
26
67
  render(): import("lit-html").TemplateResult<1>;
27
68
  static styles: Array<CSSResult>;
28
69
  }
package/dist/components/text/text.component.js CHANGED
@@ -5,31 +5,89 @@ 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
19
24
  */
20
25
  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
- }
26
+ constructor() {
27
+ super(...arguments);
28
+ /**
29
+ * Specifies the text style to be applied.
30
+ *
31
+ * Acceptable values include:
32
+ *
33
+ * - 'body-small-regular'
34
+ * - 'body-small-medium'
35
+ * - 'body-small-bold'
36
+ * - 'body-midsize-regular'
37
+ * - 'body-midsize-medium'
38
+ * - 'body-midsize-bold'
39
+ * - 'body-large-regular'
40
+ * - 'body-large-medium'
41
+ * - 'body-large-bold'
42
+ * - 'body-small-regular-underline'
43
+ * - 'body-small-medium-underline'
44
+ * - 'body-midsize-regular-underline'
45
+ * - 'body-midsize-medium-underline'
46
+ * - 'body-large-regular-underline'
47
+ * - 'body-large-medium-underline'
48
+ * - 'heading-small-regular'
49
+ * - 'heading-small-medium'
50
+ * - 'heading-small-bold'
51
+ * - 'heading-midsize-regular'
52
+ * - 'heading-midsize-medium'
53
+ * - 'heading-midsize-bold'
54
+ * - 'heading-large-regular'
55
+ * - 'heading-large-medium'
56
+ * - 'heading-large-bold'
57
+ * - 'heading-xlarge-regular'
58
+ * - 'heading-xlarge-medium'
59
+ * - 'heading-xlarge-bold'
60
+ * - 'headline-small-light'
61
+ * - 'headline-small-regular'
62
+ */
63
+ this.type = text_constants_1.DEFAULTS.TYPE;
64
+ /**
65
+ * Specifies the HTML tag name for the text element. The default tag name is `p`.
66
+ * This attribute is optional. When set, it changes the tag name of the text element.
67
+ *
68
+ * Acceptable values include: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', 'span', 'div', 'section'.
69
+ *
70
+ * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
71
+ * Note that the styling is determined by the `type` attribute.
72
+ */
73
+ this.tagname = text_constants_1.DEFAULTS.TAGNAME;
30
74
  }
31
75
  render() {
32
- return (0, lit_1.html) `<slot></slot>`;
76
+ // Lit does not support dynamically changing values for the tag name of a custom element.
77
+ // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
78
+ switch (this.tagname) {
79
+ case 'h1': return (0, lit_1.html) `<h1 part=${text_constants_1.PART_NAME}><slot></slot></h1>`;
80
+ case 'h2': return (0, lit_1.html) `<h2 part=${text_constants_1.PART_NAME}><slot></slot></h2>`;
81
+ case 'h3': return (0, lit_1.html) `<h3 part=${text_constants_1.PART_NAME}><slot></slot></h3>`;
82
+ case 'h4': return (0, lit_1.html) `<h4 part=${text_constants_1.PART_NAME}><slot></slot></h4>`;
83
+ case 'h5': return (0, lit_1.html) `<h5 part=${text_constants_1.PART_NAME}><slot></slot></h5>`;
84
+ case 'h6': return (0, lit_1.html) `<h6 part=${text_constants_1.PART_NAME}><slot></slot></h6>`;
85
+ case 'div': return (0, lit_1.html) `<div part=${text_constants_1.PART_NAME}><slot></slot></div>`;
86
+ case 'p': return (0, lit_1.html) `<p part=${text_constants_1.PART_NAME}><slot></slot></p>`;
87
+ case 'span': return (0, lit_1.html) `<span part=${text_constants_1.PART_NAME}><slot></slot></span>`;
88
+ case 'small': return (0, lit_1.html) `<small part=${text_constants_1.PART_NAME}><slot></slot></small>`;
89
+ default: return (0, lit_1.html) `<p part=${text_constants_1.PART_NAME}><slot></slot></p>`;
90
+ }
33
91
  }
34
92
  }
35
93
  Text.styles = [...models_1.Component.styles, ...text_styles_1.default];
@@ -37,4 +95,8 @@ tslib_1.__decorate([
37
95
  (0, decorators_js_1.property)({ attribute: 'type', reflect: true, type: String }),
38
96
  tslib_1.__metadata("design:type", String)
39
97
  ], Text.prototype, "type", void 0);
98
+ tslib_1.__decorate([
99
+ (0, decorators_js_1.property)({ attribute: 'tagname', reflect: true, type: String }),
100
+ tslib_1.__metadata("design:type", String)
101
+ ], Text.prototype, "tagname", void 0);
40
102
  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
- };
3
+ declare const PART_NAME = "text";
6
4
  declare const VALUES: {
7
5
  TYPE: Array<FontType>;
6
+ TAGNAME: Array<ValidTextTags>;
7
+ };
8
+ declare const DEFAULTS: {
9
+ TAGNAME: ValidTextTags;
10
+ TYPE: FontType;
8
11
  };
9
- export { TAG_NAME, DEFAULTS, VALUES };
12
+ export { TAG_NAME, DEFAULTS, VALUES, PART_NAME };
package/dist/components/text/text.constants.js CHANGED
@@ -1,28 +1,61 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
3
+ exports.PART_NAME = exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
4
4
  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;
8
+ const PART_NAME = 'text';
9
+ exports.PART_NAME = PART_NAME;
12
10
  const VALUES = {
13
11
  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',
12
+ 'body-small-regular',
13
+ 'body-small-medium',
14
+ 'body-small-bold',
15
+ 'body-midsize-regular',
16
+ 'body-midsize-medium',
17
+ 'body-midsize-bold',
18
+ 'body-large-regular',
19
+ 'body-large-medium',
20
+ 'body-large-bold',
21
+ 'body-small-regular-underline',
22
+ 'body-small-medium-underline',
23
+ 'body-midsize-regular-underline',
24
+ 'body-midsize-medium-underline',
25
+ 'body-large-regular-underline',
26
+ 'body-large-medium-underline',
27
+ 'heading-small-regular',
28
+ 'heading-small-medium',
29
+ 'heading-small-bold',
30
+ 'heading-midsize-regular',
31
+ 'heading-midsize-medium',
32
+ 'heading-midsize-bold',
33
+ 'heading-large-regular',
34
+ 'heading-large-medium',
35
+ 'heading-large-bold',
36
+ 'heading-xlarge-regular',
37
+ 'heading-xlarge-medium',
38
+ 'heading-xlarge-bold',
39
+ 'headline-small-light',
40
+ 'headline-small-regular',
41
+ ],
42
+ TAGNAME: [
43
+ 'h1',
44
+ 'h2',
45
+ 'h3',
46
+ 'h4',
47
+ 'h5',
48
+ 'h6',
49
+ 'p',
50
+ 'small',
51
+ 'span',
52
+ 'div',
53
+ 'section',
26
54
  ],
27
55
  };
28
56
  exports.VALUES = VALUES;
57
+ const DEFAULTS = {
58
+ TAGNAME: 'p',
59
+ TYPE: 'body-midsize-regular',
60
+ };
61
+ 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';