@ilo-org/react 0.12.0 → 0.14.0

package/src/components/Navigation/Navigation.tsx

@@ -66,7 +66,7 @@ const Navigation: FC<NavigationProps> = ({
         </div>
       </div>
       <div className={`${baseClass}--logo-bar`}>
-        <div className={`${baseClass}--inner`}>
+        <div className={`${baseClass}--inner ${prefix}--container`}>
           <a href={siteurl} className={`${baseClass}--logo-link`}>
             <img className={`${baseClass}--logo`} src={logo} alt="ILO Logo" />
           </a>
@@ -82,7 +82,7 @@ const Navigation: FC<NavigationProps> = ({
         </div>
       </div>
       <div className={`${baseClass}--navigation`}>
-        <div className={`${baseClass}--inner`}>
+        <div className={`${baseClass}--inner ${prefix}--container`}>
           <div className={`${prefix}--mobile--nav`}>
             <div className={`${prefix}--mobile--nav--logo`}>
               <a href={siteurl} className={`${baseClass}--logo-link`}>
@@ -115,7 +115,7 @@ const Navigation: FC<NavigationProps> = ({
               </button>
             </div>
             <div className={`${prefix}--mobile--nav--language--select`}>
-              <div className={`${baseClass}--inner`}>
+              <div className={`${baseClass}--inner ${prefix}--container`}>
                 <div className={`${prefix}--mobile--subnav--menu`}>
                   <button
                     className={`${prefix}--mobile--subnav--back`}
@@ -193,7 +193,7 @@ const Navigation: FC<NavigationProps> = ({
             className={`${prefix}--subnav`}
             aria-labelledby="secondary-navigation"
           >
-            <div className={`${prefix}--subnav--inner`}>
+            <div className={`${prefix}--subnav--inner ${prefix}--container`}>
               <div className={`${prefix}--mobile--subnav`}>
                 <div className={`${prefix}--mobile--subnav--menu`}>
                   <button
@@ -231,7 +231,7 @@ const Navigation: FC<NavigationProps> = ({
           </nav>
         )}
         <div className={`${prefix}--search-box`}>
-          <div className={`${prefix}--header--inner`}>
+          <div className={`${prefix}--header--inner ${prefix}--container`}>
             <SearchField
               input={searchfield?.input}
               action={searchfield?.action}

package/src/components/Pagination/Pagination.tsx

@@ -84,7 +84,8 @@ const Pagination: FC<PaginationProps> = ({
       </div>
 
       <p className={`${baseClass}--page`}>
-        <span>{currentPage + 1}</span> {pageCountPreposition}{" "}
+        <span>{currentPage + 1}</span>
+        <span>{pageCountPreposition}</span>
         <span>{totalPages}</span>
       </p>
 

package/src/components/index.ts

@@ -41,6 +41,6 @@ export { TableOfContents } from "./TableOfContents";
 export { Footer } from "./Footer";
 export { LocalNav } from "./LocalNav";
 export { Navigation } from "./Navigation";
-export { Card, CardGroup } from "./Cards";
+export { CardGroup } from "./Cards/CardGroup";
 export { Breadcrumb } from "./Breadcrumb";
 export { Tabs } from "./Tabs";

package/src/setup.ts

@@ -0,0 +1,6 @@
+import "@testing-library/jest-dom";
+import "@testing-library/jest-dom/extend-expect";
+import { setProjectAnnotations } from "@storybook/react";
+import * as globalStorybookConfig from "../.storybook/preview";
+
+setProjectAnnotations(globalStorybookConfig);

package/src/stories/Accordion/Accordion.stories.tsx

@@ -0,0 +1,145 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgTypes,
+  Stories,
+} from "@storybook/blocks";
+import {
+  Accordion,
+  AccordionButton,
+  AccordionPanel,
+  AccordionItem,
+} from "../../components/Accordion";
+import { AccordionProps } from "../../components/Accordion/Accordion.props";
+import { large } from "../../components/Accordion/Accordion.args";
+
+/**
+ * Accordion Story
+ *
+ */
+const AccordionMeta: Meta<typeof Accordion> = {
+  title: "Components/Content/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  subcomponents: {
+    AccordionItem,
+    AccordionButton,
+    AccordionPanel,
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Subtitle />
+          <Title />
+          <Description>
+            The accordion component allows the user to show and hide sections of
+            related content on a page. Click the accordions below to
+            expand/collapse the accordion content.
+          </Description>
+          <Primary />
+          <Stories title="Examples"></Stories>
+          <ArgTypes />
+        </>
+      ),
+    },
+  },
+};
+
+export default AccordionMeta;
+
+//@TODO: We should just use the list component for this
+
+const DefaultAccordion = (args: AccordionProps) => (
+  <Accordion {...args}>
+    <AccordionItem id="l1">
+      <AccordionButton>Topics</AccordionButton>
+      <AccordionPanel>
+        <div style={{ padding: "20px" }}>
+          <ul className="ilo--list--unordered">
+            <li>Employment Promotion and Job Creation</li>
+            <li>Social Protection</li>
+            <li>International Labour Standards</li>
+            <li>Social Dialogue and Tripartism</li>
+          </ul>
+        </div>
+      </AccordionPanel>
+    </AccordionItem>
+    <AccordionItem id="l2">
+      <AccordionButton>Sectors</AccordionButton>
+      <AccordionPanel>
+        <div style={{ padding: "20px" }}>
+          <ul className="ilo--list--unordered">
+            <li>Agriculture, Forestry, and Fishing</li>
+            <li>Construction</li>
+            <li>Manufacturing</li>
+            <li>Transport and Storage</li>
+            <li>Wholesale and Retail Trade</li>
+            <li>Information and Communication</li>
+          </ul>
+        </div>
+      </AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+const Default: StoryObj<typeof DefaultAccordion> = {
+  name: "Default",
+  args: large,
+  render: (args) => <DefaultAccordion {...args} />,
+};
+
+const Scrollable: StoryObj<typeof DefaultAccordion> = {
+  name: "Scrollable",
+  args: large,
+  render: (args) => (
+    <Accordion {...args}>
+      <AccordionItem id="l1">
+        <AccordionButton>Topics</AccordionButton>
+        <AccordionPanel scroll>
+          <div style={{ padding: "20px" }}>
+            <ul className="ilo--list--unordered">
+              <li>Employment Promotion and Job Creation</li>
+              <li>Social Protection</li>
+              <li>International Labour Standards</li>
+              <li>Social Dialogue and Tripartism</li>
+              <li>Occupational Safety and Health</li>
+              <li>Labor Migration</li>
+              <li>Child Labour and Forced Labour Elimination</li>
+              <li>Gender Equality and Non-Discrimination</li>
+              <li>Decent Work</li>
+              <li>Wages and Working Hours</li>
+              <li>Social Security</li>
+              <li>Green Jobs</li>
+            </ul>
+          </div>
+        </AccordionPanel>
+      </AccordionItem>
+      <AccordionItem id="l2">
+        <AccordionButton>Sectors</AccordionButton>
+        <AccordionPanel scroll>
+          <div style={{ padding: "20px" }}>
+            <ul className="ilo--list--unordered">
+              <li>Agriculture, Forestry, and Fishing</li>
+              <li>Construction</li>
+              <li>Manufacturing</li>
+              <li>Transport and Storage</li>
+              <li>Wholesale and Retail Trade</li>
+              <li>Information and Communication</li>
+              <li>Finance and Insurance</li>
+              <li>Health and Social Work</li>
+              <li>Educational Services</li>
+              <li>Public Administration and Defense</li>
+              <li>Other Services</li>
+            </ul>
+          </div>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export { Default, Scrollable };

package/src/stories/Breadcrumb/Breadcrumb.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
+import * as BreadcrumbStories from "./Breadcrumb.stories.tsx";
+import { Breadcrumb } from "../../components";
+
+<Meta title="Breadcrumb" of={BreadcrumbStories} />
+
+# Breadcrumb
+
+A component for displaying links in a "breadcrumb" style.
+
+<Canvas>
+  <Story of={BreadcrumbStories.BasicBreadcrumb} />
+</Canvas>
+
+## Default Props
+
+<ArgsTable of={Breadcrumb} />

package/src/stories/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Breadcrumb } from "../../components/Breadcrumb";
+import BreadcrumbArgs from "../../components/Breadcrumb/Breadcrumb.args";
+
+const BreadcrumbMeta: Meta<typeof Breadcrumb> = {
+  title: "Components/Navigation/Breadcrumb",
+  component: Breadcrumb,
+};
+
+export default BreadcrumbMeta;
+
+export const BasicBreadcrumb: StoryObj<typeof Breadcrumb> = {
+  args: BreadcrumbArgs.basic,
+  name: "Basic",
+};
+
+export const FiveLinksBreadcrumb: StoryObj<typeof Breadcrumb> = {
+  args: BreadcrumbArgs.fiveLinks,
+  name: "Five Links",
+};

package/src/stories/Button/Button.mdx

@@ -0,0 +1,94 @@
+import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
+import * as ButtonStories from "./Button.stories.tsx";
+import { Button, GlobalProvider } from "../../components";
+
+<Meta title="Button" of={ButtonStories} />
+
+# Button
+
+Buttons allow users to take actions like submitting a form or opening a modal window. They can also be used as links that will navigate users to different pages.
+
+<Canvas>
+  <Story of={ButtonStories.PrimaryBtn} />
+  <Story of={ButtonStories.SecondaryBtn} />
+  <Story of={ButtonStories.TertiaryBtn} />
+  <Story of={ButtonStories.AlertBtn} />
+  <Story of={ButtonStories.IconBtn} />
+  <Story of={ButtonStories.DisabledBtn} />
+</Canvas>
+
+## Button sizes
+
+Buttons come in three sizes: `large`, `medium` and `small`. The default size is `large`.
+
+<div style={{ margin: "0 0 40px" }}>
+  <Button
+    type="primary"
+    size="large"
+    label="Large"
+    style={{
+      marginRight: "1rem",
+      display: "table-cell",
+      verticalAlign: "bottom",
+    }}
+  />
+  <Button
+    type="primary"
+    size="medium"
+    label="Medium"
+    style={{
+      marginRight: "1rem",
+      display: "table-cell",
+      verticalAlign: "bottom",
+    }}
+  />
+  <Button
+    type="primary"
+    size="small"
+    label="Small"
+    style={{
+      marginRight: "1rem",
+      display: "table-cell",
+      verticalAlign: "bottom",
+    }}
+  />
+</div>
+
+## Buttons with icons
+
+Buttons can have icons. See the [complete list](https://github.com/international-labour-organization/designsystem/blob/develop/packages/icons/icons.yml) of icons available. By changing the props you can set the icon to use, and set its position in the button. Additonally, you can set the `icononly` prop to `true` if you want the button's label to be visually hidden.
+
+<div style={{ display: "flex", flexFlow: "row", margin: "0 0 40px" }}>
+  <Button
+    type="secondary"
+    icon="add"
+    label="Icon left"
+    style={{ marginRight: "1rem" }}
+  />
+  <Button
+    type="secondary"
+    icon="add"
+    iconPosition="right"
+    label="Icon right"
+    style={{ marginRight: "1rem" }}
+  />
+  <Button
+    type="secondary"
+    icon="add"
+    label="Icon Only"
+    icononly
+    style={{ marginRight: "1rem" }}
+  />
+</div>
+
+## Buttons as links
+
+Populating the `url` prop with a valid url and/or an anchor to an id in the current document (e.g. `#my-id`) will result in the same design being displayed, but "under the hood," in the html, an `<a>` element will be used, allowing link functionality. When this is populated, the `target` prop is also read. Populating this, sets the `target` attribute of the anchor tag, which opens the link url in a new tab or window.
+
+<Canvas>
+  <Story of={ButtonStories.LinkBtn} />
+</Canvas>
+
+## Default Props
+
+<ArgsTable of={Button} />

package/src/stories/Button/Button.stories.tsx

@@ -0,0 +1,68 @@
+import { Button, buttonArgs } from "../../components/Button";
+import { Meta, StoryObj } from "@storybook/react";
+
+const argTypes = {
+  size: {
+    options: ["large", "medium", "small"],
+    control: { type: "select" },
+  },
+  type: {
+    options: ["primary", "secondary", "tertiary", "alert"],
+    control: { type: "select" },
+  },
+  icononly: {
+    options: [true, false],
+    control: { type: "boolean" },
+  },
+  iconPosition: {
+    options: ["left", "center", "right"],
+    control: { type: "select" },
+  },
+  opensmodal: {
+    options: [true, false],
+    control: { type: "boolean" },
+  },
+};
+
+const ButtonMeta: Meta<typeof Button> = {
+  title: "Components/User Interface/Button",
+  component: Button,
+  argTypes,
+};
+
+export default ButtonMeta;
+
+export const PrimaryBtn: StoryObj<typeof Button> = {
+  args: buttonArgs.primary,
+  name: "Primary",
+};
+
+export const SecondaryBtn: StoryObj<typeof Button> = {
+  args: buttonArgs.secondary,
+  name: "Secondary",
+};
+
+export const TertiaryBtn: StoryObj<typeof Button> = {
+  args: buttonArgs.tertiary,
+  name: "Tertiary",
+};
+
+export const AlertBtn: StoryObj<typeof Button> = {
+  args: buttonArgs.alert,
+  name: "Alert",
+};
+
+export const IconBtn: StoryObj<typeof Button> = {
+  args: buttonArgs.icon,
+  name: "Icon",
+};
+
+export const DisabledBtn: StoryObj<typeof Button> = {
+  args: buttonArgs.disabled,
+  name: "Disabled",
+};
+
+export const LinkBtn: StoryObj<typeof Button> = {
+  name: "Link",
+  args: buttonArgs.link,
+};

package/src/stories/Callout/Callout.mdx

@@ -0,0 +1,35 @@
+import { Meta, Story, Canvas, ArgsTable, Unstyled } from "@storybook/blocks";
+import * as CalloutStories from "./Callout.stories.tsx";
+import { Callout } from "../../components";
+
+<Meta title="Callout" of={CalloutStories} />
+
+# Callout
+
+The Callout component provides an inline alert or message to end users.
+
+<Canvas>
+  <Story of={CalloutStories.InfoCallout} />
+</Canvas>
+
+## Callout type
+
+You can change the coloring of the callout with the `type` prop. The default is `info`.
+
+## Examples
+
+<Canvas>
+  <Story of={CalloutStories.SuccessCallout} />
+</Canvas>
+
+<Canvas>
+  <Story of={CalloutStories.WarningCallout} />
+</Canvas>
+
+<Canvas>
+  <Story of={CalloutStories.ErrorCallout} />
+</Canvas>
+
+## Default Props
+
+<ArgsTable of={Callout} />

package/src/stories/Callout/Callout.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Callout, calloutArgs } from "../../components/Callout";
+
+const CalloutMeta: Meta<typeof Callout> = {
+  title: "Components/Feedback/Callout",
+  component: Callout,
+  argTypes: {
+    isCollapsible: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+    isOpen: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+    type: {
+      options: ["info", "error", "success", "warning"],
+      control: { type: "select" },
+    },
+  },
+};
+
+export default CalloutMeta;
+
+export const InfoCallout: StoryObj<typeof Callout> = {
+  args: calloutArgs.baseArgs,
+  name: "Info",
+};
+
+export const SuccessCallout: StoryObj<typeof Callout> = {
+  args: calloutArgs.success,
+  name: "Success",
+};
+
+export const WarningCallout: StoryObj<typeof Callout> = {
+  args: calloutArgs.warning,
+  name: "Warning",
+};
+
+export const ErrorCallout: StoryObj<typeof Callout> = {
+  args: calloutArgs.error,
+  name: "Error",
+};

package/src/stories/Card/DataCard.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DataCard, DataCardArgs } from "../../components/Cards/DataCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof DataCard> = {
+  title: "Components/Cards/Data Card",
+  component: DataCard,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      options: ["narrow", "wide", "fluid"],
+      control: { type: "radio" },
+    },
+    columns: {
+      options: ["one", "two"],
+      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 DataCardDefault: StoryObj<typeof DataCard> = {
+  args: DataCardArgs,
+  name: "Default",
+};

package/src/stories/Card/DetailCard.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { DetailCard, DetailCardArgs } from "../../components/Cards/DetailCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof DetailCard> = {
+  title: "Components/Cards/Detail Card",
+  component: DetailCard,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      options: ["wide", "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 DetailCardDefault: StoryObj<typeof DetailCard> = {
+  args: DetailCardArgs,
+  name: "Default",
+};

package/src/stories/Card/FactlistCard.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  FactlistCard,
+  FactlistCardArgs,
+} from "../../components/Cards/FactlistCard";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+
+const CardMeta: Meta<typeof FactlistCard> = {
+  title: "Components/Cards/Factlist Card",
+  component: FactlistCard,
+  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.</Description>
+          <Primary />
+          <ArgTypes of={CardMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default CardMeta;
+
+export const FactListCardDefault: StoryObj<typeof FactlistCard> = {
+  args: FactlistCardArgs,
+  name: "Default",
+};