diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx b/src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx index bbeea8f3..d3eb9e77 100644 --- 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) => , + 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 index 502482dd..30222efa 100644 --- 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; displayValue: string; icon?: OakIconName; + keepIconColor?: boolean; }; /** diff --git a/src/components/organisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap b/src/components/organisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap index d3458e4a..15c1dd9c 100644 --- a/src/components/organisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap +++ b/src/components/organisms/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; - } -} -
diff --git a/src/image-map.ts b/src/image-map.ts index 69230495..7042d708 100644 --- 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",