@momentum-design/components 0.1.8 → 0.1.9

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

@@ -1,24 +1,40 @@
 import { Component } from '../../models';
 /**
- * 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 class Icon extends Component {
     private iconData?;
@@ -36,10 +52,6 @@ declare class Icon extends Component {
      * Length unit attribute for overriding length-unit from `IconProvider`
      */
     lengthUnit?: string;
-    /**
-     * Role attribute to be set for accessibility
-     */
-    role: string | null;
     /**
      * Aria-label attribute to be set for accessibility
      */
@@ -55,6 +67,7 @@ declare class Icon extends Component {
      */
     private updateSize;
     private setRoleOnIcon;
+    private setAriaHiddenOnIcon;
     private setAriaLabelOnIcon;
     private get computedIconSize();
     updated(changedProperties: Map<string, any>): void;

package/dist/components/icon/icon.component.js

@@ -10,25 +10,41 @@ const iconprovider_component_1 = tslib_1.__importDefault(require("../iconprovide
 const icon_utils_1 = require("./icon.utils");
 const icon_constants_1 = require("./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.
  */
 class Icon extends models_1.Component {
     constructor() {
@@ -37,10 +53,6 @@ class Icon extends models_1.Component {
          * Name of the icon (= filename)
          */
         this.name = icon_constants_1.DEFAULTS.NAME;
-        /**
-         * Role attribute to be set for accessibility
-         */
-        this.role = null;
         /**
          * Aria-label attribute to be set for accessibility
          */
@@ -61,6 +73,7 @@ class Icon extends models_1.Component {
                 // when icon got fetched, set role and aria-label:
                 this.setRoleOnIcon();
                 this.setAriaLabelOnIcon();
+                this.setAriaHiddenOnIcon();
             }
         }
     }
@@ -76,14 +89,12 @@ class Icon extends models_1.Component {
         }
     }
     setRoleOnIcon() {
-        var _a, _b;
-        if (this.role) {
-            // pass through role attribute to svg if set on mdc-icon
-            (_a = this.iconData) === null || _a === void 0 ? void 0 : _a.setAttribute('role', this.role);
-        }
-        else {
-            (_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('role');
-        }
+        this.role = this.ariaLabel ? 'img' : null;
+    }
+    setAriaHiddenOnIcon() {
+        var _a;
+        // set aria-hidden=true for SVG to avoid screen readers
+        (_a = this.iconData) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-hidden', 'true');
     }
     setAriaLabelOnIcon() {
         var _a, _b;
@@ -105,13 +116,12 @@ class Icon extends models_1.Component {
         if (changedProperties.has('name')) {
             // fetch icon data if name changes:
             this.getIconData().catch((err) => {
+                // eslint-disable-next-line no-console
                 console.error(err);
             });
         }
-        if (changedProperties.has('role')) {
-            this.setRoleOnIcon();
-        }
         if (changedProperties.has('ariaLabel')) {
+            this.setRoleOnIcon();
             this.setAriaLabelOnIcon();
         }
         if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
@@ -155,10 +165,6 @@ tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
     tslib_1.__metadata("design:type", String)
 ], Icon.prototype, "lengthUnit", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", Object)
-], Icon.prototype, "role", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
     tslib_1.__metadata("design:type", Object)

package/dist/components/icon/icon.styles.js

@@ -5,10 +5,13 @@ const styles_1 = require("../../utils/styles");
 const styles = [
     styles_1.hostFitContentStyles,
     (0, lit_1.css) `
+    :host {
+      --mdc-icon-fill-color: currentColor;
+    }
     svg {
       height: 100%;
       width: 100%;
-      fill: currentColor;
+      fill: var(--mdc-icon-fill-color);
     }
   `,
 ];

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

@@ -1,2 +1,12 @@
+/**
+ * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
+ * It will throw an error if the response is not ok.
+ *
+ * @param url - The base url of the icon
+ * @param name - The name of the icon
+ * @param fileExtension - The file extension of the icon
+ * @returns The valid icon element
+ * @throws Error if the response is not ok
+ */
 declare const dynamicSVGImport: (url: string, name: string, fileExtension: string) => Promise<Element>;
 export { dynamicSVGImport };

package/dist/components/icon/icon.utils.js

@@ -2,12 +2,22 @@
 /* eslint-disable implicit-arrow-linebreak */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dynamicSVGImport = void 0;
-const dynamicSVGImport = async (url, name, fileExtension) => fetch(`${url}/${name}.${fileExtension}`)
-    .then((response) => {
+/**
+ * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
+ * It will throw an error if the response is not ok.
+ *
+ * @param url - The base url of the icon
+ * @param name - The name of the icon
+ * @param fileExtension - The file extension of the icon
+ * @returns The valid icon element
+ * @throws Error if the response is not ok
+ */
+const dynamicSVGImport = async (url, name, fileExtension) => {
+    const response = await fetch(`${url}/${name}.${fileExtension}`);
     if (!response.ok) {
         throw new Error('There was a problem while fetching the icon!');
     }
-    return response.text();
-})
-    .then((iconResponse) => new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0]);
+    const iconResponse = await response.text();
+    return new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
+};
 exports.dynamicSVGImport = dynamicSVGImport;

package/dist/custom-elements.json

@@ -120,8 +120,14 @@
       "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.",
+          "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": "Allows customization of the default fill color.",
+              "name": "--mdc-icon-fill-color"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -175,16 +181,6 @@
               "description": "Length unit attribute for overriding length-unit from `IconProvider`",
               "attribute": "length-unit"
             },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Role attribute to be set for accessibility",
-              "attribute": "role"
-            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -218,6 +214,11 @@
               "name": "setRoleOnIcon",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "setAriaHiddenOnIcon",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "setAriaLabelOnIcon",
@@ -255,15 +256,6 @@
               "description": "Length unit attribute for overriding length-unit from `IconProvider`",
               "fieldName": "lengthUnit"
             },
-            {
-              "name": "role",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Role attribute to be set for accessibility",
-              "fieldName": "role"
-            },
             {
               "name": "aria-label",
               "type": {
@@ -279,7 +271,7 @@
             "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 */",
+          "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
         }
       ],

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/package.json

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