feat(component): add hidden headers props to Table and StatefulTable (#…

…297)
bigcommerce · Dec 11, 2019 · d80641a · d80641a
1 parent bda6d6a
commit d80641a
Show file tree

Hide file tree

Showing 16 changed files with 127 additions and 49 deletions.
diff --git a/packages/big-design/src/components/StatefulTable/spec.tsx b/packages/big-design/src/components/StatefulTable/spec.tsx
@@ -233,3 +233,14 @@ test('renders custom actions', () => {
   expect(customAction).toBeInTheDocument();
   expect(customAction).toBeVisible();
 });
+
+test('renders headers by default and hides then via prop', () => {
+  const { getAllByRole, rerender } = render(getSimpleTable());
+
+  expect(getAllByRole('columnheader')[0]).toBeVisible();
+
+  rerender(getSimpleTable({ headerless: true }));
+
+  expect(getAllByRole('columnheader')[0]).toBeInTheDocument();
+  expect(getAllByRole('columnheader')[0]).not.toBeVisible();
+});
diff --git a/packages/big-design/src/components/Table/Body/Body.tsx b/packages/big-design/src/components/Table/Body/Body.tsx
@@ -2,6 +2,8 @@ import React, { memo } from 'react';
 
 import { StyledTableBody } from './styled';
 
-export interface BodyProps extends React.TableHTMLAttributes<HTMLTableSectionElement> {}
+export interface BodyProps extends React.TableHTMLAttributes<HTMLTableSectionElement> {
+  withFirstRowBorder?: boolean;
+}
 
 export const Body: React.FC<BodyProps> = memo(({ className, style, ...props }) => <StyledTableBody {...props} />);
diff --git a/packages/big-design/src/components/Table/Body/styled.tsx b/packages/big-design/src/components/Table/Body/styled.tsx
@@ -1,10 +1,16 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const StyledTableBody = styled.tbody`
-  & > tr {
-    border-bottom: ${({ theme }) => theme.border.box};
-  }
+import { BodyProps } from './Body';
+
+export const StyledTableBody = styled.tbody<BodyProps>`
+  ${({ theme, withFirstRowBorder }) =>
+    withFirstRowBorder &&
+    css`
+      tr:first-of-type > td {
+        border-top: ${theme.border.box};
+      }
+    `}
 `;
 
 StyledTableBody.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/Table/DataCell/DataCell.tsx b/packages/big-design/src/components/Table/DataCell/DataCell.tsx
@@ -7,17 +7,24 @@ export interface DataCellProps extends React.TableHTMLAttributes<HTMLTableCellEl
   isCheckbox?: boolean;
   verticalAlign?: 'top' | 'center';
   width?: number | string;
+  withBorder?: boolean;
   withPadding?: boolean;
 }
 
 export const DataCell: React.FC<DataCellProps> = memo(
-  ({ align, children, isCheckbox, verticalAlign, width, withPadding = true }: DataCellProps) => {
+  ({ align, children, isCheckbox, verticalAlign, width, withBorder = true, withPadding = true }: DataCellProps) => {
     return isCheckbox ? (
-      <StyledTableDataCheckbox align={align} width={width}>
+      <StyledTableDataCheckbox align={align} width={width} withBorder={withBorder}>
         {children}
       </StyledTableDataCheckbox>
     ) : (
-      <StyledTableDataCell align={align} verticalAlign={verticalAlign} width={width} withPadding={withPadding}>
+      <StyledTableDataCell
+        align={align}
+        verticalAlign={verticalAlign}
+        width={width}
+        withBorder={withBorder}
+        withPadding={withPadding}
+      >
         {children}
       </StyledTableDataCell>
     );

diff --git a/packages/big-design/src/components/Table/DataCell/styled.tsx b/packages/big-design/src/components/Table/DataCell/styled.tsx
@@ -10,6 +10,12 @@ export const StyledTableDataCell = styled.td<DataCellProps>`
   font-size: ${({ theme }) => theme.typography.fontSize.medium};
   padding: ${({ theme, withPadding }) => (withPadding ? theme.spacing.small : 0)};
 
+  ${({ theme, withBorder }) =>
+    withBorder &&
+    css`
+      border-bottom: ${theme.border.box};
+    `}
+
   ${({ align }) =>
     align &&
     css`

diff --git a/packages/big-design/src/components/Table/Head/Head.tsx b/packages/big-design/src/components/Table/Head/Head.tsx
@@ -2,6 +2,10 @@ import React, { memo } from 'react';
 
 import { StyledTableHead } from './styled';
 
-export type HeadProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
+export type HeadProps = React.TableHTMLAttributes<HTMLTableSectionElement> & {
+  hidden?: boolean;
+};
 
-export const Head: React.FC<HeadProps> = memo(({ className, style, ...props }) => <StyledTableHead {...props} />);
+export const Head: React.FC<HeadProps> = memo(({ className, style, hidden = false, ...props }) => (
+  <StyledTableHead hidden={hidden} {...props} />
+));
diff --git a/packages/big-design/src/components/Table/Head/styled.tsx b/packages/big-design/src/components/Table/Head/styled.tsx
@@ -1,8 +1,11 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
+import { hideVisually } from 'polished';
 import styled from 'styled-components';
 
 import { HeadProps } from './Head';
 
-export const StyledTableHead = styled.thead<HeadProps>``;
+export const StyledTableHead = styled.thead<HeadProps>`
+  ${({ hidden }) => hidden && hideVisually()}
+`;
 
 StyledTableHead.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/Table/HeaderCell/styled.tsx b/packages/big-design/src/components/Table/HeaderCell/styled.tsx
@@ -16,8 +16,8 @@ interface StyledFlexProps {
 
 export const StyledTableHeaderCell = styled.th<StyledTableHeaderCellProps>`
   background-color: ${({ theme }) => theme.colors.secondary10};
-  box-shadow: ${({ theme }) =>
-    `inset 0px -1px 0px ${theme.colors.secondary30}, inset 0px 1px 0px ${theme.colors.secondary30}`};
+  border-bottom: ${({ theme }) => theme.border.box};
+  border-top: ${({ theme }) => theme.border.box};
   box-sizing: border-box;
   color: ${({ theme }) => theme.colors.secondary60};
   font-size: ${({ theme }) => theme.typography.fontSize.medium};

diff --git a/packages/big-design/src/components/Table/Row/styled.tsx b/packages/big-design/src/components/Table/Row/styled.tsx
@@ -3,7 +3,11 @@ import styled from 'styled-components';
 
 import { withTransition } from '../../../mixins/transitions';
 
-export const StyledTableRow = styled.tr<{ isSelected: boolean }>`
+interface StyledTableRowProps {
+  isSelected: boolean;
+}
+
+export const StyledTableRow = styled.tr<StyledTableRowProps>`
   ${withTransition(['background-color'])}
 
   background-color: ${({ isSelected, theme }) => (isSelected ? theme.colors.primary10 : 'transparent')};

diff --git a/packages/big-design/src/components/Table/Table.tsx b/packages/big-design/src/components/Table/Table.tsx
@@ -18,6 +18,7 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
     className,
     columns,
     actions,
+    headerless = false,
     id,
     itemName,
     items,
@@ -89,7 +90,7 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
   };
 
   const renderHeaders = () => (
-    <Head>
+    <Head hidden={headerless}>
       <tr>
         {isSelectable && <HeaderCheckboxCell stickyHeader={stickyHeader} actionsRef={actionsRef} />}
 
@@ -117,7 +118,7 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
   );
 
   const renderItems = () => (
-    <Body>
+    <Body withFirstRowBorder={headerless}>
       {items.map((item: T, index) => {
         const key = getItemKey(item, index);
         const isSelected = selectedItems.has(item);

diff --git a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
@@ -569,8 +569,8 @@ exports[`renders a pagination component 1`] = `
 
 exports[`renders a simple table 1`] = `
 .c0 {
-  border-collapse: collapse;
   border-color: transparent;
+  border-spacing: 0;
   color: #313440;
   text-align: left;
   width: 100%;
@@ -604,13 +604,10 @@ exports[`renders a simple table 1`] = `
   display: flex;
 }
 
-.c5 > tr {
-  border-bottom: 1px solid #D9DCE9;
-}
-
 .c1 {
   background-color: #F6F7FC;
-  box-shadow: inset 0px -1px 0px #D9DCE9,inset 0px 1px 0px #D9DCE9;
+  border-bottom: 1px solid #D9DCE9;
+  border-top: 1px solid #D9DCE9;
   box-sizing: border-box;
   color: #5E637A;
   font-size: 1rem;
@@ -625,23 +622,24 @@ exports[`renders a simple table 1`] = `
   justify-content: flex-start;
 }
 
-.c7 {
+.c6 {
   background-color: #FFFFFF;
   box-sizing: border-box;
   color: #313440;
   font-size: 1rem;
   padding: 0.75rem;
+  border-bottom: 1px solid #D9DCE9;
 }
 
-.c6 {
+.c5 {
   -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
   -webkit-transition-property: background-color;
   transition-property: background-color;
   background-color: transparent;
 }
 
-.c6:hover {
+.c5:hover {
   background-color: #F6F7FC;
 }
 
@@ -683,99 +681,99 @@ exports[`renders a simple table 1`] = `
     </tr>
   </thead>
   <tbody
-    class="c5"
+    class=""
   >
     <tr
-      class="c6"
+      class="c5"
     >
       <td
-        class="c7"
+        class="c6"
       >
         SM13
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         [Sample] Smith Journal 13
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         25
       </td>
     </tr>
     <tr
-      class="c6"
+      class="c5"
     >
       <td
-        class="c7"
+        class="c6"
       >
         DPB
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         [Sample] Dustpan & Brush
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         34
       </td>
     </tr>
     <tr
-      class="c6"
+      class="c5"
     >
       <td
-        class="c7"
+        class="c6"
       >
         OFSUC
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         [Sample] Utility Caddy
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         45
       </td>
     </tr>
     <tr
-      class="c6"
+      class="c5"
     >
       <td
-        class="c7"
+        class="c6"
       >
         CLC
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         [Sample] Canvas Laundry Cart
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         2
       </td>
     </tr>
     <tr
-      class="c6"
+      class="c5"
     >
       <td
-        class="c7"
+        class="c6"
       >
         CGLD
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         [Sample] Laundry Detergent
       </td>
       <td
-        class="c7"
+        class="c6"
       >
         29
       </td>

diff --git a/packages/big-design/src/components/Table/spec.tsx b/packages/big-design/src/components/Table/spec.tsx
@@ -8,16 +8,26 @@ interface SimpleTableOptions {
   className?: string;
   columns?: any[];
   dataTestId?: string;
+  headerless?: boolean;
   id?: string;
   itemName?: string;
   style?: CSSProperties;
 }
 
-const getSimpleTable = ({ className, columns, dataTestId, id, itemName, style }: SimpleTableOptions = {}) => (
+const getSimpleTable = ({
+  className,
+  columns,
+  dataTestId,
+  headerless,
+  id,
+  itemName,
+  style,
+}: SimpleTableOptions = {}) => (
   <Table
     className={className}
     data-testid={dataTestId}
     id={id}
+    headerless={headerless}
     itemName={itemName}
     style={style}
     columns={
@@ -416,4 +426,15 @@ describe('sortable', () => {
     expect(customAction).toBeInTheDocument();
     expect(customAction).toBeVisible();
   });
+
+  test('renders headers by default and hides then via prop', () => {
+    const { getAllByRole, rerender } = render(getSimpleTable());
+
+    expect(getAllByRole('columnheader')[0]).toBeVisible();
+
+    rerender(getSimpleTable({ headerless: true }));
+
+    expect(getAllByRole('columnheader')[0]).toBeInTheDocument();
+    expect(getAllByRole('columnheader')[0]).not.toBeVisible();
+  });
 });
diff --git a/packages/big-design/src/components/Table/styled.tsx b/packages/big-design/src/components/Table/styled.tsx
@@ -18,8 +18,8 @@ export const StyledTableFigure = styled.figure<MarginProps>`
 `;
 
 export const StyledTable = styled.table`
-  border-collapse: collapse;
   border-color: transparent;
+  border-spacing: 0;
   color: ${({ theme }) => theme.colors.secondary70};
   text-align: left;
   width: 100%;