feat(LightBox): add LightBox component

[Lisa18289]

Documentation

Description

With the Lightbox component, we want to enable users of our design system to open images or PDFs in full size within the same tab.

Design

The Lightbox consists of a backdrop that is significantly darker than that of a modal, allowing the image or PDF to stand out more prominently. It includes an Action Group, which allows developers to add additional actions. A close button is always present. This Action Group can be supplemented with further options, such as Download or Print. Due to the dark background, the Light-Soft variant was chosen for the buttons. The image should always occupy 90% of the viewport, with the buttons positioned to the right of the image.

Token

--lightbox-color: var(--color-dark-color-600);
--lightbox-spacing: var(--size-m);

[github-actions]

Coverage Report for ./packages/components/

Status	Category	Percentage	Covered / Total
🔵	Lines	29.28%	4242 / 14485
🔵	Statements	29.28%	4242 / 14485
🔵	Functions	32.99%	226 / 685
🔵	Branches	56.74%	484 / 853

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/components/vite.build.config.base.ts	0%	0%	0%	0%	1-142
packages/components/src/components/LightBox/LightBox.tsx	0%	0%	0%	0%	1-76
packages/components/src/components/LightBox/index.ts	0%	0%	0%	0%	1-5
packages/components/src/components/LightBox/components/LightBoxTrigger/LightBoxTrigger.tsx	0%	0%	0%	0%	1-18
packages/components/src/components/LightBox/components/LightBoxTrigger/index.ts	0%	0%	0%	0%	1-4
packages/components/src/components/LightBox/stories/Default.stories.tsx	0%	0%	0%	0%	1-42
packages/components/src/components/Modal/Modal.tsx	88.57%	33.33%	100%	88.57%	77-85
packages/components/src/components/Overlay/index.ts	100%	100%	100%	100%
packages/components/src/components/propTypes/index.ts	100%	100%	100%	100%

Generated in workflow #1764 for commit 3c964c1 by the Vitest Coverage Report Action