[docs][CardActionArea] Added demo in docs of cards for adding props to CardActionArea

docs/data/material/components/cards/SelectActionCard.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import CardActionArea from '@mui/material/CardActionArea';
+
+const cards = [
+  {
+    id: 1,
+    title: 'Plants',
+    description: 'Plants are essential for all life.',
+  },
+  {
+    id: 2,
+    title: 'Animals',
+    description: 'Animals are part of the nature and wildlife.',
+  },
+  {
+    id: 3,
+    title: 'Humans',
+    description: 'Humans depend on plants and animals for survival.',
+  },
+];
+
+function SelectActionCard() {
+  const [selectedCard, setSelectedCard] = React.useState(0);
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(min(200px, 100%), 1fr))',
+        gap: 2,
+      }}
+    >
+      {cards.map((card, index) => (
+        <Card>
+          <CardActionArea
+            onClick={() => setSelectedCard(index)}
+            data-active={selectedCard === index ? '' : undefined}
+            sx={{
+              height: '100%',
+              '&[data-active]': {
+                backgroundColor: 'action.selected',
+                '&:hover': {
+                  backgroundColor: 'action.selectedHover',
+                },
+              },
+            }}
+          >
+            <CardContent sx={{ height: '100%' }}>
+              <Typography variant="h5" component="div">
+                {card.title}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {card.description}
+              </Typography>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      ))}
+    </Box>
+  );
+}
+
+export default SelectActionCard;

docs/data/material/components/cards/SelectActionCard.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import CardActionArea from '@mui/material/CardActionArea';
+
+const cards = [
+  {
+    id: 1,
+    title: 'Plants',
+    description: 'Plants are essential for all life.',
+  },
+  {
+    id: 2,
+    title: 'Animals',
+    description: 'Animals are part of the nature and wildlife.',
+  },
+  {
+    id: 3,
+    title: 'Humans',
+    description: 'Humans depend on plants and animals for survival.',
+  },
+];
+
+function SelectActionCard() {
+  const [selectedCard, setSelectedCard] = React.useState(0);
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(min(200px, 100%), 1fr))',
+        gap: 2,
+      }}
+    >
+      {cards.map((card, index) => (
+        <Card>
+          <CardActionArea
+            onClick={() => setSelectedCard(index)}
+            data-active={selectedCard === index ? '' : undefined}
+            sx={{
+              height: '100%',
+              '&[data-active]': {
+                backgroundColor: 'action.selected',
+                '&:hover': {
+                  backgroundColor: 'action.selectedHover',
+                },
+              },
+            }}
+          >
+            <CardContent sx={{ height: '100%' }}>
+              <Typography variant="h5" component="div">
+                {card.title}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {card.description}
+              </Typography>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      ))}
+    </Box>
+  );
+}
+
+export default SelectActionCard;

docs/data/material/components/cards/cards.md

@@ -78,4 +78,10 @@ Here's an example of a media control card.
 
 {{"demo": "MediaControlCard.js", "bg": true}}
 
+## Active style
+
+To style a card to look like it's active, attach a `data-active` to `CardActionArea` component and style it with `&[data-active]` selector.
+
+{{"demo": "SelectActionCard.js", "bg": true}}
+
 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/?path=/docs/card-introduction--docs).