@ilo-org/react 0.0.1

package/src/stories/Dropdown.stories.tsx

@@ -0,0 +1,85 @@
+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,
+  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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,129 @@
+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: {},
+  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";
+
+/**
+ * Article Hero Instance
+ *
+ */
+export const ArticleHero = HeroTemplate.bind({});
+
+// enumerate the props for the hero only option
+ArticleHero.args = heroArgs.articleHero;
+ArticleHero.storyName = "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";
+
+/**
+ * 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";
+
+/**
+ * Graphic Hero Instance
+ *
+ */
+export const GraphicHero = HeroTemplate.bind({});
+
+// enumerate the props for the hero only option
+GraphicHero.args = heroArgs.graphicHero;
+GraphicHero.storyName = "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";
+
+/**
+ * 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";

package/src/stories/Image.stories.tsx

@@ -0,0 +1,71 @@
+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";

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Introduction" />
+
+# ILO Design System
+
+<br />
+
+### Current Project Status: _Proof of Concept_
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.

package/src/stories/Link.stories.tsx

@@ -0,0 +1,99 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Link } from "../components/Link";
+import { LinkProps } from "../components/Link/Link.props";
+import linkArgs from "../components/Link/Link.args";
+
+const themeDoc = `
+By changing the \`theme\` prop you can change base coloring of the links. By default this is set to \`light\`.
+
+| Theme   |  Description  |
+|----------|-------------|
+| \`light\` | Link theme for a light background color. |
+| \`dark\` | Link theme for a dark background color. |
+| \`footer\` | Link theme for a dark background color. |
+`;
+
+/**
+ * Link Story
+ *
+ */
+export default {
+  title: "Components/Link",
+  component: Link,
+  argTypes: {},
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The link component creates an anchor link with a specific theme.
+          </Description>
+          <Primary />
+          <ArgsTable />
+          <Subheading>Theme Prop</Subheading>
+          <Description>{themeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Link>;
+
+/**
+ * Link Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const LinkTemplate: Story<LinkProps> = (args) => (
+  <Link {...args}>This is text for the link</Link>
+);
+
+/**
+ * Light Link Instance
+ *
+ */
+export const BaseLink = LinkTemplate.bind({});
+
+/**
+ * Dark Link Instance
+ *
+ */
+export const DarkLink = LinkTemplate.bind({});
+
+/**
+ * Footer Link Instance
+ *
+ */
+export const FooterLink = LinkTemplate.bind({});
+
+// enumerate the props for the light link.
+BaseLink.args = linkArgs.light;
+BaseLink.args.url = "https://www.google.com/";
+BaseLink.storyName = "Light Link";
+
+// enumerate the props dark link
+DarkLink.args = linkArgs.dark;
+DarkLink.parameters = {
+  backgrounds: { default: "dark" },
+};
+DarkLink.args.url = "https://www.wikipedia.org/";
+DarkLink.storyName = "Dark Link";
+
+// enumerate the props dark link
+FooterLink.args = linkArgs.footer;
+FooterLink.args.url = "https://www.weather.com/";
+FooterLink.storyName = "Footer Link";