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

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

@@ -1,383 +0,0 @@
-import { html } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import { BookCardDeprecatedVariant } from "../../../beans";
-import { getColorTokenArgConfig } from "../../../utils/storybook-utils";
-import "../../z-button/index";
-import "../../z-icon/index";
-import "../../z-tag/index";
-import "./index";
-const StoryMeta = {
-    title: "Deprecated/ZBookCardDeprecated",
-    component: "z-book-card",
-    argTypes: {
-        "variant": {
-            control: {
-                type: "inline-radio",
-            },
-            options: Object.values(BookCardDeprecatedVariant),
-        },
-        "--z-book-card-ribbon-background-color": getColorTokenArgConfig(),
-        "--z-book-card-ribbon-shadow-color": getColorTokenArgConfig(),
-    },
-    args: {
-        "variant": BookCardDeprecatedVariant.EXPANDED,
-        "cover": "https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg",
-        "operaTitle": "Matematica.azzurro",
-        "volumeTitle": "Volume 3 con Tutor",
-        "authors": "Massimo Bergamini, Anna Trifone, Graziella Barozzi",
-        "isbn": "9788808930552",
-        "isbnLabel": "",
-        "ribbon": "ADOTTATO",
-        "ribbonIcon": "",
-        "ribbonInteractive": false,
-        "borderless": false,
-        "fallbackCover": "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
-        "operaTitleTag": "h1",
-        "--z-book-card-ribbon-background-color": "var(--avatar-C08)",
-        "--z-book-card-ribbon-shadow-color": "var(--green950)",
-        "--z-book-card-compact-width": "262px",
-        "--z-book-card-compact-height": "600px",
-    },
-};
-export default StoryMeta;
-export const AllProps = {
-    parameters: {
-        controls: {
-            exclude: ["borderless"],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant=${args.variant}
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      ribbon=${args.ribbon}
-      ribbon-icon=${args.ribbonIcon}
-      ribbon-interactive=${args.ribbonInteractive}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-ribbon-background-color": `${args["--z-book-card-ribbon-background-color"]}`,
-        "--z-book-card-ribbon-shadow-color": `${args["--z-book-card-ribbon-shadow-color"]}`,
-        "--z-book-card-compact-width": `${args["--z-book-card-compact-width"]}`,
-        "--z-book-card-compact-height": `${args["--z-book-card-compact-height"]}`,
-    })}
-    ></z-book-card-deprecated>`,
-};
-export const SlottedTags = {
-    parameters: {
-        controls: {
-            exclude: ["borderless"],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant=${args.variant}
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      ribbon=${args.ribbon}
-      ribbon-icon=${args.ribbonIcon}
-      ribbon-interactive=${args.ribbonInteractive}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-ribbon-background-color": `${args["--z-book-card-ribbon-background-color"]}`,
-        "--z-book-card-ribbon-shadow-color": `${args["--z-book-card-ribbon-shadow-color"]}`,
-        "--z-book-card-compact-width": `${args["--z-book-card-compact-width"]}`,
-        "--z-book-card-compact-height": `${args["--z-book-card-compact-height"]}`,
-    })}
-    >
-      <z-tag
-        slot="tags"
-        style="--z-tag-bg: var(--avatar-C18)"
-        >EDI</z-tag
-      >
-      <z-tag slot="tags">VERSIONE INSEGNANTE</z-tag>
-    </z-book-card-deprecated>`,
-};
-export const SlottedResources = {
-    parameters: {
-        controls: {
-            exclude: ["borderless"],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant=${args.variant}
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      ribbon=${args.ribbon}
-      ribbon-icon=${args.ribbonIcon}
-      ribbon-interactive=${args.ribbonInteractive}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-ribbon-background-color": `${args["--z-book-card-ribbon-background-color"]}`,
-        "--z-book-card-ribbon-shadow-color": `${args["--z-book-card-ribbon-shadow-color"]}`,
-        "--z-book-card-compact-width": `${args["--z-book-card-compact-width"]}`,
-        "--z-book-card-compact-height": `${args["--z-book-card-compact-height"]}`,
-    })}
-    >
-      <a
-        class="z-link z-link-blue z-link-icon"
-        slot="resources"
-        style="width:100%; margin-bottom: 6px;"
-      >
-        <z-icon
-          style="margin-right: 8px"
-          name="arrow-quad-north-east"
-        ></z-icon>
-        Resource link mock
-      </a>
-      <z-button
-        slot="resources"
-        variant="secondary"
-        size="x-small"
-        style="width:100%; margin-bottom: 16px;"
-        >Resource CTA mock</z-button
-      >
-    </z-book-card-deprecated>`,
-};
-export const SlottedHeaderCta = {
-    parameters: {
-        controls: {
-            exclude: ["borderless"],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant=${args.variant}
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      ribbon=${args.ribbon}
-      ribbon-icon=${args.ribbonIcon}
-      ribbon-interactive=${args.ribbonInteractive}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-ribbon-background-color": `${args["--z-book-card-ribbon-background-color"]}`,
-        "--z-book-card-ribbon-shadow-color": `${args["--z-book-card-ribbon-shadow-color"]}`,
-        "--z-book-card-compact-width": `${args["--z-book-card-compact-width"]}`,
-        "--z-book-card-compact-height": `${args["--z-book-card-compact-height"]}`,
-    })}
-    >
-      <z-icon
-        name="star-empty"
-        slot="header-cta"
-      ></z-icon>
-    </z-book-card-deprecated>`,
-};
-export const SlottedFooterCta = {
-    parameters: {
-        controls: {
-            exclude: ["borderless"],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant=${args.variant}
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      ribbon=${args.ribbon}
-      ribbon-icon=${args.ribbonIcon}
-      ribbon-interactive=${args.ribbonInteractive}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-ribbon-background-color": `${args["--z-book-card-ribbon-background-color"]}`,
-        "--z-book-card-ribbon-shadow-color": `${args["--z-book-card-ribbon-shadow-color"]}`,
-        "--z-book-card-compact-width": `${args["--z-book-card-compact-width"]}`,
-        "--z-book-card-compact-height": `${args["--z-book-card-compact-height"]}`,
-    })}
-    >
-      <z-icon
-        name="star-empty"
-        slot="header-cta"
-      ></z-icon>
-      <div slot="footer-cta">
-        <z-button
-          href="http://dizionari.zanichelli.it"
-          target="_blank"
-          variant="secondary"
-          size="x-small"
-        >
-          Leggi il libro online
-        </z-button>
-      </div>
-    </z-book-card-deprecated>`,
-};
-export const ExpandedVariant = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "borderless", "theme", "--z-book-card-compact-width", "--z-book-card-compact-height"],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant="expanded"
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      ribbon=${args.ribbon}
-      ribbon-icon=${args.ribbonIcon}
-      ribbon-interactive=${args.ribbonInteractive}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-ribbon-background-color": `${args["--z-book-card-ribbon-background-color"]}`,
-        "--z-book-card-ribbon-shadow-color": `${args["--z-book-card-ribbon-shadow-color"]}`,
-    })}
-    >
-      <z-tag
-        slot="tags"
-        style="--z-tag-bg: var(--avatar-C18)"
-        >EDI</z-tag
-      >
-      <z-tag slot="tags">VERSIONE INSEGNANTE</z-tag>
-      <a
-        class="z-link z-link-blue z-link-icon"
-        slot="resources"
-        style="width:100%; margin-bottom: 6px;"
-      >
-        <z-icon
-          style="margin-right: 8px"
-          name="arrow-quad-north-east"
-        ></z-icon>
-        Resource link mock
-      </a>
-      <z-button
-        slot="resources"
-        variant="secondary"
-        size="x-small"
-        style="width:100%; margin-bottom: 16px;"
-        >Resource CTA mock</z-button
-      >
-      <z-icon
-        name="star-empty"
-        slot="header-cta"
-        tabindex="0"
-      ></z-icon>
-    </z-book-card-deprecated>`,
-};
-export const SearchVariant = {
-    parameters: {
-        controls: {
-            exclude: ["variant", "borderless", "theme", "--z-book-card-compact-width", "--z-book-card-compact-height"],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant="search"
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      ribbon=${args.ribbon}
-      ribbon-icon=${args.ribbonIcon}
-      ribbon-interactive=${args.ribbonInteractive}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-ribbon-background-color": `${args["--z-book-card-ribbon-background-color"]}`,
-        "--z-book-card-ribbon-shadow-color": `${args["--z-book-card-ribbon-shadow-color"]}`,
-    })}
-    >
-      <z-icon
-        name="star-empty"
-        slot="header-cta"
-      ></z-icon>
-      <z-tag
-        slot="tags"
-        style="--z-tag-bg: var(--avatar-C18)"
-        >EDI</z-tag
-      >
-      <z-tag slot="tags">VERSIONE INSEGNANTE</z-tag>
-      <div slot="footer-cta">
-        <z-button
-          href="http://dizionari.zanichelli.it"
-          target="_blank"
-          variant="secondary"
-          size="x-small"
-        >
-          Leggi il libro online
-        </z-button>
-      </div>
-    </z-book-card-deprecated>`,
-};
-export const CompactVariant = {
-    parameters: {
-        controls: {
-            exclude: [
-                "variant",
-                "ribbon",
-                "ribbonIcon",
-                "ribbonInteractive",
-                "--z-book-card-ribbon-background-color",
-                "--z-book-card-ribbon-shadow-color",
-            ],
-        },
-    },
-    render: (args) => html `<z-book-card-deprecated
-      variant="compact"
-      cover=${args.cover}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      borderless=${args.borderless}
-      authors=${args.authors}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      fallback-cover=${args.fallbackCover}
-      opera-title-tag=${args.operaTitleTag}
-      style=${styleMap({
-        "--z-book-card-compact-width": `${args["--z-book-card-compact-width"]}`,
-        "--z-book-card-compact-height": `${args["--z-book-card-compact-height"]}`,
-    })}
-    >
-      <z-icon
-        name="star-empty"
-        slot="header-cta"
-      ></z-icon>
-      <z-tag
-        slot="tags"
-        style="--z-tag-bg: var(--avatar-C18)"
-        >EDI</z-tag
-      >
-      <z-tag slot="tags">VERSIONE INSEGNANTE</z-tag>
-      <div
-        slot="footer-cta"
-        style="display:flex; gap:8px;"
-      >
-        <z-button
-          href="http://dizionari.zanichelli.it"
-          target="_blank"
-          variant="secondary"
-          size="x-small"
-        >
-          Call to action
-        </z-button>
-        <z-button
-          icon="arrow-quad-north-east"
-          variant="secondary"
-          size="x-small"
-        ></z-button>
-      </div>
-    </z-book-card-deprecated>`,
-};

package/dist/collection/components/deprecated/z-menu-deprecated/index.stories.js

@@ -1,128 +0,0 @@
-import { html } from "lit";
-import "../z-menu-section-deprecated/index";
-import "./index";
-const StoryMeta = {
-    title: "Deprecated/ZMenuDeprecated",
-    component: "z-menu",
-    args: {
-        active: false,
-        floating: true,
-        verticalContext: false,
-    },
-};
-export default StoryMeta;
-export const FloatingContentLayout = {
-    render: (args) => html `
-    <z-menu-deprecated
-      .active=${args.active}
-      .floating=${args.floating}
-      .verticalContext=${args.verticalContext}
-    >
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section-deprecated slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 3.2</a
-        >
-      </z-menu-section-deprecated>
-      <z-menu-section-deprecated slot="item">
-        <h3>Item 4</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 4.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 4.2</a
-        >
-      </z-menu-section-deprecated>
-      <a
-        href=""
-        slot="item"
-        >Item 5</a
-      >
-    </z-menu-deprecated>
-  `,
-};
-export const WithHeader = {
-    render: (args) => html `
-    <z-menu-deprecated
-      .active=${args.active}
-      .floating=${args.floating}
-      .verticalContext=${args.verticalContext}
-    >
-      <img
-        slot="header"
-        src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"
-      />
-      <h4 slot="header">Menu header</h4>
-      <h3>Menu label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <z-menu-section-deprecated slot="item">
-        <h3>Item 3</h3>
-        <a
-          href=""
-          slot="item"
-          >Item 3.1</a
-        >
-        <a
-          href=""
-          slot="item"
-          >Item 3.2</a
-        >
-      </z-menu-section-deprecated>
-      <a
-        href=""
-        slot="item"
-        >Item 4</a
-      >
-    </z-menu-deprecated>
-  `,
-};
-export const ActiveWithoutItems = {
-    parameters: {
-        controls: {
-            exclude: ["floating"],
-        },
-    },
-    render: (args) => html `
-    <z-menu-deprecated
-      .active=${true}
-      .verticalContext=${args.verticalContext}
-    >
-      <a
-        href="https://cataas.com/cat/gif"
-        target="_blank"
-        >Click me</a
-      >
-    </z-menu-deprecated>
-  `,
-};

package/dist/collection/components/deprecated/z-menu-section-deprecated/index.stories.js

@@ -1,40 +0,0 @@
-import { html } from "lit";
-import "./index";
-const StoryMeta = {
-    title: "Deprecated/ZMenuSection",
-    component: "z-menu-section-deprecated",
-    args: {
-        active: false,
-    },
-};
-export default StoryMeta;
-export const WithItems = {
-    render: (args) => html `
-    <z-menu-section-deprecated .active=${args.active}>
-      <h3>Label</h3>
-      <a
-        href=""
-        slot="item"
-        >Item 1</a
-      >
-      <a
-        href=""
-        slot="item"
-        >Item 2</a
-      >
-      <a
-        href=""
-        slot="item"
-        active
-        >Item 3 - active</a
-      >
-    </z-menu-section-deprecated>
-  `,
-};
-export const WithoutItems = {
-    render: (args) => html `
-    <z-menu-section-deprecated .active=${args.active}>
-      <h3>Label</h3>
-    </z-menu-section-deprecated>
-  `,
-};

package/dist/collection/components/deprecated/z-section-title/index.stories.js

@@ -1,56 +0,0 @@
-import { html } from "lit";
-import { ZSectionTitleDividerPosition } from "../../../beans";
-import { getColorTokenArgConfig } from "../../../utils/storybook-utils";
-import "./index";
-/**
- * ⚠️ This component is **deprecated** and may be removed soon.
- * Use the typography tokens or classes instead (see `Typography/Typography classes` section).
- */
-const StoryMeta = {
-    title: "Deprecated/ZSectionTitle",
-    component: "z-section-title",
-    argTypes: {
-        "dividerPosition": {
-            options: Object.values(ZSectionTitleDividerPosition),
-            control: {
-                type: "inline-radio",
-            },
-        },
-        "--z-section-title--divider-color": getColorTokenArgConfig(),
-    },
-    args: {
-        "uppercase": true,
-        "--z-section-title--divider-color": "var(--red500)",
-    },
-};
-export default StoryMeta;
-export const PrimaryTitleOnly = {
-    args: {
-        dividerPosition: ZSectionTitleDividerPosition.BEFORE,
-    },
-    render: (args) => html `
-    <z-section-title
-      .dividerPosition=${args.dividerPosition}
-      .uppercase=${args.uppercase}
-      .style="--z-section-title--divider-color: ${args["--z-section-title--divider-color"]}"
-    >
-      <h4 slot="primary-title">Primary title</h4>
-    </z-section-title>
-  `,
-};
-export const SecondaryTitle = {
-    parameters: {
-        controls: {
-            exclude: ["dividerPosition"],
-        },
-    },
-    render: (args) => html `
-    <z-section-title
-      .uppercase=${args.uppercase}
-      .style="--z-section-title--divider-color: ${args["--z-section-title--divider-color"]}"
-    >
-      <h5 slot="secondary-title">Secondary title</h5>
-      <h4 slot="primary-title">Primary title</h4>
-    </z-section-title>
-  `,
-};

package/dist/collection/components/file-upload/z-file/index.stories.js

@@ -1,16 +0,0 @@
-import { html } from "lit";
-import "./index";
-export default {
-    title: "ZFile",
-    component: "z-file",
-};
-export const Default = {
-    args: {
-        fileNumber: 1,
-        fileName: "abcdefghilmnopqrst.jpg",
-    },
-    render: (args) => html `<z-file
-      file-number="${args.fileNumber}"
-      file-name="${args.fileName}"
-    ></z-file>`,
-};