decentraland-ui2 3.19.0 → 3.19.1-32191056335.commit-087ddff
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Banner/Banner.js +7 -4
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/Banner/Banner.stories.d.ts +35 -0
- package/dist/components/Banner/Banner.stories.js +150 -0
- package/dist/components/Banner/Banner.stories.js.map +1 -0
- package/dist/components/Banner/Banner.styled.d.ts +15 -1
- package/dist/components/Banner/Banner.styled.js +40 -7
- package/dist/components/Banner/Banner.styled.js.map +1 -1
- package/dist/config/env/dev.json +1 -1
- package/dist/config/env/prod.json +1 -1
- package/dist/config/env/stg.json +1 -1
- package/dist/modules/contentful.d.ts +2 -1
- package/dist/modules/contentful.js +9 -1
- package/dist/modules/contentful.js.map +1 -1
- package/dist/modules/contentful.spec.d.ts +1 -0
- package/dist/modules/contentful.spec.js +42 -0
- package/dist/modules/contentful.spec.js.map +1 -0
- package/package.json +2 -2
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ContentfulLocale } from '@dcl/schemas';
|
|
3
3
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
4
|
-
import { getAssetUrl } from '../../modules/contentful';
|
|
4
|
+
import { getAssetAspectRatio, getAssetUrl } from '../../modules/contentful';
|
|
5
5
|
import { useTabletAndBelowMediaQuery } from '../Media';
|
|
6
6
|
import { ContentfulRichText } from './ContentfulRichText';
|
|
7
|
-
import { BannerContainer, Button, ButtonContainer, Content, LoadingContainer, Logo, Text, Title } from './Banner.styled';
|
|
7
|
+
import { BackgroundSizer, BannerContainer, Button, ButtonContainer, Content, Layout, LoadingContainer, Logo, Text, Title } from './Banner.styled';
|
|
8
8
|
const convertAlignmentToFlex = (alignment) => {
|
|
9
9
|
switch (alignment) {
|
|
10
10
|
case 'left':
|
|
@@ -28,7 +28,9 @@ export const Banner = (props) => {
|
|
|
28
28
|
return null;
|
|
29
29
|
}
|
|
30
30
|
// Build the parameters based on the size of the screen
|
|
31
|
-
const
|
|
31
|
+
const background = isMobileOrTablet ? fields.mobileBackground[ContentfulLocale.enUS] : fields.fullSizeBackground[ContentfulLocale.enUS];
|
|
32
|
+
const bannerBackgroundImage = getAssetUrl(assets, ContentfulLocale.enUS, background);
|
|
33
|
+
const bannerAspectRatio = getAssetAspectRatio(assets, ContentfulLocale.enUS, background);
|
|
32
34
|
const title = isMobileOrTablet ? fields.mobileTitle[locale] : fields.desktopTitle[locale];
|
|
33
35
|
const titleAlignment = (isMobileOrTablet ? fields.mobileTitleAlignment[ContentfulLocale.enUS] : fields.desktopTitleAlignment[ContentfulLocale.enUS])?.toLowerCase();
|
|
34
36
|
const text = isMobileOrTablet ? fields.mobileText[locale] : fields.desktopText[locale];
|
|
@@ -36,6 +38,7 @@ export const Banner = (props) => {
|
|
|
36
38
|
const buttonAlignment = convertAlignmentToFlex((isMobileOrTablet
|
|
37
39
|
? fields.mobileButtonAlignment[ContentfulLocale.enUS]
|
|
38
40
|
: fields.desktopButtonAlignment[ContentfulLocale.enUS])?.toLowerCase());
|
|
39
|
-
|
|
41
|
+
const isCopyCentered = titleAlignment === 'center' || textAlignment === 'center';
|
|
42
|
+
return (_jsxs(BannerContainer, { background: bannerBackgroundImage, children: [bannerAspectRatio ? _jsx(BackgroundSizer, { aspectRatio: bannerAspectRatio }) : null, _jsxs(Layout, { children: [_jsxs(Content, { constrainedWidth: !isCopyCentered, children: [_jsx(Title, { variant: "h1", textAlign: titleAlignment, children: title }), _jsx(Text, { textAlign: textAlignment, children: text ? _jsx(ContentfulRichText, { document: text }) : null }), fields.showButton[ContentfulLocale.enUS] && fields.buttonLink?.[ContentfulLocale.enUS] && fields.buttonsText?.[locale] ? (_jsx(ButtonContainer, { justifyContent: buttonAlignment, children: _jsx(Button, { onClick: onClick, href: fields.buttonLink[ContentfulLocale.enUS], variant: "contained", disableElevation: true, children: fields.buttonsText[locale] }) })) : null] }), fields.logo && fields.logo[ContentfulLocale.enUS] && (_jsx(Logo, { src: getAssetUrl(assets, ContentfulLocale.enUS, fields.logo[ContentfulLocale.enUS]), alt: "Banner logo" }))] })] }));
|
|
40
43
|
};
|
|
41
44
|
//# sourceMappingURL=Banner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,gBAAgB,MAAM,gCAAgC,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ContentfulLocale } from '@dcl/schemas';
|
|
2
|
+
import type { BannerFields, ContentfulAsset } from '@dcl/schemas';
|
|
3
|
+
import type { StoryObj } from '@storybook/react';
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: import("react").FC<import("./Banner.types").BannerProps>;
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
tags: string[];
|
|
11
|
+
args: {
|
|
12
|
+
fields: BannerFields;
|
|
13
|
+
assets: Record<string, ContentfulAsset>;
|
|
14
|
+
isLoading: false;
|
|
15
|
+
error: null;
|
|
16
|
+
locale: ContentfulLocale.enUS;
|
|
17
|
+
};
|
|
18
|
+
argTypes: {
|
|
19
|
+
locale: {
|
|
20
|
+
control: string;
|
|
21
|
+
options: ContentfulLocale[];
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
type Story = StoryObj<typeof meta>;
|
|
26
|
+
declare const Default: Story;
|
|
27
|
+
declare const WithoutLogo: Story;
|
|
28
|
+
declare const WithoutButton: Story;
|
|
29
|
+
declare const CenteredContent: Story;
|
|
30
|
+
declare const RightAlignedContent: Story;
|
|
31
|
+
declare const Localized: Story;
|
|
32
|
+
declare const Loading: Story;
|
|
33
|
+
declare const WithError: Story;
|
|
34
|
+
export default meta;
|
|
35
|
+
export { Default, WithoutLogo, WithoutButton, CenteredContent, RightAlignedContent, Localized, Loading, WithError };
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { BLOCKS } from '@contentful/rich-text-types';
|
|
2
|
+
import { ContentfulLocale } from '@dcl/schemas';
|
|
3
|
+
import { Banner } from './Banner';
|
|
4
|
+
import bannerBackground from '../../Assets/custom-welcome-background.webp';
|
|
5
|
+
import bannerLogo from '../../Assets/dcl-logo-qr.svg';
|
|
6
|
+
const BACKGROUND_ASSET_ID = 'story-banner-background';
|
|
7
|
+
const LOGO_ASSET_ID = 'story-banner-logo';
|
|
8
|
+
// Bundled assets resolve to a relative path, and getAssetUrl only leaves the url untouched when it is already absolute.
|
|
9
|
+
const toAbsoluteUrl = (path) => new URL(path, window.location.href).href;
|
|
10
|
+
function localized(value) {
|
|
11
|
+
return { [ContentfulLocale.enUS]: value };
|
|
12
|
+
}
|
|
13
|
+
const assetLink = (id) => ({
|
|
14
|
+
sys: { type: 'Link', linkType: 'Asset', id }
|
|
15
|
+
});
|
|
16
|
+
const buildAsset = (id, url, contentType) => ({
|
|
17
|
+
metadata: { tags: [], concepts: [] },
|
|
18
|
+
sys: {
|
|
19
|
+
space: { sys: { type: 'Link', linkType: 'Space', id: 'story-space' } },
|
|
20
|
+
id,
|
|
21
|
+
type: 'Asset',
|
|
22
|
+
createdAt: '2024-01-01T00:00:00.000Z',
|
|
23
|
+
updatedAt: '2024-01-01T00:00:00.000Z',
|
|
24
|
+
environment: { sys: { type: 'Link', linkType: 'Environment', id: 'master' } },
|
|
25
|
+
publishedVersion: 1,
|
|
26
|
+
revision: 1
|
|
27
|
+
},
|
|
28
|
+
fields: {
|
|
29
|
+
title: localized(id),
|
|
30
|
+
description: localized(''),
|
|
31
|
+
file: localized({ url, details: { size: 0 }, fileName: id, contentType })
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
const richText = (value) => ({
|
|
35
|
+
nodeType: BLOCKS.DOCUMENT,
|
|
36
|
+
data: {},
|
|
37
|
+
content: [
|
|
38
|
+
{
|
|
39
|
+
nodeType: BLOCKS.PARAGRAPH,
|
|
40
|
+
data: {},
|
|
41
|
+
content: [{ nodeType: 'text', value, marks: [], data: {} }]
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
});
|
|
45
|
+
const assets = {
|
|
46
|
+
[BACKGROUND_ASSET_ID]: buildAsset(BACKGROUND_ASSET_ID, toAbsoluteUrl(bannerBackground), 'image/webp'),
|
|
47
|
+
[LOGO_ASSET_ID]: buildAsset(LOGO_ASSET_ID, toAbsoluteUrl(bannerLogo), 'image/svg+xml')
|
|
48
|
+
};
|
|
49
|
+
const baseFields = {
|
|
50
|
+
desktopTitle: localized('Step into Decentraland'),
|
|
51
|
+
desktopTitleAlignment: localized('Left'),
|
|
52
|
+
mobileTitle: localized('Step into Decentraland'),
|
|
53
|
+
mobileTitleAlignment: localized('Center'),
|
|
54
|
+
desktopText: localized(richText('Explore worlds, collect wearables and join live events built by the community.')),
|
|
55
|
+
desktopTextAlignment: localized('Left'),
|
|
56
|
+
mobileText: localized(richText('Explore worlds, collect wearables and join live events.')),
|
|
57
|
+
mobileTextAlignment: localized('Center'),
|
|
58
|
+
showButton: localized(true),
|
|
59
|
+
buttonLink: localized('https://decentraland.org/download/'),
|
|
60
|
+
buttonsText: localized('Explore now'),
|
|
61
|
+
desktopButtonAlignment: localized('Left'),
|
|
62
|
+
mobileButtonAlignment: localized('Center'),
|
|
63
|
+
fullSizeBackground: localized(assetLink(BACKGROUND_ASSET_ID)),
|
|
64
|
+
mobileBackground: localized(assetLink(BACKGROUND_ASSET_ID)),
|
|
65
|
+
logo: localized(assetLink(LOGO_ASSET_ID))
|
|
66
|
+
};
|
|
67
|
+
const meta = {
|
|
68
|
+
title: 'Decentraland UI/Banner',
|
|
69
|
+
component: Banner,
|
|
70
|
+
parameters: {
|
|
71
|
+
layout: 'fullscreen'
|
|
72
|
+
},
|
|
73
|
+
tags: ['autodocs'],
|
|
74
|
+
args: {
|
|
75
|
+
fields: baseFields,
|
|
76
|
+
assets,
|
|
77
|
+
isLoading: false,
|
|
78
|
+
error: null,
|
|
79
|
+
locale: ContentfulLocale.enUS
|
|
80
|
+
},
|
|
81
|
+
argTypes: {
|
|
82
|
+
locale: {
|
|
83
|
+
control: 'select',
|
|
84
|
+
options: Object.values(ContentfulLocale)
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
const Default = {};
|
|
89
|
+
const WithoutLogo = {
|
|
90
|
+
args: {
|
|
91
|
+
fields: { ...baseFields, logo: undefined }
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
const WithoutButton = {
|
|
95
|
+
args: {
|
|
96
|
+
fields: { ...baseFields, showButton: localized(false) }
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
const CenteredContent = {
|
|
100
|
+
args: {
|
|
101
|
+
fields: {
|
|
102
|
+
...baseFields,
|
|
103
|
+
logo: undefined,
|
|
104
|
+
desktopTitleAlignment: localized('Center'),
|
|
105
|
+
desktopTextAlignment: localized('Center'),
|
|
106
|
+
desktopButtonAlignment: localized('Center')
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
const RightAlignedContent = {
|
|
111
|
+
args: {
|
|
112
|
+
fields: {
|
|
113
|
+
...baseFields,
|
|
114
|
+
logo: undefined,
|
|
115
|
+
desktopTitleAlignment: localized('Right'),
|
|
116
|
+
desktopTextAlignment: localized('Right'),
|
|
117
|
+
desktopButtonAlignment: localized('Right')
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
const Localized = {
|
|
122
|
+
args: {
|
|
123
|
+
locale: ContentfulLocale.es,
|
|
124
|
+
fields: {
|
|
125
|
+
...baseFields,
|
|
126
|
+
desktopTitle: { [ContentfulLocale.enUS]: 'Step into Decentraland', [ContentfulLocale.es]: 'Entrá a Decentraland' },
|
|
127
|
+
desktopText: {
|
|
128
|
+
[ContentfulLocale.enUS]: richText('Explore worlds, collect wearables and join live events built by the community.'),
|
|
129
|
+
[ContentfulLocale.es]: richText('Explorá mundos, coleccioná wearables y sumate a los eventos de la comunidad.')
|
|
130
|
+
},
|
|
131
|
+
buttonsText: { [ContentfulLocale.enUS]: 'Explore now', [ContentfulLocale.es]: 'Explorar ahora' }
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
const Loading = {
|
|
136
|
+
args: {
|
|
137
|
+
isLoading: true
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
// The banner renders nothing when the entry failed to load, so consumers can keep the layout untouched.
|
|
141
|
+
const WithError = {
|
|
142
|
+
args: {
|
|
143
|
+
fields: null,
|
|
144
|
+
error: 'Failed to fetch the banner entry'
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
// eslint-disable-next-line import/no-default-export
|
|
148
|
+
export default meta;
|
|
149
|
+
export { Default, WithoutLogo, WithoutButton, CenteredContent, RightAlignedContent, Localized, Loading, WithError };
|
|
150
|
+
//# sourceMappingURL=Banner.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,18 @@ declare const BannerContainer: import("@emotion/styled").StyledComponent<import(
|
|
|
10
10
|
} & {
|
|
11
11
|
background: string;
|
|
12
12
|
}, {}, {}>;
|
|
13
|
+
declare const BackgroundSizer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
|
+
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
15
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
|
|
16
|
+
theme?: import("@emotion/react").Theme;
|
|
17
|
+
} & {
|
|
18
|
+
aspectRatio: number;
|
|
19
|
+
}, {}, {}>;
|
|
20
|
+
declare const Layout: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
21
|
+
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
22
|
+
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
|
|
23
|
+
theme?: import("@emotion/react").Theme;
|
|
24
|
+
}, {}, {}>;
|
|
13
25
|
declare const ContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
26
|
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
15
27
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
|
|
@@ -19,6 +31,8 @@ declare const Content: import("@emotion/styled").StyledComponent<import("@mui/sy
|
|
|
19
31
|
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
20
32
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
|
|
21
33
|
theme?: import("@emotion/react").Theme;
|
|
34
|
+
} & {
|
|
35
|
+
constrainedWidth?: boolean;
|
|
22
36
|
}, {}, {}>;
|
|
23
37
|
declare const Logo: import("@emotion/styled").StyledComponent<{
|
|
24
38
|
theme?: import("@emotion/react").Theme;
|
|
@@ -44,4 +58,4 @@ declare const Button: import("@emotion/styled").StyledComponent<import("@mui/mat
|
|
|
44
58
|
}, "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "size"> & {
|
|
45
59
|
theme?: import("@emotion/react").Theme;
|
|
46
60
|
}, {}, {}>;
|
|
47
|
-
export { LoadingContainer, BannerContainer, Content, ContentWrapper, Logo, Title, Text, ButtonContainer, Button };
|
|
61
|
+
export { LoadingContainer, BannerContainer, BackgroundSizer, Layout, Content, ContentWrapper, Logo, Title, Text, ButtonContainer, Button };
|
|
@@ -7,20 +7,42 @@ const LoadingContainer = styled(Box)({
|
|
|
7
7
|
alignItems: 'center',
|
|
8
8
|
width: '100%'
|
|
9
9
|
});
|
|
10
|
+
const BANNER_AREA = 'banner';
|
|
10
11
|
const BannerContainer = styled(Box, {
|
|
11
12
|
shouldForwardProp: prop => prop !== 'background'
|
|
12
13
|
})(props => {
|
|
13
|
-
const {
|
|
14
|
+
const { background } = props;
|
|
14
15
|
return {
|
|
15
16
|
width: '100%',
|
|
16
17
|
overflow: 'hidden',
|
|
18
|
+
// The sizer and the layout share a single grid area, so the row ends up as tall as the taller of
|
|
19
|
+
// the two: never shorter than the artwork, never shorter than the content.
|
|
20
|
+
display: 'grid',
|
|
21
|
+
gridTemplateAreas: `"${BANNER_AREA}"`,
|
|
22
|
+
backgroundImage: `url(${background})`,
|
|
23
|
+
backgroundSize: 'cover',
|
|
24
|
+
backgroundPosition: 'center'
|
|
25
|
+
};
|
|
26
|
+
});
|
|
27
|
+
// The background is painted with `cover`, so a banner shorter than its artwork crops it. This gives the
|
|
28
|
+
// grid row a floor at the artwork's own ratio without ever clipping content that needs more room.
|
|
29
|
+
const BackgroundSizer = styled(Box, {
|
|
30
|
+
shouldForwardProp: prop => prop !== 'aspectRatio'
|
|
31
|
+
})(props => ({
|
|
32
|
+
gridArea: BANNER_AREA,
|
|
33
|
+
alignSelf: 'start',
|
|
34
|
+
width: '100%',
|
|
35
|
+
aspectRatio: `${props.aspectRatio}`,
|
|
36
|
+
pointerEvents: 'none'
|
|
37
|
+
}));
|
|
38
|
+
const Layout = styled(Box)(props => {
|
|
39
|
+
const { theme } = props;
|
|
40
|
+
return {
|
|
41
|
+
gridArea: BANNER_AREA,
|
|
17
42
|
display: 'flex',
|
|
18
43
|
padding: '2rem',
|
|
19
44
|
justifyContent: 'space-between',
|
|
20
45
|
flexDirection: 'row',
|
|
21
|
-
backgroundImage: `url(${background})`,
|
|
22
|
-
backgroundSize: 'cover',
|
|
23
|
-
backgroundPosition: 'center',
|
|
24
46
|
alignItems: 'center',
|
|
25
47
|
[theme.breakpoints.down('sm')]: {
|
|
26
48
|
flexDirection: 'column-reverse'
|
|
@@ -33,12 +55,23 @@ const ContentWrapper = styled(Box)({
|
|
|
33
55
|
flexGrow: 1,
|
|
34
56
|
marginRight: '20px'
|
|
35
57
|
});
|
|
36
|
-
const Content = styled(Box
|
|
37
|
-
|
|
58
|
+
const Content = styled(Box, {
|
|
59
|
+
shouldForwardProp: prop => prop !== 'constrainedWidth'
|
|
60
|
+
})(props => {
|
|
61
|
+
const { theme, constrainedWidth } = props;
|
|
38
62
|
return {
|
|
39
63
|
display: 'flex',
|
|
40
64
|
flexDirection: 'column',
|
|
41
65
|
gap: '0.1rem',
|
|
66
|
+
// Side aligned copy sits next to the subject of the artwork, so keep it in its own half instead of
|
|
67
|
+
// letting it stretch across the whole banner. Centered copy uses the banner as its canvas.
|
|
68
|
+
...(constrainedWidth
|
|
69
|
+
? {
|
|
70
|
+
[theme.breakpoints.up('sm')]: {
|
|
71
|
+
maxWidth: '50%'
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
: {}),
|
|
42
75
|
[theme.breakpoints.down('sm')]: {
|
|
43
76
|
padding: '1rem'
|
|
44
77
|
}
|
|
@@ -90,5 +123,5 @@ const Button = styled(MuiButton)({
|
|
|
90
123
|
textTransform: 'uppercase',
|
|
91
124
|
minWidth: '300px'
|
|
92
125
|
});
|
|
93
|
-
export { LoadingContainer, BannerContainer, Content, ContentWrapper, Logo, Title, Text, ButtonContainer, Button };
|
|
126
|
+
export { LoadingContainer, BannerContainer, BackgroundSizer, Layout, Content, ContentWrapper, Logo, Title, Text, ButtonContainer, Button };
|
|
94
127
|
//# sourceMappingURL=Banner.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.styled.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,IAAI,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,MAAM;CACd,CAAC,CAAA;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,EAAE;IAClC,iBAAiB,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,YAAY;CACjD,CAAC,CAEC,KAAK,CAAC,EAAE;IACT,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Banner.styled.js","sourceRoot":"","sources":["../../../src/components/Banner/Banner.styled.ts"],"names":[],"mappings":"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"}
|
package/dist/config/env/dev.json
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"CONTENTFUL_SPACE_ID": "ea2ybdmmn1kv",
|
|
18
18
|
"CONTENTFUL_ENV": "master",
|
|
19
19
|
"CONTENTFUL_NAVBAR_ENTRY_ID": "18g1DzIyBxvu0steSwKyQr",
|
|
20
|
-
"CONTENTFUL_CONTENTFUL_CDN_URL": "https://cms.decentraland.org",
|
|
20
|
+
"CONTENTFUL_CONTENTFUL_CDN_URL": "https://cms-api.decentraland.org",
|
|
21
21
|
"MARKETPLACE_NAMES_URL": "https://decentraland.zone/marketplace/names/claim",
|
|
22
22
|
"MARKETPLACE_LANDS_URL": "https://decentraland.zone/marketplace/lands",
|
|
23
23
|
"MARKETPLACE_MY_ASSETS_URL": "https://decentraland.zone/marketplace/account",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"CONTENTFUL_SPACE_ID": "ea2ybdmmn1kv",
|
|
18
18
|
"CONTENTFUL_ENV": "master",
|
|
19
19
|
"CONTENTFUL_NAVBAR_ENTRY_ID": "18g1DzIyBxvu0steSwKyQr",
|
|
20
|
-
"CONTENTFUL_CONTENTFUL_CDN_URL": "https://cms.decentraland.org",
|
|
20
|
+
"CONTENTFUL_CONTENTFUL_CDN_URL": "https://cms-api.decentraland.org",
|
|
21
21
|
"MARKETPLACE_NAMES_URL": "https://decentraland.org/marketplace/names/claim",
|
|
22
22
|
"MARKETPLACE_LANDS_URL": "https://decentraland.org/marketplace/lands",
|
|
23
23
|
"MARKETPLACE_MY_ASSETS_URL": "https://decentraland.org/marketplace/account",
|
package/dist/config/env/stg.json
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"CONTENTFUL_SPACE_ID": "ea2ybdmmn1kv",
|
|
18
18
|
"CONTENTFUL_ENV": "master",
|
|
19
19
|
"CONTENTFUL_NAVBAR_ENTRY_ID": "18g1DzIyBxvu0steSwKyQr",
|
|
20
|
-
"CONTENTFUL_CONTENTFUL_CDN_URL": "https://cms.decentraland.org",
|
|
20
|
+
"CONTENTFUL_CONTENTFUL_CDN_URL": "https://cms-api.decentraland.org",
|
|
21
21
|
"MARKETPLACE_NAMES_URL": "https://decentraland.today/marketplace/names/claim",
|
|
22
22
|
"MARKETPLACE_LANDS_URL": "https://decentraland.today/marketplace/lands",
|
|
23
23
|
"MARKETPLACE_MY_ASSETS_URL": "https://decentraland.today/marketplace/account",
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { ContentfulAsset, ContentfulLocale, SysLink } from '@dcl/schemas';
|
|
2
2
|
declare const getAssetUrl: (assets: Record<string, ContentfulAsset>, locale: ContentfulLocale, assetLink?: SysLink<"Asset">) => string;
|
|
3
|
-
|
|
3
|
+
declare const getAssetAspectRatio: (assets: Record<string, ContentfulAsset>, locale: ContentfulLocale, assetLink?: SysLink<"Asset">) => number | undefined;
|
|
4
|
+
export { getAssetUrl, getAssetAspectRatio };
|
|
@@ -7,5 +7,13 @@ const getAssetUrl = (assets, locale, assetLink) => {
|
|
|
7
7
|
}
|
|
8
8
|
return '';
|
|
9
9
|
};
|
|
10
|
-
|
|
10
|
+
const getAssetAspectRatio = (assets, locale, assetLink) => {
|
|
11
|
+
if (!assetLink)
|
|
12
|
+
return undefined;
|
|
13
|
+
const image = assets[assetLink.sys.id]?.fields.file[locale]?.details?.image;
|
|
14
|
+
if (!image?.width || !image?.height)
|
|
15
|
+
return undefined;
|
|
16
|
+
return image.width / image.height;
|
|
17
|
+
};
|
|
18
|
+
export { getAssetUrl, getAssetAspectRatio };
|
|
11
19
|
//# sourceMappingURL=contentful.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contentful.js","sourceRoot":"","sources":["../../src/modules/contentful.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,CAAC,MAAuC,EAAE,MAAwB,EAAE,SAA4B,EAAU,EAAE;IAC9H,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,CAAA;IACzB,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAA;IACnE,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,QAAQ,EAAE,CAAA;IACvG,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
1
|
+
{"version":3,"file":"contentful.js","sourceRoot":"","sources":["../../src/modules/contentful.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,CAAC,MAAuC,EAAE,MAAwB,EAAE,SAA4B,EAAU,EAAE;IAC9H,IAAI,CAAC,SAAS;QAAE,OAAO,EAAE,CAAA;IACzB,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAA;IACnE,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,QAAQ,EAAE,CAAA;IACvG,CAAC;IACD,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAC1B,MAAuC,EACvC,MAAwB,EACxB,SAA4B,EACR,EAAE;IACtB,IAAI,CAAC,SAAS;QAAE,OAAO,SAAS,CAAA;IAChC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,KAAK,CAAA;IAC3E,IAAI,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,SAAS,CAAA;IACrD,OAAO,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAA;AACnC,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ContentfulLocale } from '@dcl/schemas';
|
|
2
|
+
import { getAssetAspectRatio } from './contentful';
|
|
3
|
+
const ASSET_ID = 'asset-id';
|
|
4
|
+
const assetLink = {
|
|
5
|
+
sys: { type: 'Link', linkType: 'Asset', id: ASSET_ID }
|
|
6
|
+
};
|
|
7
|
+
const buildAsset = (file) => ({
|
|
8
|
+
metadata: { tags: [], concepts: [] },
|
|
9
|
+
sys: { id: ASSET_ID, type: 'Asset' },
|
|
10
|
+
fields: {
|
|
11
|
+
title: { [ContentfulLocale.enUS]: 'title' },
|
|
12
|
+
description: { [ContentfulLocale.enUS]: '' },
|
|
13
|
+
file: { [ContentfulLocale.enUS]: file }
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
const buildAssets = (file) => ({
|
|
17
|
+
[ASSET_ID]: buildAsset(file)
|
|
18
|
+
});
|
|
19
|
+
describe('getAssetAspectRatio', () => {
|
|
20
|
+
it('should return undefined when the asset link is not defined', () => {
|
|
21
|
+
expect(getAssetAspectRatio(buildAssets({ details: { image: { width: 1920, height: 300 } } }), ContentfulLocale.enUS)).toBeUndefined();
|
|
22
|
+
});
|
|
23
|
+
it('should return undefined when the asset is missing from the assets map', () => {
|
|
24
|
+
expect(getAssetAspectRatio({}, ContentfulLocale.enUS, assetLink)).toBeUndefined();
|
|
25
|
+
});
|
|
26
|
+
it('should return undefined when the asset has no details', () => {
|
|
27
|
+
expect(getAssetAspectRatio(buildAssets({ url: 'https://an.url/image.jpg' }), ContentfulLocale.enUS, assetLink)).toBeUndefined();
|
|
28
|
+
});
|
|
29
|
+
it('should return undefined when the details have no image dimensions', () => {
|
|
30
|
+
expect(getAssetAspectRatio(buildAssets({ details: { size: 100 } }), ContentfulLocale.enUS, assetLink)).toBeUndefined();
|
|
31
|
+
});
|
|
32
|
+
it('should return undefined when a dimension is zero', () => {
|
|
33
|
+
expect(getAssetAspectRatio(buildAssets({ details: { image: { width: 1920, height: 0 } } }), ContentfulLocale.enUS, assetLink)).toBeUndefined();
|
|
34
|
+
});
|
|
35
|
+
it('should return undefined when the requested locale has no file', () => {
|
|
36
|
+
expect(getAssetAspectRatio(buildAssets({ details: { image: { width: 1920, height: 300 } } }), ContentfulLocale.es, assetLink)).toBeUndefined();
|
|
37
|
+
});
|
|
38
|
+
it('should return the ratio between the width and the height of the image', () => {
|
|
39
|
+
expect(getAssetAspectRatio(buildAssets({ details: { image: { width: 1920, height: 300 } } }), ContentfulLocale.enUS, assetLink)).toBe(6.4);
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
//# sourceMappingURL=contentful.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"contentful.spec.js","sourceRoot":"","sources":["../../src/modules/contentful.spec.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "decentraland-ui2",
|
|
3
|
-
"version": "3.19.
|
|
3
|
+
"version": "3.19.1-32191056335.commit-087ddff",
|
|
4
4
|
"description": "Decentraland's UI components and styles",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -117,5 +117,5 @@
|
|
|
117
117
|
"url": "https://github.com/decentraland/ui2/issues"
|
|
118
118
|
},
|
|
119
119
|
"homepage": "https://github.com/decentraland/ui2#readme",
|
|
120
|
-
"commit": "
|
|
120
|
+
"commit": "087ddfffa8ec4dc6591bdab2c562c23be6438aa9"
|
|
121
121
|
}
|