@momentum-design/components 0.2.2 → 0.4.0

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