diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-with-extra-content-appears-properly-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-with-extra-content-appears-properly-on-desktop-1-snap.png new file mode 100644 index 0000000000..e4f2ba86bc Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-with-extra-content-appears-properly-on-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png new file mode 100644 index 0000000000..ea0b727f5d Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-errorfeedbackscreen-error-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-with-extra-content-appears-properly-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-with-extra-content-appears-properly-on-desktop-1-snap.png new file mode 100644 index 0000000000..ee8c13d053 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-with-extra-content-appears-properly-on-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png new file mode 100644 index 0000000000..bb70bb6978 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-infofeedbackscreen-info-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-with-extra-content-appears-properly-on-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-with-extra-content-appears-properly-on-desktop-1-snap.png new file mode 100644 index 0000000000..74df0e35d1 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-with-extra-content-appears-properly-on-desktop-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png new file mode 100644 index 0000000000..c7f3bc3db5 Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/feedback-screenshot-test-tsx-feedback-successfeedbackscreen-success-screen-with-extra-content-appears-properly-on-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/feedback-screenshot-test.tsx b/src/__screenshot_tests__/feedback-screenshot-test.tsx index ec8e37111e..58e0330177 100644 --- a/src/__screenshot_tests__/feedback-screenshot-test.tsx +++ b/src/__screenshot_tests__/feedback-screenshot-test.tsx @@ -11,25 +11,41 @@ const feedbackTypes = [ 'infofeedbackscreen--info', ]; -const cases: Array<[string, string, Device]> = []; -for (const skin of testableSkins) { +const getCases = () => { + const cases: Array<[string, string, Device]> = []; + for (const skin of testableSkins) { + for (const device of testableDevices) { + for (const feedbackType of feedbackTypes) { + cases.push([feedbackType, skin, device]); + } + } + } + return cases; +}; + +const getExtraContentCases = () => { + const cases: Array<[string, Device]> = []; for (const device of testableDevices) { for (const feedbackType of feedbackTypes) { - cases.push([feedbackType, skin, device]); + cases.push([feedbackType, device]); } } -} + return cases; +}; -test.each(cases)('Feedback %s screen appears properly on %s and %s', async (feedbackType, skin, device) => { - const page = await openStoryPage({ - id: `patterns-feedback-${feedbackType}`, - skin: skin as never, - device, - }); +test.each(getCases())( + 'Feedback %s screen appears properly on %s and %s', + async (feedbackType, skin, device) => { + const page = await openStoryPage({ + id: `patterns-feedback-${feedbackType}`, + skin: skin as never, + device, + }); - const image = await page.screenshot(); - expect(image).toMatchImageSnapshot(); -}); + const image = await page.screenshot(); + expect(image).toMatchImageSnapshot(); + } +); test('Feedback screen with large fontSize', async () => { const page = await openStoryPage({ @@ -55,3 +71,17 @@ test('Info feedback screen with custom icon', async () => { const image = await page.screenshot(); expect(image).toMatchImageSnapshot(); }); + +test.each(getExtraContentCases())( + 'Feedback %s screen with extra content appears properly on %s', + async (feedbackType, device) => { + const page = await openStoryPage({ + id: `patterns-feedback-${feedbackType}`, + device, + args: {extra: true}, + }); + + const image = await page.screenshot(); + expect(image).toMatchImageSnapshot(); + } +); diff --git a/src/__stories__/error-feedback-screen-story.tsx b/src/__stories__/error-feedback-screen-story.tsx index a325ca92ce..ad4109d427 100644 --- a/src/__stories__/error-feedback-screen-story.tsx +++ b/src/__stories__/error-feedback-screen-story.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import {ErrorFeedbackScreen} from '../feedback'; import {ButtonLink, ButtonPrimary} from '../button'; +import {Placeholder} from '../placeholder'; export default { title: 'Patterns/Feedback/ErrorFeedbackScreen', @@ -9,13 +10,22 @@ export default { }, }; -export const Error: StoryComponent = () => ( +type Args = { + extra: boolean; +}; + +export const Error: StoryComponent = ({extra}) => ( {}}>Action1} link={ {}}>Action2} errorReference="Error reference: #95001" + extra={extra ? : undefined} /> ); + Error.storyName = 'ErrorFeedbackScreen'; +Error.args = { + extra: false, +}; diff --git a/src/__stories__/feedback-screen-story.tsx b/src/__stories__/feedback-screen-story.tsx index c8c2e33d7f..42e0204a7e 100644 --- a/src/__stories__/feedback-screen-story.tsx +++ b/src/__stories__/feedback-screen-story.tsx @@ -117,16 +117,17 @@ export const FeedbackScreenStory: StoryComponent = ({ ) : undefined } link={linkText ? {linkText} : undefined} - > - - - Your content goes here. - - - You can customize this story. Check the "Controls" tab. - - - + extra={ + + + Your content goes here. + + + You can customize this story. Check the "Controls" tab. + + + } + /> )} diff --git a/src/__stories__/info-feedback-screen-story.tsx b/src/__stories__/info-feedback-screen-story.tsx index 2bc4b7e0fa..886da5e456 100644 --- a/src/__stories__/info-feedback-screen-story.tsx +++ b/src/__stories__/info-feedback-screen-story.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import {InfoFeedbackScreen} from '../feedback'; import {ButtonPrimary} from '../button'; import IconError from '../icons/icon-error'; +import {Placeholder} from '../placeholder'; export default { title: 'Patterns/Feedback/InfoFeedbackScreen', @@ -18,18 +19,21 @@ export default { type Args = { icon: string; + extra: boolean; }; -export const Info: StoryComponent = ({icon}) => ( +export const Info: StoryComponent = ({icon, extra}) => ( {}}>Action1} Icon={icon === 'custom' ? IconError : undefined} + extra={extra ? : undefined} /> ); Info.storyName = 'InfoFeedbackScreen'; Info.args = { icon: 'default', + extra: false, }; diff --git a/src/__stories__/success-feedback-screen-story.tsx b/src/__stories__/success-feedback-screen-story.tsx index 1dc6d99d6f..014509618b 100644 --- a/src/__stories__/success-feedback-screen-story.tsx +++ b/src/__stories__/success-feedback-screen-story.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import {SuccessFeedbackScreen} from '../feedback'; import {ButtonPrimary, ButtonSecondary} from '../button'; import emptyStateImg from './images/empty-state.png'; +import {Placeholder} from '../placeholder'; export default { title: 'Patterns/Feedback/SuccessFeedbackScreen', @@ -16,11 +17,16 @@ export default { }, }; -type SuccessArgs = {imageUrl: string | null; imageFit: 'fit' | 'fill'; multipleParagraphs: boolean}; +type SuccessArgs = { + imageUrl: string | null; + imageFit: 'fit' | 'fill'; + multipleParagraphs: boolean; + extra: boolean; +}; const defaultDescription = "I'm the description"; -export const Success: StoryComponent = ({imageUrl, imageFit, multipleParagraphs}) => ( +export const Success: StoryComponent = ({imageUrl, imageFit, multipleParagraphs, extra}) => ( = ({imageUrl, imageFit, multip secondaryButton={ {}}>Action2} imageUrl={imageUrl ?? undefined} imageFit={imageFit} + extra={extra ? : undefined} /> ); Success.storyName = 'SuccessFeedbackScreen'; -Success.args = {imageUrl: emptyStateImg, imageFit: 'fit', multipleParagraphs: false}; +Success.args = {imageUrl: emptyStateImg, imageFit: 'fit', multipleParagraphs: false, extra: false}; diff --git a/src/__stories__/success-feedback-story.tsx b/src/__stories__/success-feedback-story.tsx index 449391b125..7536609270 100644 --- a/src/__stories__/success-feedback-story.tsx +++ b/src/__stories__/success-feedback-story.tsx @@ -25,6 +25,7 @@ type SuccessArgs = { imageFit: 'fit' | 'fill'; multipleParagraphs: boolean; withButtons: boolean; + extra?: boolean; }; const primaryButton = {}}>Action1; @@ -39,6 +40,7 @@ export const Success: StoryComponent = ({ imageFit, multipleParagraphs, withButtons, + extra, }) => ( = ({ secondaryButton={withButtons ? secondaryButton : undefined} imageUrl={imageUrl ?? undefined} imageFit={imageFit} + extra={extra ? : undefined} /> ); Success.storyName = 'SuccessFeedback'; @@ -57,6 +60,7 @@ Success.args = { imageFit: 'fit', multipleParagraphs: false, withButtons: true, + extra: false, }; export const SuccessAsHeader: StoryComponent = ({ @@ -64,6 +68,7 @@ export const SuccessAsHeader: StoryComponent = ({ imageFit, multipleParagraphs, withButtons, + extra, }) => { const {isTabletOrSmaller} = useScreenSize(); const successFeedback = ( @@ -76,6 +81,7 @@ export const SuccessAsHeader: StoryComponent = ({ secondaryButton={withButtons ? secondaryButton : undefined} imageUrl={imageUrl ?? undefined} imageFit={imageFit} + extra={extra ? : undefined} /> ); return ( @@ -96,4 +102,5 @@ SuccessAsHeader.args = { imageFit: 'fit', multipleParagraphs: false, withButtons: true, + extra: false, }; diff --git a/src/feedback.tsx b/src/feedback.tsx index d3ddf489fc..0d709486ea 100644 --- a/src/feedback.tsx +++ b/src/feedback.tsx @@ -91,7 +91,8 @@ const renderFeedbackBody = ( title, description, children, - }: Pick, + extra, + }: Pick, animateText: boolean, appear: boolean ) => { @@ -122,7 +123,7 @@ const renderFeedbackBody = ( {normalizedDescription} )} - {children} + {extra ?? children} ); @@ -175,7 +176,11 @@ type FeedbackButtonsProps = ButtonGroupProps; interface FeedbackProps extends FeedbackButtonsProps { title: string; description?: string | Array; + /** + * @deprecated This field is deprecated, please use extra instead. + */ children?: React.ReactNode; + extra?: React.ReactNode; unstable_inlineInDesktop?: boolean; dataAttributes?: DataAttributes; } @@ -196,6 +201,7 @@ export const FeedbackScreen: React.FC = ({ title, description, children, + extra, primaryButton, secondaryButton, link, @@ -228,7 +234,7 @@ export const FeedbackScreen: React.FC = ({ }, []); const feedbackBody = renderFeedbackBody( - {icon, title, description, children}, + {icon, title, description, children, extra}, animateText && areAnimationsSupported(platformOverrides), appear ); @@ -321,6 +327,7 @@ interface ErrorFeedbackScreenProps extends FeedbackProps { export const ErrorFeedbackScreen: React.FC = ({ children, + extra, errorReference, dataAttributes, ...otherProps @@ -332,14 +339,17 @@ export const ErrorFeedbackScreen: React.FC = ({ icon={} animateText dataAttributes={{'component-name': 'ErrorFeedbackScreen', ...dataAttributes}} - > - {children} - {errorReference && ( - - {errorReference} - - )} - + extra={ + + {extra ?? children} + {errorReference && ( + + {errorReference} + + )} + + } + > ); }; @@ -365,6 +375,7 @@ export const SuccessFeedback: React.FC = ({ title, description, children, + extra, primaryButton, secondaryButton, link, @@ -380,7 +391,7 @@ export const SuccessFeedback: React.FC = ({ const icon = skinName === VIVO_SKIN ? : ; const feedbackBody = renderFeedbackBody( - {icon, title, description, children}, + {icon, title, description, children, extra}, areAnimationsSupported(platformOverrides), appear );