@jumpgroup/jump-design-system 0.1.9 → 0.2.1

package/dist/collection/components/jump-card/jump-card-no-image.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-card-no-image.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-no-image.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/NoImageCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" \n  ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} \n  ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} \n  ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} \n  ${args.border == true ? 'border' : ''} \n  ${args.horizontal == true ? 'horizontal' : ''} \n  ${args.dark == true ? 'dark' : ''} \n  ${args.borderRadius == true ? 'border-radius' : ''} \n  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} \n  ${args.boxed == true ? 'boxed' : ''} \n  ${args.roundedMedia == true ? 'rounded-media' : ''} \n  ${args.shadow == true ? 'shadow' : ''} \n  > \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardWithoutImage = Template.bind({});\nCardWithoutImage.args = {\n  imgSrc: '',\n  border: true,\n};"]}

package/dist/collection/components/jump-card/jump-card-shadow.stories.js

@@ -0,0 +1,113 @@
+export default {
+    title: 'Components/Card/ShadowCard',
+    tags: ['autodocs'],
+    argTypes: {
+        horizontal: {
+            name: 'Direzione della card',
+            description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',
+            control: 'boolean',
+            defaultValue: false
+        },
+        dark: {
+            name: 'Card di colore scuro',
+            description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',
+            control: 'boolean',
+            defaultValue: false
+        },
+        border: {
+            name: 'Card con bordo',
+            control: 'boolean',
+            defaultValue: false
+        },
+        shadow: {
+            name: 'Card con ombra',
+            control: 'boolean',
+            defaultValue: false
+        },
+        borderRadius: {
+            name: 'Bordi arrotondati',
+            description: 'Imposta i bordi della card arrotondati',
+            control: 'boolean',
+            // if:{
+            //   arg: 'topBorderContentRadius',
+            //   eq: false
+            // }
+        },
+        topBorderContentRadius: {
+            name: 'Border top Content',
+            description: 'Border top del Content (esclusa la sezione media) arrotondato',
+            control: 'boolean',
+            // if:{
+            //   arg: 'borderRadius',
+            //   eq: false
+            // }
+        },
+        boxed: {
+            name: 'Boxed',
+            description: 'Imposta un padding intorno al media',
+            control: 'boolean',
+        },
+        roundedMedia: {
+            name: 'Immagine o Video arrotondati',
+            description: 'Imposta l\'immagine o il video arrotondati e senza sfondo',
+            control: 'boolean',
+        },
+        imgSrc: {
+            name: 'Url del\'immagine',
+            description: 'Url dell\'immagine da visualizzare, si attiva solo se non è presente videoSrc',
+            control: 'text',
+            if: {
+                arg: 'videoSrc',
+                exists: false
+            }
+        },
+        imgAlt: {
+            name: 'Alt dell\'immagine',
+            description: 'Alt dell\'immagine da visualizzare, si attiva solo se è presente imgSrc',
+            control: 'text',
+            if: {
+                arg: 'imgSrc',
+                exists: true
+            }
+        },
+        videoSrc: {
+            name: 'Url del video',
+            description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',
+            control: 'text',
+            if: {
+                arg: 'imgSrc',
+                exists: false
+            }
+        },
+    }
+};
+const Template = (args) => {
+    var _a;
+    return `<jump-card class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" 
+  ${args.videoSrc ? `video-src="${args.videoSrc}"` : ''} 
+  ${args.imgSrc ? `img-src="${args.imgSrc}"` : ''} 
+  ${args.imgAlt ? `img-alt="${args.imgAlt}"` : ''} 
+  ${args.border == true ? 'border' : ''} 
+  ${args.horizontal == true ? 'horizontal' : ''} 
+  ${args.dark == true ? 'dark' : ''} 
+  ${args.borderRadius == true ? 'border-radius' : ''} 
+  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} 
+  ${args.boxed == true ? 'boxed' : ''} 
+  ${args.roundedMedia == true ? 'rounded-media' : ''} 
+  ${args.shadow == true ? 'shadow' : ''} 
+  > 
+    <div class="ContentWrapper" slot="body">
+      <h3 style="margin-top: 0">Titolo della card</h3>
+      <p>Testo della card</p>
+    </div>
+    <jump-button slot="footer" id="#card" class=" "variant="secondary" size="medium" href="#" target="_self" ariaLabel="sono un bottone" text>
+    Scopri di più<jump-icon slot="suffix" name="arrow-right"></jump-icon></jump-button>
+  </jump-card>`;
+};
+export const CardWithShadow = Template.bind({});
+CardWithShadow.args = {
+    imgSrc: 'https://picsum.photos/300/200',
+    imgAlt: 'Immagine',
+    shadow: true,
+};
+//# sourceMappingURL=jump-card-shadow.stories.js.map

package/dist/collection/components/jump-card/jump-card-shadow.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-card-shadow.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-shadow.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/ShadowCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" \n  ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} \n  ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} \n  ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} \n  ${args.border == true ? 'border' : ''} \n  ${args.horizontal == true ? 'horizontal' : ''} \n  ${args.dark == true ? 'dark' : ''} \n  ${args.borderRadius == true ? 'border-radius' : ''} \n  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} \n  ${args.boxed == true ? 'boxed' : ''} \n  ${args.roundedMedia == true ? 'rounded-media' : ''} \n  ${args.shadow == true ? 'shadow' : ''} \n  > \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardWithShadow = Template.bind({});\nCardWithShadow.args = {\n  imgSrc: 'https://picsum.photos/300/200',\n  imgAlt: 'Immagine',\n  shadow: true,\n};"]}

package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js

@@ -0,0 +1,114 @@
+export default {
+    title: 'Components/Card/TopBorderContentCard',
+    tags: ['autodocs'],
+    argTypes: {
+        horizontal: {
+            name: 'Direzione della card',
+            description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',
+            control: 'boolean',
+            defaultValue: false
+        },
+        dark: {
+            name: 'Card di colore scuro',
+            description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',
+            control: 'boolean',
+            defaultValue: false
+        },
+        border: {
+            name: 'Card con bordo',
+            control: 'boolean',
+            defaultValue: false
+        },
+        shadow: {
+            name: 'Card con ombra',
+            control: 'boolean',
+            defaultValue: false
+        },
+        borderRadius: {
+            name: 'Bordi arrotondati',
+            description: 'Imposta i bordi della card arrotondati',
+            control: 'boolean',
+            // if:{
+            //   arg: 'topBorderContentRadius',
+            //   eq: false
+            // }
+        },
+        topBorderContentRadius: {
+            name: 'Border top Content',
+            description: 'Border top del Content (esclusa la sezione media) arrotondato',
+            control: 'boolean',
+            // if:{
+            //   arg: 'borderRadius',
+            //   eq: false
+            // }
+        },
+        boxed: {
+            name: 'Boxed',
+            description: 'Imposta un padding intorno al media',
+            control: 'boolean',
+        },
+        roundedMedia: {
+            name: 'Immagine o Video arrotondati',
+            description: 'Imposta l\'immagine o il video arrotondati e senza sfondo',
+            control: 'boolean',
+        },
+        imgSrc: {
+            name: 'Url del\'immagine',
+            description: 'Url dell\'immagine da visualizzare, si attiva solo se non è presente videoSrc',
+            control: 'text',
+            if: {
+                arg: 'videoSrc',
+                exists: false
+            }
+        },
+        imgAlt: {
+            name: 'Alt dell\'immagine',
+            description: 'Alt dell\'immagine da visualizzare, si attiva solo se è presente imgSrc',
+            control: 'text',
+            if: {
+                arg: 'imgSrc',
+                exists: true
+            }
+        },
+        videoSrc: {
+            name: 'Url del video',
+            description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',
+            control: 'text',
+            if: {
+                arg: 'imgSrc',
+                exists: false
+            }
+        },
+    }
+};
+const Template = (args) => {
+    var _a;
+    return `<jump-card class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" 
+  ${args.videoSrc ? `video-src="${args.videoSrc}"` : ''} 
+  ${args.imgSrc ? `img-src="${args.imgSrc}"` : ''} 
+  ${args.imgAlt ? `img-alt="${args.imgAlt}"` : ''} 
+  ${args.border == true ? 'border' : ''} 
+  ${args.horizontal == true ? 'horizontal' : ''} 
+  ${args.dark == true ? 'dark' : ''} 
+  ${args.borderRadius == true ? 'border-radius' : ''} 
+  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} 
+  ${args.boxed == true ? 'boxed' : ''} 
+  ${args.roundedMedia == true ? 'rounded-media' : ''} 
+  ${args.shadow == true ? 'shadow' : ''} 
+  > 
+    <div class="ContentWrapper" slot="body">
+      <h3 style="margin-top: 0">Titolo della card</h3>
+      <p>Testo della card</p>
+    </div>
+    <jump-button slot="footer" id="#card" class=" "variant="secondary" size="medium" href="#" target="_self" ariaLabel="sono un bottone" text>
+    Scopri di più<jump-icon slot="suffix" name="arrow-right"></jump-icon></jump-button>
+  </jump-card>`;
+};
+export const CardWithTopBorderRadius = Template.bind({});
+CardWithTopBorderRadius.args = {
+    imgSrc: 'https://picsum.photos/300/200',
+    imgAlt: 'Immagine',
+    topBorderContentRadius: true,
+    border: true
+};
+//# sourceMappingURL=jump-card-top-border-content-radius.stories.js.map

package/dist/collection/components/jump-card/jump-card-top-border-content-radius.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-card-top-border-content-radius.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-top-border-content-radius.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/TopBorderContentCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" \n  ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} \n  ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} \n  ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} \n  ${args.border == true ? 'border' : ''} \n  ${args.horizontal == true ? 'horizontal' : ''} \n  ${args.dark == true ? 'dark' : ''} \n  ${args.borderRadius == true ? 'border-radius' : ''} \n  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} \n  ${args.boxed == true ? 'boxed' : ''} \n  ${args.roundedMedia == true ? 'rounded-media' : ''} \n  ${args.shadow == true ? 'shadow' : ''} \n  > \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardWithTopBorderRadius = Template.bind({});\nCardWithTopBorderRadius.args = {\n  imgSrc: 'https://picsum.photos/300/200',\n  imgAlt: 'Immagine',\n  topBorderContentRadius: true,\n  border: true\n};\n"]}

package/dist/collection/components/jump-card/jump-card-video.stories.js

@@ -0,0 +1,111 @@
+export default {
+    title: 'Components/Card/VideoCard',
+    tags: ['autodocs'],
+    argTypes: {
+        horizontal: {
+            name: 'Direzione della card',
+            description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',
+            control: 'boolean',
+            defaultValue: false
+        },
+        dark: {
+            name: 'Card di colore scuro',
+            description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',
+            control: 'boolean',
+            defaultValue: false
+        },
+        border: {
+            name: 'Card con bordo',
+            control: 'boolean',
+            defaultValue: false
+        },
+        shadow: {
+            name: 'Card con ombra',
+            control: 'boolean',
+            defaultValue: false
+        },
+        borderRadius: {
+            name: 'Bordi arrotondati',
+            description: 'Imposta i bordi della card arrotondati',
+            control: 'boolean',
+            // if:{
+            //   arg: 'topBorderContentRadius',
+            //   eq: false
+            // }
+        },
+        topBorderContentRadius: {
+            name: 'Border top Content',
+            description: 'Border top del Content (esclusa la sezione media) arrotondato',
+            control: 'boolean',
+            // if:{
+            //   arg: 'borderRadius',
+            //   eq: false
+            // }
+        },
+        boxed: {
+            name: 'Boxed',
+            description: 'Imposta un padding intorno al media',
+            control: 'boolean',
+        },
+        roundedMedia: {
+            name: 'Immagine o Video arrotondati',
+            description: 'Imposta l\'immagine o il video arrotondati e senza sfondo',
+            control: 'boolean',
+        },
+        imgSrc: {
+            name: 'Url del\'immagine',
+            description: 'Url dell\'immagine da visualizzare, si attiva solo se non è presente videoSrc',
+            control: 'text',
+            if: {
+                arg: 'videoSrc',
+                exists: false
+            }
+        },
+        imgAlt: {
+            name: 'Alt dell\'immagine',
+            description: 'Alt dell\'immagine da visualizzare, si attiva solo se è presente imgSrc',
+            control: 'text',
+            if: {
+                arg: 'imgSrc',
+                exists: true
+            }
+        },
+        videoSrc: {
+            name: 'Url del video',
+            description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',
+            control: 'text',
+            if: {
+                arg: 'imgSrc',
+                exists: false
+            }
+        },
+    }
+};
+const Template = (args) => {
+    var _a;
+    return `<jump-card class="${(_a = args.class) !== null && _a !== void 0 ? _a : ''}" 
+  ${args.videoSrc ? `video-src="${args.videoSrc}"` : ''} 
+  ${args.imgSrc ? `img-src="${args.imgSrc}"` : ''} 
+  ${args.imgAlt ? `img-alt="${args.imgAlt}"` : ''} 
+  ${args.border == true ? 'border' : ''} 
+  ${args.horizontal == true ? 'horizontal' : ''} 
+  ${args.dark == true ? 'dark' : ''} 
+  ${args.borderRadius == true ? 'border-radius' : ''} 
+  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} 
+  ${args.boxed == true ? 'boxed' : ''} 
+  ${args.roundedMedia == true ? 'rounded-media' : ''} 
+  ${args.shadow == true ? 'shadow' : ''} 
+  > 
+    <div class="ContentWrapper" slot="body">
+      <h3 style="margin-top: 0">Titolo della card</h3>
+      <p>Testo della card</p>
+    </div>
+    <jump-button slot="footer" id="#card" class=" "variant="secondary" size="medium" href="#" target="_self" ariaLabel="sono un bottone" text>
+    Scopri di più<jump-icon slot="suffix" name="arrow-right"></jump-icon></jump-button>
+  </jump-card>`;
+};
+export const CardVideo = Template.bind({});
+CardVideo.args = {
+    videoSrc: 'https://media.jumpgroup.it/jumpguides/uploads/2021/06/Tutorial-Asana-e-Harvest.mov',
+};
+//# sourceMappingURL=jump-card-video.stories.js.map

package/dist/collection/components/jump-card/jump-card-video.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-card-video.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card/jump-card-video.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n  title: 'Components/Card/VideoCard',\n  tags: ['autodocs'],\n  argTypes: {\n    horizontal: {\n      name: 'Direzione della card',\n      description: 'Di default è verticale, se si imposta horizontal su true diventa Orizzontale',\n      control: 'boolean',\n      defaultValue: false\n    },\n    dark: {\n      name: 'Card di colore scuro',\n      description: 'Di default ha lo sfondo bianco, se si imposta dark su true diventa con sfondo grigio scuro',\n      control: 'boolean',\n      defaultValue: false\n    },\n    border:{\n      name: 'Card con bordo',\n      control: 'boolean',\n      defaultValue: false\n    },\n    shadow:{\n      name: 'Card con ombra',\n      control: 'boolean',\n      defaultValue: false\n    },\n    borderRadius: {\n      name: 'Bordi arrotondati',\n      description: 'Imposta i bordi della card arrotondati',\n      control: 'boolean',\n      // if:{\n      //   arg: 'topBorderContentRadius',\n      //   eq: false\n      // }\n    },\n    topBorderContentRadius: {\n      name: 'Border top Content',\n      description: 'Border top del Content (esclusa la sezione media) arrotondato',\n      control: 'boolean',\n      // if:{\n      //   arg: 'borderRadius',\n      //   eq: false\n      // }\n    },\n    boxed: {\n      name: 'Boxed',\n      description: 'Imposta un padding intorno al media',\n      control: 'boolean',\n    },\n    roundedMedia: {\n      name: 'Immagine o Video arrotondati',\n      description: 'Imposta l\\'immagine o il video arrotondati e senza sfondo',\n      control: 'boolean',\n    },\n    imgSrc: {\n      name: 'Url del\\'immagine',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'Alt dell\\'immagine',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'Url del video',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente imgSrc',\n      control: 'text',\n      if:{\n        arg: 'imgSrc',\n        exists: false\n      }\n    },\n  }\n};\n\nconst Template = (args) => {\n  return `<jump-card class=\"${args.class ?? ''}\" \n  ${args.videoSrc ? `video-src=\"${args.videoSrc}\"` : ''} \n  ${args.imgSrc ? `img-src=\"${args.imgSrc}\"` : ''} \n  ${args.imgAlt ? `img-alt=\"${args.imgAlt}\"` : ''} \n  ${args.border == true ? 'border' : ''} \n  ${args.horizontal == true ? 'horizontal' : ''} \n  ${args.dark == true ? 'dark' : ''} \n  ${args.borderRadius == true ? 'border-radius' : ''} \n  ${args.topBorderContentRadius == true ? 'top-border-content-radius' : ''} \n  ${args.boxed == true ? 'boxed' : ''} \n  ${args.roundedMedia == true ? 'rounded-media' : ''} \n  ${args.shadow == true ? 'shadow' : ''} \n  > \n    <div class=\"ContentWrapper\" slot=\"body\">\n      <h3 style=\"margin-top: 0\">Titolo della card</h3>\n      <p>Testo della card</p>\n    </div>\n    <jump-button slot=\"footer\" id=\"#card\" class=\" \"variant=\"secondary\" size=\"medium\" href=\"#\" target=\"_self\" ariaLabel=\"sono un bottone\" text>\n    Scopri di più<jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon></jump-button>\n  </jump-card>`\n}\n\nexport const CardVideo= Template.bind({});\nCardVideo.args = {\n  videoSrc: 'https://media.jumpgroup.it/jumpguides/uploads/2021/06/Tutorial-Asana-e-Harvest.mov',\n};"]}

package/dist/collection/components/jump-card/jump-card.css

@@ -0,0 +1,99 @@
+jump-card {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  --jump-card-max-width-horizontal: 100%;
+  --jump-card-color: var(--neutral-grey-primary);
+  --jump-card-background: #fff;
+  --jump-card-color-dark: #fff;
+  --jump-card-border-color: var(--neutral-grey-background);
+  --jump-card-border-radius: 6px;
+  --jump-card-border-top-radius: 1rem;
+  --jump-card-top-border-body-radius: 1.5rem 1rem;
+  --jump-card-padding: 1rem 1.25rem;
+  font-family: var(--ff-primary, "Arial"), sans-serif;
+  line-height: var(--lh-400, 1.3);
+  background-color: var(--jump-card-background);
+  color: var(--jump-card-color);
+  overflow: hidden;
+}
+jump-card img,
+jump-card video {
+  aspect-ratio: 4/3;
+  overflow: hidden;
+  position: relative;
+}
+jump-card .Content {
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+  background-color: var(--jump-card-background);
+}
+jump-card[dark] {
+  background-color: var(--neutral-grey-primary);
+  color: var(--jump-card-color-dark);
+}
+jump-card[dark] .Content {
+  background-color: var(--neutral-grey-primary);
+  color: var(--jump-card-color-dark);
+}
+jump-card[border] {
+  border: 1px solid var(--jump-card-border-color);
+}
+jump-card[border-radius] {
+  border-radius: var(--jump-card-border-radius);
+}
+jump-card[top-border-content-radius] {
+  border-radius: var(--jump-card-border-top-radius);
+}
+jump-card[top-border-content-radius] .Content {
+  border-top-left-radius: var(--jump-card-border-top-radius);
+  border-top-right-radius: var(--jump-card-border-top-radius);
+  margin-top: -1rem;
+  z-index: 2;
+}
+jump-card[boxed] {
+  border-radius: var(--jump-card-border-radius);
+}
+jump-card[boxed] img,
+jump-card[boxed] video {
+  border-radius: var(--jump-card-border-radius);
+  background-color: var(--jump-card-background);
+  margin: 0.5rem 0.5rem 0;
+}
+jump-card[horizontal] {
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  max-width: var(--jump-card-max-width-horizontal);
+}
+jump-card[rounded-media] {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: transparent;
+}
+jump-card[rounded-media] img,
+jump-card[rounded-media] video {
+  background-color: transparent;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  width: 100%;
+  flex: 0 1 40%;
+}
+jump-card[rounded-media] .Content {
+  background-color: transparent;
+  align-items: center;
+}
+jump-card[rounded-media][horizontal] {
+  text-align: left;
+}
+jump-card[rounded-media][horizontal] .Content {
+  align-items: flex-start;
+}
+jump-card[shadow] {
+  box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);
+}