diff --git a/packages/lib/.storybook/assets.d.ts b/packages/lib/.storybook/assets.d.ts new file mode 100644 index 000000000..79c1841c1 --- /dev/null +++ b/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; +} diff --git a/packages/lib/.storybook/assets/images/lake.jpg b/packages/lib/.storybook/assets/images/lake.jpg new file mode 100644 index 000000000..21b2cd3aa Binary files /dev/null and b/packages/lib/.storybook/assets/images/lake.jpg differ diff --git a/packages/lib/.storybook/assets/images/snake_river.jpg b/packages/lib/.storybook/assets/images/snake_river.jpg new file mode 100644 index 000000000..9cb1c9cff Binary files /dev/null and b/packages/lib/.storybook/assets/images/snake_river.jpg differ diff --git a/packages/lib/.storybook/assets/images/wooden_dock.avif b/packages/lib/.storybook/assets/images/wooden_dock.avif new file mode 100644 index 000000000..4b7ff4abc Binary files /dev/null and b/packages/lib/.storybook/assets/images/wooden_dock.avif differ diff --git a/packages/lib/src/HalstackContext.stories.tsx b/packages/lib/src/HalstackContext.stories.tsx index 74a301528..f20cbb5c7 100644 --- a/packages/lib/src/HalstackContext.stories.tsx +++ b/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, }, }} > diff --git a/packages/lib/src/avatar/Avatar.stories.tsx b/packages/lib/src/avatar/Avatar.stories.tsx index 8b05ed4ab..d45f166c1 100644 --- a/packages/lib/src/avatar/Avatar.stories.tsx +++ b/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="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> </> </> diff --git a/packages/lib/src/card/Card.accessibility.test.tsx b/packages/lib/src/card/Card.accessibility.test.tsx index 1b0341979..d74606fbb 100644 --- a/packages/lib/src/card/Card.accessibility.test.tsx +++ b/packages/lib/src/card/Card.accessibility.test.tsx @@ -2,6 +2,7 @@ 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 = { @@ -9,7 +10,7 @@ describe("Card component accessibility tests", () => { 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>); diff --git a/packages/lib/src/card/Card.stories.tsx b/packages/lib/src/card/Card.stories.tsx index 3dd4bf04a..8fb896988 100644 --- a/packages/lib/src/card/Card.stories.tsx +++ b/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 = ( diff --git a/packages/lib/src/card/Card.test.tsx b/packages/lib/src/card/Card.test.tsx index 9e1b9d6ec..f726106d0 100644 --- a/packages/lib/src/card/Card.test.tsx +++ b/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>); diff --git a/packages/lib/src/footer/Footer.stories.tsx b/packages/lib/src/footer/Footer.stories.tsx index 0c269f8da..efa9cb3b8 100644 --- a/packages/lib/src/footer/Footer.stories.tsx +++ b/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> </> diff --git a/packages/lib/src/layout/ApplicationLayout.stories.tsx b/packages/lib/src/layout/ApplicationLayout.stories.tsx index a40c0fd63..9d7015773 100644 --- a/packages/lib/src/layout/ApplicationLayout.stories.tsx +++ b/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, }, }} > diff --git a/packages/lib/tsconfig.json b/packages/lib/tsconfig.json index e0794eabc..a8937f1aa 100644 --- a/packages/lib/tsconfig.json +++ b/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"] }