diff --git a/src/components/Banner/Banner.styled.ts b/src/components/Banner/Banner.styled.ts index 660d628..965766b 100644 --- a/src/components/Banner/Banner.styled.ts +++ b/src/components/Banner/Banner.styled.ts @@ -9,8 +9,7 @@ const LoadingContainer = styled(Box)({ }) const BannerContainer = styled(Box, { - shouldForwardProp: (prop) => - prop !== "background" + shouldForwardProp: (prop) => prop !== "background", })<{ background: string }>((props) => { diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index 4b30340..e3aa1fc 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -1,7 +1,7 @@ import { documentToReactComponents } from "@contentful/rich-text-react-renderer" import CircularProgress from "@mui/material/CircularProgress" -import type { Property } from "csstype" import { Locales, getAssetUrl } from "../../hooks/contentful" +import { useTabletAndBelowMediaQuery } from "../Media" import { BannerProps, LowercasedAlignment } from "./Banner.types" import { BannerContainer, @@ -13,7 +13,7 @@ import { Text, Title, } from "./Banner.styled" -import { useTabletAndBelowMediaQuery } from "../Media" +import type { Property } from "csstype" const convertAlignmentToFlex = (alignment: Property.TextAlign) => { switch (alignment) { @@ -49,48 +49,48 @@ export const Banner: React.FC<BannerProps> = (props: BannerProps) => { const bannerBackgroundImage = getAssetUrl( assets, Locales.enUS, - isMobileOrTablet ? fields.mobileBackground[Locales.enUS] : fields.fullSizeBackground[Locales.enUS] + isMobileOrTablet + ? fields.mobileBackground[Locales.enUS] + : fields.fullSizeBackground[Locales.enUS] ) const title = isMobileOrTablet ? fields.mobileTitle[locale] : fields.desktopTitle[locale] - const titleAlignment = (isMobileOrTablet - ? fields.mobileTitleAlignment[Locales.enUS] - : fields.desktopTitleAlignment[Locales.enUS])?.toLowerCase() as LowercasedAlignment + const titleAlignment = ( + isMobileOrTablet + ? fields.mobileTitleAlignment[Locales.enUS] + : fields.desktopTitleAlignment[Locales.enUS] + )?.toLowerCase() as LowercasedAlignment const text = isMobileOrTablet ? fields.mobileText[locale] : fields.desktopText[locale] - const textAlignment = (isMobileOrTablet - ? fields.mobileTextAlignment[Locales.enUS] - : fields.desktopTextAlignment[Locales.enUS])?.toLowerCase() as LowercasedAlignment - const buttonAlignment = convertAlignmentToFlex((isMobileOrTablet - ? fields.mobileButtonAlignment[Locales.enUS] - : fields.desktopButtonAlignment[Locales.enUS])?.toLowerCase() as LowercasedAlignment) + const textAlignment = ( + isMobileOrTablet + ? fields.mobileTextAlignment[Locales.enUS] + : fields.desktopTextAlignment[Locales.enUS] + )?.toLowerCase() as LowercasedAlignment + const buttonAlignment = convertAlignmentToFlex( + (isMobileOrTablet + ? fields.mobileButtonAlignment[Locales.enUS] + : fields.desktopButtonAlignment[Locales.enUS] + )?.toLowerCase() as LowercasedAlignment + ) return ( - <BannerContainer - background={bannerBackgroundImage} - > + <BannerContainer background={bannerBackgroundImage}> <Content> - <Title - variant="h1" - textAlign={titleAlignment} - > - {title} + <Title variant="h1" textAlign={titleAlignment}> + {title} </Title> - <Text - textAlign={textAlignment} - > + <Text textAlign={textAlignment}> {text ? documentToReactComponents(text) : null} </Text> {fields.showButton[Locales.enUS] && fields.buttonLink?.[Locales.enUS] && fields.buttonsText?.[locale] ? ( - <ButtonContainer - justifyContent={buttonAlignment} - > + <ButtonContainer justifyContent={buttonAlignment}> <Button href={fields.buttonLink[Locales.enUS]} variant="contained" diff --git a/src/components/MarketingBanner/MarketingBanner.stories.tsx b/src/components/MarketingBanner/MarketingBanner.stories.tsx index aa57963..6784d39 100644 --- a/src/components/MarketingBanner/MarketingBanner.stories.tsx +++ b/src/components/MarketingBanner/MarketingBanner.stories.tsx @@ -1,6 +1,6 @@ -import type { Meta, StoryObj } from "@storybook/react" import { MarketingBanner } from "./MarketingBanner" import { Locales } from "../../hooks/contentful" +import type { Meta, StoryObj } from "@storybook/react" const meta = { title: "Decentraland UI/MarketingBanner", diff --git a/src/hooks/contentful/contentful.types.ts b/src/hooks/contentful/contentful.types.ts index b3e2287..7fb17c8 100644 --- a/src/hooks/contentful/contentful.types.ts +++ b/src/hooks/contentful/contentful.types.ts @@ -7,9 +7,9 @@ enum ContentfulLocale { } type LocalizedField<T> = { - [ContentfulLocale.enUS]: T; - [ContentfulLocale.es]?: T; - [ContentfulLocale.zh]?: T; + [ContentfulLocale.enUS]: T + [ContentfulLocale.es]?: T + [ContentfulLocale.zh]?: T } type SysAssetLink = {