@zanichelli/albe-web-components 14.5.1 → 14.5.2-rc-anchor-navigation

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

@@ -0,0 +1,68 @@
+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```html
+ * <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>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-breadcrumb/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,yBAAyB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAC3E,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC;YAC3C,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,yBAAyB,CAAC;YACjD,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,mBAAmB,CAAC,QAAQ;QACvC,eAAe,EAAE,yBAAyB,CAAC,IAAI;QAC/C,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,KAAK;QACvB,oBAAoB,EAAE,CAAC;QACvB,YAAY,EAAE,EAAE;KACjB;CAC0B,CAAC;AAE9B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;qBAEa,IAAI,CAAC,SAAS;2BACR,IAAI,CAAC,eAAe;0BACrB,IAAI,CAAC,cAAc;4BACjB,IAAI,CAAC,gBAAgB;gCACjB,IAAI,CAAC,oBAAoB;wBACjC,IAAI,CAAC,YAAY;;;;;;;;WAQ9B;CACsB,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZBreadcrumb} from \".\";\nimport {BreadcrumbHomepageVariant, BreadcrumbPathStyle} from \"../../beans\";\nimport \"./index\";\nimport \"./style.stories.css\";\n\n/**\n * Breadcrumb is a relevant component for SEO oriented applications.\n * 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.\n *\n * The component will handle the logic for generating the proper markup inside the shadow dom.\n * No slot is rendered inside the latter.\n * 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.\n * This mode can be also used by SEO non-relevant application.\n * @example```html\n * <z-breadcrumb>\n *  <a href=\"./home_link\"></a>\n *  <a href=\"./link1\">link1</a>\n *  <a href=\"./link2\">link2</a>\n *  <a href=\"./link3\">link3</a>\n * </z-breadcrumb>```\n *\n * This component follows the accessibility guidelines provided by W3C https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/\n */\nconst StoryMeta = {\n  title: \"ZBreadcrumb\",\n  component: \"z-breadcrumb\",\n  argTypes: {\n    pathStyle: {\n      options: Object.values(BreadcrumbPathStyle),\n      control: {\n        type: \"select\",\n      },\n    },\n    homepageVariant: {\n      options: Object.values(BreadcrumbHomepageVariant),\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    pathStyle: BreadcrumbPathStyle.SEMIBOLD,\n    homepageVariant: BreadcrumbHomepageVariant.ICON,\n    maxNodesToShow: 5,\n    preventFollowUrl: false,\n    overflowMenuItemRows: 0,\n    truncateChar: 30,\n  },\n} satisfies Meta<ZBreadcrumb>;\n\nexport default StoryMeta;\n\nexport const Breadcrumb = {\n  render: (args) =>\n    html`<div class=\"z-breadcrumb-story-container\">\n      <z-breadcrumb\n        .pathStyle=${args.pathStyle}\n        .homepageVariant=${args.homepageVariant}\n        .maxNodesToShow=${args.maxNodesToShow}\n        .preventFollowUrl=${args.preventFollowUrl}\n        .overflowMenuItemRows=${args.overflowMenuItemRows}\n        .truncateChar=${args.truncateChar}\n      >\n        <a href=\"https://www.zanichelli.it\"></a>\n        <a href=\"./link1\">Lingua inglese - Scuola secondaria di primo grado</a>\n        <a href=\"./link2\">Lingua Inglese - Lessico e funzioni linguistiche e comunicative</a>\n        <a href=\"./link3\">Il tempo libero e i luoghi del tempo libero</a>\n        <a href=\"./link4\">Chiedere di descrivere le proprie vacanze</a>\n      </z-breadcrumb>\n    </div>`,\n} satisfies StoryObj<ZBreadcrumb>;\n"]}

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

@@ -0,0 +1,269 @@
+import { h } from "@stencil/core";
+import { ButtonType, ButtonVariant, ControlSize } from "../../beans";
+/**
+ * @slot - button label
+ */
+export class ZButton {
+    constructor() {
+        this.ariaLabel = "";
+        this.role = "";
+        this.href = undefined;
+        this.target = undefined;
+        this.htmlid = undefined;
+        this.name = undefined;
+        this.disabled = false;
+        this.type = ButtonType.BUTTON;
+        this.variant = ButtonVariant.PRIMARY;
+        this.icon = undefined;
+        this.size = ControlSize.BIG;
+    }
+    getAttributes() {
+        return {
+            id: this.htmlid,
+            class: {
+                "z-button--container": true,
+                "z-button--has-text": !!this.hostElement.textContent.trim(),
+            },
+        };
+    }
+    render() {
+        if (this.href) {
+            return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && h("z-icon", { name: this.icon }), h("slot", null)));
+        }
+        return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, role: this.role, disabled: this.disabled }), this.icon && h("z-icon", { name: this.icon }), h("slot", null)));
+    }
+    static get is() { return "z-button"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "defines a string value that labels an interactive element, used for accessibility."
+                },
+                "attribute": "aria-label",
+                "reflect": true,
+                "defaultValue": "\"\""
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "defines role attribute, used for accessibility."
+                },
+                "attribute": "role",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML <a> href attribute. If it is set, it renders an HTML <a> tag."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML a target attribute."
+                },
+                "attribute": "target",
+                "reflect": false
+            },
+            "htmlid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier, should be unique."
+                },
+                "attribute": "htmlid",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML button name attribute."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML button disabled attribute."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "ButtonType.BUTTON | ButtonType.RESET | ButtonType.SUBMIT",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML button type attribute."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "ButtonType.BUTTON"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonVariant",
+                    "resolved": "ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
+                    "references": {
+                        "ButtonVariant": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "ButtonVariant.PRIMARY"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`z-icon` name to use (optional)."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonSize | ControlSize",
+                    "resolved": "ButtonSize.BIG | ButtonSize.SMALL | ButtonSize.X_SMALL | ControlSize.BIG | ControlSize.SMALL | ControlSize.X_SMALL",
+                    "references": {
+                        "ButtonSize": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ButtonSize"
+                        },
+                        "ControlSize": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ControlSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "ControlSize.BIG"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAa,UAAU,EAAE,aAAa,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAE/E;;GAEG;AAOH,MAAM,OAAO,OAAO;;yBAKN,EAAE;oBAIP,EAAE;;;;;wBAoBY,KAAK;oBAIN,UAAU,CAAC,MAAM;uBAIX,aAAa,CAAC,OAAO;;oBAQb,WAAW,CAAC,GAAG;;IAEzC,aAAa;QACnB,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI;gBAC3B,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE;aAC5D;SACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,yBACM,IAAI,CAAC,aAAa,EAAE,kBACZ,IAAI,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBAElB,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;gBACzC,eAAQ,CACN,CACL,CAAC;QACJ,CAAC;QAED,OAAO,CACL,8BACM,IAAI,CAAC,aAAa,EAAE,kBACZ,IAAI,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEtB,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels an interactive element, used for accessibility. */\n  @Prop({reflect: true})\n  ariaLabel = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  role = \"\";\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private getAttributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": !!this.hostElement.textContent.trim(),\n      },\n    };\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    if (this.href) {\n      return (\n        <a\n          {...this.getAttributes()}\n          aria-label={this.ariaLabel}\n          href={this.href}\n          target={this.target}\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.getAttributes()}\n        aria-label={this.ariaLabel}\n        name={this.name}\n        type={this.type}\n        role={this.role}\n        disabled={this.disabled}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n      </button>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,101 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZButton } from "./index";
+describe("Suite test ZButton", () => {
+    it("Test render ZButton", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button></z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="" size="big" variant="primary">
+        <button role="" aria-label="" class="z-button--container" type="button"></button>
+      </z-button>
+    `);
+    });
+    it("Test render ZButton con testo e aria-label", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button aria-label="Open">text</z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="Open" size="big" variant="primary">
+        <button role="" aria-label="Open" type="button" class="z-button--container z-button--has-text">
+          text
+        </button>
+      </z-button>
+    `);
+    });
+    it("Test render ZButton con role=link", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button role="link">link</z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="" role="link" size="big" variant="primary">
+        <button aria-label="" role="link" type="button" class="z-button--container z-button--has-text">
+          link
+        </button>
+      </z-button>
+    `);
+    });
+    it("Test render ZButton con icon", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button icon="icon"></z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="" size="big" variant="primary" icon="icon">
+        <button role="" aria-label="" type="button" class="z-button--container">
+          <z-icon name="icon"></z-icon>
+        </button>
+      </z-button>
+    `);
+    });
+    it("Test render ZButton variant", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button variant="secondary"></z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="" size="big" variant="secondary">
+        <button role="" aria-label="" type="button" class="z-button--container"></button>
+      </z-button>
+    `);
+    });
+    it("Test render ZButton small", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button size="small"></z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="" size="small" variant="primary">
+        <button role="" aria-label="" type="button" class="z-button--container"></button>
+      </z-button>
+    `);
+    });
+    it("Test render ZButton disabled", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button disabled></z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="" size="big" variant="primary" disabled>
+        <button role="" aria-label="" type="button" class="z-button--container" disabled></button>
+      </z-button>
+    `);
+    });
+    it("Test render ZButton with link and variant", async () => {
+        const page = await newSpecPage({
+            components: [ZButton],
+            html: `<z-button variant="primary" href="https://wikipedia.com">link</z-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-button aria-label="" size="big" variant="primary" href="https://wikipedia.com">
+        <a aria-label="" href="https://wikipedia.com" class="z-button--container z-button--has-text">
+          link
+        </a>
+      </z-button>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/z-button/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/z-button/index.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZButton} from \"./index\";\n\ndescribe(\"Suite test ZButton\", () => {\n  it(\"Test render ZButton\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button></z-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"\" size=\"big\" variant=\"primary\">\n        <button role=\"\" aria-label=\"\" class=\"z-button--container\" type=\"button\"></button>\n      </z-button>\n    `);\n  });\n\n  it(\"Test render ZButton con testo e aria-label\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button aria-label=\"Open\">text</z-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"Open\" size=\"big\" variant=\"primary\">\n        <button role=\"\" aria-label=\"Open\" type=\"button\" class=\"z-button--container z-button--has-text\">\n          text\n        </button>\n      </z-button>\n    `);\n  });\n\n  it(\"Test render ZButton con role=link\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button role=\"link\">link</z-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"\" role=\"link\" size=\"big\" variant=\"primary\">\n        <button aria-label=\"\" role=\"link\" type=\"button\" class=\"z-button--container z-button--has-text\">\n          link\n        </button>\n      </z-button>\n    `);\n  });\n\n  it(\"Test render ZButton con icon\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button icon=\"icon\"></z-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"\" size=\"big\" variant=\"primary\" icon=\"icon\">\n        <button role=\"\" aria-label=\"\" type=\"button\" class=\"z-button--container\">\n          <z-icon name=\"icon\"></z-icon>\n        </button>\n      </z-button>\n    `);\n  });\n\n  it(\"Test render ZButton variant\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button variant=\"secondary\"></z-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"\" size=\"big\" variant=\"secondary\">\n        <button role=\"\" aria-label=\"\" type=\"button\" class=\"z-button--container\"></button>\n      </z-button>\n    `);\n  });\n\n  it(\"Test render ZButton small\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button size=\"small\"></z-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"\" size=\"small\" variant=\"primary\">\n        <button role=\"\" aria-label=\"\" type=\"button\" class=\"z-button--container\"></button>\n      </z-button>\n    `);\n  });\n\n  it(\"Test render ZButton disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button disabled></z-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"\" size=\"big\" variant=\"primary\" disabled>\n        <button role=\"\" aria-label=\"\" type=\"button\" class=\"z-button--container\" disabled></button>\n      </z-button>\n    `);\n  });\n\n  it(\"Test render ZButton with link and variant\", async () => {\n    const page = await newSpecPage({\n      components: [ZButton],\n      html: `<z-button variant=\"primary\" href=\"https://wikipedia.com\">link</z-button>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-button aria-label=\"\" size=\"big\" variant=\"primary\" href=\"https://wikipedia.com\">\n        <a aria-label=\"\" href=\"https://wikipedia.com\" class=\"z-button--container z-button--has-text\">\n          link\n        </a>\n      </z-button>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,90 @@
+import { html } from "lit";
+import { ButtonVariant, ControlSize } from "../../beans";
+import "./index";
+const StoryMeta = {
+    title: "ZButton",
+    component: "z-button",
+    args: {
+        variant: ButtonVariant.PRIMARY,
+        size: ControlSize.BIG,
+        disabled: false,
+        icon: "download",
+        ariaLabel: "Clicca sul bottone",
+        role: "button",
+    },
+    argTypes: {
+        variant: {
+            options: Object.values(ButtonVariant),
+            control: { type: "inline-radio" },
+        },
+        size: {
+            options: Object.values(ControlSize),
+            control: { type: "inline-radio" },
+        },
+    },
+    render: (args) => html `<z-button
+      variant=${args.variant}
+      size=${args.size}
+      disabled=${args.disabled}
+      icon=${args.icon}
+      .ariaLabel=${args.ariaLabel}
+      role=${args.role}
+    >
+      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}
+      .ariaLabel=${args.ariaLabel}
+      role=${args.role}
+    />`,
+};
+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}
+      .ariaLabel=${args.ariaLabel}
+      role=${args.role}
+      href=${args.href}
+      target=${args.target}
+    >
+      Go to wikipedia
+    </z-button>`,
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-button/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AACvD,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,aAAa,CAAC,OAAO;QAC9B,IAAI,EAAE,WAAW,CAAC,GAAG;QACrB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,oBAAoB;QAC/B,IAAI,EAAE,QAAQ;KACf;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;YACrC,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;YACnC,OAAO,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC;SAChC;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;gBACQ,IAAI,CAAC,OAAO;aACf,IAAI,CAAC,IAAI;iBACL,IAAI,CAAC,QAAQ;aACjB,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,SAAS;aACpB,IAAI,CAAC,IAAI;;;gBAGN;CACS,CAAC;AAE1B,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,OAAO,EAAE,aAAa,CAAC,SAAS;QAChC,IAAI,EAAE,WAAW,CAAC,OAAO;KAC1B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;SAC7B;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,aAAa,CAAC,QAAQ;QAC/B,IAAI,EAAE,WAAW,CAAC,KAAK;KACxB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC;SAC7B;KACF;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;gBACQ,IAAI,CAAC,OAAO;aACf,IAAI,CAAC,IAAI;iBACL,IAAI,CAAC,QAAQ;aACjB,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,SAAS;aACpB,IAAI,CAAC,IAAI;OACf;CACU,CAAC;AAElB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,IAAI,EAAE,uBAAuB;QAC7B,IAAI,EAAE,uBAAuB;QAC7B,MAAM,EAAE,QAAQ;QAChB,IAAI,EAAE,MAAM;KACb;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;gBACQ,IAAI,CAAC,OAAO;aACf,IAAI,CAAC,IAAI;iBACL,IAAI,CAAC,QAAQ;aACjB,IAAI,CAAC,IAAI;mBACH,IAAI,CAAC,SAAS;aACpB,IAAI,CAAC,IAAI;aACT,IAAI,CAAC,IAAI;eACP,IAAI,CAAC,MAAM;;;gBAGV;CACC,CAAC","sourcesContent":["import type {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZButton} from \".\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZButton\",\n  component: \"z-button\",\n  args: {\n    variant: ButtonVariant.PRIMARY,\n    size: ControlSize.BIG,\n    disabled: false,\n    icon: \"download\",\n    ariaLabel: \"Clicca sul bottone\",\n    role: \"button\",\n  },\n  argTypes: {\n    variant: {\n      options: Object.values(ButtonVariant),\n      control: {type: \"inline-radio\"},\n    },\n    size: {\n      options: Object.values(ControlSize),\n      control: {type: \"inline-radio\"},\n    },\n  },\n  render: (args) =>\n    html`<z-button\n      variant=${args.variant}\n      size=${args.size}\n      disabled=${args.disabled}\n      icon=${args.icon}\n      .ariaLabel=${args.ariaLabel}\n      role=${args.role}\n    >\n      Click me\n    </z-button>`,\n} satisfies Meta<ZButton>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZButton>;\n\nexport const Primary = {};\n\nexport const SecondaryXSmall = {\n  args: {\n    variant: ButtonVariant.SECONDARY,\n    size: ControlSize.X_SMALL,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"icon\"],\n    },\n  },\n} satisfies Story;\n\nexport const TertiarySmall = {\n  args: {\n    variant: ButtonVariant.TERTIARY,\n    size: ControlSize.SMALL,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"icon\"],\n    },\n  },\n} satisfies Story;\n\nexport const IconOnly = {\n  render: (args) =>\n    html`<z-button\n      variant=${args.variant}\n      size=${args.size}\n      disabled=${args.disabled}\n      icon=${args.icon}\n      .ariaLabel=${args.ariaLabel}\n      role=${args.role}\n    />`,\n} satisfies Story;\n\nexport const LinkButton = {\n  args: {\n    icon: \"arrow-quad-north-east\",\n    href: \"https://wikipedia.com\",\n    target: \"_blank\",\n    role: \"link\",\n  },\n  render: (args) =>\n    html`<z-button\n      variant=${args.variant}\n      size=${args.size}\n      disabled=${args.disabled}\n      icon=${args.icon}\n      .ariaLabel=${args.ariaLabel}\n      role=${args.role}\n      href=${args.href}\n      target=${args.target}\n    >\n      Go to wikipedia\n    </z-button>`,\n} satisfies Story;\n"]}