@ilo-org/react 0.14.0 → 0.15.0

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,118 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Checkbox, CheckboxArgs } from "../../components/Checkbox";
-import { LabelledCheckboxProps } from "../../components/Checkbox/Checkbox.props";
-import {
-  ArgTypes,
-  Description,
-  Heading,
-  Primary,
-  Stories,
-  Title,
-} from "@storybook/blocks";
-import { Fieldset } from "../../components";
-import { FieldsetProps } from "../../components/Fieldset/Fieldset.props";
-import { labelledChoiceFieldArgTypes } from "../../types/forms.args";
-
-const CheckboxMeta: Meta<typeof Checkbox> = {
-  title: "Components/Forms/Checkbox",
-  component: Checkbox,
-  tags: ["autodocs"],
-  argTypes: {
-    ...labelledChoiceFieldArgTypes("HTMLInputElement"),
-  },
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Description>
-            The checkbox component provides users with a switch they can use to
-            select more than one option from a list.
-          </Description>
-          <Primary />
-          <Heading>Props</Heading>
-          <ArgTypes of={CheckboxMeta} />
-          <Stories />
-        </>
-      ),
-    },
-  },
-};
-
-const fieldSetDefaults: FieldsetProps = {
-  legend: "What world of work topics interest you?",
-  errorMessage: "You must choose at least one topic",
-};
-
-const renderCheckboxes = (
-  args: LabelledCheckboxProps,
-  fieldsetArgs: FieldsetProps = fieldSetDefaults
-) => (
-  <Fieldset {...fieldsetArgs}>
-    <Checkbox
-      {...args}
-      labelPlacement="end"
-      labelSize="small"
-      label="Social Justice"
-      name="checkbox-1"
-    />
-    <Checkbox
-      {...args}
-      labelPlacement="end"
-      labelSize="small"
-      label="Decent work"
-      name="checkbox-2"
-    />
-    <Checkbox
-      {...args}
-      labelPlacement="end"
-      labelSize="small"
-      label="Ending child labour"
-      name="checkbox-3"
-    />
-    <Checkbox
-      {...args}
-      labelPlacement="end"
-      labelSize="small"
-      label="Achieving full employment"
-      name="checkbox-4"
-    />
-  </Fieldset>
-);
-
-export const Default: StoryObj<LabelledCheckboxProps> = {
-  args: CheckboxArgs.basic,
-  render: (args) => renderCheckboxes(args),
-};
-
-export const CheckedByDefault: StoryObj<LabelledCheckboxProps> = {
-  args: CheckboxArgs.checked,
-  render: (args) => renderCheckboxes(args),
-};
-
-export const Row: StoryObj<LabelledCheckboxProps> = {
-  args: CheckboxArgs.basic,
-  render: (args) => renderCheckboxes(args),
-};
-
-export const Helper: StoryObj<LabelledCheckboxProps> = {
-  args: CheckboxArgs.basic,
-  render: (args) =>
-    renderCheckboxes(args, {
-      ...fieldSetDefaults,
-      helper: "Choose at least one topic",
-    }),
-};
-
-export const Error: StoryObj<LabelledCheckboxProps> = {
-  args: CheckboxArgs.error,
-  render: (args) => renderCheckboxes(args),
-};
-
-export const Disabled: StoryObj<LabelledCheckboxProps> = {
-  args: CheckboxArgs.basic,
-  render: (args) =>
-    renderCheckboxes(args, { ...fieldSetDefaults, disabled: true }),
-};
-
-export default CheckboxMeta;

package/src/stories/ContextMenu/ContextMenu.stories.tsx

@@ -1,83 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-  Subheading,
-  ArgsTable,
-} from "@storybook/addon-docs";
-import { ContextMenu } from "../../components/ContextMenu";
-import { ContextMenuProps } from "../../components/ContextMenu/ContextMenu.props";
-import contextMenuArgs from "../../components/ContextMenu/ContextMenu.args";
-
-const propsDoc = `
-The ContextMenu receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
-
-| Prop  |  Description  |
-|----------|-------------|
-| \`endsection\` | Boolean - is this at the end of a 'section'? |
-| \`label\` | Label for this link. |
-| \`url\` | URL for this link. |
-`;
-
-const ContextMenuMeta: Meta<typeof ContextMenu> = {
-  title: "Components/Navigation/ContextMenu",
-  component: ContextMenu,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The ContextMenu component is used to display a list of contextual
-            links.
-          </Description>
-          <Primary />
-          <Subheading>ContextMenus with sections</Subheading>
-          <Description>{propsDoc}</Description>
-          <Stories title="Examples"></Stories>
-          <Subheading>Default Props</Subheading>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-};
-
-export default ContextMenuMeta;
-
-/**
- * ContextMenu Template
- *
- * create a Storybook template for this component
- *
- *@param (Object) args - props to be passed to the component
- */
-const ContextMenuTemplate: StoryFn<ContextMenuProps> = (args) => (
-  <ContextMenu {...args} />
-);
-
-export const Basic: StoryFn<ContextMenuProps> = ContextMenuTemplate.bind({});
-
-export const WithSection: StoryFn<ContextMenuProps> = ContextMenuTemplate.bind(
-  {}
-);
-
-// enumerate the props for the variations on the ContextMenu component
-Basic.args = contextMenuArgs.basic;
-Basic.storyName = "Basic";
-
-WithSection.args = contextMenuArgs.withsection;
-WithSection.storyName = "Sectioned";
-WithSection.parameters = {
-  docs: {
-    description: {
-      story:
-        "The Context menu iteams can each be marked, via the `endsection` prop, as a *section*, which display a 100% width bottom border.",
-    },
-  },
-};

package/src/stories/DatePicker/DatePicker.stories.tsx

@@ -1,110 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  Stories,
-  Subheading,
-  ArgTypes,
-} from "@storybook/addon-docs";
-import { DatePicker } from "../../components";
-import DatePickerArgs from "../../components/DatePicker/DatePicker.args";
-import { FormControlPublicProps } from "../../components/FormControl/FormControl.props";
-import { labelledFormFieldArgTypes } from "../../types/forms.args";
-
-const DatePickerMeta: Meta<typeof DatePicker> = {
-  title: "Components/Forms/DatePicker",
-  component: DatePicker,
-  tags: ["autodocs"],
-  argTypes: {
-    max: {
-      description: "The maximum date that can be selected",
-      control: {
-        type: "date",
-      },
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    min: {
-      description: "The minimum date that can be selected",
-      control: {
-        type: "date",
-      },
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    step: {
-      description: "The step value for the date picker",
-      control: {
-        type: "number",
-      },
-      table: {
-        type: {
-          summary: "number",
-        },
-      },
-    },
-    placeholder: {
-      description: "The placeholder text for the date picker",
-      control: {
-        type: "text",
-      },
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    ...labelledFormFieldArgTypes("HTMLInputElement"),
-  },
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Subtitle />
-          <Title />
-          <Description>
-            The DatePicker component allows users to select a date from a
-            calendar.
-          </Description>
-          <Primary />
-          <Subheading>Props</Subheading>
-          <ArgTypes of={DatePickerMeta} />
-          <Stories title="Examples" />
-        </>
-      ),
-    },
-  },
-};
-
-export default DatePickerMeta;
-
-const startFormCtrlProps: FormControlPublicProps = {
-  label: "Select a date",
-  labelPlacement: "top",
-  labelSize: "medium",
-  style: { width: "50%" },
-  errorMessage: "There was an error selecting your date",
-};
-
-export const Basic: StoryObj<typeof DatePicker> = {
-  args: { ...DatePickerArgs.basic, ...startFormCtrlProps },
-  render: (args) => <DatePicker {...args} />,
-};
-
-export const Error: StoryObj<typeof DatePicker> = {
-  args: { ...DatePickerArgs.haserror, ...startFormCtrlProps },
-  render: (args) => <DatePicker {...args} />,
-};
-
-export const Disabled: StoryObj<typeof DatePicker> = {
-  args: { ...DatePickerArgs.basic, disabled: true, ...startFormCtrlProps },
-  render: (args) => <DatePicker {...args} />,
-};

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

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

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

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