[doc] Images url changed to local files in visual tests

packages/lib/.storybook/assets.d.ts

@@ -0,0 +1,29 @@
+declare module "*.avif" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.webp" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

packages/lib/src/HalstackContext.stories.tsx

@@ -11,6 +11,9 @@ import DxcInset from "./inset/Inset";
 import DxcAlert from "./alert/Alert";
 import DxcApplicationLayout from "./layout/ApplicationLayout";
 import { userEvent, within } from "storybook/internal/test";
+import lakeImage from "./../.storybook/assets/images/lake.jpg";
+import woodenDockImage from "./../.storybook/assets/images/wooden_dock.avif";
+import snakeRiverImage from "./../.storybook/assets/images/snake_river.jpg";
 
 export default {
   title: "HalstackContext",
@@ -88,9 +91,9 @@ const Provider = () => {
           opinionatedTheme={{
             tokens: newTheme,
             logos: {
-              mainLogo: "https://picsum.photos/id/16/200/40",
-              footerLogo: "https://picsum.photos/id/17/200/40",
-              footerReducedLogo: "https://picsum.photos/id/17/200/40",
+              mainLogo: lakeImage,
+              footerLogo: woodenDockImage,
+              footerReducedLogo: snakeRiverImage,
             },
           }}
         >

packages/lib/src/avatar/Avatar.stories.tsx

@@ -3,6 +3,7 @@ import DxcAvatar from "./Avatar";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcFlex from "../flex/Flex";
+import woodenDockImage from "../../.storybook/assets/images/wooden_dock.avif";
 
 export default {
   title: "Avatar",
@@ -78,54 +79,54 @@ export const Chromatic: Story = {
           <Title title="circle" theme="light" level={3} />
           <Title title="xsmall" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="xsmall" />
+            <DxcAvatar imageSrc={woodenDockImage} size="xsmall" />
           </ExampleContainer>
           <Title title="small" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="small" />
+            <DxcAvatar imageSrc={woodenDockImage} size="small" />
           </ExampleContainer>
           <Title title="small" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="medium" />
+            <DxcAvatar imageSrc={woodenDockImage} size="medium" />
           </ExampleContainer>
           <Title title="large" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="large" />
+            <DxcAvatar imageSrc={woodenDockImage} size="large" />
           </ExampleContainer>
           <Title title="xlarge" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="xlarge" />
+            <DxcAvatar imageSrc={woodenDockImage} size="xlarge" />
           </ExampleContainer>
           <Title title="xxlarge" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="xxlarge" />
+            <DxcAvatar imageSrc={woodenDockImage} size="xxlarge" />
           </ExampleContainer>
         </>
         <>
           <Title title="square" theme="light" level={3} />
           <Title title="xsmall" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="xsmall" shape="square" />
+            <DxcAvatar imageSrc={woodenDockImage} size="xsmall" shape="square" />
           </ExampleContainer>
           <Title title="small" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="small" shape="square" />
+            <DxcAvatar imageSrc={woodenDockImage} size="small" shape="square" />
           </ExampleContainer>
           <Title title="small" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="medium" shape="square" />
+            <DxcAvatar imageSrc={woodenDockImage} size="medium" shape="square" />
           </ExampleContainer>
           <Title title="large" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="large" shape="square" />
+            <DxcAvatar imageSrc={woodenDockImage} size="large" shape="square" />
           </ExampleContainer>
           <Title title="xlarge" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="xlarge" shape="square" />
+            <DxcAvatar imageSrc={woodenDockImage} size="xlarge" shape="square" />
           </ExampleContainer>
           <Title title="xxlarge" theme="light" level={4} />
           <ExampleContainer>
-            <DxcAvatar imageSrc="https://picsum.photos/id/1022/200/300" size="xxlarge" shape="square" />
+            <DxcAvatar imageSrc={woodenDockImage} size="xxlarge" shape="square" />
           </ExampleContainer>
         </>
       </>

packages/lib/src/card/Card.accessibility.test.tsx

@@ -2,14 +2,15 @@ import { render } from "@testing-library/react";
 import { axe } from "../../test/accessibility/axe-helper";
 import DxcCard from "./Card";
 import CardPropsType from "./types";
+import woodenDockImage from "../../.storybook/assets/images/wooden_dock.avif";
 
 describe("Card component accessibility tests", () => {
   const image = {
     alt: "Example image",
     width: "100%",
     height: "250px",
     objectFit: "cover",
-    src: "https://picsum.photos/id/11/1920/1080",
+    src: woodenDockImage,
   } as CardPropsType["image"];
   it("Should not have basic accessibility issues", async () => {
     const { container } = render(<DxcCard image={image}>test-card</DxcCard>);

packages/lib/src/card/Card.stories.tsx

@@ -6,6 +6,7 @@ import DxcParagraph from "../paragraph/Paragraph";
 import DxcContainer from "../container/Container";
 import DxcFlex from "../flex/Flex";
 import DxcImagePropsType from "../image/types";
+import woodenDockImage from "../../.storybook/assets/images/wooden_dock.avif";
 
 export default {
   title: "Card",
@@ -17,7 +18,7 @@ const image: DxcImagePropsType = {
   width: "100%",
   height: "250px",
   objectFit: "cover",
-  src: "https://picsum.photos/id/11/1920/1080",
+  src: woodenDockImage,
 };
 
 const paragraphContent = (

packages/lib/src/card/Card.test.tsx

@@ -10,7 +10,7 @@ describe("Card component tests", () => {
     width: "100%",
     height: "250px",
     objectFit: "cover",
-    src: "https://picsum.photos/id/11/1920/1080",
+    src: "http://localhost/imagesrc",
   } as CardPropsType["image"];
   test("Card renders with correct content", () => {
     const { getByText } = render(<DxcCard>test-card</DxcCard>);

packages/lib/src/footer/Footer.stories.tsx

@@ -16,6 +16,9 @@ import DxcBadge from "../badge/Badge";
 import DxcButton from "../button/Button";
 import { HalstackProvider } from "../HalstackContext";
 
+import woodenDockImage from "../../.storybook/assets/images/wooden_dock.avif";
+import lakeImage from "../../.storybook/assets/images/lake.jpg";
+
 export default {
   title: "Footer",
   component: DxcFooter,
@@ -201,7 +204,7 @@ const Footer = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With custom logo" theme="light" level={4} />
-      <DxcFooter logo={{ src: "https://picsum.photos/id/1000/104/34", alt: "Custom logo" }} />
+      <DxcFooter logo={{ src: woodenDockImage, alt: "Custom logo" }} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With children, copyright, bottom links and social links" theme="light" level={4} />
@@ -421,21 +424,21 @@ const Footer = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Reduced with custom logo" theme="light" level={4} />
-      <DxcFooter mode="reduced" logo={{ src: "https://picsum.photos/id/1000/104/34", alt: "Custom logo" }} />
+      <DxcFooter mode="reduced" logo={{ src: woodenDockImage, alt: "Custom logo" }} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Themed footer" theme="light" level={4} />
       <HalstackProvider
         opinionatedTheme={{
           logos: {
-            footerLogo: "https://picsum.photos/id/17/104/50",
-            footerReducedLogo: "https://picsum.photos/id/17/104/34",
+            footerLogo: lakeImage,
+            footerReducedLogo: lakeImage,
           },
         }}
       >
         <DxcFooter />
         <DxcFooter mode="reduced" />
-        <DxcFooter logo={{ src: "https://picsum.photos/id/1000/104/34", alt: "Custom logo" }} />
+        <DxcFooter logo={{ src: woodenDockImage, alt: "Custom logo" }} />
       </HalstackProvider>
     </ExampleContainer>
   </>

packages/lib/src/layout/ApplicationLayout.stories.tsx

@@ -4,6 +4,9 @@ import DxcApplicationLayout from "./ApplicationLayout";
 import { userEvent, within } from "storybook/internal/test";
 import { useEffect } from "react";
 import { HalstackProvider } from "../HalstackContext";
+import lakeImage from "../../.storybook/assets/images/lake.jpg";
+import woodenDockImage from "../../.storybook/assets/images/wooden_dock.avif";
+import snakeRiverImage from "../../.storybook/assets/images/snake_river.jpg";
 
 export default {
   title: "Application Layout",
@@ -176,8 +179,8 @@ const SidenavThemed = () => (
   <HalstackProvider
     opinionatedTheme={{
       logos: {
-        mainLogo: "https://picsum.photos/id/16/100/50",
-        footerLogo: "https://picsum.photos/id/17/200/40",
+        mainLogo: lakeImage,
+        footerLogo: woodenDockImage,
       },
     }}
   >
@@ -196,9 +199,9 @@ const HeaderThemed = () => (
   <HalstackProvider
     opinionatedTheme={{
       logos: {
-        mainLogo: "https://picsum.photos/id/16/100/50",
-        footerLogo: "https://picsum.photos/id/17/200/40",
-        footerReducedLogo: "https://picsum.photos/id/10/200/40",
+        mainLogo: lakeImage,
+        footerLogo: woodenDockImage,
+        footerReducedLogo: snakeRiverImage,
       },
     }}
   >

packages/lib/tsconfig.json

@@ -6,6 +6,6 @@
     "forceConsistentCasingInFileNames": true,
     "lib": ["DOM", "DOM.Iterable", "ES2022", "ESNext"]
   },
-  "include": ["src", "test", ".", ".storybook/**/*", "src/**/*.d.ts"],
+  "include": ["src", "test", ".", ".storybook/**/*", ".storybook/**/*.d.ts", "src/**/*.d.ts"],
   "exclude": ["node_modules", "dist", "coverage", ".turbo"]
 }