@momentum-design/components 0.116.1 → 0.117.0

package/dist/index.d.ts

@@ -25,6 +25,8 @@ import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
+import Illustration from './components/illustration';
+import IllustrationProvider from './components/illustrationprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
@@ -93,7 +95,7 @@ import type { InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent
 import type { VirtualizedListScrollEvent } from './components/virtualizedlist/virtualizedlist.types';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
-import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner };
+import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, };
-export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };
+export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -27,6 +27,8 @@ import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
+import Illustration from './components/illustration';
+import IllustrationProvider from './components/illustrationprovider';
 import Input from './components/input';
 import InputChip from './components/inputchip';
 import Link from './components/link';
@@ -84,8 +86,8 @@ import Banner from './components/banner';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
-import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
+import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
 // Constants / Utils Exports
-export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };
+export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

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

@@ -6,7 +6,7 @@ import Component from '../../components/iconprovider';
  * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
  * If `momentum-icons` is selected, the icons will be fetched from the
  * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
- * This requires the consumer to have the `@momentum-designs` package installed and the
+ * This requires the consumer to have the `@momentum-design/icons` package installed and the
  * build tooling needs to support dynamic imports.
  *
  * If `custom-icons` is selected, the icons will be fetched from the provided URL.

package/dist/react/iconprovider/index.js

@@ -9,7 +9,7 @@ import { TAG_NAME } from '../../components/iconprovider/iconprovider.constants';
  * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
  * If `momentum-icons` is selected, the icons will be fetched from the
  * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
- * This requires the consumer to have the `@momentum-designs` package installed and the
+ * This requires the consumer to have the `@momentum-design/icons` package installed and the
  * build tooling needs to support dynamic imports.
  *
  * If `custom-icons` is selected, the icons will be fetched from the provided URL.

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

@@ -0,0 +1,40 @@
+import Component from '../../components/illustration';
+/**
+ * Illustration component that dynamically displays SVG illustrations based on a valid name.
+ *
+ * This component must be mounted within an `IllustrationProvider` component.
+ *
+ * The `IllustrationProvider` defines the source URL from which illustrations are consumed.
+ * The `Illustration` component accepts a `name` attribute, which corresponds to
+ * the file name of the illustration to be loaded from the specified URL.
+ *
+ * Once fetched, the illustration will be rendered. If the fetching process is unsuccessful,
+ * no illustration will be displayed.
+ *
+ * Default sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.
+ * Coloring of the illustration is currently baked into the svg, meaning that the illustration name determines
+ * the coloring.
+ *
+ * Regarding accessibility, there are two types of illustrations: decorative and informative.
+ *
+ * ### Decorative Illustrations
+ * - Decorative illustrations 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 illustrations, an `aria-label` is not required, and the `role` will be set to null.
+ *
+ * ### Informative Illustrations
+ * - Informative illustrations 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 illustrations, an `aria-label` is required, and the `role` will be set to "img" automatically.
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
+ *   the role will be unset.
+ *
+ * @tagname mdc-illustration
+ *
+ * @cssproperty --mdc-illustration-size - Allows customization of the illustration size.
+ *
+ * @csspart illustration - The svg inside the illustration element.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/illustration/index.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/illustration';
+import { TAG_NAME } from '../../components/illustration/illustration.constants';
+/**
+ * Illustration component that dynamically displays SVG illustrations based on a valid name.
+ *
+ * This component must be mounted within an `IllustrationProvider` component.
+ *
+ * The `IllustrationProvider` defines the source URL from which illustrations are consumed.
+ * The `Illustration` component accepts a `name` attribute, which corresponds to
+ * the file name of the illustration to be loaded from the specified URL.
+ *
+ * Once fetched, the illustration will be rendered. If the fetching process is unsuccessful,
+ * no illustration will be displayed.
+ *
+ * Default sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.
+ * Coloring of the illustration is currently baked into the svg, meaning that the illustration name determines
+ * the coloring.
+ *
+ * Regarding accessibility, there are two types of illustrations: decorative and informative.
+ *
+ * ### Decorative Illustrations
+ * - Decorative illustrations 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 illustrations, an `aria-label` is not required, and the `role` will be set to null.
+ *
+ * ### Informative Illustrations
+ * - Informative illustrations 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 illustrations, an `aria-label` is required, and the `role` will be set to "img" automatically.
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
+ *   the role will be unset.
+ *
+ * @tagname mdc-illustration
+ *
+ * @cssproperty --mdc-illustration-size - Allows customization of the illustration size.
+ *
+ * @csspart illustration - The svg inside the illustration element.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Illustration',
+});
+export default reactWrapper;

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

@@ -0,0 +1,31 @@
+import Component from '../../components/illustrationprovider';
+/**
+ * IllustrationProvider component, which allows to be consumed from sub components
+ * (see `providerUtils.consume` for how to consume)
+ *
+ * Attribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.
+ * If `momentum-illustrations` is selected, the illustrations will be fetched from the
+ * Momentum Design System illustration set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-design/illustrations` package installed and the
+ * build tooling needs to support dynamic imports.
+ *
+ * If `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the illustrations will be fetched and
+ * the consumer needs to make sure to bundle the illustrations in the application.
+ *
+ * If `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the
+ * IllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),
+ * to avoid fetching the same illustration multiple times over the network.
+ * This is useful when the same illustration is used multiple times in the application.
+ * To consider:
+ * - The `in-memory-cache` is not persisted and will be lost when the
+ * IllustrationProvider is removed from the DOM.
+ * - The `web-api-cache` is persisted, but only works in https environments
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
+ *
+ * @tagname mdc-illustrationprovider
+ *
+ * @slot - children
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/illustrationprovider/index.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/illustrationprovider';
+import { TAG_NAME } from '../../components/illustrationprovider/illustrationprovider.constants';
+/**
+ * IllustrationProvider component, which allows to be consumed from sub components
+ * (see `providerUtils.consume` for how to consume)
+ *
+ * Attribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.
+ * If `momentum-illustrations` is selected, the illustrations will be fetched from the
+ * Momentum Design System illustration set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-design/illustrations` package installed and the
+ * build tooling needs to support dynamic imports.
+ *
+ * If `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the illustrations will be fetched and
+ * the consumer needs to make sure to bundle the illustrations in the application.
+ *
+ * If `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the
+ * IllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),
+ * to avoid fetching the same illustration multiple times over the network.
+ * This is useful when the same illustration is used multiple times in the application.
+ * To consider:
+ * - The `in-memory-cache` is not persisted and will be lost when the
+ * IllustrationProvider is removed from the DOM.
+ * - The `web-api-cache` is persisted, but only works in https environments
+ * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
+ *
+ * @tagname mdc-illustrationprovider
+ *
+ * @slot - children
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'IllustrationProvider',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
+export { default as Accordion } from './accordion';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
@@ -29,6 +29,8 @@ export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Illustration } from './illustration';
+export { default as IllustrationProvider } from './illustrationprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
@@ -56,8 +58,8 @@ export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
-export { default as Select } from './select';
 export { default as Searchfield } from './searchfield';
+export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';

package/dist/react/index.js

@@ -1,6 +1,6 @@
-export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
+export { default as Accordion } from './accordion';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
@@ -29,6 +29,8 @@ export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
+export { default as Illustration } from './illustration';
+export { default as IllustrationProvider } from './illustrationprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
@@ -56,8 +58,8 @@ export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
-export { default as Select } from './select';
 export { default as Searchfield } from './searchfield';
+export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
 export { default as SideNavigation } from './sidenavigation';
 export { default as Skeleton } from './skeleton';

package/dist/utils/{icon-cache → assets-cache}/index.d.ts

@@ -14,7 +14,7 @@ export declare const inMemoryCache: (name: string) => Promise<{
  * @param name - name of the cache (used as an identifier)
  * @returns Object with set, get and delete methods
  */
-export declare const webAPIIconsCache: (name: string) => Promise<{
+export declare const webAPIAssetsCache: (name: string) => Promise<{
     set: (request: Request, response: Response) => Promise<void>;
     get: (request: Request) => Promise<string | undefined>;
     delete: (request: Request) => Promise<void>;
@@ -25,7 +25,7 @@ export declare const webAPIIconsCache: (name: string) => Promise<{
  * @param cacheStrategy - strategy to be used for caching
  * @returns the cache based on the strategy
  */
-export declare const iconsCache: (cacheName: string, cacheStrategy: CacheStrategy) => Promise<{
+export declare const assetsCache: (cacheName: string, cacheStrategy: CacheStrategy) => Promise<{
     set(request: Request, response: Response): Promise<void>;
     get(request: Request): Promise<string | undefined>;
     delete(request: Request): Promise<void>;

package/dist/utils/{icon-cache → assets-cache}/index.js

@@ -25,7 +25,7 @@ export const inMemoryCache = async (name) => {
  * @param name - name of the cache (used as an identifier)
  * @returns Object with set, get and delete methods
  */
-export const webAPIIconsCache = async (name) => {
+export const webAPIAssetsCache = async (name) => {
     const cache = await caches.open(name);
     return {
         set: async (request, response) => {
@@ -46,9 +46,9 @@ export const webAPIIconsCache = async (name) => {
  * @param cacheStrategy - strategy to be used for caching
  * @returns the cache based on the strategy
  */
-export const iconsCache = async (cacheName, cacheStrategy) => {
+export const assetsCache = async (cacheName, cacheStrategy) => {
     if (cacheStrategy === 'in-memory-cache') {
         return inMemoryCache(cacheName);
     }
-    return webAPIIconsCache(cacheName);
+    return webAPIAssetsCache(cacheName);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.116.1",
+  "version": "0.117.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"