@zanichelli/albe-web-components 19.2.12-rc3 → 19.2.12

package/dist/collection/components/z-aria-alert/index.stories.js

@@ -1,75 +0,0 @@
-import { html } from "lit";
-import { ZAriaAlertMode } from "../../beans";
-import "../z-button/index";
-import "../z-visually-hidden/index";
-import "./index";
-const StoryMeta = {
-    title: "ZAriaAlert",
-    component: "z-aria-alert",
-    argTypes: {
-        mode: {
-            control: {
-                type: "select",
-            },
-            options: Object.values(ZAriaAlertMode),
-        },
-    },
-    args: {
-        mode: ZAriaAlertMode.POLITE,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<script>
-        function myFunction() {
-          const myTimeout = setTimeout(myDelayedFunction, 3000);
-        }
-        function myDelayedFunction() {
-          var myalert = document.getElementById("idAlert");
-          myalert.innerHTML = "Ecco un numero a caso: " + Math.random();
-        }
-      </script>
-      <div>
-        <h2 class="heading-2">ZAriaAlert deafult</h2>
-        <span>
-          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message
-        </span>
-        <z-button onclick="myFunction()">Click to say something</z-button>
-        <z-aria-alert
-          id="idAlert"
-          mode="${args.mode}"
-        >
-          Testo NON nascosto
-        </z-aria-alert>
-      </div>`,
-};
-export const VisuallyHidden = {
-    render: (args) => html `<script>
-        function myFunction2() {
-          const myTimeout = setTimeout(myDelayedFunction2, 3000);
-        }
-        function myDelayedFunction2() {
-          var myalert = document.getElementById("idAlert2");
-          myalert.innerHTML = "Ecco un numero a caso: " + Math.random();
-        }
-      </script>
-      <div>
-        <h2 class="heading-2">ZAriaAlert with VisuallyHidden</h2>
-        <span>
-          You can also wrap your <code>z-aria-alert</code> with a <code>z-visually-hidden</code> tag in order to
-          visually hide the text.
-        </span>
-        <span>
-          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message
-        </span>
-        <z-button onclick="myFunction2()">Click to say something but visually hidden</z-button>
-        <z-visually-hidden>
-          <z-aria-alert
-            id="idAlert2"
-            mode="${args.mode}"
-          >
-            Testo qua
-          </z-aria-alert>
-        </z-visually-hidden>
-      </div>`,
-};

package/dist/collection/components/z-avatar/index.stories.js

@@ -1,50 +0,0 @@
-import { html } from "lit";
-import { AvatarSize } from "../../beans";
-import { getColorTokens } from "../../utils/storybook-utils";
-import "./index";
-const colorTokens = getColorTokens().map((token) => token.replace("--", ""));
-/**
- * Pass at least one prop between `text` and `image`.
- * If prop `image` contains a broken URL, the component will show `text` prop, if given.
- */
-const StoryMeta = {
-    title: "ZAvatar",
-    component: "z-avatar",
-    argTypes: {
-        size: {
-            options: Object.values(AvatarSize),
-            control: {
-                type: "inline-radio",
-            },
-        },
-        textColor: {
-            options: colorTokens,
-            control: {
-                type: "select",
-            },
-        },
-        backgroundColor: {
-            options: colorTokens,
-            control: {
-                type: "select",
-            },
-        },
-    },
-    args: {
-        size: AvatarSize.MEDIUM,
-        text: "Avatar",
-        textColor: "color-white",
-        backgroundColor: "gray700",
-        image: "https://www.cinematographe.it/wp-content/uploads/2019/04/Avatar.jpg",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-avatar
-      size="${args.size}"
-      text="${args.text}"
-      text-color="${args.textColor}"
-      background-color="${args.backgroundColor}"
-      image="${args.image}"
-    ></z-avatar>`,
-};

package/dist/collection/components/z-book-cover/index.stories.js

@@ -1,30 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import "./index";
-const StoryMeta = {
-    title: "ZBookCover",
-    component: "z-book-cover",
-    args: {
-        "cover": "https://staticmy.zanichelli.it/copertine/dashboard/m40002.9788808999825.jpg",
-        "bordered": false,
-        "multiple": false,
-        "--z-book-cover-height": "378px",
-        "--z-book-cover-border-radius": "var(--border-radius)",
-        "--z-book-cover-stack-shift-x": "8px",
-        "--z-book-cover-stack-shift-y": "12px",
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `<z-book-cover
-      cover=${args.cover}
-      .bordered=${args.bordered}
-      .multiple=${args.multiple}
-      style=${styleMap({
-        "--z-book-cover-height": args["--z-book-cover-height"],
-        "--z-book-cover-border-radius": args["--z-book-cover-border-radius"],
-        "--z-book-cover-stack-shift-x": args["--z-book-cover-stack-shift-x"],
-        "--z-book-cover-stack-shift-y": args["--z-book-cover-stack-shift-y"],
-    })}
-    ></z-book-cover>`,
-};

package/dist/collection/components/z-breadcrumb/index.stories.js

@@ -1,67 +0,0 @@
-import { html } from "lit";
-import { BreadcrumbHomepageVariant, BreadcrumbPathStyle } from "../../beans";
-import "./index";
-import "./style.stories.css";
-/**
- * Breadcrumb is a relevant component for SEO oriented applications.
- * As the crawlers flatten the light dom and the shadow dom, it is important to move all the relevant SEO content in the light DOM, to not affect indexability.
- *
- * The component will handle the logic for generating the proper markup inside the shadow dom.
- * No slot is rendered inside the latter.
- * Like the other use case, don't pass a custom label to the first child because it will be overwritten by the default home value.
- * This mode can be also used by SEO non-relevant application.
- * @example```
- * <z-breadcrumb>
- *  <a href="./home_link"></a>
- *  <a href="./link1">link1</a>
- *  <a href="./link2">link2</a>
- *  <a href="./link3">link3</a>
- * </z-breadcrumb>```
- *
- * This component follows the accessibility guidelines provided by W3C https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
- */
-const StoryMeta = {
-    title: "ZBreadcrumb",
-    component: "z-breadcrumb",
-    argTypes: {
-        pathStyle: {
-            options: Object.values(BreadcrumbPathStyle),
-            control: {
-                type: "select",
-            },
-        },
-        homepageVariant: {
-            options: Object.values(BreadcrumbHomepageVariant),
-            control: {
-                type: "select",
-            },
-        },
-    },
-    args: {
-        pathStyle: BreadcrumbPathStyle.SEMIBOLD,
-        homepageVariant: BreadcrumbHomepageVariant.ICON,
-        maxNodesToShow: 5,
-        preventFollowUrl: false,
-        overflowMenuItemRows: 0,
-        truncateChar: 30,
-    },
-};
-export default StoryMeta;
-export const Breadcrumb = {
-    render: (args) => html `<div class="z-breadcrumb-story-container">
-      <z-breadcrumb
-        .pathStyle=${args.pathStyle}
-        .homepageVariant=${args.homepageVariant}
-        .maxNodesToShow=${args.maxNodesToShow}
-        .preventFollowUrl=${args.preventFollowUrl}
-        .overflowMenuItemRows=${args.overflowMenuItemRows}
-        .truncateChar=${args.truncateChar}
-      >
-        <a href="https://www.zanichelli.it"></a>
-        <a href="./link1">Lingua inglese - Scuola secondaria di primo grado</a>
-        <a href="./link2">Lingua Inglese - Lessico e funzioni linguistiche e comunicative</a>
-        <a href="./link3">Il tempo libero e i luoghi del tempo libero</a>
-        <a href="./link4">Chiedere di descrivere le proprie vacanze</a>
-      </z-breadcrumb>
-    </div>`,
-};

package/dist/collection/components/z-button/index.stories.js

@@ -1,103 +0,0 @@
-import { html } from "lit";
-import { ButtonVariant, ControlSize, IconPosition } from "../../beans";
-import "./index";
-const StoryMeta = {
-    title: "ZButton",
-    component: "z-button",
-    args: {
-        variant: ButtonVariant.PRIMARY,
-        size: ControlSize.BIG,
-        disabled: false,
-        icon: "download",
-        iconPosition: IconPosition.LEFT,
-        ariaLabel: "Clicca sul bottone",
-        htmlrole: "button",
-    },
-    argTypes: {
-        variant: {
-            options: Object.values(ButtonVariant),
-            control: { type: "inline-radio" },
-        },
-        size: {
-            options: Object.values(ControlSize),
-            control: { type: "inline-radio" },
-        },
-        iconPosition: {
-            options: Object.values(IconPosition),
-            control: { type: "inline-radio" },
-        },
-    },
-    render: (args) => html `<z-button
-      variant=${args.variant}
-      size=${args.size}
-      disabled=${args.disabled}
-      icon=${args.icon}
-      .iconPosition=${args.iconPosition}
-      .ariaLabel=${args.ariaLabel}
-      htmlrole=${args.htmlrole}
-    >
-      Click me
-    </z-button>`,
-};
-export default StoryMeta;
-export const Primary = {};
-export const SecondaryXSmall = {
-    args: {
-        variant: ButtonVariant.SECONDARY,
-        size: ControlSize.X_SMALL,
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant", "icon"],
-        },
-    },
-};
-export const TertiarySmall = {
-    args: {
-        variant: ButtonVariant.TERTIARY,
-        size: ControlSize.SMALL,
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant", "icon"],
-        },
-    },
-};
-export const IconOnly = {
-    render: (args) => html `<z-button
-      variant=${args.variant}
-      size=${args.size}
-      disabled=${args.disabled}
-      icon=${args.icon}
-      .iconPosition=${args.iconPosition}
-      .ariaLabel=${args.ariaLabel}
-      htmlrole=${args.htmlrole}
-    />`,
-};
-export const LinkButton = {
-    args: {
-        icon: "arrow-quad-north-east",
-        href: "https://wikipedia.com",
-        target: "_blank",
-        role: "link",
-    },
-    render: (args) => html `<z-button
-      variant=${args.variant}
-      size=${args.size}
-      disabled=${args.disabled}
-      icon=${args.icon}
-      .iconPosition=${args.iconPosition}
-      .ariaLabel=${args.ariaLabel}
-      htmlrole=${args.htmlrole}
-      href=${args.href}
-      target=${args.target}
-    >
-      Go to wikipedia
-    </z-button>`,
-};
-export const IconRight = {
-    args: {
-        icon: "arrow-right",
-        iconPosition: IconPosition.RIGHT,
-    },
-};

package/dist/collection/components/z-button-sort/index.stories.js

@@ -1,30 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "ZButtonSort",
-    args: {
-        label: "sort",
-        counter: 3,
-        desclabel: "label DESC",
-        sortlabelasc: "1-9",
-        sortlabeldesc: "9-1",
-        isselected: true,
-        sortasc: true,
-    },
-    render: (args) => html `<z-button-sort
-      label="${args.label}"
-      counter="${args.counter}"
-      desclabel="${args.desclabel}"
-      sortlabelasc="${args.sortlabelasc}"
-      sortlabeldesc="${args.sortlabeldesc}"
-      isselected="${args.isselected}"
-      sortasc="${args.sortasc}"
-    ></z-button-sort>`,
-};
-export default StoryMeta;
-export const Default = {};
-export const Ellipsis = {
-    args: {
-        label: "Testo molto lungo lungo lungo lunghissimo lunghissimo lunghissimo ancora di più",
-    },
-};

package/dist/collection/components/z-card/index.stories.js

@@ -1,302 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { CardVariant } from "../../beans";
-import "../z-icon/index";
-import "./index";
-import "./index.stories.css";
-const StoryMeta = {
-    title: "ZCard",
-    component: "z-card",
-    argTypes: {
-        variant: {
-            control: {
-                type: "inline-radio",
-                labels: {
-                    null: "default",
-                },
-            },
-            options: [null, ...Object.values(CardVariant)],
-        },
-    },
-    args: {
-        variant: null,
-        showShadow: false,
-        clickable: false,
-    },
-};
-export default StoryMeta;
-export const WithImage = {
-    render: (args) => html `
-    <z-card
-      class="demo-card"
-      .variant="${args.variant}"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-    >
-      <img
-        slot="cover"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <span
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </span>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-  `,
-};
-export const WithImageAndIcon = {
-    args: {
-        coverIcon: "play-filled",
-    },
-    render: (args) => html `
-    <z-card
-      class="demo-card"
-      cover-icon="${args.coverIcon}"
-      .variant="${args.variant}"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-    >
-      <img
-        slot="cover"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-  `,
-};
-export const ColorCover = {
-    args: {
-        "--z-card--color-cover-background": "var(--yellow500)",
-    },
-    render: (args) => html `
-    <z-card
-      class="demo-card"
-      .variant="${args.variant}"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-      style="--z-card--color-cover-background: ${args["--z-card--color-cover-background"]};"
-    >
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-  `,
-};
-export const TextVariantPrimaryBackground = {
-    args: {
-        "--z-card--text-border-radius": "4px",
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant"],
-        },
-    },
-    render: (args) => html `
-    <z-card
-      class="text-variant-card"
-      variant="text"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-      style=${styleMap({
-        "--z-card--text-background": "var(--color-primary01)",
-        "--z-card--text-border-radius": `${args["--z-card--text-border-radius"]}`,
-        "color": "var(--color-text-inverse)",
-    })}
-    >
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action">
-        <z-icon
-          name="share"
-          fill="color-surface01"
-        ></z-icon>
-      </button>
-      <button slot="action">
-        <z-icon
-          name="delete"
-          fill="color-surface01"
-        ></z-icon>
-      </button>
-    </z-card>
-  `,
-};
-export const TextVariantSurfaceBackgroundAndBordered = {
-    args: {
-        "--z-card--text-border": "2px solid var(--gray800)",
-        "--z-card--text-border-radius": "4px",
-        "--z-card--text-padding": "16px 8px",
-    },
-    parameters: {
-        controls: {
-            exclude: ["variant"],
-        },
-    },
-    render: (args) => html `<z-card
-      class="text-variant-card"
-      variant="text"
-      .showShadow="${args.showShadow}"
-      .clickable="${args.clickable}"
-      style=${styleMap({
-        "--z-card--text-background": `var(--color-surface01)`,
-        "--z-card--text-border": `${args["--z-card--text-border"]}`,
-        "--z-card--text-border-radius": `${args["--z-card--text-border-radius"]}`,
-        "--z-card--text-padding": `${args["--z-card--text-padding"]}`,
-    })}
-    >
-      <h2
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </h2>
-      <a
-        href="https://google.it"
-        target="_blank"
-        slot="title"
-      >
-        <span>Card title</span>
-      </a>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action">
-        <z-icon
-          name="share"
-          fill="color-primary01"
-        ></z-icon>
-      </button>
-      <button slot="action">
-        <z-icon
-          name="delete"
-          fill="color-primary01"
-        ></z-icon>
-      </button>
-    </z-card>`,
-};
-export const WithImageAndClickListener = {
-    parameters: {
-        controls: {
-            exclude: ["clickable", "showShadow"],
-        },
-    },
-    render: (args) => html `
-    <script>
-      window.cardClickCount = 0;
-      document.getElementById("btn-card").addEventListener("click", (e) => {
-        window.cardClickCount = window.cardClickCount + 1;
-        const alertBox = document.getElementById("click-alert-container");
-        if (!alertBox) {
-          return;
-        }
-
-        alertBox.innerText = "Card click count: " + window.cardClickCount;
-      });
-    </script>
-    <z-card
-      class="demo-card"
-      variant=${args.variant}
-      clickable
-    >
-      <img
-        slot="cover"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <span
-        class="body-5"
-        slot="metadata"
-      >
-        metadata
-      </span>
-      <button
-        id="btn-card"
-        slot="title"
-      >
-        <span>Card title</span>
-      </button>
-      <p
-        class="body-3"
-        slot="text"
-      >
-        Some description for the content of the card.
-      </p>
-      <button slot="action"><z-icon name="share"></z-icon></button>
-      <button slot="action"><z-icon name="delete"></z-icon></button>
-    </z-card>
-    <div id="click-alert-container">Card click count: 0</div>
-  `,
-};