@ilo-org/react 0.13.0 → 0.14.0

package/src/stories/LinkList/LinkList.args.ts

@@ -0,0 +1,190 @@
+import { LinkListProps } from "../../components/LinkList/LinkList.props";
+
+const basic: LinkListProps = {
+  headline: "Link List Headline",
+  linkgroup: [
+    {
+      links: [
+        {
+          label: "Link One",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Two",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Three",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Four",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Five Is Much Longer",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+  ],
+};
+
+const withindented: LinkListProps = {
+  headline: "Link List Headline",
+  linkgroup: [
+    {
+      links: [
+        {
+          label: "Link One",
+          url: "https://www.ilo.org",
+        },
+        {
+          indented: true,
+          label: "Link Two",
+          url: "https://www.ilo.org",
+        },
+        {
+          indented: true,
+          label: "Link Three",
+          url: "https://www.ilo.org",
+        },
+        {
+          indented: true,
+          label: "Link Four",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Five Is Much Longer",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+  ],
+};
+
+const withsections: LinkListProps = {
+  headline: "Link List Headline",
+  linkgroup: [
+    {
+      headline: "Section Headline",
+      links: [
+        {
+          label: "Link One",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Two",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Three",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Four",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Five Is Much Longer",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+    {
+      headline: "Section 2 Headline",
+      links: [
+        {
+          label: "Section 2 Link One",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Section 2 Link Two",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Section 2 Link Three",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Section 2 Link Four",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Section 2 Link Five",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+  ],
+};
+
+const withsectionsindented: LinkListProps = {
+  headline: "Link List Headline",
+  linkgroup: [
+    {
+      headline: "Section Headline",
+      links: [
+        {
+          indented: true,
+          label: "Link One",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Two",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Three",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Link Four",
+          url: "https://www.ilo.org",
+        },
+        {
+          indented: true,
+          label: "Link Five Is Much Longer",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+    {
+      headline: "Section 2 Headline",
+      links: [
+        {
+          label: "Section 2 Link One",
+          url: "https://www.ilo.org",
+        },
+        {
+          indented: true,
+          label: "Section 2 Link Two",
+          url: "https://www.ilo.org",
+        },
+        {
+          indented: true,
+          label: "Section 2 Link Three",
+          url: "https://www.ilo.org",
+        },
+        {
+          indented: true,
+          label: "Section 2 Link Four",
+          url: "https://www.ilo.org",
+        },
+        {
+          label: "Section 2 Link Five",
+          url: "https://www.ilo.org",
+        },
+      ],
+    },
+  ],
+};
+
+const LinkListArgs = {
+  basic,
+  withindented,
+  withsections,
+  withsectionsindented,
+};
+
+export default LinkListArgs;

package/src/stories/LinkList/LinkList.stories.tsx

@@ -0,0 +1,60 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { Title, Description, Primary, Stories } from "@storybook/addon-docs";
+import { LinkList } from "../../components/LinkList";
+import { LinkListProps } from "../../components/LinkList/LinkList.props";
+import linkListArgs from "./LinkList.args";
+
+const LinkListMeta: Meta<typeof LinkList> = {
+  title: "Components/Navigation/LinkList",
+  component: LinkList,
+  tags: ["autodocs"],
+  argTypes: {
+    theme: {
+      options: ["light", "dark"],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Link List component is used to display a meaingfully-grouped set
+            of links.
+          </Description>
+          <Primary />
+          <Stories title="Examples"></Stories>
+        </>
+      ),
+    },
+  },
+};
+
+export default LinkListMeta;
+
+const LinkListTemplate: StoryFn<LinkListProps> = (args) => (
+  <LinkList {...args} />
+);
+
+export const Basic: StoryFn<LinkListProps> = LinkListTemplate.bind({});
+
+export const WithIndented: StoryFn<LinkListProps> = LinkListTemplate.bind({});
+
+export const WithSections: StoryFn<LinkListProps> = LinkListTemplate.bind({});
+
+export const WithSectionsIndented: StoryFn<LinkListProps> =
+  LinkListTemplate.bind({});
+
+// enumerate the props for the variations on the LinkList component
+Basic.args = linkListArgs.basic;
+Basic.storyName = "Basic";
+
+WithIndented.args = linkListArgs.withindented;
+WithIndented.storyName = "Indentation";
+
+WithSections.args = linkListArgs.withsections;
+WithSections.storyName = "Sections";
+
+WithSectionsIndented.args = linkListArgs.withsectionsindented;
+WithSectionsIndented.storyName = "Sections and indentation";

package/src/stories/List/List.stories.tsx

@@ -0,0 +1,167 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Description,
+  Primary,
+  ArgTypes,
+  Stories,
+  Subheading,
+} from "@storybook/blocks";
+import { List, ListItem } from "../../components/List";
+import { ListProps } from "../../components/List/List.props";
+
+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  |
+`;
+
+const ListMeta: Meta<typeof List> = {
+  title: "Components/Content/List",
+  tags: ["autodocs"],
+  component: List,
+  argTypes: {
+    alignment: {
+      options: ["horizontal", "default"],
+      control: { type: "select" },
+    },
+    ordered: {
+      options: ["ordered", "unordered", "unstyled"],
+      control: { type: "select" },
+    },
+  },
+  subcomponents: {
+    ListItem,
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The List component renders a styled list of text items. In addition
+            to the List styles made available in the RichText component, the
+            List component also includes unstyled and horizontally aligned
+            lists.
+          </Description>
+          <Primary />
+          <Subheading>Size Prop</Subheading>
+          <Description>{sizeDoc}</Description>
+          <Stories title="Examples"></Stories>
+          <Subheading>Default Props</Subheading>
+          <ArgTypes />
+        </>
+      ),
+    },
+  },
+};
+
+export default ListMeta;
+
+const longTitle =
+  "Four strategic objectives at the heart of the Decent Work agenda";
+
+const shortTitle = "The Decent Work agenda";
+
+const OrderedTemplate: StoryFn<ListProps> = () => (
+  <List title={longTitle} ordered="ordered">
+    <ListItem id="ordered1">
+      <p>
+        Set and promote standards and fundamental principles and rights at work
+      </p>
+    </ListItem>
+    <ListItem id="ordered2">
+      <p>
+        Create greater opportunities for women and men to decent employment and
+        income
+      </p>
+    </ListItem>
+    <ListItem id="ordered3">
+      <p>Enhance the coverage and effectiveness of social protection for all</p>
+    </ListItem>
+    <ListItem id="ordered4">
+      <p>Strengthen tripartism and social dialogue</p>
+    </ListItem>
+  </List>
+);
+
+const UnorderedTemplate: StoryFn<ListProps> = () => (
+  <List title={longTitle} ordered="unordered">
+    <ListItem id="unordered1">
+      <p>
+        Set and promote standards and fundamental principles and rights at work{" "}
+      </p>
+    </ListItem>
+    <ListItem id="unordered2">
+      <p>
+        Create greater opportunities for women and men to decent employment and
+        income
+      </p>
+    </ListItem>
+    <ListItem id="unordered3">
+      <p>Enhance the coverage and effectiveness of social protection for all</p>
+    </ListItem>
+    <ListItem id="unordered4">
+      <p>Strengthen tripartism and social dialogue</p>
+    </ListItem>
+  </List>
+);
+
+const UnstyledTemplate: StoryFn<ListProps> = () => (
+  <List title={longTitle} ordered="unstyled">
+    <ListItem id="unstyled1">
+      <p>
+        Set and promote standards and fundamental principles and rights at work{" "}
+      </p>
+    </ListItem>
+    <ListItem id="unstyled2">
+      <p>
+        Create greater opportunities for women and men to decent employment and
+        income
+      </p>
+    </ListItem>
+    <ListItem id="unstyled3">
+      <p>Enhance the coverage and effectiveness of social protection for all</p>
+    </ListItem>
+    <ListItem id="unstyled4">
+      <p>Strengthen tripartism and social dialogue</p>
+    </ListItem>
+  </List>
+);
+
+const HorizontalTemplate: StoryFn<ListProps> = () => (
+  <List title={shortTitle} alignment="horizontal" ordered="unstyled">
+    <ListItem id="horizontal1">
+      <p>Labour standards</p>
+    </ListItem>
+    <ListItem id="horizontal2">
+      <p>Employment</p>
+    </ListItem>
+    <ListItem id="horizontal3">
+      <p>Social protection</p>
+    </ListItem>
+    <ListItem id="horizontal4">
+      <p>Tripartism</p>
+    </ListItem>
+  </List>
+);
+
+export const ListOrdered: StoryFn<ListProps> = OrderedTemplate.bind({});
+
+export const ListUnordered: StoryFn<ListProps> = UnorderedTemplate.bind({});
+
+export const ListUnstyled: StoryFn<ListProps> = UnstyledTemplate.bind({});
+
+export const ListHorizontal: StoryFn<ListProps> = HorizontalTemplate.bind({});
+
+ListOrdered.storyName = "Ordered";
+
+ListUnordered.storyName = "Unordered";
+
+ListUnstyled.storyName = "Unstyled";
+
+ListHorizontal.storyName = "Horizontal";

package/src/stories/Loading/Loading.stories.tsx

@@ -0,0 +1,97 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  ArgsTable,
+} 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 |`;
+
+const LoadingMeta: Meta<typeof Loading> = {
+  title: "Components/Transitions/Loading",
+  tags: ["autodocs"],
+  component: Loading,
+  argTypes: {
+    size: {
+      options: ["small", "large"],
+      control: { type: "select" },
+    },
+    status: {
+      options: ["idle", "loading", "loaded"],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Loading component displays a loading state. Status is passed to
+            it via props, along with size setting.
+          </Description>
+          <Primary />
+          <Subheading>Status</Subheading>
+          <Description>{statusDoc}</Description>
+          <Subheading>Size</Subheading>
+          <Description>{sizeDoc}</Description>
+          <Stories title="Examples"></Stories>
+          <Subheading>Default props</Subheading>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+};
+
+export default LoadingMeta;
+
+/**
+ * Loading Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const LoadingTemplate: StoryFn<LoadingProps> = (args) => <Loading {...args} />;
+
+export const LoadingLarge: StoryFn<LoadingProps> = LoadingTemplate.bind({});
+
+export const LoadedLarge: StoryFn<LoadingProps> = LoadingTemplate.bind({});
+
+export const LoadingSmall: StoryFn<LoadingProps> = LoadingTemplate.bind({});
+
+export const LoadedSmall: StoryFn<LoadingProps> = LoadingTemplate.bind({});
+
+LoadingLarge.args = loadingArgs.loadinglarge;
+LoadingLarge.storyName = "Loading - large";
+
+LoadedLarge.args = loadingArgs.loadedlarge;
+LoadedLarge.storyName = "Loaded - large";
+
+LoadingSmall.args = loadingArgs.loadingsmall;
+LoadingSmall.storyName = "Loading - small";
+
+LoadedSmall.args = loadingArgs.loadedsmall;
+LoadedSmall.storyName = "Loaded - small";

package/src/stories/LocalNav/LocalNav.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
+import * as LocalNavStories from "./LocalNav.stories.tsx";
+import { LocalNav } from "../../components";
+
+<Meta title="LocalNav" of={LocalNavStories} />
+
+# Local Navigation Example
+
+The local navigation component should be used as the header of a subsite to the main site.
+
+<Canvas>
+  <Story of={LocalNavStories.BasicLocalNav} />
+</Canvas>
+
+## Default Props
+
+<ArgsTable of={LocalNav} />

package/src/stories/LocalNav/LocalNav.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LocalNav } from "../../components/LocalNav";
+import LocalNavArgs from "../../components/LocalNav/LocalNav.args";
+
+const LocalNavMeta: Meta<typeof LocalNav> = {
+  title: "Components/Navigation/LocalNav",
+  component: LocalNav,
+};
+
+export default LocalNavMeta;
+
+export const BasicLocalNav: StoryObj<typeof LocalNav> = {
+  args: LocalNavArgs.basic,
+  name: "Basic",
+};