[doc] Add chip and card previews

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 = {

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} selectable selected>
+        {paragraphContent}
+      </DxcCard>
+      <DxcCard onClick={() => {}} mode="outlined" image={image}>
+        {paragraphContent}
+      </DxcCard>
+    </DxcFlex>
+  );
+};
+
+export default CardPreview;

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>
   );
 };

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";

apps/website/screens/theme-generator/steps/PreviewScreen.tsx

@@ -67,7 +67,6 @@ const componentsExceptions = [
   "/components/application-layout",
   "/components/bleed",
   "/components/bulleted-list",
-  "/components/card",
   "/components/container",
   "/components/dialog",
   "/components/flex",