@momentum-design/components 0.1.8 → 0.1.10

package/dist/custom-elements.json

@@ -116,45 +116,27 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/icon/icon.component.js",
+      "path": "components/badge/badge.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Icon component, which has to be mounted inside of a `IconProvider`\ncomponent.\n\nThe `IconProvider` component defines where icons should be consumed from (`url`).\nThis `Icon` component accepts the `name` attribute, which will be\nthe file name of the icon to be loaded from the given `url`.\n\nOnce fetched, the icon will be mounted. If fetching wasn't successful,\nnothing will be shown.\n\nThe `size` attribute allows sizing the icon based on the provided\n`length-unit` attribute (which will either come from the IconProvider or\ncould be overridden per icon). For example:\nif `size = 1` and `length-unit = 'em'`, the size of the icon will be\n`width: 1em; height: 1em`.\n\nFor accessibility the `role` and `aria-label` of the icon can be set.",
-          "name": "Icon",
-          "members": [
-            {
-              "kind": "field",
-              "name": "iconData",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnitFromContext",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
+          "description": "",
+          "name": "Badge",
+          "slots": [
             {
-              "kind": "field",
-              "name": "sizeFromContext",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "private"
-            },
+              "description": "This is a default/unnamed slot",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "BadgeType | undefined"
               },
-              "description": "Name of the icon (= filename)",
-              "attribute": "name",
+              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
+              "attribute": "type",
               "reflects": true
             },
             {
@@ -163,7 +145,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Size of the icon (works in combination with length unit)",
+              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
               "attribute": "size"
             },
             {
@@ -172,79 +154,60 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "description": "Length unit attribute for scale\n\nDefault: `rem`",
               "attribute": "length-unit"
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "iconName",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Role attribute to be set for accessibility",
-              "attribute": "role"
+              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "attribute": "icon-name"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "text",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "iconProviderContext",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getIconData",
-              "privacy": "private",
-              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
+              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
+              "attribute": "text"
             },
             {
               "kind": "method",
               "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "setRoleOnIcon",
-              "privacy": "private"
+              "name": "iconTemplate"
             },
             {
               "kind": "method",
-              "name": "setAriaLabelOnIcon",
-              "privacy": "private"
+              "name": "textTemplate"
             },
             {
-              "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
+              "kind": "method",
+              "name": "warningTemplate"
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "BadgeType | undefined"
               },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
+              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
+              "fieldName": "type"
             },
             {
               "name": "size",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Size of the icon (works in combination with length unit)",
+              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
               "fieldName": "size"
             },
             {
@@ -252,34 +215,33 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "description": "Length unit attribute for scale\n\nDefault: `rem`",
               "fieldName": "lengthUnit"
             },
             {
-              "name": "role",
+              "name": "icon-name",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Role attribute to be set for accessibility",
-              "fieldName": "role"
+              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
             },
             {
-              "name": "aria-label",
+              "name": "text",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
+              "fieldName": "text"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component, which has to be mounted inside of a `IconProvider`\n * component.\n *\n * The `IconProvider` component defines where icons should be consumed from (`url`).\n * This `Icon` component accepts the `name` attribute, which will be\n * the file name of the icon to be loaded from the given `url`.\n *\n * Once fetched, the icon will be mounted. If fetching wasn't successful,\n * nothing will be shown.\n *\n * The `size` attribute allows sizing the icon based on the provided\n * `length-unit` attribute (which will either come from the IconProvider or\n * could be overridden per icon). For example:\n * if `size = 1` and `length-unit = 'em'`, the size of the icon will be\n * `width: 1em; height: 1em`.\n *\n * For accessibility the `role` and `aria-label` of the icon can be set.\n *\n * @tagname mdc-icon\n */",
+          "tagName": "mdc-badge",
+          "summary": "This is MyElement",
+          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
           "customElement": true
         }
       ],
@@ -288,35 +250,59 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
+            "name": "Badge",
+            "module": "components/badge/badge.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
+      "path": "components/icon/icon.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "Badge",
-          "slots": [
+          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.",
+          "name": "Icon",
+          "cssProperties": [
             {
-              "description": "This is a default/unnamed slot",
-              "name": ""
+              "description": "Allows customization of the default fill color.",
+              "name": "--mdc-icon-fill-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "iconData",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "HTMLElement | undefined"
               },
-              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
-              "attribute": "type",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnitFromContext",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "sizeFromContext",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
               "reflects": true
             },
             {
@@ -325,7 +311,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
+              "description": "Size of the icon (works in combination with length unit)",
               "attribute": "size"
             },
             {
@@ -334,60 +320,74 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
               "attribute": "length-unit"
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "ariaLabel",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
-              "attribute": "icon-name"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
             },
             {
               "kind": "field",
-              "name": "text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
-              "attribute": "text"
+              "name": "iconProviderContext",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getIconData",
+              "privacy": "private",
+              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
             },
             {
               "kind": "method",
               "name": "updateSize",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
             },
             {
               "kind": "method",
-              "name": "iconTemplate"
+              "name": "setRoleOnIcon",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "textTemplate"
+              "name": "setAriaHiddenOnIcon",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "warningTemplate"
+              "name": "setAriaLabelOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
             }
           ],
           "attributes": [
             {
-              "name": "type",
+              "name": "name",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | undefined"
               },
-              "description": "Type of the badge\nCan be `regular`, `icon`, `text` or `warning`\n\nDefault: `regular`",
-              "fieldName": "type"
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
             },
             {
               "name": "size",
               "type": {
                 "text": "number | undefined"
               },
-              "description": "Scale of the badge (works in combination with length unit)\n\nDefault: `1`",
+              "description": "Size of the icon (works in combination with length unit)",
               "fieldName": "size"
             },
             {
@@ -395,33 +395,25 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for scale\n\nDefault: `rem`",
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
               "fieldName": "lengthUnit"
             },
             {
-              "name": "icon-name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "If `type` is set to `icon`, attribute `iconName` can\nbe used to choose which icon should be shown\n\nIf no `iconName` is provided, no icon will be rendered.",
-              "fieldName": "iconName"
-            },
-            {
-              "name": "text",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "If `type` is set to `text`, attribute `text` can\nbe used to pass in any text to be displayed in the badge.",
-              "fieldName": "text"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-badge",
-          "summary": "This is MyElement",
-          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-badge\n */",
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
           "customElement": true
         }
       ],
@@ -430,8 +422,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "components/badge/badge.component.js"
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
           }
         }
       ]

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

@@ -1,24 +1,40 @@
 import Component from '../../components/icon';
 /**
- * Icon component, which has to be mounted inside of a `IconProvider`
- * component.
+ * Icon component that dynamically displays SVG icons based on a valid name.
  *
- * The `IconProvider` component defines where icons should be consumed from (`url`).
- * This `Icon` component accepts the `name` attribute, which will be
- * the file name of the icon to be loaded from the given `url`.
+ * This component must be mounted within an `IconProvider` component.
  *
- * Once fetched, the icon will be mounted. If fetching wasn't successful,
- * nothing will be shown.
+ * The `IconProvider` defines the source URL from which icons are consumed.
+ * The `Icon` component accepts a `name` attribute, which corresponds to
+ * the file name of the icon to be loaded from the specified URL.
  *
- * The `size` attribute allows sizing the icon based on the provided
- * `length-unit` attribute (which will either come from the IconProvider or
- * could be overridden per icon). For example:
- * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
+ * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,
+ * no icon will be displayed.
+ *
+ * The `size` attribute allows for dynamic sizing of the icon based on the provided
+ * `length-unit` attribute. This unit can either come from the `IconProvider`
+ * or can be overridden for each individual icon. For example:
+ * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * For accessibility the `role` and `aria-label` of the icon can be set.
+ * Regarding accessibility, there are two types of icons: decorative and informative.
+ *
+ * ### Decorative Icons
+ * - Decorative icons do not convey any essential information to the content of a page.
+ * - They should be hidden from screen readers (SR) to prevent confusion for users.
+ * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.
+ *
+ * ### Informative Icons
+ * - Informative icons convey important information that is not adequately represented
+ *   by surrounding text or components.
+ * - They provide valuable context and must be announced by assistive technologies.
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
+ *   the role will be unset.
  *
  * @tagname mdc-icon
+ *
+ * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/icon/index.js

@@ -6,25 +6,41 @@ const react_1 = require("@lit/react");
 const icon_1 = tslib_1.__importDefault(require("../../components/icon"));
 const icon_constants_1 = require("../../components/icon/icon.constants");
 /**
- * Icon component, which has to be mounted inside of a `IconProvider`
- * component.
+ * Icon component that dynamically displays SVG icons based on a valid name.
  *
- * The `IconProvider` component defines where icons should be consumed from (`url`).
- * This `Icon` component accepts the `name` attribute, which will be
- * the file name of the icon to be loaded from the given `url`.
+ * This component must be mounted within an `IconProvider` component.
  *
- * Once fetched, the icon will be mounted. If fetching wasn't successful,
- * nothing will be shown.
+ * The `IconProvider` defines the source URL from which icons are consumed.
+ * The `Icon` component accepts a `name` attribute, which corresponds to
+ * the file name of the icon to be loaded from the specified URL.
  *
- * The `size` attribute allows sizing the icon based on the provided
- * `length-unit` attribute (which will either come from the IconProvider or
- * could be overridden per icon). For example:
- * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
+ * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,
+ * no icon will be displayed.
+ *
+ * The `size` attribute allows for dynamic sizing of the icon based on the provided
+ * `length-unit` attribute. This unit can either come from the `IconProvider`
+ * or can be overridden for each individual icon. For example:
+ * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be
  * `width: 1em; height: 1em`.
  *
- * For accessibility the `role` and `aria-label` of the icon can be set.
+ * Regarding accessibility, there are two types of icons: decorative and informative.
+ *
+ * ### Decorative Icons
+ * - Decorative icons do not convey any essential information to the content of a page.
+ * - They should be hidden from screen readers (SR) to prevent confusion for users.
+ * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.
+ *
+ * ### Informative Icons
+ * - Informative icons convey important information that is not adequately represented
+ *   by surrounding text or components.
+ * - They provide valuable context and must be announced by assistive technologies.
+ * - For informative icons, an `aria-label` is required, and the `role` will be set to "img".
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
+ *   the role will be unset.
  *
  * @tagname mdc-icon
+ *
+ * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  */
 const reactWrapper = (0, react_1.createComponent)({
     tagName: icon_constants_1.TAG_NAME,

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as Icon } from './icon';
 export { default as Badge } from './badge';
+export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -3,13 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Badge = exports.Icon = exports.Avatar = void 0;
+exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Icon = exports.Badge = exports.Avatar = void 0;
 var avatar_1 = require("./avatar");
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
-var icon_1 = require("./icon");
-Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
 var badge_1 = require("./badge");
 Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
+var icon_1 = require("./icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
 var iconprovider_1 = require("./iconprovider");
 Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });
 var text_1 = require("./text");

package/package.json

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