@westpac/ui 0.3.0 → 0.5.0

package/src/components/pagination/pagination.component.tsx

@@ -0,0 +1,155 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { PaginationItem } from './components/index.js';
+import { styles as paginationStyles } from './pagination.styles.js';
+import { type PaginationProps } from './pagination.types.js';
+
+export function Pagination({
+  className,
+  pages,
+  tag: Tag = 'nav',
+  role = 'navigation',
+  current,
+  linkComponent,
+  infinite = false,
+  onChange,
+  backLabel = 'Back',
+  nextLabel = 'Next',
+  ...props
+}: PaginationProps) {
+  const styles = paginationStyles({});
+
+  const generateHandleOnClickBackwards = useCallback(
+    (
+        current: number,
+        infinite: boolean,
+        forwardOnly: boolean,
+        onChange: (page: number) => any,
+        pages: PaginationProps['pages'],
+      ) =>
+      () => {
+        if (infinite && forwardOnly) {
+          return onChange(pages.length);
+        }
+        if (!forwardOnly) {
+          return onChange(current - 1);
+        }
+      },
+    [],
+  );
+
+  const paginationBackProps = useMemo(() => {
+    const fowardOnly = (current || 1) <= 1;
+    const defaultBackProps = {
+      disabled: !infinite && fowardOnly,
+      firstItem: true,
+    };
+    if (defaultBackProps.disabled) {
+      return {
+        ...defaultBackProps,
+        tag: 'button',
+      } as const;
+    }
+    if (onChange) {
+      return {
+        ...defaultBackProps,
+        tag: linkComponent || 'button',
+        ...(current && {
+          onClick: generateHandleOnClickBackwards(current, infinite, fowardOnly, onChange, pages),
+        }),
+      };
+    }
+    return {
+      ...defaultBackProps,
+      tag: linkComponent || 'a',
+      href: fowardOnly ? pages[pages.length - 1].href : pages[(current || 0) - 2]?.href,
+    };
+  }, [current, onChange, linkComponent, pages, infinite]);
+
+  const generateHandleOnClickForward = useCallback(
+    (current: number, infinite: boolean, backwardsOnly: boolean, onChange: (page: number) => any) => () => {
+      if (infinite && backwardsOnly) {
+        return onChange(1);
+      }
+      if (backwardsOnly) {
+        return;
+      }
+      return onChange(current + 1);
+    },
+    [],
+  );
+
+  const paginationNextProps = useMemo(() => {
+    const backwardsOnly = (current || 1) >= pages.length;
+    const defaultNextProps = {
+      disabled: !infinite && backwardsOnly,
+      tag: linkComponent,
+    };
+    if (defaultNextProps.disabled) {
+      return {
+        ...defaultNextProps,
+        tag: 'button',
+      } as const;
+    }
+    if (onChange) {
+      return {
+        ...defaultNextProps,
+        tag: linkComponent || 'button',
+        ...(current && {
+          onClick: generateHandleOnClickForward(current, infinite, backwardsOnly, onChange),
+        }),
+      };
+    }
+    return {
+      ...defaultNextProps,
+      tag: linkComponent || 'a',
+      href: backwardsOnly ? pages[0].href : pages[current || 0]?.href,
+    };
+  }, [current, onChange, linkComponent, pages, infinite]);
+
+  return (
+    <Tag className={styles.base({ className })} role={role} {...props}>
+      <ul className={styles.ul({})}>
+        <li>
+          <PaginationItem {...paginationBackProps}>{backLabel}</PaginationItem>
+        </li>
+        {pages.map((page, index) => {
+          const commonProps = {
+            active: (current || 0) === index + 1,
+          };
+
+          return (
+            <li key={index}>
+              {'href' in page ? (
+                <PaginationItem {...commonProps} tag={linkComponent || 'a'} href={page.href}>
+                  {page.text}
+                </PaginationItem>
+              ) : (
+                <PaginationItem
+                  {...commonProps}
+                  tag={linkComponent || 'button'}
+                  onClick={
+                    onChange &&
+                    (() => {
+                      onChange(index + 1);
+                    })
+                  }
+                >
+                  {page.text}
+                </PaginationItem>
+              )}
+            </li>
+          );
+        })}
+        <li>
+          <PaginationItem {...paginationNextProps}>{nextLabel}</PaginationItem>
+        </li>
+      </ul>
+      {current && (
+        <span className="sr-only" role="status">
+          Page {current}
+        </span>
+      )}
+    </Tag>
+  );
+}

package/src/components/pagination/pagination.hooks.ts

@@ -0,0 +1,40 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { type PaginationHookProps } from './pagination.types.js';
+
+export const usePagination = ({ defaultCurrent = 1, pages, infinite = false }: PaginationHookProps) => {
+  const [currentPage, setCurrentPage] = useState<number>(defaultCurrent);
+
+  const next = useCallback(() => {
+    setCurrentPage(currentPage => {
+      const cannotGoForward = currentPage >= pages.length;
+      if (infinite && cannotGoForward) {
+        return 1;
+      }
+      return cannotGoForward ? currentPage : currentPage + 1;
+    });
+  }, [pages]);
+
+  const previous = useCallback(() => {
+    setCurrentPage(currentPage => {
+      const cannotGoBackwards = currentPage <= 1;
+      if (infinite && cannotGoBackwards) {
+        return pages.length;
+      }
+      return cannotGoBackwards ? currentPage : currentPage - 1;
+    });
+  }, [pages]);
+
+  const selectedPage = useMemo(() => {
+    return pages[currentPage - 1];
+  }, [pages, currentPage]);
+
+  return {
+    selectedPage,
+    currentPage,
+    setCurrentPage,
+    next,
+    previous,
+    pages,
+  };
+};

package/src/components/pagination/pagination.stories.tsx

@@ -0,0 +1,161 @@
+import { action } from '@storybook/addon-actions';
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
+import { Button } from '../index.js';
+
+import { Pagination } from './pagination.component.js';
+import { usePagination } from './pagination.hooks.js';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Example/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Button usage example
+ */
+export const DefaultStory: any = {
+  args: {
+    current: 1,
+    onChange: action('onChange'),
+    pages: [
+      {
+        text: '1',
+      },
+      {
+        text: '2',
+      },
+      {
+        text: '3',
+      },
+    ],
+  },
+};
+
+/**
+ * > Link usage example
+ */
+export const AsLinkStory: any = {
+  args: {
+    current: 1,
+    onChange: undefined,
+    pages: [
+      {
+        text: '1',
+        href: '#page-1',
+      },
+      {
+        text: '2',
+        href: '#page-2',
+      },
+      {
+        text: '3',
+        href: '#page-3',
+      },
+    ],
+  },
+};
+
+/**
+ * > Using useState as example
+ */
+export const ExampleWithState = () => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      current={page}
+      onChange={changedPage => {
+        setPage(changedPage);
+      }}
+      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
+    />
+  );
+};
+
+/**
+ * > Using useState as example
+ */
+export const ExampleWithInfiniteState = () => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      current={page}
+      infinite
+      onChange={changedPage => {
+        setPage(changedPage);
+      }}
+      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
+    />
+  );
+};
+
+/**
+ * > Using custom back and next label
+ */
+export const ExampleWithCustomBackAndNextLabel = () => {
+  const [page, setPage] = useState(1);
+
+  return (
+    <Pagination
+      current={page}
+      backLabel="Custom back"
+      nextLabel="Custom next"
+      onChange={changedPage => {
+        setPage(changedPage);
+      }}
+      pages={[{ text: '1' }, { text: '2' }, { text: '3' }]}
+    />
+  );
+};
+
+/**
+ * > Using use pagination hook
+ */
+export const ExampleWithUsePagination = () => {
+  const { pages, currentPage, setCurrentPage } = usePagination({
+    pages: [{ text: '1' }, { text: '2' }, { text: '3' }],
+  });
+
+  return (
+    <Pagination
+      current={currentPage}
+      backLabel="Custom back"
+      nextLabel="Custom next"
+      infinite
+      onChange={changedPage => {
+        setCurrentPage(changedPage);
+      }}
+      pages={pages}
+    />
+  );
+};
+
+/**
+ * > Using use pagination hook with other components
+ */
+export const ExampleUsePagination = () => {
+  const { next, previous, selectedPage } = usePagination({
+    pages: [{ text: 'Page 1' }, { text: 'Page 2' }, { text: 'Page 3' }],
+    infinite: true,
+  });
+
+  return (
+    <div className="flex items-center">
+      <Button look="link" iconAfter={ArrowLeftIcon} onClick={previous} />
+      <h4>{selectedPage.text}</h4>
+      <Button look="link" iconAfter={ArrowRightIcon} onClick={next} />
+    </div>
+  );
+};

package/src/components/pagination/pagination.styles.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'overflow-hidden rounded border border-border',
+      ul: 'flex',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/pagination/pagination.types.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { type PaginationItemProps } from './components/index.js';
+import { styles } from './pagination.styles.js';
+
+export type PageProps = {
+  href: string;
+  text: ReactNode;
+};
+
+export type PaginationAsLinkProps = {
+  /**
+   * on page change
+   */
+  onChange?: never;
+  /**
+   * Pages items
+   */
+  pages: PageProps[];
+};
+
+export type PaginationAsButtonProps = {
+  /**
+   * on page change
+   */
+  onChange: (page: number) => any;
+  /**
+   * Pages items
+   */
+  pages: Omit<PageProps, 'href'>[];
+};
+
+export type PaginationHookProps = {
+  defaultCurrent?: number;
+  infinite?: boolean;
+  pages: (Omit<PageProps, 'href'> & { href?: string })[];
+};
+
+export type PaginationProps = {
+  /**
+   * Back label
+   */
+  backLabel?: ReactNode;
+  /**
+   * Current page
+   */
+  current?: number;
+  /**
+   * Carousel feature
+   */
+  infinite?: boolean;
+  /**
+   * Link component to render
+   */
+  linkComponent?: PaginationItemProps['tag'];
+  /**
+   * Next label
+   */
+  nextLabel?: ReactNode;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & (PaginationAsLinkProps | PaginationAsButtonProps) &
+  VariantProps<typeof styles> &
+  Omit<HTMLAttributes<Element>, 'onChange'>;

package/src/components/panel/components/body/body.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { styles as bodyStyles } from './body.styles.js';
+import { type BodyProps } from './body.types.js';
+
+export function Body({ className, children, ...props }: BodyProps) {
+  const styles = bodyStyles({});
+  return (
+    <div className={styles.base({ className })} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/panel/components/body/body.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: { base: 'typography-body-10 p-4 max-xsl:px-2' },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/panel/components/body/body.types.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+
+export type BodyProps = HTMLAttributes<Element>;

package/src/components/panel/components/body/index.ts

@@ -0,0 +1,2 @@
+export { Body } from './body.component.js';
+export { type BodyProps } from './body.types.js';

package/src/components/panel/components/footer/footer.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { styles as footerStyles } from './footer.styles.js';
+import { type FooterProps } from './footer.types.js';
+
+export function Footer({ className, children, ...props }: FooterProps) {
+  const styles = footerStyles();
+  return (
+    <div className={styles.base({ className })} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/panel/components/footer/footer.styles.ts

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'border-t-1 border-0 border-t border-border bg-light px-4 py-[0.625rem] max-xsl:px-2',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/panel/components/footer/footer.types.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+
+export type FooterProps = HTMLAttributes<Element>;

package/src/components/panel/components/footer/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from './footer.component.js';
+export { type FooterProps } from './footer.types.js';

package/src/components/panel/components/index.ts

@@ -0,0 +1,2 @@
+export * from './body/index.js';
+export * from './footer/index.js';

package/src/components/panel/index.ts

@@ -0,0 +1,2 @@
+export { Panel } from './panel.component.js';
+export { type PanelProps } from './panel.types.js';

package/src/components/panel/panel.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Body, Footer } from './components/index.js';
+import { styles as panelStyles } from './panel.styles.js';
+import { type PanelProps } from './panel.types.js';
+
+export function Panel({ className, children, heading, headingTag: Tag = 'h1', look = 'hero', ...props }: PanelProps) {
+  const styles = panelStyles({ look });
+  return (
+    <div className={styles.base({ className })} {...props}>
+      <Tag className={styles.header()}>{heading}</Tag>
+      {children}
+    </div>
+  );
+}
+Panel.Body = Body;
+Panel.Footer = Footer;

package/src/components/panel/panel.stories.tsx

@@ -0,0 +1,156 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Table } from '../table/index.js';
+
+import { Panel } from './panel.component.js';
+
+const meta: Meta<typeof Panel> = {
+  title: 'Example/Panel',
+  component: Panel,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    heading: 'Panel title',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: [
+      <Panel.Body>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
+        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
+        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </Panel.Body>,
+      <Panel.Footer>Panel footer</Panel.Footer>,
+    ],
+  },
+};
+
+/**
+ * > Faint look example
+ */
+export const FaintLookPanel: Story = {
+  args: {
+    look: 'faint',
+    children: [
+      <Panel.Body>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
+        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
+        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </Panel.Body>,
+      <Panel.Footer>Panel footer</Panel.Footer>,
+    ],
+  },
+};
+
+/**
+ * > Example using a table
+ */
+export const PanelWithTable: Story = {
+  args: {
+    children: [
+      <Table>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </Table>,
+    ],
+  },
+};
+
+/**
+ * > Example using a table with a body and a panel footer
+ */
+export const PanelWithTableAndBody: Story = {
+  args: {
+    children: [
+      <Panel.Body>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora officiis officia omnis aperiam voluptate
+        suscipit, laudantium praesentium quas consequatur placeat, perferendis eligendi saepe in unde sequi dolores
+        excepturi doloremque autem! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </Panel.Body>,
+      <Table>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </Table>,
+      <Panel.Footer>Panel footer</Panel.Footer>,
+    ],
+  },
+};