feat(PUPIL-442): add a disabled state to OakDroppable

src/components/molecules/OakDroppable/OakDroppable.stories.tsx

@@ -30,6 +30,12 @@ type Story = StoryObj<typeof OakDroppable>;
 
 export const Default: Story = {};
 
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+  },
+};
+
 /**
  * A draggable has entered the droppable so it has entered an active state
  */
@@ -41,18 +47,21 @@ export const DraggingOver: Story = {
 
 export const Occupied: Story = {
   args: {
+    canDrop: true,
     children: <OakDraggable>Elephant</OakDraggable>,
   },
 };
 
 export const WithSlotLabel: Story = {
   args: {
+    canDrop: true,
     labelSlot: "never forgets",
   },
 };
 
 export const OccupiedWithSlotLabel: Story = {
   args: {
+    canDrop: true,
     labelSlot: "never forgets",
     children: <OakDraggable>Elephant</OakDraggable>,
   },
@@ -62,20 +71,23 @@ export const OccupiedWithSlotLabel: Story = {
  */
 export const DraggingOverWithSlotLabel: Story = {
   args: {
+    canDrop: true,
     isOver: true,
     labelSlot: "never forgets",
   },
 };
 
 export const WithLongSlotLabel: Story = {
   args: {
+    canDrop: true,
     labelSlot:
       "which animal never forgets and is the largest land animal on earth?",
   },
 };
 
 export const WithAVeryLongSlotLabel: Story = {
   args: {
+    canDrop: true,
     labelSlot:
       "which animal is the largest land mammal with a long trunk, large ears, and tusks? Known for intelligence and social behavior, it symbolizes strength and conservation efforts worldwide.",
   },

src/components/molecules/OakDroppable/OakDroppable.tsx

@@ -16,6 +16,10 @@ export type OakDroppableProps = {
    * Indicates whether a draggable is currently being dragged over the droppable
    */
   isOver?: boolean;
+  /**
+   * Present the element in a state making it clear that it can be dropped into
+   */
+  isDisabled?: boolean;
   /**
    * A slot for a label to be displayed to the RHS of the droppable
    *
@@ -31,6 +35,10 @@ export type OakDroppableProps = {
 const StyledFlex = styled(OakFlex)`
   outline: ${parseBorder("border-solid-l")} ${parseColor("border-primary")};
   outline-style: dashed;
+
+  &[data-disabled="true"] {
+    outline-color: ${parseColor("border-neutral")};
+  }
 `;
 
 /**
@@ -44,7 +52,18 @@ export const OakDroppable: FC<
 > = forwardRef<
   HTMLDivElement,
   OakDroppableProps & ComponentPropsWithoutRef<typeof OakFlex>
->(({ children, labelSlot, isOver, ...props }, ref) => {
+>(({ children, labelSlot, isOver, isDisabled, ...props }, ref) => {
+  const slotBackground = (() => {
+    if (isOver) {
+      return "bg-primary";
+    }
+    if (!isDisabled) {
+      return "bg-neutral";
+    }
+
+    return "transparent";
+  })();
+
   return (
     <OakFlex
       ref={ref}
@@ -56,11 +75,12 @@ export const OakDroppable: FC<
       {...props}
     >
       <StyledFlex
-        $background={isOver ? "bg-primary" : "bg-neutral"}
+        $background={slotBackground}
         $pa="inner-padding-ssx"
         $borderRadius="border-radius-m2"
         $minHeight="all-spacing-11"
         $flexBasis="100%"
+        data-disabled={isDisabled}
       >
         <OakBox $width="100%">{children}</OakBox>
       </StyledFlex>

src/components/molecules/OakDroppable/__snapshots__/OakDroppable.test.tsx.snap

@@ -47,6 +47,10 @@ exports[`OakDroppable matches snapshot 1`] = `
   outline-style: dashed;
 }
 
+.c4[data-disabled="true"] {
+  outline-color: #808080;
+}
+
 @media (min-width:750px) {
   .c1 {
     -webkit-flex-direction: row;

src/components/organisms/pupil/OakQuizOrder/OakQuizOrder.tsx

@@ -56,22 +56,20 @@ const ConnectedDraggable = ({ id, label }: OakQuizOrderItem) => {
     setNodeRef,
     transform,
     transition,
-    active,
-    over,
+    isOver,
+    isDragging,
   } = useSortable({ id });
-  const isGhostItem = active?.id === id;
-  const isGhostSlot = over?.id === id;
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
   };
 
   return (
-    <OakDroppable isOver={isGhostSlot}>
+    <OakDroppable isOver={isOver}>
       <OakDraggable
         ref={setNodeRef}
         style={style}
-        isDisabled={isGhostItem}
+        isDisabled={isDragging}
         {...attributes}
         {...listeners}
         aria-describedby={undefined}

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

@@ -315,6 +315,10 @@ exports[`OakQuizOrder matches snapshot 1`] = `
   outline-style: dashed;
 }
 
+.c6[data-disabled="true"] {
+  outline-color: #808080;
+}
+
 @media (min-width:750px) {
   .c3 {
     -webkit-flex-direction: row;