From 3ae7a04caa535954961722b4c8c4b9c3e9cdd837 Mon Sep 17 00:00:00 2001
From: siddhantantil39 <54893999+siddhantantil39@users.noreply.github.com>
Date: Tue, 24 Dec 2024 10:39:41 +0530
Subject: [PATCH] [docs][CardActionArea] Added demo in docs of cards for adding
 props to CardActionArea (#44789)

Signed-off-by: siddhantantil39 <54893999+siddhantantil39@users.noreply.github.com>
Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>
Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 .../components/cards/SelectActionCard.js      | 67 +++++++++++++++++++
 .../components/cards/SelectActionCard.tsx     | 67 +++++++++++++++++++
 docs/data/material/components/cards/cards.md  |  6 ++
 3 files changed, 140 insertions(+)
 create mode 100644 docs/data/material/components/cards/SelectActionCard.js
 create mode 100644 docs/data/material/components/cards/SelectActionCard.tsx

diff --git a/docs/data/material/components/cards/SelectActionCard.js b/docs/data/material/components/cards/SelectActionCard.js
new file mode 100644
index 00000000000000..4b279e13a64048
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..4b279e13a64048
--- /dev/null
+++ 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
index a72c5348a63178..ddc4422c738449 100644
--- 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).