@momentum-design/components 0.2.2 → 0.4.0

package/dist/custom-elements.json

@@ -568,39 +568,54 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Text component, which helps creating a text element aligning with\nstyling.\n\nThe `type` attribute allows changing the type of text, like `heading-1`, etc.\n\nFor accessibility the `role` and `aria-level` on the component are going to be set\nautomatically based on the type e.g. heading-1 will lead to `role=\"heading\"` and `aria-level=1`.",
+          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
           "name": "Text",
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "FontType | undefined"
+                "text": "FontType"
               },
               "privacy": "public",
-              "description": "Text Type - defines how the text should be rendered\n\nPossible values: `heading-1` | `heading-2` | `heading-3` | `heading-4`\n| `heading-5` | `heading-6` | `heading-7` | `body-large` | `body-regular`\n| `body-small` | `image-title` | `label`;",
+              "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",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "handleTypeChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "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: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', 'span', 'div', 'section'.\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",
+              "reflects": true
             }
           ],
           "attributes": [
             {
               "name": "type",
               "type": {
-                "text": "FontType | undefined"
+                "text": "FontType"
               },
-              "description": "Text Type - defines how the text should be rendered\n\nPossible values: `heading-1` | `heading-2` | `heading-3` | `heading-4`\n| `heading-5` | `heading-6` | `heading-7` | `body-large` | `body-regular`\n| `body-small` | `image-title` | `label`;",
+              "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: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small', 'span', 'div', 'section'.\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"
             }
           ],
           "superclass": {
@@ -608,7 +623,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component, which helps creating a text element aligning with\n * styling.\n *\n * The `type` attribute allows changing the type of text, like `heading-1`, etc.\n *\n * For accessibility the `role` and `aria-level` on the component are going to be set\n * automatically based on the type e.g. heading-1 will lead to `role=\"heading\"` and `aria-level=1`.\n *\n * @tagname mdc-text\n */",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n */",
           "customElement": true
         }
       ],

package/dist/react/text/index.d.ts

@@ -1,14 +1,19 @@
 import Component from '../../components/text';
 /**
- * Text component, which helps creating a text element aligning with
- * styling.
+ * Text component for creating styled text elements.
+ * It has to be mounted within the ThemeProvider to access color and font tokens.
  *
- * The `type` attribute allows changing the type of text, like `heading-1`, etc.
+ * The `type` attribute allows changing the text style.
+ * The `tagname` attribute allows changing the tag name of the text element.
+ * The default tag name is `p`.
  *
- * For accessibility the `role` and `aria-level` on the component are going to be set
- * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
+ * The `tagname` attribute should be a valid HTML tag name.
+ * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.
+ *
+ * The styling is applied based on the `type` attribute.
  *
  * @tagname mdc-text
+ * @slot - Default slot for text content
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/text/index.js

@@ -6,15 +6,20 @@ const react_1 = require("@lit/react");
 const text_1 = tslib_1.__importDefault(require("../../components/text"));
 const text_constants_1 = require("../../components/text/text.constants");
 /**
- * Text component, which helps creating a text element aligning with
- * styling.
+ * Text component for creating styled text elements.
+ * It has to be mounted within the ThemeProvider to access color and font tokens.
  *
- * The `type` attribute allows changing the type of text, like `heading-1`, etc.
+ * The `type` attribute allows changing the text style.
+ * The `tagname` attribute allows changing the tag name of the text element.
+ * The default tag name is `p`.
  *
- * For accessibility the `role` and `aria-level` on the component are going to be set
- * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
+ * The `tagname` attribute should be a valid HTML tag name.
+ * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.
+ *
+ * The styling is applied based on the `type` attribute.
  *
  * @tagname mdc-text
+ * @slot - Default slot for text content
  */
 const reactWrapper = (0, react_1.createComponent)({
     tagName: text_constants_1.TAG_NAME,

package/package.json

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

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

@@ -1,20 +0,0 @@
-import { FontType } from './text.types';
-/**
- * Check if passed in type is a heading
- * @param type - type to check
- * @returns boolean, true if it is a heading
- */
-declare const isHeading: (type: FontType) => boolean;
-/**
- * Get corresponding aria-role to type
- * @param type - type to find corresponding role for
- * @returns role
- */
-declare const getRole: (type?: FontType) => "heading" | "paragraph" | null;
-/**
- * Get corresponding aria-level to type
- * @param type - type to find corresponding level for
- * @returns aria-level (has to be a number)
- */
-declare const getAriaLevel: (type?: FontType) => string | null;
-export { isHeading, getAriaLevel, getRole };

package/dist/components/text/text.utils.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRole = exports.getAriaLevel = exports.isHeading = void 0;
-/**
- * Split the passed in type and return the parts
- */
-const getTypeParts = (type) => {
-    const parts = type.split('-');
-    return { firstPart: parts[0], secondPart: parts[1] };
-};
-/**
- * Check if passed in type is a heading
- * @param type - type to check
- * @returns boolean, true if it is a heading
- */
-const isHeading = (type) => {
-    const { firstPart, secondPart } = getTypeParts(type);
-    return firstPart === 'heading' && +secondPart > 0 && +secondPart < 7;
-};
-exports.isHeading = isHeading;
-/**
- * Get corresponding aria-role to type
- * @param type - type to find corresponding role for
- * @returns role
- */
-const getRole = (type) => {
-    if (type) {
-        if (isHeading(type)) {
-            return 'heading';
-        }
-        return 'paragraph';
-    }
-    return null;
-};
-exports.getRole = getRole;
-/**
- * Get corresponding aria-level to type
- * @param type - type to find corresponding level for
- * @returns aria-level (has to be a number)
- */
-const getAriaLevel = (type) => {
-    if (type) {
-        if (isHeading(type)) {
-            const { secondPart } = getTypeParts(type);
-            return secondPart;
-        }
-    }
-    return null;
-};
-exports.getAriaLevel = getAriaLevel;