@ilo-org/react 0.14.0 → 0.14.1

package/src/stories/Image/Image.stories.tsx

@@ -1,50 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-import {
-  Title,
-  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.`;
-
-const ImageMeta: Meta<typeof Image> = {
-  title: "Components/Media/Image",
-  component: Image,
-  argTypes: {},
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Description>
-            The Image component displays an image, along with an image credit
-            and optional caption.
-          </Description>
-          <Primary />
-          <Subheading>Responsive images</Subheading>
-          <Description>{urlDoc}</Description>
-          <Stories title="Examples"></Stories>
-          <Subheading>Default props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default ImageMeta;
-
-const ImageTemplate: StoryFn<ImageProps> = (args) => <Image {...args} />;
-
-export const ImageMedia: StoryFn<ImageProps> = ImageTemplate.bind({});
-
-ImageMedia.args = imageArgs;
-ImageMedia.storyName = "Image";

package/src/stories/Link/Link.stories.tsx

@@ -1,81 +0,0 @@
-import { StoryFn, 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";
-
-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. |
-`;
-
-const LinkMeta: Meta<typeof Link> = {
-  title: "Components/Navigation/Link",
-  component: Link,
-  tags: ["autodocs"],
-  argTypes: {
-    theme: {
-      options: ["light", "dark", "footer"],
-      control: { type: "select" },
-    },
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The link component creates an anchor link with a specific theme.
-          </Description>
-          <Primary />
-          <Subheading>Theme</Subheading>
-          <Description>{themeDoc}</Description>
-          <Stories title="Examples"></Stories>
-          <Subheading>Default Props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default LinkMeta;
-
-const LinkTemplate: StoryFn<LinkProps> = (args) => (
-  <Link {...args}>This is text for the link</Link>
-);
-
-export const BaseLink: StoryFn<LinkProps> = LinkTemplate.bind({});
-
-export const DarkLink: StoryFn<LinkProps> = LinkTemplate.bind({});
-
-export const FooterLink: StoryFn<LinkProps> = LinkTemplate.bind({});
-
-BaseLink.args = { theme: "light" };
-BaseLink.args.url = "https://www.ilo.org";
-BaseLink.storyName = "Light";
-
-DarkLink.args = { theme: "dark" };
-DarkLink.parameters = {
-  backgrounds: { default: "dark" },
-};
-DarkLink.args.url = "https://www.ilo.org";
-DarkLink.storyName = "Dark";
-
-FooterLink.args = { theme: "footer" };
-FooterLink.args.url = "https://www.ilo.org";
-FooterLink.storyName = "Footer";

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

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

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

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

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

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

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