Merge pull request #229 from oaknational/fix/pupil-journey-units-filter

Fix/pupil journey units filter
oaknational · Jul 16, 2024 · e37c109 · e37c109
2 parents c863a78 + d1fcc14
commit e37c109
Show file tree

Hide file tree

Showing 16 changed files with 559 additions and 279 deletions.
diff --git a/...rdion/InternalShadowAccordion.stories.tsx → ...dion/InternalChevronAccordion.stories.tsx b/...rdion/InternalShadowAccordion.stories.tsx → ...dion/InternalChevronAccordion.stories.tsx
@@ -4,16 +4,16 @@ import styled from "styled-components";
 
 import { OakHandDrawnHR } from "../OakHandDrawnHR";
 
-import { InternalShadowAccordion } from "./InternalShadowAccordion";
+import { InternalChevronAccordion } from "./InternalChevronAccordion";
 
 import { OakFlex } from "@/components/atoms";
 import { PositionStyleProps } from "@/styles/utils/positionStyle";
 import { SizeStyleProps } from "@/styles/utils/sizeStyle";
 
-const meta: Meta<typeof InternalShadowAccordion> = {
-  component: InternalShadowAccordion,
+const meta: Meta<typeof InternalChevronAccordion> = {
+  component: InternalChevronAccordion,
   tags: ["autodocs"],
-  title: "components/molecules/InternalShadowAccordion",
+  title: "components/molecules/InternalChevronAccordion",
   parameters: {
     controls: {
       include: ["header", "headerAfterSlot", "children"],
@@ -37,11 +37,11 @@ const meta: Meta<typeof InternalShadowAccordion> = {
     children:
       "Any cookies required for video or other embedded learning content to work",
   },
-  render: (args) => <InternalShadowAccordion {...args} />,
+  render: (args) => <InternalChevronAccordion {...args} />,
 };
 export default meta;
 
-type Story = StoryObj<typeof InternalShadowAccordion>;
+type Story = StoryObj<typeof InternalChevronAccordion>;
 
 export const Default: Story = {};
 
@@ -54,7 +54,7 @@ const StyledHandDrawnHR = styled(OakHandDrawnHR)<
   bottom: 0.125rem;
 `;
 
-export const OutLineAccordion: Story = {
+export const OutlineAccordion: Story = {
   render: () => {
     return (
       <OakFlex
@@ -63,9 +63,9 @@ export const OutLineAccordion: Story = {
         $flexDirection={"column"}
       >
         <StyledHandDrawnHR />
-        <InternalShadowAccordion header={"Title"} id={"out-line-accordion"}>
+        <InternalChevronAccordion header={"Title"} id={"out-line-accordion"}>
           Subcopy area
-        </InternalShadowAccordion>
+        </InternalChevronAccordion>
         <StyledHandDrawnHR $position={"absolute"} $width={"100%"} />
       </OakFlex>
     );
@@ -76,14 +76,14 @@ export const OutLineAccordion: Story = {
 export const FillAccordion: Story = {
   render: () => {
     return (
-      <InternalShadowAccordion
+      <InternalChevronAccordion
         header={"Title"}
         id={"out-line-accordion"}
         $background={"bg-decorative4-very-subdued"}
         $borderRadius={"border-radius-s"}
       >
         Subcopy area
-      </InternalShadowAccordion>
+      </InternalChevronAccordion>
     );
   },
   args: {},
@@ -98,22 +98,22 @@ export const MultipleAccordions: Story = {
   render: () => {
     return (
       <>
-        <InternalShadowAccordion
+        <InternalChevronAccordion
           id="necessary-accordion"
           header="Strictly necessary"
         >
           Necessary for the website to function
-        </InternalShadowAccordion>
-        <InternalShadowAccordion
+        </InternalChevronAccordion>
+        <InternalChevronAccordion
           id="embedded-accordion"
           header="Embedded content"
         >
           Any cookies required for video or other embedded learning content to
           work
-        </InternalShadowAccordion>
-        <InternalShadowAccordion id="statistics-accordion" header="Statistics">
+        </InternalChevronAccordion>
+        <InternalChevronAccordion id="statistics-accordion" header="Statistics">
           Any cookies that may be used to track website usage
-        </InternalShadowAccordion>
+        </InternalChevronAccordion>
       </>
     );
   },

diff --git a/...ccordion/InternalShadowAccordion.test.tsx → ...cordion/InternalChevronAccordion.test.tsx b/...ccordion/InternalShadowAccordion.test.tsx → ...cordion/InternalChevronAccordion.test.tsx
@@ -3,19 +3,19 @@ import { create } from "react-test-renderer";
 import { act, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import { InternalShadowAccordion } from "./InternalShadowAccordion";
+import { InternalChevronAccordion } from "./InternalChevronAccordion";
 
 import { OakThemeProvider } from "@/components/atoms";
 import { oakDefaultTheme } from "@/styles";
 import renderWithTheme from "@/test-helpers/renderWithTheme";
 
-describe(InternalShadowAccordion, () => {
+describe(InternalChevronAccordion, () => {
   it("matches snapshot", () => {
     const tree = create(
       <OakThemeProvider theme={oakDefaultTheme}>
-        <InternalShadowAccordion initialOpen header="See more" id="see-more">
+        <InternalChevronAccordion initialOpen header="See more" id="see-more">
           Here it is
-        </InternalShadowAccordion>
+        </InternalChevronAccordion>
       </OakThemeProvider>,
     ).toJSON();
 
@@ -24,9 +24,9 @@ describe(InternalShadowAccordion, () => {
 
   it("toggles open and closed", () => {
     const { queryByRole, queryByText, getByText } = renderWithTheme(
-      <InternalShadowAccordion header="See more" id="see-more">
+      <InternalChevronAccordion header="See more" id="see-more">
         Here it is
-      </InternalShadowAccordion>,
+      </InternalChevronAccordion>,
     );
 
     expect(queryByRole("region")).not.toBeInTheDocument();

diff --git a/...adowAccordion/InternalShadowAccordion.tsx → ...ronAccordion/InternalChevronAccordion.tsx b/...adowAccordion/InternalShadowAccordion.tsx → ...ronAccordion/InternalChevronAccordion.tsx
@@ -16,7 +16,7 @@ import { FlexStyleProps, flexStyle } from "@/styles/utils/flexStyle";
 import { parseSpacing } from "@/styles/helpers/parseSpacing";
 import { ColorStyleProps } from "@/styles/utils/colorStyle";
 
-export type InternalShadowAccordionProps = {
+export type InternalChevronAccordionProps = {
   /**
    * The header of the accordion
    */
@@ -55,18 +55,14 @@ export const StyledAccordionButton = styled(
   }
 `;
 
-export const StyledAccordion = styled(InternalAccordion)<
-  OakBoxProps & FlexStyleProps
->`
+const StyledAccordion = styled(InternalAccordion)<FlexStyleProps>`
   ${StyledAccordionUnderline} {
     visibility: hidden;
   }
   ${StyledAccordionButton}:focus-visible ~ ${StyledAccordionUnderline} {
     visibility: visible;
   }
-  ${StyledAccordionButton}:active ~ ${StyledAccordionUnderline} {
-    visibility: visible;
-  }
+
   ${oakBoxCss}
   ${flexStyle}
 `;
@@ -80,7 +76,7 @@ const Accordion = ({
   children,
   id,
   ...styleProps
-}: InternalShadowAccordionProps) => {
+}: InternalChevronAccordionProps) => {
   const { isOpen } = useAccordionContext();
 
   return (
@@ -123,8 +119,8 @@ const Accordion = ({
  * other flex, box and color style proops can be passed to the accordion as props
  */
 
-export const InternalShadowAccordion = (
-  props: InternalShadowAccordionProps,
+export const InternalChevronAccordion = (
+  props: InternalChevronAccordionProps,
 ) => {
   return (
     <InternalAccordionProvider isInitialOpen={false}>

diff --git a/...s__/InternalShadowAccordion.test.tsx.snap → ...__/InternalChevronAccordion.test.tsx.snap b/...s__/InternalShadowAccordion.test.tsx.snap → ...__/InternalChevronAccordion.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InternalShadowAccordion matches snapshot 1`] = `
+exports[`InternalChevronAccordion matches snapshot 1`] = `
 .c0 {
   position: relative;
   padding-top: 0.75rem;
@@ -118,10 +118,6 @@ exports[`InternalShadowAccordion matches snapshot 1`] = `
   visibility: visible;
 }
 
-.c1 .c5:active ~ .c11 {
-  visibility: visible;
-}
-
 <div
   className="c0 c1"
 >

diff --git a/src/components/molecules/InternalChevronAccordion/index.ts b/src/components/molecules/InternalChevronAccordion/index.ts
@@ -0,0 +1 @@
+export * from "./InternalChevronAccordion";
diff --git a/src/components/molecules/InternalShadowAccordion/index.ts b/src/components/molecules/InternalShadowAccordion/index.ts
diff --git a/src/components/molecules/OakButtonAsRadioGroup/OakButtonAsRadioGroup.tsx b/src/components/molecules/OakButtonAsRadioGroup/OakButtonAsRadioGroup.tsx
@@ -37,7 +37,10 @@ export type OakButtonAsRadioGroupProps = {
   defaultValue?: string;
 } & Pick<TypographyStyleProps, "$font"> &
   ColorStyleProps &
-  Pick<FlexStyleProps, "$flexDirection" | "$alignItems" | "$gap" | "$flexWrap">;
+  Pick<
+    FlexStyleProps,
+    "$flexDirection" | "$alignItems" | "$gap" | "$flexWrap" | "$justifyContent"
+  >;
 
 /**
  *

diff --git a/src/components/molecules/OakOutlineAccordion/OakOutlineAccordion.tsx b/src/components/molecules/OakOutlineAccordion/OakOutlineAccordion.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import styled from "styled-components";
 
 import { OakHandDrawnHR } from "../OakHandDrawnHR";
-import { InternalShadowAccordion } from "../InternalShadowAccordion";
+import { InternalChevronAccordion } from "../InternalChevronAccordion";
 
 import { OakFlex } from "@/components/atoms";
 import { PositionStyleProps } from "@/styles/utils/positionStyle";
@@ -51,16 +51,16 @@ export const OakOutlineAccordion = ({
   ...styleProps
 }: OakOutlineAccordionProps) => {
   return (
-    <OakFlex $position={"relative"} $display={"flex"} $flexDirection={"column"}>
-      <StyledHandDrawnHR />
-      <InternalShadowAccordion
+    <OakFlex $position={"relative"} $flexDirection={"column"}>
+      <StyledHandDrawnHR $width={"100%"} />
+      <InternalChevronAccordion
         header={header}
         id={id}
         initialOpen={initialOpen}
         {...styleProps}
       >
         {children}
-      </InternalShadowAccordion>
+      </InternalChevronAccordion>
       <StyledHandDrawnHR $position={"absolute"} $width={"100%"} />
     </OakFlex>
   );

diff --git a/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap b/src/components/molecules/OakOutlineAccordion/__snapshots__/OakOutlineAccordion.test.tsx.snap
@@ -3,10 +3,6 @@
 exports[`OakOutlineAccordion matches snapshot 1`] = `
 .c0 {
   position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   font-family: Lexend,sans-serif;
 }
 
@@ -137,12 +133,9 @@ exports[`OakOutlineAccordion matches snapshot 1`] = `
   visibility: visible;
 }
 
-.c6 .c10:active ~ .c14 {
-  visibility: visible;
-}
-
 .c4 {
   height: 0.125rem;
+  width: 100%;
   bottom: 0.125rem;
 }
 

diff --git a/src/components/organisms/pupil/OakPupilJourneyList/OakPupilJourneyList.stories.tsx b/src/components/organisms/pupil/OakPupilJourneyList/OakPupilJourneyList.stories.tsx
@@ -12,6 +12,7 @@ import {
   OakButtonAsRadioGroup,
   OakSecondaryButtonAsRadio,
 } from "@/components/molecules";
+import { OakFlex } from "@/components/atoms/OakFlex";
 
 const meta: Meta<typeof OakPupilJourneyList> = {
   component: OakPupilJourneyList,
@@ -101,12 +102,16 @@ export const WithFilter: Story = {
         />
       }
       filterSlot={
-        <OakButtonAsRadioGroup ariaLabelledby="test" name="test">
-          <OakSecondaryButtonAsRadio value="all">All</OakSecondaryButtonAsRadio>
-          <OakSecondaryButtonAsRadio value="1">
-            Option 1
-          </OakSecondaryButtonAsRadio>
-        </OakButtonAsRadioGroup>
+        <OakFlex $justifyContent={"end"}>
+          <OakButtonAsRadioGroup ariaLabelledby="test" name="test">
+            <OakSecondaryButtonAsRadio value="all">
+              All
+            </OakSecondaryButtonAsRadio>
+            <OakSecondaryButtonAsRadio value="1">
+              Option 1
+            </OakSecondaryButtonAsRadio>
+          </OakButtonAsRadioGroup>
+        </OakFlex>
       }
     >
       <OakPupilJourneyListItem title="Lesson 1" index={1} href="#" />

diff --git a/src/components/organisms/pupil/OakPupilJourneyList/OakPupilJourneyList.tsx b/src/components/organisms/pupil/OakPupilJourneyList/OakPupilJourneyList.tsx
@@ -38,9 +38,7 @@ const Slots = ({
         </OakFlex>
 
         <OakFlex $flexDirection={"column"} $gap={"space-between-m2"}>
-          {filterSlot && (
-            <OakFlex $justifyContent={"end"}>{filterSlot}</OakFlex>
-          )}
+          {filterSlot}
           <OakFlex>{counterSlot}</OakFlex>
         </OakFlex>
       </OakFlex>

diff --git a/...ponents/organisms/pupil/OakPupilJourneyUnitsFilter/OakPupilJourneyUnitsFilter.stories.tsx b/...ponents/organisms/pupil/OakPupilJourneyUnitsFilter/OakPupilJourneyUnitsFilter.stories.tsx
@@ -3,6 +3,8 @@ import { StoryObj, Meta } from "@storybook/react";
 
 import { OakPupilJourneyUnitsFilter } from "./OakPupilJourneyUnitsFilter";
 
+import { OakFlex } from "@/components/atoms";
+
 const meta: Meta<typeof OakPupilJourneyUnitsFilter> = {
   title: "Components/organisms/pupil/OakPupilJourneyUnitsFilter",
   component: OakPupilJourneyUnitsFilter,
@@ -15,10 +17,8 @@ const meta: Meta<typeof OakPupilJourneyUnitsFilter> = {
       },
     },
     selected: {
-      description: "Selected menu item",
-      control: {
-        type: "number",
-      },
+      control: { type: "select" },
+      options: ["all", "biology", "chemistry", "physics"],
     },
     onSelected: {
       description: "Function to be called when a menu item is selected",
@@ -37,15 +37,19 @@ export default meta;
 type Story = StoryObj<typeof OakPupilJourneyUnitsFilter>;
 
 export const Default: Story = {
-  render: (args) => <OakPupilJourneyUnitsFilter {...args} />,
+  render: (args) => (
+    <OakFlex>
+      <OakPupilJourneyUnitsFilter {...args} />
+    </OakFlex>
+  ),
   args: {
     menuItems: [
-      { text: "All", id: 0 },
-      { text: "Biology", id: 1 },
-      { text: "Chemistry", id: 2 },
-      { text: "Physics", id: 3 },
+      { displayText: "All", value: "all" },
+      { displayText: "Biology", value: "biology" },
+      { displayText: "Chemistry", value: "chemistry" },
+      { displayText: "Physics", value: "physics" },
     ],
-    selected: 2,
-    onSelected: (menuItemId: number) => console.log(menuItemId),
+    selected: "all",
+    onSelected: (menuItem) => console.log(menuItem.value),
   },
 };