@ilo-org/react 0.0.1

package/src/stories/LinkList.stories.tsx

@@ -0,0 +1,68 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+} from "@storybook/addon-docs";
+import { LinkList } from "../components/LinkList";
+import { LinkListProps } from "../components/LinkList/LinkList.props";
+import profileArgs from "../components/LinkList/LinkList.args";
+
+/**
+ * LinkList Story
+ *
+ */
+export default {
+  title: "Components/LinkList",
+  component: LinkList,
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The Link List component is used to display a meaingfully-grouped set
+            of links.
+          </Description>
+          <Primary />
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof LinkList>;
+
+/**
+ * LinkList Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const LinkListTemplate: Story<LinkListProps> = (args) => <LinkList {...args} />;
+
+export const Basic = LinkListTemplate.bind({});
+
+export const WithIndented = LinkListTemplate.bind({});
+
+export const WithSections = LinkListTemplate.bind({});
+
+export const WithSectionsIndented = LinkListTemplate.bind({});
+
+// enumerate the props for the variations on the LinkList component
+Basic.args = profileArgs.basic;
+Basic.storyName = "LinkList - Basic";
+
+WithIndented.args = profileArgs.withindented;
+WithIndented.storyName = "LinkList - With Some Indented Items";
+
+WithSections.args = profileArgs.withsections;
+WithSections.storyName = "LinkList - With Sections";
+
+WithSectionsIndented.args = profileArgs.withsectionsindented;
+WithSectionsIndented.storyName =
+  "LinkList - With Sections and Some Indented Items";

package/src/stories/List.stories.tsx

@@ -0,0 +1,246 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { List, ListItem } from "../components/List";
+import { ListProps } from "../components/List/List.props";
+import listArgs from "../components/List/List.args";
+
+const sizeDoc = `
+By changing the \`ordered\` prop you can use switch from a \`<ol>\` to a \`<ul>\`
+
+| ordered   |  Description  |
+|----------|-------------|
+| \`ordered\` | make a \`<ol>\` |
+| \`unordered\` | make a \`<ul>\`   |
+| \`unstyled\` | make a \`<ul>\` without markers  |
+`;
+
+/**
+ * List Story
+ *
+ */
+export default {
+  title: "Components/List",
+  component: List,
+  argTypes: {},
+  subcomponents: {
+    ListItem,
+  },
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The list component allows the user to show and hide sections of
+            related content on a page. Click the lists below to expand/collapse
+            the list content.
+          </Description>
+          <Primary />
+          <ArgsTable />
+          <Subheading>Size Prop</Subheading>
+          <Description>{sizeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof List>;
+
+/**
+ * Ordered Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const OrderedTemplate: Story<ListProps> = () => (
+  <List {...listArgs.ordered}>
+    <ListItem id="ordered1">
+      <p>Arabica. Arabica is the most popular type of coffee, hands down.</p>
+    </ListItem>
+    <ListItem id="ordered2">
+      <p>
+        Robusta. While Arabica is the most popular, Robusta is cheaper and
+        stronger.
+      </p>
+    </ListItem>
+    <ListItem id="ordered3">
+      <p>
+        Black coffee is as simple as it gets with ground coffee beans steeped in
+        hot water, served warm.
+      </p>
+    </ListItem>
+    <ListItem id="ordered4">
+      <p>
+        Latte. Made with espresso and hot steamed milk, milkier than a
+        cappuccino.
+      </p>
+    </ListItem>
+    <ListItem id="ordered5">
+      <p>
+        Cappuccino. Made with espresso and milk that has been frothed up with
+        pressurized steam.
+      </p>
+    </ListItem>
+  </List>
+);
+
+/**
+ * Unordered Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const UnorderedTemplate: Story<ListProps> = () => (
+  <List {...listArgs.unordered}>
+    <ListItem id="unordered1">
+      <p>Arabica. Arabica is the most popular type of coffee, hands down.</p>
+    </ListItem>
+    <ListItem id="unordered2">
+      <p>
+        Robusta. While Arabica is the most popular, Robusta is cheaper and
+        stronger.
+      </p>
+    </ListItem>
+    <ListItem id="unordered3">
+      <p>
+        Black coffee is as simple as it gets with ground coffee beans steeped in
+        hot water, served warm.
+      </p>
+    </ListItem>
+    <ListItem id="unordered4">
+      <p>
+        Latte. Made with espresso and hot steamed milk, milkier than a
+        cappuccino.
+      </p>
+    </ListItem>
+    <ListItem id="unordered5">
+      <p>
+        Cappuccino. Made with espresso and milk that has been frothed up with
+        pressurized steam.
+      </p>
+    </ListItem>
+  </List>
+);
+
+/**
+ * Unstyled Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const UnstyledTemplate: Story<ListProps> = () => (
+  <List {...listArgs.unstyled}>
+    <ListItem id="unstyled1">
+      <p>Arabica. Arabica is the most popular type of coffee, hands down.</p>
+    </ListItem>
+    <ListItem id="unstyled1">
+      <p>
+        <b>With milk added.</b>
+      </p>
+    </ListItem>
+    <ListItem id="unstyled2">
+      <p>
+        Robusta. While Arabica is the most popular, Robusta is cheaper and
+        stronger.
+      </p>
+    </ListItem>
+    <ListItem id="unstyled3">
+      <p>
+        Black coffee is as simple as it gets with ground coffee beans steeped in
+        hot water, served warm.
+      </p>
+    </ListItem>
+    <ListItem id="unstyled4">
+      <p>
+        Latte. Made with espresso and hot steamed milk, milkier than a
+        cappuccino.
+      </p>
+    </ListItem>
+    <ListItem id="unstyled5">
+      <p>
+        Cappuccino. Made with espresso and milk that has been frothed up with
+        pressurized steam.
+      </p>
+    </ListItem>
+  </List>
+);
+
+/**
+ * Horizontal Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const HorizontalTemplate: Story<ListProps> = () => (
+  <List {...listArgs.horizontal}>
+    <ListItem id="horizontal1">
+      <p>Arabica</p>
+    </ListItem>
+    <ListItem id="horizontal2">
+      <p>Robusta</p>
+    </ListItem>
+    <ListItem id="horizontal3">
+      <p>Black coffee</p>
+    </ListItem>
+    <ListItem id="horizontal4">
+      <p>Latte</p>
+    </ListItem>
+    <ListItem id="horizontal5">
+      <p>Cappuccino</p>
+    </ListItem>
+  </List>
+);
+
+/**
+ * Ordered List Instance
+ *
+ */
+export const ListOrdered = OrderedTemplate.bind({});
+
+/**
+ * Unordered List Instance
+ *
+ */
+export const ListUnordered = UnorderedTemplate.bind({});
+
+/**
+ * Unstyled List Instance
+ *
+ */
+export const ListUnstyled = UnstyledTemplate.bind({});
+
+/**
+ * Horizontal List Instance
+ *
+ */
+export const ListHorizontal = HorizontalTemplate.bind({});
+
+// enumerate the props for the ordered list.
+ListOrdered.args = listArgs.ordered;
+ListOrdered.storyName = "Ordered List";
+
+// enumerate the props
+ListUnordered.args = listArgs.unordered;
+ListUnordered.storyName = "Unordered List";
+
+// enumerate the props
+ListUnstyled.args = listArgs.unstyled;
+ListUnstyled.storyName = "Unstyled List";
+
+// enumerate the props
+ListHorizontal.args = listArgs.horizontal;
+ListHorizontal.storyName = "Horizontal List";

package/src/stories/Loading.stories.tsx

@@ -0,0 +1,103 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Loading } from "../components/Loading";
+import { LoadingProps } from "../components/Loading/Loading.props";
+import loadingArgs from "../components/Loading/Loading.args";
+
+const statusDoc = `
+By changing the \`status\` prop you can change whether the Loading component is displaying the spinner, the completed state, or nothing at all.
+
+| type   |  Description  |
+|----------|-------------|
+| \`idle\` | The Loading component is idle and displays nothing. For screen readers, the component must be on the page before the loading state is invoked. |
+| \`loading\` | The Loading component displays the spinner graphic and the loading message. |
+| \`loaded\` | The Loading component displays the completed message and graphic. |`;
+
+const sizeDoc = `
+By changing the \`size\` prop you can change whether the Loading component appears as the small or large design.
+
+| type   |  Description  |
+|----------|-------------|
+| \`small\` | The Loading component displays the small design |
+| \`large\` | The Loading component displays the large design |`;
+
+/**
+ * Loading Story
+ *
+ */
+export default {
+  title: "Components/Loading",
+  component: Loading,
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The Loading component displays a loading state. Status is passed to
+            it via props, along with size setting.
+          </Description>
+          <Primary />
+          <Subheading>status Prop</Subheading>
+          <Description>{statusDoc}</Description>
+          <Subheading>size Prop</Subheading>
+          <Description>{sizeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Loading>;
+
+/**
+ * Loading Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const LoadingTemplate: Story<LoadingProps> = (args) => <Loading {...args} />;
+
+export const BaseLoading = LoadingTemplate.bind({});
+
+export const LoadingLarge = LoadingTemplate.bind({});
+
+export const LoadedLarge = LoadingTemplate.bind({});
+
+export const IdleLarge = LoadingTemplate.bind({});
+
+export const LoadingSmall = LoadingTemplate.bind({});
+
+export const LoadedSmall = LoadingTemplate.bind({});
+
+export const IdleSmall = LoadingTemplate.bind({});
+
+BaseLoading.args = loadingArgs.loadinglarge;
+BaseLoading.storyName = "Loading - loading large";
+
+LoadingLarge.args = loadingArgs.loadinglarge;
+LoadingLarge.storyName = "Loading - loading large";
+
+LoadedLarge.args = loadingArgs.loadedlarge;
+LoadedLarge.storyName = "Loading - loaded large";
+
+IdleLarge.args = loadingArgs.idlelarge;
+IdleLarge.storyName = "Loading - idle large";
+
+LoadingSmall.args = loadingArgs.loadingsmall;
+LoadingSmall.storyName = "Loading - loading small";
+
+LoadedSmall.args = loadingArgs.loadedsmall;
+LoadedSmall.storyName = "Loading - loaded small";
+
+IdleSmall.args = loadingArgs.idlesmall;
+IdleSmall.storyName = "Loading - idle small";

package/src/stories/Notification.stories.tsx

@@ -0,0 +1,154 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Subheading,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+} from "@storybook/addon-docs";
+import { Notification } from "../components/Notification";
+import { NotificationProps } from "../components/Notification/Notification.props";
+import notificationArgs from "../components/Notification/Notification.args";
+
+const typeDoc = `
+By changing the \`type\` prop you can set which icon to use with the Notification.
+
+| type   |  Description  |
+|----------|-------------|
+| \`error\` | The Notification alerts user to an error. Border is red with an error icon. |
+| \`info\` | The Notification alerts user to new information. Border is blue with an info icon. |
+| \`success\` | The Notification alerts user to an operation's success. Border is green with a success icon. |
+| \`warning\` | The Notification alerts user to a warning. Border is yellow with a warning icon. |`;
+
+/**
+ * Notification Story
+ *
+ */
+export default {
+  title: "Components/Notification",
+  component: Notification,
+  argTypes: {},
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The Notification component presents a dismissible alert.
+          </Description>
+          <Primary />
+          <ArgsTable />
+          <Subheading>type Prop</Subheading>
+          <Description>{typeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Notification>;
+
+/**
+ * Notification Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const NotificationTemplate: Story<NotificationProps> = (args) => (
+  <Notification {...args} />
+);
+
+/**
+ * Notification Instance without CTA
+ *
+ */
+export const BaseNotification = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - CTA is populated
+ *
+ */
+export const NotificationWithCTA = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - error
+ *
+ */
+export const NotificationError = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - success
+ *
+ */
+export const NotificationSuccess = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - warning
+ *
+ */
+export const NotificationWarning = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - info, as dialog
+ *
+ */
+export const DialogNotification = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - CTA is populated, as dialog
+ *
+ */
+export const DialogWithCTA = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - error, as dialog
+ *
+ */
+export const DialogError = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - success, as dialog
+ *
+ */
+export const DialogSuccess = NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - warning, as dialog
+ *
+ */
+export const DialogWarning = NotificationTemplate.bind({});
+
+// enumerate the props for the read more component
+BaseNotification.args = notificationArgs.nocta;
+BaseNotification.storyName = "Notification - info";
+
+NotificationWithCTA.args = notificationArgs.hascta;
+NotificationWithCTA.storyName = "Notification - has call to action";
+
+NotificationError.args = notificationArgs.error;
+NotificationError.storyName = "Notification - error";
+
+NotificationSuccess.args = notificationArgs.success;
+NotificationSuccess.storyName = "Notification - success";
+
+NotificationWarning.args = notificationArgs.warning;
+NotificationWarning.storyName = "Notification - warning";
+
+DialogNotification.args = notificationArgs.infodialog;
+DialogNotification.storyName = "Notification - info dialog";
+
+DialogWithCTA.args = notificationArgs.hasctadialog;
+DialogWithCTA.storyName = "Notification - dialog, has call to action";
+
+DialogError.args = notificationArgs.errordialog;
+DialogError.storyName = "Notification - error dialog";
+
+DialogSuccess.args = notificationArgs.successdialog;
+DialogSuccess.storyName = "Notification - success dialog";
+
+DialogWarning.args = notificationArgs.warningdialog;
+DialogWarning.storyName = "Notification - warning dialog";

package/src/stories/Pagination.stories.tsx

@@ -0,0 +1,63 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Subheading,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+} from "@storybook/addon-docs";
+import { Pagination } from "../components/Pagination";
+import { PaginationProps } from "../components/Pagination/Pagination.props";
+import paginationArgs from "../components/Pagination/Pagination.args";
+
+const typeDoc = `
+Generic pagination component with a first, previous, last and next button`;
+
+/**
+ * Pagination Story
+ *
+ */
+export default {
+  title: "Components/Pagination",
+  component: Pagination,
+  argTypes: {},
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>The Pagination component</Description>
+          <Primary />
+          <ArgsTable />
+          <Subheading>type Prop</Subheading>
+          <Description>{typeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Pagination>;
+
+/**
+ * Pagination Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const PaginationTemplate: Story<PaginationProps> = (args) => (
+  <Pagination {...args} />
+);
+
+/**
+ * Pagination Instance without CTA
+ *
+ */
+export const BasePagination = PaginationTemplate.bind({});
+
+BasePagination.args = paginationArgs.pagination;
+BasePagination.storyName = "Pagination";