@westpac/ui 0.2.0 → 0.3.0

package/src/components/symbol/symbol.stories.tsx

@@ -0,0 +1,76 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { SymbolProps, WBCLogo, WBCMultibrandSmallLogo } from './index.js';
+import * as symbols from './index.js';
+
+const meta: Meta<typeof Symbol> = {
+  title: 'Example/Symbol',
+  component: WBCLogo,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};
+
+export const Offset = () => (
+  <div>
+    <p>Left</p>
+    <WBCMultibrandSmallLogo className="border border-dashed" />
+    <br />
+    <br />
+    <p>Center</p>
+    <WBCMultibrandSmallLogo align="center" className="border border-dashed" />
+    <br />
+    <br />
+    <p>Right</p>
+    <WBCMultibrandSmallLogo align="right" className="border border-dashed" />
+  </div>
+);
+
+export const AllSymbols = () => {
+  const allSymbols = Object.entries(symbols).reduce(
+    (curr, [key, symbol]) => (key.includes('Symbol') ? { ...curr, [key]: symbol } : curr),
+    {} as { [index: string]: React.FC<SymbolProps> },
+  );
+
+  return (
+    <div className="grid grid-cols-4 gap-5">
+      {Object.entries(allSymbols).map(([key, Symbol]) => (
+        <div key={key} className=" flex flex-col items-center justify-end">
+          <Symbol />
+          <p className="mt-2">{key}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const AllLogos = () => {
+  const allLogos = Object.entries(symbols).reduce(
+    (curr, [key, symbol]) => (key.includes('Logo') ? { ...curr, [key]: symbol } : curr),
+    {} as { [index: string]: React.FC<SymbolProps> },
+  );
+
+  return (
+    <div className="grid grid-cols-4 gap-5">
+      {Object.entries(allLogos).map(([key, Logo]) => (
+        <div key={key} className=" flex flex-col items-center justify-end">
+          <Logo />
+          <p className="mt-2">{key}</p>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/symbol/symbol.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'inline-block shrink-0 align-middle leading-none',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/symbol/symbol.types.ts

@@ -0,0 +1,33 @@
+import { type SVGAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './symbol.styles.js';
+
+export type Align = 'left' | 'center' | 'right';
+
+export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset'> & {
+  /**
+   * SVG alignment
+   */
+  align?: Align;
+  /**
+   * Symbol copyright year
+   */
+  copyrightYear?: string;
+  /**
+   * Symbol offset alignment array i.e. [left, center, right]
+   */
+  offset?: Array<number | null>;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+  /**
+   * SVG viewBox height
+   */
+  viewBoxHeight?: number;
+  /**
+   * SVG viewBox width
+   */
+  viewBoxWidth?: number;
+} & VariantProps<typeof styles>;

package/src/components/symbol/symbol.utils.ts

@@ -0,0 +1,12 @@
+import { type Align } from './symbol.types.js';
+
+export function getTransform({ offset, align }: { align: Align; offset: (number | null)[] }) {
+  const alignMap = {
+    left: offset[0],
+    center: offset[1],
+    right: offset[2],
+  };
+  const translate = alignMap[align];
+
+  return translate ? `translate(${translate})` : '';
+}

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

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

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

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

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

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

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

package/src/components/table/components/caption/caption.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './caption.styles.js';
+import { type CaptionProps } from './caption.types.js';
+
+export function Caption({ className, children, ...props }: CaptionProps) {
+  return (
+    <caption className={styles({ className })} {...props}>
+      {children}
+    </caption>
+  );
+}

package/src/components/table/components/caption/caption.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'typography-body-8 mb-2 text-left font-light',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/table/components/caption/caption.types.ts

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

package/src/components/table/components/caption/index.ts

@@ -0,0 +1,2 @@
+export { Caption } from './caption.component.js';
+export { type CaptionProps } from './caption.types.js';

package/src/components/table/components/cell/cell.component.tsx

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+
+import { TableContext } from '../../table.component.js';
+
+import { styles as cellStyles } from './cell.styles.js';
+import { type CellProps } from './cell.types.js';
+
+export function Cell({ className, children, highlighted, highlightStart, ...props }: CellProps) {
+  const { bordered } = useContext(TableContext);
+  const styles = cellStyles({ bordered, highlighted, highlightStart });
+  return (
+    <td className={styles.base({ className })} {...props}>
+      {children}
+    </td>
+  );
+}

package/src/components/table/components/cell/cell.styles.ts

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'typography-body-10 border-border border border-x-0 border-b-[1px] border-t-0 p-2 text-left align-bottom',
+    },
+    variants: {
+      bordered: {
+        true: { base: 'border-x-1' },
+      },
+      highlighted: { true: { base: 'border-b-primary border border-b-[3px]' } },
+      highlightStart: { true: { base: 'border-l-primary border border-b-[3px] border-l-[6px]' } },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/table/components/cell/cell.types.ts

@@ -0,0 +1,14 @@
+import { TdHTMLAttributes } from 'react';
+
+export type CellProps = {
+  /**
+   * Should be `true` if cell is start of highlight
+   */
+  highlightStart?: boolean;
+  /**
+   * Should be `true` if cell should be highlighted
+   * If cell is first cell in a highlight block highlightStart should also be `true`
+   * If multiple cells need to be highlighted it may be easier to pass array of cells through Row
+   */
+  highlighted?: boolean;
+} & TdHTMLAttributes<HTMLTableCellElement>;

package/src/components/table/components/cell/index.ts

@@ -0,0 +1,2 @@
+export { Cell } from './cell.component.js';
+export { type CellProps } from './cell.types.js';

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

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+
+import { TableContext } from '../../table.component.js';
+
+import { styles as footerStyles } from './footer.styles.js';
+import { type FooterProps } from './footer.types.js';
+
+export function Footer({ className, children, colspan, ...props }: FooterProps) {
+  const { bordered } = useContext(TableContext);
+  const styles = footerStyles({ bordered });
+  return (
+    <tfoot {...props}>
+      <tr>
+        <td className={styles.base({ className })} colSpan={colspan}>
+          {children}
+        </td>
+      </tr>
+    </tfoot>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: { base: 'text-muted typography-body-10 p-2 text-left font-light' },
+    variants: {
+      bordered: {
+        true: { base: 'border-border border' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+
+export type FooterProps = {
+  /**
+   * Span for footer, should be same length as amount of columns in table
+   */
+  colspan: number;
+} & HTMLAttributes<HTMLTableSectionElement>;

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

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

package/src/components/table/components/header/header.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './header.styles.js';
+import { type HeaderProps } from './header.types.js';
+
+export function Header({ className, children, ...props }: HeaderProps) {
+  return (
+    <thead className={styles({ className })} {...props}>
+      {children}
+    </thead>
+  );
+}

package/src/components/table/components/header/header.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/table/components/header/header.types.ts

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

package/src/components/table/components/header/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './header.component.js';
+export { type HeaderProps } from './header.types.js';

package/src/components/table/components/header-cell/header-cell.component.tsx

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+
+import { TableContext } from '../../table.component.js';
+
+import { styles as headerCellStyles } from './header-cell.styles.js';
+import { type HeaderCellProps } from './header-cell.types.js';
+
+export function HeaderCell({ className, children, ...props }: HeaderCellProps) {
+  const { bordered } = useContext(TableContext);
+  const styles = headerCellStyles({ bordered });
+  return (
+    <th className={styles.base({ className })} {...props}>
+      {children}
+    </th>
+  );
+}

package/src/components/table/components/header-cell/header-cell.styles.ts

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'text-text typography-body-10 border-hero border border-x-0 border-b-[3px] border-t-0 p-2 text-left align-bottom',
+    },
+    variants: {
+      bordered: {
+        true: { base: 'border-x-1 border-t-1 border-x-border border-t-border' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/table/components/header-cell/header-cell.types.ts

@@ -0,0 +1,3 @@
+import { ThHTMLAttributes } from 'react';
+
+export type HeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;

package/src/components/table/components/header-cell/index.ts

@@ -0,0 +1,2 @@
+export { HeaderCell } from './header-cell.component.js';
+export { type HeaderCellProps } from './header-cell.types.js';

package/src/components/table/components/header-row/header-row.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './header-row.styles.js';
+import { type HeaderRowProps } from './header-row.types.js';
+
+export function HeaderRow({ className, children, ...props }: HeaderRowProps) {
+  return (
+    <tr className={styles({ className })} {...props}>
+      {children}
+    </tr>
+  );
+}

package/src/components/table/components/header-row/header-row.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/table/components/header-row/header-row.types.ts

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

package/src/components/table/components/header-row/index.ts

@@ -0,0 +1,2 @@
+export { HeaderRow } from './header-row.component.js';
+export { type HeaderRowProps } from './header-row.types.js';

package/src/components/table/components/index.ts

@@ -0,0 +1,8 @@
+export * from './body/index.js';
+export * from './caption/index.js';
+export * from './cell/index.js';
+export * from './footer/index.js';
+export * from './header/index.js';
+export * from './header-cell/index.js';
+export * from './header-row/index.js';
+export * from './row/index.js';

package/src/components/table/components/row/index.ts

@@ -0,0 +1,2 @@
+export { Row } from './row.component.js';
+export { type RowProps } from './row.types.js';

package/src/components/table/components/row/row.component.tsx

@@ -0,0 +1,49 @@
+import React, { Children, ReactElement, cloneElement, useContext } from 'react';
+
+import { TableContext } from '../../table.component.js';
+
+import { styles as rowStyles } from './row.styles.js';
+import { type RowProps } from './row.types.js';
+
+const generateHighlightMap = (highlighted: unknown[], tdCount: number) => {
+  const map = Array(tdCount).fill(false);
+
+  highlighted.forEach(highlight => {
+    if (typeof highlight === 'number') {
+      map[highlight] = true;
+    } else if (Array.isArray(highlight)) {
+      map.fill(true, highlight[0], highlight[1] + 1);
+    }
+  });
+
+  return map;
+};
+
+export function Row({ className, children, highlighted, ...props }: RowProps) {
+  let highlightedChildren;
+  const highlightedRow = typeof highlighted === 'boolean';
+
+  if (Array.isArray(highlighted)) {
+    const highlightMap = generateHighlightMap(highlighted, Children.count(children));
+
+    highlightedChildren = Children.map(children, (child, index) => {
+      if (highlightMap[index] === true) {
+        if (index === 0 || highlightMap[index - 1] === false) {
+          return cloneElement(child as ReactElement, { highlightStart: true, highlighted: true });
+        } else {
+          return cloneElement(child as ReactElement, { highlighted: true });
+        }
+      } else {
+        return child;
+      }
+    });
+  }
+
+  const { striped } = useContext(TableContext);
+  const styles = rowStyles({ striped, highlightedRow });
+  return (
+    <tr className={styles.base({ className })} {...props}>
+      {highlightedChildren || children}
+    </tr>
+  );
+}

package/src/components/table/components/row/row.styles.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: { base: 'hover:bg-background' },
+    variants: {
+      striped: { true: { base: 'even:bg-background hover:bg-default' } },
+      highlightedRow: { true: { base: 'border-primary border border-b-[3px] border-l-[6px] border-r-0' } },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/table/components/row/row.types.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+
+export type RowProps = {
+  /**
+   * Should be `true` if entire row should be highlighted
+   * Can pass array of cell positions to highlight multiple cells without adding props manually to cells
+   * See docs for examples how to use array
+   */
+  highlighted?: boolean | unknown[];
+} & HTMLAttributes<HTMLTableRowElement>;

package/src/components/table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from './table.component.js';
+export { type TableProps } from './table.types.js';

package/src/components/table/table.component.tsx

@@ -0,0 +1,30 @@
+import React, { createContext } from 'react';
+
+import { Body, Caption, Cell, Footer, Header, HeaderCell, HeaderRow, Row } from './components/index.js';
+import { styles as tableStyles } from './table.styles.js';
+import { TableContextState, type TableProps } from './table.types.js';
+
+export const TableContext = createContext<TableContextState>({
+  bordered: false,
+  striped: false,
+});
+
+export function Table({ bordered = false, striped = false, children, className, ...props }: TableProps) {
+  const styles = tableStyles({});
+
+  return (
+    <TableContext.Provider value={{ bordered, striped }}>
+      <table className={styles.base({ className })} {...props}>
+        {children}
+      </table>
+    </TableContext.Provider>
+  );
+}
+Table.Body = Body;
+Table.Caption = Caption;
+Table.Cell = Cell;
+Table.Footer = Footer;
+Table.Header = Header;
+Table.HeaderCell = HeaderCell;
+Table.HeaderRow = HeaderRow;
+Table.Row = Row;