@momentum-design/components 0.1.8 → 0.1.10

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/components/themeprovider/themeprovider.component.d.ts

@@ -43,6 +43,7 @@ declare class ThemeProvider extends Provider<ThemeProviderContext> {
      * Default: 'mds-theme-stable-darkWebex'
      */
     themeclass: string;
+    connectedCallback(): void;
     protected updated(changedProperties: Map<string, any>): void;
     /**
      * Update all observing components of this

package/dist/components/themeprovider/themeprovider.component.js

@@ -41,7 +41,6 @@ class ThemeProvider extends models_1.Provider {
          * Default: 'mds-theme-stable-darkWebex'
          */
         this.themeclass = themeprovider_constants_1.DEFAULTS.THEMECLASS;
-        this.classList.add(themeprovider_constants_1.DEFAULTS.TYPOGRAPHYCLASS);
     }
     /**
      * Context object of the ThemeProvider, to be consumed by child components
@@ -49,6 +48,11 @@ class ThemeProvider extends models_1.Provider {
     static get Context() {
         return themeprovider_context_1.default.context;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // Set the default typography class
+        this.classList.add(themeprovider_constants_1.DEFAULTS.TYPOGRAPHYCLASS);
+    }
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('themeclass')) {