@moduk/frontend 1.2.1 → 1.3.0

package/react/internal/Link/Link.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ComponentType, ElementType, JSX } from 'react';
+type LinkProps<T extends ElementType> = {
+    component?: T;
+} & ComponentPropsWithoutRef<T>;
+type LinksComponentType = Extract<ElementType, 'a' | ComponentType>;
+export interface LinkComponent<Props = object> {
+    <T extends LinksComponentType = 'a'>(props: LinkProps<T> & {
+        ref?: ComponentPropsWithRef<T>['ref'];
+    } & Props): JSX.Element | null;
+    displayName?: string | undefined;
+}
+export declare const LinkBase: LinkComponent;
+export {};
+//# sourceMappingURL=Link.d.ts.map

package/react/internal/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/react/internal/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAG7G,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI;IACtC,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;AAE/B,KAAK,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,GAAG,aAAa,CAAC,CAAA;AAEnE,MAAM,WAAW,aAAa,CAAC,KAAK,GAAG,MAAM;IAC3C,CAAC,CAAC,SAAS,kBAAkB,GAAG,GAAG,EACjC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;KAAE,GAAG,KAAK,GACtE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC;AAED,eAAO,MAAM,QAAQ,EAAE,aAOrB,CAAA"}

package/react/internal/hooks/useMODUKComponent/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useMODUKComponent';
+//# sourceMappingURL=index.d.ts.map

package/react/internal/hooks/useMODUKComponent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/internal/hooks/useMODUKComponent/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/react/internal/hooks/useMODUKComponent/useMODUKComponent.d.ts

@@ -0,0 +1,10 @@
+interface ComponentElement {
+    Accordion: HTMLDivElement;
+    Header: HTMLElement;
+}
+type ComponentNameLiteral = keyof ComponentElement;
+export declare function useMODUKComponent<ComponentName extends ComponentNameLiteral>(componentName: ComponentName): {
+    ref: import("react").RefObject<ComponentElement[ComponentName]>;
+};
+export {};
+//# sourceMappingURL=useMODUKComponent.d.ts.map

package/react/internal/hooks/useMODUKComponent/useMODUKComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMODUKComponent.d.ts","sourceRoot":"","sources":["../../../../../src/react/internal/hooks/useMODUKComponent/useMODUKComponent.ts"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,SAAS,EAAE,cAAc,CAAA;IACzB,MAAM,EAAE,WAAW,CAAA;CACpB;AAED,KAAK,oBAAoB,GAAG,MAAM,gBAAgB,CAAA;AAUlD,wBAAgB,iBAAiB,CAC/B,aAAa,SAAS,oBAAoB,EAE1C,aAAa,EAAE,aAAa;;EAe7B"}

package/react/internal/hooks/usePrevious/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePrevious';
+//# sourceMappingURL=index.d.ts.map

package/react/internal/hooks/usePrevious/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/internal/hooks/usePrevious/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/react/internal/hooks/usePrevious/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrevious<Value>(value: Value): Value | undefined;
+//# sourceMappingURL=usePrevious.d.ts.map

package/react/internal/hooks/usePrevious/usePrevious.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../../../../src/react/internal/hooks/usePrevious/usePrevious.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,qBAM9C"}

package/react/internal/test-utils/Root.d.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+interface RootProps {
+    exampleName?: string;
+    component?: string;
+}
+export declare const Root: ({ exampleName, component, children }: PropsWithChildren<RootProps>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Root.d.ts.map

package/react/internal/test-utils/Root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../src/react/internal/test-utils/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAG9C,UAAU,SAAS;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AACD,eAAO,MAAM,IAAI,yCAA0C,kBAAkB,SAAS,CAAC,4CAkBtF,CAAA"}

package/react/table/Table.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface TableProps extends Omit<ComponentPropsWithoutRef<'table'>, 'children'> {
+    /**
+     * Instances of TableCaption, TableHead and TableBody.
+     */
+    children: ReactNode;
+}
+/**
+ * A table.
+ *
+ * @experimental React components are in alpha and subject to change.
+ *
+ * @example
+ * <Table>
+ *   <TableCaption className='govuk-table__caption--m'>
+ *     Dates and amounts
+ *   </TableCaption>
+ *   <TableHead>
+ *     <TableRow>
+ *       <TableColumnHeader>Date</TableColumnHeader>
+ *       <TableColumnHeader>Amount</TableColumnHeader>
+ *     </TableRow>
+ *   </TableHead>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableRowHeader>First 6 weeks</TableRowHeader>
+ *       <TableCell>£109.80 per week</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableRowHeader>Next 33 weeks</TableRowHeader>
+ *       <TableCell>£109.80 per week</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableRowHeader>Total estimated pay</TableRowHeader>
+ *       <TableCell>£4,282.20</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ */
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+//# sourceMappingURL=Table.d.ts.map

package/react/table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/react/table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjF,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrF;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,KAAK,yGAEhB,CAAA"}

package/react/table/TableBody.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type TableBodyProps = ComponentPropsWithoutRef<'tbody'>;
+/**
+ * A table body.
+ *
+ * @experimental React components are in alpha and subject to change.
+ */
+export declare const TableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+//# sourceMappingURL=TableBody.d.ts.map

package/react/table/TableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/react/table/TableBody.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,OAAO,CAAC,CAAA;AAE9D;;;;GAIG;AACH,eAAO,MAAM,SAAS,sOAOpB,CAAA"}

package/react/table/TableCaption.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type TableCaptionProps = ComponentPropsWithoutRef<'caption'>;
+/**
+ * A table caption. Should be the first child of a Table.
+ *
+ * @experimental React components are in alpha and subject to change.
+ */
+export declare const TableCaption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=TableCaption.d.ts.map

package/react/table/TableCaption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../src/react/table/TableCaption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAA;AAEnE;;;;GAIG;AACH,eAAO,MAAM,YAAY,kMAOvB,CAAA"}

package/react/table/TableCell.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface TableCellProps extends ComponentPropsWithoutRef<'td'> {
+    format?: 'numeric';
+}
+/**
+ * A table cell.
+ *
+ * @experimental React components are in alpha and subject to change.
+ */
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+//# sourceMappingURL=TableCell.d.ts.map

package/react/table/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/react/table/TableCell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,WAAW,cAAe,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IACpE,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,iHAWpB,CAAA"}

package/react/table/TableColumnHeader.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface TableColumnHeaderCellProps extends Omit<ComponentPropsWithoutRef<'th'>, 'scope'> {
+    format?: 'numeric';
+}
+/**
+ * A header for a column. Should be used for cells inside a row of a TableHead.
+ *
+ * @experimental React components are in alpha and subject to change.
+ */
+export declare const TableColumnHeader: import("react").ForwardRefExoticComponent<TableColumnHeaderCellProps & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+//# sourceMappingURL=TableColumnHeader.d.ts.map

package/react/table/TableColumnHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableColumnHeader.d.ts","sourceRoot":"","sources":["../../../src/react/table/TableColumnHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAC/F,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,mIAY5B,CAAA"}

package/react/table/TableHead.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type TableHeadProps = ComponentPropsWithoutRef<'thead'>;
+/**
+ * A table head.
+ *
+ * @experimental React components are in alpha and subject to change.
+ */
+export declare const TableHead: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+//# sourceMappingURL=TableHead.d.ts.map

package/react/table/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../src/react/table/TableHead.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,OAAO,CAAC,CAAA;AAE9D;;;;GAIG;AACH,eAAO,MAAM,SAAS,sOAOpB,CAAA"}

package/react/table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type TableRowProps = ComponentPropsWithoutRef<'tr'>;
+/**
+ * A table row. Should be contained within a TableHead or a TableBody.
+ *
+ * @experimental React components are in alpha and subject to change.
+ */
+export declare const TableRow: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+//# sourceMappingURL=TableRow.d.ts.map

package/react/table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/react/table/TableRow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,aAAa,GAAG,wBAAwB,CAAC,IAAI,CAAC,CAAA;AAE1D;;;;GAIG;AACH,eAAO,MAAM,QAAQ,0NAOnB,CAAA"}

package/react/table/TableRowHeader.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type TableRowHeaderProps = Omit<ComponentPropsWithoutRef<'th'>, 'scope'>;
+/**
+ * A header for a row. Should be used as the first cell of a row when that cell contains a heading.
+ *
+ * @experimental React components are in alpha and subject to change.
+ */
+export declare const TableRowHeader: import("react").ForwardRefExoticComponent<TableRowHeaderProps & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+//# sourceMappingURL=TableRowHeader.d.ts.map

package/react/table/TableRowHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRowHeader.d.ts","sourceRoot":"","sources":["../../../src/react/table/TableRowHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAA;AAE/E;;;;GAIG;AACH,eAAO,MAAM,cAAc,4HAYzB,CAAA"}

package/react/table/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCaption';
+export * from './TableCell';
+export * from './TableColumnHeader';
+export * from './TableHead';
+export * from './TableRow';
+export * from './TableRowHeader';
+//# sourceMappingURL=index.d.ts.map

package/react/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA"}

package/src/react/header/__examples__/with-service-name-and-navigation.tsx

@@ -1,4 +1,4 @@
-import { Header, HeaderNavigationItem } from '@moduk/frontend/react'
+import { Header, HeaderNavigationItem, HeaderNavigationLink } from '@moduk/frontend/react'
 
 export const Example = () => (
   <Header
@@ -6,9 +6,17 @@ export const Example = () => (
     serviceName='Service name'
     serviceUrl='#'
   >
-    <HeaderNavigationItem active href='#1'>Navigation item 1</HeaderNavigationItem>
-    <HeaderNavigationItem href='#2'>Navigation item 2</HeaderNavigationItem>
-    <HeaderNavigationItem href='#3'>Navigation item 3</HeaderNavigationItem>
-    <HeaderNavigationItem href='#4'>Navigation item 4</HeaderNavigationItem>
+    <HeaderNavigationItem active>
+      <HeaderNavigationLink href='#1'>Navigation item 1</HeaderNavigationLink>
+    </HeaderNavigationItem>
+    <HeaderNavigationItem>
+      <HeaderNavigationLink href='#2'>Navigation item 2</HeaderNavigationLink>
+    </HeaderNavigationItem>
+    <HeaderNavigationItem>
+      <HeaderNavigationLink href='#3'>Navigation item 3</HeaderNavigationLink>
+    </HeaderNavigationItem>
+    <HeaderNavigationItem>
+      <HeaderNavigationLink href='#4'>Navigation item 4</HeaderNavigationLink>
+    </HeaderNavigationItem>
   </Header>
 )

package/src/react/table/__examples__/default.tsx

@@ -0,0 +1,38 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Table>
+    <TableCaption className='govuk-table__caption--m'>
+      Dates and amounts
+    </TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableColumnHeader>Date</TableColumnHeader>
+        <TableColumnHeader>Amount</TableColumnHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableRowHeader>First 6 weeks</TableRowHeader>
+        <TableCell>£109.80 per week</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>Next 33 weeks</TableRowHeader>
+        <TableCell>£109.80 per week</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>Total estimated pay</TableRowHeader>
+        <TableCell>£4,282.20</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+)

package/src/react/table/__examples__/with-comparative-numbers.tsx

@@ -0,0 +1,42 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Table>
+    <TableCaption className='govuk-table__caption--m'>
+      Users by role
+    </TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableColumnHeader>Role</TableColumnHeader>
+        <TableColumnHeader format='numeric'>Application A</TableColumnHeader>
+        <TableColumnHeader format='numeric'>Application B</TableColumnHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableRowHeader>Developer</TableRowHeader>
+        <TableCell format='numeric'>10</TableCell>
+        <TableCell format='numeric'>25</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>User researcher</TableRowHeader>
+        <TableCell format='numeric'>25</TableCell>
+        <TableCell format='numeric'>10</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>Delivery manager</TableRowHeader>
+        <TableCell format='numeric'>5</TableCell>
+        <TableCell format='numeric'>10</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+)

package/src/react/table/__examples__/with-customised-column-widths.tsx

@@ -0,0 +1,42 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Table>
+    <TableCaption className='govuk-table__caption--m'>
+      Active users by role
+    </TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableColumnHeader className='govuk-!-width-one-half'>Role</TableColumnHeader>
+        <TableColumnHeader className='govuk-!-width-one-quarter'>Application A</TableColumnHeader>
+        <TableColumnHeader className='govuk-!-width-one-quarter'>Application B</TableColumnHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableRowHeader>Developer</TableRowHeader>
+        <TableCell>10 per day</TableCell>
+        <TableCell>25 per day</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>User researcher</TableRowHeader>
+        <TableCell>25 per day</TableCell>
+        <TableCell>10 per day</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>Delivery manager</TableRowHeader>
+        <TableCell>5 per day</TableCell>
+        <TableCell>10 per day</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+)

package/src/react/table/__examples__/with-large-caption.tsx

@@ -0,0 +1,38 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableHead,
+  TableRow,
+  TableRowHeader,
+} from '@moduk/frontend/react'
+
+export const Example = () => (
+  <Table>
+    <TableCaption className='govuk-table__caption--l'>
+      Dates and amounts
+    </TableCaption>
+    <TableHead>
+      <TableRow>
+        <TableColumnHeader>Date</TableColumnHeader>
+        <TableColumnHeader>Amount</TableColumnHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableRowHeader>First 6 weeks</TableRowHeader>
+        <TableCell>£109.80 per week</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>Next 33 weeks</TableRowHeader>
+        <TableCell>£109.80 per week</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableRowHeader>Total estimated pay</TableRowHeader>
+        <TableCell>£4,282.20</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+)

package/dist/nunjucks/moduk/components/accordion/__tests__/macro.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { renderFile } from '../../../../../test-utils'
-
-describe('Accordion', async () => {
-  it('renders the content', () => {
-    expect(() => renderFile('moduk/components/accordion/__examples__/default.njk')).not.toThrowError()
-  })
-})

package/dist/nunjucks/moduk/components/back-link/__tests__/macro.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { renderFile } from '../../../../../test-utils'
-
-describe('Back link', async () => {
-  it('renders the content', () => {
-    expect(() => renderFile('moduk/components/back-link/__examples__/default.njk')).not.toThrowError()
-  })
-})

package/dist/nunjucks/moduk/components/breadcrumbs/__tests__/macro.test.ts

@@ -1,31 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { render } from '../../../../../test-utils'
-
-describe('Breadcrumbs', async () => {
-  it('renders the content', () => {
-    const items = [
-      {
-        text: 'Home',
-        href: '#',
-      },
-      {
-        text: 'Components',
-        href: '#',
-      },
-      {
-        text: 'Breadcrumbs',
-        href: '#',
-      },
-    ]
-    expect(() =>
-      render(`
-{%- from "moduk/components/breadcrumbs/macro.njk" import modukBreadcrumbs -%}
-
-{{ modukBreadcrumbs({
-  items: ${JSON.stringify(items)}
-}) }}
-`)
-    ).not.toThrowError()
-  })
-})

package/dist/nunjucks/moduk/components/button/__tests__/macro.test.ts

@@ -1,25 +0,0 @@
-import path from 'node:path'
-import { describe, expect, it } from 'vitest'
-import { renderFile } from '../../../../../test-utils'
-
-const basePath = 'moduk/components/button/__examples__'
-
-describe('Button', async () => {
-  it('renders the content', () => {
-    expect(() => {
-      renderFile(path.join(basePath, 'default.njk'))
-    }).not.toThrowError()
-  })
-
-  it('add disabled attribute', () => {
-    expect(renderFile(path.join(basePath, 'disabled.njk'))).toBeDisabled()
-  })
-
-  it('renders the secondary button', () => {
-    expect(renderFile(path.join(basePath, 'secondary.njk'))).toHaveClass('govuk-button--secondary')
-  })
-
-  it('renders the warning button', () => {
-    expect(renderFile(path.join(basePath, 'warning.njk'))).toHaveClass('govuk-button--warning')
-  })
-})

package/dist/nunjucks/moduk/components/character-count/__tests__/macro.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { renderFile } from '../../../../../test-utils'
-
-describe('Character count', async () => {
-  it('renders the content', () => {
-    expect(() => renderFile('moduk/components/character-count/__examples__/default.njk')).not.toThrowError()
-  })
-})

package/dist/nunjucks/moduk/components/checkboxes/__tests__/macro.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { renderFile } from '../../../../../test-utils'
-
-describe('Checkboxes', async () => {
-  it('renders the content', () => {
-    expect(() => renderFile('moduk/components/checkboxes/__examples__/default.njk')).not.toThrowError()
-  })
-})

package/dist/nunjucks/moduk/components/cookie-banner/__tests__/macro.test.ts

@@ -1,10 +0,0 @@
-import { join } from 'node:path'
-import { describe, expect, it } from 'vitest'
-
-import { renderFile } from '../../../../../test-utils'
-
-describe('Cookie Banner', () => {
-  it('renders the content', () => {
-    expect(() => renderFile(join(__dirname, '../__examples__/default.njk'))).not.toThrowError()
-  })
-})

package/dist/nunjucks/moduk/components/date-input/__tests__/macro.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { renderFile } from '../../../../../test-utils'
-
-describe('Date input', async () => {
-  it('renders the content', () => {
-    expect(() => renderFile('moduk/components/date-input/__examples__/default.njk')).not.toThrowError()
-  })
-})

package/dist/nunjucks/moduk/components/details/__tests__/macro.test.ts

@@ -1,35 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { render, renderFile } from '../../../../../test-utils'
-
-describe('Details', async () => {
-  it('renders the content when using the text property', () => {
-    const element = renderFile('moduk/components/details/__examples__/default.njk')
-    expect(element).toHaveTextContent('We need to know the organisation')
-  })
-
-  it('renders the content when using the html property', () => {
-    const element = render(`
-{% from "moduk/components/details/macro.njk" import modukDetails %}
-
-{{ modukDetails({
-  summaryText: "Help with organisation",
-  html: "We need to know the organisation you work for so we can forward your request to the correct team."
-}) }}
-`)
-    expect(element).toHaveTextContent('We need to know the organisation')
-  })
-
-  it('renders the content when using a call block', () => {
-    const element = render(`
-{% from "moduk/components/details/macro.njk" import modukDetails %}
-
-{% call modukDetails({
-  summaryText: "Help with organisation" 
-}) %}
-  We need to know the organisation<br>you work for so we can forward your request to the correct team.
-{% endcall %}
-`)
-    expect(element).toContainHTML('We need to know the organisation<br>you')
-  })
-})

package/dist/nunjucks/moduk/components/error-message/__tests__/macro.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { renderFile } from '../../../../../test-utils'
-
-describe('Error message', async () => {
-  it('renders the content', () => {
-    expect(() => renderFile('moduk/components/error-message/__examples__/default.njk')).not.toThrowError()
-  })
-})