feat(table): add alternateRowBgColor prop (default: true) (TECH-416)

dhis2 · Jul 23, 2020 · fec8008 · fec8008
1 parent 21b9cf2
commit fec8008
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 15 deletions.
diff --git a/packages/core/src/Table/Table.js b/packages/core/src/Table/Table.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import css from 'styled-jsx/css'
 import propTypes from '@dhis2/prop-types'
+import { Provider } from './TableContext.js'
 
 const tableStyles = css`
     table {
@@ -20,12 +21,19 @@ const tableStyles = css`
  * @example import { Table } from '@dhis2/ui-core'
  * @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook}
  */
-export const Table = ({ children, className, dataTest }) => (
-    <table className={className} data-test={dataTest}>
-        {children}
+export const Table = ({
+    children,
+    className,
+    dataTest,
+    suppressZebraStriping,
+}) => (
+    <Provider value={{ suppressZebraStriping }}>
+        <table className={className} data-test={dataTest}>
+            {children}
 
-        <style jsx>{tableStyles}</style>
-    </table>
+            <style jsx>{tableStyles}</style>
+        </table>
+    </Provider>
 )
 
 Table.defaultProps = {
@@ -38,9 +46,11 @@ Table.defaultProps = {
  * @prop {TableHead|TableBody|TableFoot|Array.<TableHead|TableBody|TableFoot>} [children]
  * @prop {string} [className]
  * @prop {string} [dataTest]
+ * @prop {bool} [suppressZebraStriping]
  */
 Table.propTypes = {
     children: propTypes.node,
     className: propTypes.string,
     dataTest: propTypes.string,
+    suppressZebraStriping: propTypes.bool,
 }
diff --git a/packages/core/src/Table/TableContext.js b/packages/core/src/Table/TableContext.js
@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export const TableContext = createContext({
+    suppressZebraStriping: false,
+})
+
+export const { Consumer, Provider } = TableContext
diff --git a/packages/core/src/Table/TableRow.js b/packages/core/src/Table/TableRow.js
@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import css from 'styled-jsx/css'
 import propTypes from '@dhis2/prop-types'
+import cx from 'classnames'
+import { TableContext } from './TableContext'
 
 const tableRowStyles = css`
-    tr:nth-child(even) {
+    .zebraStriping:nth-child(even) {
         background: #fbfcfd;
     }
 `
@@ -15,13 +17,29 @@ const tableRowStyles = css`
  * @example import { TableRow } from '@dhis2/ui-core'
  * @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook}
  */
-export const TableRow = ({ children, className, dataTest }) => (
-    <tr className={className} data-test={dataTest}>
-        {children}
+export const TableRow = ({
+    children,
+    className,
+    dataTest,
+    suppressZebraStriping,
+}) => {
+    const {
+        suppressZebraStriping: suppressZebraStripingFromContext,
+    } = useContext(TableContext)
 
-        <style jsx>{tableRowStyles}</style>
-    </tr>
-)
+    const zebraStriping =
+        typeof suppressZebraStriping !== 'undefined'
+            ? !suppressZebraStriping
+            : !suppressZebraStripingFromContext
+
+    return (
+        <tr className={cx(className, { zebraStriping })} data-test={dataTest}>
+            {children}
+
+            <style jsx>{tableRowStyles}</style>
+        </tr>
+    )
+}
 
 TableRow.defaultProps = {
     dataTest: 'dhis2-uicore-tablerow',
@@ -38,4 +56,5 @@ TableRow.propTypes = {
     children: propTypes.node,
     className: propTypes.string,
     dataTest: propTypes.string,
+    suppressZebraStriping: propTypes.bool,
 }
diff --git a/packages/core/src/Table/TableRowHead.js b/packages/core/src/Table/TableRowHead.js
@@ -11,8 +11,17 @@ import { TableRow } from './TableRow.js'
  * @example import { TableRowHead } from '@dhis2/ui-core'
  * @see Live demo: {@link /demo/?path=/story/table--static-layout|Storybook}
  */
-export const TableRowHead = ({ children, className, dataTest }) => (
-    <TableRow className={className} dataTest={dataTest}>
+export const TableRowHead = ({
+    children,
+    className,
+    dataTest,
+    suppressZebraStriping,
+}) => (
+    <TableRow
+        className={className}
+        dataTest={dataTest}
+        suppressZebraStriping={suppressZebraStriping}
+    >
         {children}
     </TableRow>
 )
@@ -32,4 +41,5 @@ TableRowHead.propTypes = {
     children: propTypes.node,
     className: propTypes.string,
     dataTest: propTypes.string,
+    suppressZebraStriping: propTypes.bool,
 }