@dhis2-ui/table 10.16.1 → 10.16.3-alpha.1

package/src/table/table-cell-head.js

@@ -0,0 +1,56 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+
+const tableCellHeadStyles = css`
+    th {
+        border-bottom: 1px solid #e8edf2;
+        font-size: 14px;
+        line-height: 18px;
+        padding: 13px 12px;
+        height: 45px;
+    }
+
+    th:dir(rtl) {
+        text-align: right;
+    }
+
+    .dense {
+        padding: 9px 12px;
+        height: 36px;
+    }
+`
+
+export const TableCellHead = ({
+    role,
+    colSpan,
+    rowSpan,
+    dense,
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablecellhead',
+}) => (
+    <th
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+        className={cx({ dense }, className)}
+        data-test={dataTest}
+        role={role}
+    >
+        {children}
+
+        <style jsx>{tableCellHeadStyles}</style>
+    </th>
+)
+
+TableCellHead.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Uses less padding and height for information-dense layouts */
+    dense: PropTypes.bool,
+    role: PropTypes.string,
+    rowSpan: PropTypes.string,
+}

package/src/table/table-cell.js

@@ -0,0 +1,56 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+
+const tableCellStyles = css`
+    td {
+        border-bottom: 1px solid #e8edf2;
+        font-size: 14px;
+        line-height: 18px;
+        padding: 13px 12px;
+        height: 45px;
+    }
+
+    td:dir(rtl) {
+        text-align: right;
+    }
+
+    .dense {
+        padding: 9px 12px;
+        height: 36px;
+    }
+`
+
+export const TableCell = ({
+    role,
+    className,
+    children,
+    colSpan,
+    rowSpan,
+    dense,
+    dataTest = 'dhis2-uicore-tablecell',
+}) => (
+    <td
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+        className={cx({ dense }, className)}
+        data-test={dataTest}
+        role={role}
+    >
+        {children}
+
+        <style jsx>{tableCellStyles}</style>
+    </td>
+)
+
+TableCell.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    colSpan: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Usees less padding and height for information-dense layouts */
+    dense: PropTypes.bool,
+    role: PropTypes.string,
+    rowSpan: PropTypes.string,
+}

package/src/table/table-context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export const TableContext = createContext({
+    suppressZebraStriping: false,
+})
+
+export const { Consumer, Provider } = TableContext

package/src/table/table-foot.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const TableFoot = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablefoot',
+    role,
+}) => (
+    <tfoot className={className} data-test={dataTest} role={role}>
+        {children}
+    </tfoot>
+)
+
+TableFoot.propTypes = {
+    /** Should be `<TableRow>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+}

package/src/table/table-head.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const TableHead = ({
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablehead',
+    role,
+}) => (
+    <thead className={className} data-test={dataTest} role={role}>
+        {children}
+    </thead>
+)
+
+TableHead.propTypes = {
+    /** Should be `<TableRowHead>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+}

package/src/table/table-row-head.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { TableRow } from './table-row.js'
+
+export const TableRowHead = ({
+    role,
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablerowhead',
+    suppressZebraStriping,
+}) => (
+    <TableRow
+        className={className}
+        dataTest={dataTest}
+        suppressZebraStriping={suppressZebraStriping}
+        role={role}
+    >
+        {children}
+    </TableRow>
+)
+
+TableRowHead.propTypes = {
+    /** Should be `<TableCellHead>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+    /** Disables the default row striping for this row */
+    suppressZebraStriping: PropTypes.bool,
+}

package/src/table/table-row.js

@@ -0,0 +1,51 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useContext } from 'react'
+import css from 'styled-jsx/css'
+import { TableContext } from './table-context.js'
+
+const tableRowStyles = css`
+    .zebraStriping:nth-child(even) {
+        background: #fbfcfd;
+    }
+`
+
+export const TableRow = ({
+    role,
+    children,
+    className,
+    dataTest = 'dhis2-uicore-tablerow',
+    suppressZebraStriping,
+    ...rest
+}) => {
+    const { suppressZebraStriping: suppressZebraStripingFromContext } =
+        useContext(TableContext)
+
+    const zebraStriping =
+        typeof suppressZebraStriping !== 'undefined'
+            ? !suppressZebraStriping
+            : !suppressZebraStripingFromContext
+
+    return (
+        <tr
+            className={cx(className, { zebraStriping })}
+            data-test={dataTest}
+            role={role}
+            {...rest}
+        >
+            {children}
+
+            <style jsx>{tableRowStyles}</style>
+        </tr>
+    )
+}
+
+TableRow.propTypes = {
+    /** Should be `<TableCell>` or `<TableCellHead>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+    /** Disables the default row striping for this row */
+    suppressZebraStriping: PropTypes.bool,
+}

package/src/table/table.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+import { Provider } from './table-context.js'
+
+const tableStyles = css`
+    table {
+        border: 1px solid #e8edf2;
+        background-color: #ffffff;
+        min-width: 100%;
+        text-align: left;
+        border-collapse: collapse;
+        vertical-align: top;
+    }
+`
+
+export const Table = ({
+    role,
+    children,
+    className,
+    dataTest = 'dhis2-uicore-table',
+    suppressZebraStriping,
+}) => (
+    <Provider value={{ suppressZebraStriping }}>
+        <table className={className} data-test={dataTest} role={role}>
+            {children}
+
+            <style jsx>{tableStyles}</style>
+        </table>
+    </Provider>
+)
+
+Table.propTypes = {
+    /** Should be `<TableHead>`, `<TableBody>`, and `<TableFoot>` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    role: PropTypes.string,
+    /** Remove the default striping on alternating rows */
+    suppressZebraStriping: PropTypes.bool,
+}