@ilo-org/react 0.13.0 → 0.14.0

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,145 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  ArgTypes,
+} from "@storybook/addon-docs";
+import { Dropdown } from "../../components/Dropdown";
+import dropdownArgs from "../../components/Dropdown/Dropdown.args";
+import { labelledFormFieldArgTypes } from "../../types/forms.args";
+
+const DropdownMeta: Meta<typeof Dropdown> = {
+  title: "Components/Forms/Dropdown",
+  component: Dropdown,
+  tags: ["autodocs"],
+  argTypes: {
+    autocomplete: {
+      description:
+        "A string providing a hint for a user agent's autocomplete feature.",
+      control: {
+        type: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    form: {
+      description:
+        "The id of the form that the dropdown belongs to if it isn't nested in a form element",
+      control: {
+        type: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    multiple: {
+      description: "Whether the dropdown allows multiple selections",
+      control: {
+        type: "boolean",
+      },
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    options: {
+      description: "The options to display in the dropdown",
+      control: {
+        type: "object",
+      },
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    selectSize: {
+      description:
+        "Number of rows in the list that should be visible at one time. Corresponds to the select element's size attribute.",
+      control: {
+        type: "number",
+      },
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
+    value: {
+      description: "The value of the dropdown",
+      control: {
+        type: "string",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    ...labelledFormFieldArgTypes("HTMLSelectElement"),
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The Dropdown displays a select element with options, and is most
+            commonly used in forms.
+          </Description>
+          <Primary />
+          <Subheading>Props</Subheading>
+          <ArgTypes of={DropdownMeta} />
+          <Stories title="Examples" />
+        </>
+      ),
+    },
+  },
+};
+
+export default DropdownMeta;
+
+export const Basic: StoryObj<typeof Dropdown> = {
+  args: { ...dropdownArgs.basic, style: { width: "100%" } },
+};
+
+export const WithLabel: StoryObj<typeof Dropdown> = {
+  args: {
+    ...dropdownArgs.basic,
+  },
+};
+
+export const WithHelperText: StoryObj<typeof Dropdown> = {
+  args: {
+    ...dropdownArgs.basic,
+  },
+};
+
+export const Error: StoryObj<typeof Dropdown> = {
+  args: {
+    ...dropdownArgs.haserror,
+  },
+};
+
+export const Disabled: StoryObj<typeof Dropdown> = {
+  args: {
+    ...dropdownArgs.isdisabled,
+  },
+};
+
+export const WithToolTip: StoryObj<typeof Dropdown> = {
+  args: {
+    ...dropdownArgs.hastooltip,
+  },
+};

package/src/stories/Empty/Empty.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  Title,
+  Description,
+  Primary,
+  Stories,
+  ArgsTable,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Empty } from "../../components/Empty";
+import { EmptyProps } from "../../components/Empty/Empty.props";
+
+const EmptyMeta: Meta<typeof Empty> = {
+  title: "Components/Transitions/Empty",
+  component: Empty,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Empty component receives no props. It it displayed on page load
+            as a placeholder component while data loads.
+          </Description>
+          <Primary />
+          <Stories title="Examples" />
+          <Subheading>Default Props</Subheading>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default EmptyMeta;
+
+export const Default: StoryFn<EmptyProps> = () => (
+  <Empty style={{ width: "100%", maxWidth: "600px", height: "400px" }} />
+);

package/src/stories/Fieldset/Fieldset.stories.tsx

@@ -0,0 +1,167 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Dropdown, Fieldset } from "../../components";
+
+import {
+  ArgTypes,
+  Description,
+  Heading,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+import { TextInput } from "../../components/TextInput";
+
+const FieldsetMeta: Meta<typeof Fieldset> = {
+  title: "Components/Forms/Fieldset",
+  component: Fieldset,
+  tags: ["autodocs"],
+  argTypes: {
+    helper: {
+      description: "Optional helper text to display below the fieldset",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    tooltip: {
+      description: "Optional text to display in a tooltip",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    errorMessage: {
+      description:
+        "Message to display in case of an error. This is only shown the Fieldset contains Radio or Checkbox components.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    disabled: {
+      description: "Whether the fieldset is disabled",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    wrap: {
+      description: "Whether the fieldset should wrap its children",
+      control: "select",
+      options: ["nowrap", "wrap"],
+      table: {
+        defaultValue: { summary: "nowrap" },
+        type: {
+          summary: "nowrap | wrap",
+        },
+      },
+    },
+    direction: {
+      description: "The direction of the fieldset",
+      control: "select",
+      options: ["column", "row", "column-reverse", "row-reverse"],
+      table: {
+        defaultValue: { summary: "column" },
+        type: {
+          summary: "column | row | column-reverse | row-reverse",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Fieldset component is used to group related form elements. It
+            can also be used to show an error state for a group of Radio or
+            Checkbox components.
+          </Description>
+          <Primary />
+          <Heading>Props</Heading>
+          <ArgTypes of={FieldsetMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default FieldsetMeta;
+
+export const Example: StoryObj<typeof Fieldset> = {
+  args: {
+    legend: "Enter your contact details",
+    helper: "Email and telephone are required",
+  },
+  render: (args) => (
+    <Fieldset {...args} wrap="wrap" direction="row">
+      <TextInput
+        label="Email"
+        helper="Required"
+        placeholder="info@ilo.org"
+        name="email"
+        style={{ flex: "1 1 49%" }}
+        type="email"
+        required
+      />
+      <TextInput
+        label="Telephone"
+        helper="Required"
+        placeholder="### ### ####"
+        name="telephone"
+        style={{ flex: "1 1 49%" }}
+        type="tel"
+        required
+      />
+      <TextInput
+        label="Street"
+        placeholder="Route de Morillons"
+        name="street"
+        style={{ flex: "1 1 49%" }}
+        type="text"
+      />
+      <TextInput
+        label="City"
+        name="city"
+        placeholder="Geneva"
+        style={{ flex: "1 1 49%" }}
+        type="text"
+      />
+      <Dropdown
+        label="Country"
+        name="country"
+        style={{ flex: "1 1 75%" }}
+        tooltip="This is not a complete list of all the countries in the world."
+        options={[
+          { label: "Switzerland", value: "CH" },
+          { label: "Côte d'Ivoire ", value: "CI" },
+          { label: "Thailand", value: "TH" },
+          { label: "United States", value: "US" },
+          { label: "Zimbabwe", value: "ZW" },
+          { label: "Afghanistan", value: "AF" },
+          { label: "Åland Islands", value: "AX" },
+          { label: "Albania", value: "AL" },
+          { label: "Algeria", value: "DZ" },
+          { label: "American Samoa", value: "AS" },
+          { label: "AndorrA", value: "AD" },
+          { label: "Angola", value: "AO" },
+          { label: "Anguilla", value: "AI" },
+          { label: "Antarctica", value: "AQ" },
+          { label: "Antigua and Barbuda", value: "AG" },
+          { label: "Argentina", value: "AR" },
+          { label: "Armenia", value: "AM" },
+          { label: "Aruba", value: "AW" },
+          { label: "Australia", value: "AU" },
+          { label: "Austria", value: "AT" },
+          { label: "Azerbaijan", value: "AZ" },
+        ]}
+      />
+    </Fieldset>
+  ),
+};

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

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

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

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

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