@uktrade/react-component-library 0.22.6 → 0.22.7

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 (7) hide show
  1. package/dist/components/SummaryList/SummaryList.d.ts +2 -1
  2. package/dist/components/SummaryList/SummaryList.d.ts.map +1 -1
  3. package/dist/components/SummaryList/SummaryList.js +1 -1
  4. package/dist/components/SummaryList/SummaryList.module.css +9 -1
  5. package/package.json +1 -1
  6. package/src/components/SummaryList/SummaryList.module.css +9 -1
  7. package/src/components/SummaryList/SummaryList.tsx +11 -3
package/dist/components/SummaryList/SummaryList.d.ts CHANGED
@@ -9,11 +9,12 @@ export interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement>
9
9
  export declare const SummaryList: ({ title, children, className, ...props }: SummaryListProps) => import("react/jsx-runtime").JSX.Element;
10
10
  export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
11
11
  title: string;
12
+ titleTag?: React.ReactNode;
12
13
  children?: React.ReactNode;
13
14
  actions?: SummaryListAction[];
14
15
  className?: string;
15
16
  titleBackground?: string;
16
17
  subSectionNode?: React.ReactNode;
17
18
  }
18
- export declare const SummaryCard: ({ title, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
19
+ export declare const SummaryCard: ({ title, titleTag, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
19
20
  //# sourceMappingURL=SummaryList.d.ts.map
package/dist/components/SummaryList/SummaryList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,oFAQzB,gBAAgB,4CA4ClB,CAAC"}
1
+ {"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,0CAA0C,gBAAgB,4CAOrF,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,8FASzB,gBAAgB,4CAkDlB,CAAC"}
package/dist/components/SummaryList/SummaryList.js CHANGED
@@ -4,4 +4,4 @@ import clsx from "clsx";
4
4
  import { SummaryListAction } from "../SummaryItem/SummaryItem";
5
5
  import styles from "./SummaryList.module.css";
6
6
  export const SummaryList = ({ title, children, className, ...props }) => (_jsxs(_Fragment, { children: [title && _jsx("h2", { className: "govuk-heading-l", children: title }), _jsx("dl", { className: clsx("govuk-summary-list", className), ...props, children: children })] }));
7
- export const SummaryCard = ({ title, children, actions, className, titleBackground, subSectionNode, ...props }) => (_jsx("div", { className: clsx(styles.root, className), children: _jsxs("div", { className: "govuk-summary-card govuk-body", ...props, children: [_jsxs("div", { className: "govuk-summary-card__title-wrapper", style: titleBackground ? { background: titleBackground } : undefined, children: [_jsx("h2", { className: "govuk-summary-card__title govuk-!-font-size-16", children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", "govuk-!-font-size-16", styles.summaryCardTitleActions), children: actions.map((action) => (_jsx("li", { className: "govuk-summary-card__action", children: _jsx(SummaryListAction, { action: action }) }, action.text))) }))] }), subSectionNode && (_jsx("div", { children: subSectionNode })), _jsx("div", { className: clsx("govuk-summary-card__content", styles.govukSummaryCardContent), children: children })] }) }));
7
+ export const SummaryCard = ({ title, titleTag, children, actions, className, titleBackground, subSectionNode, ...props }) => (_jsx("div", { className: clsx(styles.root, className), children: _jsxs("div", { className: "govuk-summary-card govuk-body", ...props, children: [_jsxs("div", { className: "govuk-summary-card__title-wrapper", style: titleBackground ? { background: titleBackground } : undefined, children: [_jsxs("h2", { className: "govuk-summary-card__title govuk-!-font-size-16", children: [_jsx("span", { children: title }), titleTag && (_jsx("span", { className: styles.titleTag, children: titleTag }))] }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", "govuk-!-font-size-16", styles.summaryCardTitleActions), children: actions.map((action) => (_jsx("li", { className: "govuk-summary-card__action", children: _jsx(SummaryListAction, { action: action }) }, action.text))) }))] }), subSectionNode && (_jsx("div", { children: subSectionNode })), _jsx("div", { className: clsx("govuk-summary-card__content", styles.govukSummaryCardContent), children: children })] }) }));
package/dist/components/SummaryList/SummaryList.module.css CHANGED
@@ -11,4 +11,12 @@
11
11
  .summaryCardTitleActions {
12
12
  font-weight: 400;
13
13
  }
14
- }
14
+ }
15
+
16
+ .titleTag {
17
+ margin-left: 1rem;
18
+
19
+ strong {
20
+ font-size: 16px;
21
+ }
22
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uktrade/react-component-library",
3
- "version": "0.22.6",
3
+ "version": "0.22.7",
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/SummaryList/SummaryList.module.css CHANGED
@@ -11,4 +11,12 @@
11
11
  .summaryCardTitleActions {
12
12
  font-weight: 400;
13
13
  }
14
- }
14
+ }
15
+
16
+ .titleTag {
17
+ margin-left: 1rem;
18
+
19
+ strong {
20
+ font-size: 16px;
21
+ }
22
+ }
package/src/components/SummaryList/SummaryList.tsx CHANGED
@@ -24,6 +24,7 @@ export const SummaryList = ({ title, children, className, ...props }: SummaryLis
24
24
 
25
25
  export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
26
26
  title: string;
27
+ titleTag?: React.ReactNode;
27
28
  children?: React.ReactNode;
28
29
  actions?: SummaryListAction[];
29
30
  className?: string;
@@ -33,6 +34,7 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
33
34
 
34
35
  export const SummaryCard = ({
35
36
  title,
37
+ titleTag,
36
38
  children,
37
39
  actions,
38
40
  className,
@@ -46,9 +48,15 @@ export const SummaryCard = ({
46
48
  className="govuk-summary-card__title-wrapper"
47
49
  style={titleBackground ? { background: titleBackground } : undefined}
48
50
  >
49
- <h2 className="govuk-summary-card__title govuk-!-font-size-16">
50
- {title}
51
- </h2>
51
+ <h2 className="govuk-summary-card__title govuk-!-font-size-16">
52
+ <span>{title}</span>
53
+
54
+ {titleTag && (
55
+ <span className={styles.titleTag}>
56
+ {titleTag}
57
+ </span>
58
+ )}
59
+ </h2>
52
60
 
53
61
  {actions && (
54
62
  <ul