@ilo-org/react 0.13.0 → 0.14.0

package/src/stories/Logo/Logo.stories.tsx

@@ -0,0 +1,172 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Logo } from "../../components/Logo";
+import {
+  Title,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  ArgTypes,
+} from "@storybook/blocks";
+import {
+  basic,
+  withSubBrand,
+  withDarkTheme,
+  withLongSubbrand,
+  fluidWidth,
+} from "../../components/Logo/Logo.args";
+import { brand } from "@ilo-org/themes/tokens/brand/base.json";
+
+const LogoMeta: Meta<typeof Logo> = {
+  title: "Components/Brand/Logo",
+  component: Logo,
+  tags: ["autodocs"],
+  argTypes: {
+    src: {
+      control: "object",
+    },
+    alt: {
+      control: "text",
+    },
+    subbrand: {
+      control: "text",
+    },
+    size: {
+      control: "number",
+    },
+    style: {
+      control: "object",
+    },
+    className: {
+      control: "text",
+    },
+    target: {
+      control: "select",
+      options: ["_blank", "_self", "_parent", "_top"],
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Logo component renders an image representing an organization. It
+            can be shown on a light or dark background (theme) and may include
+            an sub-brand, which appears in a "lockup" next to the main logo.
+          </Description>
+          <Primary />
+          <Subheading>Why use this component?</Subheading>
+          <Description>
+            The `Logo` component provides a standard interface for rendering
+            brand-compliant logos in different contexts and backgrounds. It can
+            be rendered at fixed or fluid sizes (widths) and offers a convenient
+            way of handling `light` and `dark` themes (backgrounds).
+          </Description>
+          <Description>
+            It's especially handy for implementing sub-brands, which can be
+            added by means of a single `subbrand` prop. This takes a `string`
+            (the name of the sub-brand) and renders it as a responsive lockup
+            that resizes dynamically together with the logo. This allows you to
+            treat a `Logo` with subbrand as if it were a single image.
+          </Description>
+          <Subheading>Theme</Subheading>
+          <Description>
+            The `theme` prop determines whether the logo should be rendered on a
+            `light` or `dark` background. In order to work, the `src` prop
+            should be an object with `light` and `dark` properties that point to
+            the image files you want to use in either scenario. [See
+            example](/story/components-brand-logo--dark-theme).
+          </Description>
+          <Subheading>Sub-brands</Subheading>
+          <Description>
+            Add a sub-brand by passing a `string` to the `subbrand` prop with
+            the text to appear in the lockup space next to the logo. The
+            font-size of the subbrand will resize automatically to fill the
+            available space without overflowing the lockup. The lockup is
+            responsive, so you can treat the component like an image. [See
+            example](/story/components-brand-logo--long-subrand).
+          </Description>
+          <Subheading>Size</Subheading>
+          <Description>
+            Pass a `number` to the `size` prop to set a fixed with on the Logo
+            component or use `fluid` if you want the component to fill the
+            available space from its parent.
+          </Description>
+          <Stories title="Examples"></Stories>
+          <ArgTypes of={LogoMeta} />
+        </>
+      ),
+    },
+  },
+};
+
+export default LogoMeta;
+
+export const BasicLogo: StoryObj<typeof Logo> = {
+  args: basic,
+  name: "Default",
+  parameters: {
+    docs: {
+      canvas: { sourceState: "shown" },
+    },
+  },
+  argTypes: {
+    subbrand: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const argTypesWithTheme = {
+  theme: {
+    control: "select",
+    options: ["light", "dark"],
+  },
+};
+
+export const SubBrandLogo: StoryObj<typeof Logo> = {
+  args: withSubBrand,
+  name: "Sub-brand",
+  argTypes: argTypesWithTheme,
+};
+
+export const LongSubrand: StoryObj<typeof Logo> = {
+  args: withLongSubbrand,
+  name: "Sub-brand on multiple lines",
+  argTypes: argTypesWithTheme,
+};
+
+export const DarkTheme: StoryObj<typeof Logo> = {
+  args: withDarkTheme,
+  name: "Dark theme",
+  argTypes: argTypesWithTheme,
+  parameters: {
+    backgrounds: {
+      default: "ilo",
+      values: [{ name: "ilo", value: brand["ilo-dark-blue"].value }],
+    },
+  },
+};
+
+export const FluidWidth: StoryObj<typeof Logo> = {
+  args: fluidWidth,
+  name: "Fluid width",
+  parameters: {
+    backgrounds: {
+      default: "ilo",
+      values: [{ name: "ilo", value: brand["ilo-dark-blue"].value }],
+    },
+  },
+  argTypes: {
+    size: { control: "text" },
+    ...argTypesWithTheme,
+  },
+  render: (args) => (
+    <div style={{ width: "600px", border: "1px dotted #fff" }}>
+      <Logo {...args} />
+    </div>
+  ),
+};

package/src/stories/LogoGrid/LogoGrid.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LogoGrid } from "../../components/LogoGrid";
+import {
+  Title,
+  Description,
+  Primary,
+  Stories,
+  ArgTypes,
+} from "@storybook/blocks";
+import {
+  defaultLogoGrid,
+  darkLogoGrid,
+  noLinksGrid,
+} from "../../components/LogoGrid/LogoGrid.args";
+
+const LogoMeta: Meta<typeof LogoGrid> = {
+  title: "Components/Brand/LogoGrid",
+  component: LogoGrid,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Logo Grid component renders a series of logos representing a
+            group of organizations. It can be shown on a light or dark
+            background.
+          </Description>
+          <Primary />
+          <Stories title="Examples"></Stories>
+          <ArgTypes of={LogoMeta} />
+        </>
+      ),
+    },
+  },
+};
+
+export default LogoMeta;
+
+export const basic: StoryObj<typeof LogoGrid> = {
+  args: defaultLogoGrid,
+  parameters: {
+    docs: {
+      canvas: { sourceState: "shown" },
+    },
+  },
+};
+
+export const dark: StoryObj<typeof LogoGrid> = {
+  args: darkLogoGrid,
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+};
+
+export const noLinks: StoryObj<typeof LogoGrid> = {
+  args: noLinksGrid,
+};

package/src/stories/Navigation/Navigation.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
+import * as NavigationStories from "./Navigation.stories.tsx";
+import { Navigation } from "../../components";
+
+<Meta title="Navigation" of={NavigationStories} />
+
+# Global Navigation Example
+
+This global navigation component should be used as the header of the main site.
+
+<Canvas>
+  <Story of={NavigationStories.BasicNavigation} />
+</Canvas>
+
+## Default Props
+
+<ArgsTable of={Navigation} />

package/src/stories/Navigation/Navigation.stories.tsx

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

package/src/stories/Notification/Notification.stories.tsx

@@ -0,0 +1,187 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Subheading,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+} from "@storybook/addon-docs";
+import { Notification } from "../../components/Notification";
+import { NotificationProps } from "../../components/Notification/Notification.props";
+import notificationArgs from "../../components/Notification/Notification.args";
+
+const typeDoc = `
+By changing the \`type\` prop you can set which icon to use with the Notification.
+
+| type   |  Description  |
+|----------|-------------|
+| \`error\` | The Notification alerts user to an error. Border is red with an error icon. |
+| \`info\` | The Notification alerts user to new information. Border is blue with an info icon. |
+| \`success\` | The Notification alerts user to an operation's success. Border is green with a success icon. |
+| \`warning\` | The Notification alerts user to a warning. Border is yellow with a warning icon. |`;
+
+const placementDoc = `
+By changing the \`placement\` prop you can set whether the Notification is displayed inline in the document flow, or highest in the document z-index as a dialog.
+
+| type   |  Description  |
+|----------|-------------|
+| \`dialog\` | The Notification appears highest in the document z-index, outside the doucment flow. |
+| \`inline\` | The Notification appears in the normal document flow. |`;
+
+/**
+ * Notification Story
+ *
+ */
+const NotificationMeta: Meta<typeof Notification> = {
+  title: "Components/Feedback/Notification",
+  component: Notification,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      options: ["error", "info", "success", "warning"],
+      control: { type: "select" },
+    },
+    placement: {
+      options: ["dialog", "inline"],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Notification component presents a dismissible alert. It can
+            appear as an inline alert, which appears in the normal flow of the
+            document, or it can appear as a dialog, highest in the document's
+            z-index.
+          </Description>
+          <Primary />
+          <Subheading>Type</Subheading>
+          <Description>{typeDoc}</Description>
+          <Subheading>Placement</Subheading>
+          <Description>{placementDoc}</Description>
+          <Stories title="Examples"></Stories>
+          <Subheading>Default props</Subheading>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+};
+
+export default NotificationMeta;
+
+/**
+ * Notification Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const NotificationTemplate: StoryFn<NotificationProps> = (args) => (
+  <Notification {...args} />
+);
+
+/**
+ * Notification Instance without CTA
+ *
+ */
+export const BaseNotification: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - CTA is populated
+ *
+ */
+export const NotificationWithCTA: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - error
+ *
+ */
+export const NotificationError: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - success
+ *
+ */
+export const NotificationSuccess: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - warning
+ *
+ */
+export const NotificationWarning: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - info, as dialog
+ *
+ */
+export const DialogNotification: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - CTA is populated, as dialog
+ *
+ */
+export const DialogWithCTA: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - error, as dialog
+ *
+ */
+export const DialogError: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - success, as dialog
+ *
+ */
+export const DialogSuccess: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+/**
+ * Notification Instance - warning, as dialog
+ *
+ */
+export const DialogWarning: StoryFn<NotificationProps> =
+  NotificationTemplate.bind({});
+
+// enumerate the props for the read more component
+BaseNotification.args = notificationArgs.nocta;
+BaseNotification.storyName = "Info";
+
+NotificationWithCTA.args = notificationArgs.hascta;
+NotificationWithCTA.storyName = "Call to action";
+
+NotificationError.args = notificationArgs.error;
+NotificationError.storyName = "Error";
+
+NotificationSuccess.args = notificationArgs.success;
+NotificationSuccess.storyName = "Success";
+
+NotificationWarning.args = notificationArgs.warning;
+NotificationWarning.storyName = "Warning";
+
+DialogNotification.args = notificationArgs.infodialog;
+DialogNotification.storyName = "Info";
+
+DialogWithCTA.args = notificationArgs.hasctadialog;
+DialogWithCTA.storyName = "Dialog with call to action";
+
+DialogError.args = notificationArgs.errordialog;
+DialogError.storyName = "Error dialog";
+
+DialogSuccess.args = notificationArgs.successdialog;
+DialogSuccess.storyName = "Success dialog";
+
+DialogWarning.args = notificationArgs.warningdialog;
+DialogWarning.storyName = "Warning dialog";

package/src/stories/NumberPicker/NumberPicker.stories.tsx

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  ArgsTable,
+  ArgTypes,
+} from "@storybook/addon-docs";
+import { NumberPicker } from "../../components";
+import NumberPickerArgs from "../../components/NumberPicker/NumberPicker.args";
+import { labelledFormFieldArgTypes } from "../../types/forms.args";
+
+const NumberPickerMeta: Meta<typeof NumberPicker> = {
+  title: "Components/Forms/NumberPicker",
+  component: NumberPicker,
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      description: "The placeholder text for the number picker",
+      control: {
+        type: "text",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    ...labelledFormFieldArgTypes("HTMLInputElement"),
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The NumberPicker component allows users to select a number from a
+            list.
+          </Description>
+          <Primary />
+          <Subheading>Props</Subheading>
+          <ArgTypes of={NumberPickerMeta} />
+          <Stories title="Examples" />
+        </>
+      ),
+    },
+  },
+};
+
+export default NumberPickerMeta;
+
+export const Basic: StoryObj<typeof NumberPicker> = {
+  args: NumberPickerArgs.basic,
+  render: (args) => <NumberPicker {...args} />,
+};
+
+export const Error: StoryObj<typeof NumberPicker> = {
+  args: NumberPickerArgs.haserror,
+  render: (args) => <NumberPicker {...args} />,
+};
+
+export const Disabled: StoryObj<typeof NumberPicker> = {
+  args: { ...NumberPickerArgs.basic, disabled: true },
+  render: (args) => <NumberPicker {...args} />,
+};

package/src/stories/Pagination/Pagination.stories.tsx

@@ -0,0 +1,86 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Subheading,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+} from "@storybook/addon-docs";
+import { Pagination } from "../../components/Pagination";
+import { PaginationProps } from "../../components/Pagination/Pagination.props";
+import paginationArgs from "../../components/Pagination/Pagination.args";
+
+const typeDoc = `
+Generic pagination component with a first, previous, last and next button`;
+
+/**
+ * Pagination Story
+ *
+ */
+const PaginationMeta: Meta<typeof Pagination> = {
+  title: "Components/Navigation/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  argTypes: {},
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            Pagination allows users to view lists of content items in chunks or
+            "pages". It's ideal when infinite loading isn't used or in contexts
+            where SEO is important, such as articles or blog posts.
+          </Description>
+          <Primary />
+          <Subheading>Type</Subheading>
+          <Description>{typeDoc}</Description>
+          <Stories title="Examples"></Stories>
+          <Subheading>Default props</Subheading>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+};
+
+export default PaginationMeta;
+
+/**
+ * Pagination Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const PaginationTemplate: StoryFn<PaginationProps> = (args) => (
+  <div
+    style={{
+      width: "100%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    }}
+  >
+    <div
+      style={{
+        width: "100%",
+        maxWidth: "300px",
+      }}
+    >
+      <Pagination {...args} />
+    </div>
+  </div>
+);
+
+/**
+ * Pagination Instance without CTA
+ *
+ */
+export const BasePagination: StoryFn<PaginationProps> = PaginationTemplate.bind(
+  {}
+);
+
+BasePagination.args = paginationArgs.pagination;
+BasePagination.storyName = "Pagination";

package/src/stories/Profile/Profile.stories.tsx

@@ -0,0 +1,64 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  ArgsTable,
+} from "@storybook/addon-docs";
+import { Profile } from "../../components/Profile";
+import { ProfileProps } from "../../components/Profile/Profile.props";
+import profileArgs from "../../components/Profile/Profile.args";
+
+const ProfileMeta: Meta<typeof Profile> = {
+  title: "Components/Content/Profile",
+  component: Profile,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Profile component is used to display information about a person.
+          </Description>
+          <Primary />
+          <Stories title="Examples"></Stories>
+          <Subheading>Default props</Subheading>
+          <ArgsTable></ArgsTable>
+        </>
+      ),
+    },
+  },
+} as Meta<typeof Profile>;
+
+export default ProfileMeta;
+
+const ProfileTemplate: StoryFn<ProfileProps> = (args) => <Profile {...args} />;
+
+export const Basic: StoryFn<ProfileProps> = ProfileTemplate.bind({});
+
+export const HasAll: StoryFn<ProfileProps> = ProfileTemplate.bind({});
+
+export const HasDescription: StoryFn<ProfileProps> = ProfileTemplate.bind({});
+
+export const HasLink: StoryFn<ProfileProps> = ProfileTemplate.bind({});
+
+export const HasRole: StoryFn<ProfileProps> = ProfileTemplate.bind({});
+
+// enumerate the props for the variations on the Profile component
+Basic.args = profileArgs.basic;
+Basic.storyName = "Basic";
+
+HasAll.args = profileArgs.hasall;
+HasAll.storyName = "Detailed";
+
+HasDescription.args = profileArgs.hasdescription;
+HasDescription.storyName = "Description";
+
+HasLink.args = profileArgs.haslink;
+HasLink.storyName = "Link";
+
+HasRole.args = profileArgs.hasrole;
+HasRole.storyName = "Role";