@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/iconbutton/IconButton.stories.js

@@ -1,75 +1,59 @@
-import { action } from 'storybook/actions';
-import { userEvent, within, expect } from 'storybook/test';
-import * as ButtonStories from '../button/Button.stories';
-/**
- * Icon Buttons are used to trigger actions where an icon is preferable over text.
- * The `MIconButton` component is the **Svelte / WebComponent** implementation of the **Icon Button** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/buttons/).
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight20/ChevronRight20.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
+const meta = {
     title: 'Action/Icon Button',
-    tags: ['autodocs', 'new'],
+    component: 'm-icon-button',
+    tags: ['v2'],
     args: {
-        ...ButtonStories.default.args,
+        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
     },
     argTypes: {
-        ...ButtonStories.default.argTypes,
-    },
-};
-const Template = (args) => {
-    const primary = document.createElement('m-icon-button');
-    primary.setAttribute('data-testid', args.label || 'Primary');
-    primary.setAttribute('type', args.type);
-    primary.setAttribute('appearance', args.appearance || 'standard');
-    primary.setAttribute('size', args.size);
-    const icon = document.createElement('chevron-right-24');
-    icon.setAttribute('slot', 'icon');
-    icon.setAttribute('style', 'height: 100%');
-    primary.appendChild(icon);
-    primary.addEventListener('click', action('click'));
-    if (args.outlined)
-        primary.setAttribute('outlined', 'true');
-    if (args.ghost)
-        primary.setAttribute('ghost', 'true');
-    if (args.disabled)
-        primary.setAttribute('disabled', 'true');
-    return primary;
-};
-export const Filled = Template.bind({});
-Filled.args = {};
-Filled.play = async ({ canvasElement }) => {
-    const MIconButton = canvasElement.querySelector('m-icon-button');
-    const button = MIconButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MIconButton).toHaveAttribute('appearance', 'standard');
-};
-export const Outlined = Template.bind({});
-Outlined.args = {
-    outlined: true,
-};
-Outlined.play = async ({ canvasElement }) => {
-    const MIconButton = canvasElement.querySelector('m-icon-button');
-    const button = MIconButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MIconButton).toHaveAttribute('outlined', 'true');
-};
-export const Ghost = Template.bind({});
-Ghost.args = {
-    ghost: true,
-};
-Ghost.argTypes = {
-    iconmode: {
-        table: {
-            disable: true,
+        appearance: {
+            control: 'radio',
+            options: ['danger', 'accent', 'inverse', 'standard'],
         },
+        size: {
+            control: 'radio',
+            options: ['s', 'm', 'l'],
+        },
+        type: {
+            control: 'radio',
+            options: ['button', 'reset', 'submit'],
+        },
+    },
+    render: (args) => html `
+    <m-icon-button
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+      disabled=${ifDefined(args.disabled)}
+      ghost=${ifDefined(args.ghost)}
+      outlined=${ifDefined(args.outlined)}
+      type=${ifDefined(args.type)}
+    >
+      ${unsafeHTML(ifDefined(args.icon))}
+    </m-icon-button>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Outline = {
+    args: { outlined: true },
+};
+export const Ghost = {
+    args: { ghost: true },
+};
+export const SizeS = {
+    args: {
+        size: 's',
+        icon: '<chevron-right-20 slot="icon"></chevron-right-20>',
     },
 };
-Ghost.play = async ({ canvasElement }) => {
-    const MIconButton = canvasElement.querySelector('m-icon-button');
-    const button = MIconButton?.shadowRoot.querySelector('button');
-    expect(button).not.toBeNull();
-    await userEvent.click(button);
-    expect(MIconButton).toHaveAttribute('ghost', 'true');
+export const SizeL = {
+    args: {
+        size: 'l',
+        icon: '<chevron-right-32 slot="icon"></chevron-right-32>',
+    },
 };

package/dist/components/iconbutton/IconButton.svelte

@@ -1,58 +1,62 @@
 <svelte:options customElement={{ tag: 'm-icon-button' }} />
 
 <script lang="ts">
-  import type { ButtonSize, ButtonStyle, ButtonType } from '../button/button.types';
-
+  /**
+   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
+   *
+   * @slot icon - Use this slot to insert an icon for the Button.
+   */
   interface Props {
-    appearance?: ButtonStyle | undefined;
-    size?: ButtonSize;
+    [key: string]: any;
+    /**
+     * Defines the visual style of the icon button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the icon button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the icon button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the icon button.
+     */
     ghost?: boolean;
+    /**
+     * If `true`, the icon button gets an outlined style.
+     */
     outlined?: boolean;
-    iconname?: string;
-    disabled?: boolean;
-    type?: ButtonType;
-    [key: string]: any;
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
   }
 
   let {
     appearance = 'standard',
     size = 'm',
-    ghost = false,
-    outlined = false,
-    iconname,
-    disabled = false,
     type = 'button',
-    ...events
+    ghost,
+    outlined,
+    disabled,
+    ...attrs
   }: Props = $props();
-
-  function generateIconName(size: ButtonSize, iconName: string): string {
-    let iconSize: string;
-
-    switch (size) {
-      case 's':
-        iconSize = '20px';
-        break;
-      case 'm':
-        iconSize = '24px';
-        break;
-      case 'l':
-        iconSize = '32px';
-        break;
-    }
-
-    return `${iconName} size="${iconSize}" `;
-  }
 </script>
 
 <button
-  class="mc-button mc-button--icon-button {size
-    ? `mc-button--${size}`
-    : ''} {appearance ? `mc-button--${appearance}` : ''}"
-  class:mc-button--ghost={ghost}
-  class:mc-button--outlined={outlined}
+  class={[
+    'mc-button',
+    'mc-button--icon-button',
+    `mc-button--${size}`,
+    `mc-button--${appearance}`,
+    ghost && 'mc-button--ghost',
+    outlined && 'mc-button--outlined',
+  ]}
   {disabled}
   {type}
-  {...events}
+  {...attrs}
 >
   <slot name="icon" />
 </button>
@@ -60,22 +64,38 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-button {
-  color: #ffffff;
-  background-color: #464e63;
-  font-weight: 600;
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
   display: inline-flex;
   justify-content: center;
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: 0.25rem;
+  border-radius: var(--button-radius, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -85,23 +105,8 @@
   gap: 0.25rem;
   cursor: pointer;
 }
-.mc-button:hover {
-  background-color: #343b4c;
-}
-.mc-button:active {
-  background-color: #242938;
-}
-.mc-button:disabled {
-  background-color: #d9d9d9;
-  border-color: transparent;
-  color: #737373;
-  cursor: not-allowed;
-}
-.mc-button .mc-button__label {
-  font-size: 1rem;
-}
 .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button__icon {
   flex-shrink: 0;
@@ -109,13 +114,13 @@
   height: 1.5rem;
 }
 .mc-button:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
@@ -125,7 +130,7 @@
   min-width: 2rem;
 }
 .mc-button--s .mc-button__label {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
 }
 .mc-button--s .mc-button__icon {
   width: 1.25rem;
@@ -141,7 +146,7 @@
   min-width: 3rem;
 }
 .mc-button--m .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button--m .mc-button__icon {
   width: 1.5rem;
@@ -157,7 +162,7 @@
   min-width: 4rem;
 }
 .mc-button--l .mc-button__label {
-  font-size: 1.125rem;
+  font-size: var(--font-size-200, 1.125rem);
 }
 .mc-button--l .mc-button__icon {
   width: 2rem;
@@ -171,90 +176,90 @@
   padding: 0.25rem;
 }
 .mc-button--outlined {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
 }
 .mc-button--outlined:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--accent {
-  color: #ffffff;
-  background-color: #117f03;
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
 }
 .mc-button--accent:hover {
-  background-color: #006902;
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
 }
 .mc-button--accent:active {
-  background-color: #035010;
+  background-color: var(--button-color-filled-accent-active-background, #035010);
 }
 .mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
 }
 .mc-button--danger:hover {
-  background-color: #8c0003;
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
 }
 .mc-button--danger:active {
-  background-color: #530000;
+  background-color: var(--button-color-filled-danger-active-background, #530000);
 }
 .mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #242938;
-  background-color: #ffffff;
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
 }
 .mc-button--inverse:hover {
-  background-color: #e6e6e6;
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
 }
 .mc-button--inverse:active {
-  background-color: #cccccc;
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
 }
 .mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -266,134 +271,134 @@
   visibility: hidden;
 }
 .mc-button--outlined.mc-button--standard {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
 }
 .mc-button--outlined.mc-button--standard:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined.mc-button--standard:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--accent {
-  color: #117f03;
-  border-color: #78be20;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
 }
 .mc-button--outlined.mc-button--accent:hover {
-  background-color: #ebf5de;
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
 }
 .mc-button--outlined.mc-button--accent:active {
-  background-color: #c5e39e;
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
 }
 .mc-button--outlined.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--danger {
-  color: #c61112;
-  border-color: #ef5f5c;
-  background-color: #ffffff;
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
 }
 .mc-button--outlined.mc-button--danger:hover {
-  background-color: #fdeaea;
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
 }
 .mc-button--outlined.mc-button--danger:active {
-  background-color: #f8bcbb;
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
 }
 .mc-button--outlined.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--inverse {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--outlined.mc-button--inverse:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--outlined.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--outlined.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--standard {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--standard:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost.mc-button--standard:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--accent {
-  color: #117f03;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--accent:hover {
-  background-color: rgba(17, 127, 3, 0.1);
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
 }
 .mc-button--ghost.mc-button--accent:active {
-  background-color: rgba(17, 127, 3, 0.2);
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
 }
 .mc-button--ghost.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--danger {
-  color: #c61112;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--danger:hover {
-  background-color: rgba(198, 17, 18, 0.1);
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
 }
 .mc-button--ghost.mc-button--danger:active {
-  background-color: rgba(198, 17, 18, 0.2);
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
 }
 .mc-button--ghost.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--inverse {
-  color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
 }
 .mc-button--ghost.mc-button--inverse:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--ghost.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--ghost.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }</style>