@universal-tennis/ui-shared 0.1.45 → 0.1.47

package/dist/stories/molecules/AvatarWithName/AvatarWithName.d.ts

@@ -1,17 +1,25 @@
 /// <reference types="react" />
 export interface AvatarWithNameProps {
+    avatarOnly: boolean;
     avatarFontCategory: string;
     avatarFontSize: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    href: string;
     imgSrc: string;
     playerName: string;
     fontCategory: string;
     fontSize: string;
 }
-export default function AvatarWithName({ imgSrc, playerName, avatarFontSize, avatarFontCategory, fontSize, fontCategory }: {
+export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory }: {
+    avatarOnly?: boolean | undefined;
     imgSrc?: string | undefined;
     playerName?: string | undefined;
     avatarFontSize?: string | undefined;
+    href?: string | undefined;
     avatarFontCategory?: string | undefined;
+    avatarWidth?: string | undefined;
+    avatarHeight?: string | undefined;
     fontSize?: string | undefined;
     fontCategory?: string | undefined;
 }): JSX.Element;

package/dist/stories/molecules/AvatarWithName/AvatarWithName.js

@@ -1,15 +1,24 @@
 import React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
 import Typography from '../../atoms/Typography/Typography';
-export default function AvatarWithName({ imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', avatarFontCategory = 'primary', fontSize = 'small-medium', fontCategory = 'secondary' }) {
+export default function AvatarWithName({ avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary' }) {
     const getAcronym = (str) => {
         const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
         return acronym;
     };
-    return (React.createElement(Box, { display: "flex", alignItems: "center" },
-        React.createElement(Avatar, { sx: { backgroundColor: 'var(--black)', marginRight: '10px' }, src: imgSrc },
-            React.createElement(Typography, { size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))),
-        React.createElement(Typography, { category: fontCategory, size: fontSize }, playerName)));
+    const getTruncatedName = (name) => {
+        const maxCharacterLimit = 24;
+        return (name.length > maxCharacterLimit ? `${name.slice(0, maxCharacterLimit)}...` : name);
+    };
+    const AvatarComponent = (React.createElement(Avatar, { sx: {
+            backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}`
+        }, src: imgSrc },
+        React.createElement(Typography, { size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))));
+    return (avatarOnly ? (AvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
+        AvatarComponent,
+        href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
+            React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName)))) : React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName)))));
 }
 //# sourceMappingURL=AvatarWithName.js.map

package/dist/stories/molecules/AvatarWithName/AvatarWithName.js.map

@@ -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"}
+{"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,gBAAgB,GAAG,CAAC,IAAW,EAAE,EAAE;QACvC,MAAM,iBAAiB,GAAG,EAAE,CAAC;QAC7B,OAAO,CACL,IAAI,CAAC,MAAM,GAAG,iBAAiB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAClF,CAAC;IACJ,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,gBAAgB,CAAC,UAAU,CAAC,CAAc,CAC5F,CACV,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,IAAG,gBAAgB,CAAC,UAAU,CAAC,CAAc,CACjG,CACT,CACF,CAAC;AACJ,CAAC"}

package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts

@@ -5,5 +5,9 @@ export default _default;
 export declare const Default: any;
 export declare const WithImage: any;
 export declare const WithCustomTypography: any;
+export declare const WithCustomAvatarSize: any;
+export declare const WithAvatarOnly: any;
 export declare const WithNoImage: any;
 export declare const WithBrokenImage: any;
+export declare const WithLink: any;
+export declare const WithLongName: any;

package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js

@@ -26,6 +26,19 @@ WithCustomTypography.args = {
     fontCategory: "primary",
     fontSize: "medium-book"
 };
+export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+    playerName: "Julia Gulia",
+    avatarWidth: '26px',
+    avatarHeight: '26px',
+    avatarFontCategory: "primary",
+    avatarFontSize: "small-book",
+};
+export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+    avatarOnly: true,
+    playerName: "Julia Gulia",
+};
 export const WithNoImage = AvatarWithNameTemplate.bind({});
 WithNoImage.args = {
     imgSrc: '',
@@ -36,4 +49,15 @@ WithBrokenImage.args = {
     imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
     playerName: "Julia Gulia",
 };
+export const WithLink = AvatarWithNameTemplate.bind({});
+WithLink.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    href: "https://www.reddit.com",
+    playerName: "Julia Gulia",
+};
+export const WithLongName = AvatarWithNameTemplate.bind({});
+WithLongName.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+};
 //# sourceMappingURL=AvatarWithName.stories.js.map

package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js.map

@@ -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"}
+{"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;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,YAAY,CAAC,IAAI,GAAG;IAClB,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,iDAAiD;CAC9D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

package/src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx

@@ -33,6 +33,21 @@ WithCustomTypography.args = {
   fontSize: "medium-book"
 };
 
+export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+  playerName: "Julia Gulia",
+  avatarWidth: '26px',
+  avatarHeight: '26px',
+  avatarFontCategory: "primary",
+  avatarFontSize: "small-book", 
+};
+
+export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+  avatarOnly: true,  
+  playerName: "Julia Gulia",
+};
+
 export const WithNoImage = AvatarWithNameTemplate.bind({});
 WithNoImage.args = {
   imgSrc: '',
@@ -44,3 +59,16 @@ WithBrokenImage.args = {
   imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
   playerName: "Julia Gulia",
 };
+
+export const WithLink = AvatarWithNameTemplate.bind({});
+WithLink.args = {
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+  href: "https://www.reddit.com",
+  playerName: "Julia Gulia",
+};
+
+export const WithLongName = AvatarWithNameTemplate.bind({});
+WithLongName.args = {
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+  playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+};

package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx

@@ -2,12 +2,17 @@ import React from 'react';
 
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
 
 import Typography from '../../atoms/Typography/Typography';
 
 export interface AvatarWithNameProps {
+    avatarOnly: boolean;
     avatarFontCategory: string;
     avatarFontSize: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    href: string,
     imgSrc: string;
     playerName: string;
     fontCategory: string;
@@ -15,20 +20,44 @@ export interface AvatarWithNameProps {
   }
 
 export default function AvatarWithName({
-  imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', 
-  avatarFontCategory = 'primary', fontSize = 'small-medium', fontCategory = 'secondary'
+  avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '',
+  avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary'
 }) {
   const getAcronym = (str: string) => {
     const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
     return acronym;
   };
 
+  const getTruncatedName = (name:string) => {
+    const maxCharacterLimit = 24;
+    return (
+      name.length > maxCharacterLimit ? `${name.slice(0, maxCharacterLimit)}...` : name
+    );
+  };
+
+  const AvatarComponent = (
+      <Avatar 
+          sx={{ 
+            backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}` 
+          }} 
+          src={imgSrc}
+      >
+          <Typography size={avatarFontSize} category={avatarFontCategory}>{getAcronym(playerName)}</Typography>
+      </Avatar>
+  );
+
   return (
-      <Box display="flex" alignItems="center">
-          <Avatar sx={{ backgroundColor: 'var(--black)', marginRight: '10px' }} src={imgSrc}>
-              <Typography size={avatarFontSize} category={avatarFontCategory}>{getAcronym(playerName)}</Typography>
-          </Avatar>
-          <Typography category={fontCategory} size={fontSize}>{playerName}</Typography>
-      </Box>
+    avatarOnly ? (
+      AvatarComponent
+    ) : (
+        <Box display="flex" alignItems="center">
+            {AvatarComponent}
+            {href ? (
+                <Link href={href} sx={{ textDecoration: 'none' }}>
+                    <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName)}</Typography>
+                </Link>
+            ) : <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName)}</Typography>}
+        </Box>
+    )
   );
 }