feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScre…

…en, Tabs): remove icon prop and use only Icon/asset (#1206)
Telefonica · Sep 12, 2024 · afc4604 · afc4604
1 parent fcf15d0
commit afc4604
Show file tree

Hide file tree

Showing 36 changed files with 159 additions and 149 deletions.
diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
@@ -945,9 +945,9 @@ const tabsSnippets: Array<Snippet> = [
             selectedIndex={getState('tabIndex', 0)}
             onChange={setState('tabIndex')}
             tabs={[
-                {text: 'Tab 1', icon: <IconAppointmentRegular color="currentColor" />},
-                {text: 'Tab 2', icon: <IconBrainRegular color="currentColor" />},
-                {text: 'Tab 3', icon: <IconBusRegular color="currentColor" />},
+                {text: 'Tab 1', Icon: IconAppointmentRegular},
+                {text: 'Tab 2', Icon: IconBrainRegular},
+                {text: 'Tab 3', Icon: IconBusRegular},
             ]}
         />`,
     },
@@ -1440,20 +1440,20 @@ const layoutSnippets: Array<Snippet> = [
                 {
                     categoryName: "Personal information",
                     settings: [
-                    { title: "Personal details", icon: <IconUserAccountRegular /> },
-                    { title: "Security", icon: <IconLockClosedRegular /> },
+                    { title: "Personal details", asset: <IconUserAccountRegular /> },
+                    { title: "Security", asset: <IconLockClosedRegular /> },
                     {
                         title: "Payment methods",
-                        icon: <IconCreditCardVisaRegular />,
+                        asset: <IconCreditCardVisaRegular />,
                     },
                     ],
                 },
                 {
                     categoryName: "Configuration",
                     settings: [
-                    { title: "Notifications", icon: <IconBellRegular /> },
-                    { title: "FAQs", icon: <IconSupportAgentRegular /> },
-                    { title: "About", icon: <IconInformationUserRegular /> },
+                    { title: "Notifications", asset: <IconBellRegular /> },
+                    { title: "FAQs", asset: <IconSupportAgentRegular /> },
+                    { title: "About", asset: <IconInformationUserRegular /> },
                     ],
                 },
                 ].map((category) => (
@@ -1619,21 +1619,21 @@ const exampleScreens: Array<Snippet> = [
                     settings: [
                       {
                         title: "Personal details",
-                        icon: <IconUserAccountRegular />,
+                        asset: <IconUserAccountRegular />,
                       },
-                      { title: "Security", icon: <IconLockClosedRegular /> },
+                      { title: "Security", asset: <IconLockClosedRegular /> },
                       {
                         title: "Payment methods",
-                        icon: <IconCreditCardVisaRegular />,
+                        asset: <IconCreditCardVisaRegular />,
                       },
                     ],
                   },
                   {
                     categoryName: "Configuration",
                     settings: [
-                      { title: "Notifications", icon: <IconBellRegular /> },
-                      { title: "FAQs", icon: <IconSupportAgentRegular /> },
-                      { title: "About", icon: <IconInformationUserRegular /> },
+                      { title: "Notifications", asset: <IconBellRegular /> },
+                      { title: "FAQs", asset: <IconSupportAgentRegular /> },
+                      { title: "About", asset: <IconInformationUserRegular /> },
                     ],
                   },
                 ].map((category) => (
@@ -2647,7 +2647,7 @@ const alertSnippets = [
             forceWeb: true,
             showCancel: true,
             link: <ButtonLink href="https://google.com">Link</ButtonLink>,
-            icon: <IconInformationUserLight color={colors.brand} />,
+            asset: <IconInformationUserLight color={colors.brand} />,
         })
     }
 >

diff --git a/src/__acceptance_tests__/__ssr_pages__/card.tsx b/src/__acceptance_tests__/__ssr_pages__/card.tsx
@@ -21,7 +21,7 @@ const CardsTest = (): JSX.Element => (
             title="title"
             subtitle="subtitle"
             description="description"
-            icon={<IconAcademicLight />}
+            asset={<IconAcademicLight />}
             button={
                 <ButtonPrimary small href="https://google.com">
                     Action

diff --git a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx
@@ -80,7 +80,7 @@ export const Default: StoryComponent<Args> = ({
                 <Stack space={16}>
                     <Callout
                         description="Arrow controls disappear in touch devices"
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <GridLayout
                         template="8+4"

diff --git a/src/__private_stories__/skin-components-story.tsx b/src/__private_stories__/skin-components-story.tsx
@@ -161,7 +161,7 @@ export const Default: StoryComponent<Args> = ({variant}) => {
 
                         {/** Callout */}
                         <Callout
-                            icon={<IconBoxLight />}
+                            asset={<IconBoxLight />}
                             onClose={() => {}}
                             title="Title"
                             description="Description"

diff --git a/src/__stories__/callout-story.tsx b/src/__stories__/callout-story.tsx
@@ -42,7 +42,7 @@ export const Default: StoryComponent<Args> = ({title, description, asset, action
         <ResponsiveLayout isInverse={inverse}>
             <Box paddingY={24}>
                 <Callout
-                    icon={asset ? <IconBoxLight /> : undefined}
+                    asset={asset ? <IconBoxLight /> : undefined}
                     onClose={closable ? () => {} : undefined}
                     title={title}
                     description={description}

diff --git a/src/__stories__/card-action-icon-button-story.tsx b/src/__stories__/card-action-icon-button-story.tsx
@@ -66,7 +66,7 @@ export const Default: StoryComponent = () => {
                     <MyCustomCardActionComponent key="2" />,
                     <MyCustomCardActionToggleComponent key="3" />,
                 ]}
-                icon={
+                asset={
                     <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
                         <IconShopRegular color={skinVars.colors.brand} />
                     </Circle>

diff --git a/src/__stories__/carousel-story.tsx b/src/__stories__/carousel-story.tsx
@@ -62,7 +62,7 @@ export const Default: StoryComponent<Args> = ({
                 <Stack space={16}>
                     <Callout
                         description="Arrow controls disappear in touch devices"
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <Carousel
                         dataAttributes={{testid: 'carousel-story'}}

diff --git a/src/__stories__/centered-carousel-story.tsx b/src/__stories__/centered-carousel-story.tsx
@@ -34,7 +34,7 @@ export const Default: StoryComponent<Args> = ({numItems, initialActiveItem}) =>
                 <Stack space={16}>
                     <Callout
                         description="Resize the window to see centerd carousel style in mobile. Arrow controls disappear in touch devices."
-                        icon={<IconInformationRegular />}
+                        asset={<IconInformationRegular />}
                     />
                     <CenteredCarousel
                         onPageChange={setPageInfo}

diff --git a/src/__stories__/data-card-story.tsx b/src/__stories__/data-card-story.tsx
@@ -57,15 +57,15 @@ export const Default: StoryComponent<DataCardArgs> = ({
     topAction,
     aspectRatio,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
     const interactiveActions = {
@@ -92,7 +92,7 @@ export const Default: StoryComponent<DataCardArgs> = ({
     return (
         <DataCard
             onClose={closable ? () => {} : undefined}
-            icon={icon}
+            asset={assetElement}
             headline={headline && <Tag type={headlineType}>{headline}</Tag>}
             pretitle={pretitle}
             title={title}
@@ -191,7 +191,7 @@ export const Group: StoryComponent = () => {
                             title="Title"
                             subtitle="Subtitle"
                             description="Description"
-                            icon={
+                            asset={
                                 <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                     <IconMobileDeviceRegular color={skinVars.colors.brand} />
                                 </Circle>
@@ -201,7 +201,7 @@ export const Group: StoryComponent = () => {
                         <DataCard
                             title="Title"
                             description="Description"
-                            icon={
+                            asset={
                                 <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                     <IconMobileDeviceRegular color={skinVars.colors.brand} />
                                 </Circle>

diff --git a/src/__stories__/dialog-story.tsx b/src/__stories__/dialog-story.tsx
@@ -120,7 +120,7 @@ export const Dialog: StoryComponent<DialogArgs> = ({
                                 </Stack>
                             ) : undefined,
                             link: link ? <ButtonLink href="https://google.com">Link</ButtonLink> : undefined,
-                            icon: asset ? (
+                            asset: asset ? (
                                 <IconInformationUserLight color={skinVars.colors.brand} />
                             ) : undefined,
                             onAccept: onAccept ? () => console.log('Accepted') : undefined,

diff --git a/src/__stories__/display-data-card-story.tsx b/src/__stories__/display-data-card-story.tsx
@@ -66,19 +66,19 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
     isInverse,
     aspectRatio,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'circle + icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'circle + image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     } else if (asset === 'icon') {
-        icon = <IconInvoicePlanFileRegular size={40} />;
+        assetElement = <IconInvoicePlanFileRegular size={40} />;
     } else if (asset === 'image') {
-        icon = <Image src={avatarImg} width={40} height={40} />;
+        assetElement = <Image src={avatarImg} width={40} height={40} />;
     }
 
     const interactiveActions = {
@@ -134,7 +134,7 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
                       ]
                     : undefined
             }
-            icon={icon}
+            asset={assetElement}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
             title={title}
@@ -221,7 +221,7 @@ export const Group: StoryComponent = () => {
                             }
                         />,
                         <DisplayDataCard
-                            icon={
+                            asset={
                                 <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                                     <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
                                 </Circle>

diff --git a/src/__stories__/display-media-card-story.tsx b/src/__stories__/display-media-card-story.tsx
@@ -76,15 +76,15 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
     emptySource,
     inverse,
 }) => {
-    let icon;
+    let assetElement;
     if (asset === 'circle with icon') {
-        icon = (
+        assetElement = (
             <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
                 <IconInvoicePlanFileRegular color={skinVars.colors.brand} />
             </Circle>
         );
     } else if (asset === 'circle with image') {
-        icon = <Circle size={40} backgroundImage={avatarImg} />;
+        assetElement = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
     const interactiveActions = {
@@ -146,7 +146,7 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
             <Box padding={16}>
                 <DisplayMediaCard
                     {...backgroundProps}
-                    icon={icon}
+                    asset={assetElement}
                     headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
                     pretitle={pretitle}
                     title={title}

diff --git a/src/__stories__/empty-state-card-story.tsx b/src/__stories__/empty-state-card-story.tsx
@@ -28,15 +28,15 @@ export const Default: StoryComponent<Args> = ({actions, title, description, asse
 
     if (asset === 'Icon') {
         assetProps = {
-            icon: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
+            asset: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
         };
     } else if (asset === 'icon as Image') {
         assetProps = {
-            icon: <Image src={avatars4Img} />,
+            asset: <Image src={avatars4Img} />,
         };
     } else if (asset === 'icon as img') {
         assetProps = {
-            icon: <img src={avatars4Img} width="100%" />,
+            asset: <img src={avatars4Img} width="100%" />,
         };
     } else {
         assetProps = {

diff --git a/src/__stories__/empty-state-story.tsx b/src/__stories__/empty-state-story.tsx
@@ -50,15 +50,15 @@ export const WithIcon: StoryComponent<WithIconArgs> = ({actions, asset}) => {
     let assetProps;
     if (asset === 'Icon') {
         assetProps = {
-            icon: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
+            asset: <IconBoxLight size="100%" color={skinVars.colors.brand} />,
         };
     } else if (asset === 'Image') {
         assetProps = {
-            icon: <Image src={avatars4Img} />,
+            asset: <Image src={avatars4Img} />,
         };
     } else {
         assetProps = {
-            icon: <img src={avatars4Img} width="100%" />,
+            asset: <img src={avatars4Img} width="100%" />,
         };
     }
 

diff --git a/src/__stories__/feedback-screen-story.tsx b/src/__stories__/feedback-screen-story.tsx
@@ -103,7 +103,7 @@ export const FeedbackScreenStory: StoryComponent<FeedbackScreenArgs> = ({
                             multipleParagraphs ? [description, 'paragraph 2', 'paragraph 3'] : description
                         }
                         animateText={animateText}
-                        icon={icon ? <IconOrders /> : undefined}
+                        asset={icon ? <IconOrders /> : undefined}
                         imageUrl={imageUrl ?? undefined}
                         imageFit={imageFit}
                         primaryButton={