@uktrade/react-component-library 0.20.2 → 0.21.1

package/dist/components/SummaryItem/SummaryItem.d.ts

@@ -3,6 +3,7 @@ export interface SummaryItemConfig {
     name: string;
     value: React.ReactNode;
     actions?: SummaryListAction[];
+    wordWrap?: boolean;
 }
 export type SummaryListAction = {
     text: string;
@@ -19,6 +20,7 @@ interface SummaryItemProps {
     name: string;
     children: React.ReactNode;
     actions?: SummaryListAction[];
+    wordWrap?: boolean;
 }
 /**
  * Single action link
@@ -34,6 +36,6 @@ export declare const SummaryListActionsList: ({ actions, }: SummaryListActionsLi
 /**
  * Standard GOV.UK Summary List row
  */
-export declare const SummaryItem: ({ name, children, actions, }: SummaryItemProps) => React.JSX.Element;
+export declare const SummaryItem: ({ name, children, actions, wordWrap, }: SummaryItemProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=SummaryItem.d.ts.map

package/dist/components/SummaryItem/SummaryItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,aAE/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAYrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAEpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,8BAIzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAQ/B,CAAC"}
+{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,aAE/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAYrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAEpC,2BAA2B,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAqBpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAU/B,CAAC"}

package/dist/components/SummaryItem/SummaryItem.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./SummaryItem.module.css";
 /**
  * Single action link
  */
@@ -20,6 +22,6 @@ export const SummaryListActionsList = ({ actions, }) => {
 /**
  * Standard GOV.UK Summary List row
  */
-export const SummaryItem = ({ name, children, actions, }) => {
-    return (_jsxs("div", { className: "govuk-summary-list__row", children: [_jsx("dt", { className: "govuk-summary-list__key", children: name }), _jsx("dd", { className: "govuk-summary-list__value", children: children }), _jsx(SummaryListActionsList, { actions: actions })] }));
+export const SummaryItem = ({ name, children, actions, wordWrap, }) => {
+    return (_jsxs("div", { className: "govuk-summary-list__row", children: [_jsx("dt", { className: "govuk-summary-list__key", children: name }), _jsx("dd", { className: clsx("govuk-summary-list__value", wordWrap && styles.wordWrap), children: children }), _jsx(SummaryListActionsList, { actions: actions })] }));
 };

package/dist/components/SummaryItem/SummaryItem.module.css

@@ -0,0 +1,3 @@
+.wordWrap {
+    word-wrap: break-word;
+}

package/dist/components/Tags/Tags.d.ts

@@ -3,8 +3,9 @@ import { TagColours } from "../Colours";
 export type TagProps = {
     text: string;
     colour: TagColours;
+    fullWidth?: boolean;
 };
-export declare const Tag: ({ text, colour }: TagProps) => React.JSX.Element;
+export declare const Tag: ({ text, colour, fullWidth }: TagProps) => React.JSX.Element;
 export type TagsProps = {
     children: React.ReactNode;
 };

package/dist/components/Tags/Tags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGxC,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,kBAAkB,QAAQ,KAAG,KAAK,CAAC,GAAG,CAAC,OAE1D,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,cAAc,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAExD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,UAAU,aAAa,KAAG,KAAK,CAAC,GAAG,CAAC,OAU5D,CAAC"}
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGxC,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,6BAA6B,QAAQ,KAAG,KAAK,CAAC,GAAG,CAAC,OAarE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,cAAc,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAExD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,QAAQ,EAAE,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,UAAU,aAAa,KAAG,KAAK,CAAC,GAAG,CAAC,OAU5D,CAAC"}

package/dist/components/Tags/Tags.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from "clsx";
 import { TagColours } from "../Colours";
 import styles from "./Tags.module.css";
-export const Tag = ({ text, colour }) => {
-    return _jsx("strong", { className: clsx("govuk-tag", colour, styles.tag), children: text });
+export const Tag = ({ text, colour, fullWidth }) => {
+    return (_jsx("strong", { className: clsx("govuk-tag", colour, styles.tag, fullWidth && styles.fullWidth), children: text }));
 };
 export const Tags = ({ children }) => {
     return _jsx("span", { className: clsx("govuk-tags", styles.root), children: children });
@@ -12,5 +12,5 @@ export const Tags = ({ children }) => {
 export const TagsList = ({ tags }) => {
     if (!tags || tags.length === 0)
         return _jsx(_Fragment, {});
-    return (_jsx(Tags, { children: tags.map((tag) => (_jsx(Tag, { text: tag.text, colour: tag.colour }, tag.text))) }));
+    return (_jsx(Tags, { children: tags.map((tag) => (_jsx(Tag, { text: tag.text, colour: tag.colour, fullWidth: tag.fullWidth }, tag.text))) }));
 };

package/dist/components/Tags/Tags.module.css

@@ -15,3 +15,10 @@
     margin-right: 0.5rem;
   }
 }
+
+.fullWidth {
+  /* Remove GOV.UK Frontend sets a hard max-width: 160px */
+  max-width: none !important;
+  /* Each tag will stretch as match as the lenght of its content */
+  width: auto;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.20.2",
+  "version": "0.21.1",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -76,4 +76,4 @@
     "clsx": "^2.1.0",
     "openapi-fetch": "^0.15.0"
   }
-}
+}

package/src/components/SummaryItem/SummaryItem.module.css

@@ -0,0 +1,3 @@
+.wordWrap {
+    word-wrap: break-word;
+}

package/src/components/SummaryItem/SummaryItem.tsx

@@ -1,11 +1,15 @@
 "use client"
 
+import clsx from "clsx";
 import type React from "react";
+import styles from "./SummaryItem.module.css"
+
 
 export interface SummaryItemConfig {
   name: string;
   value: React.ReactNode;
   actions?: SummaryListAction[];
+  wordWrap?: boolean;
 }
 
 export type SummaryListAction = {
@@ -26,6 +30,7 @@ interface SummaryItemProps {
   name: string;
   children: React.ReactNode;
   actions?: SummaryListAction[];
+  wordWrap?: boolean;
 }
 
 /**
@@ -85,11 +90,14 @@ export const SummaryItem = ({
   name,
   children,
   actions,
+  wordWrap,
 }: 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>
+      <dd className={clsx("govuk-summary-list__value", wordWrap && styles.wordWrap)}>
+        {children}
+      </dd>
       <SummaryListActionsList actions={actions} />
     </div>
   );

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

@@ -15,3 +15,10 @@
     margin-right: 0.5rem;
   }
 }
+
+.fullWidth {
+  /* Remove GOV.UK Frontend sets a hard max-width: 160px */
+  max-width: none !important;
+  /* Each tag will stretch as match as the lenght of its content */
+  width: auto;
+}

package/src/components/Tags/Tags.tsx

@@ -8,10 +8,22 @@ import styles from "./Tags.module.css";
 export type TagProps = {
   text: string;
   colour: TagColours;
+  fullWidth?: boolean;
 };
 
-export const Tag = ({ text, colour }: TagProps): React.JSX.Element => {
-  return <strong className={clsx("govuk-tag", colour, styles.tag)}>{text}</strong>;
+export const Tag = ({ text, colour, fullWidth }: TagProps): React.JSX.Element => {
+  return (
+    <strong
+      className={clsx(
+        "govuk-tag",
+        colour,
+        styles.tag,
+        fullWidth && styles.fullWidth
+      )}
+    >
+      {text}
+    </strong>
+  );
 };
 
 export type TagsProps = {
@@ -32,7 +44,7 @@ export const TagsList = ({ tags }: TagsListProps): React.JSX.Element => {
   return (
     <Tags>
       {tags.map((tag) => (
-        <Tag key={tag.text} text={tag.text} colour={tag.colour} />
+        <Tag key={tag.text} text={tag.text} colour={tag.colour} fullWidth={tag.fullWidth} />
       ))}
     </Tags>
   );