@uktrade/react-component-library 0.10.1

package/src/components/LoadingSpinner/LoadingSpinner.module.css

@@ -0,0 +1,33 @@
+.hods-loading-spinner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+}
+
+.hods-loading-spinner__spinner {
+  border: 8px solid #dee0e2;
+  border-top-color: #005ea5; /* govuk blue */
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: hods-spin 1s linear infinite;
+}
+
+.hods-loading-spinner__text {
+  margin-top: 0.75rem;
+  font-size: 1rem;
+  color: #0b0c0c; /* govuk body text */
+  text-align: center;
+}
+
+@keyframes hods-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import type { FC, ReactNode } from "react";
+
+import styles from "./LoadingSpinner.module.css";
+
+interface LoadingSpinnerProps {
+  children?: ReactNode;
+}
+
+// https://design.homeoffice.gov.uk/design-system/components?name=Loading%20spinner 
+export const LoadingSpinner: FC<LoadingSpinnerProps> = ({ children }) => (
+  <div className={styles["hods-loading-spinner"]} role="status" aria-live="polite" aria-busy="true">
+    <div className={styles["hods-loading-spinner__spinner"]} aria-hidden="true" />
+    {children && <div className={styles["hods-loading-spinner__text"]}>{children}</div>}
+  </div>
+);
+
+export default LoadingSpinner;

package/src/components/SummaryItem/SummaryItem.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import type React from "react";
+
+export interface SummaryItemConfig {
+  name: string;
+  value: React.ReactNode;
+  actions?: SummaryListAction[];
+}
+
+export type SummaryListAction = {
+  text: string;
+  href: string;
+  visuallyHidden?: string;
+};
+
+export interface SummaryListActionProps {
+  action: SummaryListAction;
+}
+
+export interface SummaryListActionsListProps {
+  actions?: SummaryListAction[];
+}
+
+interface SummaryItemProps {
+  name: string;
+  children: React.ReactNode;
+  actions?: SummaryListAction[];
+}
+
+/**
+ * Single action link
+ */
+export const SummaryListAction = ({
+  action,
+}: SummaryListActionProps): React.JSX.Element => {
+  return (
+    <a className="govuk-link" href={action.href}>
+      {action.text}
+      {action.visuallyHidden && (
+        <span className="govuk-visually-hidden">
+          {" "}
+          {action.visuallyHidden}
+        </span>
+      )}
+    </a>
+  );
+};
+
+/**
+ * Actions container
+ * - Renders nothing if no actions
+ * - Renders a link if one action
+ * - Renders a list if multiple actions
+ */
+export const SummaryListActionsList = ({
+  actions,
+}: SummaryListActionsListProps): React.JSX.Element | null => {
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <dd className="govuk-summary-list__actions">
+      {actions.length === 1 ? (
+        <SummaryListAction action={actions[0]} />
+      ) : (
+        <ul className="govuk-summary-list__actions-list">
+          {actions.map((action, index) => (
+            <li
+              key={`${action.href}-${index}`}
+              className="govuk-summary-list__actions-list-item"
+            >
+              <SummaryListAction action={action} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </dd>
+  );
+};
+
+/**
+ * Standard GOV.UK Summary List row
+ */
+export const SummaryItem = ({
+  name,
+  children,
+  actions,
+}: SummaryItemProps): React.JSX.Element => {
+  return (
+    <div className="govuk-summary-list__row">
+      <dt className="govuk-summary-list__key">{name}</dt>
+      <dd className="govuk-summary-list__value">{children}</dd>
+      <SummaryListActionsList actions={actions} />
+    </div>
+  );
+};

package/src/components/SummaryList/SummaryList.module.css

@@ -0,0 +1,14 @@
+.root {
+  .govukSummaryCardContent {
+    display: table;
+    width: calc(100% - 40px);
+    table-layout: fixed;
+    border-collapse: collapse;
+    margin: 20px;
+    margin-top: 10px;
+  }
+
+  .summaryCardTitleActions {
+    font-weight: 400;
+  }
+}

package/src/components/SummaryList/SummaryList.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import type React from "react";
+import clsx from "clsx";
+
+import { SummaryListAction } from "../SummaryItem/SummaryItem";
+import styles from "./SummaryList.module.css";
+
+export interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement> {
+  title: string;
+  children?: React.ReactNode;
+  actions?: SummaryListAction[];
+  className?: string;
+}
+
+export const SummaryList = ({ title, children, className, ...props }: SummaryListProps) => (
+  <>
+    {title && <h2 className="govuk-heading-l">{title}</h2>}
+    <dl className={clsx("govuk-summary-list", className)} {...props}>
+      {children}
+    </dl>
+  </>
+);
+
+export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  children?: React.ReactNode;
+  actions?: SummaryListAction[];
+  className?: string;
+}
+
+export const SummaryCard = ({ title, children, actions, className, ...props }: SummaryCardProps) => (
+  <div className={clsx(styles.root, className)}>
+    <div className="govuk-summary-card govuk-body" {...props}>
+      <div className="govuk-summary-card__title-wrapper">
+        <h2 className="govuk-summary-card__title">{title}</h2>
+
+        {actions && (
+          <ul
+            className={clsx(
+              "govuk-summary-card__actions",
+              styles.summaryCardTitleActions
+            )}
+          >
+            {actions.map((action) => (
+              <li key={action.text} className="govuk-summary-card__action">
+                <SummaryListAction action={action} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div
+        className={clsx(
+          "govuk-summary-card__content",
+          styles.govukSummaryCardContent
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  </div>
+);

package/src/components/Tags/Tags.module.css

@@ -0,0 +1,17 @@
+.root {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  @media (max-width: 640px) {
+    float: none;
+    clear: left;
+  }
+
+  @media (min-width: 640px) {
+    float: right;
+  }
+
+  .tag:not(:last-child) {
+    margin-right: 0.5rem;
+  }
+}

package/src/components/Tags/Tags.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import clsx from "clsx";
+import type React from "react";
+import { TagColours } from "../Colours";
+import styles from "./Tags.module.css";
+
+export type TagProps = {
+  text: string;
+  colour: TagColours;
+};
+
+export const Tag = ({ text, colour }: TagProps): React.JSX.Element => {
+  return <strong className={clsx("govuk-tag", colour, styles.tag)}>{text}</strong>;
+};
+
+export type TagsProps = {
+  children: React.ReactNode;
+};
+
+export const Tags = ({ children }: TagsProps): React.JSX.Element => {
+  return <span className={clsx("govuk-tags", styles.root)}>{children}</span>;
+};
+
+export type TagsListProps = {
+  tags: TagProps[];
+};
+
+export const TagsList = ({ tags }: TagsListProps): React.JSX.Element => {
+  if (!tags || tags.length === 0) return <></>;
+
+  return (
+    <Tags>
+      {tags.map((tag) => (
+        <Tag key={tag.text} text={tag.text} colour={tag.colour} />
+      ))}
+    </Tags>
+  );
+};

package/src/components/ViewFormItem/ViewFormItem.module.css

@@ -0,0 +1,11 @@
+.root {
+  clear: both;
+
+  .key {
+    font-weight: normal;
+  }
+
+  & .govuk-tags {
+    float: none;
+  }
+}

package/src/components/ViewFormItem/ViewFormItem.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { TagColours } from "../Colours";
+import { TagsList, type TagProps } from "../Tags/Tags";
+import styles from "./ViewFormItem.module.css";
+
+
+interface LinkAndTagItemProps {
+  name: string;
+  href: string;
+  children?: ReactNode;
+  tags?: TagProps[];
+}
+
+export const ViewFormItem = ({
+  name,
+  href,
+  children,
+  tags = [],
+}: LinkAndTagItemProps) => {
+  tags.push({
+    text: children ? "Completed" : "Not started",
+    colour: children ? TagColours.LightBlue : TagColours.Grey,
+  });
+
+  return (
+    <div className={clsx(styles.root, "view-form-item", "govuk-summary-list__row")}>
+      <dt className={clsx(styles.key, "govuk-summary-list__key")}>
+        <a className="govuk-link" href={href}>
+          {name}
+        </a>
+      </dt>
+      <dd className="govuk-summary-list__value">{children}</dd>
+      <dd className={clsx(styles.actions, "govuk-summary-list__actions")}>
+        <TagsList tags={tags} />
+      </dd>
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from "./components/SummaryList/SummaryList";
+export * from "./components/SummaryItem/SummaryItem";
+export * from "./components/ViewFormItem/ViewFormItem";
+export * from "./components/Arrow/Arrow";
+export * from "./components/Arrows/Arrows";
+export * from "./components/Tags/Tags";
+export * from "./components/Colours";
+export * from "./components/Button";
+export * from "./components/ButtonGroup";
+export * from "./components/BackLink";
+export * from "./components/LoadingSpinner/LoadingSpinner";
+export * from "./components/ApiBoundary/ApiBoundary";

package/src/types/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/src/utils/cn.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: (string | undefined | false)[]) {
+  return classes.filter(Boolean).join(" ");
+}