@conveyorhq/arrow-ds 2.0.0-beta.7 → 2.0.0-beta.9

package/src/components/VisuallyHidden/VisuallyHidden.md

@@ -1,23 +0,0 @@
-# Usage
-
-`<VisuallyHidden />` provides text for screen readers that is visually hidden. It is the logical opposite of the aria-hidden attribute.
-
-`import { VisuallyHidden } from "@conveyorhq/arrow-ds"`
-
-In the following example, screen readers will announce "Sync" and will ignore the icon; the browser displays the icon and ignores the text.
-
-```jsx
-<button>
-  <VisuallyHidden>Sync</VisuallyHidden>
-  <Icon icon="sync" />
-</button>
-```
-
-Further reading: https://a11yproject.com/posts/how-to-hide-content/
-
-## Props
-
-| Prop | Type | Required | Description |
-|:--- |:--- |:--- |:--- |
-| className | ClassName | No | CSS Classname applied to underlying div
-| children | React.Node | Yes | Child nodes

package/src/components/VisuallyHidden/VisuallyHidden.story.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Box } from "../Box";
-import { Icon, ICON_TYPE } from "../Icon";
-import { VisuallyHidden } from "./VisuallyHidden";
-
-const stories = storiesOf("Components/Disclosure/Visually Hidden", module);
-
-stories.add("Default", () => (
-  <Story title="VisuallyHidden">
-    <Box className="p-12">
-      <button type="button">
-        <VisuallyHidden as="span">Sync</VisuallyHidden>
-        <Icon icon={ICON_TYPE.SYNC} />
-      </button>
-    </Box>
-  </Story>
-));

package/src/components/useStep/ExampleSetupWizard.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { Box } from "../Box";
-import { Panel } from "../Panel";
-import { Button, BUTTON_VARIANT } from "../Button";
-import { useStep } from "../../hooks/useStep";
-
-export const ExampleSetupWizard = ({
-  steps,
-  initialStep,
-}: {
-  steps: number;
-  initialStep?: number;
-}) => {
-  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
-    steps,
-    initialStep,
-  });
-
-  return (
-    <Box>
-      <Panel className="p-8">
-        {step === 1 && <>Step 1</>}
-        {step === 2 && <>Step 2</>}
-        {step === 3 && <>Step 3</>}
-        {step === 4 && <>Step 4</>}
-      </Panel>
-
-      <Button.Group className="mt-4 justify-end">
-        {step !== 1 && (
-          <Button.Group className="mr-auto">
-            <Button
-              variant={BUTTON_VARIANT.SECONDARY}
-              onClick={goToPreviousStep}
-            >
-              Previous Step
-            </Button>
-          </Button.Group>
-        )}
-
-        <Button
-          variant={BUTTON_VARIANT.SECONDARY}
-          onClick={() => {
-            goToStep(1);
-          }}
-        >
-          Cancel
-        </Button>
-
-        {step === 4 ? (
-          <Button
-            onClick={() => {
-              console.log("Create button clicked");
-            }}
-          >
-            Create
-          </Button>
-        ) : (
-          <Button onClick={goToNextStep}>Next Step</Button>
-        )}
-      </Button.Group>
-    </Box>
-  );
-};

package/src/components/useStep/useStep.story.mdx

@@ -1,76 +0,0 @@
-import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
-import { ExampleSetupWizard } from "./ExampleSetupWizard";
-
-<Meta title="Hooks/useStep" component={ExampleSetupWizard} />
-
-# useStep
-
-<Preview>
-  <Story name="useStep">
-    <ExampleSetupWizard steps={4} />
-  </Story>
-</Preview>
-
-## Props
-
-<Props of={ExampleSetupWizard} />
-
-## Example
-
-This code snippet is from the `ExampleSetupWizard` from above.
-
-To see an example within a modal, look at the [modal story](/?path=/docs/components-modal--default#set-up-wizard-example).
-
-```jsx
-export const ExampleSetupWizard = () => {
-  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
-    steps: 4,
-    initialStep: 2,
-  });
-
-  return (
-    <Box>
-      <Panel className="p-8">
-        {step === 1 && <>Step 1</>}
-        {step === 2 && <>Step 2</>}
-        {step === 3 && <>Step 3</>}
-        {step === 4 && <>Step 4</>}
-      </Panel>
-
-      <Button.Group className="mt-4 justify-end">
-        {step !== 1 && (
-          <Button.Group className="mr-auto">
-            <Button
-              variant={BUTTON_VARIANT.SECONDARY}
-              onClick={goToPreviousStep}
-            >
-              Previous Step
-            </Button>
-          </Button.Group>
-        )}
-
-        <Button
-          variant={BUTTON_VARIANT.SECONDARY}
-          onClick={() => {
-            goToStep(1);
-          }}
-        >
-          Cancel
-        </Button>
-
-        {step === 4 ? (
-          <Button
-            onClick={() => {
-              console.log("Create button clicked");
-            }}
-          >
-            Create
-          </Button>
-        ) : (
-          <Button onClick={goToNextStep}>Next Step</Button>
-        )}
-      </Button.Group>
-    </Box>
-  );
-};
-```