From b8ff8d5377f61c49bf265c9f7776589e9fe1f4b6 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Mon, 28 Oct 2024 11:47:30 -0400
Subject: [PATCH] fix: remove obsolete stories

---
 src/Breadcrumbs/Breadcrumbs.story.tsx   | 17 ------
 src/Button/IconicButton.story.tsx       | 14 -----
 src/Checkbox/Checkbox.story.tsx         | 10 ----
 src/Checkbox/Checkbox.tsx               |  4 +-
 src/DatePicker/DatePicker.story.tsx     | 35 ------------
 src/DateRange/DateRange.story.tsx       | 39 --------------
 src/DropdownMenu/DropdownMenu.story.tsx | 36 -------------
 src/Input/Input.story.tsx               | 37 -------------
 src/Link/Link.story.tsx                 | 16 ------
 src/Radio/Radio.story.tsx               | 10 ----
 src/Select/Select.story.tsx             | 72 -------------------------
 src/Switcher/Switcher.story.tsx         | 30 -----------
 src/Tabs/Tabs.story.tsx                 | 19 -------
 src/Textarea/Textarea.story.tsx         | 15 ------
 src/TimePicker/TimePicker.story.tsx     | 18 -------
 src/Toggle/Toggle.story.tsx             | 22 --------
 16 files changed, 1 insertion(+), 393 deletions(-)

diff --git a/src/Breadcrumbs/Breadcrumbs.story.tsx b/src/Breadcrumbs/Breadcrumbs.story.tsx
index 460606587..6eaa481d5 100644
--- a/src/Breadcrumbs/Breadcrumbs.story.tsx
+++ b/src/Breadcrumbs/Breadcrumbs.story.tsx
@@ -24,23 +24,6 @@ export const _Breadcrumbs = () => (
 
 const DashedBreadcrumbs = dashed(Breadcrumbs);
 
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <DashedBreadcrumbs>
-      <Link href="/">Default</Link>
-      <Link href="/">Size</Link>
-    </DashedBreadcrumbs>
-    <DashedBreadcrumbs size="desktop">
-      <Link href="/">Desktop</Link>
-      <Link href="/">Size</Link>
-    </DashedBreadcrumbs>
-    <DashedBreadcrumbs variant="touch">
-      <Link href="/">Touch</Link>
-      <Link href="/">Size</Link>
-    </DashedBreadcrumbs>
-  </Flex>
-);
-
 export const WithoutLink = () => (
   <Breadcrumbs>
     <Link href="/">Home</Link>
diff --git a/src/Button/IconicButton.story.tsx b/src/Button/IconicButton.story.tsx
index 87e6c773e..ef28472fa 100644
--- a/src/Button/IconicButton.story.tsx
+++ b/src/Button/IconicButton.story.tsx
@@ -127,20 +127,6 @@ export const WithACustomFontSize = () => (
 
 const DashedIconicButton = dashed(IconicButton);
 
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <DashedIconicButton tooltip="Stop job" icon="close">
-      Default size
-    </DashedIconicButton>
-    <DashedIconicButton variant="desktop" tooltip="Stop job" icon="close">
-      Desktop size
-    </DashedIconicButton>
-    <DashedIconicButton variant="touch" tooltip="Stop job" icon="close">
-      Touch size
-    </DashedIconicButton>
-  </Flex>
-);
-
 WithACustomFontSize.story = {
   name: "with a custom font size",
 };
diff --git a/src/Checkbox/Checkbox.story.tsx b/src/Checkbox/Checkbox.story.tsx
index d23f44312..eae79c952 100644
--- a/src/Checkbox/Checkbox.story.tsx
+++ b/src/Checkbox/Checkbox.story.tsx
@@ -98,16 +98,6 @@ SetToRequired.story = {
   name: "Set to required",
 };
 
-const DashedCheckbox = dashed(Checkbox);
-
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <DashedCheckbox id="checkbox-1" labelText="I am a default sized Checkbox" />
-    <DashedCheckbox id="checkbox-1" variant="desktop" labelText="I am a desktop sized Checkbox" />
-    <DashedCheckbox id="checkbox-1" variant="touch" labelText="I am a touch sized Checkbox" />
-  </Flex>
-);
-
 export const Indeterminate = () => (
   <>
     <Checkbox id="checkbox" labelText="I am an indeterminate checkbox" readOnly checked indeterminate />
diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
index 3062f004c..f82a34a99 100644
--- a/src/Checkbox/Checkbox.tsx
+++ b/src/Checkbox/Checkbox.tsx
@@ -128,9 +128,7 @@ const CheckboxInput = styled.input<CheckboxProps>((props) => ({
   },
 }));
 
-type Ref = HTMLInputElement;
-
-const Checkbox = forwardRef<Ref, CheckboxProps>((props, ref) => {
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   const { variant, className, labelText, disabled, checked, required, error, indeterminate } = props;
 
   const componentVariant = useComponentVariant(variant);
diff --git a/src/DatePicker/DatePicker.story.tsx b/src/DatePicker/DatePicker.story.tsx
index a6f12dfe9..3775bbf40 100644
--- a/src/DatePicker/DatePicker.story.tsx
+++ b/src/DatePicker/DatePicker.story.tsx
@@ -4,7 +4,6 @@ import { action } from "@storybook/addon-actions";
 import { select, boolean } from "@storybook/addon-knobs";
 
 import { DatePicker, Button } from "../index";
-import { Flex } from "../Flex";
 
 const selectedDateExamples = [
   new Date("2019-01-01T05:00:00.000Z"),
@@ -47,40 +46,6 @@ WithCustomDateFormat.story = {
   name: "with custom date format",
 };
 
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <DatePicker
-      selected={select("selected", selectedDateExamples, selectedDateExamples[0], "selected")}
-      dateFormat="MMMM d, yyyy"
-      onChange={action("date changed")}
-      onFocus={action("date selector focused")}
-      onBlur={action("date selector blurred")}
-      onInputChange={action("input changed")}
-      inputProps={{ labelText: "Default size" }}
-    />
-    <DatePicker
-      variant="desktop"
-      selected={select("selected", selectedDateExamples, selectedDateExamples[0], "selected")}
-      dateFormat="MMMM d, yyyy"
-      onChange={action("date changed")}
-      onFocus={action("date selector focused")}
-      onBlur={action("date selector blurred")}
-      onInputChange={action("input changed")}
-      inputProps={{ labelText: "Desktop size" }}
-    />
-    <DatePicker
-      variant="touch"
-      selected={select("selected", selectedDateExamples, selectedDateExamples[0], "selected")}
-      dateFormat="MMMM d, yyyy"
-      onChange={action("date changed")}
-      onFocus={action("date selector focused")}
-      onBlur={action("date selector blurred")}
-      onInputChange={action("input changed")}
-      inputProps={{ labelText: "Touch size" }}
-    />
-  </Flex>
-);
-
 export const WithCustomPlaceholder = () => (
   <DatePicker
     dateFormat="MMMM d, yyyy"
diff --git a/src/DateRange/DateRange.story.tsx b/src/DateRange/DateRange.story.tsx
index 44ea5713d..313dd1a72 100644
--- a/src/DateRange/DateRange.story.tsx
+++ b/src/DateRange/DateRange.story.tsx
@@ -17,45 +17,6 @@ export const Default = () => (
   />
 );
 
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" flexDirection="column" alignItems="flex-start">
-    <DateRange
-      onRangeChange={action("range changed")}
-      onStartDateChange={action("start date changed")}
-      onEndDateChange={action("end date changed")}
-      defaultStartDate={new Date("2019-07-05T05:00:00.000Z")}
-      defaultEndDate={new Date("2019-07-05T05:00:00.000Z")}
-      showTimes
-      defaultStartTime="13:30"
-      defaultEndTime="10:30"
-    />
-
-    <DateRange
-      variant="desktop"
-      onRangeChange={action("range changed")}
-      onStartDateChange={action("start date changed")}
-      onEndDateChange={action("end date changed")}
-      defaultStartDate={new Date("2019-07-05T05:00:00.000Z")}
-      defaultEndDate={new Date("2019-07-05T05:00:00.000Z")}
-      showTimes
-      defaultStartTime="13:30"
-      defaultEndTime="10:30"
-    />
-
-    <DateRange
-      variant="touch"
-      onRangeChange={action("range changed")}
-      onStartDateChange={action("start date changed")}
-      onEndDateChange={action("end date changed")}
-      defaultStartDate={new Date("2019-07-05T05:00:00.000Z")}
-      defaultEndDate={new Date("2019-07-05T05:00:00.000Z")}
-      showTimes
-      defaultStartTime="13:30"
-      defaultEndTime="10:30"
-    />
-  </Flex>
-);
-
 export const DefaultStartAndEndDate = () => (
   <DateRange
     defaultStartDate={new Date("2019-01-01T05:00:00.000Z")}
diff --git a/src/DropdownMenu/DropdownMenu.story.tsx b/src/DropdownMenu/DropdownMenu.story.tsx
index 665b8e082..5f6508dc1 100644
--- a/src/DropdownMenu/DropdownMenu.story.tsx
+++ b/src/DropdownMenu/DropdownMenu.story.tsx
@@ -66,42 +66,6 @@ WithCustomColors.story = {
   name: "with custom colors",
 };
 
-export const WithDifferentVariants = () => (
-  <Flex gap="48px">
-    <DropdownMenu
-      trigger={() => <IconicButton icon="more">Default menu</IconicButton>}
-      defaultOpen
-      openAriaLabel="open dropdown"
-      closeAriaLabel="close dropdown"
-    >
-      <DropdownLink href="/">Dropdown Link</DropdownLink>
-      <DropdownButton onClick={() => {}}>Dropdown Button</DropdownButton>
-    </DropdownMenu>
-
-    <DropdownMenu
-      trigger={() => <IconicButton icon="more">Medium menu</IconicButton>}
-      defaultOpen
-      openAriaLabel="open dropdown"
-      closeAriaLabel="close dropdown"
-      variant="desktop"
-    >
-      <DropdownLink href="/">Dropdown Link</DropdownLink>
-      <DropdownButton onClick={() => {}}>Dropdown Button</DropdownButton>
-    </DropdownMenu>
-
-    <DropdownMenu
-      trigger={() => <IconicButton icon="more">Large menu</IconicButton>}
-      defaultOpen
-      openAriaLabel="open dropdown"
-      closeAriaLabel="close dropdown"
-      variant="touch"
-    >
-      <DropdownLink href="/">Dropdown Link</DropdownLink>
-      <DropdownButton onClick={() => {}}>Dropdown Button</DropdownButton>
-    </DropdownMenu>
-  </Flex>
-);
-
 export const WithButtonClosingMenu = () => (
   <DropdownMenu openAriaLabel="open dropdown" closeAriaLabel="close dropdown">
     {({ closeMenu }) => <DropdownButton onClick={closeMenu}>Dropdown Button</DropdownButton>}
diff --git a/src/Input/Input.story.tsx b/src/Input/Input.story.tsx
index 1911c5565..ea1659de9 100644
--- a/src/Input/Input.story.tsx
+++ b/src/Input/Input.story.tsx
@@ -27,43 +27,6 @@ WithAllProps.story = {
   name: "with all props",
 };
 
-export const WithDifferentVariants = () => (
-  <Flex alignItems="flex-start">
-    <Input
-      placeholder="Placeholder"
-      p="x3"
-      labelText="Default size"
-      helpText="Additional help text"
-      requirementText="Required"
-      onChange={action("value changed")}
-      onBlur={action("blurred")}
-      required
-    />
-    <Input
-      placeholder="Placeholder"
-      p="x3"
-      labelText="Medium size"
-      helpText="Additional help text"
-      requirementText="Required"
-      onChange={action("value changed")}
-      onBlur={action("blurred")}
-      variant="desktop"
-      required
-    />
-    <Input
-      placeholder="Placeholder"
-      p="x3"
-      labelText="Large size"
-      helpText="Additional help text"
-      requirementText="Required"
-      onChange={action("value changed")}
-      onBlur={action("blurred")}
-      variant="touch"
-      required
-    />
-  </Flex>
-);
-
 export const SetToDisabled = () => (
   <Input labelText="Set to disabled" disabled onBlur={action("blurred")} value="Disabled" />
 );
diff --git a/src/Link/Link.story.tsx b/src/Link/Link.story.tsx
index 7f7dfc481..d0fdc4de9 100644
--- a/src/Link/Link.story.tsx
+++ b/src/Link/Link.story.tsx
@@ -50,22 +50,6 @@ export const WithADifferentFontSize = () => (
   </Link>
 );
 
-const DashedLink = dashed(Link);
-
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <DashedLink href="http://nulogy.design">Default Link</DashedLink>
-
-    <DashedLink variant="desktop" href="http://nulogy.design">
-      Desktop Link
-    </DashedLink>
-
-    <DashedLink variant="touch" href="http://nulogy.design">
-      Touch Link
-    </DashedLink>
-  </Flex>
-);
-
 export const AsAButton = () => <Link as="button">Link</Link>;
 
 AsAButton.story = {
diff --git a/src/Radio/Radio.story.tsx b/src/Radio/Radio.story.tsx
index 7e8f1f579..57ee62dbf 100644
--- a/src/Radio/Radio.story.tsx
+++ b/src/Radio/Radio.story.tsx
@@ -31,16 +31,6 @@ SetToDisabled.story = {
   name: "Set to disabled",
 };
 
-const DashedRadio = dashed(Radio);
-
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <DashedRadio id="radio-1" labelText="I am a default sized Radio" />
-    <DashedRadio id="radio-1" variant="desktop" labelText="I am a desktop sized Radio" />
-    <DashedRadio id="radio-2" variant="touch" labelText="I am a touch sized Radio" />
-  </Flex>
-);
-
 export const SetToError = () => (
   <>
     <Radio id="radio" error labelText="I am error" />
diff --git a/src/Select/Select.story.tsx b/src/Select/Select.story.tsx
index 89734dd97..23f3f0581 100644
--- a/src/Select/Select.story.tsx
+++ b/src/Select/Select.story.tsx
@@ -143,78 +143,6 @@ export const _Select = () => (
   />
 );
 
-export const WithDifferentVariants = () => {
-  return (
-    <Flex flexDirection="column" gap="x2">
-      <Heading2>Standard</Heading2>
-      <Flex gap="x2" minHeight="360px">
-        <Select
-          initialIsOpen
-          placeholder="Please select inventory status"
-          onChange={action("selection changed")}
-          onBlur={action("blurred")}
-          options={options}
-          labelText="Default size"
-          onInputChange={action("typed input value changed")}
-        />
-        <Select
-          variant="desktop"
-          initialIsOpen
-          placeholder="Please select inventory status"
-          onChange={action("selection changed")}
-          onBlur={action("blurred")}
-          options={options}
-          labelText="desktop size"
-          onInputChange={action("typed input value changed")}
-        />
-        <Select
-          variant="touch"
-          initialIsOpen
-          placeholder="Please select inventory status"
-          onChange={action("selection changed")}
-          onBlur={action("blurred")}
-          options={options}
-          labelText="Touch size"
-          onInputChange={action("typed input value changed")}
-        />
-      </Flex>
-
-      <Heading2>Multi-select</Heading2>
-      <Flex gap="x2" alignItems="flex-start">
-        <Select
-          initialIsOpen
-          defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
-          noOptionsMessage={() => "No options"}
-          placeholder="Please select inventory status"
-          options={PCNList}
-          labelText="Default Size"
-          multiselect
-        />
-        <Select
-          variant="desktop"
-          initialIsOpen
-          defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
-          noOptionsMessage={() => "No options"}
-          placeholder="Please select inventory status"
-          options={PCNList}
-          labelText="Desktop Size"
-          multiselect
-        />
-        <Select
-          variant="touch"
-          initialIsOpen
-          defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
-          noOptionsMessage={() => "No options"}
-          placeholder="Please select inventory status"
-          options={PCNList}
-          labelText="Touch Size"
-          multiselect
-        />
-      </Flex>
-    </Flex>
-  );
-};
-
 export const WithABlankValue = () => {
   const optionsWithBlank = [{ value: null, label: "" }, ...options];
   return (
diff --git a/src/Switcher/Switcher.story.tsx b/src/Switcher/Switcher.story.tsx
index 252e028b4..f2b40c6cc 100644
--- a/src/Switcher/Switcher.story.tsx
+++ b/src/Switcher/Switcher.story.tsx
@@ -17,36 +17,6 @@ export const WithSelectedValue = () => {
   );
 };
 
-export const WithDifferentVariants = () => {
-  const [selectedDefault, setSelectedDefault] = useState("option_1");
-  const [selectedMedium, setSelectedMedium] = useState("option_1");
-  const [selectedLarge, setSelectedLarge] = useState("option_1");
-
-  return (
-    <Flex gap="x2" alignItems="center">
-      <Switcher aria-label="storybook-switcher" selected={selectedDefault} onChange={setSelectedDefault}>
-        <Switch value="option_1">Default</Switch>
-        <Switch value="option_2">Size</Switch>
-      </Switcher>
-
-      <Switcher
-        variant="desktop"
-        aria-label="storybook-switcher"
-        selected={selectedMedium}
-        onChange={setSelectedMedium}
-      >
-        <Switch value="option_1">Medium</Switch>
-        <Switch value="option_2">Size</Switch>
-      </Switcher>
-
-      <Switcher variant="touch" aria-label="storybook-switcher" selected={selectedLarge} onChange={setSelectedLarge}>
-        <Switch value="option_1">Large</Switch>
-        <Switch value="option_2">Size</Switch>
-      </Switcher>
-    </Flex>
-  );
-};
-
 export const WithOtherInteractiveElements = () => (
   <Flex gap="x1" alignItems="center">
     <Button>Click me</Button>
diff --git a/src/Tabs/Tabs.story.tsx b/src/Tabs/Tabs.story.tsx
index 40d4520d4..c8fa6709d 100644
--- a/src/Tabs/Tabs.story.tsx
+++ b/src/Tabs/Tabs.story.tsx
@@ -183,22 +183,3 @@ export const WithConditionallyRenderedTabs = () => (
     {true && <Tab label="Shown 2">Shown tab 2</Tab>}
   </Tabs>
 );
-
-export const WithDifferentVariants = () => (
-  <Flex gap="x4">
-    <Tabs defaultSelectedIndex={2}>
-      <Tab label="Default tab 1">Tab 1 Content</Tab>
-      <Tab label="Default tab 2">Tab 2 Content</Tab>
-    </Tabs>
-
-    <Tabs defaultSelectedIndex={2} variant="desktop">
-      <Tab label="Medium tab 1">Tab 1 Content</Tab>
-      <Tab label="Medium tab 2">Tab 2 Content</Tab>
-    </Tabs>
-
-    <Tabs defaultSelectedIndex={2} variant="touch">
-      <Tab label="Large tab 1">Tab 1 Content</Tab>
-      <Tab label="Large tab 2">Tab 2 Content</Tab>
-    </Tabs>
-  </Flex>
-);
diff --git a/src/Textarea/Textarea.story.tsx b/src/Textarea/Textarea.story.tsx
index 7c4dbbedf..7fcb54681 100644
--- a/src/Textarea/Textarea.story.tsx
+++ b/src/Textarea/Textarea.story.tsx
@@ -70,18 +70,3 @@ export const UsingRefToControlFocus = () => {
     </>
   );
 };
-
-export const WithDifferentVariants = () => {
-  return (
-    <Flex gap="x2" alignItems="flex-start">
-      <Textarea labelText="Default size" onChange={action("value changed")} onBlur={action("blurred")} />
-      <Textarea
-        variant="desktop"
-        labelText="Medium size"
-        onChange={action("value changed")}
-        onBlur={action("blurred")}
-      />
-      <Textarea variant="touch" labelText="Large size" onChange={action("value changed")} onBlur={action("blurred")} />
-    </Flex>
-  );
-};
diff --git a/src/TimePicker/TimePicker.story.tsx b/src/TimePicker/TimePicker.story.tsx
index a7c20c720..9b8893ec7 100644
--- a/src/TimePicker/TimePicker.story.tsx
+++ b/src/TimePicker/TimePicker.story.tsx
@@ -141,24 +141,6 @@ export const UsingRefToControlFocus = () => {
   );
 };
 
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <TimePicker onChange={action("time changed")} onInputChange={action("input changed")} labelText="Default size" />
-    <TimePicker
-      variant="desktop"
-      onChange={action("time changed")}
-      onInputChange={action("input changed")}
-      labelText="Medium size"
-    />
-    <TimePicker
-      variant="touch"
-      onChange={action("time changed")}
-      onInputChange={action("input changed")}
-      labelText="Large size"
-    />
-  </Flex>
-);
-
 UsingRefToControlFocus.story = {
   name: "using ref to control focus",
 };
diff --git a/src/Toggle/Toggle.story.tsx b/src/Toggle/Toggle.story.tsx
index 3e1a0186d..162b84e4e 100644
--- a/src/Toggle/Toggle.story.tsx
+++ b/src/Toggle/Toggle.story.tsx
@@ -2,32 +2,10 @@ import React, { useRef } from "react";
 import { action } from "@storybook/addon-actions";
 import { boolean } from "@storybook/addon-knobs";
 import { Toggle, Button, Box } from "../index";
-import { Flex } from "../Flex";
 import dashed from "../utils/dashed";
 
-const DashedToggle = dashed(Toggle);
 const DashedBox = dashed(Box);
 
-export const WithDifferentVariants = () => (
-  <Flex gap="x2" alignItems="flex-start">
-    <DashedToggle onText="Default" offText="Default" data-testid="toggle-example" onChange={action("on change")} />
-    <DashedToggle
-      onText="Desktop"
-      offText="Desktop"
-      variant="desktop"
-      data-testid="toggle-example"
-      onChange={action("on change")}
-    />
-    <DashedToggle
-      onText="Touch"
-      offText="Touch"
-      variant="touch"
-      data-testid="toggle-example"
-      onChange={action("on change")}
-    />
-  </Flex>
-);
-
 export default {
   title: "Components/Toggle",
 };