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

…o CardActionArea (#44789) Signed-off-by: siddhantantil39 <[email protected]> Co-authored-by: siriwatknp <[email protected]> Co-authored-by: Sycamore <[email protected]> Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Dec 24, 2024 · 3ae7a04 · 3ae7a04
1 parent 04ac13a
commit 3ae7a04
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 0 deletions.
diff --git a/docs/data/material/components/cards/SelectActionCard.js b/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 a part of nature.',
+  },
+  {
+    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;
diff --git a/docs/data/material/components/cards/SelectActionCard.tsx b/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 a part of nature.',
+  },
+  {
+    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;
diff --git a/docs/data/material/components/cards/cards.md b/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 state styles
+
+To customize a Card's styles when it's in an active state, you can attach a `data-active` attribute to the Card Action Area component and apply styles with the `&[data-active]` selector, as shown below:
+
+{{"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).