Add QA stories to all core components (#2685)

packages/core/stories/accordion/accordion.qa.stories.tsx

@@ -12,7 +12,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, QAContainerProps } from "docs/components";
 
 export default {
-  title: "Core/Accordion/QA",
+  title: "Core/Accordion/Accordion QA",
   component: Accordion,
 } as Meta<typeof Accordion>;
 

packages/core/stories/avatar/avatar.qa.stories.tsx

@@ -0,0 +1,21 @@
+import { Avatar } from "@salt-ds/core";
+import { Meta, StoryFn } from "@storybook/react";
+import { QAContainer, QAContainerProps } from "docs/components";
+import persona1 from "../assets/avatar.png";
+
+export default {
+  title: "Core/Avatar/Avatar QA",
+  component: Avatar,
+} as Meta<typeof Avatar>;
+
+export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
+  <QAContainer height={500} width={1000} {...props}>
+    <Avatar size={1} name="Alex Brailescu" src={persona1 as string} />
+    <Avatar size={2} src="bad_url" name="Peter Piper" />
+    <Avatar size={3} src="bad_url" />
+  </QAContainer>
+);
+
+AllVariantsGrid.parameters = {
+  chromatic: { disableSnapshot: false },
+};

packages/core/stories/banner/banner.qa.stories.tsx

@@ -13,7 +13,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { CloseIcon } from "@salt-ds/icons";
 
 export default {
-  title: "Core/Banner/QA",
+  title: "Core/Banner/Banner QA",
   component: Banner,
 } as Meta<typeof Banner>;
 

packages/core/stories/button/button.qa.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, QAContainerProps } from "docs/components";
 
 export default {
-  title: "Core/Button/QA",
+  title: "Core/Button/Button QA",
   component: Button,
   // Manually specify onClick action to test Actions panel
   // react-docgen-typescript-loader doesn't support detecting interface extension

packages/core/stories/card/card.qa.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, QAContainerProps } from "docs/components";
 
 export default {
-  title: "Core/Card/QA",
+  title: "Core/Card/Card QA",
   component: Card,
 } as Meta<typeof Card>;
 

packages/core/stories/checkbox/checkbox.qa.stories.tsx

@@ -3,7 +3,7 @@ import { Checkbox, CheckboxGroup, CheckboxGroupProps } from "@salt-ds/core";
 import { QAContainer, QAContainerProps } from "docs/components";
 
 export default {
-  title: "Core/Checkbox/QA",
+  title: "Core/Checkbox/Checkbox QA",
   component: Checkbox,
 } as Meta<typeof Checkbox>;
 

packages/core/stories/form-field/form-field.qa.stories.tsx

@@ -0,0 +1,25 @@
+import { FormField, FormFieldLabel, FormFieldHelperText } from "@salt-ds/core";
+import { Meta, StoryFn } from "@storybook/react";
+import { QAContainer, QAContainerProps } from "docs/components";
+
+export default {
+  title: "Core/Form Field/Form Field QA",
+  component: FormField,
+} as Meta<typeof FormField>;
+
+export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
+  <QAContainer height={500} width={1000} cols={2} {...props}>
+    <FormField {...props}>
+      <FormFieldLabel>Form Field label</FormFieldLabel>
+      <FormFieldHelperText>Helper text</FormFieldHelperText>
+    </FormField>
+    <FormField labelPlacement="left" {...props}>
+      <FormFieldLabel>Form Field label</FormFieldLabel>
+      <FormFieldHelperText>Helper text</FormFieldHelperText>
+    </FormField>
+  </QAContainer>
+);
+
+AllVariantsGrid.parameters = {
+  chromatic: { disableSnapshot: false },
+};

packages/core/stories/input/input.qa.stories.tsx

@@ -0,0 +1,91 @@
+import { Button, Input, Text } from "@salt-ds/core";
+import { Meta, StoryFn } from "@storybook/react";
+import { QAContainer, QAContainerProps } from "docs/components";
+import {
+  CloseIcon,
+  CreditCardIcon,
+  FilterClearIcon,
+  FlagIcon,
+} from "@salt-ds/icons";
+
+export default {
+  title: "Core/Input/Input QA",
+  component: Input,
+} as Meta<typeof Input>;
+
+export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
+  <QAContainer height={500} width={1000} itemPadding={4} {...props}>
+    <Input defaultValue="Value" />
+    <Input placeholder="Placeholder" />
+    <Input defaultValue="Readonly" readOnly />
+    <Input defaultValue="Disabled" disabled />
+    <Input
+      startAdornment={<FlagIcon />}
+      endAdornment={
+        <>
+          <Text>%</Text>
+          <FilterClearIcon />
+        </>
+      }
+      defaultValue={"Static adornments"}
+    />
+    <Input
+      startAdornment={
+        <Button variant="cta">
+          <FlagIcon />
+        </Button>
+      }
+      endAdornment={
+        <Button variant="secondary">
+          <CloseIcon />
+        </Button>
+      }
+      defaultValue={"Button adornments"}
+    />
+
+    <Input defaultValue="Secondary Value" variant="secondary" />
+    <Input placeholder="Secondary Placeholder" variant="secondary" />
+    <Input defaultValue="Secondary Readonly" readOnly variant="secondary" />
+    <Input defaultValue="Secondary Disabled" disabled variant="secondary" />
+    <Input
+      variant="secondary"
+      startAdornment={<FlagIcon />}
+      endAdornment={
+        <>
+          <Text>%</Text>
+          <FilterClearIcon />
+        </>
+      }
+      defaultValue={"Static adornments"}
+    />
+    <Input
+      variant="secondary"
+      startAdornment={
+        <Button variant="cta">
+          <FlagIcon />
+        </Button>
+      }
+      endAdornment={
+        <Button variant="secondary">
+          <CloseIcon />
+        </Button>
+      }
+      defaultValue={"Button adornments"}
+    />
+
+    <Input defaultValue="Error value" validationStatus="error" />
+    <Input defaultValue="Warning value" validationStatus="warning" />
+    <Input defaultValue="Success value" validationStatus="success" />
+
+    <Input
+      startAdornment={<FlagIcon />}
+      endAdornment={<CreditCardIcon />}
+      defaultValue={"Error with adornments"}
+      validationStatus="error"
+    />
+  </QAContainer>
+);
+
+AllVariantsGrid.parameters = {
+  chromatic: { disableSnapshot: false },
+};

packages/core/stories/link/link.qa.stories.tsx

@@ -0,0 +1,37 @@
+import { Link } from "@salt-ds/core";
+import { Meta, StoryFn } from "@storybook/react";
+import { QAContainer, QAContainerProps } from "docs/components";
+
+export default {
+  title: "Core/Link/Link QA",
+  component: Link,
+} as Meta<typeof Link>;
+
+export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
+  <QAContainer height={500} width={1000} {...props}>
+    <Link href="https://www.google.com">Link</Link>
+    <Link href="https://www.google.com" target="_blank">
+      Link target blank
+    </Link>
+    <div style={{ width: 150 }}>
+      <Link href="https://www.google.com" maxRows={1}>
+        <strong>Strong</strong> and <small>small</small> truncation example
+      </Link>
+    </div>
+    <Link href="https://www.google.com" variant="secondary">
+      Secondary Link
+    </Link>
+    <Link href="https://www.google.com" variant="secondary" target="_blank">
+      Secondary Link target blank
+    </Link>
+    <div style={{ width: 150 }}>
+      <Link href="https://www.google.com" maxRows={1} variant="secondary">
+        <strong>Strong</strong> and <small>small</small> truncation example
+      </Link>
+    </div>
+  </QAContainer>
+);
+
+AllVariantsGrid.parameters = {
+  chromatic: { disableSnapshot: false },
+};

packages/core/stories/multiline-input/multiline-input.qa.stories.tsx

@@ -0,0 +1,140 @@
+import { Button, MultilineInput, Text } from "@salt-ds/core";
+import {
+  FilterClearIcon,
+  FlagIcon,
+  HelpSolidIcon,
+  PinSolidIcon,
+  SendIcon,
+} from "@salt-ds/icons";
+import { Meta, StoryFn } from "@storybook/react";
+import { QAContainer, QAContainerProps } from "docs/components";
+
+export default {
+  title: "Core/Multiline Input/MultilineInput QA",
+  component: MultilineInput,
+} as Meta<typeof MultilineInput>;
+
+export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
+  <QAContainer height={500} width={1000} itemPadding={4} {...props}>
+    <MultilineInput defaultValue="Value 3 rows" rows={3} />
+    <MultilineInput placeholder="Placeholder" />
+    <MultilineInput defaultValue="Disabled" disabled />
+    <MultilineInput defaultValue="Readonly" readOnly />
+    <MultilineInput
+      defaultValue="With multiple adornment"
+      startAdornment={<Text>£</Text>}
+      endAdornment={
+        <>
+          <Text>GBP</Text>
+          <Button variant="secondary">
+            <HelpSolidIcon />
+          </Button>
+          <Button variant="cta">
+            <SendIcon />
+          </Button>
+        </>
+      }
+    />
+    <MultilineInput defaultValue="Bordered" bordered />
+    <MultilineInput defaultValue="Disabled bordered" bordered disabled />
+    <MultilineInput defaultValue="Readonly bordered" bordered readOnly />
+
+    <MultilineInput
+      defaultValue="Secondary value 3 rows"
+      rows={3}
+      variant="secondary"
+    />
+    <MultilineInput placeholder="Secondary Placeholder" variant="secondary" />
+    <MultilineInput
+      defaultValue="Secondary Disabled"
+      disabled
+      variant="secondary"
+    />
+    <MultilineInput
+      defaultValue="Secondary Readonly"
+      readOnly
+      variant="secondary"
+    />
+    <MultilineInput
+      defaultValue="Secondary with multiple adornment"
+      variant="secondary"
+      startAdornment={<Text>£</Text>}
+      endAdornment={
+        <>
+          <Text>GBP</Text>
+          <Button variant="secondary">
+            <HelpSolidIcon />
+          </Button>
+          <Button variant="cta">
+            <SendIcon />
+          </Button>
+        </>
+      }
+    />
+    <MultilineInput
+      defaultValue="Secondary bordered"
+      bordered
+      variant="secondary"
+    />
+    <MultilineInput
+      defaultValue="Secondary disabled bordered"
+      bordered
+      disabled
+      variant="secondary"
+    />
+    <MultilineInput
+      defaultValue="Secondary readonly bordered"
+      bordered
+      readOnly
+      variant="secondary"
+    />
+
+    <MultilineInput
+      startAdornment={<FlagIcon />}
+      endAdornment={<PinSolidIcon />}
+      validationStatus="success"
+      defaultValue="Success"
+    />
+    <MultilineInput
+      startAdornment={<FlagIcon />}
+      endAdornment={
+        <>
+          <Text>%</Text>
+          <FilterClearIcon />
+        </>
+      }
+      validationStatus="error"
+      defaultValue="Error"
+    />
+    <MultilineInput validationStatus="warning" defaultValue="Warning" />
+
+    <MultilineInput
+      startAdornment={<FlagIcon />}
+      endAdornment={<PinSolidIcon />}
+      validationStatus="success"
+      defaultValue="Success bordered"
+      bordered
+    />
+    <MultilineInput
+      startAdornment={<FlagIcon />}
+      endAdornment={
+        <>
+          <Text>%</Text>
+          <FilterClearIcon />
+        </>
+      }
+      validationStatus="error"
+      defaultValue="Error bordered"
+      bordered
+    />
+    <MultilineInput
+      validationStatus="warning"
+      defaultValue="Warning bordered"
+      bordered
+    />
+  </QAContainer>
+);
+
+AllVariantsGrid.parameters = {
+  chromatic: { disableSnapshot: false },
+};

packages/core/stories/multiline-input/multiline-input.stories.tsx

@@ -1,5 +1,3 @@
-import clsx from "clsx";
-import { ChangeEvent, useState } from "react";
 import { Button, FlowLayout, Label, MultilineInput, Text } from "@salt-ds/core";
 import {
   BankCheckSolidIcon,
@@ -13,6 +11,7 @@ import {
   UserBadgeIcon,
 } from "@salt-ds/icons";
 import { Meta, StoryFn } from "@storybook/react";
+import { ChangeEvent, useState } from "react";
 
 export default {
   title: "Core/Multiline Input",

packages/core/stories/panel/panel.qa.stories.tsx

@@ -3,7 +3,7 @@ import { Panel } from "@salt-ds/core";
 import { QAContainer, QAContainerProps } from "docs/components";
 
 export default {
-  title: "Core/Panel/QA",
+  title: "Core/Panel/Panel QA",
   component: Panel,
 } as Meta<typeof Panel>;
 

packages/core/stories/radio-button/radio-button.qa.stories.tsx

@@ -7,7 +7,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { QAContainer, QAContainerProps } from "docs/components";
 
 export default {
-  title: "Core/Radio Button/QA",
+  title: "Core/Radio Button/Radio Button QA",
   component: RadioButton,
 } as Meta<typeof RadioButton>;
 

packages/core/stories/spinner/spinner.qa.stories.css

@@ -0,0 +1,3 @@
+.noSpin.saltSpinner .saltSpinner-spinner {
+  animation: none;
+}