@universal-tennis/ui-shared 0.1.45 → 0.1.46

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.
Files changed (9) hide show
  1. package/dist/stories/molecules/AvatarWithName/AvatarWithName.d.ts +9 -1
  2. package/dist/stories/molecules/AvatarWithName/AvatarWithName.js +10 -5
  3. package/dist/stories/molecules/AvatarWithName/AvatarWithName.js.map +1 -1
  4. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts +3 -0
  5. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js +19 -0
  6. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx +22 -0
  9. package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx +30 -8
package/dist/stories/molecules/AvatarWithName/AvatarWithName.d.ts CHANGED
@@ -1,17 +1,25 @@
1
1
  /// <reference types="react" />
2
2
  export interface AvatarWithNameProps {
3
+ avatarOnly: boolean;
3
4
  avatarFontCategory: string;
4
5
  avatarFontSize: string;
6
+ avatarWidth: string;
7
+ avatarHeight: string;
8
+ href: string;
5
9
  imgSrc: string;
6
10
  playerName: string;
7
11
  fontCategory: string;
8
12
  fontSize: string;
9
13
  }
10
- export default function AvatarWithName({ imgSrc, playerName, avatarFontSize, avatarFontCategory, fontSize, fontCategory }: {
14
+ export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory }: {
15
+ avatarOnly?: boolean | undefined;
11
16
  imgSrc?: string | undefined;
12
17
  playerName?: string | undefined;
13
18
  avatarFontSize?: string | undefined;
19
+ href?: string | undefined;
14
20
  avatarFontCategory?: string | undefined;
21
+ avatarWidth?: string | undefined;
22
+ avatarHeight?: string | undefined;
15
23
  fontSize?: string | undefined;
16
24
  fontCategory?: string | undefined;
17
25
  }): JSX.Element;
package/dist/stories/molecules/AvatarWithName/AvatarWithName.js CHANGED
@@ -1,15 +1,20 @@
1
1
  import React from 'react';
2
2
  import Avatar from '@mui/material/Avatar';
3
3
  import Box from '@mui/material/Box';
4
+ import Link from '@mui/material/Link';
4
5
  import Typography from '../../atoms/Typography/Typography';
5
- export default function AvatarWithName({ imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', avatarFontCategory = 'primary', fontSize = 'small-medium', fontCategory = 'secondary' }) {
6
+ export default function AvatarWithName({ avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary' }) {
6
7
  const getAcronym = (str) => {
7
8
  const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
8
9
  return acronym;
9
10
  };
10
- return (React.createElement(Box, { display: "flex", alignItems: "center" },
11
- React.createElement(Avatar, { sx: { backgroundColor: 'var(--black)', marginRight: '10px' }, src: imgSrc },
12
- React.createElement(Typography, { size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))),
13
- React.createElement(Typography, { category: fontCategory, size: fontSize }, playerName)));
11
+ const AvatarComponent = (React.createElement(Avatar, { sx: {
12
+ backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}`
13
+ }, src: imgSrc },
14
+ React.createElement(Typography, { size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))));
15
+ return (avatarOnly ? (AvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
16
+ AvatarComponent,
17
+ href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
18
+ React.createElement(Typography, { category: fontCategory, size: fontSize }, playerName))) : React.createElement(Typography, { category: fontCategory, size: fontSize }, playerName))));
14
19
  }
15
20
  //# sourceMappingURL=AvatarWithName.js.map
package/dist/stories/molecules/AvatarWithName/AvatarWithName.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarWithName.js","sourceRoot":"","sources":["../../../../src/stories/molecules/AvatarWithName/AvatarWithName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAW3D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,cAAc,GAAG,eAAe,EAC9D,kBAAkB,GAAG,SAAS,EAAE,QAAQ,GAAG,cAAc,EAAE,YAAY,GAAG,WAAW,EACtF;IACC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,MAAM,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACvE,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ;QACnC,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM;YAC7E,oBAAC,UAAU,IAAC,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,kBAAkB,IAAG,UAAU,CAAC,UAAU,CAAC,CAAc,CAChG;QACT,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,IAAG,UAAU,CAAc,CAC3E,CACT,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"AvatarWithName.js","sourceRoot":"","sources":["../../../../src/stories/molecules/AvatarWithName/AvatarWithName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAe3D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,GAAG,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,cAAc,GAAG,eAAe,EAAE,IAAI,GAAG,EAAE,EAC7F,kBAAkB,GAAG,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,YAAY,GAAG,MAAM,EAAE,QAAQ,GAAG,cAAc,EAAE,YAAY,GAAG,WAAW,EACnI;IACC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE;QACjC,MAAM,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACvE,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CACpB,oBAAC,MAAM,IACH,EAAE,EAAE;YACF,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE;SACzG,EACD,GAAG,EAAE,MAAM;QAEX,oBAAC,UAAU,IAAC,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,kBAAkB,IAAG,UAAU,CAAC,UAAU,CAAC,CAAc,CAChG,CACZ,CAAC;IAEF,OAAO,CACL,UAAU,CAAC,CAAC,CAAC,CACX,eAAe,CAChB,CAAC,CAAC,CAAC,CACA,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ;QAClC,eAAe;QACf,IAAI,CAAC,CAAC,CAAC,CACJ,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE;YAC5C,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,IAAG,UAAU,CAAc,CAC1E,CACV,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,IAAG,UAAU,CAAc,CAC/E,CACT,CACF,CAAC;AACJ,CAAC"}
package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts CHANGED
@@ -5,5 +5,8 @@ export default _default;
5
5
  export declare const Default: any;
6
6
  export declare const WithImage: any;
7
7
  export declare const WithCustomTypography: any;
8
+ export declare const WithCustomAvatarSize: any;
9
+ export declare const WithAvatarOnly: any;
8
10
  export declare const WithNoImage: any;
9
11
  export declare const WithBrokenImage: any;
12
+ export declare const WithLink: any;
package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js CHANGED
@@ -26,6 +26,19 @@ WithCustomTypography.args = {
26
26
  fontCategory: "primary",
27
27
  fontSize: "medium-book"
28
28
  };
29
+ export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
30
+ WithCustomAvatarSize.args = {
31
+ playerName: "Julia Gulia",
32
+ avatarWidth: '26px',
33
+ avatarHeight: '26px',
34
+ avatarFontCategory: "primary",
35
+ avatarFontSize: "small-book",
36
+ };
37
+ export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
38
+ WithAvatarOnly.args = {
39
+ avatarOnly: true,
40
+ playerName: "Julia Gulia",
41
+ };
29
42
  export const WithNoImage = AvatarWithNameTemplate.bind({});
30
43
  WithNoImage.args = {
31
44
  imgSrc: '',
@@ -36,4 +49,10 @@ WithBrokenImage.args = {
36
49
  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
37
50
  playerName: "Julia Gulia",
38
51
  };
52
+ export const WithLink = AvatarWithNameTemplate.bind({});
53
+ WithLink.args = {
54
+ imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
55
+ href: "https://www.reddit.com",
56
+ playerName: "Julia Gulia",
57
+ };
39
58
  //# sourceMappingURL=AvatarWithName.stories.js.map
package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarWithName.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAuC,MAAM,kBAAkB,CAAC;AAEvE,UAAU;AACV,eAAe;IACb,KAAK,EAAE,0BAA0B;CAClC,CAAC;AAEF,YAAY;AACZ,SAAS,sBAAsB,CAAC,IAAyB;IACvD,OAAO,oBAAC,cAAc,oBAAK,IAAI,EAAI,CAAC;AACtC,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,OAAO,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,SAAS,CAAC,IAAI,GAAG;IACf,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE,oBAAoB,CAAC,IAAI,GAAG;IAC1B,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,WAAW,CAAC,IAAI,GAAG;IACjB,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/D,eAAe,CAAC,IAAI,GAAG;IACrB,MAAM,EAAE,4GAA4G;IACpH,UAAU,EAAE,aAAa;CAC1B,CAAC"}
1
+ {"version":3,"file":"AvatarWithName.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAuC,MAAM,kBAAkB,CAAC;AAEvE,UAAU;AACV,eAAe;IACb,KAAK,EAAE,0BAA0B;CAClC,CAAC;AAEF,YAAY;AACZ,SAAS,sBAAsB,CAAC,IAAyB;IACvD,OAAO,oBAAC,cAAc,oBAAK,IAAI,EAAI,CAAC;AACtC,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,OAAO,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,SAAS,CAAC,IAAI,GAAG;IACf,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE,oBAAoB,CAAC,IAAI,GAAG;IAC1B,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE,oBAAoB,CAAC,IAAI,GAAG;IAC1B,UAAU,EAAE,aAAa;IACzB,WAAW,EAAE,MAAM;IACnB,YAAY,EAAE,MAAM;IACpB,kBAAkB,EAAE,SAAS;IAC7B,cAAc,EAAE,YAAY;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9D,cAAc,CAAC,IAAI,GAAG;IACpB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,WAAW,CAAC,IAAI,GAAG;IACjB,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/D,eAAe,CAAC,IAAI,GAAG;IACrB,MAAM,EAAE,4GAA4G;IACpH,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,QAAQ,CAAC,IAAI,GAAG;IACd,MAAM,EAAE,6GAA6G;IACrH,IAAI,EAAE,wBAAwB;IAC9B,UAAU,EAAE,aAAa;CAC1B,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-tennis/ui-shared",
3
- "version": "0.1.45",
3
+ "version": "0.1.46",
4
4
  "main": "dist/items.js",
5
5
  "license": "MIT",
6
6
  "homepage": "https://universaltennis.com",
package/src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx CHANGED
@@ -33,6 +33,21 @@ WithCustomTypography.args = {
33
33
  fontSize: "medium-book"
34
34
  };
35
35
 
36
+ export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
37
+ WithCustomAvatarSize.args = {
38
+ playerName: "Julia Gulia",
39
+ avatarWidth: '26px',
40
+ avatarHeight: '26px',
41
+ avatarFontCategory: "primary",
42
+ avatarFontSize: "small-book",
43
+ };
44
+
45
+ export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
46
+ WithAvatarOnly.args = {
47
+ avatarOnly: true,
48
+ playerName: "Julia Gulia",
49
+ };
50
+
36
51
  export const WithNoImage = AvatarWithNameTemplate.bind({});
37
52
  WithNoImage.args = {
38
53
  imgSrc: '',
@@ -44,3 +59,10 @@ WithBrokenImage.args = {
44
59
  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
45
60
  playerName: "Julia Gulia",
46
61
  };
62
+
63
+ export const WithLink = AvatarWithNameTemplate.bind({});
64
+ WithLink.args = {
65
+ imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
66
+ href: "https://www.reddit.com",
67
+ playerName: "Julia Gulia",
68
+ };
package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx CHANGED
@@ -2,12 +2,17 @@ import React from 'react';
2
2
 
3
3
  import Avatar from '@mui/material/Avatar';
4
4
  import Box from '@mui/material/Box';
5
+ import Link from '@mui/material/Link';
5
6
 
6
7
  import Typography from '../../atoms/Typography/Typography';
7
8
 
8
9
  export interface AvatarWithNameProps {
10
+ avatarOnly: boolean;
9
11
  avatarFontCategory: string;
10
12
  avatarFontSize: string;
13
+ avatarWidth: string;
14
+ avatarHeight: string;
15
+ href: string,
11
16
  imgSrc: string;
12
17
  playerName: string;
13
18
  fontCategory: string;
@@ -15,20 +20,37 @@ export interface AvatarWithNameProps {
15
20
  }
16
21
 
17
22
  export default function AvatarWithName({
18
- imgSrc = '', playerName = '', avatarFontSize = 'medium-medium',
19
- avatarFontCategory = 'primary', fontSize = 'small-medium', fontCategory = 'secondary'
23
+ avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '',
24
+ avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary'
20
25
  }) {
21
26
  const getAcronym = (str: string) => {
22
27
  const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
23
28
  return acronym;
24
29
  };
25
30
 
31
+ const AvatarComponent = (
32
+ <Avatar
33
+ sx={{
34
+ backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}`
35
+ }}
36
+ src={imgSrc}
37
+ >
38
+ <Typography size={avatarFontSize} category={avatarFontCategory}>{getAcronym(playerName)}</Typography>
39
+ </Avatar>
40
+ );
41
+
26
42
  return (
27
- <Box display="flex" alignItems="center">
28
- <Avatar sx={{ backgroundColor: 'var(--black)', marginRight: '10px' }} src={imgSrc}>
29
- <Typography size={avatarFontSize} category={avatarFontCategory}>{getAcronym(playerName)}</Typography>
30
- </Avatar>
31
- <Typography category={fontCategory} size={fontSize}>{playerName}</Typography>
32
- </Box>
43
+ avatarOnly ? (
44
+ AvatarComponent
45
+ ) : (
46
+ <Box display="flex" alignItems="center">
47
+ {AvatarComponent}
48
+ {href ? (
49
+ <Link href={href} sx={{ textDecoration: 'none' }}>
50
+ <Typography category={fontCategory} size={fontSize}>{playerName}</Typography>
51
+ </Link>
52
+ ) : <Typography category={fontCategory} size={fontSize}>{playerName}</Typography>}
53
+ </Box>
54
+ )
33
55
  );
34
56
  }