@universal-tennis/ui-shared 0.1.3 → 0.1.5

package/dist/stories/{oraganisms → organisms/Tables}/SortableTable.d.ts

@@ -17,7 +17,7 @@ export type SortableTableProps = {
         labelId: string;
     }>;
     title?: string;
-    onOrderPropertyChange: (property: OrderProperty) => VoidFunction;
+    onOrderPropertyChange?: (property: OrderProperty) => VoidFunction;
 };
 declare function SortableTable({ headCells, tableData, rowComponent, sortOrder, sortByProperty, title, onOrderPropertyChange, }: SortableTableProps): JSX.Element;
 export default SortableTable;

package/dist/stories/{oraganisms → organisms/Tables}/SortableTable.js

@@ -8,12 +8,14 @@ import MuiTableRow from "@mui/material/TableRow";
 import TableSortLabel from "@mui/material/TableSortLabel";
 import Toolbar from "@mui/material/Toolbar";
 import Paper from "@mui/material/Paper";
-import Typography from '../atoms/Typography/Typography';
+import Typography from '../../atoms/Typography/Typography';
 function SortableTable({ headCells, tableData, rowComponent, sortOrder, sortByProperty, title = '', onOrderPropertyChange, }) {
     const TableRow = rowComponent;
     const handleRequestSort = (property) => (event) => {
         event.preventDefault();
-        onOrderPropertyChange(property);
+        if (onOrderPropertyChange) {
+            onOrderPropertyChange(property);
+        }
     };
     return (React.createElement(Paper, { sx: { width: "100%", mb: 2 } },
         title && (React.createElement(Toolbar, { sx: { pl: { sm: 2 }, pr: { xs: 1, sm: 1 } } },

package/dist/stories/organisms/Tables/SortableTable.js.map

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

package/dist/stories/organisms/Tables/Tables.stories.d.ts

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

package/dist/stories/organisms/Tables/Tables.stories.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import DrawCard from '../../molecules/Cards/DrawCard';
+import DrawCardTable from './DrawCardTable';
+import { MOCK_HEAD_CELLS, mockRowComponent, MOCK_TABLE_DATA, SAMPLE_CARD_DATA } from './mockData';
+const onOrderPropertyChange = () => { };
+// Default
+export default {
+    title: 'Organisms/Tables',
+};
+// Templates
+function DrawCardTableTemplate(args) {
+    return React.createElement(DrawCardTable, Object.assign({}, args));
+}
+const headerRows = [
+    { name: 'Round 1' },
+    { name: 'Quarterfinal' },
+    { name: 'SemiFinal' },
+];
+const tableRows = [
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+];
+// Stories
+export const DrawTable = DrawCardTableTemplate.bind({});
+DrawTable.args = {
+    headerRows,
+    tableRows,
+};
+export const SortableTable = DrawCardTableTemplate.bind({});
+SortableTable.args = {
+    headCells: MOCK_HEAD_CELLS,
+    sortOrder: 'asc',
+    sortByProperty: 'player',
+    title: 'Player Table',
+    tableData: MOCK_TABLE_DATA,
+    rowComponent: mockRowComponent,
+    onOrderPropertyChange,
+};
+//# sourceMappingURL=Tables.stories.js.map

package/dist/stories/organisms/Tables/Tables.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/Tables.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,gCAAgC,CAAC;AACtD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,gBAAgB,EACrE,MAAM,YAAY,CAAC;AAEpB,MAAM,qBAAqB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;AAEvC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEF,YAAY;AACZ,SAAS,qBAAqB,CAAC,IAAwB;IACrD,OAAO,oBAAC,aAAa,oBAAK,IAAI,EAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,IAAI,EAAE,SAAS,EAAE;IACnB,EAAE,IAAI,EAAE,cAAc,EAAE;IACxB,EAAE,IAAI,EAAE,WAAW,EAAE;CACtB,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;CACF,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,SAAS,CAAC,IAAI,GAAG;IACf,UAAU;IACV,SAAS;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,aAAa,CAAC,IAAI,GAAG;IACnB,SAAS,EAAE,eAAe;IAC1B,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,QAAQ;IACxB,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,eAAe;IAC1B,YAAY,EAAE,gBAAgB;IAC9B,qBAAqB;CACtB,CAAC"}

package/dist/stories/organisms/Tables/mockData.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+interface RowData {
+    player: string;
+    team: string;
+    session: string;
+}
+interface RowProps {
+    rowData: RowData;
+    labelId: string;
+}
+export declare const mockRowComponent: ({ rowData, labelId }: RowProps) => JSX.Element;
+export declare const MOCK_HEAD_CELLS: {
+    id: string;
+    label: string;
+    isSortingDisabled: boolean;
+}[];
+export declare const MOCK_TABLE_DATA: {
+    id: number;
+    player: string;
+    team: string;
+    session: string;
+}[];
+export declare const SAMPLE_CARD_DATA: {
+    options: {
+        id: number;
+        label: string;
+    }[];
+    selectedOptions: {
+        optionOne: number;
+        optionTwo: number;
+    };
+    dateLabel: string;
+    locationLabel: string;
+};
+export {};

package/dist/stories/{oraganisms/SortableTable.stories.js → organisms/Tables/mockData.js}

@@ -1,15 +1,6 @@
 import React from 'react';
 import { TableRow, TableCell, Typography } from '@mui/material';
-import SortableTable from './SortableTable';
-// Default
-export default {
-    title: 'Organisms/SortableTable',
-};
-// Templates
-function SortableTableTemplate(args) {
-    return React.createElement(SortableTable, Object.assign({}, args));
-}
-const rowComponent = ({ rowData, labelId }) => {
+export const mockRowComponent = ({ rowData, labelId }) => {
     const { player, session, team } = rowData;
     return (React.createElement(TableRow, null,
         React.createElement(TableCell, { component: "th", id: labelId, scope: "row", padding: "normal" },
@@ -19,49 +10,59 @@ const rowComponent = ({ rowData, labelId }) => {
         React.createElement(TableCell, { align: "left" },
             React.createElement(Typography, null, session))));
 };
-const headCells = [
+export const MOCK_HEAD_CELLS = [
     { id: 'player', label: 'Player Name', isSortingDisabled: false },
     { id: 'team', label: 'Team Name', isSortingDisabled: true },
     { id: 'session', label: 'Session', isSortingDisabled: false }
 ];
-const tableData = [
+export const MOCK_TABLE_DATA = [
     {
+        id: 1,
         player: 'John Smith',
         team: 'Mavericks',
         session: 'NorCal Adults',
     },
     {
+        id: 2,
         player: 'Megan Brown',
         team: 'Mini Mavericks',
         session: 'SoCal Juniors',
     },
     {
+        id: 3,
         player: 'George Fox',
         team: 'Grey Foxes',
         session: 'North Bay Junios',
     },
     {
+        id: 4,
         player: 'Alison Green',
         team: 'Lions',
         session: 'Outer Bay UTR 2-5',
     },
     {
+        id: 5,
         player: 'Linda Belinda',
         team: 'Green Hornets',
         session: 'Tri-State UTR 1-3',
     },
 ];
-const onOrderPropertyChange = () => { };
-// Stories
-const args = {
-    headCells,
-    sortOrder: 'asc',
-    sortByProperty: 'player',
-    title: 'Player Table',
-    tableData,
-    rowComponent,
-    onOrderPropertyChange,
+export const SAMPLE_CARD_DATA = {
+    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',
 };
-export const DefaultTable = SortableTableTemplate.bind({});
-DefaultTable.args = args;
-//# sourceMappingURL=SortableTable.stories.js.map
+//# sourceMappingURL=mockData.js.map

package/dist/stories/organisms/Tables/mockData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockData.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/mockData.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAahE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAY,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAC1C,OAAO,CACH,oBAAC,QAAQ;QACL,oBAAC,SAAS,IACN,SAAS,EAAC,IAAI,EACd,EAAE,EAAE,OAAO,EACX,KAAK,EAAC,KAAK,EACX,OAAO,EAAC,QAAQ;YAEhB,oBAAC,UAAU,QAAE,MAAM,CAAc,CACzB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,IAAI,CAAc,CACvB;QACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,UAAU,QAAE,OAAO,CAAc,CAC1B,CACL,CAEd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,KAAK,EAAE;IAChE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,IAAI,EAAE;IAC3D,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE;CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,gBAAgB;QACtB,OAAO,EAAE,eAAe;KACzB;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,kBAAkB;KAC5B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,mBAAmB;KAC7B;IACD;QACE,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,eAAe;QACvB,IAAI,EAAE,eAAe;QACrB,OAAO,EAAE,mBAAmB;KAC7B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,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;CACrC,CAAC"}

package/dist/stories/organisms/Tables/sharedTypes.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type DrawCardTableProps = {
+    headerRows: {
+        name: string;
+    }[];
+    tableRows: ReactNode[][];
+};

package/dist/stories/organisms/Tables/sharedTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sharedTypes.js.map

package/dist/stories/organisms/Tables/sharedTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Tables/sharedTypes.ts"],"names":[],"mappings":""}

package/dist/types/tableDataTypes.d.ts

@@ -21,15 +21,15 @@ export interface Captain {
 }
 export interface AddTeamsData {
     id: number;
-    name: string;
-    teamMemberCount: number;
-    captains: Array<Captain>;
-    sessionId: number;
-    sessionName: string;
-    sessionStartDateUtc: string;
-    sessionEndDateUtc: string;
-    wins: number;
-    losses: number;
+    name?: string;
+    teamMemberCount?: number;
+    captains?: Array<Captain>;
+    sessionId?: number;
+    sessionName?: string;
+    sessionStartDateUtc?: string;
+    sessionEndDateUtc?: string;
+    wins?: number;
+    losses?: number;
     rank?: number;
     isSelected?: boolean;
     record?: string;

package/package.json

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

package/src/components.jsx

@@ -9,4 +9,6 @@ export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
 export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
 
 // ORGANISMS 
-export { default as SortableTable } from './stories/organisms/SortableTable';
+export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
+export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
+export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';

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

@@ -6,5 +6,7 @@
     --white: #fff;
     --light-grey: #d7e0ea;
     --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
     --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
     }

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

@@ -7,6 +7,7 @@ type ButtonProps = {
   category?: string;
   onClick?: VoidFunction;
   style?: React.CSSProperties;
+  disabled?: boolean;
 }
 
 type StyledButtonProps = {

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

@@ -141,3 +141,45 @@ export default function Typography({
       );
   }
 }
+
+export const DISPLAY_SIZES_ENUM = {
+  XXXLarge: "XXX-large",
+  XXLarge: "XX-large",
+  XLarge: "X-large",
+  Large: 'large',
+  LargeLight: "large-light",
+  MediumBook: "medium-book",
+};
+
+export const PRIMARY_SIZES_ENUM = {
+  LargeBold: "large-bold",
+  LargeBook: "large-book",
+  LargeLight: "large-light",
+  MediumSemibold: "medium-semibold",
+  MediumMedium: "medium-medium",
+  MediumBook: "medium-book",
+  SmallBook: "small-book",
+  XSmallBook: "x-small-book",
+};
+
+export const SECONDARY_SIZES_ENUM = {
+  LargeMedium: "large-medium",
+  LargeBook: "large-book",
+  MediumMedium: "medium-medium",
+  MediumBook: "medium-book",
+  SmallMediumCap: "small-medium-cap",
+  SmallMedium: "small-medium",
+  SmallBook: "small-book",
+  XSmallMediumCap: "x-small-medium-cap",
+  XSmallMedium: "x-small-medium",
+  XSmallBookCap: "x-small-book-cap",
+  XSmallBook: "x-small-book",
+  XXSmallMediumCap: "xx-small-medium-cap",
+  XXSmallBook: "xx-small-book",
+};
+
+export const CATEGORY_ENUM = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DISPLAY: 'display'
+};

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

@@ -2,19 +2,8 @@ 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;
-}
+import DrawCard from './DrawCard';
+import { DrawCardProps, TeamCardProps, ContactCardProps } from "./sharedTypes";
 
 // Default
 export default {
@@ -30,6 +19,14 @@ function TeamCardTemplate(args: TeamCardProps) {
   return <TeamCard {...args} />;  
 }
 
+function DrawCardTemplate(args: DrawCardProps) {
+  return (
+      <div style={{ width: '372px' }}>
+          <DrawCard {...args} /> 
+      </div>
+  );
+}
+
 // Stories
 export const Contact = ContactCardTemplate.bind({});
 Contact.args = {
@@ -43,3 +40,23 @@ 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',
+};

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

@@ -8,13 +8,7 @@ import Typography from '../../atoms/Typography/Typography';
 import ChatIcon from '../../assets/icon-chat-blue.svg';
 
 import { StyledCard } from './shared';
-
-type ContactCardProps = {
-  name: string;
-  phone: string;
-  email: string;
-  onMessageClick?: VoidFunction;
-}
+import { ContactCardProps } from './sharedTypes';
 
 export default function ContactCard({
   name, phone, email, onMessageClick, ...props 

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import MuiSelect, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '../../atoms/Button/Button';
+import Typography, { SECONDARY_SIZES_ENUM, CATEGORY_ENUM } from '../../atoms/Typography/Typography';
+import { DrawCardProps } from "./sharedTypes";
+
+const StyledCard = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '4px',
+  padding: '16px 24px',
+  width: '100%',
+  backgroundColor: 'var(--cool-grey-150)',
+  
+  '&:hover': {
+    cursor: 'pointer'
+  },
+});
+
+const StyledMuiSelect = styled(MuiSelect)({
+  border: '1px solid var(--cool-grey-600)',
+});
+
+const BottomGrid = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingTop: '32px',
+});
+
+const Positions = {
+  ONE: '1',
+  TWO: '2',
+};
+
+export default function DrawCard({
+  options, onChange, onEditClick, selectedOptions, dateLabel, locationLabel, ...props
+}: DrawCardProps) {
+  const { optionOne, optionTwo } = selectedOptions || null;
+
+  const handleOnSelectionChange = (event: SelectChangeEvent<unknown>, position: string) => {
+    const id = event.target.value as string;
+    
+    if (onChange) {
+      onChange({ position, id });
+    }
+  };
+
+  return (
+      <StyledCard
+          {...props}
+      >
+          <StyledMuiSelect
+              labelId="draw-card-select-label-top"
+              id="draw-card-select-top"
+              value={optionOne}
+              label="teamOne"
+              onChange={(e) => handleOnSelectionChange(e, Positions.ONE)}
+          >
+              {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
+          </StyledMuiSelect>
+
+          <Box pt={1} />
+          <StyledMuiSelect
+              labelId="draw-card-select-label-bot"
+              id="draw-card-select-bot"
+              value={optionTwo}
+              label="teamTwo"
+              onChange={(e) => handleOnSelectionChange(e, Positions.TWO)}
+          >
+              {options.map((option) => <MenuItem key={option.id} value={option.id}>{option.label}</MenuItem>)}
+          </StyledMuiSelect>
+          <BottomGrid> 
+
+              <Box>
+                  <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.SmallBook}>
+                      {dateLabel}
+                  </Typography>
+                  <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.SmallBook}>
+                      {locationLabel}
+                  </Typography>
+              </Box>
+              <Button
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'end'
+                  }}
+                  onClick={onEditClick}
+                  category="link"
+              >
+                  <Typography category={CATEGORY_ENUM.SECONDARY} size={SECONDARY_SIZES_ENUM.XSmallMediumCap}>
+                      Edit
+                  </Typography>
+              </Button>
+          </BottomGrid>
+      </StyledCard>
+  );
+}

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

@@ -2,11 +2,7 @@ import React from 'react';
 
 import Typography from '../../atoms/Typography/Typography';
 import { StyledCard } from './shared';
-
-type TeamCardProps = {
-  title: string;
-  description: string;
-}
+import { TeamCardProps } from './sharedTypes';
 
 export default function TeamCard({ title, description, ...props }: TeamCardProps) {
   return (

package/src/stories/molecules/Cards/sharedTypes.ts

@@ -0,0 +1,37 @@
+// Card types
+
+type SelectedOptions = {
+    optionOne: number;
+    optionTwo: number;
+}
+
+type Options = {
+    id: number;
+    label: string;
+}[];
+
+type OnChangeArgs = {
+  position: string;
+  id: string;
+}
+
+export type DrawCardProps = {
+    options: Options;
+    selectedOptions: SelectedOptions;
+    dateLabel: string;
+    locationLabel: string;
+    onEditClick?: VoidFunction;
+    onChange?: ({ position, id }: OnChangeArgs) => null;
+  }
+
+export interface TeamCardProps {
+    title: string; 
+    description: string;
+  }
+
+export interface ContactCardProps {
+    name: string;
+    phone: string;
+    email: string;
+    onMessageClick?: VoidFunction;
+  }

package/src/stories/organisms/Modals/FullPageModal.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Button from 'stories/atoms/Button/Button';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import CloseIcon from '@mui/icons-material/Close';
+import Container from '@mui/material/Container';
+import Dialog from '@mui/material/Dialog';
+import IconButton from '@mui/material/IconButton';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import { FullPageModalType } from './sharedTypes';
+
+function FullPageModal({
+  isOpen,
+  onClose,
+  pageTitle,
+  bottomCTAText,
+  handleBottomCTAClick,
+  isBottomCTAdisabled,
+  PagePopupModal,
+  children,
+}: FullPageModalType) {
+  const handleOnClose = () => {
+    onClose();
+  };
+
+  return (
+      <Box position="relative">
+          <Dialog
+              PaperProps={{
+                style: {
+                  backgroundColor: 'var(--cool-grey-150)',
+                  boxShadow: 'none',
+                },
+              }}
+              fullScreen
+              open={isOpen}
+              onClose={(event, reason) => console.log('reason', reason)}
+          >
+              <AppBar sx={{ position: 'relative', backgroundColor: 'var(--white)' }}>
+                  <Toolbar>
+                      <Container maxWidth={false}>
+                          <Box display="flex" justifyContent="space-between" alignItems="center">
+                              <Typography variant="h6">{pageTitle}</Typography>
+                              <IconButton edge="start" onClick={handleOnClose} aria-label="close">
+                                  <CloseIcon />
+                              </IconButton>
+                          </Box>
+                      </Container>
+                  </Toolbar>
+              </AppBar>
+              <Grid height="100vh" container>
+                  {children}
+              </Grid>
+              {bottomCTAText && !!handleBottomCTAClick && (
+                  <Box sx={{ position: "fixed", width: "100%", backgroundColor: 'black' }} p={2} bottom={0}>
+                      <Box display="flex" justifyContent="flex-end">
+                          <Button onClick={handleBottomCTAClick} disabled={isBottomCTAdisabled} category="primary">
+                              {bottomCTAText}
+                          </Button>
+                      </Box>
+                  </Box>
+              )}
+              {PagePopupModal}
+          </Dialog>
+      </Box>
+  );
+}
+export default FullPageModal;