@uktrade/react-component-library 0.22.2 → 0.22.4

package/dist/components/SummaryList/SummaryList.d.ts

@@ -14,7 +14,6 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     titleBackground?: string;
     subSectionNode?: React.ReactNode;
-    titleClassName?: string;
 }
-export declare const SummaryCard: ({ title, children, actions, className, titleBackground, subSectionNode, titleClassName, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SummaryCard: ({ title, children, actions, className, titleBackground, subSectionNode, ...props }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SummaryList.d.ts.map

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

@@ -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;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,GAAI,oGASzB,gBAAgB,4CA2ClB,CAAC"}
+{"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"}

package/dist/components/SummaryList/SummaryList.js

@@ -4,4 +4,4 @@ import clsx from "clsx";
 import { SummaryListAction } from "../SummaryItem/SummaryItem";
 import styles from "./SummaryList.module.css";
 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 })] }));
-export const SummaryCard = ({ title, children, actions, className, titleBackground, subSectionNode, titleClassName, ...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: clsx("govuk-summary-card__title", titleClassName), children: title }), actions && (_jsx("ul", { className: clsx("govuk-summary-card__actions", 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 })] }) }));
+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 })] }) }));

package/dist/components/Tabs/Tabs.d.ts

@@ -7,8 +7,7 @@ export type Tab = {
 export type TabsProps = {
     tabs: Tab[];
     title?: string;
-    selectedTab?: string;
     onTabChange?: (tabId: string) => void;
 };
-export declare const Tabs: ({ tabs, title, selectedTab, onTabChange, }: TabsProps) => React.JSX.Element;
+export declare const Tabs: ({ tabs, title, onTabChange, }: TabsProps) => React.JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,4CAKlB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OA6CxB,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,+BAIlB,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OA2CxB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -1,10 +1,9 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-export const Tabs = ({ tabs, title = "Contents", selectedTab, onTabChange, }) => {
+export const Tabs = ({ tabs, title = "Contents", onTabChange, }) => {
     if (!tabs.length) {
         return _jsx(_Fragment, {});
     }
-    const activeTab = selectedTab ?? tabs[0]?.id;
-    return (_jsxs("div", { className: "govuk-tabs", "data-module": "govuk-tabs", children: [_jsx("h2", { className: "govuk-tabs__title", children: title }), _jsx("ul", { className: "govuk-tabs__list", children: tabs.map((tab) => (_jsx("li", { className: clsx("govuk-tabs__list-item", tab.id === activeTab && "govuk-tabs__list-item--selected"), children: _jsx("a", { className: "govuk-tabs__tab", href: `#${tab.id}`, onClick: () => onTabChange?.(tab.id), children: tab.label }) }, tab.id))) }), tabs.map((tab) => (_jsx("div", { id: tab.id, className: clsx("govuk-tabs__panel", tab.id !== activeTab && "govuk-tabs__panel--hidden"), children: tab.content }, tab.id)))] }));
+    return (_jsxs("div", { className: "govuk-tabs", "data-module": "govuk-tabs", children: [_jsx("h2", { className: "govuk-tabs__title", children: title }), _jsx("ul", { className: "govuk-tabs__list", children: tabs.map((tab, index) => (_jsx("li", { className: clsx("govuk-tabs__list-item", index === 0 && "govuk-tabs__list-item--selected"), children: _jsx("a", { className: "govuk-tabs__tab", href: `#${tab.id}`, onClick: () => onTabChange?.(tab.id), children: tab.label }) }, tab.id))) }), tabs.map((tab, index) => (_jsx("div", { id: tab.id, className: clsx("govuk-tabs__panel", index > 0 && "govuk-tabs__panel--hidden"), children: tab.content }, tab.id)))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.22.2",
+  "version": "0.22.4",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/SummaryList/SummaryList.tsx

@@ -29,7 +29,6 @@ export interface SummaryCardProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   titleBackground?: string;
   subSectionNode?: React.ReactNode;
-  titleClassName?: string;
 }
 
 export const SummaryCard = ({
@@ -39,7 +38,6 @@ export const SummaryCard = ({
   className,
   titleBackground,
   subSectionNode,
-  titleClassName,
   ...props
 }: SummaryCardProps) => (
   <div className={clsx(styles.root, className)}>
@@ -48,7 +46,7 @@ export const SummaryCard = ({
         className="govuk-summary-card__title-wrapper"
         style={titleBackground ? { background: titleBackground } : undefined}
       >
-        <h2 className={clsx("govuk-summary-card__title", titleClassName)}>
+        <h2 className="govuk-summary-card__title govuk-!-font-size-16">
           {title}
         </h2>
 
@@ -56,6 +54,7 @@ export const SummaryCard = ({
           <ul
             className={clsx(
               "govuk-summary-card__actions",
+              "govuk-!-font-size-16",
               styles.summaryCardTitleActions
             )}
           >

package/src/components/Tabs/Tabs.tsx

@@ -12,33 +12,29 @@ export type Tab = {
 export type TabsProps = {
   tabs: Tab[];
   title?: string;
-  selectedTab?: string;
   onTabChange?: (tabId: string) => void;
 };
 
 export const Tabs = ({
   tabs,
   title = "Contents",
-  selectedTab,
   onTabChange,
 }: TabsProps): React.JSX.Element => {
   if (!tabs.length) {
     return <></>;
   }
 
-  const activeTab = selectedTab ?? tabs[0]?.id;
-
   return (
     <div className="govuk-tabs" data-module="govuk-tabs">
       <h2 className="govuk-tabs__title">{title}</h2>
 
       <ul className="govuk-tabs__list">
-        {tabs.map((tab) => (
+        {tabs.map((tab, index) => (
           <li
             key={tab.id}
             className={clsx(
               "govuk-tabs__list-item",
-              tab.id === activeTab && "govuk-tabs__list-item--selected",
+              index === 0 && "govuk-tabs__list-item--selected",
             )}
           >
             <a
@@ -52,13 +48,13 @@ export const Tabs = ({
         ))}
       </ul>
 
-      {tabs.map((tab) => (
+      {tabs.map((tab, index) => (
         <div
           key={tab.id}
           id={tab.id}
           className={clsx(
             "govuk-tabs__panel",
-            tab.id !== activeTab && "govuk-tabs__panel--hidden",
+            index > 0 && "govuk-tabs__panel--hidden",
           )}
         >
           {tab.content}