@uktrade/react-component-library 0.20.2 → 0.21.0

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.0",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

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>
   );