@universal-tennis/ui-shared 0.1.50 → 0.1.51

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.
@@ -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;
@@ -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;
@@ -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;
@@ -3,15 +3,18 @@ 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))));
17
+ React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, isBye ? '—' : getAcronym(name))));
15
18
  const NameTypography = (React.createElement(Typography, { category: fontCategory, size: fontSize, sx: { whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, name));
16
19
  return (avatarOnly ? (SquareAvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
17
20
  SquareAvatarComponent,
@@ -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,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"}
@@ -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;
@@ -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
@@ -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.51",
4
4
  "main": "dist/items.js",
5
5
  "license": "MIT",
6
6
  "homepage": "https://universaltennis.com",
@@ -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;
@@ -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
+ };
@@ -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,7 +44,7 @@ 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
  );