SC-54182 Remove promoted illustrations

src/components/promoted-section/PromotedSection.tsx

@@ -60,7 +60,7 @@ export interface PromotedSectionProps {
   headerText: TextNode;
 
   /**
-   * The illustration to display on the right-hand side (optional)
+   * @deprecated Illustrations are no longer displayed in promoted sections.
    */
   illustration?: React.ReactNode;
 
@@ -92,31 +92,32 @@ const BADGE_VARIETIES = {
   [PromotedSectionVariety.Neutral]: BadgeVariety.Neutral,
 } as const;
 
+const DEPRECATED_ILLUSTRATION_PROP = 'illustration';
+
 export const PromotedSection = forwardRef<HTMLDivElement, Readonly<PromotedSectionProps>>(
   (
     {
       actions,
       badgeText,
       className,
       headerText,
-      illustration,
       onDismiss,
       text,
       titleAs = 'h2',
       variety = PromotedSectionVariety.Neutral,
-      ...otherProps
+      ...restProps
     },
     ref,
   ) => {
     const intl = useIntl();
+    delete (restProps as Record<string, unknown>)[DEPRECATED_ILLUSTRATION_PROP];
 
     return (
       <PromotedSectionMainStyles
         className={className}
         css={useMemo(() => PROMOTED_SECTION_STYLES[variety], [variety])}
         ref={ref}
-        {...(illustration ? { style: { display: 'inline-block' } } : {})}
-        {...otherProps}>
+        {...restProps}>
         <MainContainer>
           <MainContainerLeftSide>
             <TextAndActionsContainer>
@@ -143,8 +144,6 @@ export const PromotedSection = forwardRef<HTMLDivElement, Readonly<PromotedSecti
                 {actions && <ActionsContainer>{actions}</ActionsContainer>}
               </PromotedSectionTextAndActions>
             </TextAndActionsContainer>
-
-            {illustration && <IllustrationContainer>{illustration}</IllustrationContainer>}
           </MainContainerLeftSide>
 
           {isDefined(onDismiss) && (
@@ -186,25 +185,6 @@ const HeaderContainer = styled.div`
 
 HeaderContainer.displayName = 'HeaderContainer';
 
-const IllustrationContainer = styled.div`
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-  justify-content: center;
-  max-height: 108px;
-  max-width: 108px;
-  padding-left: ${cssVar('dimension-space-200')};
-
-  & img,
-  svg {
-    height: 100%;
-    object-fit: contain;
-    width: 100%;
-  }
-`;
-
-IllustrationContainer.displayName = 'IllustrationContainer';
-
 const MainContainer = styled.div`
   align-items: flex-start;
   display: flex;

src/components/promoted-section/__tests__/PromotedSection-test.tsx

@@ -21,7 +21,6 @@
 import { screen } from '@testing-library/react';
 import { render } from '~common/helpers/test-utils';
 import { Button } from '../../buttons';
-import { IconBug } from '../../icons';
 import { PromotedSection, PromotedSectionProps } from '../PromotedSection';
 
 describe('PromotedSection', () => {
@@ -40,10 +39,11 @@ describe('PromotedSection', () => {
     expect(screen.getByText('New')).toBeInTheDocument();
   });
 
-  it('should render an illustration and use inline-block', () => {
-    renderPromotedSection({ illustration: <IconBug /> });
+  it('should not render a deprecated illustration', () => {
+    renderPromotedSection({ illustration: <div data-testid="illustration" /> });
 
-    expect(screen.getByTestId('promoted-section')).toHaveStyle({ display: 'inline-block' });
+    expect(screen.queryByTestId('illustration')).not.toBeInTheDocument();
+    expect(screen.getByTestId('promoted-section')).not.toHaveAttribute('illustration');
   });
 
   it('should render a dismiss button', async () => {

src/components/selection-cards/SelectionCards.tsx

@@ -31,7 +31,7 @@ import { HelperText, Label } from '../typography';
 export type SelectionCardOption = RadioOption & {
   className?: string;
   /**
-   * Illustration to display at the top (optional)
+   * @deprecated Illustrations are no longer displayed in selection cards.
    */
   illustration?: React.ReactNode;
 };
@@ -123,7 +123,7 @@ export const SelectionCards = forwardRef<HTMLDivElement, SelectionCardsProps>((p
 SelectionCards.displayName = 'SelectionCards';
 
 function SelectionCard(props: Readonly<SelectionCardOption>) {
-  const { ariaLabel, className, helpText, illustration, isDisabled, label, value } = props;
+  const { ariaLabel, className, helpText, isDisabled, label, value } = props;
 
   /*
    * Although the HTML spec defines buttons as valid targets for labels,
@@ -139,8 +139,7 @@ function SelectionCard(props: Readonly<SelectionCardOption>) {
       className={className}
       disabled={isDisabled}
       value={value}>
-      {illustration && <IllustrationContainer>{illustration}</IllustrationContainer>}
-      <SelectionCardContentWrapper hasIllustration={isDefined(illustration)}>
+      <SelectionCardContentWrapper>
         <Label>{label}</Label>
         {isDefined(helpText) && (typeof helpText !== 'string' || isStringDefined(helpText)) && (
           <StyledHelperText data-disabled={isDisabled || undefined}>{helpText}</StyledHelperText>
@@ -170,7 +169,7 @@ const StyledHelperText = styled(HelperText)`
 `;
 StyledHelperText.displayName = 'StyledHelperText';
 
-const SelectionCardContentWrapper = styled.div<{ hasIllustration: boolean }>`
+const SelectionCardContentWrapper = styled.div`
   display: inline-flex;
   flex-direction: column;
   align-items: start;
@@ -184,8 +183,6 @@ const SelectionCardContentWrapper = styled.div<{ hasIllustration: boolean }>`
       ${cssVar('dimension-space-200')} -
         (${cssVar('focus-border-width-default')} - ${cssVar('border-width-default')})
     );
-
-    ${(props) => props.hasIllustration && `padding-top: ${cssVar('dimension-space-200')};`}
   }
 `;
 SelectionCardContentWrapper.displayName = 'SelectionCardContentWrapper';
@@ -243,37 +240,3 @@ const StyledSelectionCard = styled(RadioGroup.Item)`
 `;
 
 StyledSelectionCard.displayName = 'StyledSelectionCard';
-
-const IllustrationContainer = styled.div`
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-
-  border-radius: calc(${cssVar('border-radius-400')} - ${cssVar('border-width-default')})
-    calc(${cssVar('border-radius-400')} - ${cssVar('border-width-default')}) 0 0;
-
-  [data-state='checked'] & {
-    border-radius: calc(${cssVar('border-radius-400')} - ${cssVar('focus-border-width-default')})
-      calc(${cssVar('border-radius-400')} - ${cssVar('focus-border-width-default')}) 0 0;
-  }
-
-  overflow: hidden;
-  box-sizing: content;
-
-  & img,
-  & svg {
-    height: 100%;
-    object-fit: contain;
-    width: 100%;
-  }
-
-  /* Compensate the wider border when selected */
-  [data-state='checked'] & > *,
-  [data-state='checked'] & > * {
-    margin-top: -1px;
-  }
-`;
-
-IllustrationContainer.displayName = 'IllustrationContainer';

src/components/selection-cards/__tests__/SelectionCards-test.tsx

@@ -67,6 +67,20 @@ describe('SelectionCards', () => {
     const radioGroup = screen.getByLabelText('cool aria-label');
     expect(radioGroup).toBeInTheDocument();
   });
+
+  it('should not render a deprecated illustration', () => {
+    renderSelectionCards({
+      options: [
+        {
+          illustration: <div data-testid="illustration" />,
+          label: 'option',
+          value: 'option',
+        },
+      ],
+    });
+
+    expect(screen.queryByTestId('illustration')).not.toBeInTheDocument();
+  });
 });
 
 function renderSelectionCards(overrides: Partial<SelectionCardsProps> = {}) {

stories/SelectionCards-stories.tsx

@@ -20,7 +20,6 @@
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge, GroupAlignment, IconCheck, SelectionCards } from '../src';
-import { FishtankIllustration } from './helpers/FishtankIllustration';
 
 const meta: Meta<typeof SelectionCards> = {
   component: SelectionCards,
@@ -52,17 +51,6 @@ export const Complete: Story = {
       { label: 'Third option is disabled', value: 'c', isDisabled: true },
       {
         ariaLabel: 'Blabla',
-        illustration: (
-          <div
-            style={{
-              backgroundColor: '#aee1ff',
-              height: 80,
-              width: '100%',
-              textAlign: 'center',
-            }}>
-            <FishtankIllustration />
-          </div>
-        ),
         label: (
           <div
             style={{
@@ -72,7 +60,7 @@ export const Complete: Story = {
               gap: 8,
             }}>
             <IconCheck />
-            <span>This is a complicated Selection Card that has an illustration</span>
+            <span>This is a complicated Selection Card</span>
             <Badge variety="highlight">Fancy</Badge>
           </div>
         ),

stories/promoted-section/PromotedSection-stories.tsx

@@ -29,7 +29,6 @@ import {
   PromotedSectionVariety,
 } from '../../src';
 import { basicWrapperDecorator } from '../helpers/BasicWrapper';
-import { FishtankIllustration } from '../helpers/FishtankIllustration';
 
 const meta: Meta<typeof PromotedSection> = {
   args: {
@@ -106,14 +105,6 @@ export const Dismissable: Story = {
   render,
 };
 
-export const WithIllustration: Story = {
-  args: {
-    illustration: <FishtankIllustration />,
-  },
-
-  render,
-};
-
 export const WithButtonAction: Story = {
   args: {
     actions: <Button>Try feature</Button>,
@@ -152,7 +143,6 @@ export const Everything: Story = {
     ),
     badgeText: 'Awesome badge text!',
     onDismiss: () => undefined,
-    illustration: <FishtankIllustration />,
     variety: PromotedSectionVariety.Highlight,
   },