diff --git a/src/components/promoted-section/PromotedSection.tsx b/src/components/promoted-section/PromotedSection.tsx index 9f1a50904..9a781aad7 100644 --- a/src/components/promoted-section/PromotedSection.tsx +++ b/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; @@ -99,12 +99,12 @@ export const PromotedSection = forwardRef { @@ -115,8 +115,7 @@ export const PromotedSection = forwardRef PROMOTED_SECTION_STYLES[variety], [variety])} ref={ref} - {...(illustration ? { style: { display: 'inline-block' } } : {})} - {...otherProps}> + {...restProps}> @@ -143,8 +142,6 @@ export const PromotedSection = forwardRef{actions}} - - {illustration && {illustration}} {isDefined(onDismiss) && ( @@ -186,25 +183,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; diff --git a/src/components/promoted-section/__tests__/PromotedSection-test.tsx b/src/components/promoted-section/__tests__/PromotedSection-test.tsx index 874cea10d..0a64354d3 100644 --- a/src/components/promoted-section/__tests__/PromotedSection-test.tsx +++ b/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: }); + it('should not render a deprecated illustration', () => { + renderPromotedSection({ 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 () => { diff --git a/src/components/selection-cards/SelectionCards.tsx b/src/components/selection-cards/SelectionCards.tsx index ab45f6113..469a8f9b0 100644 --- a/src/components/selection-cards/SelectionCards.tsx +++ b/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((p SelectionCards.displayName = 'SelectionCards'; function SelectionCard(props: Readonly) { - 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) { className={className} disabled={isDisabled} value={value}> - {illustration && {illustration}} - + {isDefined(helpText) && (typeof helpText !== 'string' || isStringDefined(helpText)) && ( {helpText} @@ -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'; diff --git a/src/components/selection-cards/__tests__/SelectionCards-test.tsx b/src/components/selection-cards/__tests__/SelectionCards-test.tsx index 08dc84046..e79380d05 100644 --- a/src/components/selection-cards/__tests__/SelectionCards-test.tsx +++ b/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:
, + label: 'option', + value: 'option', + }, + ], + }); + + expect(screen.queryByTestId('illustration')).not.toBeInTheDocument(); + }); }); function renderSelectionCards(overrides: Partial = {}) { diff --git a/stories/SelectionCards-stories.tsx b/stories/SelectionCards-stories.tsx index ea643ad75..4faed7923 100644 --- a/stories/SelectionCards-stories.tsx +++ b/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 = { component: SelectionCards, @@ -52,17 +51,6 @@ export const Complete: Story = { { label: 'Third option is disabled', value: 'c', isDisabled: true }, { ariaLabel: 'Blabla', - illustration: ( -
- -
- ), label: (
- This is a complicated Selection Card that has an illustration + This is a complicated Selection Card Fancy
), diff --git a/stories/promoted-section/PromotedSection-stories.tsx b/stories/promoted-section/PromotedSection-stories.tsx index 84ae062d7..9b7dad192 100644 --- a/stories/promoted-section/PromotedSection-stories.tsx +++ b/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 = { args: { @@ -106,14 +105,6 @@ export const Dismissable: Story = { render, }; -export const WithIllustration: Story = { - args: { - illustration: , - }, - - render, -}; - export const WithButtonAction: Story = { args: { actions: , @@ -152,7 +143,6 @@ export const Everything: Story = { ), badgeText: 'Awesome badge text!', onDismiss: () => undefined, - illustration: , variety: PromotedSectionVariety.Highlight, },