feat(ErrorFeedback): new component

playroom/snippets.tsx

@@ -149,6 +149,7 @@ const feedbackSnippets: Array<Snippet> = [
     'ErrorFeedbackScreen',
     'InfoFeedbackScreen',
     'SuccessFeedback',
+    'ErrorFeedback',
 ].map((name) => ({
     group: 'Feedbacks',
     name,

src/__screenshot_tests__/error-feedback-screenshot-test.tsx

@@ -0,0 +1,30 @@
+import {openStoryPage, screen} from '../test-utils';
+import {MOVISTAR_SKIN, O2_SKIN} from '../skins/constants';
+
+import type {Device} from '../test-utils';
+
+const testableSkins = [MOVISTAR_SKIN, O2_SKIN] as const;
+const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
+
+const cases: Array<[(typeof testableSkins)[number], Device]> = [];
+for (const skin of testableSkins) {
+    for (const device of testableDevices) {
+        cases.push([skin, device]);
+    }
+}
+
+test.each(cases)('ErrorFeedback on %s and %s', async (skin, device) => {
+    await openStoryPage({
+        id: `patterns-feedback-errorfeedback--error-feedback-story`,
+        skin,
+        device,
+        args: {
+            errorReference: 'E-1234',
+        },
+    });
+
+    const errorFeedback = await screen.findByTestId('error-feedback');
+
+    const image = await errorFeedback.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/__stories__/error-feedback-story.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {ErrorFeedback} from '../feedback';
+import {ButtonPrimary, ButtonSecondary} from '../button';
+import ResponsiveLayout from '../responsive-layout';
+
+export default {
+    title: 'Patterns/Feedback/ErrorFeedback',
+    parameters: {
+        fullScreen: true,
+    },
+};
+
+type Args = {
+    title: string;
+    description: string;
+    multipleParagraphs: boolean;
+    errorReference: string;
+    withButtons: boolean;
+};
+
+export const ErrorFeedbackStory: StoryComponent<Args> = ({
+    title,
+    description,
+    multipleParagraphs,
+    withButtons,
+    errorReference,
+}) => (
+    <ResponsiveLayout>
+        <ErrorFeedback
+            dataAttributes={{testid: 'error-feedback'}}
+            title={title}
+            description={multipleParagraphs ? [description, 'paragraph 2', 'paragraph 3'] : description}
+            primaryButton={
+                withButtons ? <ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary> : undefined
+            }
+            secondaryButton={
+                withButtons ? <ButtonSecondary onPress={() => {}}>Action2</ButtonSecondary> : undefined
+            }
+            errorReference={errorReference}
+        />
+    </ResponsiveLayout>
+);
+ErrorFeedbackStory.storyName = 'ErrorFeedback';
+ErrorFeedbackStory.args = {
+    title: 'Title',
+    description: 'Description',
+    multipleParagraphs: false,
+    errorReference: '',
+    withButtons: true,
+};

src/feedback.tsx

@@ -23,6 +23,7 @@ import ButtonGroup from './button-group';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './feedback.css';
 import IconSuccessVivoNew from './icons/icon-success-vivo-new';
+import {getPrefixedDataAttributes} from './utils/dom';
 
 import type {Theme} from './theme';
 import type {DataAttributes, IconProps} from './utils/types';
@@ -144,14 +145,10 @@ const renderFeedbackBody = (
     );
 };
 
-const renderInlineFeedbackBody = (
-    feedbackBody: React.ReactNode,
-    buttons: ButtonGroupProps,
-    isTabletOrSmaller: boolean
-) => {
+const renderInlineFeedbackBody = (feedbackBody: React.ReactNode, buttons: ButtonGroupProps) => {
     const hasButtons = checkHasButtons(buttons);
     return (
-        <Stack space={isTabletOrSmaller ? 24 : 40}>
+        <Stack space={{mobile: 24, desktop: 40}}>
             {feedbackBody}
             {hasButtons && <ButtonGroup {...buttons} />}
         </Stack>
@@ -257,15 +254,11 @@ export const FeedbackScreen: React.FC<FeedbackScreenProps> = ({
         animateText && areAnimationsSupported(platformOverrides),
         appear
     );
-    const inlineFeedbackBody = renderInlineFeedbackBody(
-        feedbackBody,
-        {
-            primaryButton,
-            secondaryButton,
-            link,
-        },
-        isTabletOrSmaller
-    );
+    const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
+        primaryButton,
+        secondaryButton,
+        link,
+    });
 
     if (!isTabletOrSmaller && unstable_inlineInDesktop) {
         return inlineFeedbackBody;
@@ -432,15 +425,11 @@ export const SuccessFeedback: React.FC<AssetFeedbackProps> = ({
         areAnimationsSupported(platformOverrides),
         appear
     );
-    const inlineFeedbackBody = renderInlineFeedbackBody(
-        feedbackBody,
-        {
-            primaryButton,
-            secondaryButton,
-            link,
-        },
-        isTabletOrSmaller
-    );
+    const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
+        primaryButton,
+        secondaryButton,
+        link,
+    });
 
     return isTabletOrSmaller ? (
         <ResponsiveLayout isInverse>
@@ -459,3 +448,52 @@ export const SuccessFeedback: React.FC<AssetFeedbackProps> = ({
         })
     );
 };
+
+export const ErrorFeedback: React.FC<ErrorFeedbackScreenProps> = ({
+    title,
+    description,
+    primaryButton,
+    secondaryButton,
+    link,
+    errorReference,
+    dataAttributes,
+}) => {
+    useHapticFeedback('error');
+    const {isTabletOrSmaller} = useScreenSize();
+    const {platformOverrides} = useTheme();
+
+    const appear = useAppearStatus();
+
+    const icon = <IconError size="100%" />;
+    const feedbackBody = renderFeedbackBody(
+        {
+            icon,
+            title,
+            description,
+            extra: errorReference ? (
+                <Text2 color={vars.colors.textSecondary} regular>
+                    {errorReference}
+                </Text2>
+            ) : undefined,
+        },
+        areAnimationsSupported(platformOverrides),
+        appear
+    );
+    const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
+        primaryButton,
+        secondaryButton,
+        link,
+    });
+
+    return isTabletOrSmaller ? (
+        <div {...getPrefixedDataAttributes({'component-name': 'ErrorFeedback', ...dataAttributes})}>
+            {inlineFeedbackBody}
+        </div>
+    ) : (
+        renderFeedbackInDesktop({
+            isInverse: false,
+            inlineFeedbackBody,
+            dataAttributes: {'component-name': 'ErrorFeedback', ...dataAttributes},
+        })
+    );
+};

src/index.tsx

@@ -28,6 +28,7 @@ export {
     InfoFeedbackScreen,
     SuccessFeedbackScreen,
     SuccessFeedback,
+    ErrorFeedback,
 } from './feedback';
 export {default as IconButton} from './icon-button';
 export {default as Popover} from './popover';