fix: make caption visible if wanted (#488)

* fix: make caption visible if wanted * fix: remove caption classes when not visible
nordnet · Dec 20, 2018 · 9416c05 · 9416c05
1 parent 81eafb4
commit 9416c05
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/components/table-content-wrapper/table-content-wrapper.jsx b/src/components/table-content-wrapper/table-content-wrapper.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
+import cn from 'classnames';
 import { Table, Pagination, Button } from '../../';
 import TableHead from './table-head/table-head';
 import TableBody from './table-body/table-body';
@@ -20,6 +21,7 @@ class TableContentWrapper extends Component {
   render() {
     const {
       classes,
+      captionHidden,
       pageSize,
       page,
       sortField,
@@ -47,7 +49,15 @@ class TableContentWrapper extends Component {
       return (
         <div className={classes.root}>
           <Table tableLayoutFixed>
-            <caption className={classes.screenReadersOnly}>{localization.caption}</caption>
+            <caption
+              className={cn({
+                [classes.screenReadersOnly]: captionHidden,
+                [classes.caption]: !captionHidden,
+                'smart-table__caption': !captionHidden,
+              })}
+            >
+              {localization.caption}
+            </caption>
             <TableHead
               columns={columns}
               sortField={sortField}
@@ -89,6 +99,7 @@ class TableContentWrapper extends Component {
 
 TableContentWrapper.propTypes = {
   classes: PropTypes.shape().isRequired,
+  captionHidden: PropTypes.bool,
   columns: PropTypes.arrayOf(colShape),
   pageSize: PropTypes.number,
   nrResults: PropTypes.number,
@@ -118,6 +129,7 @@ TableContentWrapper.propTypes = {
 
 TableContentWrapper.defaultProps = {
   columns: [],
+  captionHidden: true,
   rowData: [],
   borderlessRows: [],
   pageSize: 10,

diff --git a/src/components/table-content-wrapper/table-content-wrapper.styles.js b/src/components/table-content-wrapper/table-content-wrapper.styles.js
@@ -1,4 +1,11 @@
-export default ({ mixins, palette }) => ({
+export default ({ mixins, palette, typography }) => ({
+  caption: {
+    fontSize: 12,
+    fontWeight: typography.fontWeightSemiBold,
+    textAlign: 'left',
+    padding: [10, 4],
+    borderBottom: [2, 'solid', palette.color.grayDarker],
+  },
   screenReadersOnly: mixins.screenReadersOnly,
   feedback: {
     fontStyle: 'italic',