feat: deprecate old DS (#277)

EMP-134 Co-authored-by: Abraham Javier Pérez Bautista <[email protected]>
empathyco · Apr 25, 2023 · 34d7eec · 34d7eec
1 parent dbae554
commit 34d7eec
Show file tree

Hide file tree

Showing 32 changed files with 143 additions and 334 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "eslint src tests --ext .ts,.tsx,.vue",
     "lint:fix": "npm run lint -- --fix",
-    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.349.tgz --no-save",
+    "install:local": "npm install file:../x/packages/x-components/empathyco-x-components-3.0.0-alpha.360.tgz --no-save",
     "install:utils:local": "npm install file:../x/packages/x-archetype-utils/empathyco-x-archetype-utils-0.1.0-alpha.2.tgz --no-save",
     "install:xds:local": "npm install file:../x/packages/x-tailwindcss/empathyco-x-tailwindcss-1.0.0-alpha.25.tgz --no-save",
     "json:csv": "json-csv ./src/i18n/messages",
@@ -30,11 +30,10 @@
     "@empathyco/x-adapter": "^8.0.0-alpha.22",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.59",
     "@empathyco/x-archetype-utils": "^0.1.0-alpha.15",
-    "@empathyco/x-components": "^3.0.0-alpha.353 ",
+    "@empathyco/x-components": "^3.0.0-alpha.360",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.29",
     "@empathyco/x-types": "^10.0.0-alpha.56",
     "@empathyco/x-utils": "^1.0.0-alpha.14",
-    "@vueuse/core": "^9.13.0",
     "tslib": "~2.4.1",
     "vue": "~2.7.14",
     "vue-class-component": "~7.2.6",
@@ -46,7 +45,7 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "~5.11.1",
     "@empathyco/eslint-plugin-x": "^2.0.0-alpha.27",
-    "@empathyco/x-tailwindcss": "^1.0.0-alpha.26",
+    "@empathyco/x-tailwindcss": "^1.0.0-alpha.28",
     "@empathyco/x-translations": "^1.1.0-alpha.33",
     "@rollup/plugin-commonjs": "~21.0.1",
     "@rollup/plugin-json": "~4.1.0",

diff --git a/src/App.vue b/src/App.vue
@@ -22,8 +22,6 @@
   import { Component, Inject, Vue, Watch } from 'vue-property-decorator';
   import { useDevice } from './composables/use-device.composable';
   import currencies from './i18n/currencies';
-  import '@empathyco/x-components/design-system/full-theme.css';
-  import './design-system/tokens.scss';
   import './tailwind/index.css';
 
   @Component({
@@ -109,9 +107,4 @@
       width: 100%;
     }
   }
-
-  .x-modal__overlay {
-    background: var(--x-color-background-modal-overlay-default) !important;
-    opacity: 0.3 !important;
-  }
 </style>
diff --git a/src/components/column-picker.vue b/src/components/column-picker.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="x-list x-list--horizontal x-list--align-center x-list--gap-03">
-    <span class="x-uppercase x-title4">{{ $t('columnPicker.message') }}</span>
+  <div class="x-flex x-items-center x-gap-8">
+    <span class="x-title4 x-uppercase">{{ $t('columnPicker.message') }}</span>
     <BaseColumnPickerList
       :columns="values"
       buttonClass="x-button-sm x-button-square x-button-tight x-text-neutral-25

diff --git a/src/components/custom-header-toggle-panel.vue b/src/components/custom-header-toggle-panel.vue
@@ -1,9 +1,13 @@
 <template>
-  <BaseHeaderTogglePanel class="x-facet x-list" :startCollapsed="true" :animation="animation">
+  <BaseHeaderTogglePanel
+    headerClass="x-flex x-w-full x-gap-8 x-py-24"
+    :startCollapsed="true"
+    :animation="animation"
+  >
     <template #header-content="{ open }">
       <slot name="header" />
-      <ChevronUpIcon v-if="open" class="x-icon-lg" />
-      <ChevronDownIcon v-else class="x-icon-lg" />
+      <ChevronUpIcon v-if="open" class="x-icon-lg x-ml-auto" />
+      <ChevronDownIcon v-else class="x-icon-lg x-ml-auto" />
     </template>
     <slot />
   </BaseHeaderTogglePanel>

diff --git a/src/components/desktop/desktop-toolbar.vue b/src/components/desktop/desktop-toolbar.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="$x.totalResults"
-    class="x-list x-list--horizontal x-list--gap-06 x-list--justify-end x-list--align-center"
+    class="x-flex x-items-center x-justify-end x-gap-24"
     data-test="total-results"
   >
-    <i18n class="x-list__item--expand x-text1 x-text1-lg" path="totalResults.message" tag="span">
+    <i18n class="x-text1 x-text1-lg x-flex-auto" path="totalResults.message" tag="span">
       <template #totalResults>
         {{ $x.totalResults }}
       </template>

diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
@@ -12,7 +12,7 @@
           <div class="x-relative">
             <SearchBox />
             <LocationProvider location="predictive_layer">
-              <PredictiveLayer class="x-absolute x-shadow--04" />
+              <PredictiveLayer class="x-absolute x-shadow-lg" />
             </LocationProvider>
           </div>
           <LocationProvider location="predictive_layer">

diff --git a/src/components/main.vue b/src/components/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="hasSearched" class="x-list x-list--vertical">
+  <div v-if="hasSearched" class="x-flex x-flex-col">
     <Redirection />
 
     <template v-if="!$x.redirections.length">

diff --git a/src/components/mobile/mobile-close-aside.vue b/src/components/mobile/mobile-close-aside.vue
@@ -1,16 +1,14 @@
 <template>
-  <div
-    class="x-list x-list--horizontal x-list--gap-05 x-border-width--top-01 x-border-color--neutral-95 x-padding--top-06 x-padding--bottom-06 x-margin--right-05 x-margin--left-05"
-  >
+  <div class="x-mx-16 x-flex x-gap-16 x-border-t x-border-neutral-10 x-py-24">
     <ClearFilters
       v-slot="{ selectedFilters }"
-      class="x-border-radius--20 x-padding--top-04 x-padding--bottom-04 x-uppercase x-list__item--expand x-button-lead x-button-outlined"
+      class="x-button-lead x-button-outlined x-flex-auto x-rounded-full x-py-12 x-uppercase"
       :alwaysVisible="false"
     >
       {{ $t('selectedFilters.clear', { selectedFiltersNumber: selectedFilters.length }) }}
     </ClearFilters>
     <BaseIdModalClose
-      class="x-border-radius--20 x-padding--top-04 x-padding--bottom-04 x-list__item--expand x-button-lead"
+      class="x-button-lead x-flex-auto x-rounded-full x-py-12"
       modalId="aside-modal"
     >
       {{ $t('facetsPanel.viewResults', { totalResults: $x.totalResults }) }}

diff --git a/src/components/mobile/mobile-open-aside.vue b/src/components/mobile/mobile-open-aside.vue
@@ -2,7 +2,7 @@
   <BaseIdModalOpen
     data-test="toggle-facets-button"
     modalId="aside-modal"
-    class="x-border-radius--20 x-padding--04 x-padding--right-05 x-padding--left-05 x-button-lead"
+    class="x-button-lead x-rounded-full x-p-12 x-px-16"
   >
     <FiltersIcon class="x-icon-lg" />
     <span>{{ $t('toggleAside.showAside') }}</span>

diff --git a/src/components/mobile/mobile-toolbar.vue b/src/components/mobile/mobile-toolbar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="x-list x-list--horizontal x-list--align-center x-list__item--expand">
-    <i18n class="x-list__item--expand x-text1" path="totalResults.message" tag="span">
+  <div class="x-flex x-flex-auto x-items-center">
+    <i18n class="x-text1 x-flex-auto" path="totalResults.message" tag="span">
       <template #totalResults>
         {{ $x.totalResults }}
       </template>

diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
@@ -5,6 +5,7 @@
         v-if="$x.isHistoryQueriesEnabled && $x.fullHistoryQueries.length"
         :animation="animation"
         class="x-px-16 x-pb-32 desktop:x-pl-32"
+        queriesListClass="x-gap-16"
       >
         <template #date="{ date }">
           <div class="x-title4 x-title4-sm x-py-16 x-text-neutral-75">{{ date }}</div>
@@ -17,21 +18,17 @@
             :suggestion="suggestion"
             suggestionClass="x-suggestion"
           >
-            <div class="x-flex x-flex-nowrap x-gap-16 x-py-4">
-              <HistoryIcon class="max-desktop:x-icon-lg" />
+            <HistoryIcon class="max-desktop:x-icon-lg" />
 
-              <div class="x-flex x-flex-col x-gap-2">
-                <p>{{ suggestion.query }}</p>
-                <p class="x-text1 x-text1-sm x-text-neutral-75">
-                  {{ formatTime(suggestion.timestamp) }}
-                  <template v-if="suggestion.totalResults !== undefined">
-                    -
-                    {{
-                      $t('myHistory.suggestionResults', { totalResults: suggestion.totalResults })
-                    }}
-                  </template>
-                </p>
-              </div>
+            <div class="x-flex x-flex-col x-gap-2">
+              <p>{{ suggestion.query }}</p>
+              <p class="x-text1 x-text1-sm x-text-neutral-75">
+                {{ formatTime(suggestion.timestamp) }}
+                <template v-if="suggestion.totalResults !== undefined">
+                  -
+                  {{ $t('myHistory.suggestionResults', { totalResults: suggestion.totalResults }) }}
+                </template>
+              </p>
             </div>
 
             <template #remove-button-content>

diff --git a/src/components/my-history/my-history-confirm-disable-modal.vue b/src/components/my-history/my-history-confirm-disable-modal.vue
@@ -6,10 +6,8 @@
     :eventsToCloseModal="eventsToCloseModal"
   >
     <div
-      class="x-my-history-confirm-disable-modal-content x-background--neutral-100 x-list x-list--gap-05 x-max-w-[322px]"
-      :class="
-        isTabletOrLess ? 'x-padding--06 x-padding--bottom-03 x-border-radius--03' : 'x-padding--10'
-      "
+      class="x-my-history-confirm-disable-modal-content x-flex x-max-w-[322px] x-flex-col x-gap-16 x-bg-neutral-0"
+      :class="isTabletOrLess ? 'x-rounded-lg x-p-24 x-pb-8' : 'x-p-56'"
     >
       <h1 class="x-title3">{{ $t('myHistory.confirmDisableModal.title') }}</h1>
       <span class="x-text1 x-text1-lg x-text-neutral-75">

diff --git a/src/components/predictive-layer/sliding-recommendations.vue b/src/components/predictive-layer/sliding-recommendations.vue
@@ -1,14 +1,14 @@
 <template>
-  <div v-if="$x.recommendations.length > 0" class="x-list x-list--gap-04">
+  <div v-if="$x.recommendations.length > 0" class="x-flex x-flex-col x-gap-12">
     <h1
-      class="x-uppercase x-title4 x-title4-sm x-flex x-h-32 x-items-center x-pt-16 x-pl-24 desktop:x-pl-0 desktop:x-pt-0"
+      class="x-title4 x-title4-sm x-flex x-h-32 x-items-center x-pt-16 x-pl-24 x-uppercase desktop:x-pl-0 desktop:x-pt-0"
     >
       {{ $t('recommendations.title') }}
     </h1>
     <SlidingPanel
       class="x-sliding-panel-show-buttons-on-hover"
       :showButtons="true"
-      buttonClass="x-button-lead x-button-circle x-button-ghost x-padding--00"
+      buttonClass="x-button-lead x-button-circle x-button-ghost x-p-0"
       scrollContainerClass="desktop:x-sliding-panel-fade"
       :resetOnContentChange="false"
     >

diff --git a/src/components/results/custom-recommendations.vue b/src/components/results/custom-recommendations.vue
@@ -13,6 +13,7 @@
           :animation="staggeredFadeAndSlide"
           :columns="columns"
           :items="recommendations"
+          class="x-gap-y-32 x-gap-x-16"
         >
           <Result :result="result" data-test="recommendation-item" />
         </BaseGrid>

diff --git a/src/components/results/result.vue b/src/components/results/result.vue
@@ -1,26 +1,25 @@
 <template>
-  <MainScrollItem :item="result" tag="article" class="x-result">
-    <BaseResultLink class="x-result__picture" :result="result">
-      <BaseResultImage :result="result" :loadAnimation="imageAnimation" class="x-picture-zoom">
-        <template #placeholder>
-          <BasePlaceholderImage />
-        </template>
-        <template #fallback>
-          <BaseFallbackImage />
-        </template>
-      </BaseResultImage>
-    </BaseResultLink>
+  <MainScrollItem :item="result" tag="article" class="x-result x-group/result x-gap-4">
+    <div class="x-relative">
+      <BaseResultLink class="x-result__picture" :result="result">
+        <BaseResultImage :result="result" :loadAnimation="imageAnimation" class="x-picture-zoom">
+          <template #placeholder>
+            <BasePlaceholderImage />
+          </template>
+          <template #fallback>
+            <BaseFallbackImage />
+          </template>
+        </BaseResultImage>
+      </BaseResultLink>
 
-    <div
-      v-if="isDesktopOrGreater && showAddToCart"
-      class="x-result__overlay x-list x-list--horizontal"
-    >
-      <BaseAddToCart
-        :result="result"
-        class="x-list__item--expand x-border-radius--20 x-margin--05 x-button-lead"
+      <div
+        v-if="isDesktopOrGreater && showAddToCart"
+        class="x-result__overlay x-invisible x-absolute x-bottom-0 x-flex x-w-full group-hover/result:x-visible"
       >
-        {{ $t('result.addToCart') }}
-      </BaseAddToCart>
+        <BaseAddToCart :result="result" class="x-button-lead x-m-16 x-flex-auto x-rounded-full">
+          {{ $t('result.addToCart') }}
+        </BaseAddToCart>
+      </div>
     </div>
 
     <BaseResultLink
@@ -31,7 +30,7 @@
         {{ result.name }}
       </h2>
       <span v-if="showDescription" class="x-text2">{{ result.season }}</span>
-      <div class="x-list x-list--horizontal x-list--wrap x-list--gap-03">
+      <div class="x-flex x-flex-wrap x-gap-8">
         <BaseResultCurrentPrice :result="result" class="x-text2 x-text2-lg x-font-bold" />
         <BaseResultPreviousPrice
           :result="result"