@zanichelli/albe-web-components 17.2.1 → 18.0.0

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

@@ -1,5 +1,6 @@
 import { html } from "lit";
-import { BookCardTagStatus, BookCardVariant } from "../../../beans";
+import { styleMap } from "lit/directives/style-map.js";
+import { BookCardVariant } from "../../../beans";
 import "../../z-button/index";
 import "../../z-icon/index";
 import "../../z-tag/index";
@@ -9,51 +10,39 @@ const StoryMeta = {
     title: "ZBookCard/ZBookCard",
     component: "z-book-card",
     argTypes: {
-        variant: {
+        "variant": {
             control: {
                 type: "inline-radio",
             },
             options: Object.values(BookCardVariant),
         },
-        edi: {
-            control: {
-                type: "object",
-            },
-        },
-        annotated: {
-            control: {
-                type: "object",
-            },
-        },
-        teacherVersion: {
-            control: {
-                type: "object",
-            },
-        },
-        theme: {
-            control: {
-                type: "inline-radio",
-            },
-            options: ["theme-default", "theme-dark", "theme-black-yellow"],
-        },
+        "--z-book-card-portrait-cover-height": { control: { type: "text" } },
+        "--z-book-card-title-lines": { control: { type: "text" } },
+        "--z-book-card-title-word-break": { control: { type: "text" } },
+        "--z-book-card-subtitle-lines": { control: { type: "text" } },
+        "--z-book-card-subtitle-word-break": { control: { type: "text" } },
+        "--z-book-card-authors-lines": { control: { type: "text" } },
+        "--z-book-card-authors-word-break": { control: { type: "text" } },
     },
     args: {
-        variant: BookCardVariant.LANDSCAPE,
-        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: "(ed. cartacea)",
-        adoption: true,
-        edi: { status: BookCardTagStatus.ACTIVE, interactive: true },
-        annotated: { status: BookCardTagStatus.DISABLED, interactive: true },
-        teacherVersion: { status: BookCardTagStatus.ACTIVE, interactive: false },
-        catalogUrl: "https://www.zanichelli.it/ricerca/prodotti/matematica-multimediale-blu3ed?qid=9788808710932",
-        ebookUrl: "https://www.zanichelli.it/ricerca",
-        fallbackCover: "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
-        operaTitleHtmlTag: null,
-        theme: "theme-default",
+        "variant": BookCardVariant.LANDSCAPE,
+        "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": "(ed. cartacea)",
+        "year": "2025",
+        "ebookUrl": "https://www.zanichelli.it/ricerca",
+        "fallbackCover": "https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg",
+        "titleHtmlTag": null,
+        "--z-book-card-portrait-cover-height": "378px",
+        "--z-book-card-title-lines": "2",
+        "--z-book-card-title-word-break": "initial",
+        "--z-book-card-subtitle-lines": "1",
+        "--z-book-card-subtitle-word-break": "break-all",
+        "--z-book-card-authors-lines": "1",
+        "--z-book-card-authors-word-break": "break-all",
     },
 };
 export default StoryMeta;
@@ -66,15 +55,19 @@ export const Card = {
       volume-title=${args.volumeTitle}
       isbn=${args.isbn}
       isbn-label=${args.isbnLabel}
-      edi=${JSON.stringify(args.edi)}
-      annotated=${JSON.stringify(args.annotated)}
-      teacher-version=${JSON.stringify(args.teacherVersion)}
-      adoption=${args.adoption}
-      catalog-url=${args.catalogUrl}
+      year=${args.year}
       ebook-url=${args.ebookUrl}
       fallback-cover=${args.fallbackCover}
-      opera-title-html-tag=${args.operaTitleHtmlTag}
-      class=${args.theme}
+      title-html-tag=${args.titleHtmlTag}
+      style=${styleMap({
+        "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
+        "--z-book-card-title-lines": args["--z-book-card-title-lines"],
+        "--z-book-card-title-word-break": args["--z-book-card-title-word-break"],
+        "--z-book-card-subtitle-lines": args["--z-book-card-subtitle-lines"],
+        "--z-book-card-subtitle-word-break": args["--z-book-card-subtitle-word-break"],
+        "--z-book-card-authors-lines": args["--z-book-card-authors-lines"],
+        "--z-book-card-authors-word-break": args["--z-book-card-authors-word-break"],
+    })}
     ></z-book-card>`,
 };
 export const WithSlottedContent = {
@@ -86,99 +79,100 @@ export const WithSlottedContent = {
       volume-title=${args.volumeTitle}
       isbn=${args.isbn}
       isbn-label=${args.isbnLabel}
-      edi=${JSON.stringify(args.edi)}
-      annotated=${JSON.stringify(args.annotated)}
-      teacher-version=${JSON.stringify(args.teacherVersion)}
-      adoption=${args.adoption}
-      catalog-url=${args.catalogUrl}
+      year=${args.year}
       ebook-url=${args.ebookUrl}
       fallback-cover=${args.fallbackCover}
-      opera-title-html-tag=${args.operaTitleHtmlTag}
-      class=${args.theme}
+      title-html-tag=${args.titleHtmlTag}
+      style=${styleMap({
+        "--z-book-card-portrait-cover-height": args["--z-book-card-portrait-cover-height"],
+        "--z-book-card-title-lines": args["--z-book-card-title-lines"],
+        "--z-book-card-title-word-break": args["--z-book-card-title-word-break"],
+        "--z-book-card-subtitle-lines": args["--z-book-card-subtitle-lines"],
+        "--z-book-card-subtitle-word-break": args["--z-book-card-subtitle-word-break"],
+        "--z-book-card-authors-lines": args["--z-book-card-authors-lines"],
+        "--z-book-card-authors-word-break": args["--z-book-card-authors-word-break"],
+    })}
     >
       <div slot="cta">
         <z-icon
-          style="padding: 4px; cursor: pointer;"
+          style="cursor: pointer; fill: var(--blue500);"
           name="star-full"
           width="20"
           height="20"
         ></z-icon>
       </div>
+
       <div slot="ebook">
         <z-button
-          variant="secondary"
+          variant="primary"
           size="x-small"
           >custom ebook button</z-button
         >
       </div>
+
+      <div slot="tags">
+        <z-tag style="--z-tag-bg: var(--gray500);">EDIZIONE DIGITALE INSEGNANTE</z-tag>
+        <z-tag style="--z-tag-bg: var(--blue50); --z-tag-text-color: var(--gray950);">BES</z-tag>
+      </div>
+
+      <div slot="data">
+        <a
+          href="https://www.zanichelli.it"
+          class="catalog-link z-link z-link-blue z-link-icon body-4-sb"
+          >Scheda catalogo
+          <z-icon
+            name="arrow-quad-north-east"
+            width="14"
+            height="14"
+          ></z-icon>
+        </a>
+        <div
+          class="body-5-sb"
+          style="padding: calc(var(--space-unit) / 2) var(--space-unit); background-color: var(--green100); border-radius: 100px;"
+        >
+          ADOTTATO
+        </div>
+      </div>
+
       <div
         slot="apps"
-        style="display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
+        style="display: flex; flex-wrap: wrap;"
       >
         <z-book-card-app
           icon="https://placehold.co/24"
-          name="Tutor di matematica"
+          name="Tutor di matematica matematica"
           info="test test"
           link="http://localhost"
-          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
-        ></z-book-card-app
-        ><z-book-card-app
+        ></z-book-card-app>
+        <z-book-card-app
           icon="https://placehold.co/24"
           name="Esercizi"
           info="test test"
           link="http://localhost"
-          style="width:315px; height:47px; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
-        ></z-book-card-app
-        ><z-book-card-app
-          icon="https://placehold.co/24"
-          name="Mappe Mappe Mappe Mappe Mappe"
-          info="test test"
-          link="http://localhost"
-          style="width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;"
-        ></z-book-card-app
-        ><z-book-card-app
-          icon="https://placehold.co/24"
-          name="Scrittura"
-          info="test test"
-          link="http://localhost"
-          style="width:315px; height:47px;; --z-book-card-app-padding-x: 16px;"
         ></z-book-card-app>
       </div>
-    </z-book-card>`,
-};
-export const WithCoverOverlaySlot = {
-    render: (args) => html `<z-book-card
-      variant=${args.variant}
-      cover=${args.cover}
-      authors=${args.authors}
-      opera-title=${args.operaTitle}
-      volume-title=${args.volumeTitle}
-      isbn=${args.isbn}
-      isbn-label=${args.isbnLabel}
-      edi=${JSON.stringify(args.edi)}
-      annotated=${JSON.stringify(args.annotated)}
-      teacher-version=${JSON.stringify(args.teacherVersion)}
-      adoption=${args.adoption}
-      catalog-url=${args.catalogUrl}
-      ebook-url=${args.ebookUrl}
-      fallback-cover=${args.fallbackCover}
-      opera-title-html-tag=${args.operaTitleHtmlTag}
-      class=${args.theme}
-    >
+
       <div
         slot="coverOverlay"
-        style="
-                  font-family: IBM Plex Sans;
-                  font-size: 14px;
-                  font-style: normal;
-                  font-weight: 600;
-                  line-height: 20px;
-                  letter-spacing: 0.052px;
-                  text-transform: uppercase;
-                "
+        class="body-4-sb"
+        style="text-align: center; padding: 16px 0;"
       >
-        Anteprima del libro senza risorse multimediali
+        ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI
       </div>
+
+      <style>
+        z-book-card-app {
+          --z-book-card-app-padding-x: 8px;
+          width: 100%;
+          max-width: 100%;
+          height: 47px;
+
+          @media (min-width: 768px) {
+            --z-book-card-app-padding-x: 16px;
+            width: 315px;
+          }
+        }
+      </style>
     </z-book-card>`,
 };
 //# sourceMappingURL=index.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZBookCard} from \".\";\nimport {BookCardTagStatus, BookCardVariant} from \"../../../beans\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard & {\n  theme: \"theme-default\" | \"theme-dark\" | \"theme-black-yellow\";\n};\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCard\",\n  component: \"z-book-card\",\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardVariant),\n    },\n    edi: {\n      control: {\n        type: \"object\",\n      },\n    },\n    annotated: {\n      control: {\n        type: \"object\",\n      },\n    },\n    teacherVersion: {\n      control: {\n        type: \"object\",\n      },\n    },\n    theme: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: [\"theme-default\", \"theme-dark\", \"theme-black-yellow\"],\n    },\n  },\n  args: {\n    variant: BookCardVariant.LANDSCAPE,\n    cover: \"https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg\",\n    operaTitle: \"Matematica.azzurro\",\n    volumeTitle: \"Volume 3 con Tutor\",\n    authors: \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n    isbn: \"9788808930552\",\n    isbnLabel: \"(ed. cartacea)\",\n    adoption: true,\n    edi: {status: BookCardTagStatus.ACTIVE, interactive: true},\n    annotated: {status: BookCardTagStatus.DISABLED, interactive: true},\n    teacherVersion: {status: BookCardTagStatus.ACTIVE, interactive: false},\n    catalogUrl: \"https://www.zanichelli.it/ricerca/prodotti/matematica-multimediale-blu3ed?qid=9788808710932\",\n    ebookUrl: \"https://www.zanichelli.it/ricerca\",\n    fallbackCover: \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    operaTitleHtmlTag: null,\n    theme: \"theme-default\",\n  },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const Card = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      edi=${JSON.stringify(args.edi)}\n      annotated=${JSON.stringify(args.annotated)}\n      teacher-version=${JSON.stringify(args.teacherVersion)}\n      adoption=${args.adoption}\n      catalog-url=${args.catalogUrl}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      opera-title-html-tag=${args.operaTitleHtmlTag}\n      class=${args.theme}\n    ></z-book-card>`,\n} satisfies Story;\n\nexport const WithSlottedContent = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      edi=${JSON.stringify(args.edi)}\n      annotated=${JSON.stringify(args.annotated)}\n      teacher-version=${JSON.stringify(args.teacherVersion)}\n      adoption=${args.adoption}\n      catalog-url=${args.catalogUrl}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      opera-title-html-tag=${args.operaTitleHtmlTag}\n      class=${args.theme}\n    >\n      <div slot=\"cta\">\n        <z-icon\n          style=\"padding: 4px; cursor: pointer;\"\n          name=\"star-full\"\n          width=\"20\"\n          height=\"20\"\n        ></z-icon>\n      </div>\n      <div slot=\"ebook\">\n        <z-button\n          variant=\"secondary\"\n          size=\"x-small\"\n          >custom ebook button</z-button\n        >\n      </div>\n      <div\n        slot=\"apps\"\n        style=\"display: flex; flex-wrap: wrap; border-top: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;\"\n      >\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Tutor di matematica\"\n          info=\"test test\"\n          link=\"http://localhost\"\n          style=\"width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;\"\n        ></z-book-card-app\n        ><z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Esercizi\"\n          info=\"test test\"\n          link=\"http://localhost\"\n          style=\"width:315px; height:47px; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;\"\n        ></z-book-card-app\n        ><z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Mappe Mappe Mappe Mappe Mappe\"\n          info=\"test test\"\n          link=\"http://localhost\"\n          style=\"width:315px; height:47px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; --z-book-card-app-padding-x: 16px;\"\n        ></z-book-card-app\n        ><z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Scrittura\"\n          info=\"test test\"\n          link=\"http://localhost\"\n          style=\"width:315px; height:47px;; --z-book-card-app-padding-x: 16px;\"\n        ></z-book-card-app>\n      </div>\n    </z-book-card>`,\n} satisfies Story;\n\nexport const WithCoverOverlaySlot = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      edi=${JSON.stringify(args.edi)}\n      annotated=${JSON.stringify(args.annotated)}\n      teacher-version=${JSON.stringify(args.teacherVersion)}\n      adoption=${args.adoption}\n      catalog-url=${args.catalogUrl}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      opera-title-html-tag=${args.operaTitleHtmlTag}\n      class=${args.theme}\n    >\n      <div\n        slot=\"coverOverlay\"\n        style=\"\n                  font-family: IBM Plex Sans;\n                  font-size: 14px;\n                  font-style: normal;\n                  font-weight: 600;\n                  line-height: 20px;\n                  letter-spacing: 0.052px;\n                  text-transform: uppercase;\n                \"\n      >\n        Anteprima del libro senza risorse multimediali\n      </div>\n    </z-book-card>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../../src/components/book-card/z-book-card/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {ZBookCard} from \".\";\nimport {BookCardVariant} from \"../../../beans\";\nimport {CSSVarsArguments} from \"../../../utils/storybook-utils\";\nimport \"../../z-button/index\";\nimport \"../../z-icon/index\";\nimport \"../../z-tag/index\";\nimport \"../z-book-card-app/index\";\nimport \"./index\";\n\ntype ZBookCardStoriesArgs = ZBookCard &\n  CSSVarsArguments<\n    | \"--z-book-card-portrait-cover-height\"\n    | \"--z-book-card-title-lines\"\n    | \"--z-book-card-title-word-break\"\n    | \"--z-book-card-subtitle-lines\"\n    | \"--z-book-card-subtitle-word-break\"\n    | \"--z-book-card-authors-lines\"\n    | \"--z-book-card-authors-word-break\"\n  >;\n\nconst StoryMeta = {\n  title: \"ZBookCard/ZBookCard\",\n  component: \"z-book-card\",\n  argTypes: {\n    \"variant\": {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(BookCardVariant),\n    },\n    \"--z-book-card-portrait-cover-height\": {control: {type: \"text\"}},\n    \"--z-book-card-title-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-title-word-break\": {control: {type: \"text\"}},\n    \"--z-book-card-subtitle-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-subtitle-word-break\": {control: {type: \"text\"}},\n    \"--z-book-card-authors-lines\": {control: {type: \"text\"}},\n    \"--z-book-card-authors-word-break\": {control: {type: \"text\"}},\n  },\n  args: {\n    \"variant\": BookCardVariant.LANDSCAPE,\n    \"cover\": \"https://staticmy.zanichelli.it/catalogo/assets/m40001.9788808490056.jpg\",\n    \"operaTitle\": \"Matematica.azzurro\",\n    \"volumeTitle\": \"Volume 3 con Tutor\",\n    \"authors\": \"Massimo Bergamini, Anna Trifone, Graziella Barozzi\",\n    \"isbn\": \"9788808930552\",\n    \"isbnLabel\": \"(ed. cartacea)\",\n    \"year\": \"2025\",\n    \"ebookUrl\": \"https://www.zanichelli.it/ricerca\",\n    \"fallbackCover\": \"https://staticmy.zanichelli.it/copertine/dashboard/Dashboard_Book_Placeholder.jpg\",\n    \"titleHtmlTag\": null,\n    \"--z-book-card-portrait-cover-height\": \"378px\",\n    \"--z-book-card-title-lines\": \"2\",\n    \"--z-book-card-title-word-break\": \"initial\",\n    \"--z-book-card-subtitle-lines\": \"1\",\n    \"--z-book-card-subtitle-word-break\": \"break-all\",\n    \"--z-book-card-authors-lines\": \"1\",\n    \"--z-book-card-authors-word-break\": \"break-all\",\n  },\n} satisfies Meta<ZBookCardStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZBookCardStoriesArgs>;\n\nexport const Card = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    ></z-book-card>`,\n} satisfies Story;\n\nexport const WithSlottedContent = {\n  render: (args) =>\n    html`<z-book-card\n      variant=${args.variant}\n      cover=${args.cover}\n      authors=${args.authors}\n      opera-title=${args.operaTitle}\n      volume-title=${args.volumeTitle}\n      isbn=${args.isbn}\n      isbn-label=${args.isbnLabel}\n      year=${args.year}\n      ebook-url=${args.ebookUrl}\n      fallback-cover=${args.fallbackCover}\n      title-html-tag=${args.titleHtmlTag}\n      style=${styleMap({\n        \"--z-book-card-portrait-cover-height\": args[\"--z-book-card-portrait-cover-height\"],\n        \"--z-book-card-title-lines\": args[\"--z-book-card-title-lines\"],\n        \"--z-book-card-title-word-break\": args[\"--z-book-card-title-word-break\"],\n        \"--z-book-card-subtitle-lines\": args[\"--z-book-card-subtitle-lines\"],\n        \"--z-book-card-subtitle-word-break\": args[\"--z-book-card-subtitle-word-break\"],\n        \"--z-book-card-authors-lines\": args[\"--z-book-card-authors-lines\"],\n        \"--z-book-card-authors-word-break\": args[\"--z-book-card-authors-word-break\"],\n      })}\n    >\n      <div slot=\"cta\">\n        <z-icon\n          style=\"cursor: pointer; fill: var(--blue500);\"\n          name=\"star-full\"\n          width=\"20\"\n          height=\"20\"\n        ></z-icon>\n      </div>\n\n      <div slot=\"ebook\">\n        <z-button\n          variant=\"primary\"\n          size=\"x-small\"\n          >custom ebook button</z-button\n        >\n      </div>\n\n      <div slot=\"tags\">\n        <z-tag style=\"--z-tag-bg: var(--gray500);\">EDIZIONE DIGITALE INSEGNANTE</z-tag>\n        <z-tag style=\"--z-tag-bg: var(--blue50); --z-tag-text-color: var(--gray950);\">BES</z-tag>\n      </div>\n\n      <div slot=\"data\">\n        <a\n          href=\"https://www.zanichelli.it\"\n          class=\"catalog-link z-link z-link-blue z-link-icon body-4-sb\"\n          >Scheda catalogo\n          <z-icon\n            name=\"arrow-quad-north-east\"\n            width=\"14\"\n            height=\"14\"\n          ></z-icon>\n        </a>\n        <div\n          class=\"body-5-sb\"\n          style=\"padding: calc(var(--space-unit) / 2) var(--space-unit); background-color: var(--green100); border-radius: 100px;\"\n        >\n          ADOTTATO\n        </div>\n      </div>\n\n      <div\n        slot=\"apps\"\n        style=\"display: flex; flex-wrap: wrap;\"\n      >\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Tutor di matematica matematica\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n        <z-book-card-app\n          icon=\"https://placehold.co/24\"\n          name=\"Esercizi\"\n          info=\"test test\"\n          link=\"http://localhost\"\n        ></z-book-card-app>\n      </div>\n\n      <div\n        slot=\"coverOverlay\"\n        class=\"body-4-sb\"\n        style=\"text-align: center; padding: 16px 0;\"\n      >\n        ANTEPRIMA DEL LIBRO SENZA RISORSE MULTIMEDIALI\n      </div>\n\n      <style>\n        z-book-card-app {\n          --z-book-card-app-padding-x: 8px;\n          width: 100%;\n          max-width: 100%;\n          height: 47px;\n\n          @media (min-width: 768px) {\n            --z-book-card-app-padding-x: 16px;\n            width: 315px;\n          }\n        }\n      </style>\n    </z-book-card>`,\n} satisfies Story;\n"]}

package/dist/collection/components/book-card/z-book-card/styles.css

@@ -1,14 +1,16 @@
 :host {
-  display: block;
-  max-width: fit-content;
-  border-radius: var(--border-radius);
-}
+  --z-book-card-portrait-cover-height: 378px;
+  --z-book-card-title-lines: 2;
+  --z-book-card-title-word-break: initial;
+  --z-book-card-subtitle-lines: 1;
+  --z-book-card-subtitle-word-break: break-all;
+  --z-book-card-authors-lines: 1;
+  --z-book-card-authors-word-break: break-all;
 
-:host > article {
+  display: flex;
   width: 304px;
-  min-height: 686px;
   box-sizing: border-box;
-  padding: var(--space-unit) 0;
+  flex-direction: column;
   border: solid var(--border-size-medium) var(--color-surface03);
   background-color: var(--color-surface01);
   border-radius: var(--border-radius);
@@ -16,22 +18,25 @@
   font-family: var(--font-family-sans);
 }
 
-:host > article .main-content {
+:host .main-content {
   display: flex;
+  height: 100%;
+  box-sizing: border-box;
   flex-direction: column;
-  gap: calc(var(--space-unit) * 2);
+  padding: var(--space-unit);
+  gap: var(--space-unit);
 }
 
-:host > article .main-content .cover {
+:host .main-content .cover {
   position: relative;
   display: flex;
   overflow: hidden;
-  height: 378px;
-  margin: 0 var(--space-unit);
+  height: var(--z-book-card-portrait-cover-height);
+  background: var(--color-white);
   border-radius: var(--border-radius);
 }
 
-:host > article .main-content .cover img {
+:host .main-content .cover img {
   max-width: 100%;
   max-height: 100%;
   align-self: end;
@@ -48,12 +53,12 @@
   color: var(--color-white);
 }
 
-:host > article .main-content .cover ::slotted([slot="coverOverlay"]) {
+:host .main-content .cover ::slotted([slot="coverOverlay"]) {
   min-height: 80px;
   max-height: 336px;
 }
 
-:host > article .main-content .card-info {
+:host .main-content .card-info {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -61,138 +66,85 @@
   gap: calc(var(--space-unit) * 2);
 }
 
-:host > article .main-content .card-info .book-data {
+:host .main-content .card-info .top {
   display: flex;
-  flex: 1;
   flex-direction: column;
-  justify-content: space-between;
-  margin: 0 var(--space-unit);
-  gap: var(--space-unit);
-}
-
-:host > article .main-content .card-info .book-data .authors-title-cta-section {
-  display: grid;
-  column-gap: var(--space-unit);
-  grid-template-areas:
-    "authors authors"
-    "title cta";
-  grid-template-columns: auto 24px;
-}
-
-:host > article .main-content .card-info .book-data .authors-title-cta-section .authors {
-  display: -webkit-box;
-  overflow: hidden;
-  height: 20px;
-  margin-bottom: calc(var(--space-unit) / 2);
-  -webkit-box-orient: vertical;
-  grid-area: authors;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  text-overflow: ellipsis;
-  word-break: break-all;
-}
-
-:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title {
-  display: -webkit-box;
-  overflow: hidden;
-  height: 54px;
-  -webkit-box-orient: vertical;
-  grid-area: title;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  text-overflow: ellipsis;
-}
-
-:host > article .main-content .card-info .book-data .authors-title-cta-section .opera-title * {
-  all: unset;
+  gap: calc(var(--space-unit) * 2);
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section {
-  margin-bottom: var(--space-unit);
+:host .main-content .card-info .top ::slotted([slot="tags"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-unit);
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .volume-title {
-  display: -webkit-box;
-  overflow: hidden;
-  height: 20px;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  text-overflow: ellipsis;
-  word-break: break-all;
+:host .main-content .card-info .top ::slotted([slot="data"]) {
+  display: flex;
+  justify-content: space-between;
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .isbn {
+:host .main-content .card-info .top .ellipsis {
   display: -webkit-box;
   overflow: hidden;
   height: 20px;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
+  line-height: 20px;
   text-overflow: ellipsis;
   word-break: break-all;
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
-  display: flex;
-  overflow: hidden;
-  height: 22px;
-  flex-flow: wrap;
-  align-items: center;
-  padding: var(--space-unit);
-  margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1) 0;
-  gap: var(--space-unit);
-}
-
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.active {
-  --z-tag-bg: var(--color-primary03);
-  --z-tag-text-color: var(--color-default-text);
+:host .main-content .card-info .top .ellipsis.opera-title {
+  height: calc(24 * var(--z-book-card-title-lines));
+  -webkit-line-clamp: var(--z-book-card-title-lines);
+  line-clamp: var(--z-book-card-title-lines);
+  line-height: 24px;
+  word-break: var(--z-book-card-title-word-break);
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.disabled {
-  --z-tag-bg: var(--color-surface03);
-  --z-tag-text-color: var(--color-default-text);
+:host .main-content .card-info .top .ellipsis.volume-title {
+  height: calc(20 * var(--z-book-card-subtitle-lines));
+  -webkit-line-clamp: var(--z-book-card-subtitle-lines);
+  line-clamp: var(--z-book-card-subtitle-lines);
+  line-height: 20px;
+  word-break: var(--z-book-card-subtitle-word-break);
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag.interactive {
-  cursor: pointer;
+:host .main-content .card-info .top .ellipsis.authors {
+  height: calc(20 * var(--z-book-card-authors-lines));
+  -webkit-line-clamp: var(--z-book-card-authors-lines);
+  line-clamp: var(--z-book-card-authors-lines);
+  line-height: 20px;
+  word-break: var(--z-book-card-authors-word-break);
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags z-tag:focus {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
+:host .main-content .card-info .top .opera-title * {
+  all: unset;
 }
 
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section {
+:host .main-content .cta-wrapper {
   display: flex;
-  height: 24px;
-  align-items: center;
   justify-content: space-between;
-  gap: var(--space-unit);
-}
-
-:host > article .main-content .card-info .book-data .isbn-tags-link-section .link-section .adoption-tag {
-  padding: calc(var(--space-unit) / 2) var(--space-unit);
-  background-color: var(--green100);
-  border-radius: 100px;
-  text-transform: uppercase;
+  gap: calc(var(--space-unit) / 2);
 }
 
-:host > article .main-content .card-info .ebook-container {
-  height: 64px;
+:host .main-content .card-info .top .link-chip-wrapper {
+  display: flex;
+  justify-content: space-between;
 }
 
-:host > article .main-content .card-info .ebook-container .ebook {
+:host .main-content .card-info .bottom .ebook {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: calc(var(--space-unit) * 2) var(--space-unit);
+  padding: var(--space-unit);
   background-color: var(--color-primary02);
   border-radius: var(--border-radius);
   gap: var(--space-unit);
 }
 
-:host > article .main-content .card-info .ebook-container .ebook .app-name {
+:host .main-content .card-info .bottom .ebook .app-name {
   display: flex;
   align-items: center;
   padding: calc(var(--space-unit) / 2) 0;
@@ -200,32 +152,30 @@
   gap: calc(var(--space-unit) / 2);
 }
 
-:host > article .main-content .card-info .ebook-container .ebook .app-name .ebook-logo {
+:host .main-content .card-info .bottom .ebook .app-name .ebook-logo {
   content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22 fill=%22none%22 aria-hidden=%22true%22%3E%3Cg clip-path=%22url(%23clip0_11996_224)%22%3E%3Cpath d=%22M14.6644 0.469604H5.00141C2.33305 0.469604 0.169922 2.63274 0.169922 5.3011V14.9641C0.169922 17.6324 2.33305 19.7956 5.00141 19.7956H14.6644C17.3328 19.7956 19.4959 17.6324 19.4959 14.9641V5.3011C19.4959 2.63274 17.3328 0.469604 14.6644 0.469604Z%22 fill=%22%23E2011A%22/%3E%3Cpath d=%22M15.9523 13.3536H12.7313C11.6861 13.3536 10.6683 13.6934 9.83241 14.3199C8.99657 13.6934 7.97873 13.3536 6.93352 13.3536H3.71252V5.30115H6.93352C7.97873 5.30115 8.99657 5.64096 9.83241 6.26745C10.6683 5.64096 11.6861 5.30115 12.7313 5.30115H15.9523V13.3536Z%22 fill=%22white%22/%3E%3Cpath d=%22M15.9523 14.3201H3.71252V14.9643H15.9523V14.3201Z%22 fill=%22black%22/%3E%3Cpath d=%22M8.22229 10.732V8.24543C8.22229 7.97165 8.51057 7.79449 8.75375 7.91689L11.2404 9.16019C11.5109 9.29548 11.5109 9.682 11.2404 9.81728L8.75375 11.0606C8.50896 11.183 8.22229 11.0058 8.22229 10.732Z%22 fill=%22black%22/%3E%3Cpath d=%22M4.35704 7.87826C5.42438 7.87826 6.28963 7.013 6.28963 5.94566C6.28963 4.87831 5.42438 4.01306 4.35704 4.01306C3.28969 4.01306 2.42444 4.87831 2.42444 5.94566C2.42444 7.013 3.28969 7.87826 4.35704 7.87826Z%22 fill=%22black%22/%3E%3Cpath d=%22M5.6454 5.62354H3.0686V6.26773H5.6454V5.62354Z%22 fill=%22white%22/%3E%3Cpath d=%22M4.67917 4.65723H4.03497V7.23402H4.67917V4.65723Z%22 fill=%22white%22/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%22clip0_11996_224%22%3E%3Crect width=%2219.326%22 height=%2219.326%22 fill=%22white%22 transform=%22translate(0.169922 0.469604)%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
 }
 
-:host > article .main-content .card-info .ebook-container .ebook .app-name .laz {
+:host .main-content .card-info .bottom .ebook .app-name .laz {
   color: var(--red500);
 }
 
-::slotted([slot="cta"]) {
-  grid-area: cta;
-}
-
-:host > article.landscape {
+:host([variant="landscape"]) {
   width: 635px;
   min-height: 332px;
-  max-height: 428px;
+  max-height: 432px;
   padding: 0;
 }
 
-:host > article.landscape .main-content {
-  height: 296px;
+:host([variant="landscape"]) .main-content {
+  height: 332px;
+  box-sizing: border-box;
   flex-direction: row;
   padding: calc(var(--space-unit) * 2);
+  gap: calc(var(--space-unit) * 2);
 }
 
-:host > article.landscape .main-content .cover {
+:host([variant="landscape"]) .main-content .cover {
   display: flex;
   overflow: hidden;
   width: 221px;
@@ -233,32 +183,18 @@
   margin: 0;
 }
 
-:host > article.landscape .main-content .cover ::slotted([slot="coverOverlay"]) {
+:host([variant="landscape"]) .main-content .cover ::slotted([slot="coverOverlay"]) {
   min-height: 80px;
   max-height: 256px;
 }
 
-:host > article.landscape .main-content .card-info .book-data {
-  margin: 0;
-  gap: unset;
-}
-
-:host > article.landscape .main-content .card-info .book-data .authors-title-cta-section {
-  column-gap: calc(var(--space-unit) * 2);
-  grid-template-areas:
-    "authors cta"
-    "title title";
-}
-
-:host > article.landscape .main-content .card-info .book-data .isbn-tags-link-section .isbn-tags-section .tags {
-  margin: calc(calc(var(--space-unit) / 2) * -1) calc(var(--space-unit) * -1);
-}
-
-:host > article.landscape .main-content .card-info .ebook-container {
-  height: 76px;
+:host([variant="landscape"]) .main-content .card-info .top {
+  gap: var(--space-unit);
 }
 
-:host > article.landscape .main-content .card-info .ebook-container .ebook {
-  height: 60px;
-  padding: var(--space-unit);
+@media (max-width: 767px) {
+  :host([variant="portrait"]) {
+    width: 100%;
+    max-width: 400px;
+  }
 }