feat(optionality): 5 options for optionality

oaknational · May 16, 2024 · 631ce65 · 631ce65
1 parent db250f7
commit 631ce65
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/...organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx b/...organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.stories.tsx
@@ -56,3 +56,47 @@ export const Default: Story = {
     </OakPupilJourneyOptionalityItem>
   ),
 };
+
+export const FiveOptions: Story = {
+  render: (args) => (
+    <OakPupilJourneyOptionalityItem {...args}>
+      <OakPupilJourneyOptionalityButton
+        title="Unit 1"
+        numberOfLessons={7}
+        href="#"
+        disabled={args.disabled}
+        unavailable={args.unavailable}
+      />
+      <OakPupilJourneyOptionalityButton
+        title="Unit 2"
+        numberOfLessons={8}
+        href="#"
+        disabled={args.disabled}
+        unavailable={args.unavailable}
+      />
+      <OakPupilJourneyOptionalityButton
+        title="Unit 3"
+        numberOfLessons={7}
+        href="#"
+        disabled={args.disabled}
+        unavailable={args.unavailable}
+      />
+      <OakPupilJourneyOptionalityButton
+        title="Unit 4 qeqwe ewe qewewqe wqewqe  wqewq "
+        numberOfLessons={7}
+        href="#"
+        disabled={args.disabled}
+        unavailable={args.unavailable}
+      />
+      <OakPupilJourneyOptionalityButton
+        title="Unit 5 wqedasdcqwaxerf wecrcewerewx fecfwecrtwe recwefwecr refewr"
+        numberOfLessons={7}
+        href="#"
+        disabled={args.disabled}
+        unavailable={args.unavailable}
+      />
+    </OakPupilJourneyOptionalityItem>
+  ),
+};
+
+FiveOptions.args = {};
diff --git a/...ponents/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx b/...ponents/organisms/pupil/OakPupilJourneyOptionalityItem/OakPupilJourneyOptionalityItem.tsx
@@ -46,7 +46,11 @@ export const OakPupilJourneyOptionalityItem = (
           {props.title}
         </OakBox>
       </OakFlex>
-      <OakFlex $flexDirection={["column", "row"]} $gap={"space-between-xs"}>
+      <OakFlex
+        $flexDirection={["column", "row"]}
+        $gap={"space-between-xs"}
+        $flexWrap={"wrap"}
+      >
         {children}
       </OakFlex>
     </OakFlex>