@ilo-org/react 0.12.0 → 0.14.0

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

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

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

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

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

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

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

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