feat(pie-toast): DSW-2108 update branch and solve conflicts

justeattakeaway · Jul 19, 2024 · f706159 · f706159
2 parents f6c8761 + e33bdf1
commit f706159
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 43 deletions.
diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts
@@ -1,11 +1,6 @@
 import { html } from 'lit';
-
-/* eslint-disable import/no-duplicates */
-import '@justeattakeaway/pie-toast';
 import { ToastProps, defaultProps, variants } from '@justeattakeaway/pie-toast';
 import { action } from '@storybook/addon-actions';
-/* eslint-enable import/no-duplicates */
-
 import { type StoryMeta } from '../types';
 import { createStory } from '../utilities';
 

diff --git a/packages/components/pie-toast/src/index.ts b/packages/components/pie-toast/src/index.ts
@@ -14,7 +14,6 @@ import {
     dispatchCustomEvent,
     validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
-import '@justeattakeaway/pie-toast';
 import '@justeattakeaway/pie-icon-button';
 import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';

diff --git a/packages/components/pie-toast/src/toast.scss b/packages/components/pie-toast/src/toast.scss
@@ -44,53 +44,53 @@
   &.variant-error {
     --toast-icon-fill: var(--dt-color-support-error);
   }
+}
+
+.c-toast-contentArea {
+  display: flex;
+  gap: var(--dt-spacing-b);
+  justify-content: space-between;
+}
 
-  & .c-toast-contentArea{
-    display: flex;
-    gap: var(--dt-spacing-b);
-    justify-content: space-between;
+.c-toast-messageArea {
+  display: flex;
+  align-items: center;
+  gap: var(--dt-spacing-b);
+  padding: calc(var(--dt-spacing-03) / 2) 0;
+
+  span {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
-  & .c-toast-messageArea {
-    display: flex;
-    align-items: center;
-    gap: var(--dt-spacing-b);
-    padding: calc(var(--dt-spacing-03) / 2) 0;
+  &.is-multiline {
+    align-items: flex-start;
 
     span {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    & .is-multiline {
-      align-items: flex-start;
-
-      span {
-        max-height: 60px;
-        white-space: inherit;
-
-        // text-overflow: ellipsis; for multiline lines only works using webkit prefix
-        /* stylelint-disable */
-        display: -webkit-box;
-        /* stylelint-enable */
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-      }
+      max-height: 60px;
+      white-space: inherit;
+
+      // text-overflow: ellipsis; for multiline lines only works using webkit prefix
+      /* stylelint-disable */
+      display: -webkit-box;
+      /* stylelint-enable */
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
     }
   }
+}
 
-  & .c-toast-actionsArea {
-    display: flex;
-    gap: var(--dt-spacing-b);
-  }
+.c-toast-actionsArea {
+  display: flex;
+  gap: var(--dt-spacing-b);
+}
 
-  & .c-toast-footer {
-    display: flex;
-    justify-content: flex-end;
-  }
+.c-toast-footer {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .icon {
   color: var(--toast-icon-fill);
-}
+}