@jumpgroup/jump-design-system 0.2.7 → 0.3.1

package/dist/collection/components/jump-button/jump-button.stories.js

@@ -0,0 +1,199 @@
+import { generateAttributesFromArgs } from "../../utils/utils";
+export default {
+    title: 'Components/Button/Button',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            name: 'variant',
+            description: 'Imposta la variante di colore del bottone',
+            control: 'select',
+            options: [
+                'primary',
+                'secondary',
+                'neutral',
+                'white'
+            ],
+        },
+        outline: {
+            name: 'outline',
+            description: 'Imposta se il bottone deve avere il solo bordo',
+            control: 'boolean'
+        },
+        size: {
+            name: 'size',
+            description: 'Imposta la dimensione del bottone',
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large',
+            ],
+            labels: {
+                small: 'Piccolo',
+                medium: 'Medio',
+                large: 'Grande',
+            }
+        },
+        pill: {
+            name: 'pill',
+            description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',
+            control: 'boolean'
+        },
+        name: {
+            name: 'name',
+            description: 'Imposta il name del bottone, va impostato solo se non è un link',
+            control: 'text'
+        },
+        value: {
+            name: 'value',
+            description: 'Imposta il value del bottone, va impostato solo se non è un link',
+            control: 'text'
+        },
+        ariaLabel: {
+            name: 'ariaLabel',
+            description: 'Imposta l\'aria label del bottone, va impostato solo se non è un link',
+            control: 'text'
+        },
+        text: {
+            name: 'text',
+            description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',
+            control: 'boolean'
+        },
+        onlyIcon: {
+            name: 'onlyIcon',
+            description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',
+            control: 'boolean'
+        },
+        full: {
+            name: 'full',
+            description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',
+            control: 'boolean'
+        },
+        href: {
+            name: 'href',
+            description: 'Imposta l\'href del link, va impostato solo se non è un button ma è un link',
+            control: 'text'
+        },
+        target: {
+            name: 'target',
+            description: 'Imposta il target del link, va impostato solo se non è un button ma è un link',
+            control: 'select',
+            options: [
+                '_self',
+                '_blank',
+                '_parent',
+                '_top'
+            ],
+            labels: {
+                _self: '_self',
+                _blank: '_blank',
+                _parent: '_parent',
+                _top: '_top'
+            },
+        },
+        id: {
+            name: 'id',
+            description: 'Imposta l\'id del bottone',
+            control: 'text'
+        },
+        disabled: {
+            name: 'disabled',
+            description: 'Imposta se il bottone deve essere disabilitato',
+            control: 'boolean'
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-button ${attributes}> Scopri di più </jump-button>`;
+};
+const TemplateWithIcon = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return `<jump-button ${attributes}> <jump-icon slot="suffix" name="arrow-right"></jump-icon> Scopri di più </jump-button>`;
+};
+export const ButtonWithIcon = TemplateWithIcon.bind({});
+ButtonWithIcon.args = {
+    variant: 'primary',
+    size: 'small',
+    outline: false,
+    pill: false,
+    name: 'scopri',
+    value: 'value',
+    ariaLabel: 'Scopri di più',
+    text: false,
+    full: false,
+    id: 'button',
+    disabled: false,
+    onlyIcon: false,
+};
+export const ButtonWithoutIcon = Template.bind({});
+ButtonWithoutIcon.args = {
+    variant: 'primary',
+    size: 'small',
+    outline: false,
+    pill: false,
+    name: 'scopri',
+    value: 'value',
+    text: false,
+    full: false,
+    id: 'button',
+    disabled: false,
+    onlyIcon: false,
+};
+export const Outline = Template.bind({});
+Outline.args = {
+    variant: 'primary',
+    size: 'small',
+    outline: true,
+    pill: false,
+    name: 'scopri',
+    value: 'value',
+    ariaLabel: 'Scopri di più',
+    text: false,
+    full: false,
+    id: 'button',
+    disabled: false,
+    onlyIcon: false,
+};
+export const Pill = Template.bind({});
+Pill.args = {
+    variant: 'primary',
+    size: 'small',
+    outline: false,
+    pill: true,
+    name: 'scopri',
+    value: 'value',
+    ariaLabel: 'Scopri di più',
+    text: false,
+    full: false,
+    id: 'button',
+    disabled: false,
+    onlyIcon: false,
+};
+export const Text = Template.bind({});
+Text.args = {
+    variant: 'primary',
+    size: 'small',
+    outline: false,
+    pill: false,
+    name: 'scopri',
+    value: 'value',
+    text: true,
+    full: false,
+    id: 'button',
+    disabled: false,
+    onlyIcon: false,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    variant: 'primary',
+    size: 'small',
+    disabled: true,
+};
+export const CustomButton = Template.bind({});
+CustomButton.args = {
+    pill: true,
+    size: 'small',
+    class: 'chat'
+};
+//# sourceMappingURL=jump-button.stories.js.map

package/dist/collection/components/jump-button/jump-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-button.stories.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Button/Button',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      name: 'variant',\n      description: 'Imposta la variante di colore del bottone',\n      control: 'select',\n      options: [\n        'primary',\n        'secondary',\n        'neutral',\n        'white'\n      ],\n    },\n    outline : {\n      name: 'outline',\n      description: 'Imposta se il bottone deve avere il solo bordo',\n      control: 'boolean'\n    },\n    size: {\n      name: 'size',\n      description: 'Imposta la dimensione del bottone',\n      control: 'select',\n      options: [\n        'small',\n        'medium',\n        'large',\n      ],\n      labels: {\n        small: 'Piccolo',\n        medium: 'Medio',\n        large: 'Grande',\n      }\n    },\n    pill: {\n      name: 'pill',\n      description: 'Imposta se il bottone deve avere il bordo completamente stondato a pillola',\n      control: 'boolean'\n    },\n    name: {\n      name: 'name',\n      description: 'Imposta il name del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    value: {\n      name: 'value',\n      description: 'Imposta il value del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    ariaLabel: {\n      name: 'ariaLabel',\n      description: 'Imposta l\\'aria label del bottone, va impostato solo se non è un link',\n      control: 'text'\n    },\n    text: {\n      name: 'text',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    onlyIcon: {\n      name: 'onlyIcon',\n      description: 'Imposta se il bottone è solo testo, quindi senza bordo, sfondo e padding',\n      control: 'boolean'\n    },\n    full: {\n      name: 'full',\n      description: 'Imposta se il bottone sarà largo tutto lo spazio che può occupare',\n      control: 'boolean'\n    },\n    href:{\n      name: 'href',\n      description: 'Imposta l\\'href del link, va impostato solo se non è un button ma è un link',\n      control: 'text'\n    },\n    target:{\n      name: 'target',\n      description: 'Imposta il target del link, va impostato solo se non è un button ma è un link',\n      control: 'select',\n      options: [\n        '_self',\n        '_blank',\n        '_parent',\n        '_top'\n      ],\n      labels: {\n        _self: '_self',\n        _blank: '_blank',\n        _parent: '_parent',\n        _top: '_top'\n      },\n    },\n    id: {\n      name: 'id',\n      description: 'Imposta l\\'id del bottone',\n      control: 'text'\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'Imposta se il bottone deve essere disabilitato',\n      control: 'boolean'\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes}> Scopri di più </jump-button>`\n}\n\nconst TemplateWithIcon = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-button ${attributes}> <jump-icon slot=\"suffix\" name=\"arrow-right\"></jump-icon> Scopri di più </jump-button>`\n}\n\nexport const ButtonWithIcon = TemplateWithIcon.bind({});\nButtonWithIcon.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const ButtonWithoutIcon = Template.bind({});\nButtonWithoutIcon.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Outline = Template.bind({});\nOutline.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: true,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Pill = Template.bind({});\nPill.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: true,\n  name: 'scopri',\n  value: 'value',\n  ariaLabel: 'Scopri di più',\n  text: false,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Text = Template.bind({});\nText.args = {\n  variant: 'primary',\n  size: 'small',\n  outline: false,\n  pill: false,\n  name: 'scopri',\n  value: 'value',\n  text: true,\n  full: false,\n  id: 'button',\n  disabled: false,\n  onlyIcon: false,\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  variant: 'primary',\n  size: 'small',\n  disabled: true,\n};\n\nexport const CustomButton = Template.bind({});\nCustomButton.args = {\n  pill: true,\n  size: 'small',\n  class: 'chat'\n};"]}

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

@@ -4,8 +4,8 @@ jump-card {
   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-background: var(--neutral-white);
+  --jump-card-color-dark: var(--neutral-white);
   --jump-card-border-color: var(--neutral-grey-background);
   --jump-card-border-radius: 6px;
   --jump-card-border-top-radius: 1rem;

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

@@ -14,8 +14,8 @@ export class AppCard {
         this.videoSrc = '';
     }
     render() {
-        return (h(Host, { key: '990d2452fd2b295b5b5c78a5cbd311c938318ee7', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
-            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'cb2ca9a506ac28a88fb3e4fb7fe6626f9af6daf5', class: "Content" }, h("slot", { key: '8e893537441beedf925094a99a886f9d5c1a1377', name: "body" }), h("slot", { key: '9436fd7c5030bf0405bb88ab43ca21a4bb7e5e35', name: "footer" }))));
+        return (h(Host, { key: '7cb28f9f3ef1a64c859b7b4de719ca9dc58eea8d', horizontal: this.horizontal, "border-radius": this.borderRadius, "rounded-media": this.roundedMedia, "top-border-content-radius": this.topBorderContentRadius, boxed: this.boxed, shadow: this.shadow, border: this.border }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'dabe68c686a49f1af7386182ad4b14181d7c7bcc', class: "Content" }, h("slot", { key: '18be998730900c91de0e93e410ae34abccff4bfc', name: "body" }), h("slot", { key: 'd9dfbf2a4cf014ceb761432cd435179689d5baa6', name: "footer" }))));
     }
     static get is() { return "jump-card"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,183 @@
+:host {
+  --card-max-width: 450px;
+  --jump-card-max-width-horizontal: 100%;
+  --jump-card-color: var(--neutral-grey-primary);
+  --jump-card-background: transparent;
+  --jump-card-border-color: var(--neutral-grey-background);
+  --jump-card-padding: 0.5rem;
+  max-width: var(--card-max-width);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  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);
+}
+:host .Footer,
+:host .Body {
+  display: flex;
+  width: 100%;
+}
+:host jump-badge {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1;
+}
+:host jump-badge.hasBackground.iconOnly {
+  top: calc(1rem + 8px);
+  left: calc(1rem + 8px);
+}
+:host .Favorite {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+:host .Favorite.hasBackground.iconOnly {
+  top: calc(1rem + 8px);
+  right: calc(1rem + 8px);
+}
+:host .Media {
+  overflow: hidden;
+  position: relative;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  aspect-ratio: 1/1;
+}
+:host .Media img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+:host .Media.hasBackground {
+  background-color: var(--neutral-white);
+}
+:host .Media.hasBackground.iconOnly {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  padding: var(--jump-card-padding) var(--jump-card-padding) 0;
+}
+:host .Media.hasBackground.iconOnly img {
+  border-radius: 6px;
+}
+:host .NotificationCart {
+  display: none;
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  padding: 2rem 1rem;
+  background-color: hsla(0, 0%, 0%, 0.35);
+  box-sizing: border-box;
+}
+:host .NotificationCart.is-active {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:host .Content.hasBackground {
+  background-color: var(--neutral-white);
+  padding: calc(var(--jump-card-padding) * 2);
+}
+:host .Content.iconOnly {
+  padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);
+}
+:host .Body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: var(--jump-card-padding) 0;
+}
+:host .Body > * {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+:host .Body > * > * {
+  flex: 0 1 auto;
+}
+:host .Body.hasBackground {
+  padding: 0 0 var(--jump-card-padding);
+}
+:host .Body.iconOnly {
+  padding: 0;
+}
+:host .Product {
+  font-size: var(--fs-400);
+}
+:host .Subtitle {
+  font-size: var(--fs-300);
+  color: var(--neutral-grey-secondary);
+}
+:host .Footer {
+  line-height: var(--lh-400);
+  justify-content: end;
+  padding: var(--jump-card-padding) 0;
+  align-items: flex-end;
+}
+:host .Footer.justify-between {
+  justify-content: space-between;
+}
+:host .Footer.hasBackground {
+  padding-bottom: 0;
+}
+:host .Footer.iconOnly {
+  padding: 0;
+}
+:host .OutOfStock {
+  justify-items: start;
+  font-size: var(--fs-300);
+  font-weight: var(--fw-900);
+  color: var(--status-danger-standard);
+}
+:host .OnlyIconButton {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: var(--neutral-white);
+  border-top-left-radius: 20px;
+  padding: 8px 8px 0px 8px;
+}
+:host .Price {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: 1.5rem 1.5rem auto;
+  justify-items: end;
+  align-items: end;
+  font-size: var(--fs-500);
+  font-weight: var(--fw-900);
+  line-height: var(--lh-400);
+}
+:host .Price > * {
+  display: inline-flex;
+}
+:host .Price__Regular {
+  text-align: right;
+}
+:host .Price__Regular.sale {
+  text-decoration: line-through;
+  color: var(--neutral-grey-secondary);
+  font-weight: var(--fw-400);
+  font-size: var(--fs-400);
+  grid-column: 2;
+  grid-row: 1;
+}
+:host .Price__Sale {
+  grid-column: 2;
+  grid-row: 2;
+}
+:host .Price__Discount {
+  color: var(--status-danger-standard);
+  font-weight: var(--fw-400);
+  font-size: var(--fs-300);
+  grid-column: 1;
+  grid-row: 1;
+}
+
+:host(.Pippo) {
+  background-color: red;
+}