@universal-tennis/ui-shared 0.1.50 → 0.1.52

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 (12) hide show
  1. package/.storybook/variables.css +1 -0
  2. package/dist/stories/assets/css/variables.css +1 -0
  3. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts +3 -1
  4. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js +10 -5
  5. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js.map +1 -1
  6. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts +1 -0
  7. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js +5 -0
  8. package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/stories/assets/css/variables.css +1 -0
  11. package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx +6 -0
  12. package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx +26 -15
package/.storybook/variables.css CHANGED
@@ -5,6 +5,7 @@
5
5
  --black: #000;
6
6
  --white: #fff;
7
7
  --light-grey: #d7e0ea;
8
+ --grey: #828B96;
8
9
  --darkest-grey: #3b4859;
9
10
  --cool-grey-600: #A7B2C1;
10
11
  --cool-grey-500: #C1CCDA;
package/dist/stories/assets/css/variables.css CHANGED
@@ -5,6 +5,7 @@
5
5
  --black: #000;
6
6
  --white: #fff;
7
7
  --light-grey: #d7e0ea;
8
+ --grey: #828B96;
8
9
  --darkest-grey: #3b4859;
9
10
  --cool-grey-600: #A7B2C1;
10
11
  --cool-grey-500: #C1CCDA;
package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts CHANGED
@@ -9,8 +9,9 @@ export interface SquareAvatarWithNameProps {
9
9
  name: string;
10
10
  fontCategory: string;
11
11
  fontSize: string;
12
+ isBye: boolean;
12
13
  }
13
- export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory }: {
14
+ export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, isBye }: {
14
15
  avatarOnly?: boolean | undefined;
15
16
  name?: string | undefined;
16
17
  avatarFontSize?: string | undefined;
@@ -20,4 +21,5 @@ export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize,
20
21
  avatarHeight?: string | undefined;
21
22
  fontSize?: string | undefined;
22
23
  fontCategory?: string | undefined;
24
+ isBye?: boolean | undefined;
23
25
  }): JSX.Element;
package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js CHANGED
@@ -3,18 +3,23 @@ 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 SquareAvatarWithName({ avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', fontSize = 'medium-book', fontCategory = 'secondary' }) {
6
+ export default function SquareAvatarWithName({ avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', fontSize = 'medium-book', fontCategory = 'secondary', isBye = false }) {
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
11
  const SquareAvatarComponent = (React.createElement(Avatar, { sx: {
12
- backgroundColor: 'var(--black)', marginRight: '8px', width: `${avatarWidth}`, height: `${avatarHeight}`
12
+ backgroundColor: isBye ? 'var(--grey)' : 'var(--black)',
13
+ marginRight: '8px',
14
+ width: `${avatarWidth}`,
15
+ height: `${avatarHeight}`
13
16
  }, variant: "rounded" },
14
- React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, getAcronym(name))));
15
- const NameTypography = (React.createElement(Typography, { category: fontCategory, size: fontSize, sx: { whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, name));
17
+ React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, isBye ? '—' : getAcronym(name))));
16
18
  return (avatarOnly ? (SquareAvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
17
19
  SquareAvatarComponent,
18
- href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } }, NameTypography)) : NameTypography)));
20
+ href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
21
+ React.createElement(Typography, { category: fontCategory, size: fontSize, sx: { whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, name))) : (React.createElement(Typography, { category: fontCategory, size: fontSize, sx: {
22
+ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: isBye ? 'grey' : 'black'
23
+ } }, name)))));
19
24
  }
20
25
  //# sourceMappingURL=SquareAvatarWithName.js.map
package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SquareAvatarWithName.js","sourceRoot":"","sources":["../../../../src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.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;AAc3D,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,cAAc,GAAG,cAAc,EAAE,IAAI,GAAG,EAAE,EACzE,kBAAkB,GAAG,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,YAAY,GAAG,MAAM,EAAE,QAAQ,GAAG,aAAa,EAAE,YAAY,GAAG,WAAW,EAClI;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,qBAAqB,GAAG,CAC1B,oBAAC,MAAM,IACH,EAAE,EAAE;YACF,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE;SACxG,EACD,OAAO,EAAC,SAAS;QAEjB,oBAAC,UAAU,IACP,EAAE,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,EAClC,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,kBAAkB,IAE3B,UAAU,CAAC,IAAI,CAAC,CACR,CACR,CACZ,CAAC;IAEF,MAAM,cAAc,GAAG,CACnB,oBAAC,UAAU,IACP,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,IAEzE,IAAI,CACI,CAChB,CAAC;IAEF,OAAO,CACL,UAAU,CAAC,CAAC,CAAC,CACX,qBAAqB,CACtB,CAAC,CAAC,CAAC,CACA,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ;QAClC,qBAAqB;QACrB,IAAI,CAAC,CAAC,CAAC,CACJ,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,IAC3C,cAAc,CACZ,CACV,CAAC,CAAC,CAAC,cAAc,CAChB,CACT,CACF,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"SquareAvatarWithName.js","sourceRoot":"","sources":["../../../../src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.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,oBAAoB,CAAC,EAC3C,UAAU,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,cAAc,GAAG,cAAc,EAAE,IAAI,GAAG,EAAE,EACzE,kBAAkB,GAAG,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,YAAY,GAAG,MAAM,EAC3E,QAAQ,GAAG,aAAa,EAAE,YAAY,GAAG,WAAW,EAAE,KAAK,GAAG,KAAK,EACpE;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,qBAAqB,GAAG,CAC1B,oBAAC,MAAM,IACH,EAAE,EAAE;YACF,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc;YACvD,WAAW,EAAE,KAAK;YAClB,KAAK,EAAE,GAAG,WAAW,EAAE;YACvB,MAAM,EAAE,GAAG,YAAY,EAAE;SAC1B,EACD,OAAO,EAAC,SAAS;QAEjB,oBAAC,UAAU,IACP,EAAE,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,EAClC,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,kBAAkB,IAE3B,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CACtB,CACR,CACZ,CAAC;IAEF,OAAO,CACL,UAAU,CAAC,CAAC,CAAC,CACX,qBAAqB,CACtB,CAAC,CAAC,CAAC,CACA,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ;QAClC,qBAAqB;QACrB,IAAI,CAAC,CAAC,CAAC,CACJ,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE;YAC5C,oBAAC,UAAU,IACP,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,IAEzE,IAAI,CACI,CACV,CACV,CAAC,CAAC,CAAC,CACA,oBAAC,UAAU,IACP,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,EAAE,EAAE;gBACF,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;aACpG,IAEA,IAAI,CACI,CAChB,CACC,CACT,CACF,CAAC;AACJ,CAAC"}
package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts CHANGED
@@ -9,3 +9,4 @@ export declare const WithAvatarOnly: any;
9
9
  export declare const WithLink: any;
10
10
  export declare const WithLowercaseName: any;
11
11
  export declare const WithLongName: any;
12
+ export declare const IsBye: any;
package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js CHANGED
@@ -52,4 +52,9 @@ export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
52
52
  WithLongName.args = {
53
53
  name: "Team Dreamadeamadeamadeamadeam",
54
54
  };
55
+ export const IsBye = SquareAvatarWithNameTemplate.bind({});
56
+ IsBye.args = {
57
+ name: "Bye",
58
+ isBye: true,
59
+ };
55
60
  //# sourceMappingURL=SquareAvatarWithName.stories.js.map
package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SquareAvatarWithName.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,oBAAmD,MAAM,wBAAwB,CAAC;AAEzF,UAAU;AACV,eAAe;IACb,KAAK,EAAE,gCAAgC;CACxC,CAAC;AAEF,YAAY;AACZ,SAAS,4BAA4B,CAAC,IAA+B;IACnE,OAAO,oBAAC,oBAAoB,oBAAK,IAAI,EAAI,CAAC;AAC5C,CAAC;AAED,SAAS,gCAAgC,CAAC,IAA+B;IACvE,OAAO,oBAAC,GAAG,IAAC,KAAK,EAAC,OAAO;QAAC,oBAAC,oBAAoB,oBAAK,IAAI,EAAI,CAAM,CAAC;AACrE,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7D,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,YAAY;IAClB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,YAAY;IAC5B,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,YAAY;IAClB,WAAW,EAAE,MAAM;IACnB,YAAY,EAAE,MAAM;IACpB,kBAAkB,EAAE,SAAS;IAC7B,cAAc,EAAE,YAAY;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE,cAAc,CAAC,IAAI,GAAG;IACpB,UAAU,EAAE,IAAI;IAChB,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9D,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvE,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,gCAAgC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtE,YAAY,CAAC,IAAI,GAAG;IAClB,IAAI,EAAE,gCAAgC;CACvC,CAAC"}
1
+ {"version":3,"file":"SquareAvatarWithName.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,oBAAmD,MAAM,wBAAwB,CAAC;AAEzF,UAAU;AACV,eAAe;IACb,KAAK,EAAE,gCAAgC;CACxC,CAAC;AAEF,YAAY;AACZ,SAAS,4BAA4B,CAAC,IAA+B;IACnE,OAAO,oBAAC,oBAAoB,oBAAK,IAAI,EAAI,CAAC;AAC5C,CAAC;AAED,SAAS,gCAAgC,CAAC,IAA+B;IACvE,OAAO,oBAAC,GAAG,IAAC,KAAK,EAAC,OAAO;QAAC,oBAAC,oBAAoB,oBAAK,IAAI,EAAI,CAAM,CAAC;AACrE,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC7D,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,YAAY;IAClB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,YAAY;IAC5B,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,YAAY;IAClB,WAAW,EAAE,MAAM;IACnB,YAAY,EAAE,MAAM;IACpB,kBAAkB,EAAE,SAAS;IAC7B,cAAc,EAAE,YAAY;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE,cAAc,CAAC,IAAI,GAAG;IACpB,UAAU,EAAE,IAAI;IAChB,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9D,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvE,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,gCAAgC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtE,YAAY,CAAC,IAAI,GAAG;IAClB,IAAI,EAAE,gCAAgC;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,IAAI;CACZ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-tennis/ui-shared",
3
- "version": "0.1.50",
3
+ "version": "0.1.52",
4
4
  "main": "dist/items.js",
5
5
  "license": "MIT",
6
6
  "homepage": "https://universaltennis.com",
package/src/stories/assets/css/variables.css CHANGED
@@ -5,6 +5,7 @@
5
5
  --black: #000;
6
6
  --white: #fff;
7
7
  --light-grey: #d7e0ea;
8
+ --grey: #828B96;
8
9
  --darkest-grey: #3b4859;
9
10
  --cool-grey-600: #A7B2C1;
10
11
  --cool-grey-500: #C1CCDA;
package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx CHANGED
@@ -62,3 +62,9 @@ export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
62
62
  WithLongName.args = {
63
63
  name: "Team Dreamadeamadeamadeamadeam",
64
64
  };
65
+
66
+ export const IsBye = SquareAvatarWithNameTemplate.bind({});
67
+ IsBye.args = {
68
+ name: "Bye",
69
+ isBye: true,
70
+ };
package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx CHANGED
@@ -16,11 +16,13 @@ export interface SquareAvatarWithNameProps {
16
16
  name: string;
17
17
  fontCategory: string;
18
18
  fontSize: string;
19
+ isBye: boolean;
19
20
  }
20
21
 
21
22
  export default function SquareAvatarWithName({
22
23
  avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
23
- avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', fontSize = 'medium-book', fontCategory = 'secondary'
24
+ avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px',
25
+ fontSize = 'medium-book', fontCategory = 'secondary', isBye = false
24
26
  }) {
25
27
  const getAcronym = (str: string) => {
26
28
  const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
@@ -30,7 +32,10 @@ export default function SquareAvatarWithName({
30
32
  const SquareAvatarComponent = (
31
33
  <Avatar
32
34
  sx={{
33
- backgroundColor: 'var(--black)', marginRight: '8px', width: `${avatarWidth}`, height: `${avatarHeight}`
35
+ backgroundColor: isBye ? 'var(--grey)' : 'var(--black)',
36
+ marginRight: '8px',
37
+ width: `${avatarWidth}`,
38
+ height: `${avatarHeight}`
34
39
  }}
35
40
  variant="rounded"
36
41
  >
@@ -39,21 +44,11 @@ export default function SquareAvatarWithName({
39
44
  size={avatarFontSize}
40
45
  category={avatarFontCategory}
41
46
  >
42
- {getAcronym(name)}
47
+ {isBye ? '—' : getAcronym(name)}
43
48
  </Typography>
44
49
  </Avatar>
45
50
  );
46
51
 
47
- const NameTypography = (
48
- <Typography
49
- category={fontCategory}
50
- size={fontSize}
51
- sx={{ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
52
- >
53
- {name}
54
- </Typography>
55
- );
56
-
57
52
  return (
58
53
  avatarOnly ? (
59
54
  SquareAvatarComponent
@@ -62,9 +57,25 @@ export default function SquareAvatarWithName({
62
57
  {SquareAvatarComponent}
63
58
  {href ? (
64
59
  <Link href={href} sx={{ textDecoration: 'none' }}>
65
- {NameTypography}
60
+ <Typography
61
+ category={fontCategory}
62
+ size={fontSize}
63
+ sx={{ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
64
+ >
65
+ {name}
66
+ </Typography>
66
67
  </Link>
67
- ) : NameTypography}
68
+ ) : (
69
+ <Typography
70
+ category={fontCategory}
71
+ size={fontSize}
72
+ sx={{
73
+ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: isBye ? 'grey' : 'black'
74
+ }}
75
+ >
76
+ {name}
77
+ </Typography>
78
+ )}
68
79
  </Box>
69
80
  )
70
81
  );