Merge pull request #8516 from shashkovdanil/neomodalhead-tailwindcss

NeoModalHead to tailwindcss
kodadot · Dec 14, 2023 · ae92eb0 · ae92eb0
2 parents 0120777 + 68bad26
commit ae92eb0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 50 deletions.
diff --git a/components/common/shoppingCart/ShoppingCartModal.vue b/components/common/shoppingCart/ShoppingCartModal.vue
@@ -5,7 +5,6 @@
       data-testid="shopping-cart-modal-container">
       <NeoModalHead
         :title="$t('shoppingCart.title')"
-        data-testid="shopping-cart-modal"
         @close="closeShoppingCart(ModalCloseType.BACK)" />
       <div
         v-if="numberOfItems"

diff --git a/libs/ui/src/components/NeoModalHead/NeoModalHead.scss b/libs/ui/src/components/NeoModalHead/NeoModalHead.scss
diff --git a/libs/ui/src/components/NeoModalHead/NeoModalHead.vue b/libs/ui/src/components/NeoModalHead/NeoModalHead.vue
@@ -1,16 +1,18 @@
 <template>
-  <header v-if="isMobile" class="modal-card-head">
-    <div class="modal-card-title">
-      <a class="has-text-inherit" @click.stop="emit('close')">
-        <NeoIcon icon="chevron-left" />
-      </a>
-      {{ title }}
-    </div>
+  <header
+    class="flex lg:hidden py-0 px-tw-5 min-h-[64px] items-center border-b border-border-color bg-background-color-inverse">
+    <button
+      type="button"
+      class="w-full h-full text-left cursor-pointer p-0 bg-transparent text-base/normal text-text-color-inverse"
+      data-testid="modal-close-button"
+      @click="emit('close')">
+      <NeoIcon icon="chevron-left" />
+      <span>{{ title }}</span>
+    </button>
   </header>
   <header
-    v-else
-    class="modal-card-head is-flex is-justify-content-space-between border-bottom">
-    <span class="modal-card-title is-size-6 has-text-weight-bold">
+    class="hidden lg:flex py-4 px-tw-8 justify-between items-center border-b border-border-color bg-background-color">
+    <span class="text-base font-bold">
       {{ title }}
     </span>
     <NeoButton
@@ -25,18 +27,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 
 defineProps<{
   title: string
 }>()
 
-const isMobile = ref(window.innerWidth < 1024)
-
 const emit = defineEmits(['close'])
 </script>
-
-<style lang="scss" scoped>
-@import './NeoModalHead.scss';
-</style>
diff --git a/libs/ui/tailwind.config.js b/libs/ui/tailwind.config.js
@@ -88,7 +88,10 @@ module.exports = {
         'icon-spin':
           'icon-spin infinite linear var(--oruga-icon-spin-duration, 1.5s)',
       },
+      // TODO: remove it after removing bulma
       padding: {
+        'tw-5': '1.25rem',
+        'tw-8': '2rem',
         'button-x': 'calc(0.75em - 1px)',
         'button-y': 'calc(0.5em - 1px)',
       },

diff --git a/tests/e2e/collection.spec.ts b/tests/e2e/collection.spec.ts
@@ -49,14 +49,19 @@ test('Collection interactions', async ({ page, Commands }) => {
     await page.locator('[class="infinite-scroll-item"]').nth(1).hover()
     await page.getByTestId('item-add-to-cart').nth(1).click()
     await page.getByTestId('navbar-button-cart').click()
-    await expect(page.getByTestId('shopping-cart-modal')).toBeVisible()
+    await expect(
+      page.getByTestId('shopping-cart-modal-container'),
+    ).toBeVisible()
     await expect(page.getByTestId('shopping-cart-item').nth(0)).toContainText(
       COLLECTION_NAME,
     )
     await expect(page.getByTestId('shopping-cart-item').nth(1)).toContainText(
       COLLECTION_NAME,
     )
-    await page.getByTestId('modal-close-button').click()
+    await page
+      .getByTestId('modal-close-button')
+      .and(page.locator(':visible'))
+      .click()
   })
 
   //art view