Add light box gallery

apps/docs/src/content/04-components/overlays/light-box/examples/gallery.tsx

@@ -0,0 +1,49 @@
+import {
+  Button,
+  Flex,
+  Image,
+  LightBox,
+  LightBoxTrigger,
+  ActionGroup,
+  LightBoxGallery,
+  LightBoxGalleryItem,
+  IconDownload,
+} from "@mittwald/flow-react-components";
+
+export default () => {
+  const images = [
+    "https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg",
+    "https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544",
+  ];
+
+  return (
+    <Flex gap="m">
+      {images.map((src, index) => (
+        <LightBoxTrigger key={index}>
+          <Button>
+            <Image
+              alt=""
+              src={src}
+              height="100px"
+              withBorder
+            />
+          </Button>
+          <LightBox>
+            <LightBoxGallery defaultIndex={index}>
+              {images.map((src) => (
+                <LightBoxGalleryItem>
+                  <Image src={src} />
+                  <ActionGroup>
+                    <Button aria-label="Herunterladen">
+                      <IconDownload />
+                    </Button>
+                  </ActionGroup>
+                </LightBoxGalleryItem>
+              ))}
+            </LightBoxGallery>
+          </LightBox>
+        </LightBoxTrigger>
+      ))}
+    </Flex>
+  );
+};

apps/docs/src/content/04-components/overlays/light-box/overview.mdx

@@ -37,3 +37,14 @@ Darstellung von Inhalten mit großer vertikaler Ausdehnung, wie z. B.
 mehrseitigen PDFs.
 
 <LiveCodeEditor example="fitScreenFalse" editorCollapsed />
+
+---
+
+# Mit Galerie
+
+Innerhalb der LightBox kann eine `LightBoxGallery` verwendet werden. Diese kann
+mit `LightBoxGalleryItems` gefüllt werden, welche die Platzierung von
+[Images](/04-components/content/image/overview) und
+[ActionGroups](/04-components/actions/action-group/overview) unterstützen.
+
+<LiveCodeEditor example="gallery" editorCollapsed />

packages/components/src/components/LightBox/LightBox.module.scss

@@ -54,4 +54,35 @@
   .actions {
     padding-left: var(--light-box--spacing);
   }
+
+  .gallery {
+    width: var(--light-box--max-width);
+  }
+
+  &:has(.gallery) {
+    .actions {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .lightBox {
+    [role="dialog"] {
+      max-width: var(--light-box--max-width-mobile);
+      max-height: var(--light-box--max-height-mobile);
+    }
+
+    &.fitScreen {
+      .content {
+        > * {
+          max-height: var(--light-box--max-height-mobile);
+        }
+      }
+    }
+
+    .gallery {
+      width: var(--light-box--max-width-mobile);
+    }
+  }
 }

packages/components/src/components/LightBox/LightBox.tsx

@@ -15,6 +15,8 @@ import styles from "./LightBox.module.scss";
 import DivView from "@/views/DivView";
 import ButtonView from "@/views/ButtonView";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit";
+import { useLocalizedStringFormatter } from "react-aria";
+import locales from "./locales/*.locale.json";
 
 export interface LightBoxProps
   extends PropsWithChildren, FlowComponentProps, PropsWithClassName {
@@ -52,6 +54,9 @@ export const LightBox = flowComponent("LightBox", (props) => {
         component: "LightBox",
       },
     },
+    LightBoxGallery: {
+      className: styles.gallery,
+    },
   };
 
   const controllerFromContext = useOverlayController("LightBox", {
@@ -60,6 +65,8 @@ export const LightBox = flowComponent("LightBox", (props) => {
 
   const controller = controllerFromProps ?? controllerFromContext;
 
+  const stringFormatter = useLocalizedStringFormatter(locales, "LightBox");
+
   return (
     <Overlay
       overlayType="LightBox"
@@ -74,6 +81,7 @@ export const LightBox = flowComponent("LightBox", (props) => {
             color="light-static"
             variant="solid"
             onPress={() => controller.close()}
+            aria-label={stringFormatter.format("close")}
           >
             <IconClose />
           </ButtonView>

packages/components/src/components/LightBox/components/LightBoxGallery/Controls.tsx

@@ -0,0 +1,40 @@
+import type { FC } from "react";
+import styles from "@/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss";
+import clsx from "clsx";
+import { useLocalizedStringFormatter } from "react-aria";
+import locales from "../../locales/*.locale.json";
+
+interface Props {
+  count: number;
+  currentIndex: number;
+}
+
+export const Controls: FC<Props> = (props) => {
+  const { count, currentIndex } = props;
+
+  const stringFormatter = useLocalizedStringFormatter(locales, "LightBox");
+
+  const indicators = Array(count)
+    .fill("")
+    .map((_, index) => (
+      <span
+        key={index}
+        className={clsx(
+          styles.indicator,
+          currentIndex === index && styles.current,
+        )}
+      />
+    ));
+
+  return (
+    <div
+      className={styles.indicators}
+      aria-label={stringFormatter.format("indicator", {
+        current: currentIndex + 1,
+        count,
+      })}
+    >
+      {indicators}
+    </div>
+  );
+};

packages/components/src/components/LightBox/components/LightBoxGallery/LightBoxGallery.module.scss

@@ -0,0 +1,140 @@
+.gallery {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  --button-size: calc(
+    var(--icon--size--m) + 2 * var(--button--padding-icon-only)
+  );
+  --button-size-plus-spacing: calc(
+    var(--button-size) + var(--light-box--spacing)
+  );
+  --indicator-height: calc(var(--light-box--spacing) + var(--icon--size--m));
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .galleryItem {
+    position: relative;
+    margin: 0 auto;
+    user-select: none;
+  }
+
+  .actions {
+    position: absolute;
+    top: 0;
+    right: calc(var(--button-size-plus-spacing) * -1);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--light-box--spacing);
+  }
+
+  .actionGroup {
+    flex-grow: 0;
+    flex-direction: column;
+    row-gap: var(--light-box--spacing);
+  }
+
+  .image {
+    animation: fade-in var(--transition--duration--default) ease-in forwards;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .indicators {
+    display: flex;
+    justify-content: center;
+    column-gap: var(--light-box--indicator-spacing);
+    color: var(--light-box--content-color);
+  }
+
+  .indicator {
+    display: block;
+    width: var(--light-box--indicator-size);
+    height: var(--light-box--indicator-size);
+    border: var(--light-box--indicator-border-width)
+      var(--light-box--indicator-border-style) var(--light-box--content-color);
+    border-radius: var(--light-box--indicator-corner-radius);
+
+    &.current {
+      background-color: var(--light-box--content-color);
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .content {
+    padding-inline: calc(
+      var(--button-size-plus-spacing) + var(--light-box--spacing)
+    );
+    padding-bottom: var(--indicator-height);
+    height: var(--light-box--max-height);
+  }
+
+  .galleryItem {
+    max-height: calc(var(--light-box--max-height) - var(--indicator-height));
+  }
+
+  .indicators {
+    position: absolute;
+    bottom: calc(var(--light-box--spacing) / 2);
+    inset-inline: 0;
+  }
+
+  .previousButton,
+  .nextButton {
+    position: absolute;
+    top: calc(50% - var(--button-size) / 2);
+  }
+
+  .previousButton {
+    left: 0;
+  }
+
+  .nextButton {
+    right: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .content {
+    padding-inline: var(--button-size-plus-spacing);
+    padding-bottom: var(--button-size-plus-spacing);
+    height: var(--light-box--max-height-mobile);
+  }
+
+  .galleryItem {
+    max-height: calc(
+      var(--light-box--max-height) - var(--button-size-plus-spacing)
+    );
+  }
+
+  .controls {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    inset-inline: 0;
+    justify-content: space-between;
+    align-items: center;
+  }
+}