[RCN-685][BpkTableHeadCell BpkTableCell]: add conditional wrapBreak prop

examples/bpk-component-table/examples.js

@@ -56,4 +56,30 @@ const DefaultExample = () => (
   </BpkTable>
 );
 
+// Demonstrates opt-in wrapping via wrap={true}. Long text will wrap onto multiple lines.
+const WordBreakExample = () => (
+  <BpkTable>
+    <BpkTableHead>
+      <BpkTableRow>
+        <BpkTableHeadCell wordBreak>wordBreak: true</BpkTableHeadCell>
+        <BpkTableHeadCell wordBreak>https://www.bbc.co.uk/news/world/us_and_canada</BpkTableHeadCell>
+        <BpkTableHeadCell wordBreak>pneumonoultramicroscopicsilicovolcanoconiosis</BpkTableHeadCell>
+      </BpkTableRow>
+    </BpkTableHead>
+    <BpkTableBody>
+      <BpkTableRow>
+        <BpkTableCell wordBreak>wordBreak: true</BpkTableCell>
+        <BpkTableCell wordBreak>https://www.bbc.co.uk/news/world/us_and_canada</BpkTableCell>
+        <BpkTableCell wordBreak>pneumonoultramicroscopicsilicovolcanoconiosis</BpkTableCell>
+      </BpkTableRow>
+      <BpkTableRow>
+        <BpkTableCell>wordBreak: false</BpkTableCell>
+        <BpkTableCell>https://www.bbc.co.uk/news/world/us_and_canada</BpkTableCell>
+        <BpkTableCell>pneumonoultramicroscopicsilicovolcanoconiosis</BpkTableCell>
+      </BpkTableRow>
+    </BpkTableBody>
+  </BpkTable>
+);
+
 export default DefaultExample;
+export { WordBreakExample };

examples/bpk-component-table/stories.js

@@ -23,7 +23,7 @@ import BpkTableHead from '../../packages/bpk-component-table/src/BpkTableHead';
 import BpkTableHeadCell from '../../packages/bpk-component-table/src/BpkTableHeadCell';
 import BpkTableRow from '../../packages/bpk-component-table/src/BpkTableRow';
 
-import DefaultExample from './examples';
+import DefaultExample, { WordBreakExample } from './examples';
 
 export default {
   title: 'bpk-component-table',
@@ -38,3 +38,4 @@ export default {
 };
 
 export const Default = DefaultExample;
+export const WordBreak = WordBreakExample;

packages/bpk-component-table/README.md

@@ -25,15 +25,15 @@ export default () => (
         <BpkTableHeadCell>Heading 1</BpkTableHeadCell>
         <BpkTableHeadCell>Heading 2</BpkTableHeadCell>
         <BpkTableHeadCell>Heading 3</BpkTableHeadCell>
-        <BpkTableHeadCell>Heading 4</BpkTableHeadCell>
+        <BpkTableHeadCell wordBreak={true}>Heading4wordBreakTrue</BpkTableHeadCell>
       </BpkTableRow>
     </BpkTableHead>
     <BpkTableBody>
       <BpkTableRow>
         <BpkTableCell>Row 1, Data 1</BpkTableCell>
         <BpkTableCell>Row 1, Data 2</BpkTableCell>
         <BpkTableCell>Row 1, Data 3</BpkTableCell>
-        <BpkTableCell>Row 1, Data 4</BpkTableCell>
+        <BpkTableCell wordBreak={true}>Row1Data4wordBreakTrue</BpkTableCell>
       </BpkTableRow>
       <BpkTableRow>
         <BpkTableCell>Row 2, Data 1</BpkTableCell>
@@ -49,3 +49,11 @@ export default () => (
 ## Props
 
 Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/table/web-0i0MzMkj#section-props-3d).
+
+### Additional Props
+
+`wordBreak` (boolean, default `false`)
+
+Optional prop to add css `word-break: break-word;`, this allows long words and URLs to wrap onto multiple lines within the cell rather than overflowing. This prop is available on both `BpkTableCell` and `BpkTableHeadCell`. Set `wordBreak={true}` to add this behaviour.
+
+By default the prop can be omitted.

packages/bpk-component-table/src/BpkTable.module.scss

@@ -27,5 +27,10 @@
     &--head {
       @include typography.bpk-table__cell--head;
     }
+
+    &--wordBreak {
+      white-space: normal;
+      word-break: break-word;
+    }
   }
 }

packages/bpk-component-table/src/BpkTableCell-test.js

@@ -27,30 +27,92 @@ import { render } from '@testing-library/react';
 
 import BpkTableCell from './BpkTableCell';
 
-describe('BpkTableCell', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <table>
+const defaultClasses = ['bpk-table__cell'];
+
+const renderCell = (props = {}, content = 'Tabular data') => {
+  const { getByRole, ...testingLibraryUtils } = render(
+    <table>
         <tbody>
           <tr>
-            <BpkTableCell>Tabular data</BpkTableCell>
+            <BpkTableCell {...props}>{content}</BpkTableCell>
           </tr>
         </tbody>
-      </table>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+    </table>,
+  );
+  const cell = getByRole('cell', { name: content });
+  return { cell, ...testingLibraryUtils };
+};
+
+describe('BpkTableCell', () => {
+  it('should render table cell with base class', () => {
+    const { cell } = renderCell();
+
+    expect(cell?.tagName).toBe('TD');
+    expect(cell).toHaveClass(...defaultClasses);
   });
 
-  it('should render correctly with custom class', () => {
-    const { asFragment } = render(
-      <table>
-        <tbody>
-          <tr>
-            <BpkTableCell className="test">Tabular data</BpkTableCell>
-          </tr>
-        </tbody>
-      </table>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+  it('should apply custom class', () => {
+    const className = 'custom-class';
+    const expectedClasses = [...defaultClasses, className];
+
+    const { cell } = renderCell({ 
+      className 
+    });
+
+    expect(cell?.tagName).toBe('TD');
+    expect(cell).toHaveClass(...expectedClasses);
+  });
+
+  it('should forward arbitrary props', () => {
+    const expectedClasses = [...defaultClasses];
+
+    const { cell } = renderCell({
+      id: 'custom-id',
+      'data-foo': 'bar',
+    });
+
+    expect(cell?.tagName).toBe('TD');
+    expect(cell).toHaveClass(...expectedClasses);
+    expect(cell).toHaveAttribute('id', 'custom-id');
+    expect(cell).toHaveAttribute('data-foo', 'bar');
+  });
+
+  describe('wordBreak prop', () => {
+    it('should not apply wordBreak class by default', () => {
+      const expectedClasses = [ ...defaultClasses ];
+
+      // wordBreak prop omitted
+      const { cell } = renderCell();
+
+      expect(cell?.tagName).toBe('TD');
+      expect(cell).toHaveClass(...expectedClasses);
+      expect(cell).not.toHaveClass('bpk-table__cell--wordBreak');
+    });
+
+    it('should not apply wordBreak class when wordBreak is false', () => {
+      const expectedClasses = [...defaultClasses];
+
+      const { cell } = renderCell({
+        wordBreak: false,
+      });
+
+      expect(cell?.tagName).toBe('TD');
+      expect(cell).toHaveClass(...expectedClasses);
+      expect(cell).not.toHaveClass('bpk-table__cell--wordBreak');
+    });
+
+    it('should apply wordBreak class when wordBreak is true', () => {
+      const expectedClasses = [
+        ...defaultClasses,
+        'bpk-table__cell--wordBreak'
+      ];
+
+      const { cell } = renderCell({
+        wordBreak: true,
+      });
+
+      expect(cell?.tagName).toBe('TD');
+      expect(cell).toHaveClass(...expectedClasses);
+    });
   });
 });

packages/bpk-component-table/src/BpkTableCell.js

@@ -30,10 +30,18 @@ const getClassName = cssModules(STYLES);
 type Props = {
   children: Node,
   className: ?string,
+  wordBreak?: boolean,
 };
 
-const BpkTableCell = ({children, className = null, ...rest}: Props) => {
-  const classNames = getClassName('bpk-table__cell', className);
+const BpkTableCell = ({children, className = null, wordBreak = false, ...rest}: Props) => {
+
+  const classes = [
+    'bpk-table__cell',
+    wordBreak && 'bpk-table__cell--wordBreak',
+    className,
+  ];
+
+  const classNames = getClassName(...classes);
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
@@ -46,6 +54,7 @@ const BpkTableCell = ({children, className = null, ...rest}: Props) => {
 BpkTableCell.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
+  wordBreak: PropTypes.bool,
 };
 
 export default BpkTableCell;

packages/bpk-component-table/src/BpkTableHeadCell-test.js

@@ -22,47 +22,92 @@ import { render } from '@testing-library/react';
 
 import BpkTableHeadCell from './BpkTableHeadCell';
 
-describe('BpkTableHeadCell', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <table>
-        <thead>
-          <tr>
-            <BpkTableHeadCell>Heading</BpkTableHeadCell>
-          </tr>
-        </thead>
-      </table>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+const defaultClasses = ['bpk-table__cell', 'bpk-table__cell--head'];
+
+const renderHeadCell = (props = {}, content = 'Heading') => {
+  const { getByRole, ...testingLibraryUtils } = render(
+    <table>
+      <thead>
+        <tr>
+          <BpkTableHeadCell {...props}>{content}</BpkTableHeadCell>
+        </tr>
+      </thead>
+    </table>,
+  );
+  const cell = getByRole('columnheader', { name: content });
+  return { cell, ...testingLibraryUtils };
+};
+
+describe('BpkTableHeadCell', () => { 
+  it('should render heading cell with base classes', () => {
+    const { cell } = renderHeadCell();
+
+    expect(cell?.tagName).toBe('TH');
+    expect(cell).toHaveClass(...defaultClasses);
   });
 
-  it('should render correctly with custom class', () => {
-    const { asFragment } = render(
-      <table>
-        <thead>
-          <tr>
-            <BpkTableHeadCell className="my-custom-class">
-              Skyscanner
-            </BpkTableHeadCell>
-          </tr>
-        </thead>
-      </table>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+  it('should apply custom class', () => {
+    const className = 'custom-class';
+    const expectedClasses = [...defaultClasses, className];
+
+    const { cell } = renderHeadCell({
+      className,
+    });
+
+    expect(cell?.tagName).toBe('TH');
+    expect(cell).toHaveClass(...expectedClasses);
   });
 
-  it('should render correctly with arbitrary props', () => {
-    const { asFragment } = render(
-      <table>
-        <thead>
-          <tr>
-            <BpkTableHeadCell id="my-custom-id" data-foo="bar">
-              Skyscanner
-            </BpkTableHeadCell>
-          </tr>
-        </thead>
-      </table>,
-    );
-    expect(asFragment()).toMatchSnapshot();
+  it('should forward arbitrary props', () => {
+    const expectedClasses = [...defaultClasses];
+
+    const { cell } = renderHeadCell({
+      id: 'custom-id',
+      'data-foo': 'bar',
+    });
+
+    expect(cell?.tagName).toBe('TH');
+    expect(cell).toHaveClass(...expectedClasses);
+    expect(cell).toHaveAttribute('id', 'custom-id');
+    expect(cell).toHaveAttribute('data-foo', 'bar');
+  });
+
+  describe('wordBreak prop', () => {
+    it('should not apply wordBreak class by default', () => {
+      const expectedClasses = [ ...defaultClasses ];
+
+      // wordBreak prop omitted
+      const { cell } = renderHeadCell();
+
+      expect(cell?.tagName).toBe('TH');
+      expect(cell).toHaveClass(...expectedClasses);
+      expect(cell).not.toHaveClass('bpk-table__cell--wordBreak');
+    });
+
+    it('should not apply wordBreak class when wordBreak is false', () => {
+      const expectedClasses = [ ...defaultClasses ];
+
+      const { cell } = renderHeadCell({
+        wordBreak: false,
+      });
+
+      expect(cell?.tagName).toBe('TH');
+      expect(cell).toHaveClass(...expectedClasses);
+      expect(cell).not.toHaveClass('bpk-table__cell--wordBreak');
+    });
+
+    it('should apply wordBreak class when wordBreak is true', () => {
+      const expectedClasses = [
+        ...defaultClasses,
+        'bpk-table__cell--wordBreak'
+      ];
+
+      const { cell } = renderHeadCell({
+        wordBreak: true,
+      });
+
+      expect(cell?.tagName).toBe('TH');
+      expect(cell).toHaveClass(...expectedClasses);
+    });
   });
 });

packages/bpk-component-table/src/BpkTableHeadCell.js

@@ -27,15 +27,22 @@ import STYLES from './BpkTable.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-type Props = { children: Node, className: ?string };
+type Props = {
+  children: Node, 
+  className: ?string, 
+  wordBreak?: boolean
+};
 
-const BpkTableHeadCell = ({ children, className = null, ...rest }: Props) => {
+const BpkTableHeadCell = ({ children, className = null, wordBreak = false, ...rest }: Props) => {
 
-  const classNames = getClassName(
+  const classes = [
     'bpk-table__cell',
     'bpk-table__cell--head',
+    wordBreak && 'bpk-table__cell--wordBreak',
     className,
-  );
+  ];
+
+  const classNames = getClassName(...classes);
 
   return (
     <th className={classNames} {...rest}>
@@ -47,6 +54,7 @@ const BpkTableHeadCell = ({ children, className = null, ...rest }: Props) => {
 BpkTableHeadCell.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
+  wordBreak: PropTypes.bool,
 };
 
 export default BpkTableHeadCell;