Styling changes

the-curve-consulting · Feb 13, 2024 · fbd775a · fbd775a
1 parent a05fa3e
commit fbd775a
Show file tree

Hide file tree

Showing 19 changed files with 81 additions and 53 deletions.
diff --git a/dist/components/list/List.d.ts b/dist/components/list/List.d.ts
@@ -4,9 +4,9 @@ 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: ({ className, children, ...rest }: import("./components/ListCell").ListCellProps) => React.JSX.Element;
+    Cell: ({ borderStart, className, children, ...rest }: import("./components/ListCell").ListCellProps) => React.JSX.Element;
     Row: ({ children, ...rest }: import("./components/ListRow").ListRowProps) => React.JSX.Element;
-    Col: ({ borderStart, className, children, ...rest }: import("./components/ListCol").ListColProps) => React.JSX.Element;
+    Col: ({ className, children, ...rest }: import("./components/ListCol").ListColProps) => React.JSX.Element;
     Body: ({ children, ...rest }: import("./components/ListBody").ListBodyProps) => React.JSX.Element;
 };
 export default List;

diff --git a/dist/components/list/components/ListCell.d.ts b/dist/components/list/components/ListCell.d.ts
@@ -1,6 +1,7 @@
 import React from 'react';
 export interface ListCellProps extends React.HTMLProps<HTMLDivElement> {
+    borderStart?: boolean;
 }
-declare const ListCell: ({ className, children, ...rest }: ListCellProps) => React.JSX.Element;
+declare const ListCell: ({ borderStart, className, children, ...rest }: ListCellProps) => React.JSX.Element;
 export default ListCell;
 //# sourceMappingURL=ListCell.d.ts.map
diff --git a/dist/components/list/components/ListCell.d.ts.map b/dist/components/list/components/ListCell.d.ts.map
diff --git a/dist/components/list/components/ListCol.d.ts b/dist/components/list/components/ListCol.d.ts
@@ -1,8 +1,7 @@
 import React from 'react';
 import { ColProps } from 'react-bootstrap';
 export interface ListColProps extends ColProps {
-    borderStart?: boolean;
 }
-declare const ListCol: ({ borderStart, className, children, ...rest }: ListColProps) => React.JSX.Element;
+declare const ListCol: ({ className, children, ...rest }: ListColProps) => React.JSX.Element;
 export default ListCol;
 //# sourceMappingURL=ListCol.d.ts.map
diff --git a/dist/components/list/components/ListCol.d.ts.map b/dist/components/list/components/ListCol.d.ts.map
diff --git a/dist/components/list/components/ListRow.d.ts.map b/dist/components/list/components/ListRow.d.ts.map
diff --git a/dist/components/nav/components/NavItem.d.ts b/dist/components/nav/components/NavItem.d.ts
@@ -0,0 +1,9 @@
+import React from 'react';
+export interface NavItemProps {
+    route: string;
+    label: string;
+    icon: string;
+}
+declare const NavItem: ({ route, label, icon }: NavItemProps) => React.JSX.Element;
+export default NavItem;
+//# sourceMappingURL=NavItem.d.ts.map
diff --git a/dist/components/nav/components/NavItem.d.ts.map b/dist/components/nav/components/NavItem.d.ts.map
diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.js b/dist/index.js
@@ -22862,7 +22862,7 @@ var Card = function (_a) {
 
 var Chip = function (_a) {
     var label = _a.label, color = _a.color, rest = __rest(_a, ["label", "color"]);
-    return (React.createElement("h5", null,
+    return (React.createElement("h5", { className: "mb-0" },
         React.createElement("span", __assign$1({ style: {
                 backgroundColor: color,
                 padding: '10px 15px',
@@ -22887,29 +22887,37 @@ var ListHead = function (_a) {
 
 var ListRow = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return (React.createElement(Row$1, __assign$1({ className: "text-center mt-3" }, rest), children));
+    var childrenArray = React.Children.toArray(children);
+    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 className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    var borderStart = _a.borderStart, className = _a.className, children = _a.children, rest = __rest(_a, ["borderStart", "className", "children"]);
     var section = React.useContext(ListSectionContext);
+    var border = borderStart ? 'border-start' : undefined;
     switch (section) {
         case ListSection.HEAD:
             return (React.createElement("div", __assign$1({ className: "col ".concat(className) }, rest), children));
         case ListSection.BODY:
         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" },
-                    React.createElement(Card$2.Body, { className: "d-flex justify-content-center align-items-center" },
+                React.createElement(Card$2, { className: "h-100 w-100 py-3" },
+                    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)))));
     }
 };
 
 var ListCol = function (_a) {
-    var borderStart = _a.borderStart, className = _a.className, children = _a.children, rest = __rest(_a, ["borderStart", "className", "children"]);
-    var border = borderStart ? 'border-start' : undefined;
-    return (React.createElement(Col$1, __assign$1({ className: "px-0 ".concat(border, " ").concat(className) }, rest), children));
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement(Col$1, __assign$1({ className: "px-0 ".concat(className) }, rest),
+        React.createElement("div", { className: "h-100 pt-3" }, children)));
 };
 
 var ListBody = function (_a) {

diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/dist/index.min.js.map b/dist/index.min.js.map
diff --git a/example/pages/ListPage.tsx b/example/pages/ListPage.tsx
@@ -53,20 +53,20 @@ const ListPage = () => {
             </List.Cell>
           </List.Col>
 
-          <List.Col borderStart>
-            <List.Cell>
+          <List.Col>
+            <List.Cell borderStart>
               <Chip label="Test" color="#B8F1A6"/>
             </List.Cell>
           </List.Col>
 
-          <List.Col borderStart>
-            <List.Cell>
+          <List.Col>
+            <List.Cell borderStart>
               <ProgressBar percentage={40}/>
             </List.Cell>
           </List.Col>
 
-          <List.Col borderStart>
-            <List.Cell>
+          <List.Col>
+            <List.Cell borderStart>
               <p className="m-0">Test</p>
             </List.Cell>
           </List.Col>
@@ -84,20 +84,20 @@ const ListPage = () => {
             </List.Cell>
           </List.Col>
 
-          <List.Col borderStart>
-            <List.Cell>
+          <List.Col>
+            <List.Cell borderStart>
               <Chip label="Test" color="#B8F1A6"/>
             </List.Cell>
           </List.Col>
 
-          <List.Col borderStart>
-            <List.Cell>
+          <List.Col>
+            <List.Cell borderStart>
               <p className="m-0">Test</p>
             </List.Cell>
           </List.Col>
 
-          <List.Col borderStart>
-            <List.Cell>
+          <List.Col>
+            <List.Cell borderStart>
               <p className="m-0">Test</p>
             </List.Cell>
           </List.Col>

diff --git a/src/components/chip/Chip.tsx b/src/components/chip/Chip.tsx
@@ -6,7 +6,7 @@ interface ChipProps extends React.HTMLProps<HTMLSpanElement> {
 }
 const Chip = ({ label, color, ...rest }: ChipProps) => {
   return (
-    <h5>
+    <h5 className="mb-0">
       <span
         style={{
           backgroundColor: color,

diff --git a/src/components/list/components/ListCell.tsx b/src/components/list/components/ListCell.tsx
@@ -2,10 +2,18 @@ import React, { useContext } from 'react';
 import ListSectionContext, { ListSection } from '../ListSectionContext';
 import { Card } from 'react-bootstrap';
 
-export interface ListCellProps extends React.HTMLProps<HTMLDivElement> {}
+export interface ListCellProps extends React.HTMLProps<HTMLDivElement> {
+  borderStart?: boolean;
+}
 
-const ListCell = ({ className, children, ...rest }: ListCellProps) => {
+const ListCell = ({
+  borderStart,
+  className,
+  children,
+  ...rest
+}: ListCellProps) => {
   const section = useContext(ListSectionContext);
+  const border = borderStart ? 'border-start' : undefined;
 
   switch (section) {
     case ListSection.HEAD:
@@ -22,8 +30,10 @@ const ListCell = ({ className, children, ...rest }: ListCellProps) => {
           className={`h-100 d-flex align-items-center ${className}`}
           {...rest}
         >
-          <Card className="h-100 w-100">
-            <Card.Body className="d-flex justify-content-center align-items-center">
+          <Card className="h-100 w-100 py-3">
+            <Card.Body
+              className={`d-flex justify-content-center align-items-center py-0 ${border}`}
+            >
               <div className="w-100">{children}</div>
             </Card.Body>
           </Card>

diff --git a/src/components/list/components/ListCol.tsx b/src/components/list/components/ListCol.tsx
@@ -1,21 +1,12 @@
 import React from 'react';
 import { ColProps, Col } from 'react-bootstrap';
 
-export interface ListColProps extends ColProps {
-  borderStart?: boolean;
-}
-
-const ListCol = ({
-  borderStart,
-  className,
-  children,
-  ...rest
-}: ListColProps) => {
-  const border = borderStart ? 'border-start' : undefined;
+export interface ListColProps extends ColProps {}
 
+const ListCol = ({ className, children, ...rest }: ListColProps) => {
   return (
-    <Col className={`px-0 ${border} ${className}`} {...rest}>
-      {children}
+    <Col className={`px-0 ${className}`} {...rest}>
+      <div className={`h-100 pt-3`}>{children}</div>
     </Col>
   );
 };

diff --git a/src/components/list/components/ListRow.tsx b/src/components/list/components/ListRow.tsx
@@ -4,9 +4,18 @@ import { RowProps, Row } from 'react-bootstrap';
 export interface ListRowProps extends RowProps {}
 
 const ListRow = ({ children, ...rest }: ListRowProps) => {
+  const childrenArray = React.Children.toArray(children);
+
   return (
     <Row className="text-center mt-3" {...rest}>
-      {children}
+      {childrenArray.map((child, index) => {
+        const childElement = child as React.ReactElement;
+
+        return React.cloneElement(childElement, {
+          key: index,
+          borderStart: index !== 0,
+        });
+      })}
     </Row>
   );
 };