feat(toast): toast vertical align prop

added a prop to toast which allowes to vertically align the component on the screen

fix #6301

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"],
+  includeStories: ["Default", "Visual", "TopAndBottom"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -234,6 +234,35 @@ Visual.parameters = {
   themeProvider: { chromatic: { theme: "sage" } },
 };
 
+export const TopAndBottom = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const handleOpen = () => {
+    setIsOpen(!isOpen);
+    action("open")(!isOpen);
+  };
+  return (
+    <>
+      <Button id="button" key="button" onClick={handleOpen}>
+        Open Toasts
+      </Button>
+      <Toast id="toast-a" variant="success" open={isOpen} isCenter alignY="top">
+        My Toast A
+      </Toast>
+      <Toast
+        id="toast-b"
+        variant="warning"
+        open={isOpen}
+        isCenter
+        alignY="bottom"
+      >
+        My Toast B
+      </Toast>
+    </>
+  );
+};
+
+TopAndBottom.storyName = "top and bottom";
+
 export const ToastComponent = ({
   children = "Toast",
   ...props

src/components/toast/toast.component.tsx

@@ -26,6 +26,7 @@ type ToastVariants =
   | "notification";
 
 type AlignOptions = "left" | "center" | "right";
+type AlignYOptions = "top" | "center" | "bottom";
 
 interface IconTypes {
   notification: "alert";
@@ -38,8 +39,10 @@ interface IconTypes {
 }
 
 export interface ToastProps {
-  /** Sets the alignment of the component. */
+  /** Sets the horizontal alignment of the component. */
   align?: AlignOptions;
+  /** Sets the vertical alignment of the component */
+  alignY?: AlignYOptions;
   /** The rendered children of the component. */
   children: React.ReactNode;
   /** Customizes the appearance in the DLS theme */
@@ -77,6 +80,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
   (
     {
       align,
+      alignY,
       children,
       className,
       id,
@@ -208,6 +212,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
         >
           <ToastStyle
             align={align}
+            alignY={alignY}
             isNotice={isNotice}
             isNotification={isNotification}
             className={className}
@@ -240,6 +245,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
       <StyledPortal
         id={targetPortalId}
         align={align}
+        alignY={alignY}
         isCenter={isCenter}
         isNotice={isNotice}
       >

src/components/toast/toast.spec.tsx

@@ -571,7 +571,7 @@ describe("TestContentStyle", () => {
   });
 });
 
-describe("Align", () => {
+describe("Align horizontal", () => {
   let wrapper: ReactWrapper;
 
   afterEach(() => {
@@ -593,6 +593,53 @@ describe("Align", () => {
   );
 });
 
+describe("Align vertical", () => {
+  let wrapper: ReactWrapper;
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it.each(["top", "center", "bottom"] as const)(
+    "should then pass the prop to Styled Portal",
+    (alignYValue) => {
+      wrapper = mount(
+        <Toast alignY={alignYValue} open>
+          FooBar
+        </Toast>
+      );
+      expect(wrapper.find(StyledPortal).props().alignY).toBe(alignYValue);
+    }
+  );
+
+  it("when isNotice is set and alignY is set to top, should render with the correct style", () => {
+    wrapper = mount(
+      <Toast variant="notice" alignY="top" open>
+        Foo
+      </Toast>
+    );
+    assertStyleMatch({ marginTop: "0" }, wrapper.find(ToastStyle));
+  });
+});
+
+describe("Align vertical and horizontal", () => {
+  let wrapper: ReactWrapper;
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it("should pass align set to left and alignY set to center to StyledPortal", () => {
+    wrapper = mount(
+      <Toast align="left" alignY="center" open>
+        FooBar
+      </Toast>
+    );
+    expect(wrapper.find(StyledPortal).props().align).toBe("left");
+    expect(wrapper.find(StyledPortal).props().alignY).toBe("center");
+  });
+});
+
 describe("Notification variant", () => {
   let wrapper: ReactWrapper;
 

src/components/toast/toast.stories.mdx

@@ -76,22 +76,40 @@ Toast variant is `success` by default
   <Story name="default" story={stories.Default} />
 </Canvas>
 
-### Align - Left
+### Horizontal Align - Left
 
 <Canvas>
-  <Story name="align left aligned" story={stories.AlignedLeft} />
+  <Story name="horizontal left aligned" story={stories.AlignedLeft} />
 </Canvas>
 
-### Align - Center
+### Horizontal Align - Center
 
 <Canvas>
-  <Story name="align center aligned" story={stories.AlignedCenter} />
+  <Story name="horizontal center aligned" story={stories.AlignedCenter} />
 </Canvas>
 
-### Align - Right
+### Horizontal Align - Right
 
 <Canvas>
-  <Story name="align right aligned" story={stories.AlignedRight} />
+  <Story name="horizontal right aligned" story={stories.AlignedRight} />
+</Canvas>
+
+### Vertical Align - Top
+
+<Canvas>
+  <Story name="vertical top aligned" story={stories.AlignedYTop} />
+</Canvas>
+
+### Vertical Align - Center
+
+<Canvas>
+  <Story name="vertical center aligned" story={stories.AlignedYCenter} />
+</Canvas>
+
+### Vertical Align - Bottom
+
+<Canvas>
+  <Story name="vertical bottom aligned" story={stories.AlignedYBottom} />
 </Canvas>
 
 ### Info
@@ -121,7 +139,8 @@ Toast variant is `success` by default
 ### Notice
 
 When the "notice" variant is set, the Toast component is rendered at the bottom of the screen with alternative styling and animation.
-The "isCenter" and "maxWidth" props will be ignored in this variant.
+The "isCenter" and "maxWidth" props will be ignored in this variant. 
+To render it at the top of the screen use the "alignY" prop set to "top".
 
 <Canvas>
   <Story name="notice" story={stories.Notice} />

src/components/toast/toast.stories.tsx

@@ -354,6 +354,111 @@ export const AlignedRight = () => {
   );
 };
 
+export const AlignedYTop = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onDismissClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleToggle = () => {
+    if (!isOpen) {
+      window.scrollTo(0, 0);
+    }
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div id="wrapper-top-alignedY">
+      <StyledButton
+        id="button-top-alignedY"
+        key="button"
+        onClick={handleToggle}
+        isOpen={isOpen}
+      >
+        Toggle - Preview is: {isOpen ? "ON" : "OFF"}
+      </StyledButton>
+      <Toast
+        alignY="top"
+        variant="warning"
+        id="toast-top-alignedY"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+    </div>
+  );
+};
+
+export const AlignedYCenter = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onDismissClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleToggle = () => {
+    if (!isOpen) {
+      window.scrollTo(0, 0);
+    }
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div id="wrapper-center-alignedY">
+      <StyledButton
+        id="button-center-alignedY"
+        key="button"
+        onClick={handleToggle}
+        isOpen={isOpen}
+      >
+        Toggle - Preview is: {isOpen ? "ON" : "OFF"}
+      </StyledButton>
+      <Toast
+        alignY="center"
+        variant="warning"
+        id="toast-center-alignedY"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+    </div>
+  );
+};
+
+export const AlignedYBottom = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onDismissClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleToggle = () => {
+    if (!isOpen) {
+      window.scrollTo(0, 0);
+    }
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div id="wrapper-bottom-alignedY">
+      <StyledButton
+        id="button-bottom-alignedY"
+        key="button"
+        onClick={handleToggle}
+        isOpen={isOpen}
+      >
+        Toggle - Preview is: {isOpen ? "ON" : "OFF"}
+      </StyledButton>
+      <Toast
+        alignY="bottom"
+        variant="warning"
+        id="toast-bottom-alignedY"
+        open={isOpen}
+        onDismiss={onDismissClick}
+      >
+        My text
+      </Toast>
+    </div>
+  );
+};
+
 export const CustomMaxWidth = () => {
   const [isOpen, setIsOpen] = useState(false);
   const onDismissClick = () => {