feedback screens evolution

src/__screenshot_tests__/feedback-screenshot-test.tsx

@@ -43,3 +43,15 @@ test('Feedback screen with large fontSize', async () => {
     const image = await page.screenshot();
     expect(image).toMatchImageSnapshot();
 });
+
+test('Info feedback screen with custom icon', async () => {
+    const page = await openStoryPage({
+        id: 'patterns-feedback-infofeedbackscreen--info',
+        skin: MOVISTAR_SKIN,
+        device: 'MOBILE_IOS',
+        args: {icon: 'custom'},
+    });
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

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

@@ -1,19 +1,35 @@
 import * as React from 'react';
 import {InfoFeedbackScreen} from '../feedback';
 import {ButtonPrimary} from '../button';
+import IconError from '../icons/icon-error';
 
 export default {
     title: 'Patterns/Feedback/InfoFeedbackScreen',
     parameters: {
         fullScreen: true,
     },
+    argTypes: {
+        icon: {
+            options: ['default', 'custom'],
+            control: {type: 'select'},
+        },
+    },
+};
+
+type Args = {
+    icon: string;
 };
 
-export const Info: StoryComponent = () => (
+export const Info: StoryComponent<Args> = ({icon}) => (
     <InfoFeedbackScreen
         title="I'm the title"
         description="I'm the description"
         primaryButton={<ButtonPrimary onPress={() => {}}>Action1</ButtonPrimary>}
+        Icon={icon === 'custom' ? IconError : undefined}
     />
 );
+
 Info.storyName = 'InfoFeedbackScreen';
+Info.args = {
+    icon: 'default',
+};

src/feedback.css.ts

@@ -30,11 +30,16 @@ 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 iconContainer = sprinkles({
+    width: 48,
+    height: 48,
+});
+
 export const feedbackDataAppear = style({opacity: 0, transform: 'translate(0, 20px)'});
 
 export const feedbackDataAppearActive = style({

src/feedback.tsx

@@ -4,10 +4,10 @@ import {ThemeVariant, useIsInverseVariant} from './theme-variant-context';
 import ButtonFixedFooterLayout from './button-fixed-footer-layout';
 import OverscrollColor from './overscroll-color-context';
 import {O2_CLASSIC_SKIN, VIVO_SKIN} from './skins/constants';
-import IcnSuccess from './icons/icon-success';
+import IconSuccess from './icons/icon-success';
 import IconSuccessVivo from './icons/icon-success-vivo';
-import IcnError from './icons/icon-error';
-import IcnInfo from './icons/icon-info';
+import IconError from './icons/icon-error';
+import IconInfo from './icons/icon-info';
 import {
     isWebViewBridgeAvailable,
     requestVibration as requestVibrationNative,
@@ -24,7 +24,7 @@ import {vars} from './skins/skin-contract.css';
 import * as styles from './feedback.css';
 
 import type {Theme} from './theme';
-import type {DataAttributes} from './utils/types';
+import type {DataAttributes, IconProps} from './utils/types';
 import type {ButtonGroupProps} from './button-group';
 
 const areAnimationsSupported = (platformOverrides: Theme['platformOverrides']) =>
@@ -107,7 +107,7 @@ const renderFeedbackBody = (
         );
     return (
         <Stack space={24}>
-            {icon}
+            <div className={styles.iconContainer}>{icon}</div>
             <Stack
                 space={16}
                 className={classnames(
@@ -306,7 +306,7 @@ export const SuccessFeedbackScreen: React.FC<AssetFeedbackProps> = ({dataAttribu
             {...props}
             isInverse={!props.unstable_inlineInDesktop || isTabletOrSmaller}
             hapticFeedback="success"
-            icon={skinName === VIVO_SKIN ? <IconSuccessVivo /> : <IcnSuccess />}
+            icon={skinName === VIVO_SKIN ? <IconSuccessVivo size="100%" /> : <IconSuccess size="100%" />}
             animateText
             imageUrl={props.imageUrl}
             imageFit={props.imageFit}
@@ -329,7 +329,7 @@ export const ErrorFeedbackScreen: React.FC<ErrorFeedbackScreenProps> = ({
         <FeedbackScreen
             {...otherProps}
             hapticFeedback="error"
-            icon={<IcnError />}
+            icon={<IconError size="100%" />}
             animateText
             dataAttributes={{'component-name': 'ErrorFeedbackScreen', ...dataAttributes}}
         >
@@ -343,11 +343,19 @@ export const ErrorFeedbackScreen: React.FC<ErrorFeedbackScreenProps> = ({
     );
 };
 
-export const InfoFeedbackScreen: React.FC<FeedbackProps> = ({dataAttributes, ...props}) => {
+interface InfoFeedbackScreenProps extends FeedbackProps {
+    Icon?: React.FC<IconProps>;
+}
+
+export const InfoFeedbackScreen: React.FC<InfoFeedbackScreenProps> = ({
+    dataAttributes,
+    Icon = IconInfo,
+    ...props
+}) => {
     return (
         <FeedbackScreen
             dataAttributes={{'component-name': 'InfoFeedbackScreen', ...dataAttributes}}
-            icon={<IcnInfo />}
+            icon={<Icon size="100%" />}
             {...props}
         />
     );
@@ -370,7 +378,7 @@ export const SuccessFeedback: React.FC<AssetFeedbackProps> = ({
 
     const appear = useAppearStatus();
 
-    const icon = skinName === VIVO_SKIN ? <IconSuccessVivo /> : <IcnSuccess />;
+    const icon = skinName === VIVO_SKIN ? <IconSuccessVivo size="100%" /> : <IconSuccess size="100%" />;
     const feedbackBody = renderFeedbackBody(
         {icon, title, description, children},
         areAnimationsSupported(platformOverrides),

src/icons/icon-error.tsx

@@ -5,11 +5,15 @@ import {O2_SKIN, O2_CLASSIC_SKIN} from '../skins/constants';
 import {vars} from '../skins/skin-contract.css';
 import * as styles from './icon-error.css';
 
-const IconErrorO2 = (): JSX.Element => {
+type Props = {
+    size?: number | string;
+};
+
+const IconErrorO2: React.FC<Props> = ({size = 48}) => {
     const {platformOverrides} = useTheme();
 
     return (
-        <svg width="72" height="64" viewBox="0 0 72 64">
+        <svg width={size} height={size} viewBox="0 0 64 64" overflow="visible">
             <g
                 stroke={vars.colors.error}
                 fill={vars.colors.error}
@@ -53,11 +57,11 @@ const IconErrorO2 = (): JSX.Element => {
     );
 };
 
-const IconErrorDefault = (): JSX.Element => {
+const IconErrorDefault: React.FC<Props> = ({size = 48}) => {
     const {platformOverrides} = useTheme();
 
     return (
-        <svg width="72" height="64" viewBox="0 0 72 64">
+        <svg width={size} height={size} viewBox="0 0 64 64" overflow="visible">
             <g
                 stroke={vars.colors.error}
                 fill="none"
@@ -99,10 +103,14 @@ const IconErrorDefault = (): JSX.Element => {
     );
 };
 
-const IconError = (): JSX.Element => {
+const IconError: React.FC<Props> = (props) => {
     const {skinName} = useTheme();
 
-    return skinName === O2_SKIN || skinName === O2_CLASSIC_SKIN ? <IconErrorO2 /> : <IconErrorDefault />;
+    return skinName === O2_SKIN || skinName === O2_CLASSIC_SKIN ? (
+        <IconErrorO2 {...props} />
+    ) : (
+        <IconErrorDefault {...props} />
+    );
 };
 
 export default IconError;

src/icons/icon-info.tsx

@@ -5,10 +5,9 @@ import {vars} from '../skins/skin-contract.css';
 
 type Props = {
     size?: number | string;
-    color?: string;
 };
 
-const IconInfoO2: React.FC<Props> = ({size = 64, color}) => {
+const IconInfoO2: React.FC<Props> = ({size = 48}) => {
     return (
         <svg width={size} height={size} viewBox="0 0 64 64">
             <g
@@ -20,28 +19,19 @@ const IconInfoO2: React.FC<Props> = ({size = 64, color}) => {
                 <path
                     fill="none"
                     strokeWidth="2"
-                    stroke={color ? color : undefined}
                     d="M48.24,57.99c-4.71,2.95-10.27,4.65-16.24,4.65C15.08,62.64,1.36,48.92,1.36,32S15.08,1.36,32,1.36 S62.64,15.08,62.64,32c0,6.11-1.79,11.8-4.87,16.58"
                 />
-                <line
-                    fill="none"
-                    strokeWidth="2"
-                    stroke={color ? color : undefined}
-                    x1="32"
-                    y1="47.96"
-                    x2="32"
-                    y2="23.74"
-                />
-                <circle stroke={color ? color : undefined} cx="53.64" cy="53.54" r="1.06" />
+                <line fill="none" strokeWidth="2" x1="32" y1="47.96" x2="32" y2="23.74" />
+                <circle cx="53.64" cy="53.54" r="1.06" />
                 <circle strokeWidth="0" cx="32" cy="16.58" r="1.72" />
             </g>
         </svg>
     );
 };
 
-const IconInfoDefault = (): JSX.Element => {
+const IconInfoDefault: React.FC<Props> = ({size = 48}) => {
     return (
-        <svg width="64" height="64" viewBox="0 0 64 64">
+        <svg width={size} height={size} viewBox="0 0 64 64">
             <g fill={vars.colors.brand}>
                 <path
                     fillRule="nonzero"
@@ -53,9 +43,13 @@ const IconInfoDefault = (): JSX.Element => {
     );
 };
 
-const IconInfo = (): JSX.Element => {
+const IconInfo: React.FC<Props> = (props) => {
     const {skinName} = useTheme();
-    return skinName === O2_CLASSIC_SKIN || skinName === O2_SKIN ? <IconInfoO2 /> : <IconInfoDefault />;
+    return skinName === O2_CLASSIC_SKIN || skinName === O2_SKIN ? (
+        <IconInfoO2 {...props} />
+    ) : (
+        <IconInfoDefault {...props} />
+    );
 };
 
 export default IconInfo;

src/icons/icon-success-vivo.tsx

@@ -5,16 +5,15 @@ import {useIsInverseVariant} from '../theme-variant-context';
 import {vars} from '../skins/skin-contract.css';
 
 type Props = {
-    role?: string;
     size?: number | string;
 };
 
-const IconSuccessVivo: React.FC<Props> = ({role = 'presentation', size = 64}) => {
+const IconSuccessVivo: React.FC<Props> = ({size = 48}) => {
     const isInverse = useIsInverseVariant();
     const {platformOverrides} = useTheme();
 
     return (
-        <svg role={role} width={size} height={size} viewBox="0 0 64 64" style={{marginLeft: -17}}>
+        <svg width={size} height={size} viewBox="0 0 64 64" style={{marginLeft: -10}}>
             <g
                 transform="translate(17, 10)"
                 fill={isInverse ? vars.colors.inverse : vars.colors.brand}

src/icons/icon-success.tsx

@@ -16,7 +16,7 @@ type Props = {
     skipAnimation?: boolean;
 };
 
-const IconSuccessO2: React.FC<Props> = ({size = 64, color, skipAnimation = false}) => {
+const IconSuccessO2: React.FC<Props> = ({size = 48, color, skipAnimation = false}) => {
     const isInverse = useIsInverseVariant();
     const {platformOverrides} = useTheme();
 
@@ -58,7 +58,7 @@ const IconSuccessO2: React.FC<Props> = ({size = 64, color, skipAnimation = false
     );
 };
 
-const IconSuccessDefault: React.FC<Props> = ({size = 64, color, skipAnimation = false}) => {
+const IconSuccessDefault: React.FC<Props> = ({size = 48, color, skipAnimation = false}) => {
     const isInverse = useIsInverseVariant();
     const {platformOverrides} = useTheme();