Merged in SW-2064-lightbox-updates (pull request #3347)

feat(SW-2064): Lightbox updates

* chore(SW-2064): add opacity to not selected images

* chore(SW-2064): set main image as the first image in thumbnail

* chore(SW-2064): disable navigation buttons on first and last image

* fix(SW-2064): use cx

* Revert "chore(SW-2064): disable navigation buttons on first and last image"

This reverts commit 9c5acd8a02b83740f35d1cfa88bfba6b006ba947.

* refactor(SW-2064): create ImageCounter component

* refactor(SW-2064)

* chore(SW-2064): add enter keu down on main image


Approved-by: Erik Tiekstra

packages/design-system/lib/components/ImageCounter/ImageCounter.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { ImageCounter } from "./index"
+
+const meta: Meta<typeof ImageCounter> = {
+  title: "Core Components/ImageCounter",
+  component: ImageCounter,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof ImageCounter>
+
+export const Large: Story = {
+  args: {
+    size: "Large",
+    leadingIcon: false,
+    number: "12/36",
+  },
+}
+
+export const Small: Story = {
+  args: {
+    size: "Small",
+    leadingIcon: false,
+    number: "12/36",
+  },
+}
+
+export const LargeWithLeadingIcon: Story = {
+  args: {
+    size: "Large",
+    leadingIcon: true,
+    number: "10",
+  },
+}
+export const SmallWithLeadingIcon: Story = {
+  args: {
+    size: "Small",
+    leadingIcon: true,
+    number: 10,
+  },
+}

packages/design-system/lib/components/ImageCounter/imageCounter.module.css

@@ -0,0 +1,19 @@
+.imageCounter {
+  background-color: var(--Overlay-90);
+  border-radius: var(--Corner-radius-sm);
+  color: var(--Text-Inverted);
+  justify-content: center;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--Space-x025);
+}
+
+.small {
+  padding: 0 var(--Space-x05);
+  height: 26px;
+}
+
+.large {
+  padding: 0 var(--Space-x1);
+  height: 32px;
+}

packages/design-system/lib/components/ImageCounter/index.tsx

@@ -0,0 +1,29 @@
+import { VariantProps } from "class-variance-authority"
+import { Typography } from "../Typography"
+import { variants } from "./variants"
+import { MaterialIcon } from "../Icons/MaterialIcon"
+
+interface ImageCounterProps extends VariantProps<typeof variants> {
+  number: number | string
+  leadingIcon?: boolean
+  className?: string
+}
+
+export function ImageCounter({
+  number,
+  size,
+  leadingIcon = false,
+  className,
+}: ImageCounterProps) {
+  const classNames = variants({ className, size })
+  return (
+    <Typography variant="Tag/sm">
+      <span className={classNames}>
+        {leadingIcon && (
+          <MaterialIcon icon="filter" color="Icon/Inverted" size={16} />
+        )}
+        {number}
+      </span>
+    </Typography>
+  )
+}

packages/design-system/lib/components/ImageCounter/variants.ts

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./imageCounter.module.css"
+
+export const config = {
+  variants: {
+    size: {
+      Large: styles.large,
+      Small: styles.small,
+    },
+  },
+  defaultVariants: {
+    size: "Large",
+  },
+} as const
+
+export const variants = cva(styles.imageCounter, config)