@ilo-org/react 0.0.1

package/src/stories/Profile.stories.tsx

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

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

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

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

@@ -0,0 +1,50 @@
+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/TableOfContents",
+  component: TableOfContents,
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The TableOfContents 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({});

package/src/stories/Tag.stories.tsx

@@ -0,0 +1,194 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Tag, TagSet } from "../components/Tag";
+import { TagProps } from "../components/Tag/Tag.props";
+import tagSetArgs from "../components/Tag/TagSet.args";
+import tagArgs from "../components/Tag/Tag.args";
+
+const themeDoc = `
+By changing
+`;
+
+/**
+ * Tag Story
+ *
+ */
+export default {
+  title: "Components/Tag",
+  component: Tag,
+  argTypes: {},
+  parameters: {
+    componentSubtitle: "Component",
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The tag component creates an anchor tag with a specific theme.
+          </Description>
+          <Primary />
+          <ArgsTable />
+          <Subheading>Theme Prop</Subheading>
+          <Description>{themeDoc}</Description>
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Tag>;
+
+/**
+ * Tag Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const DisplayTagTemplate: Story<TagProps> = (args) => (
+  <TagSet {...tagSetArgs.tag} {...args}>
+    <Tag {...tagArgs.tag} type="display">
+      Test 1
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag2" type="display">
+      Test 2
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag3" type="display">
+      Test 3
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag4" type="display">
+      Test 4
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag5" type="display">
+      Test 5
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag6" type="display">
+      Test 6
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag7" type="display">
+      Test 7
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag8" type="display">
+      Test 8
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag9" type="display">
+      Test 9
+    </Tag>
+  </TagSet>
+);
+
+/**
+ * Tag Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const AnchorTagTemplate: Story<TagProps> = (args) => (
+  <TagSet {...tagSetArgs.tag} {...args}>
+    <Tag {...tagArgs.tag} url="https://www.google.com/" type="anchor">
+      Test 1
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag2" url="https://www.google.com/" type="anchor">
+      Test 2
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag3" url="https://www.google.com/" type="anchor">
+      Test 3
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag4" url="https://www.google.com/" type="anchor">
+      Test 4
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag5" url="https://www.google.com/" type="anchor">
+      Test 5
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag6" url="https://www.google.com/" type="anchor">
+      Test 6
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag7" url="https://www.google.com/" type="anchor">
+      Test 7
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag8" url="https://www.google.com/" type="anchor">
+      Test 8
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag9" url="https://www.google.com/" type="anchor">
+      Test 9
+    </Tag>
+  </TagSet>
+);
+
+/**
+ * Button Tag Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const ButtonTagTemplate: Story<TagProps> = (args) => (
+  <TagSet {...tagSetArgs.buttonTag} {...args}>
+    <Tag {...tagArgs.tag} id="tag1" url="https://www.google.com/" type="button">
+      Test 1
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag2" url="https://www.google.com/" type="button">
+      Test 2
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag3" url="https://www.google.com/" type="button">
+      Test 3
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag4" url="https://www.google.com/" type="button">
+      Test 4
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag5" url="https://www.google.com/" type="button">
+      Test 5
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag6" url="https://www.google.com/" type="button">
+      Test 6
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag7" url="https://www.google.com/" type="button">
+      Test 7
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag8" url="https://www.google.com/" type="button">
+      Test 8
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag9" url="https://www.google.com/" type="button">
+      Test 9
+    </Tag>
+  </TagSet>
+);
+
+/**
+ * Display Tag Instance
+ *
+ */
+export const DisplayTag = DisplayTagTemplate.bind({});
+
+/**
+ * Anchor Tag Instance
+ *
+ */
+export const AnchorTag = AnchorTagTemplate.bind({});
+
+/**
+ * Button Tag Instance
+ *
+ */
+export const ButtonTag = ButtonTagTemplate.bind({});
+
+// enumerate the props for the light tag.
+DisplayTag.args = tagSetArgs.tag;
+DisplayTag.storyName = "Display Tag";
+
+// enumerate the props for the light tag.
+AnchorTag.args = tagSetArgs.tag;
+AnchorTag.storyName = "Anchor Tag";
+
+// enumerate the props for the light tag.
+ButtonTag.args = tagSetArgs.buttonTag;
+ButtonTag.storyName = "Button Tag";

package/src/stories/Tooltip.stories.tsx

@@ -0,0 +1,83 @@
+import { Story, Meta } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Tooltip } from "../components/Tooltip";
+import { TooltipProps } from "../components/Tooltip/Tooltip.props";
+import tooltipArgs from "../components/Tooltip/Tooltip.args";
+
+const themeDoc = `
+By changing the \`theme\` prop you can set whether the tooltip has a light or dark theme.`;
+
+/**
+ * Tooltip Story
+ *
+ */
+export default {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  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 Tooltip>;
+
+/**
+ * Tooltip Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const TooltipTemplate: Story<TooltipProps> = (args) => (
+  <Tooltip {...args}>
+    <a href="https://www.google.com/">This is testing for the tooltip</a>
+  </Tooltip>
+);
+
+/**
+ * Tooltip Instance
+ *
+ */
+export const Light = TooltipTemplate.bind({});
+
+export const Dark = TooltipTemplate.bind({});
+
+export const LightIcon = TooltipTemplate.bind({});
+
+export const DarkIcon = TooltipTemplate.bind({});
+
+// enumerate the props for the tooltip
+Light.args = tooltipArgs.light;
+Light.storyName = "Tooltip - Light";
+
+Dark.args = tooltipArgs.dark;
+Dark.storyName = "Tooltip - Dark";
+
+LightIcon.args = tooltipArgs.lighticon;
+LightIcon.storyName = "Tooltip - Light, with Icon";
+
+DarkIcon.args = tooltipArgs.darkicon;
+DarkIcon.storyName = "Tooltip - Dark, with Icon";