@universal-tennis/ui-shared 0.1.52 → 0.1.53
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.
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts +3 -1
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js +2 -2
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js.map +1 -1
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts +1 -0
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js +6 -0
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx +7 -0
- package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx +3 -1
- package/workflows/package-release-1.yml +1 -1
|
@@ -6,12 +6,13 @@ export interface SquareAvatarWithNameProps {
|
|
|
6
6
|
avatarWidth: string;
|
|
7
7
|
avatarHeight: string;
|
|
8
8
|
href: string;
|
|
9
|
+
maxLinkWidth: string;
|
|
9
10
|
name: string;
|
|
10
11
|
fontCategory: string;
|
|
11
12
|
fontSize: string;
|
|
12
13
|
isBye: boolean;
|
|
13
14
|
}
|
|
14
|
-
export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, isBye }: {
|
|
15
|
+
export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, isBye, maxLinkWidth }: {
|
|
15
16
|
avatarOnly?: boolean | undefined;
|
|
16
17
|
name?: string | undefined;
|
|
17
18
|
avatarFontSize?: string | undefined;
|
|
@@ -22,4 +23,5 @@ export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize,
|
|
|
22
23
|
fontSize?: string | undefined;
|
|
23
24
|
fontCategory?: string | undefined;
|
|
24
25
|
isBye?: boolean | undefined;
|
|
26
|
+
maxLinkWidth?: string | undefined;
|
|
25
27
|
}): JSX.Element;
|
|
@@ -3,7 +3,7 @@ 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', isBye = false }) {
|
|
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, maxLinkWidth = "auto" }) {
|
|
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;
|
|
@@ -18,7 +18,7 @@ export default function SquareAvatarWithName({ avatarOnly = false, name = '', av
|
|
|
18
18
|
return (avatarOnly ? (SquareAvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
|
|
19
19
|
SquareAvatarComponent,
|
|
20
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: {
|
|
21
|
+
React.createElement(Typography, { category: fontCategory, size: fontSize, maxWidth: maxLinkWidth, sx: { whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, name))) : (React.createElement(Typography, { category: fontCategory, size: fontSize, sx: {
|
|
22
22
|
whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: isBye ? 'grey' : 'black'
|
|
23
23
|
} }, name)))));
|
|
24
24
|
}
|
|
@@ -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;
|
|
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;AAgB3D,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,EAAE,YAAY,GAAG,MAAM,EAC3F;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,QAAQ,EAAE,YAAY,EACtB,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"}
|
|
@@ -52,6 +52,12 @@ export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
|
|
|
52
52
|
WithLongName.args = {
|
|
53
53
|
name: "Team Dreamadeamadeamadeamadeam",
|
|
54
54
|
};
|
|
55
|
+
export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
|
|
56
|
+
WithLongLinkName.args = {
|
|
57
|
+
name: "Team Dreamadeamadeamadeamadeam",
|
|
58
|
+
href: "https://www.reddit.com",
|
|
59
|
+
maxLinkWidth: "200px"
|
|
60
|
+
};
|
|
55
61
|
export const IsBye = SquareAvatarWithNameTemplate.bind({});
|
|
56
62
|
IsBye.args = {
|
|
57
63
|
name: "Bye",
|
|
@@ -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;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"}
|
|
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,gBAAgB,GAAG,gCAAgC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,gBAAgB,CAAC,IAAI,GAAG;IACtB,IAAI,EAAE,gCAAgC;IACtC,IAAI,EAAE,wBAAwB;IAC9B,YAAY,EAAE,OAAO;CACtB,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
|
@@ -63,6 +63,13 @@ WithLongName.args = {
|
|
|
63
63
|
name: "Team Dreamadeamadeamadeamadeam",
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
+
export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
|
|
67
|
+
WithLongLinkName.args = {
|
|
68
|
+
name: "Team Dreamadeamadeamadeamadeam",
|
|
69
|
+
href: "https://www.reddit.com",
|
|
70
|
+
maxLinkWidth: "200px"
|
|
71
|
+
};
|
|
72
|
+
|
|
66
73
|
export const IsBye = SquareAvatarWithNameTemplate.bind({});
|
|
67
74
|
IsBye.args = {
|
|
68
75
|
name: "Bye",
|
|
@@ -13,6 +13,7 @@ export interface SquareAvatarWithNameProps {
|
|
|
13
13
|
avatarWidth: string;
|
|
14
14
|
avatarHeight: string;
|
|
15
15
|
href: string,
|
|
16
|
+
maxLinkWidth: string,
|
|
16
17
|
name: string;
|
|
17
18
|
fontCategory: string;
|
|
18
19
|
fontSize: string;
|
|
@@ -22,7 +23,7 @@ export interface SquareAvatarWithNameProps {
|
|
|
22
23
|
export default function SquareAvatarWithName({
|
|
23
24
|
avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
|
|
24
25
|
avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px',
|
|
25
|
-
fontSize = 'medium-book', fontCategory = 'secondary', isBye = false
|
|
26
|
+
fontSize = 'medium-book', fontCategory = 'secondary', isBye = false, maxLinkWidth = "auto"
|
|
26
27
|
}) {
|
|
27
28
|
const getAcronym = (str: string) => {
|
|
28
29
|
const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
|
|
@@ -60,6 +61,7 @@ export default function SquareAvatarWithName({
|
|
|
60
61
|
<Typography
|
|
61
62
|
category={fontCategory}
|
|
62
63
|
size={fontSize}
|
|
64
|
+
maxWidth={maxLinkWidth}
|
|
63
65
|
sx={{ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
|
|
64
66
|
>
|
|
65
67
|
{name}
|