@universal-tennis/ui-shared 0.0.15 → 0.0.16

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/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;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,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/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;AAclC,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,8 @@
+/// <reference types="react" />
+type ContactCardProps = {
+    name: string;
+    phone: string;
+    email: string;
+};
+export default function ContactCard({ name, phone, email, ...props }: ContactCardProps): JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+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 Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+import { StyledCard } from './shared';
+export default function ContactCard(_a) {
+    var { name, phone, email } = _a, props = __rest(_a, ["name", "phone", "email"]);
+    const firstName = name.split(" ")[0];
+    return (React.createElement(StyledCard, Object.assign({}, props),
+        React.createElement(Typography, { category: "secondary", size: "medium-medium" }, name),
+        React.createElement(Button, { category: "link" },
+            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, phone)),
+        React.createElement(Button, { category: "link" },
+            React.createElement(Typography, { category: "secondary", size: "x-small-book" }, email)),
+        React.createElement(Button, { category: "link" },
+            React.createElement(Typography, { 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;AAE1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAQtC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,OACD,EADM,KAAK,cADM,0BAEnC,CAD6B;IAE5B,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAErC,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACzE,oBAAC,MAAM,IAAC,QAAQ,EAAC,MAAM;YACnB,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACpE;QACT,oBAAC,MAAM,IAAC,QAAQ,EAAC,MAAM;YACnB,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACpE;QACT,oBAAC,MAAM,IAAC,QAAQ,EAAC,MAAM;YACnB,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC/C,WAAW,SAAS,EAAE,CACd,CACR,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,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

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/atoms/Button/Button.tsx

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import ContactCard from './ContactCard';
+import TeamCard from './TeamCard';
+
+// Prop types
+interface ContactCardProps {
+  name: string;
+  phone: string;
+  email: string;
+}
+
+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,37 @@
+import React from 'react';
+
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+
+import { StyledCard } from './shared';
+
+type ContactCardProps = {
+  name: string;
+  phone: string;
+  email: string;
+}
+
+export default function ContactCard({
+  name, phone, email, ...props 
+}: ContactCardProps) {
+  const firstName = name.split(" ")[0];
+
+  return (
+      <StyledCard
+        {...props}
+      >
+        <Typography category="secondary" size="medium-medium">{name}</Typography>
+        <Button category="link">
+            <Typography category="secondary" size="x-small-book">{phone}</Typography>
+        </Button>
+        <Button category="link">
+            <Typography category="secondary" size="x-small-book">{email}</Typography>
+        </Button>
+        <Button category="link">
+            <Typography 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';