@universal-tennis/ui-shared 0.1.49 → 0.1.51

package/.storybook/variables.css

@@ -5,6 +5,7 @@
     --black: #000;
     --white: #fff;
     --light-grey: #d7e0ea;
+    --grey: #828B96;
     --darkest-grey: #3b4859;
     --cool-grey-600: #A7B2C1;
     --cool-grey-500: #C1CCDA;

package/dist/components.d.ts

@@ -13,6 +13,7 @@ export { default as SessionIcon } from "./stories/atoms/Icons/SessionIcon";
 export { default as SwapIcon } from "./stories/atoms/Icons/SwapIcon";
 export { default as Map } from "./stories/atoms/Map/Map";
 export { default as AvatarWithName } from "./stories/molecules/AvatarWithName/AvatarWithName";
+export { default as SquareAvatarWithName } from "./stories/molecules/SquareAvatarWithName/SquareAvatarWithName";
 export { default as ContactCard } from "./stories/molecules/Cards/ContactCard";
 export { default as DrawCard } from "./stories/molecules/Cards/DrawCard";
 export { default as TeamCard } from "./stories/molecules/Cards/TeamCard";

package/dist/components.js

@@ -16,6 +16,7 @@ export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
 export { default as Map } from './stories/atoms/Map/Map';
 // MOLECULES
 export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
+export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
 export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEzD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEzD,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+DAA+D,CAAC;AAChH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa;AACb,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC"}

package/dist/stories/assets/css/variables.css

@@ -5,6 +5,7 @@
     --black: #000;
     --white: #fff;
     --light-grey: #d7e0ea;
+    --grey: #828B96;
     --darkest-grey: #3b4859;
     --cool-grey-600: #A7B2C1;
     --cool-grey-500: #C1CCDA;

package/dist/stories/atoms/Icons/CalendarIcon.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 export default function CalendarIcon({ size, color }) {
-    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 14 14", fill: color, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 0.5C4.77614 0.5 5 0.723858 5 1V2H9V1C9 0.723858 9.22386 0.5 9.5 0.5C9.77614 0.5 10 0.723858 10 1V2H11C12.1046 2 13 2.89543 13 4V11C13 12.1046 12.1046 13 11 13H3C1.89543 13 1 12.1046 1 11V4C1 2.89543 1.89543 2 3 2H4V1C4 0.723858 4.22386 0.5 4.5 0.5ZM9 3V4C9 4.27614 9.22386 4.5 9.5 4.5C9.77614 4.5 10 4.27614 10 4V3H11C11.5523 3 12 3.44772 12 4V6.08325H2V4C2 3.44772 2.44772 3 3 3H4V4C4 4.27614 4.22386 4.5 4.5 4.5C4.77614 4.5 5 4.27614 5 4V3H9ZM2 7.08325V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V7.08325H2Z" })));
 }
 //# sourceMappingURL=CalendarIcon.js.map

package/dist/stories/atoms/Icons/LocationIcon.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 export default function LocationIcon({ size, color }) {
-    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: color, xmlns: "http://www.w3.org/2000/svg" },
+    return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 14 14", fill: color, xmlns: "http://www.w3.org/2000/svg" },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 8C8.10457 8 9 7.10457 9 6C9 4.89543 8.10457 4 7 4C5.89543 4 5 4.89543 5 6C5 7.10457 5.89543 8 7 8ZM7 9C8.65685 9 10 7.65685 10 6C10 4.34315 8.65685 3 7 3C5.34315 3 4 4.34315 4 6C4 7.65685 5.34315 9 7 9Z" }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.30809 10.9655C10.7626 9.57161 12 7.8219 12 6C12 3.23858 9.76142 1 7 1C4.23858 1 2 3.23858 2 6C2 7.8219 3.2374 9.57161 4.69191 10.9655C5.39697 11.6412 6.10609 12.1882 6.64052 12.5668C6.7725 12.6603 6.89326 12.7431 7 12.8146C7.10674 12.7431 7.2275 12.6603 7.35948 12.5668C7.89391 12.1882 8.60303 11.6412 9.30809 10.9655ZM7 14C7 14 13 10.5 13 6C13 2.68629 10.3137 0 7 0C3.68629 0 1 2.68629 1 6C1 10.5 7 14 7 14Z" })));
 }

package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export interface SquareAvatarWithNameProps {
+    avatarOnly: boolean;
+    avatarFontCategory: string;
+    avatarFontSize: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    href: string;
+    name: string;
+    fontCategory: string;
+    fontSize: string;
+    isBye: boolean;
+}
+export default function SquareAvatarWithName({ avatarOnly, name, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, isBye }: {
+    avatarOnly?: boolean | undefined;
+    name?: string | undefined;
+    avatarFontSize?: string | undefined;
+    href?: string | undefined;
+    avatarFontCategory?: string | undefined;
+    avatarWidth?: string | undefined;
+    avatarHeight?: string | undefined;
+    fontSize?: string | undefined;
+    fontCategory?: string | undefined;
+    isBye?: boolean | undefined;
+}): JSX.Element;

package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Typography from '../../atoms/Typography/Typography';
+export default function SquareAvatarWithName({ avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', fontSize = 'medium-book', fontCategory = 'secondary', isBye = false }) {
+    const getAcronym = (str) => {
+        const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
+        return acronym;
+    };
+    const SquareAvatarComponent = (React.createElement(Avatar, { sx: {
+            backgroundColor: isBye ? 'var(--grey)' : 'var(--black)',
+            marginRight: '8px',
+            width: `${avatarWidth}`,
+            height: `${avatarHeight}`
+        }, variant: "rounded" },
+        React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, isBye ? '—' : getAcronym(name))));
+    const NameTypography = (React.createElement(Typography, { category: fontCategory, size: fontSize, sx: { whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, name));
+    return (avatarOnly ? (SquareAvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
+        SquareAvatarComponent,
+        href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } }, NameTypography)) : NameTypography)));
+}
+//# sourceMappingURL=SquareAvatarWithName.js.map

package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.js.map

@@ -0,0 +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"}

package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: any;
+export declare const WithCustomTypography: any;
+export declare const WithCustomAvatarSize: any;
+export declare const WithAvatarOnly: any;
+export declare const WithLink: any;
+export declare const WithLowercaseName: any;
+export declare const WithLongName: any;
+export declare const isBye: any;

package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import SquareAvatarWithName from './SquareAvatarWithName';
+// Default
+export default {
+    title: 'Molecules/SquareAvatarWithName',
+};
+// Templates
+function SquareAvatarWithNameTemplate(args) {
+    return React.createElement(SquareAvatarWithName, Object.assign({}, args));
+}
+function SquareAvatarWithLongNameTemplate(args) {
+    return React.createElement(Box, { width: "200px" },
+        React.createElement(SquareAvatarWithName, Object.assign({}, args)));
+}
+// Stories
+export const Default = SquareAvatarWithNameTemplate.bind({});
+Default.args = {
+    name: "Team Dream",
+};
+export const WithCustomTypography = SquareAvatarWithNameTemplate.bind({});
+WithCustomTypography.args = {
+    name: "Team Dream",
+    avatarFontCategory: "secondary",
+    avatarFontSize: "small-book",
+    fontCategory: "primary",
+    fontSize: "medium-book"
+};
+export const WithCustomAvatarSize = SquareAvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+    name: "Team Dream",
+    avatarWidth: '40px',
+    avatarHeight: '40px',
+    avatarFontCategory: "primary",
+    avatarFontSize: "small-book",
+};
+export const WithAvatarOnly = SquareAvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+    avatarOnly: true,
+    name: "Team Dream",
+};
+export const WithLink = SquareAvatarWithNameTemplate.bind({});
+WithLink.args = {
+    href: "https://www.reddit.com",
+    name: "Team Dream",
+};
+export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
+WithLowercaseName.args = {
+    name: "team dream",
+};
+export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
+WithLongName.args = {
+    name: "Team Dreamadeamadeamadeamadeam",
+};
+export const isBye = SquareAvatarWithNameTemplate.bind({});
+isBye.args = {
+    name: "Bye",
+    isBye: true,
+};
+//# sourceMappingURL=SquareAvatarWithName.stories.js.map

package/dist/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.js.map

@@ -0,0 +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

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

package/src/components.jsx

@@ -18,6 +18,7 @@ export { default as Map } from './stories/atoms/Map/Map';
 
 // MOLECULES
 export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
+export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
 export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';

package/src/stories/assets/css/variables.css

@@ -5,6 +5,7 @@
     --black: #000;
     --white: #fff;
     --light-grey: #d7e0ea;
+    --grey: #828B96;
     --darkest-grey: #3b4859;
     --cool-grey-600: #A7B2C1;
     --cool-grey-500: #C1CCDA;

package/src/stories/atoms/Icons/CalendarIcon.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './sharedTypes';
 
 export default function CalendarIcon({ size, color }: IconProps) {
   return (  
-      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
+      <svg width={size} height={size} viewBox="0 0 14 14" fill={color} xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M4.5 0.5C4.77614 0.5 5 0.723858 5 1V2H9V1C9 0.723858 9.22386 0.5 9.5 0.5C9.77614 0.5 10 0.723858 10 1V2H11C12.1046 2 13 2.89543 13 4V11C13 12.1046 12.1046 13 11 13H3C1.89543 13 1 12.1046 1 11V4C1 2.89543 1.89543 2 3 2H4V1C4 0.723858 4.22386 0.5 4.5 0.5ZM9 3V4C9 4.27614 9.22386 4.5 9.5 4.5C9.77614 4.5 10 4.27614 10 4V3H11C11.5523 3 12 3.44772 12 4V6.08325H2V4C2 3.44772 2.44772 3 3 3H4V4C4 4.27614 4.22386 4.5 4.5 4.5C4.77614 4.5 5 4.27614 5 4V3H9ZM2 7.08325V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V7.08325H2Z" />
       </svg>
   );

package/src/stories/atoms/Icons/LocationIcon.tsx

@@ -4,7 +4,7 @@ import { IconProps } from './sharedTypes';
 
 export default function LocationIcon({ size, color }: IconProps) {
   return (  
-      <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
+      <svg width={size} height={size} viewBox="0 0 14 14" fill={color} xmlns="http://www.w3.org/2000/svg">
           <path fillRule="evenodd" clipRule="evenodd" d="M7 8C8.10457 8 9 7.10457 9 6C9 4.89543 8.10457 4 7 4C5.89543 4 5 4.89543 5 6C5 7.10457 5.89543 8 7 8ZM7 9C8.65685 9 10 7.65685 10 6C10 4.34315 8.65685 3 7 3C5.34315 3 4 4.34315 4 6C4 7.65685 5.34315 9 7 9Z" />
           <path fillRule="evenodd" clipRule="evenodd" d="M9.30809 10.9655C10.7626 9.57161 12 7.8219 12 6C12 3.23858 9.76142 1 7 1C4.23858 1 2 3.23858 2 6C2 7.8219 3.2374 9.57161 4.69191 10.9655C5.39697 11.6412 6.10609 12.1882 6.64052 12.5668C6.7725 12.6603 6.89326 12.7431 7 12.8146C7.10674 12.7431 7.2275 12.6603 7.35948 12.5668C7.89391 12.1882 8.60303 11.6412 9.30809 10.9655ZM7 14C7 14 13 10.5 13 6C13 2.68629 10.3137 0 7 0C3.68629 0 1 2.68629 1 6C1 10.5 7 14 7 14Z" />
       </svg>

package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import SquareAvatarWithName, { SquareAvatarWithNameProps } from './SquareAvatarWithName';
+
+// Default
+export default {
+  title: 'Molecules/SquareAvatarWithName',
+};
+
+// Templates
+function SquareAvatarWithNameTemplate(args: SquareAvatarWithNameProps) {
+  return <SquareAvatarWithName {...args} />;  
+}
+
+function SquareAvatarWithLongNameTemplate(args: SquareAvatarWithNameProps) {
+  return <Box width="200px"><SquareAvatarWithName {...args} /></Box>;  
+}
+
+// Stories
+export const Default = SquareAvatarWithNameTemplate.bind({});
+Default.args = {
+  name: "Team Dream",
+};
+
+export const WithCustomTypography = SquareAvatarWithNameTemplate.bind({});
+WithCustomTypography.args = {
+  name: "Team Dream",
+  avatarFontCategory: "secondary",
+  avatarFontSize: "small-book", 
+  fontCategory: "primary",
+  fontSize: "medium-book"
+};
+
+export const WithCustomAvatarSize = SquareAvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+  name: "Team Dream",
+  avatarWidth: '40px',
+  avatarHeight: '40px',
+  avatarFontCategory: "primary",
+  avatarFontSize: "small-book", 
+};
+
+export const WithAvatarOnly = SquareAvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+  avatarOnly: true,  
+  name: "Team Dream",
+};
+
+export const WithLink = SquareAvatarWithNameTemplate.bind({});
+WithLink.args = {
+  href: "https://www.reddit.com",
+  name: "Team Dream",
+};
+
+export const WithLowercaseName = SquareAvatarWithNameTemplate.bind({});
+WithLowercaseName.args = {
+  name: "team dream",
+};
+
+export const WithLongName = SquareAvatarWithLongNameTemplate.bind({});
+WithLongName.args = {
+  name: "Team Dreamadeamadeamadeamadeam",
+};
+
+export const isBye = SquareAvatarWithNameTemplate.bind({});
+isBye.args = {
+  name: "Bye",
+  isBye: true,
+};

package/src/stories/molecules/SquareAvatarWithName/SquareAvatarWithName.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+
+import Typography from '../../atoms/Typography/Typography';
+
+export interface SquareAvatarWithNameProps {
+    avatarOnly: boolean;
+    avatarFontCategory: string;
+    avatarFontSize: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    href: string,
+    name: string;
+    fontCategory: string;
+    fontSize: string;
+    isBye: boolean;
+  }
+
+export default function SquareAvatarWithName({
+  avatarOnly = false, name = '', avatarFontSize = 'small-medium', href = '',
+  avatarFontCategory = 'primary', avatarWidth = '26px', avatarHeight = '26px', 
+  fontSize = 'medium-book', fontCategory = 'secondary', isBye = false
+}) {
+  const getAcronym = (str: string) => {
+    const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
+    return acronym;
+  };
+
+  const SquareAvatarComponent = (
+      <Avatar 
+          sx={{ 
+            backgroundColor: isBye ? 'var(--grey)' : 'var(--black)', 
+            marginRight: '8px', 
+            width: `${avatarWidth}`, 
+            height: `${avatarHeight}` 
+          }} 
+          variant="rounded"
+      >
+          <Typography 
+              sx={{ textTransform: 'uppercase' }} 
+              size={avatarFontSize} 
+              category={avatarFontCategory}
+          >
+              {isBye ? '—' : getAcronym(name)}
+          </Typography>
+      </Avatar>
+  );
+
+  const NameTypography = (
+      <Typography 
+          category={fontCategory}
+          size={fontSize}
+          sx={{ whiteSpace: 'noWrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+      >
+          {name}
+      </Typography>
+  );
+
+  return (
+    avatarOnly ? (
+      SquareAvatarComponent
+    ) : (
+        <Box display="flex" alignItems="center">
+            {SquareAvatarComponent}
+            {href ? (
+                <Link href={href} sx={{ textDecoration: 'none' }}>
+                    {NameTypography}
+                </Link>
+            ) : NameTypography}
+        </Box>
+    )
+  );
+}