Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GRAV-1370] [BpkOverlay] Add video overlay style #3717

Merged
merged 8 commits into from
Jan 22, 2025
Merged

[GRAV-1370] [BpkOverlay] Add video overlay style #3717

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
efc6b38
[GRAV-1370] Add video overlay style to BpkOverlay
kirstybryce Jan 17, 2025
77e687d
[GRAV-1370] update BpkOverlay snapshot
kirstybryce Jan 20, 2025
647d817
Merge branch 'main' into GRAV-1370_add-video-overlay
kirstybryce Jan 21, 2025
f7bf08a
[GRAV-1370] update video overlays
kirstybryce Jan 21, 2025
f77fae6
Update BpkOverlay-test.tsx.snap
kirstybryce Jan 21, 2025
3022ed8
Update BpkOverlay-test.tsx.snap
kirstybryce Jan 21, 2025
01a29fb
[GRAV-1370] update example image ratio
kirstybryce Jan 21, 2025
e41843e
Merge branch 'main' into GRAV-1370_add-video-overlay
kirstybryce Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions examples/bpk-component-overlay/examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import STYLES from './examples.module.scss';

const IMAGE_SRC =
'https://content.skyscnr.com/m/1c8c6338a92a7a94/original/matt-hardy-6ArTTluciuA-unsplash.jpg';
const VIDEO_IMG_SRC =
'https://content.skyscnr.com/m/ecf210e9214ce0/original/37866_PH_20211029_001_story.jpg';

const getClassName = cssModules(STYLES);

Expand Down Expand Up @@ -198,6 +200,22 @@ const VignetteExample = () => {
);
};

const VideoOverlayExample = () => {
const overlayType = OVERLAY_TYPES.videoOverlay;
return (
<div className={getClassName('bpk-overlay-stories__overlay-story')}>
<BpkOverlay overlayType={overlayType}>
<BpkImage src={VIDEO_IMG_SRC} altText="Mountains" aspectRatio={0.6} />
</BpkOverlay>
<div className={getClassName('bpk-overlay-stories__overlay--name')}>
<BpkText textStyle={TEXT_STYLES.xl}>
{OverlayName({ overlayType })}
</BpkText>
</div>
</div>
);
};

const WithForegroundContentExample = () => (
<BpkOverlay
overlayType={OVERLAY_TYPES.solidHigh}
Expand Down Expand Up @@ -240,6 +258,7 @@ export {
LeftExamples,
RightExamples,
VignetteExample,
VideoOverlayExample,
WithForegroundContentExample,
MixedExample,
};
8 changes: 5 additions & 3 deletions examples/bpk-component-overlay/stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
BottomExamples,
LeftExamples,
RightExamples,
VideoOverlayExample,
VignetteExample,
WithForegroundContentExample,
MixedExample,
Expand All @@ -41,13 +42,14 @@ export const Bottom = BottomExamples;
export const Left = LeftExamples;
export const Right = RightExamples;
export const Vignette = VignetteExample;
export const VideoOverlay = VideoOverlayExample;

export const WithForegroundContent = WithForegroundContentExample;

export const VisualTest = MixedExample;
export const VisualTestWithZoom = {
render: VisualTest,
args: {
zoomEnabled: true
}
}
zoomEnabled: true,
},
};
10 changes: 10 additions & 0 deletions packages/bpk-component-overlay/src/BpkOverlay.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,5 +159,15 @@
&--vignette {
box-shadow: inset 0 0 50px rgba(tokens.$bpk-text-primary-day, 0.12);
}

&--video-overlay {
background: linear-gradient(
180deg,
rgba(tokens.$bpk-text-primary-day, 0.45) 0%,
rgba(tokens.$bpk-text-primary-day, 0) 40%,
rgba(tokens.$bpk-text-primary-day, 0) 60%,
rgba(tokens.$bpk-text-primary-day, 0.9) 100%
);
}
}
}
2 changes: 2 additions & 0 deletions packages/bpk-component-overlay/src/BpkOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export const OVERLAY_TYPES = {
rightMedium: 'rightMedium',
rightHigh: 'rightHigh',
vignette: 'vignette',
videoOverlay: 'videoOverlay',
off: 'off',
} as const;

Expand All @@ -61,6 +62,7 @@ const overlayTypeClassSuffixes = {
[OVERLAY_TYPES.rightMedium]: 'right-medium',
[OVERLAY_TYPES.rightHigh]: 'right-high',
[OVERLAY_TYPES.vignette]: 'vignette',
[OVERLAY_TYPES.videoOverlay]: 'video-overlay',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will need to have a videoTop and videoBottom overlay types looking at the figma design :)

Copy link
Contributor Author

@kirstybryce kirstybryce Jan 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, the reason I made it as one overlay is for 2 reasons:

  • simplicity of having one overlay used for the homepage video component instead of 2
  • since the video top overlay is only taking up 40% of the height at the top of the overlay, and the video bottom overlay is taking up 60% of the height at the bottom of the overlay, it seemed better to have a full overlay with those value since the current top/bottom overlay are taking up 100% of the height of the overlay. If I created a separate video top/bottom overlay they wouldn't be consistent with the other top/bottom overlays so it seemed better to have a separate video overlay like the vignette.

Do you think it would be better as top/bottom? Happy to change it if so :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the response!

Checking the Backpack designs and with the designers, it would be expected to be two separate types of overlay for videos :) so shouldn't ever have both the top and bottom turned on at the same time.

If we would expect that to happen, then we should talk with design to get this changed at its design level to then reflect that into the code

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok makes sense, will update :)

[OVERLAY_TYPES.off]: 'off',
} as const;

Expand Down
15 changes: 15 additions & 0 deletions packages/bpk-component-overlay/src/__snapshots__/BpkOverlay-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,21 @@ exports[`BpkOverlay should render correctly with overlayType={topMedium} 1`] = `
</DocumentFragment>
`;

exports[`BpkOverlay should render correctly with overlayType={videoOverlay} 1`] = `
<DocumentFragment>
<div
class="bpk-overlay__wrapper"
>
<span>
Backpack
</span>
<div
class="bpk-overlay__overlay bpk-overlay__overlay--video-overlay"
/>
</div>
</DocumentFragment>
`;

exports[`BpkOverlay should render correctly with overlayType={vignette} 1`] = `
<DocumentFragment>
<div
Expand Down
Loading