@universal-tennis/ui-shared 0.1.76 → 0.1.78
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/Cards/shared.d.ts +7 -2
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts +13 -11
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js +12 -7
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js.map +1 -1
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts +2 -0
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js +12 -0
- package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js.map +1 -1
- package/dist/stories/organisms/Tables/SortableTable.js +6 -5
- package/dist/stories/organisms/Tables/SortableTable.js.map +1 -1
- package/package.json +1 -1
- package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx +14 -0
- package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx +39 -24
- package/src/stories/organisms/Tables/SortableTable.tsx +12 -5
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/system").
|
|
2
|
+
export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
|
|
3
|
+
children?: import("react").ReactNode;
|
|
4
|
+
component?: import("react").ElementType<any> | undefined;
|
|
5
|
+
ref?: import("react").Ref<unknown> | undefined;
|
|
6
|
+
sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
|
|
7
|
+
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
3
8
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
4
|
-
}, keyof import("@mui/
|
|
9
|
+
}, "ref" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "component" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface SquareAvatarWithNameProps {
|
|
3
|
-
avatarOnly
|
|
4
|
-
avatarFontCategory
|
|
5
|
-
avatarFontSize
|
|
6
|
-
avatarWidth
|
|
7
|
-
avatarHeight
|
|
8
|
-
href
|
|
9
|
-
maxLinkWidth
|
|
3
|
+
avatarOnly?: boolean;
|
|
4
|
+
avatarFontCategory?: string;
|
|
5
|
+
avatarFontSize?: string;
|
|
6
|
+
avatarWidth?: string;
|
|
7
|
+
avatarHeight?: string;
|
|
8
|
+
href?: string;
|
|
9
|
+
maxLinkWidth?: string;
|
|
10
10
|
name: string;
|
|
11
|
-
fontCategory
|
|
12
|
-
fontSize
|
|
13
|
-
disabled
|
|
11
|
+
fontCategory?: string;
|
|
12
|
+
fontSize?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
subtitle?: string;
|
|
14
15
|
}
|
|
15
|
-
export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, disabled, maxLinkWidth }: {
|
|
16
|
+
export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, disabled, maxLinkWidth, subtitle }: {
|
|
16
17
|
avatarOnly?: boolean | undefined;
|
|
17
18
|
name?: string | undefined;
|
|
18
19
|
avatarFontSize?: string | undefined;
|
|
@@ -24,4 +25,5 @@ export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize,
|
|
|
24
25
|
fontCategory?: string | undefined;
|
|
25
26
|
disabled?: boolean | undefined;
|
|
26
27
|
maxLinkWidth?: string | undefined;
|
|
28
|
+
subtitle?: string | undefined;
|
|
27
29
|
}): JSX.Element;
|
|
@@ -3,10 +3,11 @@ 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', disabled = false, maxLinkWidth = "auto" }) {
|
|
6
|
+
export default function SquareAvatarWithName({ avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', fontSize = 'medium-book', fontCategory = 'secondary', disabled = false, maxLinkWidth = "auto", subtitle = '' }) {
|
|
7
7
|
const getAcronym = (str) => {
|
|
8
|
-
const
|
|
9
|
-
|
|
8
|
+
const cleanStr = str === null || str === void 0 ? void 0 : str.replace(/[^a-zA-Z\s]/g, '').split(' '); // Remove non-letter and non-space characters
|
|
9
|
+
const acronym = cleanStr === null || cleanStr === void 0 ? void 0 : cleanStr.map((word) => word.charAt(0)).join('').substring(0, 3);
|
|
10
|
+
return acronym;
|
|
10
11
|
};
|
|
11
12
|
const SquareAvatarComponent = (React.createElement(Avatar, { sx: {
|
|
12
13
|
backgroundColor: disabled ? 'var(--grey)' : 'var(--black)',
|
|
@@ -17,9 +18,13 @@ export default function SquareAvatarWithName({ avatarOnly = false, name = '', av
|
|
|
17
18
|
React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, disabled ? '—' : getAcronym(name))));
|
|
18
19
|
return (avatarOnly ? (SquareAvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
|
|
19
20
|
SquareAvatarComponent,
|
|
20
|
-
|
|
21
|
-
React.createElement(
|
|
22
|
-
whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis',
|
|
23
|
-
|
|
21
|
+
React.createElement(Box, null,
|
|
22
|
+
href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
|
|
23
|
+
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: {
|
|
24
|
+
whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: disabled ? 'grey' : 'black'
|
|
25
|
+
} }, name)),
|
|
26
|
+
subtitle && (React.createElement(Typography, { category: "secondary", size: "small-book", sx: {
|
|
27
|
+
whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'black'
|
|
28
|
+
} }, subtitle))))));
|
|
24
29
|
}
|
|
25
30
|
//# sourceMappingURL=SquareAvatarWithName.js.map
|
|
@@ -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":"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"}
|
|
@@ -7,8 +7,10 @@ export declare const WithCustomTypography: any;
|
|
|
7
7
|
export declare const WithCustomAvatarSize: any;
|
|
8
8
|
export declare const WithAvatarOnly: any;
|
|
9
9
|
export declare const WithLink: any;
|
|
10
|
+
export declare const WithSubtitle: any;
|
|
10
11
|
export declare const WithLowercaseName: any;
|
|
11
12
|
export declare const WithLongName: any;
|
|
12
13
|
export declare const WithMultipleNames: any;
|
|
14
|
+
export declare const WithMultipleNamesAndCharTypes: any;
|
|
13
15
|
export declare const WithLongLinkName: any;
|
|
14
16
|
export declare const Disabled: any;
|
|
@@ -44,6 +44,14 @@ WithLink.args = {
|
|
|
44
44
|
href: "https://www.reddit.com",
|
|
45
45
|
name: "Team Dream",
|
|
46
46
|
};
|
|
47
|
+
export const WithSubtitle = SquareAvatarWithNameTemplate.bind({});
|
|
48
|
+
WithSubtitle.args = {
|
|
49
|
+
avatarWidth: '40px',
|
|
50
|
+
avatarHeight: '40px',
|
|
51
|
+
avatarFontSize: "medium-medium",
|
|
52
|
+
name: "Team Dream",
|
|
53
|
+
subtitle: '3 players'
|
|
54
|
+
};
|
|
47
55
|
export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
|
|
48
56
|
WithLowercaseName.args = {
|
|
49
57
|
name: "team dream",
|
|
@@ -56,6 +64,10 @@ export const WithMultipleNames = SquareAvatarWithNameTemplate.bind({});
|
|
|
56
64
|
WithMultipleNames.args = {
|
|
57
65
|
name: "Team Dream Nightmare And Everything In Between",
|
|
58
66
|
};
|
|
67
|
+
export const WithMultipleNamesAndCharTypes = SquareAvatarWithNameTemplate.bind({});
|
|
68
|
+
WithMultipleNamesAndCharTypes.args = {
|
|
69
|
+
name: "Team - Dream * Nightmare And Everything In Between",
|
|
70
|
+
};
|
|
59
71
|
export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
|
|
60
72
|
WithLongLinkName.args = {
|
|
61
73
|
name: "Team Dreamadeamadeamadeamadeam",
|
|
@@ -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,iBAAiB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvE,iBAAiB,CAAC,IAAI,GAAG;IACvB,IAAI,EAAE,gDAAgD;CACvD,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,QAAQ,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9D,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE,KAAK;IACX,QAAQ,EAAE,IAAI;CACf,CAAC"}
|
|
1
|
+
{"version":3,"file":"SquareAvatarWithName.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
|
|
2
3
|
import Table from "@mui/material/Table";
|
|
3
4
|
import TableBody from "@mui/material/TableBody";
|
|
4
5
|
import TableCell from "@mui/material/TableCell";
|
|
@@ -7,7 +8,6 @@ import TableHead from "@mui/material/TableHead";
|
|
|
7
8
|
import MuiTableRow from "@mui/material/TableRow";
|
|
8
9
|
import TableSortLabel from "@mui/material/TableSortLabel";
|
|
9
10
|
import Toolbar from "@mui/material/Toolbar";
|
|
10
|
-
import Paper from "@mui/material/Paper";
|
|
11
11
|
import Typography from '../../atoms/Typography/Typography';
|
|
12
12
|
function SortableTable({ headCells, tableData, rowComponent, sortOrder, sortByProperty, title = '', onOrderPropertyChange, }) {
|
|
13
13
|
const TableRow = rowComponent;
|
|
@@ -17,14 +17,15 @@ function SortableTable({ headCells, tableData, rowComponent, sortOrder, sortByPr
|
|
|
17
17
|
onOrderPropertyChange(property);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
return (React.createElement(
|
|
20
|
+
return (React.createElement(React.Fragment, null,
|
|
21
21
|
title && (React.createElement(Toolbar, { sx: { pl: { sm: 2 }, pr: { xs: 1, sm: 1 } } },
|
|
22
22
|
React.createElement(Typography, { category: "secondary", size: "large-medium", id: "tableTitle" }, title))),
|
|
23
23
|
React.createElement(TableContainer, null,
|
|
24
|
-
React.createElement(Table, { sx: { minWidth: 750 }, "aria-labelledby": "tableTitle", size: "medium" },
|
|
24
|
+
React.createElement(Table, { sx: { minWidth: 750, borderCollapse: 'separate', borderSpacing: '0px 4px' }, "aria-labelledby": "tableTitle", size: "medium" },
|
|
25
25
|
React.createElement(TableHead, null,
|
|
26
|
-
React.createElement(MuiTableRow, null, headCells.map((headCell) => (React.createElement(TableCell, { key: headCell.id, align: "left", padding: "normal", sortDirection: sortByProperty === headCell.id ? sortOrder : false },
|
|
27
|
-
React.createElement(TableSortLabel, { disabled: headCell.isSortingDisabled, hideSortIcon: !(headCell === null || headCell === void 0 ? void 0 : headCell.label), active: sortByProperty === headCell.id, direction: sortByProperty === headCell.id ? sortOrder : 'asc', onClick: handleRequestSort(headCell.id) },
|
|
26
|
+
React.createElement(MuiTableRow, null, headCells.map((headCell) => (React.createElement(TableCell, { key: headCell.id, align: "left", padding: "normal", sortDirection: sortByProperty === headCell.id ? sortOrder : false, sx: { borderBottom: 'none', whiteSpace: 'noWrap' } },
|
|
27
|
+
React.createElement(TableSortLabel, { IconComponent: ArrowDropDown, disabled: headCell.isSortingDisabled, hideSortIcon: !(headCell === null || headCell === void 0 ? void 0 : headCell.label), active: sortByProperty === headCell.id, direction: sortByProperty === headCell.id ? sortOrder : 'asc', onClick: handleRequestSort(headCell.id) },
|
|
28
|
+
React.createElement(Typography, { category: "secondary", size: "x-small-medium-cap" }, headCell === null || headCell === void 0 ? void 0 : headCell.label))))))),
|
|
28
29
|
React.createElement(TableBody, null, tableData && tableData.map((data, index) => {
|
|
29
30
|
const labelId = `table-${index}`;
|
|
30
31
|
return (React.createElement(TableRow, { key: data.id, rowData: data, labelId: labelId }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/SortableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,OAAO,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"SortableTable.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/SortableTable.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -53,6 +53,15 @@ WithLink.args = {
|
|
|
53
53
|
name: "Team Dream",
|
|
54
54
|
};
|
|
55
55
|
|
|
56
|
+
export const WithSubtitle = SquareAvatarWithNameTemplate.bind({});
|
|
57
|
+
WithSubtitle.args = {
|
|
58
|
+
avatarWidth: '40px',
|
|
59
|
+
avatarHeight: '40px',
|
|
60
|
+
avatarFontSize: "medium-medium",
|
|
61
|
+
name: "Team Dream",
|
|
62
|
+
subtitle: '3 players'
|
|
63
|
+
};
|
|
64
|
+
|
|
56
65
|
export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
|
|
57
66
|
WithLowercaseName.args = {
|
|
58
67
|
name: "team dream",
|
|
@@ -68,6 +77,11 @@ WithMultipleNames.args = {
|
|
|
68
77
|
name: "Team Dream Nightmare And Everything In Between",
|
|
69
78
|
};
|
|
70
79
|
|
|
80
|
+
export const WithMultipleNamesAndCharTypes = SquareAvatarWithNameTemplate.bind({});
|
|
81
|
+
WithMultipleNamesAndCharTypes.args = {
|
|
82
|
+
name: "Team - Dream * Nightmare And Everything In Between",
|
|
83
|
+
};
|
|
84
|
+
|
|
71
85
|
export const WithLongLinkName = SquareAvatarWithLongNameTemplate.bind({});
|
|
72
86
|
WithLongLinkName.args = {
|
|
73
87
|
name: "Team Dreamadeamadeamadeamadeam",
|
|
@@ -7,27 +7,29 @@ import Link from '@mui/material/Link';
|
|
|
7
7
|
import Typography from '../../atoms/Typography/Typography';
|
|
8
8
|
|
|
9
9
|
export interface SquareAvatarWithNameProps {
|
|
10
|
-
avatarOnly
|
|
11
|
-
avatarFontCategory
|
|
12
|
-
avatarFontSize
|
|
13
|
-
avatarWidth
|
|
14
|
-
avatarHeight
|
|
15
|
-
href
|
|
16
|
-
maxLinkWidth
|
|
10
|
+
avatarOnly?: boolean;
|
|
11
|
+
avatarFontCategory?: string;
|
|
12
|
+
avatarFontSize?: string;
|
|
13
|
+
avatarWidth?: string;
|
|
14
|
+
avatarHeight?: string;
|
|
15
|
+
href?: string,
|
|
16
|
+
maxLinkWidth?: string,
|
|
17
17
|
name: string;
|
|
18
|
-
fontCategory
|
|
19
|
-
fontSize
|
|
20
|
-
disabled
|
|
18
|
+
fontCategory?: string;
|
|
19
|
+
fontSize?: string;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
subtitle?: string;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
export default function SquareAvatarWithName({
|
|
24
25
|
avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
|
|
25
26
|
avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px',
|
|
26
|
-
fontSize = 'medium-book', fontCategory = 'secondary', disabled = false, maxLinkWidth = "auto"
|
|
27
|
+
fontSize = 'medium-book', fontCategory = 'secondary', disabled = false, maxLinkWidth = "auto", subtitle = ''
|
|
27
28
|
}) {
|
|
28
29
|
const getAcronym = (str: string) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
30
|
+
const cleanStr = str?.replace(/[^a-zA-Z\s]/g, '').split(' '); // Remove non-letter and non-space characters
|
|
31
|
+
const acronym = cleanStr?.map((word) => word.charAt(0)).join('').substring(0, 3);
|
|
32
|
+
return acronym;
|
|
31
33
|
};
|
|
32
34
|
|
|
33
35
|
const SquareAvatarComponent = (
|
|
@@ -56,28 +58,41 @@ export default function SquareAvatarWithName({
|
|
|
56
58
|
) : (
|
|
57
59
|
<Box display="flex" alignItems="center">
|
|
58
60
|
{SquareAvatarComponent}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
<Box>
|
|
62
|
+
{href ? (
|
|
63
|
+
<Link href={href} sx={{ textDecoration: 'none' }}>
|
|
64
|
+
<Typography
|
|
65
|
+
category={fontCategory}
|
|
66
|
+
size={fontSize}
|
|
67
|
+
maxWidth={maxLinkWidth}
|
|
68
|
+
sx={{ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
|
|
69
|
+
>
|
|
70
|
+
{name}
|
|
71
|
+
</Typography>
|
|
72
|
+
</Link>
|
|
73
|
+
) : (
|
|
61
74
|
<Typography
|
|
62
75
|
category={fontCategory}
|
|
63
76
|
size={fontSize}
|
|
64
|
-
|
|
65
|
-
|
|
77
|
+
sx={{
|
|
78
|
+
whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: disabled ? 'grey' : 'black'
|
|
79
|
+
}}
|
|
66
80
|
>
|
|
67
81
|
{name}
|
|
68
82
|
</Typography>
|
|
69
|
-
|
|
70
|
-
|
|
83
|
+
)}
|
|
84
|
+
{subtitle && (
|
|
71
85
|
<Typography
|
|
72
|
-
category=
|
|
73
|
-
size=
|
|
86
|
+
category="secondary"
|
|
87
|
+
size="small-book"
|
|
74
88
|
sx={{
|
|
75
|
-
whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color:
|
|
89
|
+
whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'black'
|
|
76
90
|
}}
|
|
77
91
|
>
|
|
78
|
-
{
|
|
92
|
+
{subtitle}
|
|
79
93
|
</Typography>
|
|
80
|
-
|
|
94
|
+
)}
|
|
95
|
+
</Box>
|
|
81
96
|
</Box>
|
|
82
97
|
)
|
|
83
98
|
);
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ComponentType, SyntheticEvent } from "react";
|
|
2
2
|
|
|
3
|
+
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
|
|
3
4
|
import Table from "@mui/material/Table";
|
|
4
5
|
import TableBody from "@mui/material/TableBody";
|
|
5
6
|
import TableCell from "@mui/material/TableCell";
|
|
@@ -8,7 +9,6 @@ import TableHead from "@mui/material/TableHead";
|
|
|
8
9
|
import MuiTableRow from "@mui/material/TableRow";
|
|
9
10
|
import TableSortLabel from "@mui/material/TableSortLabel";
|
|
10
11
|
import Toolbar from "@mui/material/Toolbar";
|
|
11
|
-
import Paper from "@mui/material/Paper";
|
|
12
12
|
|
|
13
13
|
import { TableData } from "types/tableDataTypes";
|
|
14
14
|
import Typography from '../../atoms/Typography/Typography';
|
|
@@ -51,7 +51,7 @@ function SortableTable({
|
|
|
51
51
|
};
|
|
52
52
|
|
|
53
53
|
return (
|
|
54
|
-
|
|
54
|
+
<>
|
|
55
55
|
{title && (
|
|
56
56
|
<Toolbar sx={{ pl: { sm: 2 }, pr: { xs: 1, sm: 1 } }}>
|
|
57
57
|
<Typography
|
|
@@ -65,7 +65,7 @@ function SortableTable({
|
|
|
65
65
|
)}
|
|
66
66
|
<TableContainer>
|
|
67
67
|
<Table
|
|
68
|
-
sx={{ minWidth: 750 }}
|
|
68
|
+
sx={{ minWidth: 750, borderCollapse: 'separate', borderSpacing: '0px 4px' }}
|
|
69
69
|
aria-labelledby="tableTitle"
|
|
70
70
|
size="medium"
|
|
71
71
|
>
|
|
@@ -77,15 +77,22 @@ function SortableTable({
|
|
|
77
77
|
align="left"
|
|
78
78
|
padding="normal"
|
|
79
79
|
sortDirection={sortByProperty === headCell.id ? sortOrder : false}
|
|
80
|
+
sx={{ borderBottom: 'none', whiteSpace: 'noWrap' }}
|
|
80
81
|
>
|
|
81
82
|
<TableSortLabel
|
|
83
|
+
IconComponent={ArrowDropDown}
|
|
82
84
|
disabled={headCell.isSortingDisabled}
|
|
83
85
|
hideSortIcon={!headCell?.label}
|
|
84
86
|
active={sortByProperty === headCell.id}
|
|
85
87
|
direction={sortByProperty === headCell.id ? sortOrder : 'asc'}
|
|
86
88
|
onClick={handleRequestSort(headCell.id)}
|
|
87
89
|
>
|
|
88
|
-
|
|
90
|
+
<Typography
|
|
91
|
+
category="secondary"
|
|
92
|
+
size="x-small-medium-cap"
|
|
93
|
+
>
|
|
94
|
+
{headCell?.label}
|
|
95
|
+
</Typography>
|
|
89
96
|
</TableSortLabel>
|
|
90
97
|
</TableCell>
|
|
91
98
|
))}
|
|
@@ -105,7 +112,7 @@ function SortableTable({
|
|
|
105
112
|
</TableBody>
|
|
106
113
|
</Table>
|
|
107
114
|
</TableContainer>
|
|
108
|
-
|
|
115
|
+
</>
|
|
109
116
|
);
|
|
110
117
|
}
|
|
111
118
|
|