From 790e3bfab5e48ecfed727c1f3e4f83d7548c939d Mon Sep 17 00:00:00 2001
From: PelayoFelgueroso <pfelguerosogalguera@gmail.com>
Date: Tue, 16 Jun 2026 16:37:19 +0200
Subject: [PATCH 1/2] Add chip and card previews

---
 .../previews/components/CardPreview.tsx       | 52 +++++++++++++++++++
 .../previews/components/ChipPreview.tsx       |  6 +--
 2 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 apps/website/screens/theme-generator/previews/components/CardPreview.tsx

diff --git a/apps/website/screens/theme-generator/previews/components/CardPreview.tsx b/apps/website/screens/theme-generator/previews/components/CardPreview.tsx
new file mode 100644
index 000000000..d21334c65
--- /dev/null
+++ b/apps/website/screens/theme-generator/previews/components/CardPreview.tsx
@@ -0,0 +1,52 @@
+import { DxcCard, DxcContainer, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import { ReactEventHandler } from "react";
+
+interface ImagePropsType {
+  alt: string;
+  caption?: string;
+  height?: string;
+  lazyLoading?: boolean;
+  objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+  objectPosition?: string;
+  onError?: ReactEventHandler<HTMLImageElement>;
+  onLoad?: ReactEventHandler<HTMLImageElement>;
+  sizes?: string;
+  src: string;
+  srcSet?: string;
+  width?: string;
+}
+
+const image: ImagePropsType = {
+  alt: "Example image",
+  width: "100%",
+  height: "250px",
+  objectFit: "cover",
+  src: "https://picsum.photos/id/11/1920/1080",
+};
+
+const paragraphContent = (
+  <DxcContainer maxWidth="500px">
+    <DxcParagraph>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet nisi a neque scelerisque ultrices vitae
+      pellentesque nunc.
+    </DxcParagraph>
+  </DxcContainer>
+);
+
+const CardPreview = () => {
+  return (
+    <DxcFlex gap="var(--spacing-gap-ml)" wrap="wrap">
+      <DxcCard onClick={() => {}} image={image} selectable onSelectionChange={() => {}}>
+        {paragraphContent}
+      </DxcCard>
+      <DxcCard onClick={() => {}} image={image} direction="row" selectable selected>
+        {paragraphContent}
+      </DxcCard>
+      <DxcCard onClick={() => {}} mode="outlined" image={image}>
+        {paragraphContent}
+      </DxcCard>
+    </DxcFlex>
+  );
+};
+
+export default CardPreview;
diff --git a/apps/website/screens/theme-generator/previews/components/ChipPreview.tsx b/apps/website/screens/theme-generator/previews/components/ChipPreview.tsx
index e36977361..c7fc1a929 100644
--- a/apps/website/screens/theme-generator/previews/components/ChipPreview.tsx
+++ b/apps/website/screens/theme-generator/previews/components/ChipPreview.tsx
@@ -4,9 +4,9 @@ import { DxcChip, DxcFlex } from "@dxc-technology/halstack-react";
 const ChipPreview = () => {
   return (
     <DxcFlex gap="var(--spacing-gap-ml)" wrap="wrap">
-      <DxcChip label="Task Completed" />
-      <DxcChip label="High Priority" prefix={{ icon: "priority_high", color: "primary" }} />
-      <DxcChip label="Archived" disabled />
+      <DxcChip prefix="palette" label="Art" selected={true} onClick={() => {}} />
+      <DxcChip prefix="palette" label="Art" selected={false} onClick={() => {}} />
+      <DxcChip mode="dismissible" label="Music" prefix="music_note" onClick={() => {}} />
     </DxcFlex>
   );
 };

From a62cf1f024510181b8c327c83049550c0b5456d7 Mon Sep 17 00:00:00 2001
From: PelayoFelgueroso <pfelguerosogalguera@gmail.com>
Date: Tue, 16 Jun 2026 17:12:56 +0200
Subject: [PATCH 2/2] Add card preview to select input

---
 .../screens/theme-generator/ThemeGeneratorPreviewPage.tsx      | 3 +--
 apps/website/screens/theme-generator/componentsRegistry.tsx    | 2 ++
 .../theme-generator/previews/components/CardPreview.tsx        | 2 +-
 .../screens/theme-generator/previews/components/index.ts       | 1 +
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx
index cbf9fa3e0..22965956b 100644
--- a/apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx
+++ b/apps/website/screens/theme-generator/ThemeGeneratorPreviewPage.tsx
@@ -67,7 +67,6 @@ const componentsExceptions = [
   "/components/application-layout",
   "/components/bleed",
   "/components/bulleted-list",
-  "/components/card",
   "/components/container",
   "/components/dialog",
   "/components/flex",
@@ -124,7 +123,7 @@ const ThemeGeneratorPreviewPage = ({
   const [selectedExample, setSelectedExample] = useState<string>("");
 
   const componentOptions = useMemo(() => {
-    return mapToSelectGroups(componentsList as ComponentItem[]);
+    return mapToSelectGroups(componentsList);
   }, []);
 
   // Set default components when requested and clear on cleanup
diff --git a/apps/website/screens/theme-generator/componentsRegistry.tsx b/apps/website/screens/theme-generator/componentsRegistry.tsx
index 21b65f68c..9a93204d3 100644
--- a/apps/website/screens/theme-generator/componentsRegistry.tsx
+++ b/apps/website/screens/theme-generator/componentsRegistry.tsx
@@ -5,6 +5,7 @@ import {
   BadgePreview,
   BreadcrumbsPreview,
   ButtonPreview,
+  CardPreview,
   CheckboxPreview,
   ChipPreview,
   ContextualMenuPreview,
@@ -77,6 +78,7 @@ export const componentsRegistry = {
   "/components/badge": BadgePreview,
   "/components/chip": ChipPreview,
   "/components/status-light": StatusLightPreview,
+  "/components/card": CardPreview,
 };
 
 export const examplesRegistry = {
diff --git a/apps/website/screens/theme-generator/previews/components/CardPreview.tsx b/apps/website/screens/theme-generator/previews/components/CardPreview.tsx
index d21334c65..6f0187c87 100644
--- a/apps/website/screens/theme-generator/previews/components/CardPreview.tsx
+++ b/apps/website/screens/theme-generator/previews/components/CardPreview.tsx
@@ -39,7 +39,7 @@ const CardPreview = () => {
       <DxcCard onClick={() => {}} image={image} selectable onSelectionChange={() => {}}>
         {paragraphContent}
       </DxcCard>
-      <DxcCard onClick={() => {}} image={image} direction="row" selectable selected>
+      <DxcCard onClick={() => {}} image={image} selectable selected>
         {paragraphContent}
       </DxcCard>
       <DxcCard onClick={() => {}} mode="outlined" image={image}>
diff --git a/apps/website/screens/theme-generator/previews/components/index.ts b/apps/website/screens/theme-generator/previews/components/index.ts
index 5e26b5c24..531d41e62 100644
--- a/apps/website/screens/theme-generator/previews/components/index.ts
+++ b/apps/website/screens/theme-generator/previews/components/index.ts
@@ -4,6 +4,7 @@ export { default as AvatarPreview } from "./AvatarPreview";
 export { default as BadgePreview } from "./BadgePreview";
 export { default as BreadcrumbsPreview } from "./BreadcrumbsPreview";
 export { default as ButtonPreview } from "./ButtonPreview";
+export { default as CardPreview } from "./CardPreview";
 export { default as CheckboxPreview } from "./CheckboxPreview";
 export { default as ChipPreview } from "./ChipPreview";
 export { default as ContextualMenuPreview } from "./ContextualMenuPreview";