[QUAR-642] [BpkCardWrapper] Add more info button and body section to card wrapper #3730

kirstybryce · 2025-01-29T12:17:51Z

https://skyscanner.atlassian.net/browse/QUAR-642

Figma designs: https://www.figma.com/design/22unPHkDCzqJkd9rKzTiGY/T%26Cs-Ads?node-id=79-11694&t=MTrz7gFIDvIgP4k2-4

For the inline ads, we need to have a dropdown box for T&C in the ad card wrapper. We're currently use a custom component to do this for desktop ads, but we need to add it to mobile ads as well. Instead of duplicating the custom wrapper into the mobile web ad components, we want to use the BpkCardWrapper component instead. To use it though we need to add the more info button and dropdown body element.

`More Info`

`Less Info`

Remember to include the following changes:

github-actions · 2025-01-29T12:23:09Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

github-actions · 2025-01-29T12:25:01Z

	Warnings
⚠️	Package source files (e.g. `packages/package-name/src/Component.tsx`) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 1b29324

github-actions · 2025-01-29T12:34:50Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

github-actions · 2025-01-29T12:59:21Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

github-actions · 2025-01-29T13:11:07Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

github-actions · 2025-01-29T13:18:34Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-06T14:17:03Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-13T12:21:52Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-14T16:58:28Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-18T08:09:02Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-18T08:40:13Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-18T09:02:15Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

hir06 · 2025-02-18T10:10:43Z

Can you add screenshots for the visual changes in PR description?

packages/bpk-component-card/src/BpkCardWrapper-test.tsx

hir06 · 2025-02-18T10:19:04Z

packages/bpk-component-card/src/BpkCardWrapper.module.scss


 .bpk-card-wrapper {
+  padding: 0.1rem;


why give fixed number here? will it not impact the visual test cases of other consumers already using bpk-card-wrapper?

yes, you are right. I’ve updated the padding to use the predefined spacing token.

packages/bpk-component-card/src/BpkCardWrapper.tsx

skyscanner-backpack-bot · 2025-02-18T14:41:25Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-18T14:47:02Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

hir06

LGTM but please check for build failures and warnings and visual tests for consumer of the component

hir06

I see some design conflict with expand version of the wrapper for eg. rounded corner for the body details are not present on desktop or mobile.

skyscanner-backpack-bot · 2025-02-20T12:05:27Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

sharada1022 · 2025-02-20T12:10:43Z

LGTM but please check for build failures and warnings and visual tests for consumer of the component

All the checks has been passed and visual test is picked up by Percy to run on CI.

sharada1022 · 2025-02-20T12:43:09Z

I see some design conflict with expand version of the wrapper for eg. rounded corner for the body details are not present on desktop or mobile.

I checked with the design team, and they confirmed that we should maintain the full card look with rounded corners as long as the transition is smooth.

skyscanner-backpack-bot · 2025-02-20T15:56:50Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-20T16:28:33Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

kirstybryce

Just a small UI change needed, otherwise LGTM :)

packages/bpk-component-card/src/BpkCardWrapper.module.scss

Co-authored-by: Kirsty Bryce <[email protected]>

skyscanner-backpack-bot · 2025-02-21T12:15:02Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

skyscanner-backpack-bot · 2025-02-21T12:47:14Z

Visit https://backpack.github.io/storybook-prs/3730 to see this build running in a browser.

hir06

LGTM please check the pipeline failures.

olliecurtis · 2025-02-24T10:48:23Z

packages/bpk-component-card/src/BpkCardWrapper.module.scss

-    border-radius: 0 0 tokens.$bpk-border-radius-md tokens.$bpk-border-radius-md;
+    transition: border-radius 0.25s ease-in-out;
+    border-radius: tokens.$bpk-border-radius-md;
+    background-color: tokens.$bpk-private-info-banner-default-day;


This should not use a private component token however the same colour exists as

Suggested change

background-color: tokens.$bpk-private-info-banner-default-day;

background-color: tokens.$bpk-canvas-contrast-day;

olliecurtis · 2025-02-24T10:48:45Z

packages/bpk-component-card/src/BpkCardWrapper.module.scss

+    display: flex;
+    padding: tokens.bpk-spacing-base();
+    flex-direction: column;
+    background-color: tokens.$bpk-private-info-banner-default-day;


This should not use a private component token however the same colour exists as

Suggested change

background-color: tokens.$bpk-private-info-banner-default-day;

background-color: tokens.$bpk-canvas-contrast-day;

olliecurtis · 2025-02-24T10:50:17Z

packages/bpk-component-card/src/BpkCardWrapper.module.scss

+
+    &--link-text {
+      width: max-content;
+      color: tokens.$bpk-private-button-link-normal-foreground-day;


Suggested change

color: tokens.$bpk-private-button-link-normal-foreground-day;

color: tokens.$bpk-text-link-day;

olliecurtis · 2025-02-24T11:52:11Z

packages/bpk-component-card/src/BpkCardWrapper.tsx

@@ -31,27 +37,127 @@ type Props = {
  className?: string | null;
  backgroundColor: string;
  header: ReactNode;
+  body?: {


body as a name I think might be confusing to consumers, maybe we could call this expandContent so its clear where this would be.

wdyt?

olliecurtis · 2025-02-24T11:54:07Z

packages/bpk-component-card/src/BpkCardWrapper.tsx

  card,
  className = null,
  header,
 }: Props) => {
  const classNames = getClassName('bpk-card-wrapper', className);

-  return (
-    <CardContext.Provider value={{ elevated: false }}>
+  const [isBodyOpen, setIsBodyOpen] = useState(false);


For this I would call this

Suggested change

const [isBodyOpen, setIsBodyOpen] = useState(false);

const [isExpanded, setIsExpanded] = useState(false);

olliecurtis · 2025-02-24T11:54:20Z

packages/bpk-component-card/src/BpkCardWrapper.tsx

-  return (
-    <CardContext.Provider value={{ elevated: false }}>
+  const [isBodyOpen, setIsBodyOpen] = useState(false);
+  const bodyRef = useRef<HTMLDivElement>(null);


Suggested change

const bodyRef = useRef<HTMLDivElement>(null);

const expandRef = useRef<HTMLDivElement>(null);

olliecurtis · 2025-02-24T11:55:49Z

packages/bpk-component-card/src/BpkCardWrapper.tsx

+    </div>
+  );
+
+  const headerWithBodyDiv = body && (


I would call this expandableHeader

olliecurtis · 2025-02-24T11:56:25Z

packages/bpk-component-card/src/BpkCardWrapper.module.scss

@@ -69,4 +79,56 @@
      opacity: 1;
    }
  }
+
+  &--body {


Suggested change

&--body {

&--expand {

kirstybryce added 2 commits January 28, 2025 20:24

[QUAR-642] add more info btn to card wrapper

efbe9f3

[QUAR-642] adjust body link

fcf619b

kirstybryce changed the title ~~[QUAR-642] Add more info button and body section to card wrapper~~ [QUAR-642] [BpkCardWrapper] Add more info button and body section to card wrapper Jan 29, 2025

[QUAR-642] update toggle label

a2b6c89

[QUAR-642] add focus indicator for toggle btn

61cff20

[QUAR-642] adjust toggle btn margin

ece5251

[QUAR-642] add btn container styling

7f3ca09

olliecurtis added the minor Non breaking change label Jan 30, 2025

update test to ensure 'More Info' button expands content on click

4fa3c82

add transition effect to wrapper body

3ffe435

rename open state class and added ::after and ::before styles

75048d2

update transition effect to wrapper body

0ab256f

sharada1022 marked this pull request as ready for review February 18, 2025 08:15

lint fix in SCSS file

368b5b5

update snapshots

adaba28

hir06 reviewed Feb 18, 2025

View reviewed changes

packages/bpk-component-card/src/BpkCardWrapper-test.tsx Show resolved Hide resolved

hir06 reviewed Feb 18, 2025

View reviewed changes

packages/bpk-component-card/src/BpkCardWrapper.tsx Show resolved Hide resolved

hir06 reviewed Feb 18, 2025

View reviewed changes

packages/bpk-component-card/src/BpkCardWrapper.tsx Show resolved Hide resolved

sharada1022 added 2 commits February 18, 2025 15:35

update test case

a0a7eaf

Update padding to use spacing token

e801899

hir06 approved these changes Feb 19, 2025

View reviewed changes

hir06 requested changes Feb 19, 2025

View reviewed changes

Update inline style from 'background-color' to 'backgroundColor

9d28a74

add transition effect for expanding and collapsing More Info/Less Info

4d821f8

lint fix in SCSS file

37534f7

kirstybryce commented Feb 21, 2025

View reviewed changes

packages/bpk-component-card/src/BpkCardWrapper.module.scss Show resolved Hide resolved

Update packages/bpk-component-card/src/BpkCardWrapper.module.scss

89235c4

Co-authored-by: Kirsty Bryce <[email protected]>

lint fix in SCSS file

1b29324

hir06 approved these changes Feb 24, 2025

View reviewed changes

olliecurtis requested changes Feb 24, 2025

View reviewed changes

	background-color: tokens.$bpk-private-info-banner-default-day;
	background-color: tokens.$bpk-canvas-contrast-day;

	color: tokens.$bpk-private-button-link-normal-foreground-day;
	color: tokens.$bpk-text-link-day;

	const [isBodyOpen, setIsBodyOpen] = useState(false);
	const [isExpanded, setIsExpanded] = useState(false);

	const bodyRef = useRef<HTMLDivElement>(null);
	const expandRef = useRef<HTMLDivElement>(null);

[QUAR-642] [BpkCardWrapper] Add more info button and body section to card wrapper #3730

Are you sure you want to change the base?

[QUAR-642] [BpkCardWrapper] Add more info button and body section to card wrapper #3730

Conversation

kirstybryce commented Jan 29, 2025 • edited by sharada1022 Loading

More Info

Less Info

github-actions bot commented Jan 29, 2025

github-actions bot commented Jan 29, 2025 • edited by skyscanner-backpack-bot bot Loading

Browser support

github-actions bot commented Jan 29, 2025

github-actions bot commented Jan 29, 2025

github-actions bot commented Jan 29, 2025

github-actions bot commented Jan 29, 2025

skyscanner-backpack-bot bot commented Feb 6, 2025

skyscanner-backpack-bot bot commented Feb 13, 2025

skyscanner-backpack-bot bot commented Feb 14, 2025

skyscanner-backpack-bot bot commented Feb 18, 2025

skyscanner-backpack-bot bot commented Feb 18, 2025

skyscanner-backpack-bot bot commented Feb 18, 2025

hir06 commented Feb 18, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skyscanner-backpack-bot bot commented Feb 18, 2025

skyscanner-backpack-bot bot commented Feb 18, 2025

hir06 left a comment • edited Loading

Choose a reason for hiding this comment

hir06 left a comment

Choose a reason for hiding this comment

skyscanner-backpack-bot bot commented Feb 20, 2025

sharada1022 commented Feb 20, 2025

sharada1022 commented Feb 20, 2025

skyscanner-backpack-bot bot commented Feb 20, 2025

skyscanner-backpack-bot bot commented Feb 20, 2025

kirstybryce left a comment

Choose a reason for hiding this comment

skyscanner-backpack-bot bot commented Feb 21, 2025

skyscanner-backpack-bot bot commented Feb 21, 2025

hir06 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kirstybryce commented Jan 29, 2025 •

edited by sharada1022

Loading

`More Info`

`Less Info`

github-actions bot commented Jan 29, 2025 •

edited by skyscanner-backpack-bot bot

Loading

hir06 left a comment •

edited

Loading