@ilo-org/react 0.14.0 → 0.15.0

package/src/stories/Radio/Radio.stories.tsx

@@ -1,232 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Radio, RadioArgs } from "../../components/Radio";
-import {
-  ArgTypes,
-  Description,
-  Heading,
-  Primary,
-  Stories,
-  Title,
-} from "@storybook/blocks";
-import { Fieldset } from "../../components";
-import { RadioProps } from "../../components/Radio/Radio.props";
-import { FieldsetProps } from "../../components/Fieldset/Fieldset.props";
-import { labelledChoiceFieldArgTypes } from "../../types/forms.args";
-
-const RadioMeta: Meta<typeof Radio> = {
-  title: "Components/Forms/Radio",
-  component: Radio,
-  tags: ["autodocs"],
-  argTypes: {
-    ...labelledChoiceFieldArgTypes("HTMLInputElement"),
-  },
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Description>
-            The Radio component provides users with a switch they can use to
-            turn a single option on or off or alternate between multiple
-            different states.
-          </Description>
-          <Primary />
-          <Heading>Props</Heading>
-          <ArgTypes of={RadioMeta} />
-          <Stories />
-        </>
-      ),
-    },
-  },
-};
-
-const fieldsetArgs: FieldsetProps = {
-  legend: "Which world of work topic interests you the most?",
-  errorMessage: "You must choose a topic",
-};
-
-export const Default: StoryObj<RadioProps> = {
-  args: RadioArgs.basic,
-  render: (args) => (
-    <Fieldset {...fieldsetArgs}>
-      <Radio
-        {...args}
-        id="Radio-1"
-        label="Social Justice"
-        labelPlacement="end"
-        labelSize="small"
-        value="social-justice"
-        name="radio-group-1"
-      />
-      <Radio
-        {...args}
-        id="Radio-2"
-        label="Decent Work"
-        labelPlacement="end"
-        labelSize="small"
-        value="decent-work"
-        name="radio-group-1"
-      />
-      <Radio
-        {...args}
-        id="Radio-3"
-        label="Ending child labour"
-        labelPlacement="end"
-        labelSize="small"
-        value="ending-child-labour"
-        name="radio-group-1"
-      />
-      <Radio
-        {...args}
-        id="Radio-4"
-        label="Achieving full employment"
-        labelPlacement="end"
-        labelSize="small"
-        value="achieving-full-employment"
-        name="radio-group-1"
-      />
-    </Fieldset>
-  ),
-};
-
-export const CheckedByDefault: StoryObj<RadioProps> = {
-  args: RadioArgs.basic,
-  render: (args) => (
-    <Fieldset {...fieldsetArgs}>
-      <Radio
-        {...args}
-        id="Radio-1"
-        label="Social Justice"
-        labelPlacement="end"
-        labelSize="small"
-        defaultChecked
-        value="social-justice"
-        name="radio-group-2"
-      />
-      <Radio
-        {...args}
-        id="Radio-2"
-        label="Decent Work"
-        labelPlacement="end"
-        labelSize="small"
-        value="decent-work"
-        name="radio-group-2"
-      />
-      <Radio
-        {...args}
-        id="Radio-3"
-        label="Ending child labour"
-        labelPlacement="end"
-        labelSize="small"
-        value="ending-child-labour"
-        name="radio-group-2"
-      />
-      <Radio
-        {...args}
-        id="Radio-4"
-        label="Achieving full employment"
-        labelPlacement="end"
-        labelSize="small"
-        value="achieving-full-employment"
-        name="radio-group-2"
-      />
-    </Fieldset>
-  ),
-};
-
-export const Helper: StoryObj<RadioProps> = {
-  args: RadioArgs.basic,
-  render: (args) => (
-    <Fieldset
-      {...fieldsetArgs}
-      legend="Which organization was established in 1919 to promote workers’ rights and address labor issues on an international scale?"
-      helper="Hint, it's the oldest of the four organizations."
-    >
-      <Radio
-        {...args}
-        id="Radio-1"
-        label="International Monetary Fund"
-        labelPlacement="end"
-        labelSize="small"
-        value="international-monetary-fund"
-        name="radio-group-3"
-      />
-      <Radio
-        {...args}
-        id="Radio-2"
-        label="World Trade Organization"
-        labelPlacement="end"
-        labelSize="small"
-        value="world-trade-organization"
-        name="radio-group-3"
-      />
-      <Radio
-        {...args}
-        id="Radio-3"
-        label="Food and Agriculture Organization"
-        labelPlacement="end"
-        labelSize="small"
-        value="food-and-agriculture-organization"
-        name="radio-group-3"
-      />
-      <Radio
-        {...args}
-        id="Radio-4"
-        label="International Labour Organization"
-        labelPlacement="end"
-        labelSize="small"
-        value="international-labour-organization"
-        name="radio-group-3"
-      />
-    </Fieldset>
-  ),
-};
-
-export const Error: StoryObj<RadioProps> = {
-  args: RadioArgs.basic,
-  render: (args) => (
-    <Fieldset
-      {...fieldsetArgs}
-      legend="Which organization was established in 1919 to promote workers’ rights and address labor issues on an international scale?"
-      helper="Hint, it's the oldest of the four organizations."
-      errorMessage="The correct answer is the International Labour Organization."
-    >
-      <Radio
-        {...args}
-        id="Radio-1"
-        label="International Monetary Fund"
-        labelPlacement="end"
-        labelSize="small"
-        checked
-        value="international-monetary-fund"
-      />
-      <Radio
-        {...args}
-        id="Radio-1"
-        label="World Trade Organization"
-        labelPlacement="end"
-        labelSize="small"
-        value="world-trade-organization"
-      />
-      <Radio
-        {...args}
-        id="Radio-1"
-        label="Food and Agriculture Organization"
-        labelPlacement="end"
-        labelSize="small"
-        value="food-and-agriculture-organization"
-      />
-      <Radio
-        {...args}
-        id="Radio-1"
-        label="International Labour Organization"
-        labelPlacement="end"
-        labelSize="small"
-        error
-        value="international-labour-organization"
-      />
-    </Fieldset>
-  ),
-};
-
-export default RadioMeta;

package/src/stories/ReadMore/ReadMore.stories.tsx

@@ -1,59 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Title,
-  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. |`;
-
-const ReadMoreMeta: Meta<typeof ReadMore> = {
-  title: "Components/User Interface/ReadMore",
-  component: ReadMore,
-  tags: ["autodocs"],
-  argTypes: {},
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <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 />
-          <Subheading>Open on component load</Subheading>
-          <Description>{stateDoc}</Description>
-          <Stories title="Examples"></Stories>
-          <Subheading>Default Props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default ReadMoreMeta;
-
-export const BaseReadMore: StoryObj<ReadMoreProps> = {
-  args: readMoreArgs.base,
-  name: "Default",
-};
-
-export const OpenedReadMore: StoryObj<ReadMoreProps> = {
-  args: readMoreArgs.open,
-  name: "Open",
-};

package/src/stories/RichText/RichText.stories.tsx

@@ -1,63 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-import {
-  Title,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  Subheading,
-} 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
- *
- */
-const RichTextMeta: Meta<typeof RichText> = {
-  title: "Components/Content/RichText",
-  component: RichText,
-  tags: ["autodocs"],
-  argTypes: {},
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Description>
-            The rich text component displays HTML as composed in a WYSIWYG
-            editor.
-          </Description>
-          <Primary />
-          <Stories title="Examples"></Stories>
-          <Subheading>Default props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default RichTextMeta;
-
-/**
- * RichText Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const RichTextTemplate: StoryFn<RichTextProps> = (args) => (
-  <RichText {...args} />
-);
-
-/**
- * RichText Instance
- *
- */
-export const BaseRichText: StoryFn<RichTextProps> = RichTextTemplate.bind({});
-
-// enumerate the props for the rich text component
-BaseRichText.args = richTextArgs.richtext;
-BaseRichText.storyName = "Rich Text";

package/src/stories/SearchField/SearchField.stories.tsx

@@ -1,91 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-import {
-  Title,
-  Description,
-  Primary,
-  ArgTypes,
-  Stories,
-} from "@storybook/blocks";
-import { SearchField } from "../../components/SearchField";
-import { Input } from "../../components/Input";
-import { SearchFieldProps } from "../../components/SearchField/SearchField.props";
-import SearchFieldArgs from "../../components/SearchField/SearchField.args";
-
-const SearchFieldMeta: Meta<typeof SearchField> = {
-  title: "Components/User Interface/SearchField",
-  component: SearchField,
-  tags: ["autodocs"],
-  argTypes: {},
-  subcomponents: {
-    Input,
-  },
-  parameters: {
-    componentSubtitle: "Component",
-    docs: {
-      page: () => (
-        <>
-          <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 />
-          <Stories title="Examples"></Stories>
-          <ArgTypes />
-        </>
-      ),
-    },
-  },
-};
-
-export default SearchFieldMeta;
-
-/**
- * SearchField Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const SearchFieldTemplate: StoryFn<SearchFieldProps> = (args) => (
-  <div style={{ width: "100%", maxWidth: "600px" }}>
-    <SearchField {...args} />
-  </div>
-);
-
-export const SearchFieldDefault: StoryFn<SearchFieldProps> =
-  SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldDefault.args = SearchFieldArgs.searchfield;
-SearchFieldDefault.storyName = "Default";
-
-export const SearchFieldError: StoryFn<SearchFieldProps> =
-  SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldError.args = SearchFieldArgs.searchfielderror;
-SearchFieldError.storyName = "Error";
-
-export const SearchFieldDisabled: StoryFn<SearchFieldProps> =
-  SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldDisabled.args = SearchFieldArgs.searchfielddisabled;
-SearchFieldDisabled.storyName = "Disabled";
-
-export const SearchFieldLabel: StoryFn<SearchFieldProps> =
-  SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldLabel.args = SearchFieldArgs.searchfieldlabel;
-SearchFieldLabel.storyName = "Labelled";
-
-export const SearchFieldHelper: StoryFn<SearchFieldProps> =
-  SearchFieldTemplate.bind({});
-
-// enumerate the props for the default search field
-SearchFieldHelper.args = SearchFieldArgs.searchfieldhelper;
-SearchFieldHelper.storyName = "Helper";

package/src/stories/SocialMedia/SocialMedia.stories.tsx

@@ -1,60 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Title,
-  Description,
-  Primary,
-  Stories,
-  ArgsTable,
-  Subheading,
-} from "@storybook/addon-docs";
-import { SocialMedia } from "../../components/SocialMedia";
-import { SocialMediaProps } from "../../components/SocialMedia/SocialMedia.props";
-import {
-  defaultArgs,
-  centredArgs,
-  darkArgs,
-} from "../../components/SocialMedia/SocialMedia.args";
-import { brand } from "@ilo-org/themes/tokens/brand/base.json";
-
-console.log(brand);
-
-const SocialMediaMeta: Meta<SocialMediaProps> = {
-  title: "Components/Navigation/SocialMedia",
-  component: SocialMedia,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Description>
-            The Social Media component displays a list of social media icons. It
-            can have a light or a dark theme and can be aligned to the start or
-            center of its container.
-          </Description>
-          <Primary />
-          <Stories title="Examples"></Stories>
-          <Subheading>Default props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default SocialMediaMeta;
-
-export const Default: StoryObj<typeof SocialMedia> = {
-  args: defaultArgs,
-};
-
-export const Dark: StoryObj<typeof SocialMedia> = {
-  args: darkArgs,
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const Centred: StoryObj<typeof SocialMedia> = {
-  args: centredArgs,
-};

package/src/stories/TableOfContents/TableOfContents.stories.tsx

@@ -1,55 +0,0 @@
-import { StoryFn, Meta } from "@storybook/react";
-import {
-  Title,
-  Description,
-  Primary,
-  Stories,
-  ArgsTable,
-  Subheading,
-} 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
- *
- */
-const TableOfContentsMeta: Meta<TableOfContentsProps> = {
-  title: "Components/Navigation/Table Of Contents",
-  component: TableOfContents,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <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>
-          <Subheading>Default props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default TableOfContentsMeta;
-
-/**
- * TableOfContents Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const TableOfContentsTemplate: StoryFn<TableOfContentsProps> = () => (
-  <TableOfContents {...tableOfContentsArgs.toc} />
-);
-
-export const TableOfContents1: StoryFn<TableOfContentsProps> =
-  TableOfContentsTemplate.bind({});

package/src/stories/Tabs/Tabs.mdx

@@ -1,17 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
-import * as TabsStories from "./Tabs.stories.tsx";
-import { Tabs } from "../../components";
-
-<Meta title="Tabs" of={TabsStories} />
-
-# Tabs
-
-The Tabs component displays content that is subdivided into sections, providing an interface for toggling visually between sections.
-
-<Canvas>
-  <Story of={TabsStories.Default} />
-</Canvas>
-
-## Default Props
-
-<ArgsTable of={Tabs} />

package/src/stories/Tabs/Tabs.stories.tsx

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Tabs } from "../../components/Tabs";
-import TabsArgs from "../../components/Tabs/Tabs.args";
-
-const TabsMeta: Meta<typeof Tabs> = {
-  title: "Components/User Interface/Tabs",
-  component: Tabs,
-};
-
-export default TabsMeta;
-
-export const Default: StoryObj<typeof Tabs> = {
-  args: TabsArgs.tabs,
-  name: "Default",
-};
-
-export const TabsWithIcon: StoryObj<typeof Tabs> = {
-  args: TabsArgs.withIcon,
-  name: "With Icon",
-};
-
-export const MultipleTabs: StoryObj<typeof Tabs> = {
-  args: TabsArgs.fiveItems,
-  name: "Five Items",
-};