@universal-tennis/ui-shared 0.1.92 → 0.1.94
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/stories/molecules/GlobalNavItem/GlobalNavItem.js +1 -1
- package/dist/stories/molecules/GlobalNavItem/GlobalNavItem.js.map +1 -1
- package/dist/stories/organisms/Footer/Footer.d.ts +1 -1
- package/dist/stories/organisms/Footer/Footer.js +78 -38
- package/dist/stories/organisms/Footer/Footer.js.map +1 -1
- package/dist/stories/organisms/Footer/sharedTypes.d.ts +2 -0
- package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js +2 -2
- package/dist/stories/organisms/GlobalNavigation/GlobalNavigation.js.map +1 -1
- package/package.json +2 -2
- package/public/app-store-badge.png +0 -0
- package/public/google-play-icon.png +0 -0
- package/src/stories/molecules/GlobalNavItem/GlobalNavItem.tsx +1 -1
- package/src/stories/organisms/Footer/Footer.tsx +117 -70
- package/src/stories/organisms/Footer/sharedTypes.ts +3 -0
- package/src/stories/organisms/GlobalNavigation/GlobalNavigation.tsx +2 -2
|
@@ -21,7 +21,7 @@ function GlobalNavItem({ item, onClick }) {
|
|
|
21
21
|
'&:hover': { backgroundColor: 'transparent' }
|
|
22
22
|
} }),
|
|
23
23
|
React.createElement(Box, { display: "flex", alignItems: "center", height: "32px", width: "100%", minWidth: "194px", justifyContent: "space-between" },
|
|
24
|
-
React.createElement(Typography, { weight: 325, category: "secondary", size: "small-medium" }, item === null || item === void 0 ? void 0 : item.label),
|
|
24
|
+
React.createElement(Typography, { weight: 325, category: "secondary", size: "small-medium", color: "var(--black)" }, item === null || item === void 0 ? void 0 : item.label),
|
|
25
25
|
React.createElement(RightChevron, { size: 12, color: "var(--black)" }))));
|
|
26
26
|
}
|
|
27
27
|
export default GlobalNavItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalNavItem.js","sourceRoot":"","sources":["../../../../src/stories/molecules/GlobalNavItem/GlobalNavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAa3D,SAAS,aAAa,CAAC,EACrB,IAAI,EAAE,OAAO,EACgB;IAC7B,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;QACrC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,MAAM,kBACH,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAC9B,aAAa,CAAC;QAChB,QAAQ,EAAE,wBAAwB;QAClC,OAAO,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK;QACpB,QAAQ,EAAE,mBAAmB;KAC9B,CAAC,IACF,EAAE,EAAE;YACF,aAAa,EAAE,MAAM;YACrB,KAAK,EAAE,cAAc;YACrB,OAAO,EAAE,CAAC;YACV,YAAY,EAAE,iCAAiC;YAC/C,YAAY,EAAE,CAAC;YACf,SAAS,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE;SAC9C;QAED,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,cAAc,EAAC,eAAe;YAC9G,oBAAC,UAAU,IAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAc;
|
|
1
|
+
{"version":3,"file":"GlobalNavItem.js","sourceRoot":"","sources":["../../../../src/stories/molecules/GlobalNavItem/GlobalNavItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAa3D,SAAS,aAAa,CAAC,EACrB,IAAI,EAAE,OAAO,EACgB;IAC7B,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;QACrC,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,MAAM,kBACH,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAC9B,aAAa,CAAC;QAChB,QAAQ,EAAE,wBAAwB;QAClC,OAAO,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK;QACpB,QAAQ,EAAE,mBAAmB;KAC9B,CAAC,IACF,EAAE,EAAE;YACF,aAAa,EAAE,MAAM;YACrB,KAAK,EAAE,cAAc;YACrB,OAAO,EAAE,CAAC;YACV,YAAY,EAAE,iCAAiC;YAC/C,YAAY,EAAE,CAAC;YACf,SAAS,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE;SAC9C;QAED,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,EAAC,cAAc,EAAC,eAAe;YAC9G,oBAAC,UAAU,IAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,cAAc,IAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAc;YACjH,oBAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,cAAc,GAAG,CAC7C,CACD,CACZ,CAAC;AACJ,CAAC;AACD,eAAe,aAAa,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FooterProps } from './sharedTypes';
|
|
3
|
-
declare function Footer({ exploreItems,
|
|
3
|
+
declare function Footer({ exploreItems, providerItems, moreItems, supportItems, onSocialMediaClick, sx }: FooterProps): JSX.Element;
|
|
4
4
|
export default Footer;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { styled } from "@mui/material/styles";
|
|
2
3
|
import Box from '@mui/material/Box';
|
|
3
|
-
import Grid from '@mui/material/Grid';
|
|
4
4
|
import IconButton from '@mui/material/IconButton';
|
|
5
|
-
import
|
|
5
|
+
import Link from '@mui/material/Link';
|
|
6
6
|
import { SocialMediaIds } from '../../utils/constants';
|
|
7
7
|
import FooterSection from '../../molecules/FooterSection/FooterSection';
|
|
8
8
|
import SocialMediaInstagramIcon from '../../atoms/Icons/SocialMediaInstagramIcon';
|
|
@@ -12,49 +12,89 @@ import SocialMediaYoutubeIcon from '../../atoms/Icons/SocialMediaYoutubeIcon';
|
|
|
12
12
|
import SocialMediaFacebookIcon from '../../atoms/Icons/SocialMediaFacebookIcon';
|
|
13
13
|
import Typography from '../../atoms/Typography/Typography';
|
|
14
14
|
import utrLogo from '../../assets/utr-sports-logo.svg';
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
import googlePlayLogo from '../../../../public/google-play-icon.png';
|
|
16
|
+
import appStoreBadge from '../../../../public/app-store-badge.png';
|
|
17
|
+
function Footer({ exploreItems, providerItems, moreItems, supportItems, onSocialMediaClick, sx }) {
|
|
17
18
|
const { X, FACEBOOK, INSTAGRAM, TIKTOK, YOUTUBE } = SocialMediaIds;
|
|
19
|
+
const googlePlayLink = "https://play.google.com/store/apps/details?id=com.ut.utr";
|
|
20
|
+
const appStoreLink = "https://apps.apple.com/us/app/utr-sports/id1519232627";
|
|
18
21
|
const handleOnSocialMediaClick = (id) => {
|
|
19
22
|
onSocialMediaClick(id);
|
|
20
23
|
};
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
24
|
+
const StyledNavigationContainer = styled(Box)(({ theme }) => ({
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexWrap: 'wrap',
|
|
27
|
+
[theme.breakpoints.up('md')]: {
|
|
28
|
+
flexWrap: 'no-wrap',
|
|
29
|
+
}
|
|
30
|
+
}));
|
|
31
|
+
const StyledContentContainer = styled(Box)(({ theme }) => ({
|
|
32
|
+
display: "flex",
|
|
33
|
+
flexDirection: "column",
|
|
34
|
+
justifyContent: "space-between",
|
|
35
|
+
padding: "32px",
|
|
36
|
+
[theme.breakpoints.up('md')]: {
|
|
37
|
+
flexDirection: "row",
|
|
38
|
+
padding: "32px 64px",
|
|
39
|
+
}
|
|
40
|
+
}));
|
|
41
|
+
const StyledNavigation = styled(Box)(({ theme }) => ({
|
|
42
|
+
flex: "50%",
|
|
43
|
+
marginBottom: "32px",
|
|
44
|
+
[theme.breakpoints.up('lg')]: {
|
|
45
|
+
flex: "auto",
|
|
46
|
+
marginRight: "75px",
|
|
47
|
+
marginBottom: 0,
|
|
48
|
+
'&:last-child': {
|
|
49
|
+
marginRight: 0,
|
|
50
|
+
},
|
|
51
|
+
}
|
|
52
|
+
}));
|
|
53
|
+
const StyledLogoContainer = styled(Box)(({ theme }) => ({
|
|
54
|
+
display: "flex",
|
|
55
|
+
flexDirection: "column",
|
|
56
|
+
margin: "0 auto",
|
|
57
|
+
[theme.breakpoints.up('lg')]: {
|
|
58
|
+
margin: 0
|
|
59
|
+
}
|
|
60
|
+
}));
|
|
61
|
+
const StyledBorder = styled(Box)(({ theme }) => ({
|
|
62
|
+
borderBottom: ".5px solid var(--darkest-grey)",
|
|
63
|
+
margin: "32px 0px",
|
|
64
|
+
[theme.breakpoints.up('md')]: {
|
|
65
|
+
display: "none"
|
|
66
|
+
}
|
|
67
|
+
}));
|
|
68
|
+
return (React.createElement(Box, { sx: Object.assign({ backgroundColor: 'var(--black)' }, sx) },
|
|
69
|
+
React.createElement(StyledContentContainer, null,
|
|
70
|
+
React.createElement(StyledLogoContainer, null,
|
|
71
|
+
React.createElement("img", { alt: "UTR Sports logo", width: "205", height: "51", src: utrLogo }),
|
|
72
|
+
React.createElement(Box, { display: "flex", my: 2, justifyContent: "space-between", width: "100%" },
|
|
73
|
+
React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(X) },
|
|
74
|
+
React.createElement(SocialMediaXIcon, { size: 27, color: "var(--white)" })),
|
|
75
|
+
React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(FACEBOOK) },
|
|
76
|
+
React.createElement(SocialMediaFacebookIcon, { size: 27, color: "var(--white)" })),
|
|
77
|
+
React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(INSTAGRAM) },
|
|
78
|
+
React.createElement(SocialMediaInstagramIcon, { size: 27, color: "var(--white)" })),
|
|
79
|
+
React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(TIKTOK) },
|
|
80
|
+
React.createElement(SocialMediaTikTokIcon, { size: 27, color: "var(--white)" })),
|
|
81
|
+
React.createElement(IconButton, { sx: { p: 0 }, onClick: () => handleOnSocialMediaClick(YOUTUBE) },
|
|
82
|
+
React.createElement(SocialMediaYoutubeIcon, { size: 27, color: "var(--white)" }))),
|
|
83
|
+
React.createElement(Box, { display: "flex", justifyContent: "space-between", width: "100%" },
|
|
84
|
+
React.createElement(Link, { href: googlePlayLink, target: "_blank", rel: "noopener" },
|
|
85
|
+
React.createElement("img", { alt: "Google play logo", width: "96", height: "28", src: googlePlayLogo })),
|
|
86
|
+
React.createElement(Link, { href: appStoreLink, target: "_blank", rel: "noopener" },
|
|
87
|
+
React.createElement("img", { alt: "App store badge", width: "84", height: "28", src: appStoreBadge })))),
|
|
88
|
+
React.createElement(StyledBorder, null),
|
|
89
|
+
React.createElement(StyledNavigationContainer, null,
|
|
90
|
+
React.createElement(StyledNavigation, null,
|
|
39
91
|
React.createElement(FooterSection, { title: "Explore", items: exploreItems })),
|
|
40
|
-
React.createElement(
|
|
41
|
-
React.createElement(FooterSection, { title: "Events", items: eventItems })),
|
|
42
|
-
React.createElement(Grid, { item: true },
|
|
92
|
+
React.createElement(StyledNavigation, null,
|
|
43
93
|
React.createElement(FooterSection, { title: "Providers", items: providerItems })),
|
|
44
|
-
React.createElement(
|
|
94
|
+
React.createElement(StyledNavigation, null,
|
|
45
95
|
React.createElement(FooterSection, { title: "More", items: moreItems })),
|
|
46
|
-
React.createElement(
|
|
47
|
-
React.createElement(FooterSection, { title: "Support", items: supportItems }))))
|
|
48
|
-
React.createElement(Grid, { item: true },
|
|
49
|
-
React.createElement(Box, { mb: 2 },
|
|
50
|
-
React.createElement(FooterSection, { title: "Explore", items: exploreItems })),
|
|
51
|
-
React.createElement(Box, { mb: 3.3 },
|
|
52
|
-
React.createElement(FooterSection, { title: "Providers", items: providerItems })),
|
|
53
|
-
React.createElement(FooterSection, { title: "Support", items: supportItems })),
|
|
54
|
-
React.createElement(Grid, { item: true },
|
|
55
|
-
React.createElement(Box, { mb: 2 },
|
|
56
|
-
React.createElement(FooterSection, { title: "Events", items: eventItems })),
|
|
57
|
-
React.createElement(FooterSection, { title: "More", items: moreItems }))))),
|
|
96
|
+
React.createElement(StyledNavigation, null,
|
|
97
|
+
React.createElement(FooterSection, { title: "Support", items: supportItems })))),
|
|
58
98
|
React.createElement(Box, { display: "absolute", sx: { bottom: 24, borderTop: 1, borderColor: "var(--white)" } },
|
|
59
99
|
React.createElement(Typography, { p: 0.5, category: "secondary", size: "x-small-book-cap", color: "var(--white)", align: "center" }, `\u00A9 2024, UTR SPORTS`))));
|
|
60
100
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Footer/Footer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { SxProps, Theme } from '@mui/system';
|
|
1
2
|
export interface LinkItem {
|
|
2
3
|
href: string;
|
|
3
4
|
label: string;
|
|
@@ -11,4 +12,5 @@ export type FooterProps = {
|
|
|
11
12
|
moreItems: [LinkItem];
|
|
12
13
|
supportItems: [LinkItem];
|
|
13
14
|
onSocialMediaClick(id: number): VoidFunction;
|
|
15
|
+
sx?: SxProps<Theme>;
|
|
14
16
|
};
|
|
@@ -43,12 +43,12 @@ function GlobalNavigation({ showTennisItems, tennisNavItems, isAdultTeamPickleba
|
|
|
43
43
|
showTennisItems && (React.createElement(Box, { display: "flex", flexDirection: "column", width: "100%" },
|
|
44
44
|
React.createElement(Box, { display: "flex", alignItems: "center", gap: "7px", height: "30px", sx: { borderBottom: '.5px solid var(--darkest-grey)' } },
|
|
45
45
|
React.createElement(TennisBallIcon, { size: 18 }),
|
|
46
|
-
React.createElement(Typography, { category: "secondary", size: "medium-cap" }, "Tennis")), tennisNavItems === null || tennisNavItems === void 0 ? void 0 :
|
|
46
|
+
React.createElement(Typography, { category: "secondary", size: "medium-cap", color: "var(--black)" }, "Tennis")), tennisNavItems === null || tennisNavItems === void 0 ? void 0 :
|
|
47
47
|
tennisNavItems.map((item) => (React.createElement(GlobalNavItem, { item: item, key: item === null || item === void 0 ? void 0 : item.label, onClick: handleOnClick }))))),
|
|
48
48
|
showPickleballItems && (React.createElement(Box, { display: "flex", flexDirection: "column", width: "100%" },
|
|
49
49
|
React.createElement(Box, { display: "flex", alignItems: "center", gap: "7px", height: "30px", sx: { borderBottom: '.5px solid var(--darkest-grey)' } },
|
|
50
50
|
React.createElement(PickleballBallIcon, { size: 18 }),
|
|
51
|
-
React.createElement(Typography, { category: "secondary", size: "medium-cap" }, "Pickleball")), filteredPickleballNavItems === null || filteredPickleballNavItems === void 0 ? void 0 :
|
|
51
|
+
React.createElement(Typography, { category: "secondary", size: "medium-cap", color: "var(--black)" }, "Pickleball")), filteredPickleballNavItems === null || filteredPickleballNavItems === void 0 ? void 0 :
|
|
52
52
|
filteredPickleballNavItems.map((item) => (React.createElement(GlobalNavItem, { item: item, key: item === null || item === void 0 ? void 0 : item.label, onClick: handleOnClick }))))))));
|
|
53
53
|
}
|
|
54
54
|
export default GlobalNavigation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalNavigation.js","sourceRoot":"","sources":["../../../../src/stories/organisms/GlobalNavigation/GlobalNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,aAAa,MAAM,6CAA6C,CAAC;AACxE,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,kBAAkB,MAAM,sCAAsC,CAAC;AACtE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AA+B3D,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,MAAM;IACjB,GAAG,EAAE,MAAM;IACX,aAAa,EAAE,QAAQ;IACvB,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE;QAC5B,aAAa,EAAE,KAAK;KACrB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,iBAAiB,GAAG;IACxB,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,SAAS,gBAAgB,CAAC,EACxB,eAAe,EACf,cAAc,EACd,4BAA4B,EAC5B,6BAA6B,EAC7B,WAAW,EACX,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACe;IAChC,MAAM,aAAa,GAAG,CAAC,IAA6B,EAAE,EAAE;QACtD,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE;YACnB,uBAAuB,CAAC,IAAI,CAAC,CAAC;SAC/B;aAAM;YACL,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC,CAAC;IACF,MAAM,0BAA0B,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;QACrE,IAAI,CAAC,4BAA4B,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,OAAK,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CAAA,EAAE;YAC/F,OAAO,KAAK,CAAC;SACd;QACD,IAAI,CAAC,6BAA6B,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,OAAK,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAA,EAAE;YACjG,OAAO,KAAK,CAAC;SACd;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IACH,OAAO,CACH,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ;QACtC,oBAAC,aAAa,IAAC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,iBAAiB,GAAI;QAClE,oBAAC,iBAAiB;YACb,eAAe,IAAI,CAChB,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,KAAK,EAAC,MAAM;gBACnD,oBAAC,GAAG,IACA,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,GAAG,EAAC,KAAK,EACT,MAAM,EAAC,MAAM,EACb,EAAE,EAAE,EAAE,YAAY,EAAE,gCAAgC,EAAE;oBAEtD,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;oBAC5B,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,YAAY,aAAoB,
|
|
1
|
+
{"version":3,"file":"GlobalNavigation.js","sourceRoot":"","sources":["../../../../src/stories/organisms/GlobalNavigation/GlobalNavigation.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universal-tennis/ui-shared",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.94",
|
|
4
4
|
"main": "dist/items.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://universaltennis.com",
|
|
@@ -97,4 +97,4 @@
|
|
|
97
97
|
"url": "git+https://bitbucket.org/universaltennis/ui-shared.git"
|
|
98
98
|
},
|
|
99
99
|
"author": "universal-tennis"
|
|
100
|
-
}
|
|
100
|
+
}
|
|
Binary file
|
|
Binary file
|
|
@@ -42,7 +42,7 @@ function GlobalNavItem({
|
|
|
42
42
|
}}
|
|
43
43
|
>
|
|
44
44
|
<Box display="flex" alignItems="center" height="32px" width="100%" minWidth="194px" justifyContent="space-between">
|
|
45
|
-
<Typography weight={325} category="secondary" size="small-medium">{item?.label}</Typography>
|
|
45
|
+
<Typography weight={325} category="secondary" size="small-medium" color="var(--black)">{item?.label}</Typography>
|
|
46
46
|
<RightChevron size={12} color="var(--black)" />
|
|
47
47
|
</Box>
|
|
48
48
|
</Button>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { styled } from "@mui/material/styles";
|
|
2
3
|
|
|
3
4
|
import Box from '@mui/material/Box';
|
|
4
|
-
import Grid from '@mui/material/Grid';
|
|
5
5
|
import IconButton from '@mui/material/IconButton';
|
|
6
|
-
import
|
|
6
|
+
import Link from '@mui/material/Link';
|
|
7
7
|
|
|
8
8
|
import { FooterProps } from './sharedTypes';
|
|
9
9
|
import { SocialMediaIds } from '../../utils/constants';
|
|
@@ -15,92 +15,139 @@ import SocialMediaYoutubeIcon from '../../atoms/Icons/SocialMediaYoutubeIcon';
|
|
|
15
15
|
import SocialMediaFacebookIcon from '../../atoms/Icons/SocialMediaFacebookIcon';
|
|
16
16
|
import Typography from '../../atoms/Typography/Typography';
|
|
17
17
|
import utrLogo from '../../assets/utr-sports-logo.svg';
|
|
18
|
+
import googlePlayLogo from '../../../../public/google-play-icon.png';
|
|
19
|
+
import appStoreBadge from '../../../../public/app-store-badge.png';
|
|
18
20
|
|
|
19
21
|
function Footer({
|
|
20
22
|
exploreItems,
|
|
21
|
-
eventItems,
|
|
22
23
|
providerItems,
|
|
23
24
|
moreItems,
|
|
24
25
|
supportItems,
|
|
25
26
|
onSocialMediaClick,
|
|
27
|
+
sx
|
|
26
28
|
}: FooterProps) {
|
|
27
|
-
const matches = useMediaQuery('(min-width:600px)');
|
|
28
29
|
const {
|
|
29
30
|
X, FACEBOOK, INSTAGRAM, TIKTOK, YOUTUBE
|
|
30
31
|
} = SocialMediaIds;
|
|
31
32
|
|
|
33
|
+
const googlePlayLink = "https://play.google.com/store/apps/details?id=com.ut.utr";
|
|
34
|
+
const appStoreLink = "https://apps.apple.com/us/app/utr-sports/id1519232627";
|
|
35
|
+
|
|
32
36
|
const handleOnSocialMediaClick = (id: number) => {
|
|
33
37
|
onSocialMediaClick(id);
|
|
34
38
|
};
|
|
35
39
|
|
|
40
|
+
const StyledNavigationContainer = styled(Box)(({ theme }) => ({
|
|
41
|
+
display: 'flex',
|
|
42
|
+
flexWrap: 'wrap',
|
|
43
|
+
[theme.breakpoints.up('md')]: {
|
|
44
|
+
flexWrap: 'no-wrap',
|
|
45
|
+
}
|
|
46
|
+
}));
|
|
47
|
+
|
|
48
|
+
const StyledContentContainer = styled(Box)(({ theme }) => ({
|
|
49
|
+
display: "flex",
|
|
50
|
+
flexDirection: "column",
|
|
51
|
+
justifyContent: "space-between",
|
|
52
|
+
padding: "32px",
|
|
53
|
+
[theme.breakpoints.up('md')]: {
|
|
54
|
+
flexDirection: "row",
|
|
55
|
+
padding: "32px 64px",
|
|
56
|
+
}
|
|
57
|
+
}));
|
|
58
|
+
|
|
59
|
+
const StyledNavigation = styled(Box)(({ theme }) => ({
|
|
60
|
+
flex: "50%",
|
|
61
|
+
marginBottom: "32px",
|
|
62
|
+
[theme.breakpoints.up('lg')]: {
|
|
63
|
+
flex: "auto",
|
|
64
|
+
marginRight: "75px",
|
|
65
|
+
marginBottom: 0,
|
|
66
|
+
'&:last-child': {
|
|
67
|
+
marginRight: 0,
|
|
68
|
+
},
|
|
69
|
+
}
|
|
70
|
+
}));
|
|
71
|
+
|
|
72
|
+
const StyledLogoContainer = styled(Box)(({ theme }) => ({
|
|
73
|
+
display: "flex",
|
|
74
|
+
flexDirection: "column",
|
|
75
|
+
margin: "0 auto",
|
|
76
|
+
[theme.breakpoints.up('lg')]: {
|
|
77
|
+
margin: 0
|
|
78
|
+
}
|
|
79
|
+
}));
|
|
80
|
+
|
|
81
|
+
const StyledBorder = styled(Box)(({ theme }) => ({
|
|
82
|
+
borderBottom: ".5px solid var(--darkest-grey)",
|
|
83
|
+
margin: "32px 0px",
|
|
84
|
+
[theme.breakpoints.up('md')]: {
|
|
85
|
+
display: "none"
|
|
86
|
+
}
|
|
87
|
+
}));
|
|
88
|
+
|
|
36
89
|
return (
|
|
37
|
-
<Box sx={{ backgroundColor: 'var(--black)' }}>
|
|
38
|
-
<
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
</IconButton>
|
|
63
|
-
</Box>
|
|
90
|
+
<Box sx={{ backgroundColor: 'var(--black)', ...sx }}>
|
|
91
|
+
<StyledContentContainer>
|
|
92
|
+
<StyledLogoContainer>
|
|
93
|
+
<img
|
|
94
|
+
alt="UTR Sports logo"
|
|
95
|
+
width="205"
|
|
96
|
+
height="51"
|
|
97
|
+
src={utrLogo}
|
|
98
|
+
/>
|
|
99
|
+
<Box display="flex" my={2} justifyContent="space-between" width="100%">
|
|
100
|
+
<IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(X)}>
|
|
101
|
+
<SocialMediaXIcon size={27} color="var(--white)" />
|
|
102
|
+
</IconButton>
|
|
103
|
+
<IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(FACEBOOK)}>
|
|
104
|
+
<SocialMediaFacebookIcon size={27} color="var(--white)" />
|
|
105
|
+
</IconButton>
|
|
106
|
+
<IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(INSTAGRAM)}>
|
|
107
|
+
<SocialMediaInstagramIcon size={27} color="var(--white)" />
|
|
108
|
+
</IconButton>
|
|
109
|
+
<IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(TIKTOK)}>
|
|
110
|
+
<SocialMediaTikTokIcon size={27} color="var(--white)" />
|
|
111
|
+
</IconButton>
|
|
112
|
+
<IconButton sx={{ p: 0 }} onClick={() => handleOnSocialMediaClick(YOUTUBE)}>
|
|
113
|
+
<SocialMediaYoutubeIcon size={27} color="var(--white)" />
|
|
114
|
+
</IconButton>
|
|
64
115
|
</Box>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
</
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</Grid>
|
|
101
|
-
</Grid>
|
|
102
|
-
)}
|
|
103
|
-
</Grid>
|
|
116
|
+
<Box display="flex" justifyContent="space-between" width="100%">
|
|
117
|
+
<Link href={googlePlayLink} target="_blank" rel="noopener">
|
|
118
|
+
<img
|
|
119
|
+
alt="Google play logo"
|
|
120
|
+
width="96"
|
|
121
|
+
height="28"
|
|
122
|
+
src={googlePlayLogo}
|
|
123
|
+
/>
|
|
124
|
+
</Link>
|
|
125
|
+
<Link href={appStoreLink} target="_blank" rel="noopener">
|
|
126
|
+
<img
|
|
127
|
+
alt="App store badge"
|
|
128
|
+
width="84"
|
|
129
|
+
height="28"
|
|
130
|
+
src={appStoreBadge}
|
|
131
|
+
/>
|
|
132
|
+
</Link>
|
|
133
|
+
</Box>
|
|
134
|
+
</StyledLogoContainer>
|
|
135
|
+
<StyledBorder />
|
|
136
|
+
<StyledNavigationContainer>
|
|
137
|
+
<StyledNavigation>
|
|
138
|
+
<FooterSection title="Explore" items={exploreItems} />
|
|
139
|
+
</StyledNavigation>
|
|
140
|
+
<StyledNavigation>
|
|
141
|
+
<FooterSection title="Providers" items={providerItems} />
|
|
142
|
+
</StyledNavigation>
|
|
143
|
+
<StyledNavigation>
|
|
144
|
+
<FooterSection title="More" items={moreItems} />
|
|
145
|
+
</StyledNavigation>
|
|
146
|
+
<StyledNavigation>
|
|
147
|
+
<FooterSection title="Support" items={supportItems} />
|
|
148
|
+
</StyledNavigation>
|
|
149
|
+
</StyledNavigationContainer>
|
|
150
|
+
</StyledContentContainer>
|
|
104
151
|
<Box display="absolute" sx={{ bottom: 24, borderTop: 1, borderColor: "var(--white)" }}>
|
|
105
152
|
<Typography
|
|
106
153
|
p={0.5}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { SxProps, Theme } from '@mui/system';
|
|
2
|
+
|
|
1
3
|
export interface LinkItem {
|
|
2
4
|
href: string;
|
|
3
5
|
label: string;
|
|
@@ -11,4 +13,5 @@ export type FooterProps = {
|
|
|
11
13
|
moreItems:[LinkItem];
|
|
12
14
|
supportItems:[LinkItem];
|
|
13
15
|
onSocialMediaClick(id: number): VoidFunction;
|
|
16
|
+
sx?: SxProps<Theme>;
|
|
14
17
|
};
|
|
@@ -93,7 +93,7 @@ function GlobalNavigation({
|
|
|
93
93
|
sx={{ borderBottom: '.5px solid var(--darkest-grey)' }}
|
|
94
94
|
>
|
|
95
95
|
<TennisBallIcon size={18} />
|
|
96
|
-
<Typography category="secondary" size="medium-cap">Tennis</Typography>
|
|
96
|
+
<Typography category="secondary" size="medium-cap" color="var(--black)">Tennis</Typography>
|
|
97
97
|
</Box>
|
|
98
98
|
{tennisNavItems?.map((item) => (
|
|
99
99
|
<GlobalNavItem item={item} key={item?.label} onClick={handleOnClick} />
|
|
@@ -110,7 +110,7 @@ function GlobalNavigation({
|
|
|
110
110
|
sx={{ borderBottom: '.5px solid var(--darkest-grey)' }}
|
|
111
111
|
>
|
|
112
112
|
<PickleballBallIcon size={18} />
|
|
113
|
-
<Typography category="secondary" size="medium-cap">Pickleball</Typography>
|
|
113
|
+
<Typography category="secondary" size="medium-cap" color="var(--black)">Pickleball</Typography>
|
|
114
114
|
</Box>
|
|
115
115
|
{filteredPickleballNavItems?.map((item) => (
|
|
116
116
|
<GlobalNavItem item={item} key={item?.label} onClick={handleOnClick} />
|