@universal-tennis/ui-shared 0.1.47 → 0.1.48

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 +3 -1
  2. package/dist/stories/molecules/AvatarWithName/AvatarWithName.js +4 -7
  3. package/dist/stories/molecules/AvatarWithName/AvatarWithName.js.map +1 -1
  4. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts +2 -0
  5. package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js +10 -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 +12 -0
  9. package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx +15 -10
package/dist/stories/molecules/AvatarWithName/AvatarWithName.d.ts CHANGED
@@ -10,8 +10,9 @@ export interface AvatarWithNameProps {
10
10
  playerName: string;
11
11
  fontCategory: string;
12
12
  fontSize: string;
13
+ maxCharacterLimit: number;
13
14
  }
14
- export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory }: {
15
+ export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, maxCharacterLimit }: {
15
16
  avatarOnly?: boolean | undefined;
16
17
  imgSrc?: string | undefined;
17
18
  playerName?: string | undefined;
@@ -22,4 +23,5 @@ export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarF
22
23
  avatarHeight?: string | undefined;
23
24
  fontSize?: string | undefined;
24
25
  fontCategory?: string | undefined;
26
+ maxCharacterLimit?: number | undefined;
25
27
  }): JSX.Element;
package/dist/stories/molecules/AvatarWithName/AvatarWithName.js CHANGED
@@ -3,22 +3,19 @@ import Avatar from '@mui/material/Avatar';
3
3
  import Box from '@mui/material/Box';
4
4
  import Link from '@mui/material/Link';
5
5
  import Typography from '../../atoms/Typography/Typography';
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
+ export default function AvatarWithName({ avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary', maxCharacterLimit = 24 }) {
7
7
  const getAcronym = (str) => {
8
8
  const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
9
9
  return acronym;
10
10
  };
11
- const getTruncatedName = (name) => {
12
- const maxCharacterLimit = 24;
13
- return (name.length > maxCharacterLimit ? `${name.slice(0, maxCharacterLimit)}...` : name);
14
- };
11
+ const getTruncatedName = (name, characterLimit) => (name.length > characterLimit ? `${name.slice(0, characterLimit)}...` : name);
15
12
  const AvatarComponent = (React.createElement(Avatar, { sx: {
16
13
  backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}`
17
14
  }, src: imgSrc },
18
- React.createElement(Typography, { size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))));
15
+ React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))));
19
16
  return (avatarOnly ? (AvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
20
17
  AvatarComponent,
21
18
  href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
22
- React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName)))) : React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName)))));
19
+ React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))) : React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))));
23
20
  }
24
21
  //# 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;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"}
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;AAgB3D,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,EAClI,iBAAiB,GAAG,EAAE,EACvB;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,IAAY,EAAE,cAAsB,EAAE,EAAE,CAAC,CACjE,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAC5E,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,IACP,EAAE,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,EAClC,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,kBAAkB,IAE3B,UAAU,CAAC,UAAU,CAAC,CACd,CACR,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,EAAE,iBAAiB,CAAC,CAAc,CAC/G,CACV,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,IAAG,gBAAgB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAc,CACpH,CACT,CACF,CAAC;AACJ,CAAC"}
package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.d.ts CHANGED
@@ -10,4 +10,6 @@ export declare const WithAvatarOnly: any;
10
10
  export declare const WithNoImage: any;
11
11
  export declare const WithBrokenImage: any;
12
12
  export declare const WithLink: any;
13
+ export declare const WithLowercaseName: any;
13
14
  export declare const WithLongName: any;
15
+ export declare const WithCustomMaxCharacterLimit: any;
package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js CHANGED
@@ -55,9 +55,19 @@ WithLink.args = {
55
55
  href: "https://www.reddit.com",
56
56
  playerName: "Julia Gulia",
57
57
  };
58
+ export const WithLowercaseName = AvatarWithNameTemplate.bind({});
59
+ WithLowercaseName.args = {
60
+ playerName: "julia gulia",
61
+ };
58
62
  export const WithLongName = AvatarWithNameTemplate.bind({});
59
63
  WithLongName.args = {
60
64
  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
61
65
  playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
62
66
  };
67
+ export const WithCustomMaxCharacterLimit = AvatarWithNameTemplate.bind({});
68
+ WithCustomMaxCharacterLimit.args = {
69
+ imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
70
+ playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
71
+ maxCharacterLimit: 7
72
+ };
63
73
  //# 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,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"}
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;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjE,iBAAiB,CAAC,IAAI,GAAG;IACvB,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;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3E,2BAA2B,CAAC,IAAI,GAAG;IACjC,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,iDAAiD;IAC7D,iBAAiB,EAAE,CAAC;CACrB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-tennis/ui-shared",
3
- "version": "0.1.47",
3
+ "version": "0.1.48",
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
@@ -67,8 +67,20 @@ WithLink.args = {
67
67
  playerName: "Julia Gulia",
68
68
  };
69
69
 
70
+ export const WithLowercaseName = AvatarWithNameTemplate.bind({});
71
+ WithLowercaseName.args = {
72
+ playerName: "julia gulia",
73
+ };
74
+
70
75
  export const WithLongName = AvatarWithNameTemplate.bind({});
71
76
  WithLongName.args = {
72
77
  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
73
78
  playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
74
79
  };
80
+
81
+ export const WithCustomMaxCharacterLimit = AvatarWithNameTemplate.bind({});
82
+ WithCustomMaxCharacterLimit.args = {
83
+ imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
84
+ playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
85
+ maxCharacterLimit: 7
86
+ };
package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx CHANGED
@@ -17,23 +17,22 @@ export interface AvatarWithNameProps {
17
17
  playerName: string;
18
18
  fontCategory: string;
19
19
  fontSize: string;
20
+ maxCharacterLimit: number;
20
21
  }
21
22
 
22
23
  export default function AvatarWithName({
23
24
  avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '',
24
- avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary'
25
+ avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary',
26
+ maxCharacterLimit = 24
25
27
  }) {
26
28
  const getAcronym = (str: string) => {
27
29
  const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
28
30
  return acronym;
29
31
  };
30
32
 
31
- const getTruncatedName = (name:string) => {
32
- const maxCharacterLimit = 24;
33
- return (
34
- name.length > maxCharacterLimit ? `${name.slice(0, maxCharacterLimit)}...` : name
35
- );
36
- };
33
+ const getTruncatedName = (name: string, characterLimit: number) => (
34
+ name.length > characterLimit ? `${name.slice(0, characterLimit)}...` : name
35
+ );
37
36
 
38
37
  const AvatarComponent = (
39
38
  <Avatar
@@ -42,7 +41,13 @@ export default function AvatarWithName({
42
41
  }}
43
42
  src={imgSrc}
44
43
  >
45
- <Typography size={avatarFontSize} category={avatarFontCategory}>{getAcronym(playerName)}</Typography>
44
+ <Typography
45
+ sx={{ textTransform: 'uppercase' }}
46
+ size={avatarFontSize}
47
+ category={avatarFontCategory}
48
+ >
49
+ {getAcronym(playerName)}
50
+ </Typography>
46
51
  </Avatar>
47
52
  );
48
53
 
@@ -54,9 +59,9 @@ export default function AvatarWithName({
54
59
  {AvatarComponent}
55
60
  {href ? (
56
61
  <Link href={href} sx={{ textDecoration: 'none' }}>
57
- <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName)}</Typography>
62
+ <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName, maxCharacterLimit)}</Typography>
58
63
  </Link>
59
- ) : <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName)}</Typography>}
64
+ ) : <Typography category={fontCategory} size={fontSize}>{getTruncatedName(playerName, maxCharacterLimit)}</Typography>}
60
65
  </Box>
61
66
  )
62
67
  );