Styling changes

dist/components/footer/Footer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface FooterProps extends React.HTMLProps<HTMLBaseElement> {
-    organization: string;
+    organisation: string;
 }
-declare const Footer: ({ className, organization }: FooterProps) => React.JSX.Element;
+declare const Footer: ({ className, organisation }: FooterProps) => React.JSX.Element;
 export default Footer;
 //# sourceMappingURL=Footer.d.ts.map

dist/components/list/List.d.ts

@@ -4,7 +4,7 @@ interface ListProps extends React.HTMLProps<HTMLDivElement> {
 declare const List: {
     ({ children, ...rest }: ListProps): React.JSX.Element;
     Head: ({ className, children, ...rest }: import("./components/ListHead").ListHeadProps) => React.JSX.Element;
-    Cell: ({ borderStart, className, children, ...rest }: import("./components/ListCell").ListCellProps) => React.JSX.Element;
+    Cell: ({ borderStart, className, children, background, ...rest }: import("./components/ListCell").ListCellProps) => React.JSX.Element;
     Row: ({ children, ...rest }: import("./components/ListRow").ListRowProps) => React.JSX.Element;
     Col: ({ className, children, ...rest }: import("./components/ListCol").ListColProps) => React.JSX.Element;
     Body: ({ children, ...rest }: import("./components/ListBody").ListBodyProps) => React.JSX.Element;

dist/components/list/components/ListCell.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 export interface ListCellProps extends React.HTMLProps<HTMLDivElement> {
     borderStart?: boolean;
+    background?: string;
 }
-declare const ListCell: ({ borderStart, className, children, ...rest }: ListCellProps) => React.JSX.Element;
+declare const ListCell: ({ borderStart, className, children, background, ...rest }: ListCellProps) => React.JSX.Element;
 export default ListCell;
 //# sourceMappingURL=ListCell.d.ts.map

dist/components/title/Title.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 export interface TitleProps extends React.HTMLProps<HTMLHeadingElement> {
     text: string;
 }
-declare const Title: ({ text, ...rest }: TitleProps) => React.JSX.Element;
+declare const Title: ({ text, className, ...rest }: TitleProps) => React.JSX.Element;
 export default Title;
 //# sourceMappingURL=Title.d.ts.map

dist/index.js

@@ -22860,8 +22860,8 @@ Form$1.Feedback = Feedback$1;
 Form$1.Text = FormText$1;
 
 var Title = function (_a) {
-    var text = _a.text, rest = __rest(_a, ["text"]);
-    return React.createElement("h1", __assign$1({}, rest), text);
+    var text = _a.text, className = _a.className, rest = __rest(_a, ["text", "className"]);
+    return (React.createElement("h1", __assign$1({ className: "".concat(className, " mb-0") }, rest), text));
 };
 
 var Card = function (_a) {
@@ -22897,14 +22897,13 @@ var ListRow = function (_a) {
     return (React.createElement(Row$1, __assign$1({ className: "text-center mt-3" }, rest), childrenArray.map(function (child, index) {
         var childElement = child;
         return React.cloneElement(childElement, {
-            key: index,
             borderStart: index !== 0,
         });
     })));
 };
 
 var ListCell = function (_a) {
-    var borderStart = _a.borderStart, className = _a.className, children = _a.children, rest = __rest(_a, ["borderStart", "className", "children"]);
+    var borderStart = _a.borderStart, className = _a.className, children = _a.children, background = _a.background, rest = __rest(_a, ["borderStart", "className", "children", "background"]);
     var section = React.useContext(ListSectionContext);
     var border = borderStart ? 'border-start' : undefined;
     switch (section) {
@@ -22914,7 +22913,7 @@ var ListCell = function (_a) {
         case ListSection.NONE:
         default:
             return (React.createElement("div", __assign$1({ className: "h-100 d-flex align-items-center ".concat(className) }, rest),
-                React.createElement(Card$2, { className: "h-100 w-100 py-3" },
+                React.createElement(Card$2, { className: "h-100 w-100 py-3", style: { backgroundColor: background } },
                     React.createElement(Card$2.Body, { className: "d-flex justify-content-center align-items-center py-0 ".concat(border) },
                         React.createElement("div", { className: "w-100" }, children)))));
     }
@@ -24375,11 +24374,11 @@ var UserProfile = function (_a) {
 };
 
 var Footer = function (_a) {
-    var className = _a.className, organization = _a.organization;
+    var className = _a.className, organisation = _a.organisation;
     var currentYear = new Date().getFullYear();
     return (React.createElement("footer", { className: "mt-auto pt-3 pb-2 text-end text-muted small ".concat(className) },
         "Copyright \u00A9 ",
-        organization,
+        organisation,
         " ",
         currentYear));
 };

example/layouts/Layout.tsx

@@ -17,7 +17,7 @@ const Layout = () => {
             <Outlet />
           </Container>
         </main>
-        <Footer organization='Test' />
+        <Footer organisation='Test' />
       </Container>
     </div>
   );

src/components/footer/Footer.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 export interface FooterProps extends React.HTMLProps<HTMLBaseElement> {
-  organization: string;
+  organisation: string;
 }
 
-const Footer = ({ className, organization }: FooterProps) => {
+const Footer = ({ className, organisation }: FooterProps) => {
   const currentYear = new Date().getFullYear();
 
   return (
     <footer
       className={`mt-auto pt-3 pb-2 text-end text-muted small ${className}`}
     >
-      Copyright © {organization} {currentYear}
+      Copyright © {organisation} {currentYear}
     </footer>
   );
 };

src/components/list/components/ListCell.tsx

@@ -4,12 +4,14 @@ import { Card } from 'react-bootstrap';
 
 export interface ListCellProps extends React.HTMLProps<HTMLDivElement> {
   borderStart?: boolean;
+  background?: string;
 }
 
 const ListCell = ({
   borderStart,
   className,
   children,
+  background,
   ...rest
 }: ListCellProps) => {
   const section = useContext(ListSectionContext);
@@ -30,7 +32,10 @@ const ListCell = ({
           className={`h-100 d-flex align-items-center ${className}`}
           {...rest}
         >
-          <Card className="h-100 w-100 py-3">
+          <Card
+            className="h-100 w-100 py-3"
+            style={{ backgroundColor: background }}
+          >
             <Card.Body
               className={`d-flex justify-content-center align-items-center py-0 ${border}`}
             >

src/components/list/components/ListRow.tsx

@@ -12,7 +12,6 @@ const ListRow = ({ children, ...rest }: ListRowProps) => {
         const childElement = child as React.ReactElement;
 
         return React.cloneElement(childElement, {
-          key: index,
           borderStart: index !== 0,
         });
       })}

src/components/title/Title.tsx

@@ -4,8 +4,12 @@ export interface TitleProps extends React.HTMLProps<HTMLHeadingElement> {
   text: string;
 }
 
-const Title = ({ text, ...rest }: TitleProps) => {
-  return <h1 {...rest}>{text}</h1>;
+const Title = ({ text, className, ...rest }: TitleProps) => {
+  return (
+    <h1 className={`${className} mb-0`} {...rest}>
+      {text}
+    </h1>
+  );
 };
 
 export default Title;