fix(BpkInsetBannerSponsored): remove per-item icons from bottom sheet, make title optional

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(
       <BpkInsetBannerSponsored
         title="Lorem ipsum"
@@ -120,14 +120,52 @@ describe('BpkInsetBanner', () => {
           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(
+      <BpkInsetBannerSponsored
+        title="Lorem ipsum"
+        logo="https://content.skyscnr.com/m/49503c4388cb05ab/original/Skyland_Black_172x96.png"
+        callToAction={{
+          text: 'Sponsored',
+          bottomSheetContent: [
+            {
+              description: 'This advert was shown because you searched for flights.',
+            },
+            {
+              title: 'Based on your current search',
+              description: 'We use your current search to show relevant ads.',
+            },
+            {
+              title: 'Based on your past activity',
+              description: 'We may use your past searches to personalise ads.',
+            },
           ],
           bottomSheetTitle: 'About this advert',
-          closeBtnIcon: true,
-          labelTitle: true,
-          bottomSheetLabel: 'Info',
           buttonCloseLabel: 'Close',
         }}
         backgroundColor="#FFE300"
@@ -139,9 +177,10 @@ describe('BpkInsetBanner', () => {
     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();
   });
 });

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;
   }
 

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 = () => (
+  <div id="bottom-sheet-container">
+    <div id="pagewrap">
+      <BpkInsetBannerSponsored
+        title="Exclusive Travel Deals"
+        subheadline="Sponsored by Skyland"
+        logo={logoDarkUrl}
+        callToAction={{
+          text: 'Sponsored',
+          bottomSheetContent: [
+            {
+              description:
+                'This advert was placed by Skyland via Skyscanner\'s advertising platform.',
+            },
+            {
+              title: 'Based on your current search',
+              description:
+                'We use your current search to show you relevant ads from our advertising partners.',
+            },
+            {
+              title: 'Based on your past activity',
+              description:
+                'We may use your past searches and browsing history to personalise the ads you see.',
+            },
+          ],
+          bottomSheetTitle: 'About this advert',
+          closeBtnIcon: true,
+          labelTitle: true,
+          bottomSheetLabel: 'Info',
+          buttonCloseLabel: 'Close',
+        }}
+        backgroundColor="#FFE300"
+        variant={VARIANT.onLight}
+        accessibilityLabel="Sponsored by Skyscanner"
+      />
+    </div>
+  </div>
+);
+
 export const SponsoredBannerWithCtaTextAndPopoverLight = {
   render: () => <WithCtaTextAndBottomSheetExampleV2Light />,
 };
@@ -244,3 +282,7 @@ export const SponsoredBannerWithCustomPopoverWidthAndMargins = {
 export const SponsoredBannerWithSingleBottomSheetItem = {
   render: () => <WithSingleBottomSheetItemExampleV2Light />,
 };
+
+export const SponsoredBannerWithDsaStyleBottomSheet = {
+  render: () => <WithDsaStyleBottomSheetExampleV2Light />,
+};

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) => (
                 <div
-                  key={item.title}
+                  key={item.title ?? `section-${index}`}
                   className={getClassName(
                     'bpk-inset-banner--bottom-sheet-content',
                   )}
                 >
-                  <div
-                    className={getClassName(
-                      'bpk-inset-banner--bottom-sheet-icon',
-                    )}
-                    data-testid="bottom-sheet-icon-container"
-                  >
-                    {index === 0 ? (
-                      <ViewIcon height={24} width={24} data-testid="view-icon" />
-                    ) : (
-                      callToAction.bottomSheetContent.length > 1 && <InfoIcon height={24} width={24} data-testid="info-icon" />
-                    )}
-                  </div>
                   <div
                     className={getClassName(
                       'bpk-inset-banner--bottom-sheet-text',
                     )}
                   >
-                    <div
-                      className={getClassName(
-                        'bpk-inset-banner--bottom-sheet-title',
-                      )}
-                    >
-                      <BpkText textStyle={TEXT_STYLES.heading4}>
-                        {item.title}
-                      </BpkText>
-                    </div>
+                    {item.title && (
+                      <div
+                        className={getClassName(
+                          'bpk-inset-banner--bottom-sheet-title',
+                        )}
+                      >
+                        <BpkText textStyle={TEXT_STYLES.heading5}>
+                          {item.title}
+                        </BpkText>
+                      </div>
+                    )}
                     <div
                       className={getClassName(
                         'bpk-inset-banner--bottom-sheet-description',

packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/common-types.ts

@@ -23,7 +23,7 @@ export const VARIANT = {
 type callToActionType = {
   text?: string;
   bottomSheetContent: Array<{
-    title: string;
+    title?: string;
     description: string;
   }>;
   bottomSheetTitle?: string;