@universal-tennis/ui-shared 0.0.15 → 0.0.17

package/.storybook/main.js

@@ -1,7 +1,7 @@
 module.exports = {
   stories: [
     "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+    "../src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
     "@storybook/addon-links",

package/.storybook/variables.css

@@ -6,4 +6,7 @@
     --white: #fff;
     --light-grey: #d7e0ea;
     --darkest-grey: #3b4859;
+
+    /* colors */
+    --cool-grey-300: #DDE3EB;
 }

package/dist/components.d.ts

@@ -1,2 +1,4 @@
-export { Button } from "./stories/atoms/Button";
-export { Typography } from "./stories/atoms/Typography";
+export { default as Button } from "./stories/atoms/Button/Button";
+export { default as Typography } from "./stories/atoms/Typography/Typography";
+export { default as ContactCard } from "./stories/molecules/Cards/ContactCard";
+export { default as TeamCard } from "./stories/molecules/Cards/TeamCard";

package/dist/components.js

@@ -1,7 +1,9 @@
 // ATOMS
 import "./stories/assets/css/variables.css";
-export { Button } from './stories/atoms/Button';
-export { Typography } from './stories/atoms/Typography';
+export { default as Button } from './stories/atoms/Button/Button';
+export { default as Typography } from './stories/atoms/Typography/Typography';
 // MOLECULES
+export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
+export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
 // ORGANISMS 
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,YAAY;AACZ,aAAa"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa"}

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

@@ -6,4 +6,7 @@
     --white: #fff;
     --light-grey: #d7e0ea;
     --darkest-grey: #3b4859;
+
+    /* colors */
+    --cool-grey-300: #DDE3EB;
 }

package/dist/stories/assets/icon-chat-blue.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="0s7v3h5tpa" d="M12 0c6.075 0 11 4.773 11 10.661 0 4.263-2.192 7.456-6.31 9.646l-6.523 3.625c-.084.047-.173.068-.26.068-.274 0-.526-.213-.526-.51v-2.472C3.438 19.61-.613 13.524 1.625 7.014 2.649 4.033 5.095 1.64 8.164.63 9.469.199 10.759 0 12 0zm0 1.015c-1.163 0-2.34.193-3.499.575-2.76.909-4.958 3.056-5.882 5.745-.943 2.743-.707 5.578.664 7.983 1.344 2.358 3.657 4.076 6.346 4.714.47.11.8.518.8.986v1.598l5.74-3.19c3.897-2.074 5.784-4.937 5.784-8.765 0-5.318-4.465-9.646-9.953-9.646zM14.095 13.2c.29 0 .524.224.524.5s-.234.5-.524.5h-6.81c-.288 0-.523-.224-.523-.5s.235-.5.524-.5zm3.143-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5zm0-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <use fill="#008DED" xlink:href="#0s7v3h5tpa"/>
+        </g>
+    </g>
+</svg>

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

@@ -1,7 +1,9 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 type ButtonProps = {
     children: string | ReactElement;
     category?: string;
+    onClick?: VoidFunction;
+    style?: React.CSSProperties;
 };
 export default function Button({ children, category, ...props }: ButtonProps): JSX.Element;
 export {};

package/dist/stories/atoms/Button/Button.js

@@ -53,6 +53,7 @@ const LinkButton = styled(MuiButton)({
     backgroundColor: 'transparent',
     color: 'var(--primary)',
     textTransform: 'inherit',
+    justifyContent: 'left',
     padding: 0,
     '&:hover': {
         backgroundColor: 'transparent',

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAW9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,sBAAsB;QACvC,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,SAAS;IACxB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACT,kBAAkB,UACd,KAAK,GAER,QAAQ,CACE,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAa9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,sBAAsB;QACvC,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACT,kBAAkB,UACd,KAAK,GAER,QAAQ,CACE,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}

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

@@ -1,9 +1,10 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import "../../assets/css/typography.css";
 type TypographyProps = {
     children: string | ReactElement;
     category?: string;
     size?: string;
+    style?: React.CSSProperties;
 };
 export default function Typography({ children, category, size, ...props }: TypographyProps): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1,27 @@
+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.'
+};
+//# sourceMappingURL=Cards.stories.js.map

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

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

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

@@ -0,0 +1,9 @@
+/// <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 {};

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

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import parsePhoneNumber from 'libphonenumber-js';
+import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import Link from '@mui/material/Link';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+import { ReactComponent as ChatIcon } from '../../assets/icon-chat-blue.svg';
+import { StyledCard } from './shared';
+export default function ContactCard(_a) {
+    var { name, phone, email, handleOnMessageClick } = _a, props = __rest(_a, ["name", "phone", "email", "handleOnMessageClick"]);
+    const firstName = name.split(" ")[0];
+    const parsedNumber = parsePhoneNumber(phone || '');
+    const phoneNumber = parsedNumber === null || parsedNumber === void 0 ? void 0 : parsedNumber.formatInternational();
+    return (React.createElement(StyledCard, Object.assign({}, props),
+        React.createElement(Typography, { style: { marginBottom: '8px' }, category: "secondary", size: "medium-medium" }, name),
+        phoneNumber && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `tel:${phone}` },
+            React.createElement(LocalPhoneOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
+            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, phoneNumber))),
+        email && (React.createElement(Link, { sx: { display: 'flex' }, mt: 1, fontSize: 14, href: `mailto:${email}` },
+            React.createElement(EmailOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
+            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, email))),
+        React.createElement(Button, { onClick: handleOnMessageClick, category: "link", style: { marginTop: '8px' } },
+            React.createElement(React.Fragment, null,
+                React.createElement(ChatIcon, { width: 20 }),
+                React.createElement(Typography, { style: { paddingLeft: '8px' }, category: "secondary", size: "x-small-book" }, `Message ${firstName}`)))));
+}
+//# sourceMappingURL=ContactCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,cAAc,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAStC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,oBAAoB,OACvB,EAD4B,KAAK,cADhB,kDAEnC,CADmD;IAElD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,EAAE,CAAC;IAExD,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACtG,WAAW,IAAI,CAChB,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE;YACpE,oBAAC,sBAAsB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YAC1D,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CAC1E,CACN;QACA,KAAK,IAAI,CACV,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE;YACrE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YACrD,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACtE,CACN;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC;YAC9E;gBACE,oBAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,GAAI;gBACvB,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC5E,WAAW,SAAS,EAAE,CACd,CACZ,CACI,CACE,CAChB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type TeamCardProps = {
+    title: string;
+    description: string;
+};
+export default function TeamCard({ title, description, ...props }: TeamCardProps): JSX.Element;
+export {};

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

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import Typography from '../../atoms/Typography/Typography';
+import { StyledCard } from './shared';
+export default function TeamCard(_a) {
+    var { title, description } = _a, props = __rest(_a, ["title", "description"]);
+    return (React.createElement(StyledCard, Object.assign({}, props),
+        React.createElement(Typography, { category: "secondary", size: "medium-medium" }, title),
+        React.createElement(Typography, { category: "secondary", size: "x-small-book" }, description)));
+}
+//# sourceMappingURL=TeamCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeamCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAA+C;QAA/C,EAAE,KAAK,EAAE,WAAW,OAA2B,EAAtB,KAAK,cAA9B,wBAAgC,CAAF;IAC7D,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,KAAK,CAAc;QAC1E,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CACpE,CAChB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "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>, {}, {}>;

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

@@ -0,0 +1,13 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const StyledCard = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '4px',
+    padding: '16px',
+    border: '1px solid var(--cool-grey-300)',
+    '&:hover': {
+        cursor: 'pointer'
+    },
+});
+//# sourceMappingURL=shared.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,gCAAgC;IAExC,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC"}

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
     "@mui/material": "5.5.3",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
+    "libphonenumber-js": "^1.10.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

package/src/components.jsx

@@ -1,8 +1,11 @@
 // ATOMS
 import "./stories/assets/css/variables.css";
 
-export { Button } from './stories/atoms/Button';
-export { Typography } from './stories/atoms/Typography';
+export { default as Button } from './stories/atoms/Button/Button';
+export { default as Typography } from './stories/atoms/Typography/Typography';
 
 // MOLECULES
+export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
+export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
+
 // ORGANISMS 

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

@@ -6,4 +6,7 @@
     --white: #fff;
     --light-grey: #d7e0ea;
     --darkest-grey: #3b4859;
+
+    /* colors */
+    --cool-grey-300: #DDE3EB;
 }

package/src/stories/assets/icon-chat-blue.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="0s7v3h5tpa" d="M12 0c6.075 0 11 4.773 11 10.661 0 4.263-2.192 7.456-6.31 9.646l-6.523 3.625c-.084.047-.173.068-.26.068-.274 0-.526-.213-.526-.51v-2.472C3.438 19.61-.613 13.524 1.625 7.014 2.649 4.033 5.095 1.64 8.164.63 9.469.199 10.759 0 12 0zm0 1.015c-1.163 0-2.34.193-3.499.575-2.76.909-4.958 3.056-5.882 5.745-.943 2.743-.707 5.578.664 7.983 1.344 2.358 3.657 4.076 6.346 4.714.47.11.8.518.8.986v1.598l5.74-3.19c3.897-2.074 5.784-4.937 5.784-8.765 0-5.318-4.465-9.646-9.953-9.646zM14.095 13.2c.29 0 .524.224.524.5s-.234.5-.524.5h-6.81c-.288 0-.523-.224-.523-.5s.235-.5.524-.5zm3.143-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5zm0-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <use fill="#008DED" xlink:href="#0s7v3h5tpa"/>
+        </g>
+    </g>
+</svg>

package/src/stories/atoms/Button/Button.tsx

@@ -5,6 +5,8 @@ import { styled } from '@mui/material/styles';
 type ButtonProps = {
   children: string | ReactElement;
   category?: string;
+  onClick?: VoidFunction;
+  style?: React.CSSProperties;
 }
 
 type StyledButtonProps = {
@@ -58,6 +60,7 @@ const LinkButton = styled(MuiButton)({
   backgroundColor: 'transparent',
   color: 'var(--primary)',
   textTransform: 'inherit',
+  justifyContent: 'left',
   padding: 0,
 
   '&:hover': {

package/src/stories/atoms/Typography/Typography.tsx

@@ -7,6 +7,7 @@ type TypographyProps = {
   children: string | ReactElement;
   category?: string;
   size?: string;
+  style?: React.CSSProperties;
 }
 
 type MuiTypographyProps = {

package/src/stories/molecules/Cards/Cards.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import ContactCard from './ContactCard';
+import TeamCard from './TeamCard';
+
+// Prop types
+interface ContactCardProps {
+  name: string;
+  phone: string;
+  email: string;
+  handleOnMessageClick?: VoidFunction;
+}
+
+interface TeamCardProps {
+  title: string; 
+  description: string;
+}
+
+// Default
+export default {
+  title: 'Molecules/Cards',
+};
+
+// Templates
+function ContactCardTemplate(args: ContactCardProps) {
+  return <ContactCard {...args} />;  
+}
+
+function TeamCardTemplate(args: TeamCardProps) {
+  return <TeamCard {...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.'
+};

package/src/stories/molecules/Cards/ContactCard.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import parsePhoneNumber from 'libphonenumber-js';
+import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import Link from '@mui/material/Link';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+import { ReactComponent as ChatIcon } from '../../assets/icon-chat-blue.svg';
+
+import { StyledCard } from './shared';
+
+type ContactCardProps = {
+  name: string;
+  phone: string;
+  email: string;
+  handleOnMessageClick?: VoidFunction;
+}
+
+export default function ContactCard({
+  name, phone, email, handleOnMessageClick, ...props 
+}: ContactCardProps) {
+  const firstName = name.split(" ")[0];
+  const parsedNumber = parsePhoneNumber(phone || '');
+  const phoneNumber = parsedNumber?.formatInternational();
+
+  return (
+      <StyledCard
+        {...props}
+      >
+        <Typography style={{marginBottom: '8px'}} category="secondary" size="medium-medium">{name}</Typography>
+        {phoneNumber && (
+        <Link sx={{display: 'flex'}} mt={1} fontSize={14} href={`tel:${phone}`}>
+          <LocalPhoneOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
+          <Typography category="secondary" size="x-small-book">{phoneNumber}</Typography>
+        </Link>
+        )}
+        {email && (
+        <Link sx={{display: 'flex'}} mt={1} fontSize={14} href={`mailto:${email}`}>
+            <EmailOutlinedIcon fontSize="small" sx={{ mr: 1 }} />
+            <Typography category="secondary" size="x-small-book">{email}</Typography>
+        </Link>
+        )}
+        <Button onClick={handleOnMessageClick} category="link" style={{marginTop: '8px'}}>
+          <>
+            <ChatIcon width={20} />
+            <Typography style={{paddingLeft: '8px'}} category="secondary" size="x-small-book">
+                {`Message ${firstName}`}
+            </Typography>
+          </>
+        </Button>
+      </StyledCard>
+  );
+}

package/src/stories/molecules/Cards/TeamCard.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Typography from '../../atoms/Typography/Typography';
+import { StyledCard } from './shared';
+
+type TeamCardProps = {
+  title: string;
+  description: string;
+}
+
+export default function TeamCard({ title, description, ...props }: TeamCardProps) {
+  return (
+      <StyledCard
+        {...props}
+      >
+        <Typography category="secondary" size="medium-medium">{title}</Typography>
+        <Typography category="secondary" size="x-small-book">{description}</Typography>
+      </StyledCard>
+  );
+}

package/src/stories/molecules/Cards/shared.tsx

@@ -0,0 +1,14 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+
+export const StyledCard = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '4px',
+  padding: '16px',
+  border: '1px solid var(--cool-grey-300)',
+  
+  '&:hover': {
+    cursor: 'pointer'
+  },
+});

package/tsconfig.json

@@ -16,7 +16,7 @@
       "lib": ["ES2017", "DOM"],
       "baseUrl": "src",
       "allowSyntheticDefaultImports": true,
-      "noImplicitAny": true
+      "noImplicitAny": true,
     },
     "exclude": [
       "node_modules",

package/dist/stories/atoms/Button/index.d.ts

@@ -1 +0,0 @@
-export { default as Button } from './Button';

package/dist/stories/atoms/Button/index.js

@@ -1,2 +0,0 @@
-export { default as Button } from './Button';
-//# sourceMappingURL=index.js.map

package/dist/stories/atoms/Button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/stories/atoms/Typography/index.d.ts

@@ -1 +0,0 @@
-export { default as Typography } from './Typography';

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

@@ -1,2 +0,0 @@
-export { default as Typography } from './Typography';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/src/stories/atoms/Button/index.tsx

@@ -1 +0,0 @@
-export { default as Button } from './Button';

package/src/stories/atoms/Typography/index.tsx

@@ -1 +0,0 @@
-export { default as Typography } from './Typography';