@momentum-design/components 0.4.15 → 0.4.17

package/dist/components/badge/badge.component.js

@@ -12,6 +12,7 @@ import { classMap } from 'lit-html/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+import { FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
 import styles from './badge.styles';
 /**
@@ -119,8 +120,8 @@ class Badge extends Component {
     getBadgeCounterText(maxCounter, overlay, counter) {
         return html `
       <mdc-text
-        type="body-small-medium"
-        tagname="div"
+        type="${FONT_TYPE.BODY_SMALL_MEDIUM}"
+        tagname="${VALID_TEXT_TAGS.DIV}"
         class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': overlay })}"
       >
         ${this.getCounterText(maxCounter, counter)}

package/dist/components/text/text.component.d.ts

@@ -1,6 +1,5 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
-import type { FontType, ValidTextTags } from './text.types';
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -55,7 +54,7 @@ declare class Text extends Component {
      * - 'headline-small-light'
      * - 'headline-small-regular'
      */
-    type: FontType;
+    type: string;
     /**
      * Specifies the HTML tag name for the text element. The default tag name is `p`.
      * This attribute is optional. When set, it changes the tag name of the text element.
@@ -76,7 +75,7 @@ declare class Text extends Component {
      * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
      * Note that the styling is determined by the `type` attribute.
      */
-    tagname?: ValidTextTags;
+    tagname?: string | undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/text/text.component.js

@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './text.styles';
 import { Component } from '../../models';
-import { DEFAULTS } from './text.constants';
+import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -95,16 +95,16 @@ class Text extends Component {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
         switch (this.tagname) {
-            case 'h1': return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
-            case 'h2': return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
-            case 'h3': return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
-            case 'h4': return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
-            case 'h5': return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
-            case 'h6': return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
-            case 'div': return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
-            case 'span': return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
-            case 'small': return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
-            case 'p':
+            case VALID_TEXT_TAGS.H1: return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
+            case VALID_TEXT_TAGS.H2: return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
+            case VALID_TEXT_TAGS.H3: return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
+            case VALID_TEXT_TAGS.H4: return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
+            case VALID_TEXT_TAGS.H5: return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
+            case VALID_TEXT_TAGS.H6: return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
+            case VALID_TEXT_TAGS.DIV: return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
+            case VALID_TEXT_TAGS.SPAN: return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
+            case VALID_TEXT_TAGS.SMALL: return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
+            case VALID_TEXT_TAGS.P:
             default: return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
         }
     }
@@ -112,10 +112,10 @@ class Text extends Component {
 Text.styles = [...Component.styles, ...styles];
 __decorate([
     property({ attribute: 'type', reflect: true, type: String }),
-    __metadata("design:type", String)
+    __metadata("design:type", Object)
 ], Text.prototype, "type", void 0);
 __decorate([
     property({ attribute: 'tagname', reflect: true, type: String }),
-    __metadata("design:type", String)
+    __metadata("design:type", Object)
 ], Text.prototype, "tagname", void 0);
 export default Text;

package/dist/components/text/text.constants.d.ts

@@ -1,12 +1,51 @@
-import type { FontType, ValidTextTags } from './text.types';
 declare const TAG_NAME: "mdc-text";
-declare const VALUES: {
-    TYPE: Array<FontType>;
-    TAGNAME: Array<ValidTextTags>;
+declare const FONT_TYPE: {
+    BODY_SMALL_REGULAR: string;
+    BODY_SMALL_MEDIUM: string;
+    BODY_SMALL_BOLD: string;
+    BODY_MIDSIZE_REGULAR: string;
+    BODY_MIDSIZE_MEDIUM: string;
+    BODY_MIDSIZE_BOLD: string;
+    BODY_LARGE_REGULAR: string;
+    BODY_LARGE_MEDIUM: string;
+    BODY_LARGE_BOLD: string;
+    BODY_SMALL_REGULAR_UNDERLINE: string;
+    BODY_SMALL_MEDIUM_UNDERLINE: string;
+    BODY_MIDSIZE_REGULAR_UNDERLINE: string;
+    BODY_MIDSIZE_MEDIUM_UNDERLINE: string;
+    BODY_LARGE_REGULAR_UNDERLINE: string;
+    BODY_LARGE_MEDIUM_UNDERLINE: string;
+    HEADING_SMALL_REGULAR: string;
+    HEADING_SMALL_MEDIUM: string;
+    HEADING_SMALL_BOLD: string;
+    HEADING_MIDSIZE_REGULAR: string;
+    HEADING_MIDSIZE_MEDIUM: string;
+    HEADING_MIDSIZE_BOLD: string;
+    HEADING_LARGE_REGULAR: string;
+    HEADING_LARGE_MEDIUM: string;
+    HEADING_LARGE_BOLD: string;
+    HEADING_XLARGE_REGULAR: string;
+    HEADING_XLARGE_MEDIUM: string;
+    HEADING_XLARGE_BOLD: string;
+    HEADLINE_SMALL_LIGHT: string;
+    HEADLINE_SMALL_REGULAR: string;
+};
+declare const VALID_TEXT_TAGS: {
+    H1: string;
+    H2: string;
+    H3: string;
+    H4: string;
+    H5: string;
+    H6: string;
+    P: string;
+    SMALL: string;
+    SPAN: string;
+    DIV: string;
 };
 declare const DEFAULTS: {
-    TYPE: FontType;
-    TEXT_ELEMENT_TAGNAME: ValidTextTags;
+    TYPE: string;
+    TEXT_ELEMENT_TAGNAME: string;
     CSS_PART_TEXT: string;
+    CHILDREN: string;
 };
-export { TAG_NAME, DEFAULTS, VALUES };
+export { TAG_NAME, DEFAULTS, FONT_TYPE, VALID_TEXT_TAGS };

package/dist/components/text/text.constants.js

@@ -1,53 +1,52 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('text');
-const VALUES = {
-    TYPE: [
-        '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',
-    ],
-    TAGNAME: [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'p',
-        'small',
-        'span',
-        'div',
-    ],
+const FONT_TYPE = {
+    BODY_SMALL_REGULAR: 'body-small-regular',
+    BODY_SMALL_MEDIUM: 'body-small-medium',
+    BODY_SMALL_BOLD: 'body-small-bold',
+    BODY_MIDSIZE_REGULAR: 'body-midsize-regular',
+    BODY_MIDSIZE_MEDIUM: 'body-midsize-medium',
+    BODY_MIDSIZE_BOLD: 'body-midsize-bold',
+    BODY_LARGE_REGULAR: 'body-large-regular',
+    BODY_LARGE_MEDIUM: 'body-large-medium',
+    BODY_LARGE_BOLD: 'body-large-bold',
+    BODY_SMALL_REGULAR_UNDERLINE: 'body-small-regular-underline',
+    BODY_SMALL_MEDIUM_UNDERLINE: 'body-small-medium-underline',
+    BODY_MIDSIZE_REGULAR_UNDERLINE: 'body-midsize-regular-underline',
+    BODY_MIDSIZE_MEDIUM_UNDERLINE: 'body-midsize-medium-underline',
+    BODY_LARGE_REGULAR_UNDERLINE: 'body-large-regular-underline',
+    BODY_LARGE_MEDIUM_UNDERLINE: 'body-large-medium-underline',
+    HEADING_SMALL_REGULAR: 'heading-small-regular',
+    HEADING_SMALL_MEDIUM: 'heading-small-medium',
+    HEADING_SMALL_BOLD: 'heading-small-bold',
+    HEADING_MIDSIZE_REGULAR: 'heading-midsize-regular',
+    HEADING_MIDSIZE_MEDIUM: 'heading-midsize-medium',
+    HEADING_MIDSIZE_BOLD: 'heading-midsize-bold',
+    HEADING_LARGE_REGULAR: 'heading-large-regular',
+    HEADING_LARGE_MEDIUM: 'heading-large-medium',
+    HEADING_LARGE_BOLD: 'heading-large-bold',
+    HEADING_XLARGE_REGULAR: 'heading-xlarge-regular',
+    HEADING_XLARGE_MEDIUM: 'heading-xlarge-medium',
+    HEADING_XLARGE_BOLD: 'heading-xlarge-bold',
+    HEADLINE_SMALL_LIGHT: 'headline-small-light',
+    HEADLINE_SMALL_REGULAR: 'headline-small-regular',
+};
+const VALID_TEXT_TAGS = {
+    H1: 'h1',
+    H2: 'h2',
+    H3: 'h3',
+    H4: 'h4',
+    H5: 'h5',
+    H6: 'h6',
+    P: 'p',
+    SMALL: 'small',
+    SPAN: 'span',
+    DIV: 'div',
 };
 const DEFAULTS = {
-    TYPE: 'body-midsize-regular',
-    TEXT_ELEMENT_TAGNAME: 'p',
+    TYPE: FONT_TYPE.BODY_LARGE_REGULAR,
+    TEXT_ELEMENT_TAGNAME: VALID_TEXT_TAGS.P,
     CSS_PART_TEXT: 'text',
+    CHILDREN: 'The quick brown fox jumps over the lazy dog',
 };
-export { TAG_NAME, DEFAULTS, VALUES };
+export { TAG_NAME, DEFAULTS, FONT_TYPE, VALID_TEXT_TAGS };

package/dist/custom-elements.json

@@ -765,9 +765,6 @@
             {
               "kind": "field",
               "name": "type",
-              "type": {
-                "text": "FontType"
-              },
               "privacy": "public",
               "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
               "attribute": "type",
@@ -776,9 +773,6 @@
             {
               "kind": "field",
               "name": "tagname",
-              "type": {
-                "text": "ValidTextTags | undefined"
-              },
               "privacy": "public",
               "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
               "attribute": "tagname",
@@ -788,17 +782,11 @@
           "attributes": [
             {
               "name": "type",
-              "type": {
-                "text": "FontType"
-              },
               "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
               "fieldName": "type"
             },
             {
               "name": "tagname",
-              "type": {
-                "text": "ValidTextTags | undefined"
-              },
               "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
               "fieldName": "tagname"
             }

package/package.json

@@ -37,5 +37,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.4.15"
+  "version": "0.4.17"
 }

package/dist/components/text/text.types.d.ts

@@ -1,2 +0,0 @@
-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';
-export type ValidTextTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'small' | 'span' | 'div';

package/dist/components/text/text.types.js

@@ -1 +0,0 @@
-export {};