From 96d59f228a8809d4b7b47071800c603dfea266ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paulo=20Lagoa=CC=81?= <paulo.lagoa@hitachivantara.com>
Date: Fri, 8 Nov 2024 14:36:56 +0000
Subject: [PATCH] docs: add `Card` documentation

---
 apps/docs/src/pages/components/card.mdx | 157 +++++++++++++++++++++++-
 1 file changed, 156 insertions(+), 1 deletion(-)

diff --git a/apps/docs/src/pages/components/card.mdx b/apps/docs/src/pages/components/card.mdx
index 096b501dd1..519e6d3226 100644
--- a/apps/docs/src/pages/components/card.mdx
+++ b/apps/docs/src/pages/components/card.mdx
@@ -18,4 +18,159 @@ export const getStaticProps = async ({ params }) => {
 
 <Description />
 
-<Page />
+<Page>
+
+```jsx live
+<HvCard
+  className="w-380px"
+  bgcolor="atmo1"
+  statusColor="positive"
+  icon={<Leaf iconSize="S" color="positive" />}
+>
+  <HvCardHeader
+    title={<HvTypography variant="title4">Schedule New Job</HvTypography>}
+    icon={<Job size="XS" />}
+    subheader={
+      <HvTypography variant="caption2">
+        Run data backups or maintenance tasks on your schedule
+      </HvTypography>
+    }
+  />
+  <HvCardMedia
+    component="img"
+    alt="Schedule New Job"
+    height={120}
+    image="https://github.com/user-attachments/assets/3d17a64e-b5f3-4ea8-a66d-bc02a31b92e0"
+  />
+  <HvCardContent>
+    <HvTypography>
+      Set up a job to run automatically at your preferred time and frequency.
+    </HvTypography>
+  </HvCardContent>
+  <HvActionBar>
+    <HvButton variant="secondaryGhost">Configure Job</HvButton>
+    <div aria-hidden className="flex-1" />
+    <HvButton variant="secondarySubtle">Set Schedule</HvButton>
+  </HvActionBar>
+</HvCard>
+```
+
+### Media
+
+You can place an image on your card using the `HvCardMedia` component. It will adapt to the location of the card it is placed on.
+
+```jsx live
+<HvCard className="w-240px" bgcolor="atmo1">
+  <HvCardMedia
+    component="img"
+    alt="Schedule New Job"
+    height={120}
+    image="https://s7d9.scene7.com/is/image/hitachivantara/take-charge-of-your-hybrid-cloud-estate-everflex-control-square:mediumvertical?fmt=webp"
+  />
+  <HvCardContent>
+    <HvTypography>
+      Use the live code editor to change the position of the `HvCardMedia`
+      component in the card.
+    </HvTypography>
+  </HvCardContent>
+</HvCard>
+```
+
+### Actions
+
+If you want to add actions to the card, you can use the `HvActionBar` component.
+
+```jsx live
+<>
+  <HvCard className="w-380px" bgcolor="atmo1">
+    <HvCardHeader
+      title={
+        <HvTypography variant="title3">Start using UI Kit now</HvTypography>
+      }
+      subheader={
+        <HvTypography>
+          Get started with the Hitachi Vantara UI Kit and build your next
+          project.
+        </HvTypography>
+      }
+    />
+    <HvActionBar className="flex-1">
+      <HvButton startIcon={<Code />} variant="primarySubtle">
+        Github
+      </HvButton>
+      <div aria-hidden className="flex-1" />
+      <HvButton startIcon={<Doc />}>Get Started</HvButton>
+    </HvActionBar>
+  </HvCard>
+</>
+```
+
+### Selectable
+
+You can mark a card as selectable by adding the `selectable` prop. The `selected` prop indicates whether or not the card is selected.
+
+```jsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [checked, setChecked] = useState(null);
+  const storages = [
+    {
+      name: "Local Storage",
+      icon: <Storage size="S" />,
+      description: "Use local storage for quick access to user settings.",
+    },
+    {
+      name: "Cloud Storage",
+      icon: <Cloud size="S" />,
+      description: "Use cloud storage for secure, scalable data access.",
+    },
+  ];
+
+  return (
+    <div className="flex flex-row gap-2 w-full">
+      {storages.map((p, idx) => {
+        return (
+          <HvCard
+            bgcolor="atmo1"
+            className="flex-1"
+            selectable
+            selected={checked === idx}
+          >
+            <button
+              type="button"
+              onClick={() => setChecked(idx)}
+              aria-label={`Press enter or space to select the ${p.name}.`}
+              className="w-full text-left"
+            >
+              <HvCardHeader
+                title={
+                  <div className="flex justify-between items-center">
+                    <div className="flex gap-1 items-center">
+                      {p.icon}
+                      <HvTypography variant="title4">{p.name}</HvTypography>
+                    </div>
+                    <HvRadio
+                      onChange={() => setChecked(idx)}
+                      checked={checked === idx}
+                      value="value"
+                      inputProps={{
+                        "aria-label": `Tick to select the ${p.name} payment.`,
+                      }}
+                    />
+                  </div>
+                }
+              />
+              <HvCardContent>
+                <HvTypography>{p.description}</HvTypography>
+              </HvCardContent>
+            </button>
+          </HvCard>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+</Page>