@ilo-org/react 0.14.0 → 0.15.0

package/src/stories/FileUpload/FileUpload.stories.tsx

@@ -1,103 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-  Subheading,
-  ArgTypes,
-} from "@storybook/addon-docs";
-import { FileUpload } from "../../components";
-import fileUploadArgs from "../../components/FileUpload/FileUpload.args";
-import { labelledFormFieldArgTypes } from "../../types/forms.args";
-
-const FileUploadMeta: Meta<typeof FileUpload> = {
-  title: "Components/Forms/FileUpload",
-  component: FileUpload,
-  tags: ["autodocs"],
-  argTypes: {
-    multiple: {
-      description: "Whether or not multiple files can be uploaded",
-      control: {
-        type: "boolean",
-      },
-      table: {
-        type: {
-          summary: "boolean",
-        },
-      },
-    },
-    placeholder: {
-      description: "The placeholder text for the file upload",
-      control: {
-        type: "text",
-      },
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    ...labelledFormFieldArgTypes("HTMLInputElement"),
-  },
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The FileUpload component allows users to select and upload files
-            from their device to a web application. It displays a list of the
-            files to upload once they've been selected.
-          </Description>
-          <Primary />
-          <Subheading>Props</Subheading>
-          <ArgTypes of={FileUploadMeta} />
-          <Stories title="Examples" />
-        </>
-      ),
-    },
-  },
-};
-
-export default FileUploadMeta;
-
-export const Basic: StoryObj<typeof FileUpload> = {
-  args: {
-    ...fileUploadArgs.basic,
-    label: "Upload your files here",
-    labelPlacement: "top",
-    labelSize: "medium",
-  },
-};
-
-export const Helper: StoryObj<typeof FileUpload> = {
-  args: {
-    ...fileUploadArgs.basic,
-    label: "Upload your files here",
-    labelPlacement: "top",
-    labelSize: "medium",
-    helper: "You can upload up to 5 files",
-  },
-};
-
-export const Error: StoryObj<typeof FileUpload> = {
-  args: {
-    ...fileUploadArgs.haserror,
-    label: "Upload your files here",
-    labelPlacement: "top",
-    labelSize: "medium",
-    errorMessage: "There was an error uploading your files",
-  },
-};
-
-export const Disabled: StoryObj<typeof FileUpload> = {
-  args: {
-    ...fileUploadArgs.disabled,
-    label: "Upload your files here",
-    labelPlacement: "top",
-    labelSize: "medium",
-  },
-};

package/src/stories/Footer/Footer.mdx

@@ -1,17 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
-import * as FooterStories from "./Footer.stories.tsx";
-import { Footer } from "../../components";
-
-<Meta title="Footer" of={FooterStories} />
-
-# Footer Example
-
-The footer informs users about the Organization that a website belongs to. It can include copyright details, links to Terms and Conditions and generic calls to action. It should be included at the bottom of each page.
-
-<Canvas>
-  <Story of={FooterStories.BasicFooter} />
-</Canvas>
-
-## Default Props
-
-<ArgsTable of={Footer} />

package/src/stories/Footer/Footer.stories.tsx

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

package/src/stories/Form/Form.mdx

@@ -1,58 +0,0 @@
-import { Primary, Meta, ArgTypes, Title } from "@storybook/blocks";
-import * as FormStories from "./Form.stories";
-
-<Meta of={FormStories} />
-
-# Building Forms
-
-Form components in the ILO Design System make it easy to build branded and accessible forms with a minimum of effort. The components are built on top of standard HTML form elements and can be used with most form libraries or validation strategy.
-
-<Primary />
-
-## Usage
-
-Here's a basic example of a form with four text inputs and a submit button. The `<Form>` component is simply a wrapper around an HTML form element. It's primary purpose is to provide standard layout and spacing for form fields. Otherwise, it takes the same props as a standard HTML form element.
-
-```tsx
-import { Form, Fieldset, TextInput, Button } from "@ilo-org/react";
-
-function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-  // handle form submission
-}
-
-<Form theme="light" onSubmit={handleSubmit}>
-  <Fieldset legend="Personal Information">
-    <TextInput name="first-name" label="First Name" />
-    <TextInput name="last-name" label="Last Name" />
-  </Fieldset>
-  <Fieldset legend="Contact Information">
-    <TextInput name="email" type="email" label="Email" />
-    <TextInput name="phone" type="tel" label="Phone" />
-  </Fieldset>
-  <Button type="submit">Submit</Button
-</Form>
-```
-
-## Form components
-
-### Names and ids
-
-All form elements must be passed a `name` prop. If you don't also pass in an `id` then it will be set to the same value as the `name` prop.
-
-### Labels and legends
-
-All form inputs include `labels` props that can be used to provide a label for the input. The label size and position can also be adjusted with the `labelSize` and `labelPosition` props. Form elements also include `helper` and `errorMessage` props that can be used to display additional info and error messages to the user
-
-## Grouping components together
-
-### Form
-
-The form provides a simple wrapper around a standard HTML form element. It accepts all the same props as a standard HTML form element, but also accepts a `theme` prop that can be used to set the text color of the form for rendering on light or dark backgrounds.
-
-### Fieldset
-
-The `<Fieldset>` component can be used to group related form elements together. It accepts a `legend` prop that can be used to provide a title for the fieldset. When used with `<Radio>` and `<Checkbox>` components, the `<Fieldset>` component can also be used to show error messages.
-
-## Validation
-
-Form Components expose the standard HTML attributes that you can use for native form validation. For use with libraries, form components also expose a `ref` prop that can be used to access the underlying input elements. We recommend using the [React Hook Form](https://react-hook-form.com/) library for form validation.

package/src/stories/Form/Form.stories.tsx

@@ -1,162 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Form, FormArgs } from "../../components/Form";
-
-import { Fieldset } from "../../components/Fieldset";
-import { TextInput } from "../../components/TextInput";
-import {
-  Button,
-  Checkbox,
-  DatePicker,
-  Dropdown,
-  FileUpload,
-  NumberPicker,
-  Radio,
-} from "../../components";
-import * as DropdownArgs from "../../components/Dropdown/Dropdown.args";
-
-const FormMeta: Meta<typeof Form> = {
-  title: "Components/Forms",
-  component: Form,
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default FormMeta;
-
-const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-  e.preventDefault();
-  const formData = new FormData(e.target as HTMLFormElement);
-  const data = Object.fromEntries(formData.entries());
-  console.log(data);
-};
-
-export const Example: StoryObj<typeof Form> = {
-  args: FormArgs.basic,
-
-  render: (args) => (
-    <Form {...args} style={{ width: "100%" }} onSubmit={handleSubmit}>
-      <h3>Request to attend the International Labour Conference</h3>
-      <Fieldset
-        legend="Personal information"
-        wrap="wrap"
-        direction="row"
-        style={{ width: "100%" }}
-      >
-        <TextInput
-          label="First name"
-          name="first-name"
-          placeholder="Juan"
-          type="text"
-          style={{ flex: "1 1 30%" }}
-        />
-        <TextInput
-          label="Last name"
-          name="last-name"
-          placeholder="Martinez"
-          type="text"
-          style={{ flex: "1 1 30%" }}
-        />
-        <DatePicker
-          label="Date of birth"
-          name="dob"
-          style={{ flex: "1 1 30%" }}
-        />
-        <TextInput
-          label="Street address"
-          name="street-address"
-          placeholder="Rue des Morillons 4"
-          type="text"
-          style={{ flex: "1 1 100%" }}
-        />
-        <TextInput
-          label="City"
-          name="city"
-          placeholder="Geneva"
-          type="text"
-          style={{ flex: "1 1 30%" }}
-        />
-        <Dropdown
-          label="Country"
-          name="country"
-          tooltip="This is not a complete list of countries."
-          value="Switzerland"
-          style={{ flex: "1 1 30%" }}
-          options={DropdownArgs.options}
-        />
-        <NumberPicker
-          label="Post code"
-          name="post-code"
-          placeholder="1201"
-          style={{ flex: "1 1 30%" }}
-        />
-        <TextInput
-          label="Email"
-          name="email"
-          placeholder="juanmartinez@ilo.org"
-          type="email"
-          style={{ flex: "1 1 49%" }}
-          required
-          helper="Required"
-        />
-        <TextInput
-          label="Telephone"
-          name="post-code"
-          placeholder="### ### ####"
-          type="tel"
-          style={{ flex: "1 1 49%" }}
-          required
-          helper="Required"
-        />
-      </Fieldset>
-      <Fieldset legend="Submit a copy of your passport">
-        <FileUpload
-          name="passport"
-          label="PDF or JPG files up to 10MB"
-          labelPlacement="end"
-          labelSize="small"
-          placeholder="Upload document"
-        />
-      </Fieldset>
-      <Fieldset direction="row" wrap="wrap" style={{ width: "100%" }}>
-        <Fieldset
-          legend="List the most important issues for your delegation"
-          direction="column"
-          wrap="wrap"
-          style={{ flex: "1 1 auto" }}
-        >
-          <Checkbox name="key-issues" label="Child labour" value="workers" />
-          <Checkbox
-            name="key-issues"
-            label="Full employment"
-            value="governments"
-          />
-          <Checkbox
-            name="key-issues"
-            label="Occupational health & safety"
-            value="employers"
-          />
-          <Checkbox
-            name="key-issues"
-            label="Freedom to organize"
-            value="other"
-          />
-        </Fieldset>
-        <Fieldset
-          legend="Who will you be representing?"
-          style={{ flex: "1 1 auto" }}
-        >
-          <Radio name="constituent-type" label="Workers" value="workers" />
-          <Radio
-            name="constituent-type"
-            label="Governments"
-            value="governments"
-          />
-          <Radio name="constituent-type" label="Employers" value="employers" />
-          <Radio name="constituent-type" label="Other" value="other" />
-        </Fieldset>
-      </Fieldset>
-      <Button label="Submit" kind="submit" />
-    </Form>
-  ),
-};

package/src/stories/GetStarted.mdx

@@ -1,57 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Getting started" />
-
-# Getting started
-
-This website provides guidance and documentation for the ILO Design System using [React](https://reactjs.org). These docs are a work in progress so bear with us as we add and correct them.
-
-## Installation
-
-```bash
-$ npm i @ilo-org/react
-```
-
-If you plan on using the default styles for the library, then you should also install the `@ilo-org/styles` package.
-
-```bash
-$ npm i @ilo-org/styles
-```
-
-## Peer dependencies
-
-In order to use this component library, you will need to have `react` and `react-dom` installed as a dependency.
-
-```bash
-$ npm i react react-dom
-```
-
-## Usage
-
-Components can be exported directly from the `@ilo-org/react` package.
-
-```typescript
-import { Button } from "@ilo-org/react";
-```
-
-This is fine if you think you're going to use all or most of the components in the library. However, if you're only going to use a few or you want to take advantage of code splitting, then you can import them individually.
-
-```typescript
-import { Button } from "@ilo-org/react/Button";
-```
-
-## Styles
-
-Styles for the library should be imported at the top of your project.
-
-```html
-<link rel="stylesheet" href="node_modules/@ilo-org/styles/index.css" />
-```
-
-## Contributing
-
-The ILO Design System is an open-source project. If you'd like to make a contribution, feel free to check out the [project](https://github.com/international-labour-organization/designsystem) on Github. Make sure to read the [Contribution Guidelines](https://github.com/international-labour-organization/designsystem/blob/develop/contributing.md) before making a pull request.
-
-## Issues and feature requests
-
-Please feel free to open issues or make feature requests on our Github repo.

package/src/stories/Heading/Heading.stories.tsx

@@ -1,193 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Title,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  Subheading,
-} from "@storybook/addon-docs";
-import { Heading } from "../../components/Heading";
-import { HeadingProps } from "../../components/Heading/Heading.props";
-import headingArgs from "../../components/Heading/Heading.args";
-
-const headingDoc = `
-By changing the \`level\` prop you can use different heading levels. The default heading level if not specified is \`h3\`.
-
-| level   |  Description  |
-|----------|-------------|
-| \`h1\` | heading level 1. |
-| \`h2\` | heading level 2. |
-| \`h3\` | heading level 3. |
-| \`h4\` | heading level 4. |
-| \`h5\` | heading level 5. |
-| \`h6\` | heading level 6. |
-`;
-
-const typeDoc = `
-By changing the \`type\` prop you can change the color of the heading. If not specified, the heading will inherit the color.
-
-| type |  Description  |
-|----------|-------------|
-| \`default\` | Set the heading color to the base/default label theme. |
-| \`actionable\` | set the heading color to the actionable label theme. |
-| \`light\` | Set the heading color to the light label theme. |
-`;
-
-/**
- * Accordion Story
- *
- */
-const HeadingMeta: Meta<typeof Heading> = {
-  title: "Components/Content/Heading",
-  component: Heading,
-  tags: ["autodocs"],
-  argTypes: {
-    level: {
-      control: "text",
-    },
-    className: {
-      control: "text",
-    },
-  },
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Primary />
-          <ArgsTable />
-          <Subheading>Heading Level Prop</Subheading>
-          <Description>{headingDoc}</Description>
-          <Subheading>Color Prop</Subheading>
-          <Description>{typeDoc}</Description>
-          <Stories title="Examples" />
-          <Subheading>Default Props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default HeadingMeta;
-
-/**
- * Heading 1 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading1Template: StoryFn<HeadingProps> = () => (
-  <Heading {...headingArgs.heading1} />
-);
-
-/**
- * Heading 2 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading2Template: StoryFn<HeadingProps> = () => (
-  <Heading {...headingArgs.heading2} />
-);
-
-/**
- * Heading 3 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading3Template: StoryFn<HeadingProps> = () => (
-  <Heading {...headingArgs.heading3} />
-);
-
-/**
- * Heading 4 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading4Template: StoryFn<HeadingProps> = () => (
-  <Heading {...headingArgs.heading4} />
-);
-
-/**
- * Heading 5 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading5Template: StoryFn<HeadingProps> = () => (
-  <Heading {...headingArgs.heading5} />
-);
-
-/**
- * Heading 6 Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const Heading6Template: StoryFn<HeadingProps> = () => (
-  <Heading {...headingArgs.heading6} />
-);
-
-/**
- * Heading 1 Instance
- *
- */
-export const Heading1: StoryFn<HeadingProps> = Heading1Template.bind({});
-
-/**
- * Heading 2 Instance
- *
- */
-export const Heading2: StoryFn<HeadingProps> = Heading2Template.bind({});
-
-/**
- * Heading 3 Instance
- *
- */
-export const Heading3: StoryFn<HeadingProps> = Heading3Template.bind({});
-
-/**
- * Heading 4 Instance
- *
- */
-export const Heading4: StoryFn<HeadingProps> = Heading4Template.bind({});
-
-/**
- * Heading 5 Instance
- *
- */
-export const Heading5: StoryFn<HeadingProps> = Heading5Template.bind({});
-
-/**
- * Heading 6 Instance
- *
- */
-export const Heading6: StoryFn<HeadingProps> = Heading6Template.bind({});
-
-// enumerate the props for the heading 1.
-Heading1.storyName = "Heading 1";
-
-// enumerate the props
-Heading2.storyName = "Heading 2";
-
-// enumerate the props
-Heading3.storyName = "Heading 3";
-
-// enumerate the props
-Heading4.storyName = "Heading 4";
-
-// enumerate the props
-Heading5.storyName = "Heading 5";
-
-// enumerate the props
-Heading6.storyName = "Heading 6";

package/src/stories/Hero/Hero.stories.tsx

@@ -1,68 +0,0 @@
-import { StoryObj, Meta } from "@storybook/react";
-import {
-  Title,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  Subheading,
-} from "@storybook/blocks";
-import { Hero } from "../../components/Hero";
-import * as heroArgs from "../../components/Hero/Hero.args";
-
-const HeroMeta: Meta<typeof Hero> = {
-  title: "Components/Content/Hero",
-  component: Hero,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Description>
-            The Hero is an attention-grabbing section of a web page designed to
-            engage users and create a memorable first impression.
-          </Description>
-          <Primary />
-          <Stories title="Examples" />
-          <Subheading>Default Props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default HeroMeta;
-
-export const Default: StoryObj<typeof Hero> = {
-  args: heroArgs.darkPortal,
-};
-
-export const Light: StoryObj<typeof Hero> = {
-  args: heroArgs.lightPortal,
-};
-
-export const SemiTransparent: StoryObj<typeof Hero> = {
-  args: heroArgs.semiTransparent,
-};
-
-export const Transparent: StoryObj<typeof Hero> = {
-  args: heroArgs.transparent,
-};
-
-export const Offset: StoryObj<typeof Hero> = {
-  args: heroArgs.offset,
-};
-
-export const Center: StoryObj<typeof Hero> = {
-  args: heroArgs.center,
-};
-
-export const CenterBottom: StoryObj<typeof Hero> = {
-  args: heroArgs.centerBottom,
-};
-
-export const NoPoster: StoryObj<typeof Hero> = {
-  args: heroArgs.noPoster,
-};