@ogcio/design-system-react 1.11.1 → 1.11.2

package/dist/summary-list/summary-list.test.js

@@ -0,0 +1,56 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { c as i, r as l } from "../test-utilities-BS7B3BF-.js";
+import { SummaryList as m, SummaryListRow as r, SummaryListValue as o, SummaryListAction as a } from "./summary-list.js";
+describe("govieSummaryList", () => {
+  afterEach(i);
+  const c = (e) => l(/* @__PURE__ */ t(m, { ...e }));
+  it("should render SummaryList and its rows correctly", () => {
+    const { getByText: e } = c({
+      children: [
+        /* @__PURE__ */ n(r, { label: "Name", children: [
+          /* @__PURE__ */ t(o, { children: "John Smith" }),
+          /* @__PURE__ */ t(a, { href: "/change-name", children: "Change name" })
+        ] }, "1"),
+        /* @__PURE__ */ n(r, { label: "Date of Birth", children: [
+          /* @__PURE__ */ t(o, { children: "8 November 1982" }),
+          /* @__PURE__ */ t(a, { href: "/change-dob", children: "Change date of birth" })
+        ] }, "2")
+      ]
+    });
+    expect(e("Name")).toBeInTheDocument(), expect(e("John Smith")).toBeInTheDocument(), expect(e("Change name")).toBeInTheDocument(), expect(e("Date of Birth")).toBeInTheDocument(), expect(e("8 November 1982")).toBeInTheDocument(), expect(e("Change date of birth")).toBeInTheDocument();
+  }), it("should render correctly a row without an action", () => {
+    const { getByText: e } = c({
+      children: [
+        /* @__PURE__ */ t(r, { label: "Address", children: /* @__PURE__ */ n(o, { children: [
+          "72 Guild Street",
+          /* @__PURE__ */ t("br", {}),
+          "London",
+          /* @__PURE__ */ t("br", {}),
+          "SE23 6FH"
+        ] }) }, "1")
+      ]
+    });
+    expect(e("Address")).toBeInTheDocument(), expect(e("72 Guild Street", { exact: !1 })).toBeInTheDocument(), expect(e("London", { exact: !1 })).toBeInTheDocument(), expect(e("SE23 6FH", { exact: !1 })).toBeInTheDocument();
+  }), it("should render correctly with `withBorder` prop", () => {
+    const { getByText: e } = c({
+      children: [
+        /* @__PURE__ */ t(r, { label: "Contact Details", withBorder: !0, children: /* @__PURE__ */ n(o, { children: [
+          "07700 900900",
+          /* @__PURE__ */ t("br", {}),
+          "john.smith@example.com"
+        ] }) }, "1")
+      ]
+    }), h = e("Contact Details").closest("dl");
+    expect(h).toHaveAttribute("data-border", "true");
+  }), it("should pass axe accessibility tests", async () => {
+    const { axe: e } = c({
+      children: [
+        /* @__PURE__ */ n(r, { label: "Name", children: [
+          /* @__PURE__ */ t(o, { children: "John Smith" }),
+          /* @__PURE__ */ t(a, { href: "/change-name", children: "Change name" })
+        ] }, "1")
+      ]
+    });
+    await e();
+  });
+});

package/dist/summary-list/types.d.ts

@@ -0,0 +1,20 @@
+import { LinkProps } from '../link/link.js';
+import { SummaryListAction, SummaryListRow, SummaryListValue } from './summary-list.js';
+export type SummaryListItem = {
+    key: string;
+    value: string | string[];
+    actionLink: LinkProps;
+};
+export type SummaryListValueProps = {
+    children: React.ReactNode;
+};
+export type SummaryListActionProps = Pick<LinkProps, 'children' | 'href' | 'asChild'>;
+export type SummaryListRowProps = {
+    label: string;
+    withBorder?: boolean;
+    children: React.ReactElement<typeof SummaryListValue | typeof SummaryListAction> | React.ReactElement<typeof SummaryListValue | typeof SummaryListAction>[];
+} & React.AriaAttributes;
+export type SummaryListProps = {
+    children: React.ReactElement<typeof SummaryListRow>[] | React.ReactElement<typeof SummaryListRow>;
+    dataTestid?: string;
+};

package/dist/summary-list/types.js

@@ -0,0 +1 @@
+

package/dist/table/caption.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export type CaptionProps = {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+} & React.HTMLAttributes<HTMLTableCaptionElement>;
+export declare function Caption({ children, size, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/caption.js

@@ -0,0 +1,15 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as e } from "../cn.js";
+function m({ children: a, size: i = "lg", ...t }) {
+  return /* @__PURE__ */ o(
+    "caption",
+    {
+      className: e(`gi-table-caption-text gi-text-${i}`, t.className),
+      ...t,
+      children: a
+    }
+  );
+}
+export {
+  m as Caption
+};

package/dist/table/column-group.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function ColumnGroup({ children, ...props }: React.TableHTMLAttributes<HTMLTableColElement>): import("react/jsx-runtime").JSX.Element;

package/dist/table/column-group.js

@@ -0,0 +1,10 @@
+import { jsx as u } from "react/jsx-runtime";
+function p({
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ u("colgroup", { ...r, children: o });
+}
+export {
+  p as ColumnGroup
+};

package/dist/table/column.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function Column({ children, ...props }: React.TableHTMLAttributes<HTMLTableColElement>): import("react/jsx-runtime").JSX.Element;

package/dist/table/column.js

@@ -0,0 +1,10 @@
+import { jsx as n } from "react/jsx-runtime";
+function m({
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ n("col", { ...r, children: o });
+}
+export {
+  m as Column
+};

package/dist/table/table-body.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function TableBody({ children, ...props }: React.TableHTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-body.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+function n({
+  children: o,
+  ...r
+}) {
+  return /* @__PURE__ */ t("tbody", { ...r, children: o });
+}
+export {
+  n as TableBody
+};

package/dist/table/table-content.d.ts

@@ -0,0 +1 @@
+export declare const TableContent: import("react/jsx-runtime").JSX.Element;

package/dist/table/table-content.js

@@ -0,0 +1,26 @@
+import { jsxs as e, Fragment as l, jsx as r } from "react/jsx-runtime";
+import { Caption as t } from "./caption.js";
+import { TableBody as d } from "./table-body.js";
+import { TableData as a } from "./table-data.js";
+import { TableFoot as n } from "./table-foot.js";
+import { TableHead as h } from "./table-head.js";
+import { TableHeader as i } from "./table-header.js";
+import { TableRow as o } from "./table-row.js";
+const x = /* @__PURE__ */ e(l, { children: [
+  /* @__PURE__ */ r(t, { children: "This is caption" }),
+  /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(i, { children: "This is the table head" }) }) }),
+  /* @__PURE__ */ e(d, { children: [
+    /* @__PURE__ */ e(o, { children: [
+      /* @__PURE__ */ r(i, { children: "Header 1" }),
+      /* @__PURE__ */ r(a, { children: "Data 1" })
+    ] }),
+    /* @__PURE__ */ e(o, { children: [
+      /* @__PURE__ */ r(i, { children: "Header 2" }),
+      /* @__PURE__ */ r(a, { children: "Data 2" })
+    ] })
+  ] }),
+  /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(i, { children: "This is a foot" }) }) })
+] });
+export {
+  x as TableContent
+};

package/dist/table/table-data.d.ts

@@ -0,0 +1,8 @@
+import { TdHTMLAttributes } from 'react';
+import { TableAlign, VerticalAlign } from './table.js';
+interface TableDataProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    align?: TableAlign;
+    valign?: VerticalAlign;
+}
+export declare function TableData({ align, valign, className, children, ...props }: TableDataProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/table-data.js

@@ -0,0 +1,35 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as m } from "../cn.js";
+function c({
+  align: t = "left",
+  valign: e = "middle",
+  className: i,
+  children: l,
+  ...n
+}) {
+  const g = {
+    left: "gi-text-left",
+    center: "gi-text-center",
+    right: "gi-text-right"
+  }[t], o = {
+    top: "gi-align-top",
+    middle: "gi-align-middle",
+    bottom: "gi-align-bottom"
+  }[e];
+  return /* @__PURE__ */ a(
+    "td",
+    {
+      className: m(
+        g,
+        o,
+        "gi-table-td",
+        i
+      ),
+      ...n,
+      children: l
+    }
+  );
+}
+export {
+  c as TableData
+};

package/dist/table/table-foot.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function TableFoot({ children, ...props }: React.TableHTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-foot.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+function f({
+  children: o,
+  ...t
+}) {
+  return /* @__PURE__ */ r("tfoot", { ...t, children: o });
+}
+export {
+  f as TableFoot
+};

package/dist/table/table-head.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function TableHead({ children, ...props }: React.TableHTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-head.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+function a({
+  children: e,
+  ...r
+}) {
+  return /* @__PURE__ */ t("thead", { ...r, children: e });
+}
+export {
+  a as TableHead
+};

package/dist/table/table-header.d.ts

@@ -0,0 +1,8 @@
+import { ThHTMLAttributes } from 'react';
+import { TableAlign, VerticalAlign } from './table.js';
+interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    align?: TableAlign;
+    valign?: VerticalAlign;
+}
+export declare function TableHeader({ align, valign, className, children, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/table-header.js

@@ -0,0 +1,35 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as a } from "../cn.js";
+function c({
+  align: t = "left",
+  valign: e = "middle",
+  className: i,
+  children: l,
+  ...n
+}) {
+  const g = {
+    left: "gi-text-left",
+    center: "gi-text-center",
+    right: "gi-text-right"
+  }[t], o = {
+    top: "gi-align-top",
+    middle: "gi-align-middle",
+    bottom: "gi-align-bottom"
+  }[e];
+  return /* @__PURE__ */ r(
+    "th",
+    {
+      className: a(
+        g,
+        o,
+        "gi-table-th",
+        i
+      ),
+      ...n,
+      children: l
+    }
+  );
+}
+export {
+  c as TableHeader
+};

package/dist/table/table-row.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function TableRow({ children, ...props }: React.TableHTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-row.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+function n({
+  children: r,
+  ...o
+}) {
+  return /* @__PURE__ */ t("tr", { ...o, children: r });
+}
+export {
+  n as TableRow
+};

package/dist/table/table.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export type TableAlign = 'left' | 'center' | 'right';
+export type VerticalAlign = 'top' | 'middle' | 'bottom';
+declare const tableVariants: import('tailwind-variants').TVReturnType<{
+    layout: {
+        auto: string;
+        fixed: string;
+    };
+}, undefined, "gi-table", TVConfig<V, EV>, {
+    layout: {
+        auto: string;
+        fixed: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    layout: {
+        auto: string;
+        fixed: string;
+    };
+}, undefined, "gi-table", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export type TableProps = VariantProps<typeof tableVariants> & {
+    dataTestid?: string;
+} & React.TableHTMLAttributes<HTMLTableElement>;
+export declare function Table({ layout, dataTestid, children, ...props }: React.PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/table/table.js

@@ -0,0 +1,33 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as l } from "../index-DNkhmzZp.js";
+import { cn as r } from "../cn.js";
+const b = l({
+  base: "gi-table",
+  variants: {
+    layout: {
+      auto: "gi-table-auto",
+      fixed: "gi-table-fixed"
+    }
+  }
+});
+function u({
+  layout: t = "auto",
+  dataTestid: a,
+  children: e,
+  ...o
+}) {
+  const s = b({ layout: t });
+  return /* @__PURE__ */ i(
+    "table",
+    {
+      className: r(s),
+      role: "table",
+      "data-testid": a,
+      ...o,
+      children: e
+    }
+  );
+}
+export {
+  u as Table
+};

package/dist/table/table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/table/table.test.js

@@ -0,0 +1,18 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as a, r as n } from "../test-utilities-BS7B3BF-.js";
+import { TableContent as r } from "./table-content.js";
+import { Table as o } from "./table.js";
+describe("table", () => {
+  afterEach(a);
+  const t = (e) => n(/* @__PURE__ */ s(o, { ...e }));
+  it("should render table", () => {
+    const e = t({
+      children: r
+    });
+    expect(e.getByText("This is the table head")).toBeTruthy();
+  }), it("should pass axe tests", async () => {
+    await t({
+      children: r
+    }).axe();
+  });
+});

package/dist/tabs/tab-item.d.ts

@@ -0,0 +1,17 @@
+import { default as React, FC } from 'react';
+export type TabItemProps = {
+    value: string;
+    children: React.ReactNode;
+    href?: string;
+    checked?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+export type InternalTabItemProps = TabItemProps & {
+    onTabClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onTabKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    index: number;
+};
+export declare const TabItem: FC<TabItemProps>;
+export declare const InternalTabItem: FC<InternalTabItemProps>;

package/dist/tabs/tab-item.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as f, useEffect as b } from "react";
+import { slugify as p } from "../utilities.js";
+const g = () => null, N = ({
+  value: m,
+  href: s,
+  checked: e = !1,
+  children: i,
+  onTabClick: l,
+  onTabKeyDown: n
+}) => {
+  const o = p(m), a = f(null), c = f(!1);
+  return b(() => {
+    var t;
+    e && !c.current && ((t = a.current) == null || t.click());
+  }, [e]), /* @__PURE__ */ r(
+    "button",
+    {
+      ref: a,
+      id: `tab-${o}`,
+      role: "tab",
+      "aria-roledescription": "tab",
+      "aria-selected": e ? "true" : "false",
+      "aria-controls": `tab-panel-${o}`,
+      className: `gi-tab-item ${e ? "gi-tab-item-checked" : ""}`,
+      onClick: (t) => {
+        var u;
+        c.current = !0, l && l(t), (u = a.current) == null || u.blur();
+      },
+      onKeyDown: (t) => {
+        n && n(t);
+      },
+      children: s ? /* @__PURE__ */ r("a", { href: s, className: "gi-decoration-xs", children: i }) : /* @__PURE__ */ r("span", { className: "gi-decoration-xs", children: i })
+    }
+  );
+};
+g.displayName = "TabItem";
+export {
+  N as InternalTabItem,
+  g as TabItem
+};

package/dist/tabs/tab-list.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare const TabList: ({ children, tabName, }: {
+    tabName?: string;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/tabs/tab-list.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as b } from "react/jsx-runtime";
+import { useState as m, Children as s, useEffect as w, isValidElement as u } from "react";
+import { InternalTabItem as C } from "./tab-item.js";
+const q = ({
+  children: r,
+  tabName: f
+}) => {
+  const [c, o] = m(null), n = s.count(r);
+  w(() => {
+    let e = !1, a = 0;
+    s.forEach(r, (t, l) => {
+      u(t) && "checked" in t.props && t.props.checked === !0 && (a = l, e = !0);
+    }), o(e ? a : 0);
+  }, []);
+  const p = (e, a) => (t) => {
+    o(e);
+    const d = [
+      ...document.querySelector(`#${f}`).querySelectorAll("[role=tabpanel]")
+    ];
+    for (const y of d)
+      y.style.display = "none";
+    const i = t.currentTarget.getAttribute("aria-controls");
+    if (!i)
+      return;
+    const h = document.querySelector(
+      `#${i}`
+    );
+    h.style.display = "block", a && a(t);
+  }, T = (e) => {
+    let a = !1;
+    switch (e.key) {
+      case "ArrowLeft": {
+        let t = (c ?? 0) - 1;
+        t < 0 && (t = 0), o(t), a = !0;
+        break;
+      }
+      case "ArrowRight": {
+        let t = (c ?? 0) + 1;
+        t >= n && (t = n - 1), o(t), a = !0;
+        break;
+      }
+    }
+    a && (e.stopPropagation(), e.preventDefault());
+  }, k = s.map(r, (e, a) => {
+    var t;
+    return u(e) ? /* @__PURE__ */ b(
+      C,
+      {
+        ...e.props,
+        index: a,
+        checked: c === a,
+        onTabKeyDown: T,
+        onTabClick: p(a, (t = e == null ? void 0 : e.props) == null ? void 0 : t.onTabClick)
+      }
+    ) : null;
+  });
+  return /* @__PURE__ */ b("div", { role: "tablist", className: "gi--mb-[1px]", children: k });
+};
+export {
+  q as TabList
+};

package/dist/tabs/tab-panel.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export declare function TabPanel({ value, children, }: {
+    value: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/tabs/tab-panel.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { slugify as n } from "../utilities.js";
+function i({
+  value: e,
+  children: l
+}) {
+  const a = n(e);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      role: "tabpanel",
+      "aria-labelledby": `tab-${a}`,
+      id: `tab-panel-${a}`,
+      tabIndex: 0,
+      className: "gi-tab-panel",
+      children: l
+    }
+  );
+}
+export {
+  i as TabPanel
+};

package/dist/tabs/tabs-content.d.ts

@@ -0,0 +1 @@
+export declare const TabsContent: import("react/jsx-runtime").JSX.Element;

package/dist/tabs/tabs-content.js

@@ -0,0 +1,17 @@
+import { jsxs as n, Fragment as r, jsx as a } from "react/jsx-runtime";
+import { TabItem as e } from "./tab-item.js";
+import { TabList as b } from "./tab-list.js";
+import { TabPanel as t } from "./tab-panel.js";
+const m = /* @__PURE__ */ n(r, { children: [
+  /* @__PURE__ */ n(b, { tabName: "tab-1", children: [
+    /* @__PURE__ */ a(e, { value: "tab1", checked: !0, children: "Tab 1" }),
+    /* @__PURE__ */ a(e, { value: "tab2", children: "Tab 2" }),
+    /* @__PURE__ */ a(e, { value: "tab3", children: "Tab 3" })
+  ] }),
+  /* @__PURE__ */ a(t, { value: "tab1", children: "Tab 1 Content" }),
+  /* @__PURE__ */ a(t, { value: "tab2", children: "Tab 2 Content" }),
+  /* @__PURE__ */ a(t, { value: "tab3", children: "Tab 3 Content" })
+] });
+export {
+  m as TabsContent
+};

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,7 @@
+export type TabsProps = {
+    id?: string;
+    ariaLabelledBy: string;
+    dataTestid?: string;
+    children: React.ReactNode;
+};
+export declare function Tabs({ id, ariaLabelledBy, dataTestid, children, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/tabs/tabs.js

@@ -0,0 +1,24 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Children as o, isValidElement as d, cloneElement as l } from "react";
+import { generateRandomId as s } from "../utilities.js";
+function p({
+  id: a = s(),
+  ariaLabelledBy: t,
+  dataTestid: e,
+  children: i
+}) {
+  const n = o.map(i, (r) => d(r) ? l(r, { tabName: a }) : r);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "aria-labelledby": t,
+      className: "gi-tabs",
+      id: a,
+      "data-testid": e,
+      children: n
+    }
+  );
+}
+export {
+  p as Tabs
+};

package/dist/tabs/tabs.test.d.ts

@@ -0,0 +1 @@
+export {};