npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.52 → 0.3.54 - Mend

@jumpgroup/jump-design-system 0.3.52 → 0.3.54

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 (167) hide show

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -16,6 +16,8 @@
     "components/jump-pagination-table/jump-pagination-table.js",
     "components/jump-quantity/jump-quantity.js",
     "components/jump-search-bar/jump-search-bar.js",
+    "components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.js",
+    "components/jump-search-bar-mobile/jump-search-bar-mobile.js",
     "components/jump-tab/jump-tab.js",
     "components/jump-tab-item/jump-tab-item.js",
     "components/jump-tab-panel/jump-tab-panel.js"

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

@@ -228,6 +228,10 @@
   display: flex;
   font-size: var(--fs-400);
 }
+:host .SelectVariations {
+  display: flex;
+  align-items: flex-end;
+}
 :host .SelectVariations select {
   appearance: none;
   background-color: transparent;

package/dist/collection/components/jump-search-bar/jump-search-bar.css CHANGED Viewed

@@ -1,69 +1,195 @@
 :host {
-  display: flex;
+  display: block;
   --jump-search-bar-focus-color: var(--secondary-standard, #5E79BA);
   --jump-search-bar-border-color: var(--neutral-grey-secondary, #707070);
   --jump-search-bar-bg-color: var(--gray-ultralight, #F8F8F8);
+  --jump-search-bar-dropdown-border-color: var(--neutral-grey-disabled, #CBCBCB);
+  font-family: var(--ff-primary);
+  /* Applicazione dell'animazione alla SearchBar.iconOnly.linear */
 }
 :host jump-button {
   --jump-button-border-radius: 0px 3px 3px 0px;
 }
-:host input {
+:host .SearchBar {
+  position: relative;
+}
+:host .SearchBar.focused .InputWrapper {
+  border-color: var(--jump-search-bar-focus-color) !important;
+}
+:host .SearchBar.focused .InputWrapper jump-icon {
+  color: var(--jump-search-bar-focus-color) !important;
+}
+:host .SearchBar.focused .InputWrapper input {
+  outline: none !important;
+}
+:host .SearchBar:not(.iconOnly) {
+  display: flex;
   width: 100%;
+  /* Stile outline*/
+  /* Stile filled */
+  /* Stile linear */
 }
-:host(.manual.outline) input {
-  border-radius: 3px 0px 0px 3px;
+:host .SearchBar:not(.iconOnly) .InputWrapper {
+  width: 100%;
+  display: flex;
+}
+:host .SearchBar:not(.iconOnly) input {
+  width: 100%;
+  border: none;
+}
+:host .SearchBar:not(.iconOnly).outline .InputWrapper {
   border: 1px solid var(--jump-search-bar-border-color);
+  border-radius: 3px;
   padding: 12px;
+  gap: 8px;
 }
-:host(.manual.outline) input:focus-visible {
-  outline: 2px solid var(--jump-search-bar-focus-color);
-  outline-offset: -2px;
+:host .SearchBar:not(.iconOnly).outline .InputWrapper jump-icon {
+  color: var(--jump-search-bar-border-color);
 }
-:host(.auto.outline) input {
+:host .SearchBar:not(.iconOnly).outline.withBtn .InputWrapper {
+  border-radius: 3px 0px 0px 3px;
+}
+:host .SearchBar:not(.iconOnly).filled .InputWrapper {
+  border: 1px solid var(--jump-search-bar-bg-color);
+  background-color: var(--jump-search-bar-bg-color);
   border-radius: 3px;
-  border: 1px solid var(--jump-search-bar-border-color);
   padding: 12px;
-  padding-left: 35px;
-  background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E") no-repeat left;
-  background-size: 14px;
-  background-position: 10px center;
-}
-:host(.auto.outline) input:focus-visible {
-  outline: 2px solid var(--jump-search-bar-focus-color);
-  outline-offset: -2px;
-  background: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z" fill="%235E79BA"/></svg>') no-repeat left !important;
-  background-size: 14px !important;
-  background-position: 10px center !important;
+  gap: 8px;
 }
-/* Stile linear */
-:host(.auto.linear) input.search-input {
+:host .SearchBar:not(.iconOnly).filled .InputWrapper input {
+  background-color: var(--jump-search-bar-bg-color);
+}
+:host .SearchBar:not(.iconOnly).filled .InputWrapper jump-icon {
+  color: var(--jump-search-bar-border-color);
+}
+:host .SearchBar:not(.iconOnly).filled.focused.withBtn .InputWrapper {
+  border-radius: 3px 0px 0px 3px !important;
+}
+:host .SearchBar:not(.iconOnly).linear .InputWrapper {
+  border-bottom: 1px solid var(--jump-search-bar-border-color);
+  padding-bottom: 4px;
+}
+:host .SearchBar:not(.iconOnly).linear .InputWrapper jump-icon {
+  padding-right: 6px;
+}
+:host .Dropdown {
+  margin-top: 10px;
+  border-radius: 3px;
+  border: 1px solid var(--jump-search-bar-dropdown-border-color);
+  padding: 4px 16px;
+  background-color: white;
+}
+:host .Dropdown.dropAbsolute {
+  position: absolute;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+:host .Dropdown.dropRelative {
+  position: relative;
+}
+:host .Dropdown__Recents .title {
+  color: #707070;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 8px 0;
+  font-weight: 700;
+  display: flex;
+}
+:host .Dropdown__Results .totalRes {
+  display: flex;
+  justify-content: space-between;
+}
+:host .Dropdown .ResWrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host .Dropdown .ResWrapper div {
+  padding: 8px 0;
+  color: #707070;
+  font-size: 14px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+:host .Dropdown .ResWrapper div img {
+  width: 40px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 3px;
+}
+:host .Dropdown .ResWrapper div:hover {
+  cursor: pointer;
+}
+:host .Dropdown .ResWrapper .helperText {
+  color: #CBCBCB;
+}
+:host .Dropdown .ResWrapper .helperText svg {
+  width: 25px;
+  height: 25px;
+}
+:host .SearchBar.iconOnly.linear {
+  display: flex;
+  width: 100%;
+}
+:host .SearchBar.iconOnly.linear .InputWrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  transition: border-bottom 0.3s ease;
+  /* Transizione solo per il bordo inferiore */
+  border-bottom: 1px solid transparent;
+  /* Nessun bordo inizialmente */
+  padding-bottom: 4px;
+  overflow: hidden;
+  /* Per nascondere il contenuto che esce dai limiti dell'InputWrapper */
+}
+:host .SearchBar.iconOnly.linear .InputWrapper jump-icon {
+  padding-right: 6px;
+  /* Padding dell'icona */
+}
+:host .SearchBar.iconOnly.linear .InputWrapper input {
+  width: 0;
+  /* Imposta la larghezza iniziale a 0 */
   border: none;
+  transform: translateX(-100%);
+  /* Sposta l'input fuori dalla vista */
+  transition: width 0.3s ease, transform 0.3s ease;
+  /* Transizioni separate per width e transform */
+  animation: none;
+  /* Disabilita l'animazione predefinita */
+}
+:host .SearchBar.iconOnly.linear.expanded .InputWrapper {
   border-bottom: 1px solid var(--jump-search-bar-border-color);
-  padding: 8px 5px 8px 0;
-  padding-left: 35px;
-  background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E") no-repeat left;
-  background-size: 14px;
-  background-position: 10px center;
-}
-:host(.auto.linear) input:focus-visible {
-  outline: 2px solid var(--jump-search-bar-focus-color);
-  outline-offset: -2px;
-  background: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z" fill="%235E79BA"/></svg>') no-repeat left !important;
-  background-size: 14px !important;
-  background-position: 10px center !important;
+  /* Mostra il bordo inferiore quando espanso */
+  transition: border-bottom 0.3s ease;
+  /* Transizione per il bordo inferiore */
+}
+:host .SearchBar.iconOnly.linear.expanded .InputWrapper input {
+  width: 100%;
+  /* Espande l'input a tutta la larghezza disponibile */
+  transform: translateX(0);
+  /* Riposiziona l'input nella vista */
+  animation: slide-right 0.3s ease forwards;
+  /* Applicazione dell'animazione slide-right */
 }
-/* Stile filled */
-:host(.auto.filled) input.search-input {
-  border: none;
-  border-radius: 3px;
-  padding: 12px;
-  padding-left: 35px;
-  background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.625%204.875C8.625%203.53906%207.89844%202.32031%206.75%201.64062C5.57812%200.960938%204.14844%200.960938%203%201.64062C1.82812%202.32031%201.125%203.53906%201.125%204.875C1.125%206.23438%201.82812%207.45312%203%208.13281C4.14844%208.8125%205.57812%208.8125%206.75%208.13281C7.89844%207.45312%208.625%206.23438%208.625%204.875ZM7.89844%208.71875C7.05469%209.375%206%209.75%204.875%209.75C2.17969%209.75%200%207.57031%200%204.875C0%202.20312%202.17969%200%204.875%200C7.54688%200%209.75%202.20312%209.75%204.875C9.75%206.02344%209.35156%207.07812%208.69531%207.92188L11.8359%2011.0391C12.0469%2011.2734%2012.0469%2011.625%2011.8359%2011.8359C11.6016%2012.0703%2011.25%2012.0703%2011.0391%2011.8359L7.89844%208.71875Z%22%20fill%3D%22%23707070%22%2F%3E%3C%2Fsvg%3E") no-repeat left;
-  background-size: 14px;
-  background-position: 10px center;
-  background-color: var(--jump-search-bar-bg-color);
+@keyframes slide-right {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes border-slide-right {
+  from {
+    border-bottom-width: 0;
+  }
+  to {
+    border-bottom-width: 1px;
+  }
 }