Merge branch 'main' into feat/pupil-672/oak-pupil-year-browse-button

oaknational · May 2, 2024 · 3b9b5f7 · 3b9b5f7
2 parents da3070b + 73440f1
commit 3b9b5f7
Show file tree

Hide file tree

Showing 13 changed files with 668 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "0.16.1",
+  "version": "0.20.0",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",

diff --git a/src/components/atoms/InternalCheckBoxLabel/InternalCheckBoxLabel.tsx b/src/components/atoms/InternalCheckBoxLabel/InternalCheckBoxLabel.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { CSSProperties } from "styled-components";
 
 import { OakLabel, OakLabelProps } from "@/components/atoms";
 import { responsiveStyle } from "@/styles/utils/responsiveStyle";
@@ -9,6 +9,7 @@ export type InternalCheckBoxLabelProps = {
   labelAlignItems?: FlexStyleProps["$alignItems"];
   labelGap?: FlexStyleProps["$gap"];
   disabled?: boolean;
+  pointerEvents?: CSSProperties["pointerEvents"];
   "data-testid"?: string;
 } & OakLabelProps;
 
@@ -27,14 +28,10 @@ export const InternalCheckBoxLabel = styled(
 `;
 
 export const InternalCheckBoxLabelHoverDecor = styled(InternalCheckBoxLabel)`
-  ${(props) =>
-    props.disabled
-      ? css`
-          pointer-events: none;
-        `
-      : css`
-          cursor: pointer;
-        `}
+  ${(props) => `
+    ${props.pointerEvents ? `pointer-events: ${props.pointerEvents};` : ""}
+    ${props.disabled ? `pointer-events: none;` : `cursor: pointer;`}
+  `}
   @media (hover: hover) {
     &:hover {
       text-decoration: ${(props) => (props.disabled ? "none" : "underline")};

diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
@@ -1,4 +1,5 @@
 export * from "./pupil";
+export * from "./teacher";
 export * from "./OakSubjectIcon";
 export * from "./OakPrimaryNavItem";
 export * from "./OakPrimaryNav";

diff --git a/src/components/organisms/pupil/OakQuizCheckBox/OakQuizCheckBox.tsx b/src/components/organisms/pupil/OakQuizCheckBox/OakQuizCheckBox.tsx
@@ -32,12 +32,6 @@ const StyledInternalCheckBox = styled(InternalCheckBox)`
   }
 `;
 
-const StyledInternalCheckBoxLabelHoverDecor = styled(
-  InternalCheckBoxLabelHoverDecor,
-)`
-  pointer-events: none; // To prevent the label from stealing the click event from the input
-`;
-
 type StyledFlexBoxProps = OakFlexProps & {
   $overlayBorderColor: OakCombinedColorToken;
   $feedbackBgColor?: OakCombinedColorToken;
@@ -69,7 +63,7 @@ const StyledFlexBox = styled(OakFlex)<StyledFlexBoxProps>`
   }
 
   @media (hover: hover) {
-    &:hover:has(input:not(:disabled)){
+    &:hover:has(input:not(:disabled)) {
       background-color: ${parseColor("bg-decorative1-subdued")};
     }
 
@@ -82,7 +76,8 @@ const StyledFlexBox = styled(OakFlex)<StyledFlexBoxProps>`
     }
 
     &:hover:has(
-        ${InternalCheckBoxLabelHoverDecor} input:not(:focus-visible):not(:checked):not(:disabled)
+        ${InternalCheckBoxLabelHoverDecor}
+          input:not(:focus-visible):not(:checked):not(:disabled)
       )::after {
       content: "";
       inset: 0;
@@ -96,31 +91,32 @@ const StyledFlexBox = styled(OakFlex)<StyledFlexBoxProps>`
       box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
         ${parseDropShadow("drop-shadow-centered-grey")};
     }
-    
+
     &:has(input:checked:not(:disabled)) {
       outline: ${parseBorder("border-solid-xl")};
-   }
+    }
 
-   &:has(input:checked:disabled) {
-    outline-color: ${(props) => css`
-      ${parseColor(props.$overlayBorderColor)}
-    `};
-  }
+    &:has(input:checked:disabled) {
+      outline-color: ${(props) => css`
+        ${parseColor(props.$overlayBorderColor)}
+      `};
+    }
 
-  &:has(input:disabled:not(:checked)) {
-     ${(props) =>
-       props.$feedbackBgColor
-         ? css`
-             background-color: ${props.$feedbackBgColor};
-           `
-         : undefined}
-  }
+    &:has(input:disabled:not(:checked)) {
+      ${(props) =>
+        props.$feedbackBgColor
+          ? css`
+              background-color: ${props.$feedbackBgColor};
+            `
+          : undefined}
+    }
 
-  &:has(input:disabled:checked) {
-    ${(props) => css`
-      background-color: ${parseColor(props.$feedbackBgColor)};
-    `};
- }
+    &:has(input:disabled:checked) {
+      ${(props) => css`
+        background-color: ${parseColor(props.$feedbackBgColor)};
+      `};
+    }
+  }
 `;
 
 export type OakQuizCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
@@ -204,7 +200,8 @@ export const OakQuizCheckBox = (props: OakQuizCheckBoxProps) => {
         isHighlighted ? "border-decorative5-stronger" : "transparent"
       }
     >
-      <StyledInternalCheckBoxLabelHoverDecor
+      <InternalCheckBoxLabelHoverDecor
+        pointerEvents="none"
         htmlFor={id}
         labelGap={"space-between-s"}
         labelAlignItems={"center"}
@@ -249,7 +246,7 @@ export const OakQuizCheckBox = (props: OakQuizCheckBoxProps) => {
           }
         />
         {image ? imageContainer : displayValue}
-      </StyledInternalCheckBoxLabelHoverDecor>
+      </InternalCheckBoxLabelHoverDecor>
       {isFeedback && (showTick || showCross) && (
         <OakFlex
           className="feedbackIconWrapper"

diff --git a/src/components/organisms/pupil/OakQuizCheckBox/__snapshots__/OakQuizCheckBox.test.tsx.snap b/src/components/organisms/pupil/OakQuizCheckBox/__snapshots__/OakQuizCheckBox.test.tsx.snap
@@ -20,14 +20,14 @@ exports[`OakQuizCheckBox matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c10 {
+.c9 {
   position: relative;
   width: 2rem;
   height: 2rem;
   font-family: Lexend,sans-serif;
 }
 
-.c14 {
+.c13 {
   position: absolute;
   top: 0rem;
   left: 0rem;
@@ -37,14 +37,14 @@ exports[`OakQuizCheckBox matches snapshot 1`] = `
   font-family: Lexend,sans-serif;
 }
 
-.c16 {
+.c15 {
   width: 100%;
   height: 100%;
   background: #222222;
   font-family: Lexend,sans-serif;
 }
 
-.c17 {
+.c16 {
   width: 100%;
   height: 100%;
   border: 0.125rem solid;
@@ -82,12 +82,12 @@ exports[`OakQuizCheckBox matches snapshot 1`] = `
   color: #222222;
 }
 
-.c15 {
+.c14 {
   pointer-events: none;
   opacity: 0;
 }
 
-input:checked + .c13 {
+input:checked + .c12 {
   opacity: 1;
 }
 
@@ -108,10 +108,11 @@ input:checked + .c13 {
 }
 
 .c8 {
+  pointer-events: none;
   cursor: pointer;
 }
 
-.c11 {
+.c10 {
   -webkit-appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -127,24 +128,20 @@ input:checked + .c13 {
   height: 2rem;
 }
 
-.c11:disabled {
+.c10:disabled {
   pointer-events: none;
 }
 
-.c12:checked:not(:disabled) {
+.c11:checked:not(:disabled) {
   border: 0.188rem solid;
   border-color: #222222;
 }
 
-.c12:checked:disabled {
+.c11:checked:disabled {
   border: 0.188rem solid;
   border-color: #808080;
 }
 
-.c9 {
-  pointer-events: none;
-}
-
 .c4:not(:focus-within) {
   outline: 0.25rem solid transparent;
 }
@@ -174,7 +171,7 @@ input:checked + .c13 {
 }
 
 @media (hover:hover) {
-  .c12:hover:not(:disabled) {
+  .c11:hover:not(:disabled) {
     background: #ffffff;
   }
 }
@@ -223,14 +220,15 @@ input:checked + .c13 {
       onClick={[Function]}
     >
       <label
-        className="c5 c6 c7 c8 c9"
+        className="c5 c6 c7 c8"
         htmlFor="checkbox-1"
+        pointerEvents="none"
       >
         <div
-          className="c10"
+          className="c9"
         >
           <input
-            className="c11 c12"
+            className="c10 c11"
             disabled={false}
             id="checkbox-1"
             name="checkbox-1"
@@ -240,13 +238,13 @@ input:checked + .c13 {
             value="Option 1"
           />
           <div
-            className="c13 c14 c15"
+            className="c12 c13 c14"
           >
             <div
-              className="c16"
+              className="c15"
             >
               <div
-                className="c17"
+                className="c16"
               />
             </div>
           </div>