fix: add ability to show caption on mobile or desktop only (#491)

* fix: add ability to show caption on mobile or desktop only * fix: simplify caption visibility prop * fix: dont remove captionHidden prop * fix: proptypes * fix: add deprication comment * fix: use old prop for visibility
nordnet · Dec 21, 2018 · a091572 · a091572
1 parent 9416c05
commit a091572
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/components/table-content-wrapper/table-content-wrapper.jsx b/src/components/table-content-wrapper/table-content-wrapper.jsx
@@ -50,10 +50,11 @@ class TableContentWrapper extends Component {
         <div className={classes.root}>
           <Table tableLayoutFixed>
             <caption
-              className={cn({
+              className={cn(classes.caption, {
                 [classes.screenReadersOnly]: captionHidden,
-                [classes.caption]: !captionHidden,
-                'smart-table__caption': !captionHidden,
+                'smart-table__caption': !captionHidden || (!captionHidden.mobile && !captionHidden.desktop),
+                [classes.captionMobileHidden]: captionHidden.mobile && !captionHidden.desktop,
+                [classes.captionDesktopHidden]: !captionHidden.mobile && captionHidden.desktop,
               })}
             >
               {localization.caption}
@@ -99,7 +100,13 @@ class TableContentWrapper extends Component {
 
 TableContentWrapper.propTypes = {
   classes: PropTypes.shape().isRequired,
-  captionHidden: PropTypes.bool,
+  captionHidden: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      mobile: PropTypes.bool,
+      desktop: PropTypes.bool,
+    }),
+  ]),
   columns: PropTypes.arrayOf(colShape),
   pageSize: PropTypes.number,
   nrResults: PropTypes.number,

diff --git a/src/components/table-content-wrapper/table-content-wrapper.styles.js b/src/components/table-content-wrapper/table-content-wrapper.styles.js
@@ -7,6 +7,12 @@ export default ({ mixins, palette, typography }) => ({
     borderBottom: [2, 'solid', palette.color.grayDarker],
   },
   screenReadersOnly: mixins.screenReadersOnly,
+  captionMobileHidden: {
+    [mixins.maxMedia('md')]: mixins.screenReadersOnly,
+  },
+  captionDesktopHidden: {
+    [mixins.media('md')]: mixins.screenReadersOnly,
+  },
   feedback: {
     fontStyle: 'italic',
     padding: 50,