From 626eb48c0f4ed54fc39ec5da8aad29825444f063 Mon Sep 17 00:00:00 2001 From: Weronika Szalas Date: Tue, 19 Nov 2024 18:14:22 +0100 Subject: [PATCH 1/5] feat: create OakMediaClipStackListItem component --- .../OakMediaClipStackListItem.stories.tsx | 36 +++ .../OakMediaClipStackListItem.test.tsx | 35 +++ .../OakMediaClipStackListItem.tsx | 110 ++++++++++ .../OakMediaClipStackListItem.test.tsx.snap | 207 ++++++++++++++++++ .../shared/OakMediaClipStackListItem/index.ts | 1 + src/components/organisms/shared/index.ts | 1 + 6 files changed, 390 insertions(+) create mode 100644 src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.stories.tsx create mode 100644 src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.test.tsx create mode 100644 src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx create mode 100644 src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap create mode 100644 src/components/organisms/shared/OakMediaClipStackListItem/index.ts diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.stories.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.stories.tsx new file mode 100644 index 00000000..2395bd61 --- /dev/null +++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.stories.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { StoryObj, Meta } from "@storybook/react"; + +import { OakMediaClipStackListItem } from "./OakMediaClipStackListItem"; + +const meta: Meta = { + title: "Components/organisms/teacher/OakMediaClipStackListItem", + component: OakMediaClipStackListItem, + tags: ["autodocs"], + argTypes: { + title: { control: "text" }, + numberOfClips: { control: "number" }, + imageUrl: { control: "text" }, + imageAltText: { control: "text" }, + }, + parameters: { + controls: { + include: ["title", "numberOfClips", "type"], + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => , + args: { + title: "Learning cycle title", + numberOfClips: 3, + imageUrl: `https://${process.env.NEXT_PUBLIC_OAK_ASSETS_HOST}/${process.env.NEXT_PUBLIC_OAK_ASSETS_PATH}/v1698336494/samples/landscapes/nature-mountains.jpg`, + imageAltText: "alt text for the image", + href: "#", + }, +}; diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.test.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.test.tsx new file mode 100644 index 00000000..b1689b61 --- /dev/null +++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.test.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { create } from "react-test-renderer"; + +import { OakMediaClipStackListItem } from "./OakMediaClipStackListItem"; + +import { OakThemeProvider } from "@/components/atoms"; +import { oakDefaultTheme } from "@/styles"; +import renderWithTheme from "@/test-helpers/renderWithTheme"; + +describe("OakMediaClipStackListItem", () => { + const props = { + title: "Learning cycle 3 videos", + href: "", + imageUrl: `https://${process.env.NEXT_PUBLIC_OAK_ASSETS_HOST}/${process.env.NEXT_PUBLIC_OAK_ASSETS_PATH}/v1698336494/samples/landscapes/nature-mountains.jpg`, + imageAltText: "alt text for the image", + numberOfClips: 5, + }; + it("renders", () => { + const { getByTestId } = renderWithTheme( + , + ); + expect(getByTestId("test")).toBeInTheDocument(); + }); + + it("matches snapshot", () => { + const tree = create( + + + , + ).toJSON(); + + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx new file mode 100644 index 00000000..c8d03ee9 --- /dev/null +++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx @@ -0,0 +1,110 @@ +import React from "react"; +import styled from "styled-components"; + +import { OakBox } from "@/components/atoms/OakBox"; +import { + OakFlex, + OakImage, + OakTypography, + OakHeading, +} from "@/components/atoms"; +import { parseBorderRadius } from "@/styles/helpers/parseBorderRadius"; +import { parseColor } from "@/styles/helpers/parseColor"; +import { parseDropShadow } from "@/styles/helpers/parseDropShadow"; + +export type OakMediaClipStackListItemProps = { + title: string; + href: string; + imageUrl: string; + imageAltText: string; + numberOfClips: number; +}; + +const OakMediaClipStackListItemLink = styled(OakFlex)` + animation-timing-function: ease-out; + transition-duration: 300ms; + + &:hover { + h5 { + text-decoration: underline; + } + } + + &:focus-visible { + outline: none; + box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")}, + ${parseDropShadow("drop-shadow-centered-grey")}; + } +`; + +const ImageStackShadow = styled(OakBox)` + box-shadow: ${parseColor("grey50")} 8px -6px; + + margin-top: 10px; + margin-right: 15px; + + img { + object-fit: fill; + } + + &:after { + content: ""; + position: absolute; + top: -6px; + left: 8px; + width: 100%; + height: 100%; + box-shadow: ${parseColor("grey40")} 7px -4px; + border-radius: ${parseBorderRadius("border-radius-s")}; + } +`; + +export const OakMediaClipStackListItem = ( + props: OakMediaClipStackListItemProps, +) => { + const { title, numberOfClips, imageUrl, imageAltText, href, ...rest } = props; + + return ( + + + + + + + + + {title} + + + {numberOfClips} {numberOfClips === 1 ? "clip" : "clips"} + + + + ); +}; + +/** + * + * OakMediaClipStackListItemLink component is a link that displays a stack of videos with a title and number of clips + * + */ diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap new file mode 100644 index 00000000..104deece --- /dev/null +++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap @@ -0,0 +1,207 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OakMediaClipStackListItem matches snapshot 1`] = ` +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-family: --var(google-font),Lexend,sans-serif; +} + +.c3 { + font-family: --var(google-font),Lexend,sans-serif; +} + +.c4 { + position: relative; + width: 7.5rem; + height: 4.5rem; + margin-bottom: 0.75rem; + border-radius: 0.25rem; + font-family: --var(google-font),Lexend,sans-serif; +} + +.c6 { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; + border-radius: 0.25rem; + font-family: --var(google-font),Lexend,sans-serif; +} + +.c9 { + color: #575757; + font-family: --var(google-font),Lexend,sans-serif; + font-weight: 300; + font-size: 0.875rem; + line-height: 1.25rem; + -webkit-letter-spacing: -0.005rem; + -moz-letter-spacing: -0.005rem; + -ms-letter-spacing: -0.005rem; + letter-spacing: -0.005rem; +} + +.c7 { + object-fit: contain; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: 0.5rem; +} + +.c8 { + font-family: --var(google-font),Lexend,sans-serif; + font-weight: 600; + font-size: 1rem; + line-height: 1.25rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; + color: #222222; +} + +.c10 { + font-family: --var(google-font),Lexend,sans-serif; + font-weight: 300; + font-size: 0.875rem; + line-height: 1.25rem; + -webkit-letter-spacing: -0.005rem; + -moz-letter-spacing: -0.005rem; + -ms-letter-spacing: -0.005rem; + letter-spacing: -0.005rem; +} + +.c2 { + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} + +.c2:hover h5 { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c2:focus-visible { + outline: none; + box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%); +} + +.c5 { + box-shadow: #808080 8px -6px; + margin-top: 10px; + margin-right: 15px; +} + +.c5 img { + object-fit: fill; +} + +.c5:after { + content: ""; + position: absolute; + top: -6px; + left: 8px; + width: 100%; + height: 100%; + box-shadow: #cacaca 7px -4px; + border-radius: 0.25rem; +} + +@media (min-width:750px) { + .c4 { + width: 11.25rem; + } +} + +@media (min-width:750px) { + .c4 { + height: 6.25rem; + } +} + +@media (min-width:750px) { + .c1 { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + } +} + +@media (min-width:750px) { + .c1 { + gap: 0rem; + } +} + + +
+
+
+ alt text for the image +
+
+
+
+
+ Learning cycle 3 videos +
+
+ 5 + + clips +
+
+ +`; diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/index.ts b/src/components/organisms/shared/OakMediaClipStackListItem/index.ts new file mode 100644 index 00000000..5c4f5b5a --- /dev/null +++ b/src/components/organisms/shared/OakMediaClipStackListItem/index.ts @@ -0,0 +1 @@ +export * from "./OakMediaClipStackListItem"; diff --git a/src/components/organisms/shared/index.ts b/src/components/organisms/shared/index.ts index 715e3cb0..3fee7e5f 100644 --- a/src/components/organisms/shared/index.ts +++ b/src/components/organisms/shared/index.ts @@ -10,3 +10,4 @@ export * from "./OakPrimaryNavItem"; export * from "./OakSubjectIcon"; export * from "./Oakinfo"; export * from "./OakinfoButton"; +export * from "./OakMediaClipStackListItem"; From 973a4357f538c86d6fc7a783400c5f17c4f53505 Mon Sep 17 00:00:00 2001 From: Weronika Szalas Date: Wed, 20 Nov 2024 11:19:35 +0100 Subject: [PATCH 2/5] feat: correct focus styles --- .../OakMediaClipStackListItem.tsx | 5 +-- .../OakMediaClipStackListItem.test.tsx.snap | 34 +++++++++++++++---- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx index c8d03ee9..e7afc4a5 100644 --- a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx +++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx @@ -71,6 +71,7 @@ export const OakMediaClipStackListItem = ( $display={"flex"} $flexDirection={["row", "column"]} $gap={["all-spacing-2", "space-between-none"]} + $width={"fit-content"} {...rest} > @@ -79,7 +80,7 @@ export const OakMediaClipStackListItem = ( $width={["all-spacing-16", "all-spacing-18"]} $height={["all-spacing-12", "all-spacing-15"]} $position={"relative"} - $mb={"space-between-xs"} + $mb={["space-between-none", "space-between-xs"]} > - + {title} diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap index 104deece..9cef7a96 100644 --- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap +++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap @@ -2,6 +2,9 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` .c0 { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -17,7 +20,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` position: relative; width: 7.5rem; height: 4.5rem; - margin-bottom: 0.75rem; + margin-bottom: 0rem; border-radius: 0.25rem; font-family: --var(google-font),Lexend,sans-serif; } @@ -31,7 +34,12 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` font-family: --var(google-font),Lexend,sans-serif; } -.c9 { +.c8 { + margin-bottom: 0rem; + font-family: --var(google-font),Lexend,sans-serif; +} + +.c10 { color: #575757; font-family: --var(google-font),Lexend,sans-serif; font-weight: 300; @@ -58,7 +66,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` gap: 0.5rem; } -.c8 { +.c9 { font-family: --var(google-font),Lexend,sans-serif; font-weight: 600; font-size: 1rem; @@ -70,7 +78,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` color: #222222; } -.c10 { +.c11 { font-family: --var(google-font),Lexend,sans-serif; font-weight: 300; font-size: 0.875rem; @@ -131,6 +139,18 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` } } +@media (min-width:750px) { + .c4 { + margin-bottom: 0.75rem; + } +} + +@media (min-width:750px) { + .c8 { + margin-bottom: 1rem; + } +} + @media (min-width:750px) { .c1 { -webkit-flex-direction: column; @@ -188,15 +208,15 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
Learning cycle 3 videos
5 From c5f0909317b5348a88afe6de2141eaa3ce6a5fa8 Mon Sep 17 00:00:00 2001 From: Weronika Szalas Date: Wed, 20 Nov 2024 13:35:37 +0100 Subject: [PATCH 3/5] feat: darken image on hover and add icon --- .../OakMediaClipStackListItem.tsx | 28 ++++++- .../OakMediaClipStackListItem.test.tsx.snap | 74 ++++++++++++++++--- src/image-map.ts | 1 + 3 files changed, 90 insertions(+), 13 deletions(-) diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx index e7afc4a5..8cd9b386 100644 --- a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx +++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx @@ -7,10 +7,12 @@ import { OakImage, OakTypography, OakHeading, + OakIcon, } from "@/components/atoms"; import { parseBorderRadius } from "@/styles/helpers/parseBorderRadius"; import { parseColor } from "@/styles/helpers/parseColor"; import { parseDropShadow } from "@/styles/helpers/parseDropShadow"; +import { parseTransitions } from "@/styles/helpers/parseTransitions"; export type OakMediaClipStackListItemProps = { title: string; @@ -21,8 +23,7 @@ export type OakMediaClipStackListItemProps = { }; const OakMediaClipStackListItemLink = styled(OakFlex)` - animation-timing-function: ease-out; - transition-duration: 300ms; + transition: ${parseTransitions("standard-ease")}; &:hover { h5 { @@ -35,6 +36,14 @@ const OakMediaClipStackListItemLink = styled(OakFlex)` box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")}, ${parseDropShadow("drop-shadow-centered-grey")}; } + + &:hover, + &:focus-visible { + img { + -webkit-filter: brightness(80%); + transition: ${parseTransitions("standard-ease")}; + } + } `; const ImageStackShadow = styled(OakBox)` @@ -45,6 +54,7 @@ const ImageStackShadow = styled(OakBox)` img { object-fit: fill; + -webkit-filter: brightness(100%); } &:after { @@ -57,6 +67,14 @@ const ImageStackShadow = styled(OakBox)` box-shadow: ${parseColor("grey40")} 7px -4px; border-radius: ${parseBorderRadius("border-radius-s")}; } + + #play-icon { + position: absolute; + left: 50%; + top: 50%; + margin-left: -16px; + margin-top: -16px; + } `; export const OakMediaClipStackListItem = ( @@ -90,6 +108,12 @@ export const OakMediaClipStackListItem = ( $width={"100%"} $height={"100%"} /> + diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap index 9cef7a96..9f56fc4a 100644 --- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap +++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap @@ -35,11 +35,20 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` } .c8 { + position: relative; + width: 2rem; + min-width: 2rem; + height: 2rem; + min-height: 2rem; + font-family: --var(google-font),Lexend,sans-serif; +} + +.c9 { margin-bottom: 0rem; font-family: --var(google-font),Lexend,sans-serif; } -.c10 { +.c11 { color: #575757; font-family: --var(google-font),Lexend,sans-serif; font-weight: 300; @@ -66,7 +75,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` gap: 0.5rem; } -.c9 { +.c10 { font-family: --var(google-font),Lexend,sans-serif; font-weight: 600; font-size: 1rem; @@ -78,7 +87,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` color: #222222; } -.c11 { +.c12 { font-family: --var(google-font),Lexend,sans-serif; font-weight: 300; font-size: 0.875rem; @@ -90,10 +99,8 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` } .c2 { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transition-duration: 300ms; - transition-duration: 300ms; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; } .c2:hover h5 { @@ -106,6 +113,13 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%); } +.c2:hover img, +.c2:focus-visible img { + -webkit-filter: brightness(80%); + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; +} + .c5 { box-shadow: #808080 8px -6px; margin-top: 10px; @@ -114,6 +128,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` .c5 img { object-fit: fill; + -webkit-filter: brightness(100%); } .c5:after { @@ -127,6 +142,14 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` border-radius: 0.25rem; } +.c5 #play-icon { + position: absolute; + left: 50%; + top: 50%; + margin-left: -16px; + margin-top: -16px; +} + @media (min-width:750px) { .c4 { width: 11.25rem; @@ -146,7 +169,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` } @media (min-width:750px) { - .c8 { + .c9 { margin-bottom: 1rem; } } @@ -205,18 +228,47 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` } />
+
+ play +
Learning cycle 3 videos
5 diff --git a/src/image-map.ts b/src/image-map.ts index 61381720..7e8f00a1 100644 --- a/src/image-map.ts +++ b/src/image-map.ts @@ -60,6 +60,7 @@ export const icons = { "teacher-unit": "icons/teacher-unit.svg", "move-arrows": "v1709052869/icons/hoddjsgpzkszgvnmn91q.svg", info: "v1709052869/icons/Icon_Info_vsx3xi.svg", + play: "v1732099511/icons/g1xehzuhjnb0xeftmdno.svg", "subject-art": "subject-icons/art.svg", "subject-biology": "subject-icons/biology.svg", "subject-chemistry": "subject-icons/chemistry.svg", From 443aae7d85e04b22feb1cf7f7ad576ce563678ae Mon Sep 17 00:00:00 2001 From: Weronika Szalas Date: Wed, 20 Nov 2024 13:41:20 +0100 Subject: [PATCH 4/5] feat: update snapshots after merging main into this branch --- .../__snapshots__/OakMediaClipStackListItem.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap index 9f56fc4a..c8845802 100644 --- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap +++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap @@ -32,6 +32,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` height: 100%; border-radius: 0.25rem; font-family: --var(google-font),Lexend,sans-serif; + overflow: hidden; } .c8 { From 47373bf008bef883d112f92431cfb5c1e40945f2 Mon Sep 17 00:00:00 2001 From: Weronika Szalas Date: Wed, 20 Nov 2024 14:25:47 +0100 Subject: [PATCH 5/5] feat: update the size of image on mobile --- .../OakMediaClipStackListItem.tsx | 17 ++++++++++++++--- .../OakMediaClipStackListItem.test.tsx.snap | 18 +++++++++++++++--- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx index 8cd9b386..33f9510d 100644 --- a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx +++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx @@ -13,6 +13,7 @@ import { parseBorderRadius } from "@/styles/helpers/parseBorderRadius"; import { parseColor } from "@/styles/helpers/parseColor"; import { parseDropShadow } from "@/styles/helpers/parseDropShadow"; import { parseTransitions } from "@/styles/helpers/parseTransitions"; +import { getMediaQuery } from "@/styles/utils/responsiveStyle"; export type OakMediaClipStackListItemProps = { title: string; @@ -57,7 +58,7 @@ const ImageStackShadow = styled(OakBox)` -webkit-filter: brightness(100%); } - &:after { + &::after { content: ""; position: absolute; top: -6px; @@ -68,6 +69,16 @@ const ImageStackShadow = styled(OakBox)` border-radius: ${parseBorderRadius("border-radius-s")}; } + @media ${getMediaQuery("mobile")} { + box-shadow: ${parseColor("grey50")} 4px -3px; + + &::after { + top: -3px; + left: 4px; + box-shadow: ${parseColor("grey40")} 4px -3px; + } + } + #play-icon { position: absolute; left: 50%; @@ -95,8 +106,8 @@ export const OakMediaClipStackListItem = ( diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap index c8845802..a8cf483a 100644 --- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap +++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap @@ -18,8 +18,8 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` .c4 { position: relative; - width: 7.5rem; - height: 4.5rem; + width: 6.25rem; + height: 4rem; margin-bottom: 0rem; border-radius: 0.25rem; font-family: --var(google-font),Lexend,sans-serif; @@ -132,7 +132,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` -webkit-filter: brightness(100%); } -.c5:after { +.c5::after { content: ""; position: absolute; top: -6px; @@ -189,6 +189,18 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = ` } } +@media (max-width:749px) { + .c5 { + box-shadow: #808080 4px -3px; + } + + .c5::after { + top: -3px; + left: 4px; + box-shadow: #cacaca 4px -3px; + } +} +