feat(FeedbackScreens): updates in icons, paddings and styling

src/__screenshot_tests__/feedback-screenshot-test.tsx

@@ -1,45 +1,103 @@
 import {openStoryPage, setRootFontSize} from '../test-utils';
-import {MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN} from '../skins/constants';
+import {MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
-const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN];
+const testableSkins = [MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN] as const;
 const testableDevices: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 const feedbackTypes = [
     'successfeedbackscreen--success',
     'errorfeedbackscreen--error',
     '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]);
+            if (!feedbackType.includes('error')) {
+                cases.push([feedbackType, device]);
+            }
         }
     }
-}
+    return cases;
+};
+
+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 (typeof testableSkins)[number],
+            device,
+        });
+
+        const image = await page.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);
 
-test.each(cases)('Feedback %s screen appears properly on %s and %s', async (feedbackType, skin, device) => {
+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();
+    }
+);
+
+test('Feedback screen with large fontSize', async () => {
     const page = await openStoryPage({
-        id: `patterns-feedback-${feedbackType}`,
-        skin: skin as never,
-        device,
+        id: 'patterns-feedback-successfeedbackscreen--success',
+        skin: MOVISTAR_SKIN,
+        device: 'MOBILE_IOS',
     });
 
+    await setRootFontSize(32);
+
     const image = await page.screenshot();
     expect(image).toMatchImageSnapshot();
 });
 
-test('Feedback screen with large fontSize', async () => {
+test('Info feedback screen with custom icon', async () => {
     const page = await openStoryPage({
-        id: 'patterns-feedback-successfeedbackscreen--success',
+        id: 'patterns-feedback-infofeedbackscreen--info',
         skin: MOVISTAR_SKIN,
         device: 'MOBILE_IOS',
+        args: {icon: 'custom'},
     });
 
-    await setRootFontSize(32);
-
     const image = await page.screenshot();
     expect(image).toMatchImageSnapshot();
 });
+
+test.each(testableDevices)(
+    'Success feedback screen appears properly with Vivo New skin on %s',
+    async (device) => {
+        const page = await openStoryPage({
+            id: 'patterns-feedback-successfeedbackscreen--success',
+            skin: VIVO_NEW_SKIN,
+            device,
+        });
+
+        const image = await page.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);

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

@@ -1,5 +1,5 @@
 import {openStoryPage} from '../test-utils';
-import {MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN} from '../skins/constants';
+import {MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN, VIVO_NEW_SKIN} from '../skins/constants';
 
 import type {Device} from '../test-utils';
 
@@ -37,3 +37,17 @@ test.each(testableDevices)(
         expect(image).toMatchImageSnapshot();
     }
 );
+
+test.each(testableDevices)(
+    'Success Feedback component appears properly with Vivo New skin on %s',
+    async (device) => {
+        const page = await openStoryPage({
+            id: `patterns-feedback-successfeedback--success`,
+            skin: VIVO_NEW_SKIN,
+            device,
+        });
+
+        const image = await page.screenshot();
+        expect(image).toMatchImageSnapshot();
+    }
+);

src/__stories__/error-feedback-screen-story.tsx

@@ -18,4 +18,5 @@ export const Error: StoryComponent = () => (
         errorReference="Error reference: #95001"
     />
 );
+
 Error.storyName = 'ErrorFeedbackScreen';

src/__stories__/feedback-screen-story.tsx

@@ -29,7 +29,7 @@ export default {
 const IconOrders = (): JSX.Element => {
     const {inverse, brand} = skinVars.colors;
     return (
-        <svg role="presentation" width="64" height="64" viewBox="0 0 64 64">
+        <svg role="presentation" width="100%" height="100%" viewBox="0 0 64 64">
             <path
                 fill={useIsInverseVariant() ? inverse : brand}
                 fillRule="evenodd"
@@ -117,16 +117,17 @@ export const FeedbackScreenStory: StoryComponent<FeedbackScreenArgs> = ({
                             ) : undefined
                         }
                         link={linkText ? <ButtonLink href="#">{linkText}</ButtonLink> : undefined}
-                    >
-                        <Stack space={16}>
-                            <Text2 regular as="p">
-                                Your content goes here.
-                            </Text2>
-                            <Text2 regular as="p">
-                                You can customize this story. Check the "Controls" tab.
-                            </Text2>
-                        </Stack>
-                    </FeedbackScreen>
+                        extra={
+                            <Stack space={16}>
+                                <Text2 regular as="p">
+                                    Your content goes here.
+                                </Text2>
+                                <Text2 regular as="p">
+                                    You can customize this story. Check the "Controls" tab.
+                                </Text2>
+                            </Stack>
+                        }
+                    />
                 </Box>
             </>
         )}

src/__stories__/info-feedback-screen-story.tsx

@@ -1,19 +1,39 @@
 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',
     parameters: {
         fullScreen: true,
     },
+    argTypes: {
+        icon: {
+            options: ['default', 'custom'],
+            control: {type: 'select'},
+        },
+    },
+};
+
+type Args = {
+    icon: string;
+    extra: boolean;
 };
 
-export const Info: StoryComponent = () => (
+export const Info: StoryComponent<Args> = ({icon, extra}) => (
     <InfoFeedbackScreen
         title="I'm the title"
         description="I'm the description"
         primaryButton={<ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary>}
+        Icon={icon === 'custom' ? IconError : undefined}
+        extra={extra ? <Placeholder /> : undefined}
     />
 );
+
 Info.storyName = 'InfoFeedbackScreen';
+Info.args = {
+    icon: 'default',
+    extra: false,
+};

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<SuccessArgs> = ({imageUrl, imageFit, multipleParagraphs}) => (
+export const Success: StoryComponent<SuccessArgs> = ({imageUrl, imageFit, multipleParagraphs, extra}) => (
     <SuccessFeedbackScreen
         title="I'm the title"
         description={
@@ -30,7 +36,8 @@ export const Success: StoryComponent<SuccessArgs> = ({imageUrl, imageFit, multip
         secondaryButton={<ButtonSecondary onPress={() => {}}>Action2</ButtonSecondary>}
         imageUrl={imageUrl ?? undefined}
         imageFit={imageFit}
+        extra={extra ? <Placeholder /> : undefined}
     />
 );
 Success.storyName = 'SuccessFeedbackScreen';
-Success.args = {imageUrl: emptyStateImg, imageFit: 'fit', multipleParagraphs: false};
+Success.args = {imageUrl: emptyStateImg, imageFit: 'fit', multipleParagraphs: false, extra: false};

src/__stories__/success-feedback-story.tsx

@@ -25,6 +25,7 @@ type SuccessArgs = {
     imageFit: 'fit' | 'fill';
     multipleParagraphs: boolean;
     withButtons: boolean;
+    extra?: boolean;
 };
 
 const primaryButton = <ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary>;
@@ -39,6 +40,7 @@ export const Success: StoryComponent<SuccessArgs> = ({
     imageFit,
     multipleParagraphs,
     withButtons,
+    extra,
 }) => (
     <SuccessFeedback
         title={defaultTitle}
@@ -49,6 +51,7 @@ export const Success: StoryComponent<SuccessArgs> = ({
         secondaryButton={withButtons ? secondaryButton : undefined}
         imageUrl={imageUrl ?? undefined}
         imageFit={imageFit}
+        extra={extra ? <Placeholder /> : undefined}
     />
 );
 Success.storyName = 'SuccessFeedback';
@@ -57,13 +60,15 @@ Success.args = {
     imageFit: 'fit',
     multipleParagraphs: false,
     withButtons: true,
+    extra: false,
 };
 
 export const SuccessAsHeader: StoryComponent<SuccessArgs> = ({
     imageUrl,
     imageFit,
     multipleParagraphs,
     withButtons,
+    extra,
 }) => {
     const {isTabletOrSmaller} = useScreenSize();
     const successFeedback = (
@@ -76,6 +81,7 @@ export const SuccessAsHeader: StoryComponent<SuccessArgs> = ({
             secondaryButton={withButtons ? secondaryButton : undefined}
             imageUrl={imageUrl ?? undefined}
             imageFit={imageFit}
+            extra={extra ? <Placeholder /> : undefined}
         />
     );
     return (
@@ -96,4 +102,5 @@ SuccessAsHeader.args = {
     imageFit: 'fit',
     multipleParagraphs: false,
     withButtons: true,
+    extra: false,
 };

src/feedback.css.ts

@@ -30,22 +30,43 @@ export const container = style([
 
 export const innerContainer = style({
     textAlign: 'left',
-    padding: '64px 8px 16px',
+    padding: '64px 0px 16px',
     zIndex: 1, // needed to support hack for o2-classic
     position: 'relative', // needed to support hack for o2-classic
 });
 
-export const feedbackDataAppear = style({opacity: 0, transform: 'translate(0, 20px)'});
+export const iconContainer = sprinkles({
+    width: 48,
+    height: 48,
+});
+
+export const feedbackDataAppear = style({
+    opacity: 0,
+    transform: 'translateY(24px)',
+    '@media': {
+        [mq.desktopOrBigger]: {
+            transform: 'translateY(40px)',
+        },
+    },
+});
 
-export const feedbackDataAppearActive = style({
+const feedbackDataAppearActive = style({
     transitionProperty: 'opacity, transform',
-    transitionDuration: '0.8s',
+    transitionDuration: '1s',
     transitionTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
-    transitionDelay: '0.6s',
     opacity: 1,
-    transform: 'translate(0, 0)',
+    transform: 'none',
+    '@media': {
+        [mq.desktopOrBigger]: {
+            transform: 'none',
+        },
+    },
 });
 
+export const feedbackDataAppearActiveFast = style([feedbackDataAppearActive, {transitionDelay: '0.6s'}]);
+export const feedbackDataAppearActiveMedium = style([feedbackDataAppearActive, {transitionDelay: '0.8s'}]);
+export const feedbackDataAppearActiveSlow = style([feedbackDataAppearActive, {transitionDelay: '1s'}]);
+
 export const feedbackData = style({
     maxWidth: 496,
     overflowWrap: 'break-word',