QA updates (#4398)

jpmorganchase · Nov 13, 2024 · 2301012 · 2301012
1 parent 6a08b82
commit 2301012
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 6 deletions.
diff --git a/packages/core/stories/dialog/dialog.qa.stories.tsx b/packages/core/stories/dialog/dialog.qa.stories.tsx
@@ -13,7 +13,12 @@ import {
   VALIDATION_NAMED_STATUS,
 } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
-import { QAContainer, type QAContainerProps } from "docs/components";
+import {
+  QAContainer,
+  QAContainerNoStyleInjection,
+  type QAContainerNoStyleInjectionProps,
+  type QAContainerProps,
+} from "docs/components";
 import "./dialog.stories.css";
 import { Fragment } from "react";
 
@@ -64,7 +69,7 @@ const DialogTemplate: StoryFn<
   );
 };
 
-export const StatusVariants: StoryFn<QAContainerProps> = () => {
+export const StatusVariants: StoryFn = () => {
   const DensityValues = ["high", "medium", "low", "touch"] as const;
   return (
     <StackLayout gap={1}>
@@ -111,7 +116,7 @@ StatusVariants.parameters = {
   },
 };
 
-export const ContentVariants: StoryFn<QAContainerProps> = () => {
+export const ContentVariants: StoryFn = () => {
   const DensityValues = ["high", "medium", "low", "touch"] as const;
   const longContent = (
     <StackLayout style={{ maxHeight: 180 }}>
@@ -247,3 +252,47 @@ DialogHeaders.parameters = {
     },
   },
 };
+
+export const NoStyleInjectionDialogHeaders: StoryFn<
+  QAContainerNoStyleInjectionProps
+> = (props) => (
+  <QAContainerNoStyleInjection
+    height={600}
+    cols={1}
+    itemPadding={5}
+    width={1200}
+    {...props}
+  >
+    <DialogHeader
+      header="Terms and conditions"
+      style={{
+        width: 600,
+      }}
+    />
+    <DialogHeader
+      style={{
+        width: 600,
+      }}
+      header="Terms and conditions"
+      preheader="Ensure you read and agree to these Terms"
+    />
+    <DialogHeader
+      status="info"
+      header="Terms and conditions"
+      style={{
+        width: 600,
+      }}
+    />
+    <DialogHeader
+      status="info"
+      style={{
+        width: 600,
+      }}
+      header="Terms and conditions"
+      preheader="Ensure you read and agree to these Terms"
+    />
+  </QAContainerNoStyleInjection>
+);
+NoStyleInjectionDialogHeaders.parameters = {
+  chromatic: { disableSnapshot: false },
+};
diff --git a/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx b/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx
@@ -4,8 +4,11 @@ import {
   FileDropZoneTrigger,
 } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
-import { QAContainer } from "docs/components";
-
+import {
+  QAContainer,
+  QAContainerNoStyleInjection,
+  type QAContainerNoStyleInjectionProps,
+} from "docs/components";
 export default {
   title: "Core/File Drop Zone/File Drop Zone QA",
   component: FileDropZone,
@@ -47,3 +50,29 @@ AllExamplesGrid.parameters = {
     },
   },
 };
+
+export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
+  props,
+) => {
+  return (
+    <QAContainerNoStyleInjection cols={2} itemPadding={4} {...props}>
+      <FileDropZone onDrop={() => console.log("files accepted")}>
+        <FileDropZoneIcon />
+        <strong>Drop files here or</strong>
+        <FileDropZoneTrigger />
+      </FileDropZone>
+      <FileDropZone
+        className="saltFileDropZone-active"
+        onDrop={() => console.log("files accepted")}
+      >
+        <FileDropZoneIcon />
+        <strong>Drop files here or</strong>
+        <FileDropZoneTrigger />
+      </FileDropZone>
+    </QAContainerNoStyleInjection>
+  );
+};
+
+NoStyleInjectionGrid.parameters = {
+  chromatic: { disableSnapshot: false },
+};
diff --git a/packages/core/stories/overlay/overlay.qa.stories.tsx b/packages/core/stories/overlay/overlay.qa.stories.tsx
@@ -7,7 +7,12 @@ import {
   OverlayTrigger,
 } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
-import { QAContainer, type QAContainerProps } from "docs/components";
+import {
+  QAContainer,
+  QAContainerNoStyleInjection,
+  type QAContainerNoStyleInjectionProps,
+  type QAContainerProps,
+} from "docs/components";
 
 import "./overlay.stories.css";
 
@@ -42,6 +47,48 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
 };
 
 Default.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
+};
+
+export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
+  props,
+) => (
+  <QAContainerNoStyleInjection
+    height={800}
+    cols={5}
+    itemPadding={50}
+    itemWidthAuto
+    width={1200}
+    {...props}
+  >
+    <Overlay open>
+      <OverlayTrigger>
+        <Button>Show Overlay</Button>
+      </OverlayTrigger>
+      <OverlayPanel>
+        <OverlayPanelContent>
+          <h3 className="content-heading">Title</h3>
+          <div>Content of Overlay</div>
+        </OverlayPanelContent>
+      </OverlayPanel>
+    </Overlay>
+  </QAContainerNoStyleInjection>
+);
+
+NoStyleInjectionGrid.parameters = {
   chromatic: { disableSnapshot: false },
 };
 
@@ -72,5 +119,50 @@ export const CloseButton: StoryFn<QAContainerProps> = (props) => {
 };
 
 CloseButton.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    modes: {
+      theme: {
+        themeNext: "disable",
+      },
+      themeNext: {
+        themeNext: "enable",
+        corner: "rounded",
+        accent: "teal",
+        // Ignore headingFont given font is not loaded
+      },
+    },
+  },
+};
+
+export const NoStyleInjectionCloseButton: StoryFn<
+  QAContainerNoStyleInjectionProps
+> = (props) => {
+  return (
+    <QAContainerNoStyleInjection
+      height={800}
+      cols={5}
+      itemPadding={50}
+      itemWidthAuto
+      width={1200}
+      {...props}
+    >
+      <Overlay open>
+        <OverlayTrigger>
+          <Button>Show Overlay</Button>
+        </OverlayTrigger>
+        <OverlayPanel>
+          <OverlayPanelCloseButton />
+          <OverlayPanelContent>
+            <h3 className="content-heading">Title</h3>
+            <div>Content of Overlay</div>
+          </OverlayPanelContent>
+        </OverlayPanel>
+      </Overlay>
+    </QAContainerNoStyleInjection>
+  );
+};
+
+NoStyleInjectionCloseButton.parameters = {
   chromatic: { disableSnapshot: false },
 };