Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs): remove icon prop and use only Icon/asset #1206

Merged
merged 7 commits into from
Sep 12, 2024
Merged

feat(Callout, Cards, Dialog, EmptyState, EmptyStateCard, FeedbackScreen, Tabs): remove icon prop and use only Icon/asset #1206

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
26e9341
fix naming convention
marcoskolodny Aug 21, 2024
08e7361
update playroom snippets
marcoskolodny Aug 21, 2024
deea132
resolve conflicts
marcoskolodny Aug 23, 2024
e15685b
Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-1…
marcoskolodny Aug 28, 2024
ee1ff99
Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-1…
marcoskolodny Sep 11, 2024
9ce37b8
remove react.fc
marcoskolodny Sep 11, 2024
6490451
fix conflicts
marcoskolodny Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions playroom/snippets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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},
]}
/>`,
},
Expand Down Expand Up @@ -1432,20 +1432,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) => (
Expand Down Expand Up @@ -1611,21 +1611,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) => (
Expand Down Expand Up @@ -2639,7 +2639,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} />,
})
}
>
Expand Down
2 changes: 1 addition & 1 deletion src/__acceptance_tests__/__ssr_pages__/card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/__private_stories__/carousel-on-different-container-sizes-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/__private_stories__/skin-components-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export const Default: StoryComponent<Args> = ({variant}) => {

{/** Callout */}
<Callout
icon={<IconBoxLight />}
asset={<IconBoxLight />}
onClose={() => {}}
title="Title"
description="Description"
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/callout-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/card-action-icon-button-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/carousel-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}}
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/centered-carousel-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
12 changes: 6 additions & 6 deletions src/__stories__/data-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/dialog-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
14 changes: 7 additions & 7 deletions src/__stories__/display-data-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -221,7 +221,7 @@ export const Group: StoryComponent = () => {
}
/>,
<DisplayDataCard
icon={
asset={
<Circle size={40} backgroundColor={skinVars.colors.brandLow}>
<IconInvoicePlanFileRegular color={skinVars.colors.brand} />
</Circle>
Expand Down
8 changes: 4 additions & 4 deletions src/__stories__/display-media-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions src/__stories__/empty-state-card-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
6 changes: 3 additions & 3 deletions src/__stories__/empty-state-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%" />,
};
}

Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/feedback-screen-story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down
Loading
Loading