Skip to content

Commit

Permalink
Merge pull request #152 from oaknational/feat/add-all-subject-icons
Browse files Browse the repository at this point in the history 
Feat/add all subject icons -  LESQ-788
  • Loading branch information
@JBR90
JBR90 authored Apr 25, 2024
2 parents 1c6f02c + 86bc1c9 commit cbac773
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 65 deletions.
15 changes: 15 additions & 0 deletions src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,18 @@ export const Default: Story = {
},
},
};

export const NoIcon: Story = {
render: (args) => <OakSearchFilterCheckBox {...args} />,
args: {
id: "checkbox-test-default",
value: "a test value",
displayValue: "Art and design",
"aria-label": "Art and design",
},
parameters: {
controls: {
include: ["disabled", "defaultChecked", "displayValue", "value", "icon"],
},
},
};
22 changes: 11 additions & 11 deletions src/components/organisms/teacher/OakSearchFilterCheckBox/OakSearchFilterCheckBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ export type OakSearchFilterCheckBoxProps = Omit<
> & {
innerRef?: React.RefObject<HTMLInputElement>;
displayValue: string;
icon: OakIconName;
icon?: OakIconName;
};

/**
* A checkbox for search filters.
*
* Takes a displayValue and icon name, for subject icons 'subject-[subjectSlug]' should be used.
* Takes a displayValue and optional icon, for subject icons 'subject-[subjectSlug]' should be used.
*
* ## Events
* The following callbacks are available for tracking focus events:
Expand Down Expand Up @@ -125,7 +125,7 @@ export const OakSearchFilterCheckBox = (
};

return (
<OakFlex $width={"100%"} $position={"relative"}>
<OakFlex $minHeight={"all-spacing-8"} $position={"relative"}>
<StyledFlexBox
$borderRadius={"border-radius-s"}
$borderColor={"border-neutral-lighter"}
Expand All @@ -136,20 +136,20 @@ export const OakSearchFilterCheckBox = (
$pv={"inner-padding-ssx"}
$gap={"space-between-sssx"}
>
<StyledInternalCheckBox
id={id}
value={value}
disabled={disabled}
ref={inputRef}
{...rest}
/>
{icon && <StyledOakIcon iconName={icon} />}
<InternalCheckBoxLabelHoverDecor
pointerEvents="none"
htmlFor={id}
$font={"heading-7"}
disabled={disabled}
>
<StyledInternalCheckBox
id={id}
value={value}
disabled={disabled}
ref={inputRef}
{...rest}
/>
<StyledOakIcon iconName={icon} />
{displayValue}
</InternalCheckBoxLabelHoverDecor>
</StyledFlexBox>
Expand Down
108 changes: 54 additions & 54 deletions ...nisms/teacher/OakSearchFilterCheckBox/__snapshots__/OaKSearchFilterCheckBox.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
[
.c0 {
position: relative;
width: 100%;
min-height: 2.5rem;
font-family: Lexend,sans-serif;
}
Expand All @@ -24,7 +24,7 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
cursor: pointer;
}
.c11 {
.c7 {
position: relative;
width: 2rem;
min-width: 2rem;
Expand All @@ -48,11 +48,11 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
gap: 0.25rem;
}
.c12 {
.c8 {
object-fit: contain;
}
.c6 {
.c10 {
font-family: Lexend,sans-serif;
font-weight: 600;
font-size: 1rem;
Expand All @@ -63,7 +63,7 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
letter-spacing: 0.0115rem;
}
.c7 {
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -74,12 +74,12 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
align-items: center;
}
.c8 {
.c12 {
pointer-events: none;
cursor: pointer;
}
.c9 {
.c5 {
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
Expand All @@ -92,26 +92,26 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
border-radius: 0.125rem;
}
.c9:checked {
.c5:checked {
background: #222222;
}
.c9:disabled {
.c5:disabled {
pointer-events: none;
}
.c10 {
.c6 {
position: absolute;
opacity: 0;
pointer-events: none;
}
.c10:checked:not(:disabled) {
.c6:checked:not(:disabled) {
border: 0.188rem solid;
border-color: #222222;
}
.c10:checked:disabled {
.c6:checked:disabled {
border: 0.188rem solid;
border-color: #808080;
}
Expand All @@ -125,26 +125,26 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
cursor: none;
}
.c4:hover:has(input:not(:disabled)) .c5 {
.c4:hover:has(input:not(:disabled)) .c9 {
-webkit-text-decoration: underline;
text-decoration: underline;
}
@media (hover:hover) {
.c8:hover {
.c12:hover {
-webkit-text-decoration: underline;
text-decoration: underline;
}
}
@media (hover:hover) {
.c9:hover:not(:disabled) {
.c5:hover:not(:disabled) {
border-color: #222222;
}
}
@media (hover:hover) {
.c10:hover:not(:disabled) {
.c6:hover:not(:disabled) {
background: #ffffff;
}
}
Expand All @@ -171,48 +171,48 @@ exports[`OakSearchFilterCheckBox matches snapshot 1`] = `
className="c2 c3 c4"
onClick={[Function]}
>
<input
className="c5 c6"
id="checkbox-1"
name="checkbox-1"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
type="checkbox"
value="Option 1"
/>
<div
className="c7 "
>
<img
alt="subject-history"
className="c8"
data-nimg="fill"
decoding="async"
loading="lazy"
onError={[Function]}
onLoad={[Function]}
src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/subject-icons/history.svg"
style={
{
"bottom": 0,
"color": "transparent",
"height": "100%",
"left": 0,
"objectFit": undefined,
"objectPosition": undefined,
"position": "absolute",
"right": 0,
"top": 0,
"width": "100%",
}
}
/>
</div>
<label
className="c5 c6 c7 c8"
className="c9 c10 c11 c12"
htmlFor="checkbox-1"
pointerEvents="none"
>
<input
className="c9 c10"
id="checkbox-1"
name="checkbox-1"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
type="checkbox"
value="Option 1"
/>
<div
className="c11 "
>
<img
alt="subject-history"
className="c12"
data-nimg="fill"
decoding="async"
loading="lazy"
onError={[Function]}
onLoad={[Function]}
src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/subject-icons/history.svg"
style={
{
"bottom": 0,
"color": "transparent",
"height": "100%",
"left": 0,
"objectFit": undefined,
"objectPosition": undefined,
"position": "absolute",
"right": 0,
"top": 0,
"width": "100%",
}
}
/>
</div>
Option 1
</label>
</div>
Expand Down
16 changes: 16 additions & 0 deletions src/image-map.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,14 @@ export const icons = {
"subject-biology": "subject-icons/biology.svg",
"subject-chemistry": "subject-icons/chemistry.svg",
"subject-citizenship": "subject-icons/citizenship.svg",
"subject-gcse-citizenship": "subject-icons/citizenship.svg",
"subject-core-citizenship": "subject-icons/citizenship.svg",
"subject-combined-science": "subject-icons/science.svg",
"subject-communication-and-language":
"subject-icons/communication-and-language.svg",
"subject-computing": "subject-icons/computing.svg",
"subject-computer-science": "subject-icons/computing.svg",
"subject-core-computing": "subject-icons/computing.svg",
"subject-computing-non-gcse": "subject-icons/computing.svg",
"subject-creative-arts": "subject-icons/creative-arts.svg",
"subject-design-technology": "subject-icons/design-technology.svg",
Expand All @@ -65,28 +69,40 @@ 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-french": "subject-icons/french.svg",
"subject-geography": "subject-icons/geography.svg",
"subject-german": "subject-icons/german.svg",
"subject-history": "subject-icons/history.svg",
"subject-independent-living": "subject-icons/independent-living.svg",
"subject-latin": "subject-icons/latin.svg",
"subject-literacy": "subject-icons/english.svg",
"subject-maths": "subject-icons/maths.svg",
"subject-music": "subject-icons/music-hollow.svg",
"subject-numeracy": "subject-icons/numeracy.svg",
"occupational-therapy": "subject-icons/therapy.svg",
"subject-personal-social-and-emotional-development":
"subject-icons/rshe-pshe.svg",
"subject-physical-development": "subject-icons/physical-development.svg",
"subject-physical-education": "subject-icons/physical-education.svg",
"subject-core-physical-education": "subject-icons/physical-education.svg",
"subject-gcse-physical-education": "subject-icons/physical-education.svg",
"subject-physical-therapy": "subject-icons/physical-therapy.svg",
"subject-physics": "subject-icons/physics.svg",
"subject-religious-education": "subject-icons/religious-education.svg",
"subject-core-religious-education": "subject-icons/religious-education.svg",
"subject-gcse-religious-education": "subject-icons/religious-education.svg",
"subject-rshe-pshe": "subject-icons/rshe-pshe.svg",
"subject-rshe": "subject-icons/rshe-pshe.svg",
"subject-science": "subject-icons/science.svg",
"subject-sensory-integration": "subject-icons/sensory-integration.svg",
"subject-spanish": "subject-icons/spanish.svg",
"subject-speech-and-language-therapy":
"subject-icons/speech-and-language.svg",
"subject-specialist": "subject-icons/communication-and-language.svg",
"subject-therapy": "subject-icons/therapy.svg",
"subject-therapies": "subject-icons/therapy.svg",
"subject-occupational-therapy": "subject-icons/therapy.svg",
"subject-understanding-the-world":
"subject-icons/understanding-the-world.svg",
} as const;
Expand Down

0 comments on commit cbac773

Please sign in to comment.