fix: remove obsolete stories

nulogy · Oct 28, 2024 · b8ff8d5 · b8ff8d5
1 parent e995042
commit b8ff8d5
Show file tree

Hide file tree

Showing 16 changed files with 1 addition and 393 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (