Make card mode automatic.

Author: mikecao

.stylelintrc.json

@@ -5,13 +5,7 @@
     "stylelint-config-prettier"
   ],
   "rules": {
-    "no-descending-specificity": null,
-    "selector-pseudo-class-no-unknown": [
-      true,
-      {
-        "ignorePseudoClasses": ["global", "horizontal", "vertical"]
-      }
-    ]
+    "no-descending-specificity": null
   },
   "ignoreFiles": ["**/*.js"]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-basics",
-  "version": "0.123.0",
+  "version": "0.124.0",
   "description": "Everyday components for React",
   "license": "MIT",
   "repository": {

src/components/table/GridTable.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { CommonProps } from 'components/types';
 import { mapChildren } from 'components/utils';
+import { useBreakpoint } from 'components/hooks/useBreakpoint';
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from './GridTable.module.css';
 
@@ -13,8 +14,10 @@ export interface GridTableProps extends CommonProps {
 
 export function GridTable(props: GridTableProps) {
   const { data, className, style, children, cardMode, ...domProps } = props;
+  const breakpoint = useBreakpoint();
+  const responsive = ['xs', 'sm', 'md'].includes(breakpoint);
 
-  if (cardMode) {
+  if (cardMode || responsive) {
     return (
       <div className={classNames(styles.cards, className)}>
         {data.map((row, index) => (