Merge pull request #313 from PrestaShopCorp/312-notification-bar-upda…

…te-style-and-docs fix: #312 - notification-bar - update style and docs
PrestaShopCorp · Feb 27, 2024 · 9e01603 · 9e01603
2 parents 4692c03 + b8d4ef9
commit 9e01603
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 24 deletions.
diff --git a/packages/components/notification-bar/src/notification-bar.vue b/packages/components/notification-bar/src/notification-bar.vue
@@ -37,6 +37,7 @@
             </p>
             <puik-button
               v-if="message.link"
+              size="sm"
               class="notification-bar-item__link"
               variant="primary"
               right-icon="arrow_forward"
@@ -46,18 +47,25 @@
             </puik-button>
           </div>
         </div>
-        <puik-button
-          v-if="closable"
-          class="notification-bar__close-button"
-          variant="text"
-          @click="close"
+        <div
+          :class="[
+            'notification-bar-close__container',
+            `notification-bar-close__container--${variant}`,
+          ]"
         >
-          <puik-icon
-            class="notification-bar-close-button__icon"
-            icon="close"
-            font-size="1.5rem"
-          />
-        </puik-button>
+          <puik-button
+            v-if="closable"
+            class="notification-bar__close-button"
+            variant="text"
+            @click="close"
+          >
+            <puik-icon
+              class="notification-bar-close-button__icon"
+              icon="close"
+              font-size="1.5rem"
+            />
+          </puik-button>
+        </div>
       </aside>
     </div>
   </teleport>

diff --git a/packages/components/notification-bar/stories/notification-bar.stories.ts b/packages/components/notification-bar/stories/notification-bar.stories.ts
@@ -13,7 +13,13 @@ export default {
       control: 'none',
       table: {
         type: {
-          summary: '{ to: string, prepend?: boolean }',
+          summary: 'NotificationBarTeleport',
+          detail: `
+interface NotificationBarTeleport {
+  to: string
+  prepend?: boolean
+}
+          `,
         },
         defaultValue: {
           summary: null,
@@ -50,8 +56,15 @@ export default {
       control: 'object',
       table: {
         type: {
-          summary:
-            '{ icon?: string, text: string, link?: { url: string, text: string }}',
+          summary: 'PuikMessagesType',
+          detail: `
+type PuikMessagesType = NotificationBarMessage[]
+interface NotificationBarMessage {
+  icon?: string
+  text: string
+  link?: NotificationLink
+}
+          `,
         },
         defaultValue: {
           summary: null,
@@ -96,12 +109,24 @@ export const Default = {
       source: {
         code: `
         <!--VueJS Snippet-->
+        const messages: PuikMessagesType = [
+          {
+            icon: "sentiment_satisfied",
+            text: "Promo thèmes: profitez de -20% sur tous les thèmes PrestaShop",
+            link: {
+              url: "#",
+              text: "J'en profite",
+            },
+          },
+        ]
+
         <puik-notification-bar
             :teleport="null"
             variant="blue"
             closable
-            :messages="{ icon: 'sentiment_satisfied', text: 'Promo thèmes: profitez de -20% sur tous les thèmes PrestaShop', link: { url: '#', text: 'J'en profite' }}"
+            :messages="messages"
         />
+
         <!--HTML/CSS Snippet-->
         <div class="puik-notification-bar">
             <aside class="puik-notification-bar__container puik-notification-bar__container--blue puik-notification-bar__container--closable">

diff --git a/packages/theme/src/notification-bar.scss b/packages/theme/src/notification-bar.scss
@@ -17,7 +17,7 @@ $component-name: notification-bar;
   }
 
   .#{$component-name}__item {
-    @apply flex sm:justify-center sm:items-center gap-2 px-4 sm:px-6;
+    @apply flex justify-center items-center gap-2 px-4 sm:px-6;
     grid-area: 1 / 1;
     transition: transform 0.8s cubic-bezier(0.4, 0.14, 1, 1);
 
@@ -34,7 +34,7 @@ $component-name: notification-bar;
     }
 
     .#{$component-name}-item__icon {
-      @apply text-2xl leading-6 self-start sm:self-center;
+      @apply text-2xl leading-7;
     }
 
     .#{$component-name}-item__content {
@@ -43,9 +43,8 @@ $component-name: notification-bar;
       .#{$component-name}-item__text {
         @apply font-medium text-xs leading-[1.125rem] sm:text-sm w-full sm:w-auto;
       }
-
       .#{$component-name}-item__link {
-        @apply sm:h-7 sm:py-1 sm:px-2 sm:text-xs;
+        @apply max-h-7 sm:py-1 sm:px-2 sm:text-xs;
       }
     }
   }
@@ -56,11 +55,23 @@ $component-name: notification-bar;
     }
   }
 
-  .#{$component-name}__close-button {
-    @apply absolute right-3 top-3.5 sm:top-2.5 p-1 flex justify-center items-center w-6 h-6 focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-blue;
-
-    .#{$component-name}-close-button__icon {
-      @apply w-6 h-6 leading-6;
+  .#{$component-name}-close__container {
+    @apply absolute top-0 bottom-0 right-0 py-4 sm:py-2 pr-4 sm:pr-6 pl-2 w-fit flex items-start;
+    &--blue {
+      @apply bg-ocean-blue;
+    }
+    &--purple {
+      @apply bg-purple;
+    }
+    &--yellow {
+      @apply bg-amber;
     }
+    &--green {
+      @apply bg-green-marketing;
+    }
+  }
+
+  .#{$component-name}__close-button {
+    @apply p-0 min-h-0 focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-2 focus-visible:ring-blue;
   }
 }