@ilo-org/react 0.0.17 → 0.1.0

package/src/stories/Dropdown.stories.tsx

@@ -1,91 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-  Subheading,
-} from "@storybook/addon-docs";
-import { Dropdown } from "../components/Dropdown";
-import { DropdownProps } from "../components/Dropdown/Dropdown.props";
-import dropdownArgs from "../components/Dropdown/Dropdown.args";
-
-const propsDoc = `
-The Dropdown receives a prop for 'options,' which has three parameters:
-
-| Prop  |  Description  |
-|----------|-------------|
-| \`disabled\` | Is *this* option disabled? |
-| \`label\` | The human-readable label for the option. |
-| \`value\` | The value of the option which is what is submitted with the form. |
-`;
-
-/**
- * Profile Story
- *
- */
-export default {
-  title: "Components/Dropdown",
-  component: Dropdown,
-  argTypes: {
-    disabled: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Dropdown displays a select element with options, and is most
-            commonly used in forms.
-          </Description>
-          <Primary />
-          <Subheading>Props</Subheading>
-          <Description>{propsDoc}</Description>
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Dropdown>;
-
-/**
- * Dropdown Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const DropdownTemplate: Story<DropdownProps> = (args) => <Dropdown {...args} />;
-
-export const Basic = DropdownTemplate.bind({});
-
-export const HasError = DropdownTemplate.bind({});
-
-export const HasHelper = DropdownTemplate.bind({});
-
-export const HasTooltip = DropdownTemplate.bind({});
-
-export const IsDisabled = DropdownTemplate.bind({});
-
-// enumerate the props for the variations on the Dropdown component
-Basic.args = dropdownArgs.basic;
-Basic.storyName = "Dropdown - Basic";
-
-HasError.args = dropdownArgs.haserror;
-HasError.storyName = "Dropdown - Has Error";
-
-HasHelper.args = dropdownArgs.hashelper;
-HasHelper.storyName = "Dropdown - Has Helper";
-
-HasTooltip.args = dropdownArgs.hastooltip;
-HasTooltip.storyName = "Dropdown - Has Tooltip";
-
-IsDisabled.args = dropdownArgs.isdisabled;
-IsDisabled.storyName = "Dropdown - Is Disabled";

package/src/stories/Empty.stories.tsx

@@ -1,48 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-} from "@storybook/addon-docs";
-import { Empty } from "../components/Empty";
-import { EmptyProps } from "../components/Empty/Empty.props";
-import emptyArgs from "../components/Empty/Empty.args";
-
-/**
- * Empty Story
- *
- */
-export default {
-  title: "Components/Empty",
-  component: Empty,
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Empty component receives no props. It it displayed on page load
-            as a placeholder component while data loads.
-          </Description>
-          <Primary />
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Empty>;
-
-/**
- * Empty Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const EmptyTemplate: Story<EmptyProps> = () => <Empty {...emptyArgs.empty1} />;
-
-export const Empty1 = EmptyTemplate.bind({});

package/src/stories/Form.stories.tsx

@@ -1,67 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-} from "@storybook/addon-docs";
-import { Form } from "../components/Form";
-import { FormProps } from "../components/Form/Form.props";
-import FormArgs from "../components/Form/Form.args";
-
-/**
- * Form Story
- *
- */
-export default {
-  title: "Components/Form",
-  component: Form,
-  argTypes: {},
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>The Form component displays a form.</Description>
-          <Primary />
-          <ArgsTable />
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Form>;
-
-/**
- * Form Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const FormTemplate: Story<FormProps> = (args) => <Form {...args} />;
-
-export const FormDefault = FormTemplate.bind({});
-
-export const FormHasHelper = FormTemplate.bind({});
-
-export const FormHasError = FormTemplate.bind({});
-
-export const FormHasTooltip = FormTemplate.bind({});
-
-// enumerate the props for the default search field
-FormDefault.args = FormArgs.basic;
-FormDefault.storyName = "Default Form";
-
-FormHasHelper.args = FormArgs.hashelper;
-FormHasHelper.storyName = "Default Form with Helper Text";
-
-FormHasError.args = FormArgs.haserror;
-FormHasError.storyName = "Default Form with errors";
-
-FormHasTooltip.args = FormArgs.hastooltip;
-FormHasTooltip.storyName = "Default Form with Tooltips";

package/src/stories/Heading.stories.tsx

@@ -1,191 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  Subheading,
-} from "@storybook/addon-docs";
-import { Heading } from "../components/Heading";
-import { HeadingProps } from "../components/Heading/Heading.props";
-import headingArgs from "../components/Heading/Heading.args";
-
-const headingDoc = `
-By changing the \`level\` prop you can use different heading levels. The default heading level if not specified is \`h3\`.
-
-| level   |  Description  |
-|----------|-------------|
-| \`h1\` | heading level 1. |
-| \`h2\` | heading level 2. |
-| \`h3\` | heading level 3. |
-| \`h4\` | heading level 4. |
-| \`h5\` | heading level 5. |
-| \`h6\` | heading level 6. |
-`;
-
-const typeDoc = `
-By changing the \`type\` prop you can change the color of the heading. If not specified, the heading will inherit the color.
-
-| type |  Description  |
-|----------|-------------|
-| \`default\` | Set the heading color to the base/default label theme. |
-| \`actionable\` | set the heading color to the actionable label theme. |
-| \`light\` | Set the heading color to the light label theme. |
-`;
-
-/**
- * Accordion Story
- *
- */
-export default {
-  title: "Components/Heading",
-  component: Heading,
-  argTypes: {
-    level: {
-      control: "text",
-    },
-    className: {
-      control: "text",
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Primary />
-          <ArgsTable />
-          <Subheading>Heading Level Prop</Subheading>
-          <Description>{headingDoc}</Description>
-          <Subheading>Color Prop</Subheading>
-          <Description>{typeDoc}</Description>
-          <Stories title="Examples" />
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Heading>;
-
-/**
- * Heading 1 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading1Template: Story<HeadingProps> = () => (
-  <Heading {...headingArgs.heading1} />
-);
-
-/**
- * Heading 2 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading2Template: Story<HeadingProps> = () => (
-  <Heading {...headingArgs.heading2} />
-);
-
-/**
- * Heading 3 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading3Template: Story<HeadingProps> = () => (
-  <Heading {...headingArgs.heading3} />
-);
-
-/**
- * Heading 4 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading4Template: Story<HeadingProps> = () => (
-  <Heading {...headingArgs.heading4} />
-);
-
-/**
- * Heading 5 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading5Template: Story<HeadingProps> = () => (
-  <Heading {...headingArgs.heading5} />
-);
-
-/**
- * Heading 6 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading6Template: Story<HeadingProps> = () => (
-  <Heading {...headingArgs.heading6} />
-);
-
-/**
- * Heading 1 Instance
- *
- */
-export const Heading1 = Heading1Template.bind({});
-
-/**
- * Heading 2 Instance
- *
- */
-export const Heading2 = Heading2Template.bind({});
-
-/**
- * Heading 3 Instance
- *
- */
-export const Heading3 = Heading3Template.bind({});
-
-/**
- * Heading 4 Instance
- *
- */
-export const Heading4 = Heading4Template.bind({});
-
-/**
- * Heading 5 Instance
- *
- */
-export const Heading5 = Heading5Template.bind({});
-
-/**
- * Heading 6 Instance
- *
- */
-export const Heading6 = Heading6Template.bind({});
-
-// enumerate the props for the heading 1.
-Heading1.storyName = "Heading Level 1";
-
-// enumerate the props
-Heading2.storyName = "Heading Level 2";
-
-// enumerate the props
-Heading3.storyName = "Heading Level 3";
-
-// enumerate the props
-Heading4.storyName = "Heading Level 4";
-
-// enumerate the props
-Heading5.storyName = "Heading Level 5";
-
-// enumerate the props
-Heading6.storyName = "Heading Level 6";

package/src/stories/Hero.stories.tsx

@@ -1,194 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-} from "@storybook/addon-docs";
-import { Hero } from "../components/Hero";
-import { HeroProps } from "../components/Hero/Hero.props";
-import heroArgs from "../components/Hero/Hero.args";
-
-/**
- * Hero Story
- *
- */
-export default {
-  title: "Components/Hero",
-  component: Hero,
-  argTypes: {
-    theme: {
-      options: ["dark", "light"],
-      control: { type: "select" },
-    },
-    types: {
-      options: [
-        "publication",
-        "graphic",
-        "article",
-        "portal",
-        "project",
-        "home",
-      ],
-      control: { type: "select" },
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Hero component displays an hero, along with an hero credit and
-            optional caption.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Hero>;
-
-/**
- * HeroTemplate
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const HeroTemplate: Story<HeroProps> = (args) => <Hero {...args} />;
-
-/**
- * Home Hero Instance
- *
- */
-export const HomeHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-HomeHero.args = heroArgs.homeHero;
-HomeHero.storyName = "Home Hero";
-HomeHero.parameters = {
-  docs: {
-    description: {
-      story: "The Home Hero...",
-    },
-  },
-};
-
-/**
- * Article Hero Instance
- *
- */
-export const ArticleHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-ArticleHero.args = heroArgs.articleHero;
-ArticleHero.storyName = "Article Hero";
-ArticleHero.parameters = {
-  docs: {
-    description: {
-      story: "The Article Hero...",
-    },
-  },
-};
-
-/**
- * Article Centered Hero Instance
- *
- */
-export const ArticleCenteredHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-ArticleCenteredHero.args = heroArgs.articleCenteredHero;
-ArticleCenteredHero.storyName = "Article Centered Hero";
-ArticleCenteredHero.parameters = {
-  docs: {
-    description: {
-      story: "The Article Centered Hero...",
-    },
-  },
-};
-
-/**
- * Article No-Image Hero Instance
- *
- */
-export const ArticleNoImageHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-ArticleNoImageHero.args = heroArgs.articleNoImageHero;
-ArticleNoImageHero.storyName = "Article No Image Hero";
-ArticleNoImageHero.parameters = {
-  docs: {
-    description: {
-      story: "The Article No Image Hero...",
-    },
-  },
-};
-
-/**
- * Graphic Hero Instance
- *
- */
-export const GraphicHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-GraphicHero.args = heroArgs.graphicHero;
-GraphicHero.storyName = "Graphic Hero";
-GraphicHero.parameters = {
-  docs: {
-    description: {
-      story: "The Graphic Hero...",
-    },
-  },
-};
-
-/**
- * Portal Hero Instance
- *
- */
-export const PortalHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-PortalHero.args = heroArgs.portalHero;
-PortalHero.storyName = "Portal Hero";
-PortalHero.parameters = {
-  docs: {
-    description: {
-      story: "The Portal Hero...",
-    },
-  },
-};
-
-/**
- * Project Hero Instance
- *
- */
-export const ProjectHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-ProjectHero.args = heroArgs.projectHero;
-ProjectHero.storyName = "Project Hero";
-
-/**
- * Publication Hero Instance
- *
- */
-export const PublicationHero = HeroTemplate.bind({});
-
-// enumerate the props for the hero only option
-PublicationHero.args = heroArgs.publicationHero;
-PublicationHero.storyName = "Publication Hero";
-PublicationHero.parameters = {
-  docs: {
-    description: {
-      story: "The Publication Hero...",
-    },
-  },
-};

package/src/stories/Image.stories.tsx

@@ -1,71 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  Subheading,
-} from "@storybook/addon-docs";
-import { Image } from "../components/Image";
-import { ImageProps } from "../components/Image/Image.props";
-import imageArgs from "../components/Image/Image.args";
-
-const urlDoc = `
-The \`url\` prop expects an array of object each containing a \`breakpoint\` and a \`src\` prop. There must be a minimuim of one of these, but preferably multiple items corresponding to the same image at different raw sizes, so that responsive images can be displayed.
-
-| Prop   |  Description  |
-|----------|-------------|
-| \`breakpoint\` | The min-width at which to start displaying this size of the image - the first item in the array should always have a breakpoint value of 0 |
-| \`src\` | The image src to display at this breakpoint |
-`;
-
-/**
- * Button Story
- *
- */
-export default {
-  title: "Components/Image",
-  component: Image,
-  argTypes: {},
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Image component displays an image, along with an image credit
-            and optional caption.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Subheading>URL Prop</Subheading>
-          <Description>{urlDoc}</Description>
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Image>;
-
-/**
- * ImageTemplate
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const ImageTemplate: Story<ImageProps> = (args) => <Image {...args} />;
-
-/**
- * Image Only Instance
- *
- */
-export const ImageMedia = ImageTemplate.bind({});
-
-// enumerate the props for the image only option
-ImageMedia.args = imageArgs.image;
-ImageMedia.storyName = "Image";