@universal-tennis/ui-shared 0.1.42 → 0.1.44

package/dist/components.js

@@ -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';
 // MOLECULES
+export { default as AvatarWithName } from './stories/molecules/AvatarWithName';
 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,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,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,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,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,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,oCAAoC,CAAC;AAC/E,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/atoms/Map/Map.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface MapProps {
     placeId: string;
-    height: string;
+    height: string | number;
+    width: string | number;
 }
-export default function Map({ placeId, height }: MapProps): JSX.Element;
+export default function Map({ placeId, height, width }: MapProps): JSX.Element;

package/dist/stories/atoms/Map/Map.js

@@ -1,8 +1,9 @@
 import React from 'react';
-export default function Map({ placeId, height }) {
+export default function Map({ placeId, height, width }) {
     const placeParam = placeId && `q=place_id:${placeId}`;
     const placeUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCapzh9VsfXAzC9fAaosZJulONx7H1BFaY&${placeParam}`;
-    const mapheight = height || `216px`;
-    return (React.createElement("iframe", { width: "100%", height: mapheight, src: placeUrl, title: "Google Maps" }));
+    const mapHeight = height || `216px`;
+    const mapWidth = width || `100%`;
+    return (React.createElement("iframe", { width: mapWidth, height: mapHeight, src: placeUrl, title: "Google Maps" }));
 }
 //# sourceMappingURL=Map.js.map

package/dist/stories/atoms/Map/Map.js.map

@@ -1 +1 @@
-{"version":3,"file":"Map.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Map/Map.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EACN;IACT,MAAM,UAAU,GAAG,OAAO,IAAI,cAAc,OAAO,EAAE,CAAC;IACtD,MAAM,QAAQ,GAAG,0FAA0F,UAAU,EAAE,CAAC;IAExH,MAAM,SAAS,GAAG,MAAM,IAAI,OAAO,CAAC;IACpC,OAAO,CACH,gCACI,KAAK,EAAC,MAAM,EACZ,MAAM,EAAE,SAAS,EACjB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,aAAa,GACrB,CACL,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Map.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Map/Map.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,EAC1B,OAAO,EAAE,MAAM,EAAE,KAAK,EACb;IACT,MAAM,UAAU,GAAG,OAAO,IAAI,cAAc,OAAO,EAAE,CAAC;IACtD,MAAM,QAAQ,GAAG,0FAA0F,UAAU,EAAE,CAAC;IACxH,MAAM,SAAS,GAAG,MAAM,IAAI,OAAO,CAAC;IACpC,MAAM,QAAQ,GAAG,KAAK,IAAI,MAAM,CAAC;IAEjC,OAAO,CACH,gCACI,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,SAAS,EACjB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,aAAa,GACrB,CACL,CAAC;AACJ,CAAC"}

package/dist/stories/atoms/Map/Map.stories.d.ts

@@ -3,4 +3,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
-export declare const WithCustomHeight: any;
+export declare const WithCustomStringHeight: any;
+export declare const WithCustomNumberHeight: any;
+export declare const WithCustomStringWidth: any;
+export declare const WithCustomNumberWidth: any;

package/dist/stories/atoms/Map/Map.stories.js

@@ -13,9 +13,24 @@ export const Default = MapTemplate.bind({});
 Default.args = {
     placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
 };
-export const WithCustomHeight = MapTemplate.bind({});
-WithCustomHeight.args = {
+export const WithCustomStringHeight = MapTemplate.bind({});
+WithCustomStringHeight.args = {
     placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
     height: '320px'
 };
+export const WithCustomNumberHeight = MapTemplate.bind({});
+WithCustomNumberHeight.args = {
+    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+    height: 320
+};
+export const WithCustomStringWidth = MapTemplate.bind({});
+WithCustomStringWidth.args = {
+    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+    width: '620px'
+};
+export const WithCustomNumberWidth = MapTemplate.bind({});
+WithCustomNumberWidth.args = {
+    placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+    width: 620
+};
 //# sourceMappingURL=Map.stories.js.map

package/dist/stories/atoms/Map/Map.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Map.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Map/Map.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAiB,MAAM,OAAO,CAAC;AAEtC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,YAAY;AACZ,SAAS,WAAW,CAAC,IAAc;IACjC,OAAO,oBAAC,GAAG,oBAAK,IAAI,EAAI,CAAC;AAC3B,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,6BAA6B;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,gBAAgB,CAAC,IAAI,GAAG;IACtB,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,OAAO;CAChB,CAAC"}
+{"version":3,"file":"Map.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Map/Map.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,GAAiB,MAAM,OAAO,CAAC;AAEtC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,YAAY;AACZ,SAAS,WAAW,CAAC,IAAc;IACjC,OAAO,oBAAC,GAAG,oBAAK,IAAI,EAAI,CAAC;AAC3B,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,6BAA6B;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,6BAA6B;IACtC,MAAM,EAAE,GAAG;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1D,qBAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1D,qBAAqB,CAAC,IAAI,GAAG;IAC3B,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,GAAG;CACX,CAAC"}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface AvatarWithNameProps {
+    avatarTypographyCategory: string;
+    avatarTypographySize: string;
+    imgSrc: string;
+    playerName: string;
+    typographyCategory: string;
+    typographySize: string;
+}
+export default function AvatarWithName({ imgSrc, playerName, avatarTypographySize, avatarTypographyCategory, typographySize, typographyCategory }: {
+    imgSrc?: string | undefined;
+    playerName?: string | undefined;
+    avatarTypographySize?: string | undefined;
+    avatarTypographyCategory?: string | undefined;
+    typographySize?: string | undefined;
+    typographyCategory?: string | undefined;
+}): JSX.Element;

package/dist/stories/molecules/AvatarWithName/AvatarWithName.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Typography from '../../atoms/Typography/Typography';
+export default function AvatarWithName({ imgSrc = '', playerName = '', avatarTypographySize = '', avatarTypographyCategory = '', typographySize = '', typographyCategory = '' }) {
+    const getAcronym = (str) => {
+        const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
+        return acronym;
+    };
+    return (React.createElement(Box, { display: "flex", alignItems: "center" },
+        React.createElement(Avatar, { sx: { bgcolor: 'black', marginRight: '10px' }, src: imgSrc },
+            React.createElement(Typography, { size: avatarTypographySize, category: avatarTypographyCategory }, getAcronym(playerName))),
+        React.createElement(Typography, { category: typographyCategory, size: typographySize }, playerName)));
+}
+//# sourceMappingURL=AvatarWithName.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarWithName.js","sourceRoot":"","sources":["../../../../src/stories/molecules/AvatarWithName/AvatarWithName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAW3D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,oBAAoB,GAAG,EAAE,EAAE,wBAAwB,GAAG,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EACrI;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,OAAO,CACH,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ;QACnC,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM;YAC9D,oBAAC,UAAU,IAAC,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,wBAAwB,IAAG,UAAU,CAAC,UAAU,CAAC,CAAc,CAC5G;QACT,oBAAC,UAAU,IAAC,QAAQ,EAAE,kBAAkB,EAAE,IAAI,EAAE,cAAc,IAAG,UAAU,CAAc,CACvF,CACT,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: any;
+export declare const WithImageAndCustomTypography: any;
+export declare const WithNoImage: any;
+export declare const WithBrokenImage: any;

package/dist/stories/molecules/AvatarWithName/AvatarWithName.stories.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import AvatarWithName from './AvatarWithName';
+// Default
+export default {
+    title: 'Molecules/AvatarWithName',
+};
+// Templates
+function AvatarWithNameTemplate(args) {
+    return React.createElement(AvatarWithName, Object.assign({}, args));
+}
+// Stories
+export const Default = AvatarWithNameTemplate.bind({});
+Default.args = {
+    avatarTypographyCategory: '',
+    avatarTypographySize: "",
+    imgSrc: '',
+    playerName: "Julia Gulia",
+    typographyCategory: "",
+    typographySize: "",
+};
+export const WithImageAndCustomTypography = AvatarWithNameTemplate.bind({});
+WithImageAndCustomTypography.args = {
+    avatarTypographyCategory: '',
+    avatarTypographySize: "",
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Gulia",
+    typographyCategory: "secondary",
+    typographySize: "small-medium",
+};
+export const WithNoImage = AvatarWithNameTemplate.bind({});
+WithNoImage.args = {
+    avatarTypographyCategory: 'primary',
+    avatarTypographySize: "medium-medium",
+    imgSrc: '',
+    playerName: "Julia Gulia",
+    typographyCategory: "secondary",
+    typographySize: "small-medium",
+};
+export const WithBrokenImage = AvatarWithNameTemplate.bind({});
+WithBrokenImage.args = {
+    avatarTypographyCategory: 'primary',
+    avatarTypographySize: "medium-medium",
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
+    playerName: "Julia Gulia",
+    typographyCategory: "secondary",
+    typographySize: "small-medium",
+};
+//# sourceMappingURL=AvatarWithName.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarWithName.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAuC,MAAM,kBAAkB,CAAC;AAEvE,UAAU;AACV,eAAe;IACb,KAAK,EAAE,0BAA0B;CAClC,CAAC;AAEF,YAAY;AACZ,SAAS,sBAAsB,CAAC,IAAyB;IACvD,OAAO,oBAAC,cAAc,oBAAK,IAAI,EAAI,CAAC;AACtC,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,OAAO,CAAC,IAAI,GAAG;IACb,wBAAwB,EAAE,EAAE;IAC5B,oBAAoB,EAAE,EAAE;IACxB,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,EAAE;IACtB,cAAc,EAAE,EAAE;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5E,4BAA4B,CAAC,IAAI,GAAG;IAClC,wBAAwB,EAAE,EAAE;IAC5B,oBAAoB,EAAE,EAAE;IACxB,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,cAAc;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,WAAW,CAAC,IAAI,GAAG;IACjB,wBAAwB,EAAE,SAAS;IACnC,oBAAoB,EAAE,eAAe;IACrC,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,cAAc;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/D,eAAe,CAAC,IAAI,GAAG;IACrB,wBAAwB,EAAE,SAAS;IACnC,oBAAoB,EAAE,eAAe;IACrC,MAAM,EAAE,4GAA4G;IACpH,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,cAAc;CAC/B,CAAC"}

package/package.json

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

package/src/components.jsx

@@ -15,6 +15,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';
 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/atoms/Map/Map.stories.tsx

@@ -18,8 +18,26 @@ Default.args = {
   placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
 };
 
-export const WithCustomHeight = MapTemplate.bind({});
-WithCustomHeight.args = {
+export const WithCustomStringHeight = MapTemplate.bind({});
+WithCustomStringHeight.args = {
   placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
   height: '320px'
 };
+
+export const WithCustomNumberHeight = MapTemplate.bind({});
+WithCustomNumberHeight.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+  height: 320
+};
+
+export const WithCustomStringWidth = MapTemplate.bind({});
+WithCustomStringWidth.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+  width: '620px'
+};
+
+export const WithCustomNumberWidth = MapTemplate.bind({});
+WithCustomNumberWidth.args = {
+  placeId: 'ChIJj6tQBWXIxokRXeXk9xqsgMo',
+  width: 620
+};

package/src/stories/atoms/Map/Map.tsx

@@ -2,20 +2,22 @@ import React from 'react';
 
 export interface MapProps {
     placeId: string;
-    height: string;
+    height: string | number;
+    width: string | number;
   }
 
 export default function Map({
-  placeId, height 
+  placeId, height, width
 }: MapProps) {
   const placeParam = placeId && `q=place_id:${placeId}`;
   const placeUrl = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCapzh9VsfXAzC9fAaosZJulONx7H1BFaY&${placeParam}`;
+  const mapHeight = height || `216px`;
+  const mapWidth = width || `100%`;
 
-  const mapheight = height || `216px`;
   return (
       <iframe
-          width="100%"
-          height={mapheight}
+          width={mapWidth}
+          height={mapHeight}
           src={placeUrl}
           title="Google Maps"
       />

package/src/stories/molecules/AvatarWithName/AvatarWithName.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import AvatarWithName, { AvatarWithNameProps } from './AvatarWithName';
+
+// Default
+export default {
+  title: 'Molecules/AvatarWithName',
+};
+
+// Templates
+function AvatarWithNameTemplate(args: AvatarWithNameProps) {
+  return <AvatarWithName {...args} />;  
+}
+
+// Stories
+export const Default = AvatarWithNameTemplate.bind({});
+Default.args = {
+  avatarTypographyCategory: '',
+  avatarTypographySize: "",
+  imgSrc: '',
+  playerName: "Julia Gulia",
+  typographyCategory: "",
+  typographySize: "",
+};
+
+export const WithImageAndCustomTypography = AvatarWithNameTemplate.bind({});
+WithImageAndCustomTypography.args = {
+  avatarTypographyCategory: '',
+  avatarTypographySize: "",
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+  playerName: "Julia Gulia",
+  typographyCategory: "secondary",
+  typographySize: "small-medium",
+};
+
+export const WithNoImage = AvatarWithNameTemplate.bind({});
+WithNoImage.args = {
+  avatarTypographyCategory: 'primary',
+  avatarTypographySize: "medium-medium",
+  imgSrc: '',
+  playerName: "Julia Gulia",
+  typographyCategory: "secondary",
+  typographySize: "small-medium",
+};
+
+export const WithBrokenImage = AvatarWithNameTemplate.bind({});
+WithBrokenImage.args = {
+  avatarTypographyCategory: 'primary',
+  avatarTypographySize: "medium-medium",
+  imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
+  playerName: "Julia Gulia",
+  typographyCategory: "secondary",
+  typographySize: "small-medium",
+};

package/src/stories/molecules/AvatarWithName/AvatarWithName.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+
+import Typography from '../../atoms/Typography/Typography';
+
+export interface AvatarWithNameProps {
+    avatarTypographyCategory: string;
+    avatarTypographySize: string;
+    imgSrc: string;
+    playerName: string;
+    typographyCategory: string;
+    typographySize: string;
+  }
+
+export default function AvatarWithName({
+  imgSrc = '', playerName = '', avatarTypographySize = '', avatarTypographyCategory = '', typographySize = '', typographyCategory = ''
+}) {
+  const getAcronym = (str: string) => {
+    const acronym = str?.split(' ').map((word) => word.charAt(0)).join('');
+    return acronym;
+  };
+
+  return (
+      <Box display="flex" alignItems="center">
+          <Avatar sx={{ bgcolor: 'black', marginRight: '10px' }} src={imgSrc}>
+              <Typography size={avatarTypographySize} category={avatarTypographyCategory}>{getAcronym(playerName)}</Typography>
+          </Avatar>
+          <Typography category={typographyCategory} size={typographySize}>{playerName}</Typography>
+      </Box>
+  );
+}