Merge pull request #153 from oaknational/feat/add-all-subject-icons

Feat/add all subject icons
oaknational · Apr 26, 2024 · d8ff90d · d8ff90d
2 parents aebd926 + 9e7c553
commit d8ff90d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 40 deletions.
diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx b/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx
@@ -50,3 +50,20 @@ export const NoIcon: Story = {
     },
   },
 };
+
+export const KeepIconColor: Story = {
+  render: (args) => <OakSearchFilterCheckBox {...args} />,
+  args: {
+    id: "checkbox-test-default",
+    value: "a test value",
+    displayValue: "Lessons",
+    "aria-label": "Art and design",
+    icon: "teacher-unit",
+    keepIconColor: true,
+  },
+  parameters: {
+    controls: {
+      include: ["disabled", "defaultChecked", "displayValue", "value", "icon"],
+    },
+  },
+};
diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.tsx b/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.tsx
@@ -15,13 +15,16 @@ import { parseColorFilter } from "@/styles/helpers/parseColorFilter";
 // Converted to styled-component so it can be used in '&:checked:not(:disabled) + ${StyledOakIcon}' to change svg color.
 const StyledOakIcon = styled(OakIcon)``;
 
-const StyledInternalCheckBox = styled(InternalCheckBox)`
+const StyledInternalCheckBox = styled(InternalCheckBox)<{
+  keepIconColor?: boolean;
+}>`
   position: absolute;
   opacity: 0;
   pointer-events: none;
 
   &:checked:not(:disabled) + ${StyledOakIcon} {
-    filter: ${parseColorFilter("white")};
+    filter: ${(props) =>
+      props.keepIconColor ? "none" : parseColorFilter("white")};
   }
 
   &:checked:not(:disabled) {
@@ -34,10 +37,8 @@ const StyledInternalCheckBox = styled(InternalCheckBox)`
     border-color: ${parseColor("text-disabled")};
   }
 
-  @media (hover: hover) {
-    &:hover:not(:disabled) {
-      background: ${parseColor("bg-primary")};
-    }
+  &:hover:not(:disabled) {
+    background: ${parseColor("bg-primary")};
   }
 `;
 
@@ -55,20 +56,18 @@ const StyledFlexBox = styled(OakFlex)`
     text-decoration: underline;
   }
 
-  @media (hover: hover) {
-    &:hover:has(input:not(:disabled)) {
-      background-color: ${parseColor("bg-neutral")};
-    }
+  &:hover:has(input:not(:disabled)) {
+    background-color: ${parseColor("bg-neutral")};
+  }
 
-    &:focus-within {
-      box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
-        ${parseDropShadow("drop-shadow-centered-grey")};
-    }
+  &:focus-within {
+    box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
+      ${parseDropShadow("drop-shadow-centered-grey")};
+  }
 
-    &:has(input:checked:not(:disabled)) {
-      background-color: ${parseColor("black")};
-      color: ${parseColor("white")};
-    }
+  &:has(input:checked:not(:disabled)) {
+    background-color: ${parseColor("black")};
+    color: ${parseColor("white")};
   }
 `;
 
@@ -79,6 +78,7 @@ export type OakSearchFilterCheckBoxProps = Omit<
   innerRef?: React.RefObject<HTMLInputElement>;
   displayValue: string;
   icon?: OakIconName;
+  keepIconColor?: boolean;
 };
 
 /**

diff --git a/...nisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap b/...nisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap
@@ -116,6 +116,10 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
   border-color: #808080;
 }
 
+.c6:hover:not(:disabled) {
+  background: #ffffff;
+}
+
 .c4:has(input:not(:disabled)) {
   cursor: pointer;
 }
@@ -130,6 +134,19 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
   text-decoration: underline;
 }
 
+.c4:hover:has(input:not(:disabled)) {
+  background-color: #f2f2f2;
+}
+
+.c4:focus-within {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
+.c4:has(input:checked:not(:disabled)) {
+  background-color: #222222;
+  color: #ffffff;
+}
+
 @media (hover:hover) {
   .c12:hover {
     -webkit-text-decoration: underline;
@@ -143,27 +160,6 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
   }
 }
 
-@media (hover:hover) {
-  .c6:hover:not(:disabled) {
-    background: #ffffff;
-  }
-}
-
-@media (hover:hover) {
-  .c4:hover:has(input:not(:disabled)) {
-    background-color: #f2f2f2;
-  }
-
-  .c4:focus-within {
-    box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
-  }
-
-  .c4:has(input:checked:not(:disabled)) {
-    background-color: #222222;
-    color: #ffffff;
-  }
-}
-
 <div
     className="c0 c1"
   >

diff --git a/src/image-map.ts b/src/image-map.ts
@@ -48,6 +48,8 @@ export const icons = {
   quiz: "v1705416077/icons/kaaizjcudy0jfgfrrdel.svg",
   video: "v1705416078/icons/wzey1zfxrvv3apeebbf5.svg",
   intro: "v1705662092/icons/pl7bnmb13txese9yxkjv.svg",
+  "teacher-lesson": "icons/teacher-lesson.svg",
+  "teacher-unit": "icons/teacher-unit.svg",
   "move-arrows": "v1709052869/icons/hoddjsgpzkszgvnmn91q.svg",
   "subject-art": "subject-icons/art.svg",
   "subject-biology": "subject-icons/biology.svg",
@@ -69,7 +71,7 @@ export const icons = {
   "subject-english-grammar": "subject-icons/english-grammar.svg",
   "subject-english-reading-for-pleasure": "subject-icons/literature.svg",
   "subject-english-spelling": "subject-icons/english-spelling.svg",
-  "expressive-arts-and-design": "subject-icons/creative-arts.svg",
+  "subject-expressive-arts-and-design": "subject-icons/creative-arts.svg",
   "subject-french": "subject-icons/french.svg",
   "subject-geography": "subject-icons/geography.svg",
   "subject-german": "subject-icons/german.svg",