From 57df41ceb968efb6dee9072d3bc092a5a56ae189 Mon Sep 17 00:00:00 2001
From: tnagorra <weathermist@gmail.com>
Date: Thu, 6 Jan 2022 15:15:55 +0545
Subject: [PATCH] Add support for horizontal and vertical list

---
 src/components/Border/styles.css       | 55 +++++++++++++++-----------
 src/components/List.tsx                |  7 ++++
 src/components/ListView/index.tsx      |  9 +++--
 src/components/ListView/styles.css     | 10 +++++
 storybook/stories/ListView.stories.tsx | 35 ++++++++++++++--
 5 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/components/Border/styles.css b/src/components/Border/styles.css
index 50b93664..bd834d4d 100644
--- a/src/components/Border/styles.css
+++ b/src/components/Border/styles.css
@@ -4,10 +4,40 @@
 
     position: relative;
     background-color: var(--dui-color-separator);
-    width: 100%;
-    height: var(--border-width);
     --animation-name: grow-h;
 
+    &.top, &.bottom {
+        height: var(--border-width);
+        width: 100%;
+
+        /* NOTE: this assumes border to be in horizontal direction */
+        &.extend-to-spacing {
+            &::before {
+                position: absolute;
+                left: calc(-1 * var(--spacing));
+                background-color: var(--dui-color-separator);
+                width: var(--spacing);
+                height: var(--border-width);
+                content: '';
+            }
+
+            &::after {
+                position: absolute;
+                right: calc(-1 * var(--spacing));
+                background-color: var(--dui-color-separator);
+                width: var(--spacing);
+                height: var(--border-width);
+                content: '';
+            }
+        }
+    }
+
+    &.right, &.left {
+        flex-shrink: 0;
+        width: var(--border-width);
+        height: initial;
+    }
+
     &.absolutely-positioned {
         position: absolute;
         top: unset;
@@ -99,27 +129,6 @@
         --border-width: var(--dui-width-separator-dense);
     }
 
-    /* NOTE: this assumes border to be in horizontal direction */
-    &.extend-to-spacing {
-        &::before {
-            position: absolute;
-            left: calc(-1 * var(--spacing));
-            background-color: var(--dui-color-separator);
-            width: var(--spacing);
-            height: var(--border-width);
-            content: '';
-        }
-
-        &::after {
-            position: absolute;
-            right: calc(-1 * var(--spacing));
-            background-color: var(--dui-color-separator);
-            width: var(--spacing);
-            height: var(--border-width);
-            content: '';
-        }
-    }
-
     &.no-spacing {
         --spacing: 0;
     }
diff --git a/src/components/List.tsx b/src/components/List.tsx
index ba3c3dd9..1c6a7e01 100644
--- a/src/components/List.tsx
+++ b/src/components/List.tsx
@@ -23,6 +23,7 @@ interface BaseProps<D, P, K extends OptionKey> {
     borderBetweenItem?: boolean;
     borderBetweenItemWidth?: BorderProps['width'];
     borderBetweenItemClassName?: string;
+    direction?: 'horizontal' | 'vertical';
     spacing?: SpacingTypes;
 }
 
@@ -64,6 +65,7 @@ function NonGroupedList<D, P, K extends OptionKey>(
         borderBetweenItem,
         borderBetweenItemClassName,
         borderBetweenItemWidth = 'thin',
+        direction = 'horizontal',
         indexOffset = 0,
     } = props;
 
@@ -93,6 +95,7 @@ function NonGroupedList<D, P, K extends OptionKey>(
                         spacing={spacing}
                         className={borderBetweenItemClassName}
                         width={borderBetweenItemWidth}
+                        position={direction === 'horizontal' ? 'right' : 'bottom'}
                     />
                 )}
             </React.Fragment>
@@ -108,6 +111,7 @@ function NonGroupedList<D, P, K extends OptionKey>(
         borderBetweenItem,
         borderBetweenItemWidth,
         borderBetweenItemClassName,
+        direction,
     ]);
 
     return (
@@ -140,6 +144,7 @@ function GroupedList<D, P, K extends OptionKey, GP extends GroupCommonProps, GK
         borderBetweenItem,
         borderBetweenItemWidth = 'thin',
         borderBetweenItemClassName,
+        direction = 'horizontal',
     } = props;
 
     const data = dataFromProps ?? (emptyList as D[]);
@@ -166,6 +171,7 @@ function GroupedList<D, P, K extends OptionKey, GP extends GroupCommonProps, GK
                         spacing={spacing}
                         className={borderBetweenItemClassName}
                         width={borderBetweenItemWidth}
+                        position={direction === 'horizontal' ? 'right' : 'bottom'}
                     />
                 )}
             </>
@@ -180,6 +186,7 @@ function GroupedList<D, P, K extends OptionKey, GP extends GroupCommonProps, GK
         borderBetweenItemClassName,
         borderBetweenItemWidth,
         spacing,
+        direction,
     ]);
 
     const renderGroup = (
diff --git a/src/components/ListView/index.tsx b/src/components/ListView/index.tsx
index 9084f88f..87e0fb86 100644
--- a/src/components/ListView/index.tsx
+++ b/src/components/ListView/index.tsx
@@ -36,8 +36,6 @@ export type Props<
     compactEmptyMessage?: boolean;
     compactAndVerticalEmptyMessage?: boolean;
     compactPendingMessage?: boolean;
-    // FIXME: need proper documentation for direction
-    direction?: 'horizontal' | 'vertical';
     messageShown?: boolean;
     messageIconShown?: boolean;
     style?: React.CSSProperties,
@@ -75,7 +73,7 @@ function ListView<
         compactAndVerticalEmptyMessage,
         messageActions,
         spacing = 'none',
-        direction = 'horizontal',
+        direction = 'vertical',
         messageShown = false,
         messageIconShown = false,
         style,
@@ -93,7 +91,9 @@ function ListView<
                 empty && styles.empty,
                 pending && styles.pending,
                 spacingToStyleMap[spacing],
-                direction === 'vertical' && styles.vertical,
+                direction === 'vertical'
+                    ? styles.vertical
+                    : styles.horizontal,
                 reverse && styles.reverse,
                 className,
             )}
@@ -123,6 +123,7 @@ function ListView<
                 <List
                     data={data}
                     spacing={spacing}
+                    direction={direction}
                     {...otherListProps}
                 />
             )}
diff --git a/src/components/ListView/styles.css b/src/components/ListView/styles.css
index 2a4147fc..a32af934 100644
--- a/src/components/ListView/styles.css
+++ b/src/components/ListView/styles.css
@@ -9,6 +9,16 @@
         }
     }
 
+    &.horizontal {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing);
+
+        &.reverse {
+            flex-direction: row-reverse;
+        }
+    }
+
     &.empty {
         &.pending {
             min-height: calc(2em + var(--dui-spacing-medium) * 2);
diff --git a/storybook/stories/ListView.stories.tsx b/storybook/stories/ListView.stories.tsx
index 9fdefc66..640cf434 100644
--- a/storybook/stories/ListView.stories.tsx
+++ b/storybook/stories/ListView.stories.tsx
@@ -88,10 +88,6 @@ const Template: Story<ListViewProps<OptionFields, OptionProps, string, any, any>
                     filtered={filtered}
                     errored={errored}
                     onReload={() => { console.warn('reloaded'); }}
-                    direction="vertical"
-                    spacing="comfortable"
-                    messageShown
-                    messageIconShown
                     // eslint-disable-next-line react/destructuring-assignment
                     data={empty ? [] : args.data}
                 />
@@ -107,4 +103,35 @@ Default.args = {
     renderer: Option,
     rendererParams: (_, option) => ({ children: option.label }),
     borderBetweenItem: true,
+    spacing: 'comfortable',
+    messageShown: true,
+    messageIconShown: true,
+    direction: 'vertical',
+};
+
+export const Reversed = Template.bind({});
+Reversed.args = {
+    data: options,
+    keySelector: (d) => d.key,
+    renderer: Option,
+    rendererParams: (_, option) => ({ children: option.label }),
+    borderBetweenItem: true,
+    reverse: true,
+    spacing: 'comfortable',
+    messageShown: true,
+    messageIconShown: true,
+    direction: 'vertical',
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+    data: options,
+    keySelector: (d) => d.key,
+    renderer: Option,
+    rendererParams: (_, option) => ({ children: option.label }),
+    borderBetweenItem: true,
+    spacing: 'comfortable',
+    messageShown: true,
+    messageIconShown: true,
+    direction: 'horizontal',
 };