chore: addressing pr comments

Sage · Oct 31, 2023 · befad0f · befad0f
1 parent fb57583
commit befad0f
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 9 deletions.
diff --git a/cypress/components/toast/toast.cy.tsx b/cypress/components/toast/toast.cy.tsx
@@ -1,6 +1,9 @@
 import React from "react";
 import { ToastProps } from "components/toast";
-import { ToastComponent } from "../../../src/components/toast/toast-test.stories";
+import {
+  ToastComponent,
+  AllAlign,
+} from "../../../src/components/toast/toast-test.stories";
 import { TOAST_COLORS } from "../../../src/components/toast/toast.config";
 import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
 import toastComponent from "../../locators/toast";
@@ -204,6 +207,19 @@ context("Testing Toast component", () => {
           .should("have.css", "justify-content", align);
       }
     );
+    it.each(["top", "bottom"] as ToastProps["alignY"][])(
+      "should render Toast component alignY prop set to %s",
+      (alignY) => {
+        CypressMountWithProviders(<ToastComponent alignY={alignY} />);
+
+        toastComponent()
+          .parent()
+          .parent()
+          .parent()
+          .parent()
+          .should("have.css", alignY, "0px");
+      }
+    );
   });
 
   describe("check events for Toast component", () => {
@@ -248,6 +264,11 @@ context("Testing Toast component", () => {
 
       cy.checkAccessibility();
     });
+
+    it("should render Toast components with all align combinations and check accessibility", () => {
+      CypressMountWithProviders(<AllAlign />);
+      cy.checkAccessibility();
+    });
   });
 
   it("render with the expected border radius", () => {

diff --git a/src/components/toast/toast-test.stories.tsx b/src/components/toast/toast-test.stories.tsx
@@ -7,7 +7,7 @@ import { TOAST_COLORS } from "./toast.config";
 
 export default {
   title: "Toast/Test",
-  includeStories: ["Default", "Visual", "TopAndBottom"],
+  includeStories: ["Default", "Visual", "AllAlign", "TopAndBottom"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -234,6 +234,135 @@ Visual.parameters = {
   themeProvider: { chromatic: { theme: "sage" } },
 };
 
+export const AllAlign = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const onDismissClick = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <div>
+      <Toast
+        align="left"
+        alignY="top"
+        isCenter={false}
+        variant="warning"
+        id="left-top"
+        targetPortalId="left-top"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="center"
+        alignY="top"
+        isCenter={false}
+        variant="warning"
+        id="center-top"
+        targetPortalId="center-top"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="right"
+        alignY="top"
+        isCenter={false}
+        variant="warning"
+        id="right-top"
+        targetPortalId="right-top"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="left"
+        alignY="center"
+        isCenter={false}
+        variant="warning"
+        id="left-center"
+        targetPortalId="left-center"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="center"
+        alignY="center"
+        isCenter={false}
+        variant="warning"
+        id="center-center"
+        targetPortalId="center-center"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="right"
+        alignY="center"
+        isCenter={false}
+        variant="warning"
+        id="right-center"
+        targetPortalId="right-center"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="left"
+        alignY="bottom"
+        isCenter={false}
+        variant="warning"
+        id="left-bottom"
+        targetPortalId="left-bottom"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="center"
+        alignY="bottom"
+        isCenter={false}
+        variant="warning"
+        id="center-bottom"
+        targetPortalId="center-bottom"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+
+      <Toast
+        align="right"
+        alignY="bottom"
+        isCenter={false}
+        variant="warning"
+        id="right-bottom"
+        targetPortalId="right-bottom"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+    </div>
+  );
+};
+
+AllAlign.storyName = "all align";
+
 export const TopAndBottom = () => {
   const [isOpen, setIsOpen] = useState(true);
   const handleOpen = () => {

diff --git a/src/components/toast/toast.style.ts b/src/components/toast/toast.style.ts
@@ -28,7 +28,6 @@ const StyledPortal = styled(Portal)<{
 
     ${align === "left" &&
     css`
-      display: flex;
       left: 0;
       transform: translateX(50%);
     `}
@@ -41,7 +40,6 @@ const StyledPortal = styled(Portal)<{
 
     ${align === "right" &&
     css`
-      display: flex;
       right: 0;
       transform: translateX(-50%);
     `}
@@ -129,7 +127,7 @@ const ToastStyle = styled(MessageStyle)<{
     opacity: 0;
 
     ${({ alignY }) =>
-      alignY === "bottom" ? "margin-bottom: -40px;" : "margin-top: -40px;"};
+      alignY === "bottom" ? "margin-bottom: -40px" : "margin-top: -40px"};
     transition: all 150ms ease-out;
   }
 
@@ -158,24 +156,24 @@ const ToastStyle = styled(MessageStyle)<{
       }
 
       &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
-        ${alignY === "top" ? "top: -40px;" : "bottom: -40px;"};
+        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
         opacity: 0;
       }
 
       &${alternativeAnimationName}-exit {
-        ${alignY === "top" ? "top: 0;" : "bottom: 0;"};
+        ${alignY === "top" ? "top: 0" : "bottom: 0"};
         opacity: 1;
       }
 
       &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
         &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
-        ${alignY === "top" ? "top: 0;" : "bottom: 0;"};
+        ${alignY === "top" ? "top: 0" : "bottom: 0"};
         opacity: 1;
         transition: all 400ms ease;
       }
 
       &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
-        ${alignY === "top" ? "top: -40px;" : "bottom: -40px;"};
+        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
         opacity: 0;
         transition: all 200ms ease;
       }