@jumpgroup/jump-design-system 0.2.7 → 0.3.1

package/dist/jump-design-system/p-fafe6478.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jumpCardEcommerceCss","JumpCardEcommerceStyle0","JumpCardEcommerce","componentWillLoad","componentDidLoad","this","jumpQuantityEl","querySelector","addEventListener","onQuantityChange","bind","quantity","getValue","then","console","log","disconnectedCallback","removeEventListener","e","detail","value","onToggleFavorite","favorite","toggleFavorite","emit","productId","addProductToCart","addedToCart","payload","productAddToCart","waitingList","addToWaitingList","productWaitingList","changeVariationBody","event","selectElement","target","selectedValue","changedVariation","variation","changeVariation","render","backgroundClass","hasBackground","iconOnlyClass","onlyIconButton","justifyClass","outOfStock","calculateDiscount","price","salePrice","discount","toFixed","h","Host","badge","class","variant","dimension","label","onClick","size","text","onlyIcon","slot","name","category","href","link","img","videoSrc","src","alt","imgAlt","autoplay","type","notificationUrl","notificationText","pill","productName","subtitle","currency","outOfStockText","waitingListText","addtoCartText"],"sources":["src/components/jump-card-ecommerce/jump-card-ecommerce.scss?tag=jump-card-ecommerce&encapsulation=shadow","src/components/jump-card-ecommerce/jump-card-ecommerce.tsx"],"sourcesContent":[":host {\n  --card-max-width: 450px;\n  --jump-card-max-width-horizontal: 100%;\n  --jump-card-color: var(--neutral-grey-primary);\n  --jump-card-background: transparent;\n  --jump-card-border-color: var(--neutral-grey-background);\n  --jump-card-padding: 0.5rem;\n\n  max-width: var(--card-max-width);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  font-family: var(--ff-primary, 'Arial'), sans-serif;\n  line-height: var(--lh-400, 1.3);\n  background-color: var(--jump-card-background);\n  color: var(--jump-card-color);\n\n  .Footer,\n  .Body {\n    display: flex;\n    width: 100%;\n  }\n\n  jump-badge {\n    position: absolute;\n    top: 1rem;\n    left: 1rem;\n    z-index: 1;\n\n    &.hasBackground.iconOnly {\n      top: calc(1rem + 8px);\n      left: calc(1rem + 8px);\n    }\n  }\n\n  .Favorite {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    z-index: 1;\n\n    &.hasBackground.iconOnly {\n      top: calc(1rem + 8px);\n      right: calc(1rem + 8px);\n    }\n  }\n\n  .Media {\n    // aspect-ratio: 3/4;\n    overflow: hidden;\n    position: relative;\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n    aspect-ratio: 1/1;\n\n    img {\n      height: 100%;\n      width: 100%;\n      object-fit: cover;\n    }\n\n    &.hasBackground {\n      background-color: var(--neutral-white);\n\n      &.iconOnly {\n        border-top-left-radius: 6px;\n        border-top-right-radius: 6px;\n        padding: var(--jump-card-padding) var(--jump-card-padding) 0;\n\n        img {\n          border-radius: 6px;\n        }\n      }\n    }\n  }\n\n  .NotificationCart {\n    display: none;\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    padding: 2rem 1rem;\n    background-color: hsl(0 0% 0% / 35%);\n    box-sizing: border-box;\n\n    &.is-active {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  .Content {\n    &.hasBackground {\n      background-color: var(--neutral-white);\n      padding: calc(var(--jump-card-padding) * 2);\n    }\n\n    &.iconOnly {\n      padding: calc(var(--jump-card-padding) * 2) var(--jump-card-padding);\n    }\n  }\n\n  .Body {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n    padding: var(--jump-card-padding) 0;\n\n    & > * {\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n\n      & > * {\n        flex: 0 1 auto;\n      }\n    }\n\n    &.hasBackground {\n      padding: 0 0 var(--jump-card-padding);\n    }\n\n    &.iconOnly {\n      padding: 0;\n    }\n  }\n\n  .Product {\n    font-size: var(--fs-400);\n  }\n\n  .Subtitle {\n    font-size: var(--fs-300);\n    color: var(--neutral-grey-secondary);\n  }\n\n  .Footer {\n    line-height: var(--lh-400);\n    justify-content: end;\n    padding: var(--jump-card-padding) 0;\n    align-items: flex-end;\n\n    &.justify-between {\n      justify-content: space-between;\n    }\n\n    &.hasBackground {\n      padding-bottom: 0;\n    }\n\n    &.iconOnly {\n      padding: 0;\n    }\n  }\n\n  .OutOfStock {\n    justify-items: start;\n    font-size: var(--fs-300);\n    font-weight: var(--fw-900);\n    color: var(--status-danger-standard);\n  }\n\n  .OnlyIconButton {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    background: var(--neutral-white);\n    border-top-left-radius: 20px;\n    padding: 8px 8px 0px 8px;\n  }\n\n  .Price {\n    position: relative;\n    display: grid;\n    grid-template-columns: auto auto;\n    grid-template-rows: 1.5rem 1.5rem auto;\n    justify-items: end;\n    align-items: end;\n\n    font-size: var(--fs-500);\n    font-weight: var(--fw-900);\n    line-height: var(--lh-400);\n\n    & > * {\n      display: inline-flex;\n    }\n\n    &__Regular {\n      text-align: right;\n\n      &.sale {\n        text-decoration: line-through;\n        color: var(--neutral-grey-secondary);\n        font-weight: var(--fw-400);\n        font-size: var(--fs-400);\n        grid-column: 2;\n        grid-row: 1;\n      }\n    }\n\n    &__Sale {\n      grid-column: 2;\n      grid-row: 2;\n    }\n\n    &__Discount {\n      color: var(--status-danger-standard);\n      font-weight: var(--fw-400);\n      font-size: var(--fs-300);\n      grid-column: 1;\n      grid-row: 1;\n    }\n  }\n}\n\n:host(.Pippo) {\n  background-color: red;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element} from '@stencil/core';\n\n@Component({\n  tag: 'jump-card-ecommerce',\n  styleUrl: 'jump-card-ecommerce.scss',\n  shadow: true,\n})\nexport class JumpCardEcommerce {\n\n  @Element() JumpCardEcommerce: HTMLElement;\n  jumpQuantityEl;\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n\n  /** Indicate if card has only icon button*/\n  @Prop() onlyIconButton: boolean = false;\n\n  /** Indicate if card has background*/\n  @Prop() hasBackground: boolean = false;\n\n  /** Indicates the badge of the card*/\n  @Prop() badge: string;\n\n  /**  Indicates if the product is favorite */\n  @Prop({mutable:true, reflect: true}) favorite: boolean = false;\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 videoSrc of the card*/\n  @Prop() videoSrc: string; \n\n  /** Indicate if the product is added to cart*/\n  @Prop() addedToCart: boolean = false;\n\n  /** Indicates the notificationUrl of the card*/\n  @Prop() notificationUrl: string;\n\n  /** Indicates the notificationText of the card*/\n  @Prop() notificationText: string = 'Aggiunto al carrello';\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 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  /** Indicates the button class of the add to cart / notification button */\n  @Prop() addtoCartText: string ;\n\n  /** Indicates the button class of the add to cart / notification button */\n  @Prop() waitingListText: string ;\n\n  /** Indicate if the user request to be notified when te product is avaible*/\n  @Prop() addToWaitingList: boolean = false;\n\n  /** Indicate if the variation is change*/\n  @Prop() changedVariation: boolean = false;\n\n  /* ---------------------- @STATE ------------------------- */ \n\n  // è una proprietà che viene cambiata solo da dentro\n\n  quantity: number;\n\n  // @Watch('quantity') \n  // funziona solo dalla seconda volta in poi \n  // watchQuantity(newValue, oldValue) {\n  //   console.log('quantity changed:', newValue, oldValue);\n  // }\n\n /* ---------------------- @EVENTS ------------------------- */\n  \n  @Event({eventName: 'jump-toggle-favorite'}) toggleFavorite: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-cart'}) productAddToCart: EventEmitter;\n\n  @Event({eventName: 'jump-add-to-waiting-list'}) productWaitingList: EventEmitter;\n\n  @Event({eventName: 'jump-change-variation'}) changeVariation: EventEmitter;\n  \n  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  componentWillLoad() {}\n\n  componentDidLoad() {\n    this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n    \n    if(this.jumpQuantityEl){\n      this.jumpQuantityEl.addEventListener('jump-change',  this.onQuantityChange.bind(this));\n      this.quantity = this.jumpQuantityEl.getValue().then((quantity) => {\n        this.quantity = quantity;\n      });\n\n      console.log('Quantity:', this.quantity)\n    }\n  }\n\n  disconnectedCallback() {\n    this.jumpQuantityEl = this.JumpCardEcommerce.querySelector('jump-quantity');\n    if(this.jumpQuantityEl){\n      this.jumpQuantityEl.removeEventListener('jump-change',this.onQuantityChange);\n    }\n  }\n\n  /* ---------------------- @METHODS ------------------------- */\n  onQuantityChange(e) {\n    this.quantity = e.detail.value;\n  }\n\n  onToggleFavorite() {\n    this.favorite = !this.favorite;\n    this.toggleFavorite.emit(\n      {\n        productId: this.productId,\n        favorite: this.favorite\n      }\n    ); \n  }\n\n  addProductToCart() {\n    this.addedToCart = true;\n    const payload = {\n      productId: this.productId,\n      addedToCart: this.addedToCart,\n      quantity: this.quantity\n      // mancano le variazioni\n    };\n    this.productAddToCart.emit(payload);\n    console.log(\"productAddToCart payload:\", payload);\n  }\n\n  waitingList() {\n    this.addToWaitingList = true;\n    this.productWaitingList.emit(\n      {\n        productId: this.productId,\n        addToWaitingList: this.addToWaitingList\n      }\n    )\n  }\n\n  changeVariationBody(event: Event) {\n    const selectElement = event.target as HTMLSelectElement;\n    const selectedValue = selectElement.value;\n\n    this.changedVariation = true;\n    const payload = {\n      productId: this.productId,\n      changedVariation: this.changedVariation,\n      variation: selectedValue // da sostituire\n    };\n    this.changeVariation.emit(payload);\n    console.log(\"changeVariation payload:\", payload)\n  }\n\n  \n  render() {\n    const backgroundClass = this.hasBackground ? 'hasBackground' : '';\n    const iconOnlyClass = this.onlyIconButton ? 'iconOnly' : '';\n    const justifyClass = this.outOfStock ? 'justify-between' : '';\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>\n        {this.badge ? <jump-badge class={`${backgroundClass} ${iconOnlyClass}`} variant=\"secondary\" dimension=\"small\" label={this.badge}></jump-badge> : ''}\n  \n        <jump-button onClick={ () => this.onToggleFavorite() } class={`Favorite ${backgroundClass} ${iconOnlyClass}`} variant={this.favorite ? 'neutral' : 'primary'} size=\"small\" text onlyIcon>\n            <jump-icon slot=\"prefix\" name=\"heart\" category={this.favorite ? 'light' : 'solid'} size=\"medium\"></jump-icon>\n        </jump-button> \n\n        <div class={`Media ${iconOnlyClass} ${backgroundClass}`}>\n          <a href={this.link}>\n            {this.img && !this.videoSrc ? <img src={this.img} alt={this.imgAlt}></img> : ''}\n            {this.videoSrc && !this.img ? \n              <video autoplay> \n                <source src={this.videoSrc} type=\"video/mp4\"/> \n                <source src={this.videoSrc} type=\"video/mov\"/> \n                <source src={this.videoSrc} type=\"video/webm\"/> \n              </video> : ''}\n          </a> \n          <div class={`NotificationCart ${this.addedToCart == true ? 'is-active' : ''}`}>\n            <jump-button href={this.notificationUrl} variant=\"white\" text> \n            <jump-icon slot=\"prefix\" name=\"check\"></jump-icon> \n              <span> {this.notificationText} </span>\n            </jump-button>\n          </div>\n            {this.onlyIconButton ? \n              <div class=\"OnlyIconButton\">\n                <jump-button variant=\"secondary\" size=\"large\" pill onlyIcon onClick={() => this.addProductToCart()}> \n                  <jump-icon slot=\"prefix\" name='cart-shopping' category=\"regular\"></jump-icon> \n                </jump-button> \n              </div>\n              : ''\n            }\n        </div>\n\n        <div class={`Content ${backgroundClass} ${iconOnlyClass}`}>\n          <div class={`Body ${backgroundClass} ${iconOnlyClass}`}>\n            <div>\n              <div class=\"Info\">\n                <div class=\"Product\">{this.productName}</div>\n                <div class=\"Subtitle\">{this.subtitle}</div>\n              </div>\n\n              <div class=\"Price\">\n                <div class=\"Price__Discount\">\n                  {calculateDiscount(this.price, this.salePrice)}%\n                </div>\n                <div class={`Price__Regular ${this.salePrice ? 'sale' : ''}`}> \n                  {this.currency}{this.price}\n                </div>\n                <div class=\"Price__Sale\">{this.currency}{this.salePrice}</div>\n              </div>\n            </div>\n            <div>\n            \n              <slot name=\"select\"></slot>\n              <slot name=\"quantity\"></slot>\n            </div>\n            \n          </div>\n\n          <div class={`Footer ${justifyClass} ${backgroundClass} ${iconOnlyClass}`}>\n            \n            {this.outOfStock ? <div class=\"OutOfStock\">{this.outOfStockText ? this.outOfStockText : 'Esaurito'}</div> : ''}\n            \n            { this.outOfStock ?  \n              <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.waitingList()}> \n                <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n                {this.waitingListText ? this.waitingListText : 'Notifica disponibilità'} \n              </jump-button> : ''\n            }\n\n            { !this.outOfStock && !this.onlyIconButton ?  \n              <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.addProductToCart()}> \n                <jump-icon slot=\"prefix\" name={!this.outOfStock ? 'cart-shopping' : 'bell'} category=\"regular\" size=\"small\"></jump-icon> \n                {this.addtoCartText ? this.addtoCartText : 'Aggiungi al carrello'} \n              </jump-button> : ''\n            }\n\n          </div>\n\n        </div>\n      </Host>\n    );\n  }\n\n}"],"mappings":"gEAAA,MAAMA,EAAuB,qxGAC7B,MAAAC,EAAeD,E,MCMFE,EAAiB,M,yQAQM,M,mBAGD,M,mCAMwB,M,sGAe1B,M,qDAMI,uB,kKAqBwB,M,gHAYvB,M,sBAGA,K,CA0BpC,iBAAAC,GAAiB,CAEjB,gBAAAC,GACEC,KAAKC,eAAiBD,KAAKH,kBAAkBK,cAAc,iBAE3D,GAAGF,KAAKC,eAAe,CACrBD,KAAKC,eAAeE,iBAAiB,cAAgBH,KAAKI,iBAAiBC,KAAKL,OAChFA,KAAKM,SAAWN,KAAKC,eAAeM,WAAWC,MAAMF,IACnDN,KAAKM,SAAWA,CAAQ,IAG1BG,QAAQC,IAAI,YAAaV,KAAKM,S,EAIlC,oBAAAK,GACEX,KAAKC,eAAiBD,KAAKH,kBAAkBK,cAAc,iBAC3D,GAAGF,KAAKC,eAAe,CACrBD,KAAKC,eAAeW,oBAAoB,cAAcZ,KAAKI,iB,EAK/D,gBAAAA,CAAiBS,GACfb,KAAKM,SAAWO,EAAEC,OAAOC,K,CAG3B,gBAAAC,GACEhB,KAAKiB,UAAYjB,KAAKiB,SACtBjB,KAAKkB,eAAeC,KAClB,CACEC,UAAWpB,KAAKoB,UAChBH,SAAUjB,KAAKiB,U,CAKrB,gBAAAI,GACErB,KAAKsB,YAAc,KACnB,MAAMC,EAAU,CACdH,UAAWpB,KAAKoB,UAChBE,YAAatB,KAAKsB,YAClBhB,SAAUN,KAAKM,UAGjBN,KAAKwB,iBAAiBL,KAAKI,GAC3Bd,QAAQC,IAAI,4BAA6Ba,E,CAG3C,WAAAE,GACEzB,KAAK0B,iBAAmB,KACxB1B,KAAK2B,mBAAmBR,KACtB,CACEC,UAAWpB,KAAKoB,UAChBM,iBAAkB1B,KAAK0B,kB,CAK7B,mBAAAE,CAAoBC,GAClB,MAAMC,EAAgBD,EAAME,OAC5B,MAAMC,EAAgBF,EAAcf,MAEpCf,KAAKiC,iBAAmB,KACxB,MAAMV,EAAU,CACdH,UAAWpB,KAAKoB,UAChBa,iBAAkBjC,KAAKiC,iBACvBC,UAAWF,GAEbhC,KAAKmC,gBAAgBhB,KAAKI,GAC1Bd,QAAQC,IAAI,2BAA4Ba,E,CAI1C,MAAAa,GACE,MAAMC,EAAkBrC,KAAKsC,cAAgB,gBAAkB,GAC/D,MAAMC,EAAgBvC,KAAKwC,eAAiB,WAAa,GACzD,MAAMC,EAAezC,KAAK0C,WAAa,kBAAoB,GAC3D,SAASC,EAAkBC,EAAeC,GACxC,MAAMC,GAAaF,EAAQC,GAAaD,EAAS,IACjD,OAAOE,EAASC,QAAQ,E,CAG1B,OACEC,EAACC,EAAI,KACFjD,KAAKkD,MAAQF,EAAA,cAAYG,MAAO,GAAGd,KAAmBE,IAAiBa,QAAQ,YAAYC,UAAU,QAAQC,MAAOtD,KAAKkD,QAAuB,GAEjJF,EAAA,eAAaO,QAAU,IAAMvD,KAAKgB,mBAAqBmC,MAAO,YAAYd,KAAmBE,IAAiBa,QAASpD,KAAKiB,SAAW,UAAY,UAAWuC,KAAK,QAAQC,KAAI,KAACC,SAAQ,MACpLV,EAAA,aAAWW,KAAK,SAASC,KAAK,QAAQC,SAAU7D,KAAKiB,SAAW,QAAU,QAASuC,KAAK,YAG5FR,EAAA,OAAKG,MAAO,SAASZ,KAAiBF,KACpCW,EAAA,KAAGc,KAAM9D,KAAK+D,MACX/D,KAAKgE,MAAQhE,KAAKiE,SAAWjB,EAAA,OAAKkB,IAAKlE,KAAKgE,IAAKG,IAAKnE,KAAKoE,SAAiB,GAC5EpE,KAAKiE,WAAajE,KAAKgE,IACtBhB,EAAA,SAAOqB,SAAQ,MACbrB,EAAA,UAAQkB,IAAKlE,KAAKiE,SAAUK,KAAK,cACjCtB,EAAA,UAAQkB,IAAKlE,KAAKiE,SAAUK,KAAK,cACjCtB,EAAA,UAAQkB,IAAKlE,KAAKiE,SAAUK,KAAK,gBACxB,IAEftB,EAAA,OAAKG,MAAO,oBAAoBnD,KAAKsB,aAAe,KAAO,YAAc,MACvE0B,EAAA,eAAac,KAAM9D,KAAKuE,gBAAiBnB,QAAQ,QAAQK,KAAI,MAC7DT,EAAA,aAAWW,KAAK,SAASC,KAAK,UAC5BZ,EAAA,gBAAQhD,KAAKwE,iBAAgB,OAG9BxE,KAAKwC,eACJQ,EAAA,OAAKG,MAAM,kBACTH,EAAA,eAAaI,QAAQ,YAAYI,KAAK,QAAQiB,KAAI,KAACf,SAAQ,KAACH,QAAS,IAAMvD,KAAKqB,oBAC9E2B,EAAA,aAAWW,KAAK,SAASC,KAAK,gBAAgBC,SAAS,cAGzD,IAIRb,EAAA,OAAKG,MAAO,WAAWd,KAAmBE,KACxCS,EAAA,OAAKG,MAAO,QAAQd,KAAmBE,KACrCS,EAAA,WACEA,EAAA,OAAKG,MAAM,QACTH,EAAA,OAAKG,MAAM,WAAWnD,KAAK0E,aAC3B1B,EAAA,OAAKG,MAAM,YAAYnD,KAAK2E,WAG9B3B,EAAA,OAAKG,MAAM,SACTH,EAAA,OAAKG,MAAM,mBACRR,EAAkB3C,KAAK4C,MAAO5C,KAAK6C,WAAU,KAEhDG,EAAA,OAAKG,MAAO,kBAAkBnD,KAAK6C,UAAY,OAAS,MACrD7C,KAAK4E,SAAU5E,KAAK4C,OAEvBI,EAAA,OAAKG,MAAM,eAAenD,KAAK4E,SAAU5E,KAAK6C,aAGlDG,EAAA,WAEEA,EAAA,QAAMY,KAAK,WACXZ,EAAA,QAAMY,KAAK,eAKfZ,EAAA,OAAKG,MAAO,UAAUV,KAAgBJ,KAAmBE,KAEtDvC,KAAK0C,WAAaM,EAAA,OAAKG,MAAM,cAAcnD,KAAK6E,eAAiB7E,KAAK6E,eAAiB,YAAoB,GAE1G7E,KAAK0C,WACLM,EAAA,eAAaI,QAAQ,YAAYI,KAAK,QAAQC,KAAI,KAACF,QAAS,IAAMvD,KAAKyB,eACrEuB,EAAA,aAAWW,KAAK,SAASC,MAAO5D,KAAK0C,WAAa,gBAAkB,OAAQmB,SAAS,UAAUL,KAAK,UACnGxD,KAAK8E,gBAAkB9E,KAAK8E,gBAAkB,0BAChC,IAGhB9E,KAAK0C,aAAe1C,KAAKwC,eAC1BQ,EAAA,eAAaI,QAAQ,YAAYI,KAAK,QAAQC,KAAI,KAACF,QAAS,IAAMvD,KAAKqB,oBACrE2B,EAAA,aAAWW,KAAK,SAASC,MAAO5D,KAAK0C,WAAa,gBAAkB,OAAQmB,SAAS,UAAUL,KAAK,UACnGxD,KAAK+E,cAAgB/E,KAAK+E,cAAgB,wBAC5B,K"}

package/dist/jump-design-system-elements.json

@@ -1,6 +1,14 @@
 {
   "version": 1.1,
   "tags": [
+    {
+      "name": "jump-accordion",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": []
+    },
     {
       "name": "jump-badge",
       "description": {
@@ -8,19 +16,57 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "dimension",
+          "description": "Indicates the variant of the badge",
+          "values": [
+            {
+              "name": "dot"
+            },
+            {
+              "name": "large"
+            },
+            {
+              "name": "microdot"
+            },
+            {
+              "name": "small"
+            }
+          ]
+        },
         {
           "name": "label",
           "description": "Indicates the label of the badge"
         },
+        {
+          "name": "outline",
+          "description": "Indicates the variant of the badge"
+        },
+        {
+          "name": "soft",
+          "description": "Indicates the variant of the badge"
+        },
         {
           "name": "variant",
           "description": "Indicates the variant of the badge",
           "values": [
+            {
+              "name": "danger"
+            },
+            {
+              "name": "neutral"
+            },
             {
               "name": "primary"
             },
             {
               "name": "secondary"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
             }
           ]
         }
@@ -191,6 +237,189 @@
         }
       ]
     },
+    {
+      "name": "jump-card-ecommerce",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "add-to-waiting-list",
+          "description": "Indicate if the user request to be notified when te product is avaible"
+        },
+        {
+          "name": "added-to-cart",
+          "description": "Indicate if the product is added to cart"
+        },
+        {
+          "name": "addto-cart-text",
+          "description": "Indicates the button class of the add to cart / notification button"
+        },
+        {
+          "name": "badge",
+          "description": "Indicates the badge of the card"
+        },
+        {
+          "name": "changed-variation",
+          "description": "Indicate if the variation is change"
+        },
+        {
+          "name": "currency",
+          "description": "Indicates the currency of the card"
+        },
+        {
+          "name": "favorite",
+          "description": "Indicates if the product is favorite"
+        },
+        {
+          "name": "has-background",
+          "description": "Indicate if card has background"
+        },
+        {
+          "name": "img",
+          "description": "Indicates the image's src of the card"
+        },
+        {
+          "name": "img-alt",
+          "description": "Indicates the img's alt of the card"
+        },
+        {
+          "name": "link",
+          "description": "Indicates the link of the card"
+        },
+        {
+          "name": "notification-text",
+          "description": "Indicates the notificationText of the card"
+        },
+        {
+          "name": "notification-url",
+          "description": "Indicates the notificationUrl of the card"
+        },
+        {
+          "name": "only-icon-button",
+          "description": "Indicate if card has only icon button"
+        },
+        {
+          "name": "out-of-stock",
+          "description": "Indicates if the product is outOfStock"
+        },
+        {
+          "name": "out-of-stock-text",
+          "description": "Indicates the outOfStockText of the product"
+        },
+        {
+          "name": "price",
+          "description": "Indicates the price of the card"
+        },
+        {
+          "name": "product-id",
+          "description": "Indicates the ID of the product, can be also a SKU"
+        },
+        {
+          "name": "product-name",
+          "description": "Indicates the title of the card"
+        },
+        {
+          "name": "sale-price",
+          "description": "Indicates the sale price of the card"
+        },
+        {
+          "name": "subtitle",
+          "description": "Indicates the subtitle of the card"
+        },
+        {
+          "name": "video-src",
+          "description": "Indicates the videoSrc of the card"
+        },
+        {
+          "name": "waiting-list-text",
+          "description": "Indicates the button class of the add to cart / notification button"
+        }
+      ]
+    },
+    {
+      "name": "jump-filter",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "direction",
+          "description": "",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "filter-button-icon",
+          "description": ""
+        },
+        {
+          "name": "filter-button-label",
+          "description": ""
+        },
+        {
+          "name": "filter-heading",
+          "description": ""
+        },
+        {
+          "name": "filters",
+          "description": ""
+        },
+        {
+          "name": "mobile-threshold",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "jump-filtergroup",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "heading",
+          "description": ""
+        },
+        {
+          "name": "less-label",
+          "description": ""
+        },
+        {
+          "name": "max-elements",
+          "description": ""
+        },
+        {
+          "name": "name",
+          "description": ""
+        },
+        {
+          "name": "other-label",
+          "description": ""
+        },
+        {
+          "name": "variant",
+          "description": "",
+          "values": [
+            {
+              "name": "accordion"
+            },
+            {
+              "name": "default"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "jump-icon",
       "description": {
@@ -198,9 +427,53 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "category",
+          "description": "Category of the icon",
+          "values": [
+            {
+              "name": "brands"
+            },
+            {
+              "name": "duotone"
+            },
+            {
+              "name": "light"
+            },
+            {
+              "name": "regular"
+            },
+            {
+              "name": "sharp-light"
+            },
+            {
+              "name": "sharp-regular"
+            },
+            {
+              "name": "sharp-solid"
+            },
+            {
+              "name": "sharp-thin"
+            },
+            {
+              "name": "solid"
+            },
+            {
+              "name": "thin"
+            }
+          ]
+        },
         {
           "name": "class",
-          "description": "Additional classes"
+          "description": "Class of the icon"
+        },
+        {
+          "name": "label",
+          "description": "Label for the icon"
+        },
+        {
+          "name": "library",
+          "description": "Library of the icon"
         },
         {
           "name": "name",
@@ -209,6 +482,10 @@
         {
           "name": "size",
           "description": "Size of the icon"
+        },
+        {
+          "name": "src",
+          "description": "Src of the icon"
         }
       ]
     },
@@ -221,15 +498,15 @@
       "attributes": [
         {
           "name": "last",
-          "description": ""
+          "description": "Last element of the page"
         },
         {
           "name": "pag-label",
-          "description": ""
+          "description": "Label of the pagination"
         },
         {
           "name": "show-first-and-last",
-          "description": ""
+          "description": "Show button to navigate so first e last page"
         }
       ]
     },
@@ -242,11 +519,11 @@
       "attributes": [
         {
           "name": "el-per-page",
-          "description": ""
+          "description": "Number of elements per page selected"
         },
         {
           "name": "first",
-          "description": ""
+          "description": "First element of the page"
         },
         {
           "name": "label-elements-per-page",
@@ -254,7 +531,7 @@
         },
         {
           "name": "last",
-          "description": ""
+          "description": "Last element of the page"
         },
         {
           "name": "pag-label",
@@ -262,11 +539,67 @@
         },
         {
           "name": "show-first-and-last",
-          "description": ""
+          "description": "Show button to navigate so first e last page"
         },
         {
           "name": "total",
+          "description": "Total of elements"
+        }
+      ]
+    },
+    {
+      "name": "jump-quantity",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": ""
+        },
+        {
+          "name": "max",
           "description": ""
+        },
+        {
+          "name": "min",
+          "description": ""
+        },
+        {
+          "name": "show-buttons",
+          "description": ""
+        },
+        {
+          "name": "step",
+          "description": ""
+        },
+        {
+          "name": "type",
+          "description": "",
+          "values": [
+            {
+              "name": "buttons"
+            },
+            {
+              "name": "dropdown"
+            },
+            {
+              "name": "input"
+            }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
         }
       ]
     },
@@ -278,7 +611,61 @@
       },
       "attributes": [
         {
-          "name": "active-tab",
+          "name": "tab-group-name",
+          "description": ""
+        },
+        {
+          "name": "variant",
+          "description": "The style of the tab. The same value must be passed to all the items.\nChoosed from \"inline\", \"boxed\", \"sheet\", \"rounded\""
+        }
+      ]
+    },
+    {
+      "name": "jump-tab-item",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "description": ""
+        },
+        {
+          "name": "icon-name",
+          "description": "Name of the icon. If not provided, the icon will not be displayed"
+        },
+        {
+          "name": "icon-position",
+          "description": "Icon position, apply only if the icon is present\nChoosed from \"left\", \"top\""
+        },
+        {
+          "name": "identifier",
+          "description": "Identifier of the tab"
+        },
+        {
+          "name": "label",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "jump-tab-panel",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": ""
+        },
+        {
+          "name": "identifier",
           "description": ""
         }
       ]

package/dist/types/components/jump-accordion/jump-accordion.d.ts

@@ -0,0 +1,3 @@
+export declare class JumpAccordion {
+    render(): any;
+}

package/dist/types/components/jump-badge/jump-badge.d.ts

@@ -6,6 +6,18 @@ export declare class AppBadge {
     /**
      * Indicates the variant of the badge
      */
-    variant: 'primary' | 'secondary';
+    variant: 'primary' | 'secondary' | 'neutral' | 'warning' | 'success' | 'danger';
+    /**
+     * Indicates the variant of the badge
+     */
+    dimension: 'large' | 'small' | 'dot' | 'microdot';
+    /**
+     * Indicates the variant of the badge
+     */
+    soft: boolean;
+    /**
+     * Indicates the variant of the badge
+     */
+    outline: boolean;
     render(): any;
 }

package/dist/types/components/jump-badge/jump-badge.stories.d.ts

@@ -13,7 +13,29 @@ declare const _default: {
             control: string;
             options: string[];
         };
+        outline: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        soft: {
+            name: string;
+            description: string;
+            control: string;
+        };
+        dimension: {
+            name: string;
+            description: string;
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
 export declare const Badge: any;
+export declare const IconBadge: any;
+export declare const Outline: any;
+export declare const Soft: any;
+export declare const Small: any;
+export declare const Dot: any;
+export declare const MicroDot: any;

package/dist/types/components/jump-button/jump-button-anchor.stories.d.ts

@@ -19,11 +19,23 @@ declare const _default: {
                 large: string;
             };
         };
-        disabled: {
+        href: {
             name: string;
             description: string;
             control: string;
         };
+        target: {
+            name: string;
+            description: string;
+            control: string;
+            options: string[];
+            labels: {
+                _self: string;
+                _blank: string;
+                _parent: string;
+                _top: string;
+            };
+        };
         text: {
             name: string;
             description: string;
@@ -34,11 +46,13 @@ declare const _default: {
             description: string;
             control: string;
         };
+        disabled: {
+            name: string;
+            description: string;
+            control: string;
+        };
     };
 };
 export default _default;
 export declare const LinkPrimary: any;
-export declare const LinkSecondary: any;
-export declare const LinkNeutral: any;
-export declare const LinkWhite: any;
 export declare const LinkWithIcon: any;

package/dist/types/components/jump-button/jump-button-dimension.stories.d.ts

@@ -24,11 +24,6 @@ declare const _default: {
             description: string;
             control: string;
         };
-        text: {
-            name: string;
-            description: string;
-            control: string;
-        };
         id: {
             name: string;
             description: string;

package/dist/types/components/jump-button/jump-button-only-icon.stories.d.ts

@@ -29,12 +29,12 @@ declare const _default: {
             description: string;
             control: string;
         };
-        disabled: {
+        id: {
             name: string;
             description: string;
             control: string;
         };
-        id: {
+        disabled: {
             name: string;
             description: string;
             control: string;
@@ -42,12 +42,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Primary: any;
-export declare const Secondary: any;
-export declare const Neutral: any;
-export declare const White: any;
-export declare const Pill: any;
-export declare const noBackground: any;
-export declare const outline: any;
-export declare const outlinePill: any;
-export declare const Disabled: any;
+export declare const onlyIcon: any;
+export declare const withBackground: any;