@uktrade/react-component-library 0.20.1 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.js +1 -1
  2. package/dist/components/Inputs/SelectInput/SelectInput.js +1 -1
  3. package/dist/components/Inputs/TextInput/TextInput.js +1 -1
  4. package/dist/components/Tags/Tags.d.ts +2 -1
  5. package/dist/components/Tags/Tags.d.ts.map +1 -1
  6. package/dist/components/Tags/Tags.js +3 -3
  7. package/dist/components/Tags/Tags.module.css +7 -0
  8. package/package.json +1 -1
  9. package/src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx +1 -1
  10. package/src/components/Inputs/SelectInput/SelectInput.tsx +1 -1
  11. package/src/components/Inputs/TextInput/TextInput.tsx +1 -1
  12. package/src/components/Tags/Tags.module.css +7 -0
  13. package/src/components/Tags/Tags.tsx +15 -3
package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.js CHANGED
@@ -16,7 +16,7 @@ export const CheckboxGroup = ({ legend, hint, error, options, name, values, lege
16
16
  return (_jsx("div", { className: clsx("govuk-form-group", {
17
17
  "govuk-form-group--error": hasError,
18
18
  }), children: _jsxs("fieldset", { className: "govuk-fieldset", "aria-describedby": errorId, children: [_jsx("legend", { className: clsx("govuk-fieldset__legend", {
19
- [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
19
+ [`govuk-fieldset__legend--${legendSize}`]: true,
20
20
  }), children: legendHeading }), hint && _jsx("div", { className: "govuk-hint", children: hint }), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsx("div", { className: clsx("govuk-checkboxes", {
21
21
  "govuk-checkboxes--small": checkboxSize === "small",
22
22
  }), "data-module": "govuk-checkboxes", children: options.map((opt) => (_jsxs("div", { className: "govuk-checkboxes__item", children: [_jsx("input", { className: "govuk-checkboxes__input", id: opt.id, name: name, type: "checkbox", value: opt.value, checked: values.includes(opt.value), onChange: handleChange, "aria-label": opt.ariaLabel }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label }), opt.hint && (_jsx("div", { className: "govuk-hint govuk-checkboxes__hint", children: opt.hint }))] }, opt.id))) })] }) }));
package/dist/components/Inputs/SelectInput/SelectInput.js CHANGED
@@ -8,7 +8,7 @@ export const SelectInput = ({ id, label, hint, error, options, placeholder, labe
8
8
  const errorId = hasError ? `${id}-error` : undefined;
9
9
  const ariaDescribedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
10
10
  const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
11
- [`govuk-label--${labelSize}`]: labelSize !== "m",
11
+ [`govuk-label--${labelSize}`]: true,
12
12
  }), children: label }));
13
13
  return (_jsxs("div", { className: clsx("govuk-form-group", {
14
14
  "govuk-form-group--error": hasError,
package/dist/components/Inputs/TextInput/TextInput.js CHANGED
@@ -8,7 +8,7 @@ export const TextInput = ({ id, label, hint, error, width = "20", labelSize = "m
8
8
  const errorId = hasError ? `${id}-error` : undefined;
9
9
  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
10
10
  const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
11
- [`govuk-label--${labelSize}`]: labelSize !== "m",
11
+ [`govuk-label--${labelSize}`]: true,
12
12
  }), children: label }));
13
13
  const input = (_jsx("input", { id: id, className: clsx("govuk-input", `govuk-input--width-${width}`, className), "aria-invalid": hasError, "aria-describedby": describedBy, placeholder: placeholder, ...props }));
14
14
  return (_jsxs("div", { className: clsx("govuk-form-group", {
package/dist/components/Tags/Tags.d.ts CHANGED
@@ -3,8 +3,9 @@ import { TagColours } from "../Colours";
3
3
  export type TagProps = {
4
4
  text: string;
5
5
  colour: TagColours;
6
+ fullWidth?: boolean;
6
7
  };
7
- export declare const Tag: ({ text, colour }: TagProps) => React.JSX.Element;
8
+ export declare const Tag: ({ text, colour, fullWidth }: TagProps) => React.JSX.Element;
8
9
  export type TagsProps = {
9
10
  children: React.ReactNode;
10
11
  };
package/dist/components/Tags/Tags.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -3,8 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import clsx from "clsx";
4
4
  import { TagColours } from "../Colours";
5
5
  import styles from "./Tags.module.css";
6
- export const Tag = ({ text, colour }) => {
7
- return _jsx("strong", { className: clsx("govuk-tag", colour, styles.tag), children: text });
6
+ export const Tag = ({ text, colour, fullWidth }) => {
7
+ return (_jsx("strong", { className: clsx("govuk-tag", colour, styles.tag, fullWidth && styles.fullWidth), children: text }));
8
8
  };
9
9
  export const Tags = ({ children }) => {
10
10
  return _jsx("span", { className: clsx("govuk-tags", styles.root), children: children });
@@ -12,5 +12,5 @@ export const Tags = ({ children }) => {
12
12
  export const TagsList = ({ tags }) => {
13
13
  if (!tags || tags.length === 0)
14
14
  return _jsx(_Fragment, {});
15
- return (_jsx(Tags, { children: tags.map((tag) => (_jsx(Tag, { text: tag.text, colour: tag.colour }, tag.text))) }));
15
+ return (_jsx(Tags, { children: tags.map((tag) => (_jsx(Tag, { text: tag.text, colour: tag.colour, fullWidth: tag.fullWidth }, tag.text))) }));
16
16
  };
package/dist/components/Tags/Tags.module.css CHANGED
@@ -15,3 +15,10 @@
15
15
  margin-right: 0.5rem;
16
16
  }
17
17
  }
18
+
19
+ .fullWidth {
20
+ /* Remove GOV.UK Frontend sets a hard max-width: 160px */
21
+ max-width: none !important;
22
+ /* Each tag will stretch as match as the lenght of its content */
23
+ width: auto;
24
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uktrade/react-component-library",
3
- "version": "0.20.1",
3
+ "version": "0.21.0",
4
4
  "description": "A collection of reusable React components following GOV.UK design patterns.",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx CHANGED
@@ -69,7 +69,7 @@ export const CheckboxGroup = ({
69
69
  <fieldset className="govuk-fieldset" aria-describedby={errorId}>
70
70
  <legend
71
71
  className={clsx("govuk-fieldset__legend", {
72
- [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
72
+ [`govuk-fieldset__legend--${legendSize}`]: true,
73
73
  })}
74
74
  >
75
75
  {legendHeading}
package/src/components/Inputs/SelectInput/SelectInput.tsx CHANGED
@@ -42,7 +42,7 @@ export const SelectInput = ({
42
42
  <label
43
43
  htmlFor={id}
44
44
  className={clsx("govuk-label", {
45
- [`govuk-label--${labelSize}`]: labelSize !== "m",
45
+ [`govuk-label--${labelSize}`]: true,
46
46
  })}
47
47
  >
48
48
  {label}
package/src/components/Inputs/TextInput/TextInput.tsx CHANGED
@@ -42,7 +42,7 @@ export const TextInput = ({
42
42
  <label
43
43
  htmlFor={id}
44
44
  className={clsx("govuk-label", {
45
- [`govuk-label--${labelSize}`]: labelSize !== "m",
45
+ [`govuk-label--${labelSize}`]: true,
46
46
  })}
47
47
  >
48
48
  {label}
package/src/components/Tags/Tags.module.css CHANGED
@@ -15,3 +15,10 @@
15
15
  margin-right: 0.5rem;
16
16
  }
17
17
  }
18
+
19
+ .fullWidth {
20
+ /* Remove GOV.UK Frontend sets a hard max-width: 160px */
21
+ max-width: none !important;
22
+ /* Each tag will stretch as match as the lenght of its content */
23
+ width: auto;
24
+ }
package/src/components/Tags/Tags.tsx CHANGED
@@ -8,10 +8,22 @@ import styles from "./Tags.module.css";
8
8
  export type TagProps = {
9
9
  text: string;
10
10
  colour: TagColours;
11
+ fullWidth?: boolean;
11
12
  };
12
13
 
13
- export const Tag = ({ text, colour }: TagProps): React.JSX.Element => {
14
- return <strong className={clsx("govuk-tag", colour, styles.tag)}>{text}</strong>;
14
+ export const Tag = ({ text, colour, fullWidth }: TagProps): React.JSX.Element => {
15
+ return (
16
+ <strong
17
+ className={clsx(
18
+ "govuk-tag",
19
+ colour,
20
+ styles.tag,
21
+ fullWidth && styles.fullWidth
22
+ )}
23
+ >
24
+ {text}
25
+ </strong>
26
+ );
15
27
  };
16
28
 
17
29
  export type TagsProps = {
@@ -32,7 +44,7 @@ export const TagsList = ({ tags }: TagsListProps): React.JSX.Element => {
32
44
  return (
33
45
  <Tags>
34
46
  {tags.map((tag) => (
35
- <Tag key={tag.text} text={tag.text} colour={tag.colour} />
47
+ <Tag key={tag.text} text={tag.text} colour={tag.colour} fullWidth={tag.fullWidth} />
36
48
  ))}
37
49
  </Tags>
38
50
  );