@nualang/nualang-ui-components 0.1.1154 → 0.1.1156

package/dist/Cards/CardElements/CardVisibility/CardVisibility.js

@@ -11,23 +11,38 @@ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _Public = _interopRequireDefault(require("@mui/icons-material/Public"));
 var _VpnLock = _interopRequireDefault(require("@mui/icons-material/VpnLock"));
 var _colors = require("@mui/material/colors");
+var _Archive = _interopRequireDefault(require("@mui/icons-material/Archive"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CardVisibility({
-  t,
-  visibility
+  t = text => text,
+  visibility = ""
 }) {
   const isPublic = visibility === "public";
+  let icon;
+  let color;
+  if (visibility === "public") {
+    icon = /*#__PURE__*/_react.default.createElement(_Public.default, {
+      fontSize: "small"
+    });
+    color = "success";
+  } else if (visibility === "private") {
+    icon = /*#__PURE__*/_react.default.createElement(_VpnLock.default, {
+      fontSize: "small"
+    });
+    color = "info";
+  } else if (visibility === "archived") {
+    icon = /*#__PURE__*/_react.default.createElement(_Archive.default, {
+      fontSize: "small"
+    });
+    color = "secondary";
+  }
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
     sx: {
       position: "relative"
     }
   }, /*#__PURE__*/_react.default.createElement(_Chip.default, {
-    color: isPublic ? "success" : "info",
-    icon: isPublic ? /*#__PURE__*/_react.default.createElement(_Public.default, {
-      fontSize: "small"
-    }) : /*#__PURE__*/_react.default.createElement(_VpnLock.default, {
-      fontSize: "small"
-    }),
+    color: color,
+    icon: icon,
     label: t(visibility),
     sx: theme => ({
       position: "absolute",
@@ -47,8 +62,4 @@ function CardVisibility({
 CardVisibility.propTypes = {
   visibility: _propTypes.default.string.isRequired
 };
-CardVisibility.defaultProps = {
-  t: t => t,
-  visibility: ""
-};
 var _default = exports.default = CardVisibility;

package/dist/Cards/CardElements/index.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "CardVisibility", {
     return _CardVisibility.default;
   }
 });
-exports.classes = void 0;
+exports.classes = exports.LoadingCardContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _system = require("@mui/system");
@@ -152,6 +152,15 @@ const CardMenuIcon = exports.CardMenuIcon = (0, _system.styled)("div")(({
   justifyContent: "center",
   marginRight: theme.spacing(2)
 }));
+const LoadingCardContainer = exports.LoadingCardContainer = (0, _system.styled)(_material.Card)(({
+  theme
+}) => ({
+  textAlign: "left",
+  color: theme.palette.text.secondary,
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: theme.spacing(2)
+}));
 const classes = exports.classes = {
   media: {
     height: 0,

package/dist/Cards/Course/Course.js

@@ -59,7 +59,8 @@ function OverflowMenu({
   course,
   reviewsEnabled,
   reviewCount,
-  classroomId
+  classroomId,
+  isClassroomArchived = false
 }) {
   return /*#__PURE__*/_react.default.createElement(_material.Menu, {
     id: `card-menu-${courseId}`,
@@ -79,11 +80,11 @@ function OverflowMenu({
     onClick: startCourse
   }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_ExitToApp.default, {
     fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("start_course"))), !isCreator && isMember && !isAdmin && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("start_course"))), !isCreator && isMember && !isAdmin && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: leaveCourse
   }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_ExitToApp.default, {
     fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("leave_course"))), isCreator && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("leave_course"))), isCreator && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: viewCourse
   }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Edit.default, {
     fontSize: "small"
@@ -94,11 +95,11 @@ function OverflowMenu({
     }
   }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_FileCopy.default, {
     fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("duplicate_course")))), handleRemoveCourse && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("duplicate_course")))), handleRemoveCourse && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => handleRemoveCourse(courseId)
   }, /*#__PURE__*/_react.default.createElement(_CardElements.CardMenuIcon, null, /*#__PURE__*/_react.default.createElement(_Close.default, {
     fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("remove_course"))), classroomId && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+  })), /*#__PURE__*/_react.default.createElement(_material.Typography, null, t("remove_course"))), classroomId && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
     onClick: () => {
       localStorage.setItem("focusCourseSettings", true);
       window.location.hash = "Settings";
@@ -182,7 +183,8 @@ function CourseCard({
   handleDuplicateCourse,
   ariaText = "",
   classroomId,
-  cardTitleComponent = "h2"
+  cardTitleComponent = "h2",
+  isClassroomArchived = false
 }) {
   const [placeholderRef, visible] = (0, _reactIntersectionObserver.useInView)({
     rootMargin: "320px",
@@ -332,7 +334,12 @@ function CourseCard({
     sx: disableRaised ? {} : _CardElements.classes.hover,
     raised: disableRaised ? false : anchorEl || isOutlineOpen,
     "data-cy": "course-card"
-  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardTop, null, /*#__PURE__*/_react.default.createElement(_material.CardActionArea, {
+  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardTop, null, isClassroomArchived ? /*#__PURE__*/_react.default.createElement(_ProgressiveCardMedia.default, {
+    sx: _CardElements.classes.media,
+    highQualitySrc: visible || !pictureXs ? cardPicture || picture || _index.default.course : null,
+    lowQualitySrc: pictureXs,
+    placeholderRef: placeholderRef
+  }) : /*#__PURE__*/_react.default.createElement(_material.CardActionArea, {
     onClick: handleClickImage,
     role: "link",
     "aria-label": `${ariaText} ${courseName}`
@@ -385,7 +392,7 @@ function CourseCard({
     action: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectable && /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
       checked: checked,
       onChange: handleCheckboxClick
-    }), !disableActions && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    }), !disableActions && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
       title: `${courseName} ${t("more_options")}`
     }, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
       onClick: handleClickOpenMenu,
@@ -459,7 +466,7 @@ function CourseCard({
     variant: "outlined",
     disabled: checked,
     "aria-label": "Select Course"
-  }, checked ? t("selected") : t("select")), isCreator && !selectable && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
+  }, checked ? t("selected") : t("select")), isCreator && !selectable && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: viewCourse,
     color: "primary",
     variant: "outlined",
@@ -470,7 +477,7 @@ function CourseCard({
     color: "primary",
     disabled: disableActions,
     "aria-label": `View Outline: ${courseName}`
-  }, t("view_outline"))), !isCreator && isMember && !selectable && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
+  }, t("view_outline"))), !isCreator && isMember && !selectable && !isClassroomArchived && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: viewCourse,
     color: "primary",
     variant: "outlined",
@@ -510,7 +517,8 @@ function CourseCard({
     handleDuplicateCourse: handleDuplicateCourse,
     course: course,
     reviewsEnabled: reviewsEnabled,
-    reviewCount: reviewCount
+    reviewCount: reviewCount,
+    isClassroomArchived: isClassroomArchived
   }), /*#__PURE__*/_react.default.createElement(_Reviews.default, {
     t: t,
     dialogTitle: courseName,
@@ -539,7 +547,8 @@ function CourseCard({
     sections: sectionsQuery.isSuccess ? sectionsQuery.data.Items : [],
     isLoading: sectionsQuery.isLoading,
     isMember: isMember,
-    completions: completions
+    completions: completions,
+    isClassroomArchived: isClassroomArchived
   }));
 }
 function Course(props) {

package/dist/Cards/Course/Course.stories.js

@@ -207,7 +207,8 @@ const course = exports.course = {
   collaborators: ["joe.blogs@fathomtech.io"],
   picture: `https://picsum.photos/id/1/1000/600`,
   pictureXs: `https://picsum.photos/id/1/16`,
-  exerciseStartTotal: 1200
+  exerciseStartTotal: 1200,
+  isClassroomArchived: false
 };
 const props = exports.props = {
   course,

package/dist/Cards/LoadingCard/LoadingCard.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
+var _CardElements = require("../CardElements");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function LoadingCard() {
+  return /*#__PURE__*/_react.default.createElement(_CardElements.LoadingCardContainer, {
+    sx: {
+      marginBottom: 3
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CardElements.CardTop, {
+    sx: {
+      paddingTop: "5%"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.CardActionArea, null, /*#__PURE__*/_react.default.createElement(_CardElements.CardAvatar, {
+    sx: theme => ({
+      backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+      color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+    })
+  }, /*#__PURE__*/_react.default.createElement(_Person.default, {
+    fontSize: "large"
+  })))), /*#__PURE__*/_react.default.createElement(_CardElements.CardContent, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "body1",
+    color: "textSecondary",
+    component: "div"
+  }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    variant: "text",
+    height: 72
+  }))));
+}
+var _default = exports.default = LoadingCard;

package/dist/Cards/LoadingCard/LoadingCard.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LoadingCard = _interopRequireDefault(require("./LoadingCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Template = args => /*#__PURE__*/_react.default.createElement(_LoadingCard.default, args);
+var _default = exports.default = {
+  title: "Cards/LoadingCard",
+  excludeStories: ["props", "image"],
+  component: _LoadingCard.default
+};
+const props = exports.props = {
+  image: ""
+};
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  ...props
+};
+Default.storyName = "default";

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RecordingCard;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function RecordingCard({
+  recordingsListData = {},
+  handleView = () => {},
+  handleViewFeedback = () => {},
+  userData = {},
+  t = x => x
+}) {
+  const selectedMembers = userData?.filter(o1 => [recordingsListData?.userIds].flat().some(o2 => o1?.memberId === o2));
+  function formatDateToMMDDYYYY(isoTimestamp) {
+    const date = new Date(isoTimestamp);
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const year = date.getFullYear();
+    return `${month}/${day}/${year}`;
+  }
+  function formatDateTime(isoTimestamp) {
+    const date = new Date(isoTimestamp);
+    const hours = date.getHours();
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const period = hours >= 12 ? "PM" : "AM";
+    const formattedHours = (hours % 12 === 0 ? 12 : hours % 12).toString().padStart(2, "0");
+    return `${formattedHours}:${minutes} ${period}`;
+  }
+  const attendedMembers = selectedMembers.filter(attendee => recordingsListData?.joinedMembers?.includes(attendee?.memberId));
+  const notAttendedMembers = selectedMembers.filter(attendee => !recordingsListData?.joinedMembers?.includes(attendee?.memberId));
+  return /*#__PURE__*/_react.default.createElement(_material.Card, {
+    sx: {
+      display: "flex",
+      marginBottom: 2,
+      boxShadow: 3
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 8
+  }, /*#__PURE__*/_react.default.createElement(_material.CardContent, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      display: "flex",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2
+  }, attendedMembers.map(attendee => /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: `${attendee?.username} - Present`,
+    key: attendee?.memberId
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    alt: attendee?.username,
+    src: attendee?.userImage
+  })))), notAttendedMembers.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Divider, {
+    orientation: "vertical",
+    flexItem: true,
+    sx: {
+      marginLeft: 2,
+      marginRight: 2
+    }
+  }), /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2
+  }, notAttendedMembers.map(attendee => /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: `${attendee?.username} - Not Present`,
+    key: attendee?.memberId
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    alt: attendee?.username,
+    src: attendee?.userImage,
+    sx: {
+      filter: "grayscale(100%)"
+    }
+  })))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      paddingTop: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    fontWeight: "bold"
+  }, recordingsListData.meetingTopic)), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      paddingTop: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    sx: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      width: "100%"
+    }
+  }, recordingsListData.meetingPrompt)), /*#__PURE__*/_react.default.createElement(_Typography.default, null, formatDateToMMDDYYYY(recordingsListData.timestamp), " \u2022", " ", formatDateTime(recordingsListData.timestamp))))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 2,
+    sx: {
+      display: "flex",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.CardActions, null, recordingsListData?.gradingOption && /*#__PURE__*/_react.default.createElement(_material.Button, {
+    color: "primary",
+    onClick: handleViewFeedback,
+    "aria-label": `Feedback, Recorded Discussion: ${recordingsListData.meetingTopic}`
+  }, t("feedback")))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 2,
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      width: "20px",
+      textOverflow: "ellipsis"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.CardActions, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    color: "primary",
+    onClick: handleView,
+    "aria-label": `View, Recorded Discussion: ${recordingsListData.meetingTopic}`
+  }, t("view"))))));
+}
+RecordingCard.propTypes = {
+  recordingFeedback: _propTypes.default.object,
+  recordingsListData: _propTypes.default.object,
+  userData: _propTypes.default.object,
+  handleView: _propTypes.default.func,
+  t: _propTypes.default.func,
+  handleViewFeedback: _propTypes.default.func
+};

package/dist/Cards/RecordingCard/RecordingCard.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.default = exports.Loading = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _RecordingCard = _interopRequireDefault(require("./RecordingCard"));
+var _aaronSquare = _interopRequireDefault(require("../../img/aaron-square.jpg"));
+var _test = _interopRequireDefault(require("../../../videos/test1.mp4"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Template = args => /*#__PURE__*/_react.default.createElement(_RecordingCard.default, args);
+const props = exports.props = {
+  handleSubmit: () => {},
+  userData: [{
+    memberId: "1",
+    username: "Aaron",
+    userImage: _aaronSquare.default
+  }, {
+    memberId: "2",
+    username: "Connor",
+    userImage: _aaronSquare.default
+  }, {
+    memberId: "3",
+    username: "Stephen",
+    userImage: _aaronSquare.default
+  }, {
+    memberId: "4",
+    username: "John",
+    userImage: _aaronSquare.default
+  }],
+  recordingsListData: {
+    meetingTopic: "Going to the beach",
+    gradingOption: "Individual Grade",
+    meetingPrompt: "talk about your adventures on the beach qwe qwe qwe qwe sdf th qw",
+    emails: ["aaron.cullen@fathomtech.io", "connor.cawley@fathomtech.io", "stephen.kelly@fathomtech.io", "stephen.kelly@fathomtech.io", "stephen.kelly@fathomtech.io", "stephen.kelly@fathomtech.io", "stephen.kelly@fathomtech.io"],
+    meetingID: "12345678abcdefgh",
+    videoUrl: _test.default,
+    feedbackPerformance: "Novice Low",
+    feedbackText: "Well done, great use of vocabulary",
+    timestamp: "2023-08-18T13:15:56.511Z",
+    meetingMembers: ["1", "2", "3", "4"],
+    attendees: [{
+      name: "Aaron",
+      image: _aaronSquare.default
+    }, {
+      name: "Connor",
+      image: _aaronSquare.default
+    }, {
+      name: "Stephen",
+      image: _aaronSquare.default
+    }, {
+      name: "John",
+      image: _aaronSquare.default
+    }]
+  }
+};
+var _default = exports.default = {
+  title: "Cards/RecordingCard",
+  excludeStories: ["props"],
+  component: _RecordingCard.default
+};
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  ...props,
+  loading: false
+};
+Default.storyName = "default";
+const Loading = exports.Loading = Template.bind({});
+Loading.args = {
+  ...props,
+  loading: true
+};
+Loading.storyName = "loading";

package/dist/Cards/ScheduleCard/ScheduleCard.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ScheduleCard;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _AvatarGroup = _interopRequireDefault(require("@mui/material/AvatarGroup"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ScheduleCard({
+  t = x => x,
+  scheduleListData = {},
+  handleJoin = () => {},
+  futureMeeting = {},
+  userData = [],
+  teacherView = false
+}) {
+  const selectedMembers = userData.filter(o1 => [scheduleListData?.meetingMembers].flat().some(o2 => o1?.memberId === o2));
+  return /*#__PURE__*/_react.default.createElement(_material.Card, {
+    sx: {
+      display: "flex",
+      marginBottom: 2,
+      boxShadow: 3
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 10
+  }, /*#__PURE__*/_react.default.createElement(_material.CardContent, null, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      justifyContent: "flex-end"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_AvatarGroup.default, {
+    spacing: -3,
+    max: 4,
+    sx: {
+      justifyContent: "flex-end"
+    }
+  }, selectedMembers?.map(attendee => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    title: attendee?.username,
+    key: attendee?.memberId
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    alt: attendee?.username,
+    src: attendee?.userImage,
+    key: attendee?.memberId
+  }))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      paddingTop: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    fontWeight: "bold"
+  }, scheduleListData.meetingTopic)), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    sx: {
+      paddingTop: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    sx: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      width: "100%"
+    }
+  }, scheduleListData.meetingPrompt)), /*#__PURE__*/_react.default.createElement(_Typography.default, null, scheduleListData.meetingDate, " \u2022 ", scheduleListData.meetingTime)))), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    item: true,
+    xs: 1,
+    sx: {
+      display: "flex",
+      justifyContent: "center"
+    }
+  }, futureMeeting ? /*#__PURE__*/_react.default.createElement(_material.CardActions, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
+    "aria-label": teacherView ? `View, Scheduled Discussion: ${scheduleListData.meetingTopic}` : `Start, Schedules Discussion: ${scheduleListData.meetingTopic}`,
+    color: "primary",
+    onClick: handleJoin
+  }, teacherView ? t("view") : t("start"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))));
+}
+ScheduleCard.propTypes = {
+  scheduleListData: _propTypes.default.object,
+  userData: _propTypes.default.object,
+  handleJoin: _propTypes.default.func,
+  futureMeeting: _propTypes.default.object,
+  // handleRemoveDiscussion: PropTypes.func,
+  t: _propTypes.default.func,
+  teacherView: _propTypes.default.bool
+};

package/dist/Cards/ScheduleCard/ScheduleCard.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.default = exports.Loading = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ScheduleCard = _interopRequireDefault(require("./ScheduleCard"));
+var _aaronSquare = _interopRequireDefault(require("../../img/aaron-square.jpg"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Template = args => /*#__PURE__*/_react.default.createElement(_ScheduleCard.default, args);
+const props = exports.props = {
+  t: string => string,
+  handleSubmit: () => {},
+  userData: [{
+    memberId: "1",
+    username: "Aaron",
+    userImage: _aaronSquare.default
+  }, {
+    memberId: "2",
+    username: "Connor",
+    userImage: _aaronSquare.default
+  }, {
+    memberId: "3",
+    username: "Stephen",
+    userImage: _aaronSquare.default
+  }, {
+    memberId: "4",
+    username: "John",
+    userImage: _aaronSquare.default
+  }],
+  scheduleListData: {
+    meetingTopic: "Going to the beach",
+    meetingPrompt: "Tell me about your trip on the beach",
+    meetingDate: "09-26-2023",
+    meetingTime: "15:30",
+    emails: ["aaron.cullen@fathomtech.io", "connor.cawley@fathomtech.io", "stephen.kelly@fathomtech.io"],
+    meetingMembers: ["1", "2", "3", "4"],
+    timeLimit: "2 Minutes",
+    scheduleOption: "True",
+    chatOption: "False"
+  }
+};
+var _default = exports.default = {
+  title: "Cards/ScheduleCard",
+  excludeStories: ["props"],
+  component: _ScheduleCard.default
+};
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  ...props,
+  loading: false
+};
+Default.storyName = "default";
+const Loading = exports.Loading = Template.bind({});
+Loading.args = {
+  ...props,
+  loading: true
+};
+Loading.storyName = "loading";