@ilo-org/react 0.13.0 → 0.14.0

package/src/stories/Card/FeatureCard.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  FeatureCard,
+  FeatureCardArgs,
+} from "../../components/Cards/FeatureCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof FeatureCard> = {
+  title: "Components/Cards/Feature Card",
+  component: FeatureCard,
+  tags: ["autodocs"],
+  argTypes: {
+    theme: {
+      options: ["dark", "light"],
+      control: { type: "radio" },
+    },
+    size: {
+      options: ["wide", "narrow", "fluid"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title>Card</Title>
+          <Description>
+            Cards display prominent content of a page. This component is a
+            wrapper around all of the card types in the design system except for
+            the Hero Card. To use it, pass a `type` setting to the card and then
+            pass the appropriate fields for that card type. For more information
+            about the settings you can pass to each card type, see the
+            documentation for that card.
+          </Description>
+          <Primary />
+          <ArgTypes of={CardMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default CardMeta;
+
+export const FeatureCardDefault: StoryObj<typeof FeatureCard> = {
+  args: FeatureCardArgs,
+  name: "Default",
+  render: (args) => <FeatureCard {...args} />,
+};

package/src/stories/Card/MultilinkCard.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  MultilinkCard,
+  MultilinkCardArgs,
+} from "../../components/Cards/MultilinkCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof MultilinkCard> = {
+  title: "Components/Cards/Multilink Card",
+  component: MultilinkCard,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      options: ["wide", "standard", "narrow", "fluid"],
+      control: { type: "radio" },
+    },
+    alignment: {
+      options: ["left", "right"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title>Card</Title>
+          <Description>Cards display prominent content of a page.</Description>
+          <Primary />
+          <ArgTypes of={CardMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default CardMeta;
+
+export const MultilinkCardDefault: StoryObj<typeof MultilinkCard> = {
+  args: MultilinkCardArgs,
+  name: "Default",
+};

package/src/stories/Card/PromoCard.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { PromoCard, PromoCardArgs } from "../../components/Cards/PromoCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof PromoCard> = {
+  title: "Components/Cards/Promo Card",
+  component: PromoCard,
+  tags: ["autodocs"],
+  argTypes: {
+    theme: {
+      options: ["dark", "light"],
+      control: { type: "radio" },
+    },
+    cornercut: {
+      control: { type: "boolean" },
+    },
+    size: {
+      options: ["wide", "standard", "narrow", "fluid"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title>Card</Title>
+          <Description>Cards display prominent content of a page.</Description>
+          <Primary />
+          <ArgTypes of={CardMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default CardMeta;
+
+export const PromoCardDefault: StoryObj<typeof PromoCard> = {
+  args: PromoCardArgs,
+  name: "Default",
+};

package/src/stories/Card/StatCard.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { StatCard, StatCardArgs } from "../../components/Cards/StatCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof StatCard> = {
+  title: "Components/Cards/Stat Card",
+  component: StatCard,
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      options: ["turquoise", "green", "yellow", "blue"],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["standard", "fluid"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title>Card</Title>
+          <Description>Cards display prominent content of a page.</Description>
+          <Primary />
+          <ArgTypes of={CardMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default CardMeta;
+
+export const StatCardDefault: StoryObj<typeof StatCard> = {
+  args: StatCardArgs,
+  name: "Default",
+};

package/src/stories/Card/TextCard.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TextCard, TextCardArgs } from "../../components/Cards/TextCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof TextCard> = {
+  title: "Components/Cards/Text Card",
+  component: TextCard,
+  tags: ["autodocs"],
+  argTypes: {
+    theme: {
+      options: ["dark", "light"],
+      control: { type: "radio" },
+    },
+    size: {
+      options: ["wide", "fluid", "narrow"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title>Card</Title>
+          <Description>Cards display prominent content of a page.</Description>
+          <Primary />
+          <ArgTypes of={CardMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default CardMeta;
+
+export const TextCardDefault: StoryObj<typeof TextCard> = {
+  args: TextCardArgs,
+  name: "Default",
+};

package/src/stories/CardGroup/CardGroup.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
+import * as CardGroupStories from "./CardGroup.stories.tsx";
+import { CardGroup } from "../../components";
+
+<Meta title="CardGroup" of={CardGroupStories} />
+
+# Card Group
+
+Card Group displays a group of Cards.
+
+<Canvas>
+  <Story of={CardGroupStories.FeatureCardGroup} />
+</Canvas>
+
+## Default Props
+
+<ArgsTable of={CardGroup} />

package/src/stories/CardGroup/CardGroup.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CardGroup from "../../components/Cards/CardGroup/CardGroup";
+import CardGroupArgs from "../../components/Cards/CardGroup/CardGroup.args";
+
+const CardGroupMeta: Meta<typeof CardGroup> = {
+  title: "Components/Cards/CardGroup",
+  component: CardGroup,
+};
+
+export default CardGroupMeta;
+
+export const FeatureCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.featureCardGroup,
+  name: "Feature Group",
+};
+
+export const GraphicCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.textCardGroup,
+  name: "Text Group",
+};
+
+export const StatCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.statCardGroup,
+  name: "Stat Group",
+};
+
+export const MultilinkCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.multilinkCardGroup,
+  name: "Multilink Group",
+};
+
+export const GraphicPromoCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.promoCardGroup,
+  name: "Promo Group",
+};
+
+export const DetailCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.detailCardGroup,
+  name: "Detail Group",
+};
+
+export const FactListCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.factListCardGroup,
+  name: "Fact List Group",
+};
+
+export const DataCardGroup: StoryObj<typeof CardGroup> = {
+  args: CardGroupArgs.dataCardGroup,
+  name: "Data Group",
+};

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

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

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

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