@universal-tennis/ui-shared 0.1.68 → 0.1.69

package/dist/stories/atoms/Typography/Typography.stories.js

@@ -1,191 +1,191 @@
-import React from 'react';
-import Typography from './Typography';
-export default {
-    title: 'Atoms/Typography',
-    component: Typography,
-};
-function Template(args) {
-    return React.createElement(Typography, Object.assign({}, args));
-}
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Text',
-};
-export const Display = Template.bind({});
-Display.args = {
-    category: "display",
-    children: 'Text',
-};
-export const DisplayXXXLarge = Template.bind({});
-DisplayXXXLarge.args = {
-    children: 'Text',
-    category: "display",
-    size: 'XXX-large'
-};
-export const DisplayXXLarge = Template.bind({});
-DisplayXXLarge.args = {
-    children: 'Text',
-    category: "display",
-    size: 'XX-large'
-};
-export const DisplayXLarge = Template.bind({});
-DisplayXLarge.args = {
-    children: 'Text',
-    category: "display",
-    size: 'X-large'
-};
-export const DisplayLarge = Template.bind({});
-DisplayLarge.args = {
-    children: 'Text',
-    category: "display",
-    size: 'large'
-};
-export const DisplayLargelight = Template.bind({});
-DisplayLargelight.args = {
-    children: 'Text',
-    category: "display",
-    size: 'large-light'
-};
-export const DisplayMediumBook = Template.bind({});
-DisplayMediumBook.args = {
-    children: 'Text',
-    category: "display",
-    size: 'medium-book'
-};
-export const Primary = Template.bind({});
-Primary.args = {
-    category: "primary",
-    children: 'Text',
-};
-export const PrimaryLargeBold = Template.bind({});
-PrimaryLargeBold.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'large-bold'
-};
-export const PrimaryLargeBook = Template.bind({});
-PrimaryLargeBook.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'large-book'
-};
-export const PrimaryLargeLight = Template.bind({});
-PrimaryLargeLight.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'large-light'
-};
-export const PrimaryMediumSemiBold = Template.bind({});
-PrimaryMediumSemiBold.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'medium-semibold'
-};
-export const PrimaryMediumMedium = Template.bind({});
-PrimaryMediumMedium.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'medium-medium'
-};
-export const PrimaryMediumBook = Template.bind({});
-PrimaryMediumBook.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'medium-book'
-};
-export const PrimarySmallBook = Template.bind({});
-PrimarySmallBook.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'small-book'
-};
-export const PrimaryXSmallBook = Template.bind({});
-PrimaryXSmallBook.args = {
-    children: 'Text',
-    category: "primary",
-    size: 'x-small-book'
-};
-export const Secondary = Template.bind({});
-Secondary.args = {
-    category: "secondary",
-    children: 'Text',
-};
-export const SecondaryLargeMedium = Template.bind({});
-SecondaryLargeMedium.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'large-medium'
-};
-export const SecondaryLargeBook = Template.bind({});
-SecondaryLargeBook.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'large-book'
-};
-export const SecondaryMediumMedium = Template.bind({});
-SecondaryMediumMedium.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'medium-medium'
-};
-export const SecondaryMediumBook = Template.bind({});
-SecondaryMediumBook.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'medium-book'
-};
-export const SecondarySmallMediumCap = Template.bind({});
-SecondarySmallMediumCap.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'small-medium-cap'
-};
-export const SecondarySmallMedium = Template.bind({});
-SecondarySmallMedium.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'small-medium'
-};
-export const SecondarySmallBook = Template.bind({});
-SecondarySmallBook.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'small-book'
-};
-export const SecondaryXSmallMediumCap = Template.bind({});
-SecondaryXSmallMediumCap.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'x-small-medium-cap'
-};
-export const SecondaryXSmallMedium = Template.bind({});
-SecondaryXSmallMedium.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'x-small-medium'
-};
-export const SecondaryXSmallBookCap = Template.bind({});
-SecondaryXSmallBookCap.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'x-small-book-cap'
-};
-export const SecondaryXSmallBook = Template.bind({});
-SecondaryXSmallBook.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'x-small-book'
-};
-export const SecondaryXXSmallMediumCap = Template.bind({});
-SecondaryXXSmallMediumCap.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'xx-small-medium-cap'
-};
-export const SecondaryXXSmallBook = Template.bind({});
-SecondaryXXSmallBook.args = {
-    category: "secondary",
-    children: 'Text',
-    size: 'xx-small-book'
-};
+import React from 'react';
+import Typography from './Typography';
+export default {
+    title: 'Atoms/Typography',
+    component: Typography,
+};
+function Template(args) {
+    return React.createElement(Typography, Object.assign({}, args));
+}
+export const Default = Template.bind({});
+Default.args = {
+    children: 'Text',
+};
+export const Display = Template.bind({});
+Display.args = {
+    category: "display",
+    children: 'Text',
+};
+export const DisplayXXXLarge = Template.bind({});
+DisplayXXXLarge.args = {
+    children: 'Text',
+    category: "display",
+    size: 'XXX-large'
+};
+export const DisplayXXLarge = Template.bind({});
+DisplayXXLarge.args = {
+    children: 'Text',
+    category: "display",
+    size: 'XX-large'
+};
+export const DisplayXLarge = Template.bind({});
+DisplayXLarge.args = {
+    children: 'Text',
+    category: "display",
+    size: 'X-large'
+};
+export const DisplayLarge = Template.bind({});
+DisplayLarge.args = {
+    children: 'Text',
+    category: "display",
+    size: 'large'
+};
+export const DisplayLargelight = Template.bind({});
+DisplayLargelight.args = {
+    children: 'Text',
+    category: "display",
+    size: 'large-light'
+};
+export const DisplayMediumBook = Template.bind({});
+DisplayMediumBook.args = {
+    children: 'Text',
+    category: "display",
+    size: 'medium-book'
+};
+export const Primary = Template.bind({});
+Primary.args = {
+    category: "primary",
+    children: 'Text',
+};
+export const PrimaryLargeBold = Template.bind({});
+PrimaryLargeBold.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'large-bold'
+};
+export const PrimaryLargeBook = Template.bind({});
+PrimaryLargeBook.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'large-book'
+};
+export const PrimaryLargeLight = Template.bind({});
+PrimaryLargeLight.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'large-light'
+};
+export const PrimaryMediumSemiBold = Template.bind({});
+PrimaryMediumSemiBold.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'medium-semibold'
+};
+export const PrimaryMediumMedium = Template.bind({});
+PrimaryMediumMedium.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'medium-medium'
+};
+export const PrimaryMediumBook = Template.bind({});
+PrimaryMediumBook.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'medium-book'
+};
+export const PrimarySmallBook = Template.bind({});
+PrimarySmallBook.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'small-book'
+};
+export const PrimaryXSmallBook = Template.bind({});
+PrimaryXSmallBook.args = {
+    children: 'Text',
+    category: "primary",
+    size: 'x-small-book'
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+    category: "secondary",
+    children: 'Text',
+};
+export const SecondaryLargeMedium = Template.bind({});
+SecondaryLargeMedium.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'large-medium'
+};
+export const SecondaryLargeBook = Template.bind({});
+SecondaryLargeBook.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'large-book'
+};
+export const SecondaryMediumMedium = Template.bind({});
+SecondaryMediumMedium.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'medium-medium'
+};
+export const SecondaryMediumBook = Template.bind({});
+SecondaryMediumBook.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'medium-book'
+};
+export const SecondarySmallMediumCap = Template.bind({});
+SecondarySmallMediumCap.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'small-medium-cap'
+};
+export const SecondarySmallMedium = Template.bind({});
+SecondarySmallMedium.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'small-medium'
+};
+export const SecondarySmallBook = Template.bind({});
+SecondarySmallBook.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'small-book'
+};
+export const SecondaryXSmallMediumCap = Template.bind({});
+SecondaryXSmallMediumCap.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'x-small-medium-cap'
+};
+export const SecondaryXSmallMedium = Template.bind({});
+SecondaryXSmallMedium.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'x-small-medium'
+};
+export const SecondaryXSmallBookCap = Template.bind({});
+SecondaryXSmallBookCap.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'x-small-book-cap'
+};
+export const SecondaryXSmallBook = Template.bind({});
+SecondaryXSmallBook.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'x-small-book'
+};
+export const SecondaryXXSmallMediumCap = Template.bind({});
+SecondaryXXSmallMediumCap.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'xx-small-medium-cap'
+};
+export const SecondaryXXSmallBook = Template.bind({});
+SecondaryXXSmallBook.args = {
+    category: "secondary",
+    children: 'Text',
+    size: 'xx-small-book'
+};
 //# sourceMappingURL=Typography.stories.js.map

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface AvatarWithNameProps {
+    avatarOnly: boolean;
+    avatarFontCategory: string;
+    avatarFontSize: string;
+    avatarWidth: string;
+    avatarHeight: string;
+    href: string;
+    imgSrc: string;
+    playerName: string;
+    fontCategory: string;
+    fontSize: string;
+    maxCharacterLimit: number;
+}
+export default function AvatarWithName({ avatarOnly, imgSrc, playerName, avatarFontSize, href, avatarFontCategory, avatarWidth, avatarHeight, fontSize, fontCategory, maxCharacterLimit }: {
+    avatarOnly?: boolean | undefined;
+    imgSrc?: string | undefined;
+    playerName?: string | undefined;
+    avatarFontSize?: string | undefined;
+    href?: string | undefined;
+    avatarFontCategory?: string | undefined;
+    avatarWidth?: string | undefined;
+    avatarHeight?: string | undefined;
+    fontSize?: string | undefined;
+    fontCategory?: string | undefined;
+    maxCharacterLimit?: number | undefined;
+}): JSX.Element;

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

@@ -0,0 +1,21 @@
+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 AvatarWithName({ avatarOnly = false, imgSrc = '', playerName = '', avatarFontSize = 'medium-medium', href = '', avatarFontCategory = 'primary', avatarWidth = '40px', avatarHeight = '40px', fontSize = 'small-medium', fontCategory = 'secondary', maxCharacterLimit = 24 }) {
+    const getAcronym = (str) => {
+        const acronym = str === null || str === void 0 ? void 0 : str.split(' ').map((word) => word.charAt(0)).join('');
+        return acronym;
+    };
+    const getTruncatedName = (name, characterLimit) => (name.length > characterLimit ? `${name.slice(0, characterLimit)}...` : name);
+    const AvatarComponent = (React.createElement(Avatar, { sx: {
+            backgroundColor: 'var(--black)', marginRight: '10px', width: `${avatarWidth}`, height: `${avatarHeight}`
+        }, src: imgSrc },
+        React.createElement(Typography, { sx: { textTransform: 'uppercase' }, size: avatarFontSize, category: avatarFontCategory }, getAcronym(playerName))));
+    return (avatarOnly ? (AvatarComponent) : (React.createElement(Box, { display: "flex", alignItems: "center" },
+        AvatarComponent,
+        href ? (React.createElement(Link, { href: href, sx: { textDecoration: 'none' } },
+            React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))) : React.createElement(Typography, { category: fontCategory, size: fontSize }, getTruncatedName(playerName, maxCharacterLimit)))));
+}
+//# 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;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAgB3D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,UAAU,GAAG,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,cAAc,GAAG,eAAe,EAAE,IAAI,GAAG,EAAE,EAC7F,kBAAkB,GAAG,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,YAAY,GAAG,MAAM,EAAE,QAAQ,GAAG,cAAc,EAAE,YAAY,GAAG,WAAW,EAClI,iBAAiB,GAAG,EAAE,EACvB;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,gBAAgB,GAAG,CAAC,IAAY,EAAE,cAAsB,EAAE,EAAE,CAAC,CACjE,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAC5E,CAAC;IAEF,MAAM,eAAe,GAAG,CACpB,oBAAC,MAAM,IACH,EAAE,EAAE;YACF,eAAe,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE;SACzG,EACD,GAAG,EAAE,MAAM;QAEX,oBAAC,UAAU,IACP,EAAE,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,EAClC,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,kBAAkB,IAE3B,UAAU,CAAC,UAAU,CAAC,CACd,CACR,CACZ,CAAC;IAEF,OAAO,CACL,UAAU,CAAC,CAAC,CAAC,CACX,eAAe,CAChB,CAAC,CAAC,CAAC,CACA,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ;QAClC,eAAe;QACf,IAAI,CAAC,CAAC,CAAC,CACJ,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE;YAC5C,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,IAAG,gBAAgB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAc,CAC/G,CACV,CAAC,CAAC,CAAC,oBAAC,UAAU,IAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,IAAG,gBAAgB,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAc,CACpH,CACT,CACF,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: any;
+export declare const WithImage: any;
+export declare const WithCustomTypography: any;
+export declare const WithCustomAvatarSize: any;
+export declare const WithAvatarOnly: any;
+export declare const WithNoImage: any;
+export declare const WithBrokenImage: any;
+export declare const WithLink: any;
+export declare const WithLowercaseName: any;
+export declare const WithLongName: any;
+export declare const WithCustomMaxCharacterLimit: any;

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

@@ -0,0 +1,73 @@
+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 = {
+    playerName: "Julia Gulia",
+};
+export const WithImage = AvatarWithNameTemplate.bind({});
+WithImage.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Gulia",
+};
+export const WithCustomTypography = AvatarWithNameTemplate.bind({});
+WithCustomTypography.args = {
+    playerName: "Julia Gulia",
+    avatarFontCategory: "secondary",
+    avatarFontSize: "large-medium",
+    fontCategory: "primary",
+    fontSize: "medium-book"
+};
+export const WithCustomAvatarSize = AvatarWithNameTemplate.bind({});
+WithCustomAvatarSize.args = {
+    playerName: "Julia Gulia",
+    avatarWidth: '26px',
+    avatarHeight: '26px',
+    avatarFontCategory: "primary",
+    avatarFontSize: "small-book",
+};
+export const WithAvatarOnly = AvatarWithNameTemplate.bind({});
+WithAvatarOnly.args = {
+    avatarOnly: true,
+    playerName: "Julia Gulia",
+};
+export const WithNoImage = AvatarWithNameTemplate.bind({});
+WithNoImage.args = {
+    imgSrc: '',
+    playerName: "Julia Gulia",
+};
+export const WithBrokenImage = AvatarWithNameTemplate.bind({});
+WithBrokenImage.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.pn',
+    playerName: "Julia Gulia",
+};
+export const WithLink = AvatarWithNameTemplate.bind({});
+WithLink.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    href: "https://www.reddit.com",
+    playerName: "Julia Gulia",
+};
+export const WithLowercaseName = AvatarWithNameTemplate.bind({});
+WithLowercaseName.args = {
+    playerName: "julia gulia",
+};
+export const WithLongName = AvatarWithNameTemplate.bind({});
+WithLongName.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+};
+export const WithCustomMaxCharacterLimit = AvatarWithNameTemplate.bind({});
+WithCustomMaxCharacterLimit.args = {
+    imgSrc: 'https://ci-cdn.universaltennis.com/v1/player/329903/images/profile/7839bf68-b56f-486a-88ab-a52debbac709.png',
+    playerName: "Julia Guliauliauliauliauliauliauliauliauliaulia",
+    maxCharacterLimit: 7
+};
+//# 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,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzD,SAAS,CAAC,IAAI,GAAG;IACf,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE,oBAAoB,CAAC,IAAI,GAAG;IAC1B,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,WAAW;IAC/B,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,SAAS;IACvB,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpE,oBAAoB,CAAC,IAAI,GAAG;IAC1B,UAAU,EAAE,aAAa;IACzB,WAAW,EAAE,MAAM;IACnB,YAAY,EAAE,MAAM;IACpB,kBAAkB,EAAE,SAAS;IAC7B,cAAc,EAAE,YAAY;CAC7B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9D,cAAc,CAAC,IAAI,GAAG;IACpB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3D,WAAW,CAAC,IAAI,GAAG;IACjB,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/D,eAAe,CAAC,IAAI,GAAG;IACrB,MAAM,EAAE,4GAA4G;IACpH,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,QAAQ,CAAC,IAAI,GAAG;IACd,MAAM,EAAE,6GAA6G;IACrH,IAAI,EAAE,wBAAwB;IAC9B,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjE,iBAAiB,CAAC,IAAI,GAAG;IACvB,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,YAAY,CAAC,IAAI,GAAG;IAClB,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,iDAAiD;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3E,2BAA2B,CAAC,IAAI,GAAG;IACjC,MAAM,EAAE,6GAA6G;IACrH,UAAU,EAAE,iDAAiD;IAC7D,iBAAiB,EAAE,CAAC;CACrB,CAAC"}

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

@@ -1,6 +1,7 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Contact: any;
-export declare const Team: any;
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Contact: any;
+export declare const Team: any;
+export declare const Draw: any;

package/dist/stories/molecules/Cards/Cards.stories.js

@@ -1,27 +1,65 @@
-import React from 'react';
-import ContactCard from './ContactCard';
-import TeamCard from './TeamCard';
-// Default
-export default {
-    title: 'Molecules/Cards',
-};
-// Templates
-function ContactCardTemplate(args) {
-    return React.createElement(ContactCard, Object.assign({}, args));
-}
-function TeamCardTemplate(args) {
-    return React.createElement(TeamCard, Object.assign({}, args));
-}
-// Stories
-export const Contact = ContactCardTemplate.bind({});
-Contact.args = {
-    name: "Jessica Carson",
-    phone: "+1 222-234-4567",
-    email: "test@sample.com"
-};
-export const Team = TeamCardTemplate.bind({});
-Team.args = {
-    title: 'team 1',
-    description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
-};
+import React from 'react';
+import ContactCard from './ContactCard';
+import TeamCard from './TeamCard';
+import DrawCard from './DrawCard';
+// Default
+export default {
+    title: 'Molecules/Cards',
+};
+// Templates
+function ContactCardTemplate(args) {
+    return React.createElement(ContactCard, Object.assign({}, args));
+}
+function TeamCardTemplate(args) {
+    return React.createElement(TeamCard, Object.assign({}, args));
+}
+function DrawCardTemplate(args) {
+    return (React.createElement("div", { style: { width: '372px' } },
+        React.createElement(DrawCard, Object.assign({}, args))));
+}
+// Stories
+export const Contact = ContactCardTemplate.bind({});
+Contact.args = {
+    name: "Jessica Carson",
+    phone: "+1 222-234-4567",
+    email: "test@sample.com"
+};
+export const Team = TeamCardTemplate.bind({});
+Team.args = {
+    title: 'team 1',
+    description: 'Captained by Lenny McDowell, Josh Palmer, and Michael Ballast. Requires a passcode for registration.'
+};
+export const Draw = DrawCardTemplate.bind({});
+Draw.args = {
+    options: [
+        {
+            id: 1,
+            label: 'Team 1',
+        },
+        {
+            id: 2,
+            label: 'Team 2',
+        }
+    ],
+    selectedOptions: {
+        optionOne: 1,
+        optionTwo: 2,
+    },
+    dateLabel: 'Dec 20 at 9:00am',
+    locationLabel: 'Taube Tennis Center',
+    emptyLabel: 'Select a team',
+    isManaging: false,
+    isSelectActive: true,
+    position1Team: {
+        points: 2,
+        name: 'Team Blue'
+    },
+    position2Team: {
+        points: 4,
+        name: 'Team Red'
+    },
+    isPosition1Winner: false,
+    isPosition2Winner: true,
+    onViewClick: () => { }
+};
 //# sourceMappingURL=Cards.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAelC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,YAAY;AACZ,SAAS,mBAAmB,CAAC,IAAsB;IACjD,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAC;AAChC,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,sGAAsG;CACpH,CAAC"}
+{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAGlC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,YAAY;AACZ,SAAS,mBAAmB,CAAC,IAAsB;IACjD,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAC;AAChC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;QAC1B,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CACpB,CACT,CAAC;AACJ,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,sGAAsG;CACpH,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;KACb;IACD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,qBAAqB;IACpC,UAAU,EAAE,eAAe;IAC3B,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE;QACb,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,WAAW;KAClB;IACD,aAAa,EAAE;QACb,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,UAAU;KACjB;IACD,iBAAiB,EAAE,KAAK;IACxB,iBAAiB,EAAE,IAAI;IACvB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;CACtB,CAAC"}

package/dist/stories/molecules/Cards/ContactCard.d.ts

@@ -1,9 +1,3 @@
-/// <reference types="react" />
-type ContactCardProps = {
-    name: string;
-    phone: string;
-    email: string;
-    handleOnMessageClick?: VoidFunction;
-};
-export default function ContactCard({ name, phone, email, handleOnMessageClick, ...props }: ContactCardProps): JSX.Element;
-export {};
+/// <reference types="react" />
+import { ContactCardProps } from './sharedTypes';
+export default function ContactCard({ name, phone, email, onMessageClick, ...props }: ContactCardProps): JSX.Element;