npm - @jumpgroup/jump-design-system - Versions diffs - 1.0.17 → 1.0.19 - Mend

@jumpgroup/jump-design-system 1.0.17 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.js ADDED Viewed

@@ -0,0 +1,440 @@
+import { Host, h } from "@stencil/core";
+export class JumpCardEcommerceShowcase {
+    constructor() {
+        this.hideDiscountIfLessThreshold = undefined;
+        this.badge = undefined;
+        this.link = undefined;
+        this.img = undefined;
+        this.imgAlt = undefined;
+        this.productName = undefined;
+        this.subtitle = undefined;
+        this.productId = undefined;
+        this.price = undefined;
+        this.salePrice = undefined;
+        this.currency = '€';
+        this.badgeColor = 'secondary';
+        this.outOfStock = false;
+        this.outOfStockText = undefined;
+        this.availableText = undefined;
+        this.imageObjectFit = 'cover';
+        this.priceFormatted = undefined;
+        this.salePriceFormatted = undefined;
+    }
+    /**
+     * Set the price of the product
+     * @param price
+     * @param salePrice
+     */
+    async setPrice(price, salePrice) {
+        let shouldFormat = false;
+        if (price && price > 0) {
+            shouldFormat = true;
+            this.price = price;
+        }
+        if (salePrice && salePrice > 0) {
+            this.salePrice = salePrice;
+        }
+        if (shouldFormat) {
+            this.formatPrices();
+        }
+    }
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    componentDidLoad() {
+        this.formatPrices();
+    }
+    /* ---------------------- @METHODS ------------------------- */
+    goToProduct() {
+        this.goToProductPage.emit({
+            productId: this.productId,
+            link: this.link,
+        });
+    }
+    formatPrices() {
+        var _a;
+        let locale = (_a = document.documentElement.lang) !== null && _a !== void 0 ? _a : 'it-IT';
+        if (locale.length == 2) {
+            locale = `${locale}-${locale.toUpperCase()}`;
+        }
+        // Format price with 2 decimal digits and in locale
+        this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+        this.salePriceFormatted = this.salePrice.toLocaleString(locale, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+    }
+    render() {
+        const backgroundClass = 'hasBackground';
+        const iconOnlyClass = '';
+        const hasImageOnHover = '';
+        const miniCard = '';
+        const verticalCardClass = 'is-vertical';
+        const enableZoomClass = '';
+        function calculateDiscount(price, salePrice) {
+            const discount = ((price - salePrice) / price) * 100;
+            return discount.toFixed(0);
+        }
+        ;
+        return (h(Host, { style: { '--image-object-fit': this.imageObjectFit } }, h("div", { class: `Media ${iconOnlyClass} ${backgroundClass} ${miniCard}` }, this.badge ?
+            h("jump-badge", { class: `${backgroundClass} ${iconOnlyClass}`, variant: this.badgeColor, dimension: "small", label: this.badge }) : '', this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?
+            h("div", { class: "DiscountBadge" }, "-", calculateDiscount(this.price, this.salePrice), "%") : null, h("a", { href: this.link }, h("figure", { class: `Images ${hasImageOnHover} ${enableZoomClass}` }, this.img && h("img", { class: "Images__Front", src: this.img, alt: this.imgAlt })))), h("div", { class: `Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}` }, h("div", { class: `Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}` }, h("div", { class: "Body__Top" }, h("div", { class: "Info" }, h("a", { href: this.link, class: "Product" }, this.productName), this.subtitle ? h("div", { class: "Subtitle", onClick: () => this.goToProduct() }, this.subtitle) : null), this.price ?
+            h("div", { class: `Price ${miniCard}` }, h("div", { class: `Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}` }, this.currency, this.priceFormatted), this.salePrice && this.salePrice < this.price ?
+                h("div", { class: "Price__Sale" }, this.currency, this.salePriceFormatted)
+                : null)
+            : null, this.outOfStock ?
+            h("div", { class: "OutOfStock" }, this.outOfStockText ? this.outOfStockText : 'Esaurito') : h("div", { class: "AvailableStock" }, this.availableText ? this.availableText : 'Disponibile'))))));
+    }
+    static get is() { return "jump-card-ecommerce-showcase"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-card-ecommerce-showcase.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-card-ecommerce-showcase.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "hideDiscountIfLessThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the threshold below which the discount will be hidden"
+                },
+                "attribute": "hide-discount-if-less-threshold",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the badge of the card"
+                },
+                "attribute": "badge",
+                "reflect": false
+            },
+            "link": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the link of the card"
+                },
+                "attribute": "link",
+                "reflect": false
+            },
+            "img": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the image's src of the card"
+                },
+                "attribute": "img",
+                "reflect": false
+            },
+            "imgAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the img's alt of the card"
+                },
+                "attribute": "img-alt",
+                "reflect": false
+            },
+            "productName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the title of the card"
+                },
+                "attribute": "product-name",
+                "reflect": false
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the subtitle of the card"
+                },
+                "attribute": "subtitle",
+                "reflect": false
+            },
+            "productId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the ID of the product, can be also a SKU"
+                },
+                "attribute": "product-id",
+                "reflect": false
+            },
+            "price": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the price of the card"
+                },
+                "attribute": "price",
+                "reflect": false
+            },
+            "salePrice": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the sale price of the card"
+                },
+                "attribute": "sale-price",
+                "reflect": false
+            },
+            "currency": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the currency of the card"
+                },
+                "attribute": "currency",
+                "reflect": false,
+                "defaultValue": "'\u20AC'"
+            },
+            "badgeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger'",
+                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the variant of the button"
+                },
+                "attribute": "badge-color",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "outOfStock": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the product is outOfStock"
+                },
+                "attribute": "out-of-stock",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "outOfStockText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the outOfStockText of the product"
+                },
+                "attribute": "out-of-stock-text",
+                "reflect": false
+            },
+            "availableText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "available-text",
+                "reflect": false
+            },
+            "imageObjectFit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'cover' | 'scale-down' | 'contain' | 'fill' | 'none'",
+                    "resolved": "\"contain\" | \"cover\" | \"fill\" | \"none\" | \"scale-down\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlla il comportamento dell'object-fit delle immagini"
+                },
+                "attribute": "image-object-fit",
+                "reflect": false,
+                "defaultValue": "'cover'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "priceFormatted": {},
+            "salePriceFormatted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "goToProductPage",
+                "name": "jump-card-go-to-product-page",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setPrice": {
+                "complexType": {
+                    "signature": "(price: number, salePrice: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "price",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "salePrice",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the price of the product",
+                    "tags": [{
+                            "name": "param",
+                            "text": "price"
+                        }, {
+                            "name": "param",
+                            "text": "salePrice"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "JumpCardEcommerceShowcase"; }
+}
+//# sourceMappingURL=jump-card-ecommerce-showcase.js.map

package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"jump-card-ecommerce-showcase.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-card-ecommerce-showcase',\n styleUrl: 'jump-card-ecommerce-showcase.scss',\n shadow: true,\n})\nexport class JumpCardEcommerceShowcase {\n\n @Element() JumpCardEcommerceShowcase: HTMLElement;\n jumpQuantityEl;\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /** Indicates the threshold below which the discount will be hidden */\n @Prop() hideDiscountIfLessThreshold: number = undefined;\n\n /** Indicates the badge of the card*/\n @Prop() badge: string;\n\n /** Indicates the link of the card*/\n @Prop() link: string;\n\n /** Indicates the image's src of the card*/\n @Prop() img: string;\n\n /** Indicates the img's alt of the card*/\n @Prop() imgAlt: string;\n\n /** Indicates the title of the card*/\n @Prop() productName: string;\n\n /** Indicates the subtitle of the card*/\n @Prop() subtitle: string;\n\n /** Indicates the ID of the product, can be also a SKU*/\n @Prop() productId: string;\n\n /** Indicates the price of the card */\n @Prop() price: number;\n\n /** Indicates the sale price of the card */\n @Prop() salePrice: number;\n\n /** Indicates the currency of the card */\n @Prop() currency: string = '€';\n\n /** Indicates the variant of the button */\n @Prop() badgeColor: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger' = 'secondary';\n\n /** Indicates if the product is outOfStock */\n @Prop({ mutable: true, reflect: true }) outOfStock: boolean = false;\n\n /** Indicates the outOfStockText of the product*/\n @Prop() outOfStockText: string;\n\n @Prop() availableText: string;\n \n /** Controlla il comportamento dell'object-fit delle immagini */\n @Prop() imageObjectFit: 'cover' | 'scale-down' | 'contain' | 'fill' | 'none' = 'cover';\n\n \n\n\n /* ---------------------- @STATE ------------------------- */\n\n @State() priceFormatted: string;\n\n @State() salePriceFormatted: string;\n\n /* ---------------------- @EVENTS ------------------------- */\n\n @Event({ eventName: 'jump-card-go-to-product-page' }) goToProductPage: EventEmitter;\n\n /**\n * Set the price of the product\n * @param price\n * @param salePrice\n */\n @Method()\n async setPrice(price: number, salePrice: number) {\n let shouldFormat = false;\n if (price && price > 0) {\n shouldFormat = true;\n this.price = price;\n }\n\n if (salePrice && salePrice > 0) {\n this.salePrice = salePrice;\n }\n\n if (shouldFormat) {\n this.formatPrices();\n }\n }\n\n /* ---------------------- @LIFECYCLE ------------------------- */\n\n componentDidLoad() {\n this.formatPrices();\n }\n\n /* ---------------------- @METHODS ------------------------- */\n\n goToProduct(){\n this.goToProductPage.emit({\n productId: this.productId,\n link: this.link,\n });\n }\n\n formatPrices() {\n let locale = document.documentElement.lang ?? 'it-IT';\n if (locale.length == 2) {\n locale = `${locale}-${locale.toUpperCase()}`;\n }\n\n // Format price with 2 decimal digits and in locale\n this.priceFormatted = this.price.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n this.salePriceFormatted = this.salePrice.toLocaleString(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n });\n }\n\n render() {\n const backgroundClass = 'hasBackground';\n const iconOnlyClass = '';\n\n const hasImageOnHover = '';\n const miniCard = '';\n const verticalCardClass = 'is-vertical';\n const enableZoomClass = '';\n\n function calculateDiscount(price: number, salePrice: number): string {\n const discount = ((price - salePrice) / price) * 100;\n return discount.toFixed(0);\n };\n\n return (\n <Host style={{'--image-object-fit': this.imageObjectFit}}>\n\n <div\n class={`Media ${iconOnlyClass} ${backgroundClass} ${miniCard}`}\n >\n {this.badge ?\n <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant={this.badgeColor} dimension=\"small\"\n label={this.badge}></jump-badge> : ''}\n \n {this.salePrice && (this.salePrice < this.price) && (this.hideDiscountIfLessThreshold === undefined || parseFloat(calculateDiscount(this.price, this.salePrice)) > this.hideDiscountIfLessThreshold) ?\n <div class=\"DiscountBadge\">-{calculateDiscount(this.price, this.salePrice)}%</div> : null}\n\n <a href={this.link}>\n <figure class={`Images ${hasImageOnHover} ${enableZoomClass}`}>\n {this.img && <img class=\"Images__Front\" src={this.img} alt={this.imgAlt}></img> }\n \n </figure>\n </a>\n </div>\n\n <div class={`Content ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class={`Body ${backgroundClass} ${iconOnlyClass} ${miniCard} ${verticalCardClass}`}>\n <div class=\"Body__Top\">\n <div class=\"Info\">\n <a href={this.link} class=\"Product\">{this.productName}</a>\n {this.subtitle ? <div class=\"Subtitle\" onClick={() => this.goToProduct()}>{this.subtitle}</div> : null}\n </div>\n\n {this.price ?\n <div class={`Price ${miniCard}`}>\n <div class={`Price__Regular ${this.salePrice && this.salePrice < this.price ? 'sale' : ''}`}>\n {this.currency}{this.priceFormatted}\n </div>\n \n {this.salePrice && this.salePrice < this.price ?\n <div class=\"Price__Sale\">{this.currency}{this.salePriceFormatted}</div>\n : null}\n </div>\n : null}\n \n {this.outOfStock ?\n <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : <div class=\"AvailableStock\">{this.availableText ? this.availableText : 'Disponibile'}</div>}\n\n </div>\n </div>\n\n \n </div>\n </Host>\n );\n }\n\n}"]}

package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.js ADDED Viewed

@@ -0,0 +1,144 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/CardEcommerce/CardShowcase',
+    tags: ['autodocs'],
+    argTypes: {
+        verticalCard: {
+            name: 'vertical-card',
+            description: 'Mostra la card in modalità verticale',
+            control: 'boolean',
+            defaultValue: false,
+        },
+        badge: {
+            name: 'badge',
+            description: 'Badge della card',
+            control: 'text',
+        },
+        link: {
+            name: 'link',
+            description: 'Link della card',
+            control: 'text',
+        },
+        img: {
+            name: 'img',
+            description: 'Url dell\'immagine da visualizzare, si attiva solo se non è presente video-src',
+            control: 'text',
+            defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',
+            if: {
+                arg: 'videoSrc',
+                exists: false
+            }
+        },
+        imgAlt: {
+            name: 'img-alt',
+            description: 'Alt dell\'immagine da visualizzare, si attiva solo se è presente img',
+            control: 'text',
+            if: {
+                arg: 'img',
+                exists: true
+            }
+        },
+        hoverImg: {
+            name: 'hover-img',
+            description: 'Url dell\'immagine in hover da visualizzare, si attiva solo se non è presente videoSrc',
+            control: 'text',
+            defaultValue: 'https://ch.benetton.com/dw/image/v2/BBSF_PRD/on/demandware.static/-/Sites-ucb-master/default/dwf2799586/images/Full_Card_v/UCB-Bambino_24P_3096C10JA_0Z3_FS_Full_Card_v.jpg?sw=600&sh=800',
+            if: {
+                arg: 'videoSrc',
+                exists: false
+            }
+        },
+        productName: {
+            name: 'product-name',
+            description: 'Nome del prodotto',
+            control: 'text',
+        },
+        subtitle: {
+            name: 'subtitle',
+            description: 'Sottotitolo della card',
+            control: 'text',
+        },
+        productId: {
+            name: 'product-id',
+            description: 'ID del prodotto',
+            control: 'text',
+        },
+        price: {
+            name: 'price',
+            description: 'Prezzo del prodotto; Se la card è in versione Mini gli va passato il prezzo scontato',
+            control: 'number',
+        },
+        salePrice: {
+            name: 'sale-price',
+            description: 'Prezzo scontato del prodotto',
+            control: 'number',
+        },
+        hideDiscountIfLessThreshold: {
+            name: 'hide-discount-if-less-threshold',
+            description: 'Indicates the threshold below which the discount will be hidden',
+            control: 'number'
+        },
+        badgeColor: {
+            name: 'badge-color',
+            description: 'Colore del badge',
+            control: 'select',
+            options: [
+                'primary',
+                'secondary',
+                'neutral',
+                'warning',
+                'success',
+                'danger',
+            ],
+        },
+        outOfStock: {
+            name: 'out-of-stock',
+            description: 'Indica se il prodotto è esaurito',
+            control: 'boolean',
+            defaultValue: false
+        },
+        outOfStockText: {
+            name: 'out-of-stock-text',
+            description: 'Testo da visualizzare se il prodotto è esaurito',
+            control: 'text',
+        },
+        availableText: {
+            name: 'available-text',
+            description: 'Testo da visualizzare se il prodotto è disponibile',
+            control: 'text',
+        },
+        imageObjectFit: {
+            name: 'image-object-fit',
+            description: 'Controlla il comportamento dell\'object-fit delle immagini',
+            control: 'select',
+            options: ['cover', 'scale-down', 'contain', 'fill', 'none'],
+            defaultValue: 'cover'
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`
+  <jump-card-ecommerce-showcase ${attributes}>
+  </jump-card-ecommerce-showcase>
+  `);
+};
+export const Card = Template.bind({});
+Card.args = {
+    badge: 'In offerta',
+    link: '/prodotto',
+    img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+    imgAlt: 'Immagine',
+    productName: 'T-shirt',
+    subtitle: 'T-shirt da uomo',
+    productId: '1',
+    price: 15,
+    salePrice: 10,
+    hideDiscountIfLessThreshold: 10,
+    badgeColor: 'secondary',
+    currency: '€',
+    outOfStock: false,
+    outOfStockText: 'Esaurito',
+    availableText: 'Disponibile',
+};
+//# sourceMappingURL=jump-card-ecommerce-showcase.stories.js.map

package/dist/collection/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"jump-card-ecommerce-showcase.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-showcase/jump-card-ecommerce-showcase.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/CardEcommerce/CardShowcase',\n tags: ['autodocs'],\n argTypes: {\n verticalCard: {\n name: 'vertical-card',\n description: 'Mostra la card in modalità verticale',\n control: 'boolean',\n defaultValue: false,\n },\n badge: {\n name: 'badge',\n description: 'Badge della card',\n control: 'text',\n },\n link: {\n name: 'link',\n description: 'Link della card',\n control: 'text',\n },\n img: {\n name: 'img',\n description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente video-src',\n control: 'text',\n defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n if:{\n arg: 'videoSrc',\n exists: false\n }\n },\n imgAlt: {\n name: 'img-alt',\n description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente img',\n control: 'text',\n if:{\n arg: 'img',\n exists: true\n }\n },\n hoverImg: {\n name: 'hover-img',\n description: 'Url dell\\'immagine in hover da visualizzare, si attiva solo se non è presente videoSrc',\n control: 'text',\n defaultValue: 'https://ch.benetton.com/dw/image/v2/BBSF_PRD/on/demandware.static/-/Sites-ucb-master/default/dwf2799586/images/Full_Card_v/UCB-Bambino_24P_3096C10JA_0Z3_FS_Full_Card_v.jpg?sw=600&sh=800',\n if:{\n arg: 'videoSrc',\n exists: false\n }\n },\n \n \n productName: {\n name: 'product-name',\n description: 'Nome del prodotto',\n control: 'text',\n },\n subtitle: {\n name: 'subtitle',\n description: 'Sottotitolo della card',\n control: 'text',\n },\n productId: {\n name: 'product-id',\n description: 'ID del prodotto',\n control: 'text',\n },\n price: {\n name: 'price',\n description: 'Prezzo del prodotto; Se la card è in versione Mini gli va passato il prezzo scontato',\n control: 'number',\n },\n salePrice: {\n name: 'sale-price',\n description: 'Prezzo scontato del prodotto',\n control: 'number',\n },\n hideDiscountIfLessThreshold: {\n name: 'hide-discount-if-less-threshold',\n description: 'Indicates the threshold below which the discount will be hidden',\n control: 'number'\n },\n badgeColor: {\n name: 'badge-color',\n description: 'Colore del badge',\n control: 'select',\n options: [\n 'primary',\n 'secondary',\n 'neutral',\n 'warning',\n 'success',\n 'danger',\n ],\n },\n outOfStock: {\n name: 'out-of-stock',\n description: 'Indica se il prodotto è esaurito',\n control: 'boolean',\n defaultValue: false\n },\n outOfStockText: {\n name: 'out-of-stock-text',\n description: 'Testo da visualizzare se il prodotto è esaurito',\n control: 'text',\n },\n availableText: {\n name: 'available-text',\n description: 'Testo da visualizzare se il prodotto è disponibile',\n control: 'text',\n },\n imageObjectFit: {\n name: 'image-object-fit',\n description: 'Controlla il comportamento dell\\'object-fit delle immagini',\n control: 'select',\n options: ['cover', 'scale-down', 'contain', 'fill', 'none'],\n defaultValue: 'cover'\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-card-ecommerce-showcase ${attributes}>\n </jump-card-ecommerce-showcase>\n `);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n badge: 'In offerta',\n link: '/prodotto',\n img: 'https://images.pexels.com/photos/4066293/pexels-photo-4066293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',\n imgAlt: 'Immagine',\n productName: 'T-shirt',\n subtitle: 'T-shirt da uomo',\n productId: '1',\n price: 15,\n salePrice: 10,\n hideDiscountIfLessThreshold: 10,\n badgeColor: 'secondary',\n currency: '€',\n outOfStock: false,\n outOfStockText: 'Esaurito',\n availableText: 'Disponibile',\n};"]}

package/dist/components/jump-card-ecommerce-showcase.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface JumpCardEcommerceShowcase extends Components.JumpCardEcommerceShowcase, HTMLElement {}
+export const JumpCardEcommerceShowcase: {
+    prototype: JumpCardEcommerceShowcase;
+    new (): JumpCardEcommerceShowcase;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;