Repository: Sage/carbon (ts)

Issue:
Notice variant Toast breaks Pager buttons when it appears
### Description

Having a Table Pager at the bottom of the page and popping a Notice variant Toast blocks mouse clicks on the existing pager buttons.
Video attached to related JIRA ticket showing behaviour with detailed steps to replicate

### Reproduction

https://carbon.sage.com/?path=/story/toast--notice

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

SBS-95451

### Suggested solution

_No response_

### Carbon version

130.0.0

### Design tokens version

_No response_

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(toast): margin-top on notice variant prevents elements being clicked
fix #6730

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

Remove margin-top from "notice" `Toast`. 

![Screenshot 2024-05-16 at 11 24 00](https://github.com/Sage/carbon/assets/78361608/4886ccb4-abb2-4c05-9791-eea19e2ad08a)

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

The margin-top on a "notice" `Toast` prevents elements behind it from being clicked.

![Screenshot 2024-05-16 at 11 23 24](https://github.com/Sage/carbon/assets/78361608/4a9ba9a3-fdeb-465b-adaf-7ae8fcc79b99)

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->


Patch:
diff --git a/src/components/toast/toast.style.ts b/src/components/toast/toast.style.ts
index 7819439db..3f153ad46 100644
--- a/src/components/toast/toast.style.ts
+++ b/src/components/toast/toast.style.ts
@@ -121,7 +121,7 @@ const StyledToast = styled.div<ToastStyleProps>`
 
     box-shadow: ${boxShadow};
     line-height: 22px;
-    margin-top: ${(alignY === "top" && isNotice) || alignY === "center"
+    margin-top: ${isNotice || alignY === "center" || alignY === "bottom"
       ? "0"
       : "30px"};
     margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};


Test patch:
diff --git a/src/components/toast/toast-test.stories.tsx b/src/components/toast/toast-test.stories.tsx
index 50d7c0182..482f03399 100644
--- a/src/components/toast/toast-test.stories.tsx
+++ b/src/components/toast/toast-test.stories.tsx
@@ -79,7 +79,19 @@ Default.args = {
 };
 Default.argTypes = {
   variant: {
-    options: TOAST_COLORS,
+    options: [...TOAST_COLORS, "notice"],
+    control: {
+      type: "select",
+    },
+  },
+  align: {
+    options: ["left", "center", "right"],
+    control: {
+      type: "select",
+    },
+  },
+  alignY: {
+    options: ["top", "center", "bottom"],
     control: {
       type: "select",
     },
diff --git a/src/components/toast/toast.test.tsx b/src/components/toast/toast.test.tsx
index fcd2f6966..9794f6be2 100644
--- a/src/components/toast/toast.test.tsx
+++ b/src/components/toast/toast.test.tsx
@@ -227,7 +227,7 @@ describe("Toast component", () => {
     expect(screen.getByTestId("toast")).toHaveAttribute("id", "exampleId");
   });
 
-  it("shoud render any child content passed via the `children` prop", () => {
+  it("should render any child content passed via the `children` prop", () => {
     render(
       <Toast open data-role="toast">
         <span>foobar</span>
@@ -441,7 +441,7 @@ describe("Toast component", () => {
     const toast = screen.getByTestId("toast");
 
     expect(toast).toHaveStyle({
-      "margin-top": "0",
+      margin: "0px 0px 0px auto",
     });
   });
 
@@ -461,27 +461,7 @@ describe("Toast component", () => {
     const toast = screen.getByTestId("toast");
 
     expect(toast).toHaveStyle({
-      "margin-bottom": "0",
-    });
-  });
-
-  it("should render with correct styling when `variant` prop is not set to 'notice' and `alignY` prop is set to 'bottom'", () => {
-    render(
-      <Toast
-        open
-        variant="neutral"
-        alignY="bottom"
-        data-role="toast"
-        onDismiss={() => {}}
-      >
-        foobar
-      </Toast>
-    );
-
-    const toast = screen.getByTestId("toast");
-
-    expect(toast).toHaveStyle({
-      "margin-bottom": "30px",
+      margin: "0px 0px 0px auto",
     });
   });
 
@@ -566,7 +546,7 @@ describe("Toast component", () => {
     expect(ref.current).toBe(screen.getByTestId("toast-wrapper"));
   });
 
-  it("should have the expected styling when `align` prop is 'right'", () => {
+  it("should render with expected styling when `align` prop is 'right'", () => {
     render(
       <Toast open align="right" data-role="toast">
         foobar
@@ -582,7 +562,7 @@ describe("Toast component", () => {
     });
   });
 
-  it("should have the expected styling when `align` prop is 'center'", () => {
+  it("should render with expected styling when `align` prop is 'center'", () => {
     render(
       <Toast open align="center" data-role="toast">
         foobar
@@ -598,7 +578,7 @@ describe("Toast component", () => {
     });
   });
 
-  it("should have the expected styling when `align` prop is 'left'", () => {
+  it("should render with expected styling when `align` prop is 'left'", () => {
     render(
       <Toast open align="left" data-role="toast">
         foobar
@@ -614,7 +594,37 @@ describe("Toast component", () => {
     });
   });
 
-  it("should have the expected styling when `alignY` prop is 'center' and `align` prop is 'left'", () => {
+  it("should render with expected styling when `alignY` prop is set to 'top'", () => {
+    render(
+      <Toast alignY="top" data-role="toast">
+        foobar
+      </Toast>
+    );
+
+    const toast = screen.getByTestId("toast");
+
+    expect(toast).toHaveStyle({
+      "margin-top": "30px",
+      "margin-bottom": "0",
+    });
+  });
+
+  it("should render with expected styling when `alignY` prop is set to 'bottom'", () => {
+    render(
+      <Toast alignY="bottom" data-role="toast">
+        foobar
+      </Toast>
+    );
+
+    const toast = screen.getByTestId("toast");
+
+    expect(toast).toHaveStyle({
+      "margin-top": "0",
+      "margin-bottom": "30px",
+    });
+  });
+
+  it("should render with expected styling when `alignY` prop is 'center' and `align` prop is 'left'", () => {
     render(
       <Toast alignY="center" align="left" data-role="toast">
         foobar
@@ -627,7 +637,7 @@ describe("Toast component", () => {
     });
   });
 
-  it("should have the expected styling when `alignY` prop is 'center' and `align` prop is not 'left'", () => {
+  it("should render with expected styling when `alignY` prop is 'center' and `align` prop is not 'left'", () => {
     render(
       <Toast alignY="center" data-role="toast">
         foobar