Made lists responsive

the-curve-consulting · Feb 19, 2024 · 3ddc717 · 3ddc717
1 parent aba0dc5
commit 3ddc717
Show file tree

Hide file tree

Showing 18 changed files with 53 additions and 20 deletions.
diff --git a/dist/components/list/List.d.ts b/dist/components/list/List.d.ts
@@ -2,7 +2,7 @@ import React from 'react';
 interface ListProps extends React.HTMLProps<HTMLDivElement> {
 }
 declare const List: {
-    ({ children, ...rest }: ListProps): React.JSX.Element;
+    ({ className, children, ...rest }: ListProps): React.JSX.Element;
     Head: ({ className, children, ...rest }: import("./components/ListHead").ListHeadProps) => 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;

diff --git a/dist/components/list/List.d.ts.map b/dist/components/list/List.d.ts.map
diff --git a/dist/index.css b/dist/index.css
@@ -1057,6 +1057,11 @@ a.breadcrumb-item:hover {
   text-decoration: underline;
 }
 
+.list-container {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
 :root {
   --texmo-primary-color: #6A955B;
   --texmo-text-color: #424244;

diff --git a/dist/index.es.css b/dist/index.es.css
@@ -1057,6 +1057,11 @@ a.breadcrumb-item:hover {
   text-decoration: underline;
 }
 
+.list-container {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
 :root {
   --texmo-primary-color: #6A955B;
   --texmo-text-color: #424244;

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
@@ -22888,13 +22888,13 @@ var ListSectionContext = React.createContext(ListSection.NONE);
 var ListHead = function (_a) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     return (React.createElement(ListSectionContext.Provider, { value: ListSection.HEAD },
-        React.createElement("div", __assign$1({ className: "".concat(className, " mx-0 row card-header text-center") }, rest), children)));
+        React.createElement("div", __assign$1({ className: "".concat(className, " mx-0 row card-header text-center list-row") }, rest), children)));
 };
 
 var ListRow = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
     var childrenArray = React.Children.toArray(children);
-    return (React.createElement(Row$1, __assign$1({ className: "text-center mt-3 mx-0" }, rest), childrenArray.map(function (child, index) {
+    return (React.createElement(Row$1, __assign$1({ className: "text-center mt-3 mx-0 list-row" }, rest), childrenArray.map(function (child, index) {
         var childElement = child;
         return React.cloneElement(childElement, {
             borderStart: index !== 0,
@@ -22908,11 +22908,11 @@ var ListCell = function (_a) {
     var border = borderStart ? 'border-start' : undefined;
     switch (section) {
         case ListSection.HEAD:
-            return (React.createElement("div", __assign$1({ className: "col ".concat(className) }, rest), children));
+            return (React.createElement("div", __assign$1({ className: "col list-cell ".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),
+            return (React.createElement("div", __assign$1({ className: "h-100 d-flex align-items-center list-cell ".concat(className) }, rest),
                 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)))));
@@ -22931,8 +22931,8 @@ var ListBody = function (_a) {
 };
 
 var List = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return React.createElement("div", __assign$1({}, rest), children);
+    var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("div", __assign$1({ className: "list-container ".concat(className) }, rest), children));
 };
 List.Head = ListHead;
 List.Cell = ListCell;

diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.min.css b/dist/index.min.css
@@ -1057,6 +1057,11 @@ a.breadcrumb-item:hover {
   text-decoration: underline;
 }
 
+.list-container {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
 :root {
   --texmo-primary-color: #6A955B;
   --texmo-text-color: #424244;

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/scss/App.scss b/scss/App.scss
@@ -117,4 +117,4 @@ a.breadcrumb-item {
 
 a.breadcrumb-item:hover {
   text-decoration: underline;
-}
+}
diff --git a/scss/texmo-react-components.scss b/scss/texmo-react-components.scss
@@ -10,3 +10,4 @@
 @import '../src/components/button/Button.scss';
 @import '../src/components/title/Title.scss';
 @import '../src/components/card/Card.scss';
+@import '../src/components/list/List.scss';
diff --git a/src/components/list/List.scss b/src/components/list/List.scss
@@ -0,0 +1,13 @@
+.list-container {
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.list-row {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+}
+
+.list-cell {
+  min-width: 150px;
+}
diff --git a/src/components/list/List.tsx b/src/components/list/List.tsx
@@ -7,8 +7,12 @@ import ListBody from './components/ListBody';
 
 interface ListProps extends React.HTMLProps<HTMLDivElement> {}
 
-const List = ({ children, ...rest }: ListProps) => {
-  return <div {...rest}>{children}</div>;
+const List = ({ className, children, ...rest }: ListProps) => {
+  return (
+    <div className={`list-container ${className}`} {...rest}>
+      {children}
+    </div>
+  );
 };
 
 List.Head = ListHead;

diff --git a/src/components/list/components/ListCell.tsx b/src/components/list/components/ListCell.tsx
@@ -20,7 +20,7 @@ const ListCell = ({
   switch (section) {
     case ListSection.HEAD:
       return (
-        <div className={`col ${className}`} {...rest}>
+        <div className={`col list-cell ${className}`} {...rest}>
           {children}
         </div>
       );
@@ -29,7 +29,7 @@ const ListCell = ({
     default:
       return (
         <div
-          className={`h-100 d-flex align-items-center ${className}`}
+          className={`h-100 d-flex align-items-center list-cell ${className}`}
           {...rest}
         >
           <Card

diff --git a/src/components/list/components/ListHead.tsx b/src/components/list/components/ListHead.tsx
@@ -7,7 +7,7 @@ const ListHead = ({ className, children, ...rest }: ListHeadProps) => {
   return (
     <ListSectionContext.Provider value={ListSection.HEAD}>
       <div
-        className={`${className} mx-0 row card-header text-center`}
+        className={`${className} mx-0 row card-header text-center list-row`}
         {...rest}
       >
         {children}

diff --git a/src/components/list/components/ListRow.tsx b/src/components/list/components/ListRow.tsx
@@ -7,7 +7,7 @@ const ListRow = ({ children, ...rest }: ListRowProps) => {
   const childrenArray = React.Children.toArray(children);
 
   return (
-    <Row className="text-center mt-3 mx-0" {...rest}>
+    <Row className="text-center mt-3 mx-0 list-row" {...rest}>
       {childrenArray.map((child, index) => {
         const childElement = child as React.ReactElement;