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

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

@@ -1,317 +0,0 @@
-import { html } from "lit";
-import "../z-button/index";
-import "../z-divider/index";
-import "../z-tool/index";
-import "./index";
-import "./index.stories.css";
-/**
- * This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.
- * ### Active state
- * The `active` state of each `z-tool` must be managed manually by the consumer. The component does not toggle `active` on click by itself. In these stories, a click listener (decorator) is applied to toggle `active` on tools without a submenu, for demonstration purposes.
- * ### Visual grouping with `z-divider`
- * Use `<z-divider orientation="vertical">` between tools to visually separate them into groups. On tablet viewports and below, dividers are automatically hidden.
- * ### Mobile multiline layout with `--z-toolbar-columns`
- * Set the CSS custom property `--z-toolbar-columns` on a parent element to control the number of columns in the toolbar grid. When set, the toolbar switches to a grid layout on tablet viewports and below (max-width: 1151px), wrapping tools across multiple rows with a separator line between rows.
- */
-const StoryMeta = {
-    title: "ZToolbar",
-    component: "z-toolbar",
-    args: {
-        htmlAriaLabel: "Toolbar principale",
-    },
-    decorators: [
-        (story) => html `<div
-        class="toolbar-container"
-        @click=${(e) => {
-            const tool = e.target.closest("z-tool");
-            if (tool && !tool.disabled && !tool.children.length) {
-                tool.active = !tool.active;
-            }
-        }}
-      >
-        ${story()}
-      </div>`,
-    ],
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const WithDividers = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      ></z-tool>
-      <z-tool
-        icon="chevron-up"
-        tooltip="Su"
-      ></z-tool>
-      <z-tool
-        icon="chevron-down"
-        tooltip="Giù"
-      ></z-tool>
-      <z-divider orientation="vertical"></z-divider>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-      <z-tool
-        icon="copy"
-        tooltip="Copia"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const WithNestedToolbar = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="bg-color"
-        tooltip="Scegli un colore"
-      >
-        <z-color-picker></z-color-picker>
-      </z-tool>
-      <z-tool
-        icon="plus"
-        tooltip="Apri sotto-toolbar"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar">
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-          <z-divider orientation="vertical"></z-divider>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="bg-color"
-            tooltip="Scegli un colore"
-          >
-            <z-color-picker></z-color-picker>
-          </z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="chevron-up"
-        tooltip="Su"
-      ></z-tool>
-      <z-tool
-        icon="chevron-up"
-        tooltip="Su"
-      ></z-tool>
-      <z-divider orientation="vertical"></z-divider>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar">
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-          <z-divider orientation="vertical"></z-divider>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar">
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-          <z-divider orientation="vertical"></z-divider>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const WithDisabledTool = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-        disabled
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const WithActiveTool = {
-    render: (args) => html `
-    <z-toolbar html-aria-label=${args.htmlAriaLabel}>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-        active
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};
-export const MultilineMobile = {
-    args: {
-        "--z-toolbar-columns": "4",
-    },
-    parameters: {
-        viewport: {
-            defaultViewport: "mobile",
-        },
-    },
-    render: (args) => html `
-    <z-toolbar
-      class="multiline-container"
-      html-aria-label=${args.htmlAriaLabel}
-      style="--z-toolbar-columns: ${args["--z-toolbar-columns"]};"
-    >
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica"
-      ></z-tool>
-      <z-divider orientation="vertical"></z-divider>
-      <z-tool
-        icon="upload"
-        tooltip="Carica"
-      ></z-tool>
-      <z-tool
-        icon="plus"
-        tooltip="Aggiungi"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar aggiungi">
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-up"
-            tooltip="Su"
-          ></z-tool>
-          <z-tool
-            icon="chevron-down"
-            tooltip="Giù"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-divider orientation="vertical"></z-divider>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni 2"
-      ></z-tool>
-      <z-tool
-        icon="download"
-        tooltip="Scarica 2"
-      ></z-tool>
-      <z-tool
-        icon="plus"
-        tooltip="Aggiungi"
-      >
-        <z-toolbar html-aria-label="Sotto-toolbar aggiungi">
-          <z-tool
-            icon="copy"
-            tooltip="Copia"
-          ></z-tool>
-          <z-tool
-            icon="edit"
-            tooltip="Modifica"
-          ></z-tool>
-        </z-toolbar>
-      </z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica 2"
-      ></z-tool>
-      <z-tool
-        icon="copy"
-        tooltip="Copia 2"
-      ></z-tool>
-      <z-tool
-        icon="gear"
-        tooltip="Impostazioni 3"
-        disabled
-      ></z-tool>
-      <z-tool
-        icon="upload"
-        tooltip="Carica 3"
-      ></z-tool>
-    </z-toolbar>
-  `,
-};

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

@@ -1,122 +0,0 @@
-import { html } from "lit";
-import { PopoverPosition } from "../../beans";
-import { getColorTokenArgConfig } from "../../utils/storybook-utils";
-import "../z-button/index";
-import "./index";
-import "./index.stories.css";
-/**
- * To be sure the algorithm finds the right container, when calculating the position, set its position to `position: relative;`
- * On the following Story, the "position" prop can be set only for the original positions of the `z-tooltip` by design.
- */
-const StoryMeta = {
-    title: "ZTooltip",
-    component: "z-tooltip",
-    argTypes: {
-        "position": {
-            options: [
-                PopoverPosition.AUTO,
-                PopoverPosition.TOP,
-                PopoverPosition.BOTTOM,
-                PopoverPosition.LEFT,
-                PopoverPosition.RIGHT,
-                PopoverPosition.TOP_LEFT,
-                PopoverPosition.TOP_RIGHT,
-                PopoverPosition.BOTTOM_LEFT,
-                PopoverPosition.BOTTOM_RIGHT,
-            ],
-            control: {
-                type: "select",
-            },
-        },
-        "--z-tooltip-theme--surface": getColorTokenArgConfig(),
-    },
-    args: {
-        "dark": false,
-        "--z-tooltip-theme--surface": "var(--color-surface01)",
-        "position": PopoverPosition.LEFT,
-    },
-};
-export default StoryMeta;
-export const Default = {
-    render: (args) => html `
-    <div class="tooltip-container">
-      <z-button
-        id="trigger"
-        icon="plus-filled"
-      ></z-button>
-      <z-tooltip
-        .position=${args.position}
-        .dark=${args.dark}
-        bind-to="#trigger"
-        style="--z-tooltip-theme--surface: ${args["--z-tooltip-theme--surface"]}"
-      >
-        <div class="container">
-          <z-button>Open</z-button>
-          <z-button>Save as</z-button>
-          <z-button>Share</z-button>
-        </div>
-      </z-tooltip>
-    </div>
-    <script>
-      document.querySelector("#trigger").addEventListener("click", () => {
-        if (document.querySelector("z-tooltip").open) {
-          document.querySelector("z-tooltip").open = false;
-        } else {
-          document.querySelector("z-tooltip").open = true;
-        }
-      });
-    </script>
-  `,
-};
-/**
- * When `closable` property is set to `false`, you can open the tooltip on hover and still click things outside without closing it.
- * In the Story below, the tooltip is opened hovering the button.
- */
-export const AutocloseOff = {
-    render: (args) => html `
-    <div class="tooltip-container">
-      <z-button
-        id="info-button"
-        icon="arrow-clockwise-up-left"
-      ></z-button>
-      <z-tooltip
-        .position="${args.position}"
-        .dark="${args.dark}"
-        closable="false"
-        bind-to="#info-button"
-        style="--z-tooltip-theme--surface: ${args["--z-tooltip-theme--surface"]}"
-      >
-        <span class="tooltip-info-text">Clicca per fare girare la freccia</span>
-      </z-tooltip>
-    </div>
-    <script>
-      button = document.querySelector("#info-button");
-      tooltip = document.querySelector("z-tooltip");
-      button.addEventListener("mouseover", () => {
-        tooltip.open = true;
-      });
-      button.addEventListener("focusin", () => {
-        tooltip.open = true;
-      });
-      button.addEventListener("mouseout", () => {
-        tooltip.open = false;
-      });
-      button.addEventListener("focusout", () => {
-        tooltip.open = false;
-      });
-      button.onclick = () => {
-        switch (button.icon) {
-          case "arrow-clockwise-up-left":
-            button.icon = "arrow-clockwise-up-right";
-            break;
-          case "arrow-clockwise-up-right":
-            button.icon = "arrow-clockwise-down-right";
-            break;
-          case "arrow-clockwise-down-right":
-            button.icon = "arrow-clockwise-up-left";
-            break;
-        }
-      };
-    </script>
-  `,
-};

package/dist/collection/components/z-visually-hidden/index.stories.js

@@ -1,27 +0,0 @@
-import { html } from "lit";
-import "./index";
-export default {
-    title: "ZVisuallyHidden",
-    component: "z-visually-hidden",
-};
-export const Default = {
-    render: () => html `<h2 class="heading-2">ZVisuallyHidden</h2>
-      <span
-        >This component visually hide an element while still allowing it to be exposed to assistive technologies (such
-        as screen readers).</span
-      ><span>
-        There are real world situations where visually hiding content may be appropriate:
-        <ul>
-          <li>Hide visually the text of <code>ZAriaAlert</code></li>
-          <li>
-            Take advantage of the behavior and semantics of a native element like a checkbox or radio button, but
-            replace it with a custom styled element visually.
-          </li>
-          <li>
-            Hide visually an <code>h1</code> because could be redundant for a sighted user but could be usefull for
-            navigation through ScreenReader rotor
-          </li>
-        </ul>
-      </span>
-      <z-visually-hidden><div>Hello</div></z-visually-hidden>`,
-};

package/dist/collection/snowflakes/myz/card/z-myz-card/index.stories.js

@@ -1,72 +0,0 @@
-import {html} from "lit";
-import "../../../../components/z-toggle-button/index";
-import "../z-myz-card-alert/index";
-import "../z-myz-card-body/index";
-import "../z-myz-card-cover/index";
-import "../z-myz-card-footer/index";
-import "../z-myz-card-header/index";
-import "../z-myz-card-icon/index";
-import "../z-myz-card-list/index";
-import "./index";
-
-export default {
-  title: "Snowflakes/MyzCard/ZMyzCard",
-  component: "z-myz-card",
-
-  args: {
-    cardtype: "virtuale",
-    faded: false,
-    ishighlighted: false,
-    ispressed: true,
-    titolo: "Card Header",
-  },
-};
-
-export const ZMyzCard = {
-  render: (args) =>
-    html`<z-myz-card
-      cardtype="${args.cardtype}"
-      faded="${args.faded}"
-      ishighlighted="${args.ishighlighted}"
-      ispressed="${args.ispressed}"
-    >
-      <z-myz-card-header
-        cardtype="${args.cardtype}"
-        faded="${args.faded}"
-        titolo="${args.titolo}"
-      >
-        <z-myz-card-icon
-          icon="book-minus"
-          slot="icon"
-        />
-      </z-myz-card-header>
-      <z-myz-card-body>
-        <z-myz-card-alert
-          slot="alert"
-          iconName="checkmark-circle"
-          contenttext="Aggiunto"
-          actiontext="Annulla"
-          type="add"
-        ></z-myz-card-alert>
-        <z-myz-card-cover
-          slot="cover"
-          titolo="titolo"
-          img="https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808720740.jpg"
-        />
-      </z-myz-card-body>
-      <z-myz-card-footer
-        titolo="title"
-        autori="Authors"
-        isbn="97-88-80-8620-710"
-      >
-        <z-toggle-button
-          label="risorse"
-          slot="toggle"
-        ></z-toggle-button>
-        <z-myz-card-list
-          listdata='[{"isLink":true,"value":"Leggi sul browser","url":"https://booktab.it/"},{"isLink":true,"value":"Sito e risorse del libro","url":"http://online.scuola.zanichelli.it/curtisinvitoblu/"},{"isLink":false,"value":"Programmazione"},{"isLink":false,"value":"Prove di verifica"},{"isLink":true,"value":"ZTE","url":"https://zte.zanichelli.it/"}]'
-          slot="list"
-        />
-      </z-myz-card-footer>
-    </z-myz-card>`,
-};

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.stories.js

@@ -1,24 +0,0 @@
-import {html} from "lit";
-import "./index";
-
-export default {
-  title: "Snowflakes/MyzCard/ZMyzCardAlert",
-  component: "z-myz-card-alert",
-
-  args: {
-    actiontext: "Annulla",
-    contenttext: "Libro aggiunto ai miei libri preferiti",
-    iconName: "checkmark-circle",
-    type: "add",
-  },
-};
-
-export const ZMyzCardAlert = {
-  render: (args) =>
-    html`<z-myz-card-alert
-      actiontext="${args.actiontext}"
-      contenttext="${args.contenttext}"
-      iconName="${args.iconName}"
-      type="${args.type}"
-    ></z-myz-card-alert>`,
-};

package/dist/collection/snowflakes/myz/card/z-myz-card-cover/index.stories.js

@@ -1,24 +0,0 @@
-import {html} from "lit";
-import "./index";
-
-export default {
-  title: "Snowflakes/MyzCard/ZMyzCardCover",
-  component: "z-myz-card-cover",
-
-  args: {
-    defaultimg: "https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808720740.jpg",
-    faded: false,
-    img: "https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808720740.jpg",
-    titolo: "Title",
-  },
-};
-
-export const ZMyzCardCover = {
-  render: (args) =>
-    html`<z-myz-card-cover
-      defaultimg=${args.defaultimg}
-      faded=${args.faded}
-      img=${args.img}
-      titolo=${args.titolo}
-    />`,
-};