[doc] Images added to site and updated card examples

apps/website/screens/components/card/code/examples/basicUsage.ts

@@ -1,23 +1,26 @@
-import { DxcInset, DxcCard, DxcParagraph, DxcContainer } from "@dxc-technology/halstack-react";
+import { DxcInset, DxcCard, DxcParagraph, DxcContainer, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import resultsetImage from "../images/resultsetTable.png";
 
 const code = `() => {
-  const image = {
-    alt: "Example image",
-    width: "445px",
+  const resultset = {
+    alt: "Resultset Table image",
+    width: "300px",
     height: "100%",
     objectFit: "cover",
-    src: "https://picsum.photos/id/11/1920/1080",
+    src: resultsetImage.src,
   };
 
   return (
     <DxcInset space="var(--spacing-padding-xl)">
-      <DxcCard image={image}>
-        <DxcContainer maxWidth="445px">
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec
-            mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat
-            libero.
-          </DxcParagraph>
+      <DxcCard image={resultset}>
+        <DxcContainer maxWidth="300px">
+          <DxcFlex direction="column" gap="var(--spacing-s)">
+            <DxcHeading text="Resultset Table" level={4} />
+            <DxcParagraph>
+              A data-rich component designed for displaying large sets of information with built-in features like 
+              sorting, pagination, and scroll behavior to support efficient exploration and comparison.
+            </DxcParagraph>
+          </DxcFlex>
         </DxcContainer>
       </DxcCard>
     </DxcInset>
@@ -29,6 +32,9 @@ const scope = {
   DxcInset,
   DxcContainer,
   DxcParagraph,
+  DxcHeading,
+  DxcFlex,
+  resultsetImage,
 };
 
 export default { code, scope };

apps/website/screens/components/card/code/examples/direction.ts

@@ -1,23 +1,26 @@
-import { DxcInset, DxcCard, DxcParagraph, DxcContainer } from "@dxc-technology/halstack-react";
+import { DxcInset, DxcCard, DxcParagraph, DxcContainer, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import resultsetImage from "../images/resultsetTable.png";
 
 const code = `() => {
-  const image = {
-    alt: "Example image",
+  const resultset = {
+    alt: "Resultset Table image",
     width: "100%",
-    height: "250px",
+    height: "150px",
     objectFit: "cover",
-    src: "https://picsum.photos/id/11/1920/1080",
+    src: resultsetImage.src,
   };
 
   return (
     <DxcInset space="var(--spacing-padding-xl)">
-      <DxcCard image={image} direction="row">
-        <DxcContainer maxWidth="250px">
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec
-            mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat
-            libero.
-          </DxcParagraph>
+      <DxcCard image={resultset} direction="horizontal">
+        <DxcContainer maxWidth="300px">
+          <DxcFlex direction="column" gap="var(--spacing-s)">
+            <DxcHeading text="Resultset Table" level={4} />
+            <DxcParagraph>
+              A data-rich component designed for displaying large sets of information with built-in features like 
+              sorting, pagination, and scroll behavior to support efficient exploration and comparison.
+            </DxcParagraph>
+          </DxcFlex>
         </DxcContainer>
       </DxcCard>
     </DxcInset>
@@ -29,6 +32,9 @@ const scope = {
   DxcInset,
   DxcContainer,
   DxcParagraph,
+  DxcHeading,
+  DxcFlex,
+  resultsetImage,
 };
 
 export default { code, scope };

apps/website/screens/components/card/code/examples/modes.ts

@@ -1,32 +1,46 @@
-import { DxcInset, DxcCard, DxcParagraph, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react";
+import { DxcInset, DxcCard, DxcParagraph, DxcContainer, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import resultsetImage from "../images/resultsetTable.png";
+import accordionImage from "../images/accordion.png";
 
 const code = `() => {
-  const image = {
-    alt: "Example image",
+  const resultset = {
+    alt: "Resultset Table image",
     width: "300px",
     height: "100%",
     objectFit: "cover",
-    src: "https://picsum.photos/id/11/1920/1080",
+    src: resultsetImage.src,
+  };
+  const accordion = {
+    alt: "Accordion image",
+    width: "300px",
+    height: "100%",
+    objectFit: "cover",
+    src: accordionImage.src,
   };
-
-  const content = (
-    <DxcContainer maxWidth="300px">
-      <DxcParagraph>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec
-        mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat
-        libero.
-      </DxcParagraph>
-    </DxcContainer>
-  );
 
   return (
     <DxcInset space="var(--spacing-padding-xl)">
-      <DxcFlex wrap="wrap" gap="2rem">
-        <DxcCard image={image}>
-          {content}
+      <DxcFlex gap="var(--spacing-gap-m)">
+        <DxcCard image={resultset}>
+          <DxcContainer maxWidth="300px">
+            <DxcFlex direction="column" gap="var(--spacing-s)">
+              <DxcHeading text="Resultset Table" level={4} />
+              <DxcParagraph>
+                A data-rich component designed for displaying large sets of information with built-in features like 
+                sorting, pagination, and scroll behavior to support efficient exploration and comparison.
+              </DxcParagraph>
+            </DxcFlex>
+          </DxcContainer>
         </DxcCard>
-        <DxcCard image={image} mode="outlined">
-          {content}
+        <DxcCard image={accordion} mode="outlined">
+          <DxcContainer maxWidth="300px">
+            <DxcFlex direction="column" gap="var(--spacing-s)">
+              <DxcHeading text="Accordion" level={4} />
+              <DxcParagraph>
+                A component designed to present large amounts of content in a small space by leveraging progressive disclosure.
+              </DxcParagraph>
+            </DxcFlex>
+          </DxcContainer>
         </DxcCard>
       </DxcFlex>
     </DxcInset>
@@ -36,9 +50,12 @@ const code = `() => {
 const scope = {
   DxcCard,
   DxcInset,
-  DxcFlex,
   DxcContainer,
   DxcParagraph,
+  DxcHeading,
+  DxcFlex,
+  resultsetImage,
+  accordionImage,
 };
 
 export default { code, scope };

apps/website/screens/components/card/code/examples/selectable.ts

@@ -1,40 +1,64 @@
-import { DxcInset, DxcCard, DxcParagraph, DxcContainer } from "@dxc-technology/halstack-react";
+import { DxcInset, DxcCard, DxcParagraph, DxcContainer, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
+import resultsetImage from "../images/resultsetTable.png";
+import accordionImage from "../images/accordion.png";
 import { useState } from "react";
 
 const code = `() => {
-  const image = {
-    alt: "Example image",
-    width: "445px",
+  const resultset = {
+    alt: "Resultset Table image",
+    width: "300px",
     height: "100%",
     objectFit: "cover",
-    src: "https://picsum.photos/id/11/1920/1080",
+    src: resultsetImage.src,
   };
-
-  const [selected, setSelected] = useState(false);
-  const onSelectionChange = (newValue) => {
-    setSelected(newValue);
+  const accordion = {
+    alt: "Accordion image",
+    width: "300px",
+    height: "100%",
+    objectFit: "cover",
+    src: accordionImage.src,
   };
 
+  const [selectedCard, setSelectedCard] = useState<string>("accordion");
+
   return (
     <DxcInset space="var(--spacing-padding-xl)">
-      <DxcCard image={image} selectable selected={selected} onSelectionChange={(newValue) => onSelectionChange(newValue)}>
-        <DxcContainer maxWidth="445px">
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at pretium mi. Sed ac mi purus. Donec
-            mattis luctus nisi, vitae scelerisque metus. Praesent in justo vitae quam mollis sollicitudin. Cras at consequat
-            libero.
-          </DxcParagraph>
-        </DxcContainer>
-      </DxcCard>
+      <DxcFlex gap="var(--spacing-gap-m)">
+        <DxcCard image={resultset} selectable selected={selectedCard === "resultset"} onClick={() => setSelectedCard("resultset")}>
+          <DxcContainer maxWidth="300px">
+            <DxcFlex direction="column" gap="var(--spacing-s)">
+              <DxcHeading text="Resultset Table" level={4} />
+              <DxcParagraph>
+                A data-rich component designed for displaying large sets of information with built-in features like 
+                sorting, pagination, and scroll behavior to support efficient exploration and comparison.
+              </DxcParagraph>
+            </DxcFlex>
+          </DxcContainer>
+        </DxcCard>
+        <DxcCard image={accordion} selectable selected={selectedCard === "accordion"} onClick={() => setSelectedCard("accordion")}>
+          <DxcContainer maxWidth="300px">
+            <DxcFlex direction="column" gap="var(--spacing-s)">
+              <DxcHeading text="Accordion" level={4} />
+              <DxcParagraph>
+                A component designed to present large amounts of content in a small space by leveraging progressive disclosure.
+              </DxcParagraph>
+            </DxcFlex>
+          </DxcContainer>
+        </DxcCard>
+      </DxcFlex>
     </DxcInset>
   );
 }`;
 
 const scope = {
   DxcCard,
   DxcInset,
-  DxcParagraph,
   DxcContainer,
+  DxcParagraph,
+  DxcHeading,
+  DxcFlex,
+  resultsetImage,
+  accordionImage,
   useState,
 };
 

apps/website/screens/components/image/code/examples/basicUsage.tsx

@@ -1,4 +1,5 @@
 import { DxcImage, DxcInset } from "@dxc-technology/halstack-react";
+import woodenDockImage from "../images/wooden_dock.png";
 
 const code = `() => {
   return (
@@ -7,7 +8,7 @@ const code = `() => {
         alt="Wooden dock on a lake" 
         caption="Wooden dock on a beautifully landscaped lake."
         width="100%"
-        src="https://images.unsplash.com/photo-1454372182658-c712e4c5a1db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80" 
+        src={woodenDockImage.src} 
       />
     </DxcInset>
   );
@@ -16,6 +17,7 @@ const code = `() => {
 const scope = {
   DxcImage,
   DxcInset,
+  woodenDockImage,
 };
 
 export default { code, scope };