diff --git a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored-test.tsx b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored-test.tsx index f66fa23cbc..73b21e2dad 100644 --- a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored-test.tsx +++ b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored-test.tsx @@ -111,7 +111,7 @@ describe('BpkInsetBanner', () => { expect(screen.getByText('Consectetur adipiscing elit')).toBeInTheDocument(); }); - it('should not render an info icon when there is only one item in bottom sheet content', () => { + it('should not render view or info icons in bottom sheet items', () => { render( { text: 'Sponsored', bottomSheetContent: [ { - title: 'Single item title', - description: 'Single item description', - } + title: 'First item title', + description: 'First item description', + }, + { + title: 'Second item title', + description: 'Second item description', + }, + ], + bottomSheetTitle: 'About this advert', + buttonCloseLabel: 'Close', + }} + backgroundColor="#FFE300" + variant={VARIANT.onLight} + accessibilityLabel="Sponsored by Skyscanner" + />, + ); + + const ctaButton = screen.getByTestId('ctaBtn'); + fireEvent.click(ctaButton); + + expect(screen.queryByTestId('view-icon')).not.toBeInTheDocument(); + expect(screen.queryByTestId('info-icon')).not.toBeInTheDocument(); + expect(screen.queryByTestId('bottom-sheet-icon-container')).not.toBeInTheDocument(); + }); + + it('should render a title-less first item followed by titled sections (DSA shape)', () => { + render( + { const ctaButton = screen.getByTestId('ctaBtn'); fireEvent.click(ctaButton); - const infoIconContainers = screen.getAllByTestId('bottom-sheet-icon-container'); - expect(infoIconContainers.length).toBe(1); - expect(screen.getByTestId('view-icon')).toBeInTheDocument(); + expect(screen.getByText('This advert was shown because you searched for flights.')).toBeInTheDocument(); + expect(screen.getByText('Based on your current search')).toBeInTheDocument(); + expect(screen.getByText('Based on your past activity')).toBeInTheDocument(); + expect(screen.queryByTestId('view-icon')).not.toBeInTheDocument(); expect(screen.queryByTestId('info-icon')).not.toBeInTheDocument(); }); }); diff --git a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.module.scss b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.module.scss index 671b86467a..88d9ba8837 100644 --- a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.module.scss +++ b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.module.scss @@ -109,23 +109,17 @@ &--bottom-sheet-content { display: flex; - padding-bottom: tokens.bpk-spacing-xl(); + padding-bottom: tokens.bpk-spacing-base(); flex-direction: row; } - &--bottom-sheet-icon { - display: flex; - fill: tokens.$bpk-font-color-base; - margin-inline-end: tokens.bpk-spacing-lg(); - } - &--bottom-sheet-text { display: flex; flex-direction: column; } &--bottom-sheet-title { - margin-bottom: tokens.bpk-spacing-md(); + margin-bottom: tokens.bpk-spacing-sm(); color: tokens.$bpk-text-on-light-day; } diff --git a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.stories.tsx b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.stories.tsx index 8060dbaed7..a3f2b63cfc 100644 --- a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.stories.tsx +++ b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.stories.tsx @@ -205,8 +205,7 @@ const WithSingleBottomSheetItemExampleV2Light = () => ( bottomSheetContent: [ { title: 'Single Information Item', - description: - 'This example only has one item in the bottom sheet content, so it should not display an info icon next to it.', + description: 'This example only has one item in the bottom sheet content.', }, ], bottomSheetTitle: 'About this advert', @@ -221,6 +220,45 @@ const WithSingleBottomSheetItemExampleV2Light = () => ( /> ); +const WithDsaStyleBottomSheetExampleV2Light = () => ( +
+
+ +
+
+); + export const SponsoredBannerWithCtaTextAndPopoverLight = { render: () => , }; @@ -244,3 +282,7 @@ export const SponsoredBannerWithCustomPopoverWidthAndMargins = { export const SponsoredBannerWithSingleBottomSheetItem = { render: () => , }; + +export const SponsoredBannerWithDsaStyleBottomSheet = { + render: () => , +}; diff --git a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx index 03b435027b..3727e499e0 100644 --- a/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx +++ b/packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx @@ -21,7 +21,6 @@ import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base import BpkBottomSheet from '../../../bpk-component-bottom-sheet'; import { PADDING_TYPE } from '../../../bpk-component-bottom-sheet/src/BpkBottomSheet'; -import ViewIcon from '../../../bpk-component-icon/lg/view'; import InfoIcon from '../../../bpk-component-icon/sm/information-circle'; import BpkImage from '../../../bpk-component-image'; import BpkText, { TEXT_STYLES } from '../../../bpk-component-text/src/BpkText'; @@ -117,44 +116,33 @@ const BpkInsetBannerSponsored = ({ closeOnScrimClick closeOnEscPressed paddingStyles={{ - top: PADDING_TYPE.base, start: PADDING_TYPE.lg, - bottom: PADDING_TYPE.base + bottom: PADDING_TYPE.base, }} > {callToAction.bottomSheetContent.map((item, index) => (
-
- {index === 0 ? ( - - ) : ( - callToAction.bottomSheetContent.length > 1 && - )} -
-
- - {item.title} - -
+ {item.title && ( +
+ + {item.title} + +
+ )}
; bottomSheetTitle?: string;