chore(PUPIL-442): add InternalDroppableHoldingPen

this is used in `OakQuizMatch` to hold the items that are to be matched

src/components/organisms/pupil/InternalDroppableHoldingPen/InternalDroppableHoldingPen.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { InternalDroppableHoldingPen } from "./InternalDroppableHoldingPen";
+
+import { OakDraggable } from "@/components/molecules";
+
+const meta: Meta<typeof InternalDroppableHoldingPen> = {
+  component: InternalDroppableHoldingPen,
+  tags: ["autodocs"],
+  title: "components/organisms/pupil/InternalDroppableHoldingPen",
+  parameters: {
+    controls: {
+      include: [],
+    },
+    backgrounds: {
+      default: "light",
+    },
+  },
+  render: (args) => <InternalDroppableHoldingPen {...args} />,
+};
+export default meta;
+
+type Story = StoryObj<typeof InternalDroppableHoldingPen>;
+
+export const Default: Story = {};
+
+/**
+ * A draggable has entered the droppable so it has entered an active state
+ */
+export const DraggingOver: Story = {
+  args: {
+    isOver: true,
+  },
+};
+
+export const Occupied: Story = {
+  args: {
+    children: (
+      <>
+        <OakDraggable>Elephant</OakDraggable>
+        <OakDraggable>Kangaroo</OakDraggable>
+        <OakDraggable>Shark</OakDraggable>
+      </>
+    ),
+  },
+};

src/components/organisms/pupil/InternalDroppableHoldingPen/InternalDroppableHoldingPen.test.tsx

@@ -0,0 +1,19 @@
+import { ThemeProvider } from "styled-components";
+import { create } from "react-test-renderer";
+import React from "react";
+
+import { InternalDroppableHoldingPen } from "./InternalDroppableHoldingPen";
+
+import { oakDefaultTheme } from "@/styles";
+
+describe("InternalDroppableHoldingPen", () => {
+  it("matches snapshot", () => {
+    const tree = create(
+      <ThemeProvider theme={oakDefaultTheme}>
+        <InternalDroppableHoldingPen />
+      </ThemeProvider>,
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/organisms/pupil/InternalDroppableHoldingPen/InternalDroppableHoldingPen.tsx

@@ -0,0 +1,58 @@
+import React, {
+  ComponentPropsWithRef,
+  ComponentPropsWithoutRef,
+  FC,
+  forwardRef,
+} from "react";
+import styled from "styled-components";
+
+import { OakFlex } from "@/components/atoms";
+import { parseColor } from "@/styles/helpers/parseColor";
+
+const StyledOakFlex = styled(OakFlex)`
+  background-color: ${parseColor("grey20")};
+  background-color: color-mix(in lch, ${parseColor("black")} 5%, transparent);
+
+  &[data-over="true"] {
+    background-color: ${parseColor("white")};
+    background-color: color-mix(
+      in lch,
+      ${parseColor("white")} 60%,
+      transparent
+    );
+  }
+`;
+
+type InternalDroppableHoldingPenProps = {
+  /**
+   * Indicates whether a draggable is currently being dragged over the droppable
+   */
+  isOver?: boolean;
+};
+
+/**
+ * An internal holding pen for multiple draggable items
+ *
+ * Has no intrinsic drop functionally.
+ * It is intended to be used with `useDroppable` from `@dnd-kit/core`
+ */
+export const InternalDroppableHoldingPen: FC<
+  ComponentPropsWithRef<typeof OakFlex>
+> = forwardRef<
+  HTMLDivElement,
+  InternalDroppableHoldingPenProps & ComponentPropsWithoutRef<typeof OakFlex>
+>(({ isOver, ...props }, ref) => {
+  return (
+    <StyledOakFlex
+      ref={ref}
+      $pa="inner-padding-s"
+      $mb="space-between-m2"
+      $gap="space-between-xs"
+      $borderRadius="border-radius-l"
+      $flexWrap="wrap"
+      $minHeight="all-spacing-13"
+      data-over={isOver}
+      {...props}
+    />
+  );
+});

src/components/organisms/pupil/InternalDroppableHoldingPen/__snapshots__/InternalDroppableHoldingPen.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InternalDroppableHoldingPen matches snapshot 1`] = `
+.c0 {
+  min-height: 5rem;
+  padding: 0.75rem;
+  margin-bottom: 2rem;
+  border-radius: 1rem;
+  font-family: Lexend,sans-serif;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.c2 {
+  background-color: #f2f2f2;
+  background-color: color-mix(in lch,#222222 5%,transparent);
+}
+
+.c2[data-over="true"] {
+  background-color: #ffffff;
+  background-color: color-mix( in lch, #ffffff 60%, transparent );
+}
+
+<div
+  className="c0 c1 c2"
+/>
+`;

src/components/organisms/pupil/InternalDroppableHoldingPen/index.ts

@@ -0,0 +1 @@
+export * from "./InternalDroppableHoldingPen";