diff --git a/package-lock.json b/package-lock.json index feeb4a1..8895ecf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@contentful/rich-text-react-renderer": "^16.0.1", - "@dcl/schemas": "^13.9.0", + "@dcl/schemas": "^15.6.0", "@dcl/ui-env": "^1.5.1", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", @@ -2340,9 +2340,9 @@ } }, "node_modules/@dcl/schemas": { - "version": "13.9.0", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.9.0.tgz", - "integrity": "sha512-t8t043TfxIpXqzR1mNehD4d6YFfbauq5ICoLL2Y72emSiu8q0bCI3pNCoaN0Ea6s7n+6AVv39Q8TvzWUneRBpQ==", + "version": "15.6.0", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-15.6.0.tgz", + "integrity": "sha512-YBX9pqANci2bNmEpa+T48KYHg0dLz7gaNolwECjqXPWrwQZbNMlcz2vvU4+ZlOyMY2RwJxlz8NJSCyZfS23x1A==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", diff --git a/package.json b/package.json index 0c87ae3..297d5f7 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "homepage": "https://github.com/decentraland/ui2#readme", "dependencies": { "@contentful/rich-text-react-renderer": "^16.0.1", - "@dcl/schemas": "^13.9.0", + "@dcl/schemas": "^15.6.0", "@dcl/ui-env": "^1.5.1", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx index e3aa1fc..38b803e 100644 --- a/src/components/Banner/Banner.tsx +++ b/src/components/Banner/Banner.tsx @@ -1,6 +1,7 @@ import { documentToReactComponents } from "@contentful/rich-text-react-renderer" +import { ContentfulLocale } from "@dcl/schemas" import CircularProgress from "@mui/material/CircularProgress" -import { Locales, getAssetUrl } from "../../hooks/contentful" +import { getAssetUrl } from "../../hooks/contentful" import { useTabletAndBelowMediaQuery } from "../Media" import { BannerProps, LowercasedAlignment } from "./Banner.types" import { @@ -29,7 +30,13 @@ const convertAlignmentToFlex = (alignment: Property.TextAlign) => { } export const Banner: React.FC = (props: BannerProps) => { - const { isLoading, fields, assets, locale = Locales.enUS, error } = props + const { + isLoading, + fields, + assets, + locale = ContentfulLocale.enUS, + error, + } = props const isMobileOrTablet = useTabletAndBelowMediaQuery() if (isLoading) { @@ -41,38 +48,38 @@ export const Banner: React.FC = (props: BannerProps) => { } // If there is no banner fields or the banner is not supposed to be shown, return null - if (!fields || !fields.showBanner[Locales.enUS] || error) { + if (!fields || error) { return null } // Build the parameteres based on the size of the screen const bannerBackgroundImage = getAssetUrl( assets, - Locales.enUS, + ContentfulLocale.enUS, isMobileOrTablet - ? fields.mobileBackground[Locales.enUS] - : fields.fullSizeBackground[Locales.enUS] + ? fields.mobileBackground[ContentfulLocale.enUS] + : fields.fullSizeBackground[ContentfulLocale.enUS] ) const title = isMobileOrTablet ? fields.mobileTitle[locale] : fields.desktopTitle[locale] const titleAlignment = ( isMobileOrTablet - ? fields.mobileTitleAlignment[Locales.enUS] - : fields.desktopTitleAlignment[Locales.enUS] + ? fields.mobileTitleAlignment[ContentfulLocale.enUS] + : fields.desktopTitleAlignment[ContentfulLocale.enUS] )?.toLowerCase() as LowercasedAlignment const text = isMobileOrTablet ? fields.mobileText[locale] : fields.desktopText[locale] const textAlignment = ( isMobileOrTablet - ? fields.mobileTextAlignment[Locales.enUS] - : fields.desktopTextAlignment[Locales.enUS] + ? fields.mobileTextAlignment[ContentfulLocale.enUS] + : fields.desktopTextAlignment[ContentfulLocale.enUS] )?.toLowerCase() as LowercasedAlignment const buttonAlignment = convertAlignmentToFlex( (isMobileOrTablet - ? fields.mobileButtonAlignment[Locales.enUS] - : fields.desktopButtonAlignment[Locales.enUS] + ? fields.mobileButtonAlignment[ContentfulLocale.enUS] + : fields.desktopButtonAlignment[ContentfulLocale.enUS] )?.toLowerCase() as LowercasedAlignment ) @@ -87,12 +94,12 @@ export const Banner: React.FC = (props: BannerProps) => { {text ? documentToReactComponents(text) : null} - {fields.showButton[Locales.enUS] && - fields.buttonLink?.[Locales.enUS] && + {fields.showButton[ContentfulLocale.enUS] && + fields.buttonLink?.[ContentfulLocale.enUS] && fields.buttonsText?.[locale] ? (