@ilo-org/react 0.0.17 → 0.1.0

package/src/stories/Loading.stories.tsx

@@ -1,103 +0,0 @@
-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,
-  argTypes: {
-    size: {
-      options: ["small", "large"],
-      control: { type: "select" },
-    },
-    status: {
-      options: ["idle", "loading", "loaded"],
-      control: { type: "select" },
-    },
-  },
-  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 LoadingSmall = LoadingTemplate.bind({});
-
-export const LoadedSmall = 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";
-
-LoadingSmall.args = loadingArgs.loadingsmall;
-LoadingSmall.storyName = "Loading - loading small";
-
-LoadedSmall.args = loadingArgs.loadedsmall;
-LoadedSmall.storyName = "Loading - loaded small";

package/src/stories/Notification.stories.tsx

@@ -1,176 +0,0 @@
-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. |`;
-
-const placementDoc = `
-By changing the \`placement\` prop you can set whether the Notification is displayed inline in the document flow, or highest in the document z-index as a dialog.
-
-| type   |  Description  |
-|----------|-------------|
-| \`dialog\` | The Notification appears highest in the document z-index, outside the doucment flow. |
-| \`inline\` | The Notification appears in the normal document flow. |`;
-
-/**
- * Notification Story
- *
- */
-export default {
-  title: "Components/Notification",
-  component: Notification,
-  argTypes: {
-    type: {
-      options: ["error", "info", "success", "warning"],
-      control: { type: "select" },
-    },
-    placement: {
-      options: ["dialog", "inline"],
-      control: { type: "select" },
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Notification component presents a dismissible alert. It can
-            appear as an inline alert, which appears in the normal flow of the
-            document, or it can appear as a dialog, highest in the document's
-            z-index.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Subheading>type Prop</Subheading>
-          <Description>{typeDoc}</Description>
-          <Subheading>placement Prop</Subheading>
-          <Description>{placementDoc}</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

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

package/src/stories/Profile.stories.tsx

@@ -1,84 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-  Subheading,
-} from "@storybook/addon-docs";
-import { Profile } from "../components/Profile";
-import { ProfileProps } from "../components/Profile/Profile.props";
-import profileArgs from "../components/Profile/Profile.args";
-
-const propsDoc = `
-The Profile has several optional elements: description, link, and role. Note that while \`avatar\` can display a placeholder image, this should be delivered via the API, so that it can be curated via the CMS, so it is required.
-
-| Prop  |  Description  |
-|----------|-------------|
-| \`description\` | A short plain-text description (e.g. a short bio) |
-| \`link\` | Label and URL for an optional link. |
-| \`role\` | A short plain-text phrase labelling the person's role. |
-`;
-
-/**
- * Profile Story
- *
- */
-export default {
-  title: "Components/Profile",
-  component: Profile,
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Profile component is used to display information about a person.
-          </Description>
-          <Primary />
-          <Subheading>Props</Subheading>
-          <Description>{propsDoc}</Description>
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof Profile>;
-
-/**
- * Profile Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const ProfileTemplate: Story<ProfileProps> = (args) => <Profile {...args} />;
-
-export const Basic = ProfileTemplate.bind({});
-
-export const HasAll = ProfileTemplate.bind({});
-
-export const HasDescription = ProfileTemplate.bind({});
-
-export const HasLink = ProfileTemplate.bind({});
-
-export const HasRole = ProfileTemplate.bind({});
-
-// enumerate the props for the variations on the Profile component
-Basic.args = profileArgs.basic;
-Basic.storyName = "Profile - Basic";
-
-HasAll.args = profileArgs.hasall;
-HasAll.storyName = "Profile - All Optional Props";
-
-HasDescription.args = profileArgs.hasdescription;
-HasDescription.storyName = "Profile - With Descriptoon";
-
-HasLink.args = profileArgs.haslink;
-HasLink.storyName = "Profile - With Link";
-
-HasRole.args = profileArgs.hasrole;
-HasRole.storyName = "Profile - With Role";

package/src/stories/ReadMore.stories.tsx

@@ -1,80 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Subheading,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-} from "@storybook/addon-docs";
-import { ReadMore } from "../components/ReadMore";
-import { ReadMoreProps } from "../components/ReadMore/ReadMore.props";
-import readMoreArgs from "../components/ReadMore/readMore.args";
-
-const stateDoc = `
-By changing the \`openatstart\` prop you can set whether it should display the full text or the excerpt on component load. By default this is set to \`false\`.
-
-| openatstart   |  Description  |
-|----------|-------------|
-| \`false\` | The "excerpt" text is displayed. |
-| \`true\` | The "fulltext" text is displayed. |`;
-
-/**
- * ReadMore Story
- *
- */
-export default {
-  title: "Components/ReadMore",
-  component: ReadMore,
-  argTypes: {},
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The ReadMore component display an excerpt in its "closed" state and
-            the full text in its "open" state. Displays text as HTML using the
-            RichText component.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Subheading>openatstart Prop</Subheading>
-          <Description>{stateDoc}</Description>
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof ReadMore>;
-
-/**
- * ReadMore Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const ReadMoreTemplate: Story<ReadMoreProps> = (args) => <ReadMore {...args} />;
-
-/**
- * ReadMore Instance
- *
- */
-export const BaseReadMore = ReadMoreTemplate.bind({});
-
-/**
- * ReadMore Instance - openatstart is true
- *
- */
-export const OpenedReadMore = ReadMoreTemplate.bind({});
-
-// enumerate the props for the read more component
-BaseReadMore.args = readMoreArgs.closedatstart;
-BaseReadMore.storyName = "ReadMore - default";
-
-OpenedReadMore.args = readMoreArgs.openedatstart;
-OpenedReadMore.storyName = "ReadMore - opened on component load";

package/src/stories/RichText.stories.tsx

@@ -1,59 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-} from "@storybook/addon-docs";
-import { RichText } from "../components/RichText";
-import { RichTextProps } from "../components/RichText/RichText.props";
-import richTextArgs from "../components/RichText/richText.args";
-
-/**
- * RichText Story
- *
- */
-export default {
-  title: "Components/RichText",
-  component: RichText,
-  argTypes: {},
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The rich text component displays HTML as composed in a WYSIWYG
-            editor.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof RichText>;
-
-/**
- * RichText Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const RichTextTemplate: Story<RichTextProps> = (args) => <RichText {...args} />;
-
-/**
- * RichText Instance
- *
- */
-export const BaseRichText = RichTextTemplate.bind({});
-
-// enumerate the props for the rich text component
-BaseRichText.args = richTextArgs.richtext;
-BaseRichText.storyName = "Rich Text";

package/src/stories/SearchField.stories.tsx

@@ -1,87 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-} from "@storybook/addon-docs";
-import { SearchField } from "../components/SearchField";
-import { Input } from "../components/Input";
-import { SearchFieldProps } from "../components/SearchField/SearchField.props";
-import SearchFieldArgs from "../components/SearchField/SearchField.args";
-
-/**
- * Empty Story
- *
- */
-export default {
-  title: "Components/SearchField",
-  component: SearchField,
-  argTypes: {},
-  subcomponents: {
-    Input,
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The SearchField component displays a single search input and a
-            button. It fires a callback function passed to it as the callback
-            prop onChange of the field, and another callback function onClick of
-            the button.
-          </Description>
-          <Primary />
-          <ArgsTable />
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof SearchField>;
-
-/**
- * SearchField Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const SearchFieldTemplate: Story<SearchFieldProps> = (args) => (
-  <SearchField {...args} />
-);
-
-export const SearchFieldDefault = SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldDefault.args = SearchFieldArgs.searchfield;
-SearchFieldDefault.storyName = "Default SearchField";
-
-export const SearchFieldError = SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldError.args = SearchFieldArgs.searchfielderror;
-SearchFieldError.storyName = "SearchField Error";
-
-export const SearchFieldDisabled = SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldDisabled.args = SearchFieldArgs.searchfielddisabled;
-SearchFieldDisabled.storyName = "Disabled SearchField";
-
-export const SearchFieldLabel = SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldLabel.args = SearchFieldArgs.searchfieldlabel;
-SearchFieldLabel.storyName = "SearchField with Label";
-
-export const SearchFieldHelper = SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldHelper.args = SearchFieldArgs.searchfieldhelper;
-SearchFieldHelper.storyName = "SearchField with Helper text";

package/src/stories/TableOfContents.stories.tsx

@@ -1,50 +0,0 @@
-import { Story, Meta } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-} from "@storybook/addon-docs";
-import { TableOfContents } from "../components/TableOfContents";
-import { TableOfContentsProps } from "../components/TableOfContents/TableOfContents.props";
-import tableOfContentsArgs from "../components/TableOfContents/TableOfContents.args";
-
-/**
- * Empty Story
- *
- */
-export default {
-  title: "Components/Table Of Contents",
-  component: TableOfContents,
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The Table Of Contents component displays a list of anchor links to
-            aid users navigating within a page.
-          </Description>
-          <Primary />
-          <Stories title="Examples"></Stories>
-        </>
-      ),
-    },
-  },
-} as Meta<typeof TableOfContents>;
-
-/**
- * TableOfContents Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const TableOfContentsTemplate: Story<TableOfContentsProps> = () => (
-  <TableOfContents {...tableOfContentsArgs.toc} />
-);
-
-export const TableOfContents1 = TableOfContentsTemplate.bind({});