Fix/support direction listview

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@the-deep/deep-ui",
-    "version": "1.5.14-beta.1",
+    "version": "1.5.14-beta.2",
     "description": "React component library by Deep",
     "files": [
         "/build"

src/components/Container/index.tsx

@@ -47,6 +47,7 @@ export interface Props {
     headingContainerClassName?: HeaderProps['headingContainerClassName'];
     inlineHeadingDescription?: boolean;
     footerContentClassName?: string;
+    headingSectionClassName?: string;
     footerActionsContainerClassName?: string;
     footerIconsContainerClassName?: string;
     footerQuickActionsContainerClassName?: string;
@@ -81,6 +82,7 @@ function Container(props: Props) {
         footerClassName,
         footerIconsContainerClassName,
         footerActionsContainerClassName,
+        headingSectionClassName,
         footerContentClassName,
         footerQuickActionsContainerClassName,
         containerElementProps,
@@ -136,6 +138,7 @@ function Container(props: Props) {
                     iconsContainerClassName={headerIconsContainerClassName}
                     actionsContainerClassName={headerActionsContainerClassName}
                     descriptionClassName={_cs(styles.headerDescription, headerDescriptionClassName)}
+                    headingSectionClassName={headingSectionClassName}
                     headingClassName={headingClassName}
                     elementProps={headerElementProps}
                     headingContainerClassName={headingContainerClassName}

src/components/ListView/index.tsx

@@ -20,7 +20,8 @@ const spacingToStyleMap: {
     loose: styles.looseSpacing,
 };
 
-type MessagePropOmission = 'className' | 'message' | 'compact' | 'icon' | 'empty' | 'pendingContainerClassName';
+type MessagePropOmission = 'className' | 'message'
+| 'compact' | 'icon' | 'empty' | 'pendingContainerClassName' | 'messageHidden' | 'messageIconHidden';
 export type Props<
     D,
     P,
@@ -33,6 +34,8 @@ export type Props<
     compactAndVerticalEmptyMessage?: boolean;
     compactPendingMessage?: boolean;
     direction?: 'horizontal' | 'vertical';
+    messageShown?: boolean;
+    messageIconShown?: boolean;
 };
 
 function ListView<
@@ -59,6 +62,8 @@ function ListView<
         compactAndVerticalEmptyMessage,
         spacing = 'none',
         direction = 'horizontal',
+        messageShown = false,
+        messageIconShown = false,
         ...otherListProps
     } = props;
 
@@ -87,6 +92,8 @@ function ListView<
                 compactPendingMessage={empty || compactPendingMessage}
                 compact={compactEmptyMessage}
                 compactAndVertical={compactAndVerticalEmptyMessage}
+                messageHidden={!messageShown}
+                messageIconHidden={!messageIconShown}
             />
             <List
                 data={data}

src/components/Message/index.tsx

@@ -24,6 +24,8 @@ export interface Props {
     compactAndVertical?: boolean;
     compactPendingMessage?: boolean;
     compactEmptyMessage?: boolean;
+    messageHidden?: boolean;
+    messageIconHidden?: boolean;
 }
 
 function Message(props: Props) {
@@ -44,6 +46,8 @@ function Message(props: Props) {
         compactPendingMessage,
         compactEmptyMessage,
         compactAndVertical,
+        messageHidden = false,
+        messageIconHidden = false,
     } = props;
 
     if (pending) {
@@ -98,12 +102,16 @@ function Message(props: Props) {
                 compactAndVertical && styles.vertical,
             )}
         >
-            <div className={styles.iconContainer}>
-                {icon}
-            </div>
-            <div className={styles.content}>
-                { message }
-            </div>
+            {!messageHidden && (
+                <div className={styles.iconContainer}>
+                    {icon}
+                </div>
+            )}
+            {!messageIconHidden && (
+                <div className={styles.content}>
+                    { message }
+                </div>
+            )}
         </div>
     );
 }

src/components/TableView/index.tsx

@@ -9,7 +9,8 @@ import Table, {
 import Message, { Props as MessageProps } from '../Message';
 import styles from './styles.css';
 
-type MessagePropOmission = 'className' | 'message' | 'compact' | 'icon' | 'empty' | 'pendingContainerClassName';
+type MessagePropOmission = 'className' | 'message'
+| 'compact' | 'icon' | 'empty' | 'pendingContainerClassName' | 'messageHidden' | 'messageIconHidden';
 export type Props<
     D,
     K extends string | number,
@@ -24,6 +25,8 @@ export type Props<
     contentClassName?: string,
     compactEmptyMessage?: boolean;
     compactPendingMessage?: boolean;
+    messageShown?: boolean;
+    messageIconShown?: boolean;
 };
 
 function TableView<
@@ -47,6 +50,8 @@ function TableView<
         contentClassName,
         compactEmptyMessage,
         compactPendingMessage,
+        messageShown = false,
+        messageIconShown = false,
         ...otherTableProps
     } = props;
 
@@ -77,6 +82,8 @@ function TableView<
                 filteredEmptyMessage={filteredEmptyMessage}
                 compactPendingMessage={empty || compactPendingMessage}
                 compactEmptyMessage={compactEmptyMessage}
+                messageHidden={!messageShown}
+                messageIconHidden={!messageIconShown}
             />
         </div>
     );

src/stories/ListView.stories.tsx

@@ -79,6 +79,10 @@ const Template: Story<ListViewProps<OptionFields, OptionProps, string, any, any>
                         {...args}
                         pending={pending}
                         filtered={filtered}
+                        direction="vertical"
+                        spacing="comfortable"
+                        messageShown
+                        messageIconShown
                         // eslint-disable-next-line react/destructuring-assignment
                         data={empty ? [] : args.data}
                     />

src/stories/TableView.stories.tsx

@@ -117,6 +117,8 @@ const Template: Story<
                     // eslint-disable-next-line react/destructuring-assignment
                     data={empty ? [] : args.data}
                     columns={columns}
+                    messageShown
+                    messageIconShown
                 />
             </div>
         </div>