@nualang/nualang-ui-components 0.1.1399 → 0.1.1401

package/dist/Cards/Bot/Bot.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 import PlaceholderImages from "../../utils/placeholder-images/index";
-import { Button, Box, Typography, CardActionArea, CardActions, Menu, MenuItem, IconButton, Divider, Tooltip } from "@mui/material";
+import { Button, Typography, CardActionArea, CardActions, Menu, MenuItem, IconButton, Divider, Tooltip } from "@mui/material";
 import Skeleton from "@mui/material/Skeleton";
 import Person from "@mui/icons-material/Person";
 import LanguageIcon from "@mui/icons-material/Public";
@@ -15,7 +15,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import ShareIcon from "@mui/icons-material/Share";
 import CopyIcon from "@mui/icons-material/FileCopy";
 import ProgressiveCardMedia from "../../Misc/ProgressiveCardMedia/ProgressiveCardMedia";
-import { classes, CardContainer, CardAvatar, CardHeader, CardTitle, CardInfoSection, CardInfoSectionItem, CardDescription, CardTop, CardContent, CardMenuIcon, CardVisibility } from "../CardElements";
+import { classes, CardContainer, CardAvatar, CardHeader, CardTitle, CardSubheader, CardInfoSection, CardInfoSectionItem, CardDescription, CardTop, CardContent, CardMenuIcon, CardVisibility } from "../CardElements";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function OverflowMenu({
   t,
@@ -119,7 +119,8 @@ function Bot({
   disablePlays,
   handleOpenPreview,
   disablePreview,
-  cardTitleComponent = "h3"
+  cardTitleComponent = "h3",
+  compact = false
 }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const [placeholderRef, visible] = useInView({
@@ -128,10 +129,16 @@ function Bot({
   });
   if (!bot) {
     return /*#__PURE__*/_jsxs(CardContainer, {
+      compact: compact,
       children: [/*#__PURE__*/_jsx(CardTop, {
         children: /*#__PURE__*/_jsx(Skeleton, {
           variant: "rectangular",
-          sx: classes.media
+          sx: {
+            ...classes.media,
+            ...(compact ? {
+              paddingTop: "40%"
+            } : {})
+          }
         })
       }), /*#__PURE__*/_jsx(CardHeader, {
         action: /*#__PURE__*/_jsx(IconButton, {
@@ -181,6 +188,7 @@ function Bot({
     handleSelectBot(bot);
   };
   return /*#__PURE__*/_jsxs(CardContainer, {
+    compact: compact,
     sx: disableRaised ? {} : classes.hover,
     raised: disableRaised ? false : anchorEl,
     "data-cy": "bot-card",
@@ -189,7 +197,12 @@ function Bot({
         onClick: selectBot,
         role: "link",
         children: [/*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: classes.media,
+          sx: {
+            ...classes.media,
+            ...(compact ? {
+              paddingTop: "40%"
+            } : {})
+          },
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.bot : null,
           lowQualitySrc: pictureXs,
           title: botName,
@@ -217,12 +230,20 @@ function Bot({
         badgeSize: "small",
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white",
+          ...(compact ? {
+            width: 44,
+            height: 44
+          } : {})
         })
       }) : /*#__PURE__*/_jsx(CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white",
+          ...(compact ? {
+            width: 44,
+            height: 44
+          } : {})
         }),
         "aria-label": `${t("go_to")} ${createdByName || `${botName} ${t("creator")}`} ${t("profile")}`,
         title: createdByName || `${botName} creator`,
@@ -242,67 +263,96 @@ function Bot({
           fontSize: "large"
         })
       })]
-    }), /*#__PURE__*/_jsx(CardHeader, {
-      title: /*#__PURE__*/_jsx(CardTitle, {
-        title: botName,
-        component: cardTitleComponent
-      }),
-      action: /*#__PURE__*/_jsx(Tooltip, {
-        title: t("more_options"),
-        children: /*#__PURE__*/_jsx(IconButton, {
-          "aria-label": "More Options",
-          onClick: event => setAnchorEl(event.currentTarget),
-          "data-cy": `${botName}-more-options`,
-          disabled: disableActions,
-          size: "large",
-          "aria-expanded": Boolean(anchorEl),
-          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-        })
-      }),
-      subheader: createdByName
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(CardContent, {
-      children: [/*#__PURE__*/_jsxs(CardInfoSection, {
+    }), /*#__PURE__*/_jsxs(CardActionArea, {
+      onClick: selectBot,
+      disabled: disableActions,
+      sx: {
+        flexGrow: 1,
         display: "flex",
-        alignItems: "center",
-        flexWrap: "wrap",
-        children: [/*#__PURE__*/_jsx(Box, {
+        flexDirection: "column",
+        alignItems: "stretch"
+      },
+      children: [/*#__PURE__*/_jsx(CardHeader, {
+        title: /*#__PURE__*/_jsx(CardTitle, {
+          title: botName,
+          component: cardTitleComponent,
+          compact: compact
+        }),
+        action: /*#__PURE__*/_jsx(Tooltip, {
+          title: t("more_options"),
+          children: /*#__PURE__*/_jsx(IconButton, {
+            "aria-label": "More Options",
+            onClick: event => {
+              event.stopPropagation();
+              setAnchorEl(event.currentTarget);
+            },
+            "data-cy": `${botName}-more-options`,
+            disabled: disableActions,
+            size: "large",
+            "aria-expanded": Boolean(anchorEl),
+            children: /*#__PURE__*/_jsx(MoreVertIcon, {})
+          })
+        }),
+        subheader: /*#__PURE__*/_jsx(CardSubheader, {
+          subheader: createdByName,
+          compact: compact
+        })
+      }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(CardContent, {
+        children: [/*#__PURE__*/_jsxs(CardInfoSection, {
           sx: {
-            mr: 2
+            columnGap: 1.5,
+            rowGap: 0.5
           },
-          children: /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-            variant: "body2",
+          children: [/*#__PURE__*/_jsxs(CardInfoSectionItem, {
+            variant: "caption",
             component: "span",
             children: [/*#__PURE__*/_jsx(LanguageIcon, {
-              sx: classes.infoIcon
+              sx: {
+                ...classes.infoIcon,
+                fontSize: compact ? 18 : undefined
+              },
+              fontSize: "small"
             }), learnLang && capitalize(t(learnLang))]
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            mr: 2
-          },
-          children: /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-            variant: "body2",
+          }), /*#__PURE__*/_jsxs(CardInfoSectionItem, {
+            variant: "caption",
             component: "span",
             children: [/*#__PURE__*/_jsx(DifficultyIcon, {
-              sx: classes.infoIcon
+              sx: {
+                ...classes.infoIcon,
+                fontSize: compact ? 18 : undefined
+              },
+              fontSize: "small"
             }), t(`card_${bot.difficulty}`)]
-          })
-        }), !disablePlays && exerciseStartTotal > -1 && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
-          variant: "body2",
-          component: "span",
-          children: [/*#__PURE__*/_jsx(PlayArrowIcon, {
-            sx: classes.infoIcon
-          }), t("plays", {
-            number: formatNumberTotal(exerciseStartTotal)
+          }), !disablePlays && exerciseStartTotal > -1 && /*#__PURE__*/_jsxs(CardInfoSectionItem, {
+            variant: "caption",
+            component: "span",
+            children: [/*#__PURE__*/_jsx(PlayArrowIcon, {
+              sx: {
+                ...classes.infoIcon,
+                fontSize: compact ? 18 : undefined
+              },
+              fontSize: "small"
+            }), t("plays", {
+              number: formatNumberTotal(exerciseStartTotal)
+            })]
           })]
+        }), /*#__PURE__*/_jsx(CardDescription, {
+          variant: compact ? "caption" : "body2",
+          color: "textSecondary",
+          component: "p",
+          sx: compact ? {
+            height: "auto",
+            lineHeight: 1.4,
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            marginBottom: 1
+          } : {},
+          children: description
         })]
-      }), /*#__PURE__*/_jsx(CardDescription, {
-        variant: "body1",
-        color: "textSecondary",
-        component: "p",
-        children: description
       })]
-    }), /*#__PURE__*/_jsxs(CardActions, {
+    }), !compact && /*#__PURE__*/_jsxs(CardActions, {
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: selectBot,
         color: "primary",

package/dist/Cards/CardElements/CardSubheader/CardSubheader.js

@@ -0,0 +1,28 @@
+import PropTypes from "prop-types";
+import Typography from "@mui/material/Typography";
+import { styled } from "@mui/system";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledCardSubheader = styled(Typography)(({
+  theme
+}) => ({
+  color: theme.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+function CardSubheader({
+  subheader = "",
+  component = "span",
+  compact = false
+}) {
+  return /*#__PURE__*/_jsx(StyledCardSubheader, {
+    variant: compact ? "caption" : "body2",
+    component: component,
+    children: subheader
+  });
+}
+CardSubheader.propTypes = {
+  subheader: PropTypes.string,
+  component: PropTypes.string
+};
+export default CardSubheader;

package/dist/Cards/CardElements/CardSubheader/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "CardSubheader",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./CardSubheader.js"
+}

package/dist/Cards/CardElements/CardTitle/CardTitle.js

@@ -5,17 +5,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const StyledCardTitle = styled(Typography)(({
   theme
 }) => ({
-  fontSize: "1.125rem",
   fontWeight: "600",
   marginTop: theme.spacing(2)
 }));
 function CardTitle({
   title = "",
-  component = "h3"
+  component = "h3",
+  compact = false
 }) {
   return /*#__PURE__*/_jsx(StyledCardTitle, {
-    variant: "h6",
+    variant: compact ? "subtitle2" : "subtitle1",
     component: component,
+    compact: compact,
     noWrap: true,
     "aria-label": title,
     children: title
@@ -23,6 +24,7 @@ function CardTitle({
 }
 CardTitle.propTypes = {
   title: PropTypes.string.isRequired,
-  component: PropTypes.string
+  component: PropTypes.string,
+  compact: PropTypes.bool
 };
 export default CardTitle;

package/dist/Cards/CardElements/index.js

@@ -1,16 +1,25 @@
 import { Box, Typography, Card, CardHeader as MuiCardHeader, Avatar, CardContent as MuiCardContent } from "@mui/material";
 import { styled } from "@mui/system";
 import CardTitle from "./CardTitle/CardTitle";
+import CardSubheader from "./CardSubheader/CardSubheader";
 import CardVisibility from "./CardVisibility/CardVisibility";
 import NualangVerifiedIcon from "../../Misc/NualangVerifiedIcon/NualangVerifiedIcon";
 import MedalSelector from "../../Misc/MedalSelector/MedalSelector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CardContainer = styled(Card)(({
-  theme
+const CardContainer = styled(Card, {
+  shouldForwardProp: prop => prop !== "compact"
+})(({
+  theme,
+  compact
 }) => ({
   textAlign: "left",
   maxWidth: 600,
-  minWidth: 320,
+  ...(compact && {
+    width: "100%"
+  }),
+  ...(!compact && {
+    minWidth: 320
+  }),
   display: "flex",
   flexDirection: "column",
   borderRadius: theme.spacing(2),
@@ -109,7 +118,10 @@ const CardInfoSection = styled(Box)(({
     marginBottom: 0
   },
   marginBottom: theme.spacing(2),
-  color: theme.palette.text.secondary
+  color: theme.palette.text.secondary,
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap"
 }));
 const CardInfoSectionItem = styled(Typography)(() => ({
   display: "flex",
@@ -166,4 +178,4 @@ const classes = {
     }
   }
 };
-export { classes, CardContainer, CardTop, CardAvatar, CardHeader, CardTitle, CardContent, CardInfoSection, CardInfoSectionItem, CardDescription, CardMenuIcon, CardVisibility, LoadingCardContainer };
+export { classes, CardContainer, CardTop, CardAvatar, CardHeader, CardTitle, CardSubheader, CardContent, CardInfoSection, CardInfoSectionItem, CardDescription, CardMenuIcon, CardVisibility, LoadingCardContainer };

package/dist/Cards/Classroom/Classroom.js

@@ -15,7 +15,7 @@ import { capitalize } from "../../utils/index";
 import PlaceholderImages from "../../utils/placeholder-images/index";
 import ProgressiveCardMedia from "../../Misc/ProgressiveCardMedia/ProgressiveCardMedia";
 import useClassroomState from "../../hooks/useClassroomState";
-import { classes, CardContainer, CardAvatar, CardHeader, CardTitle, CardInfoSection, CardDescription, CardTop, CardContent, CardMenuIcon, CardVisibility } from "../CardElements";
+import { classes, CardContainer, CardAvatar, CardHeader, CardTitle, CardSubheader, CardInfoSection, CardDescription, CardTop, CardContent, CardMenuIcon, CardVisibility } from "../CardElements";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function OverflowMenu({
   t,
@@ -67,12 +67,20 @@ function OverflowMenu({
     })]
   });
 }
-function ClassroomLoading() {
+function ClassroomLoading({
+  compact = false
+}) {
   return /*#__PURE__*/_jsxs(CardContainer, {
+    compact: compact,
     children: [/*#__PURE__*/_jsx(CardTop, {
       children: /*#__PURE__*/_jsx(Skeleton, {
         variant: "rectangular",
-        sx: classes.media
+        sx: {
+          ...classes.media,
+          ...(compact ? {
+            paddingTop: "40%"
+          } : {})
+        }
       })
     }), /*#__PURE__*/_jsx(CardHeader, {
       action: /*#__PURE__*/_jsx(IconButton, {
@@ -91,8 +99,6 @@ function ClassroomLoading() {
       })
     }), /*#__PURE__*/_jsxs(CardContent, {
       children: [/*#__PURE__*/_jsxs(CardInfoSection, {
-        display: "flex",
-        alignItems: "center",
         children: [/*#__PURE__*/_jsx(Skeleton, {
           height: 12,
           width: "20%"
@@ -129,7 +135,8 @@ function ClassroomCard({
   handleViewUserProfile,
   disableRaised,
   cardTitleComponent = "h3",
-  featureFlags
+  featureFlags,
+  compact = false
 }) {
   const [placeholderRef, visible] = useInView({
     rootMargin: "320px",
@@ -196,14 +203,21 @@ function ClassroomCard({
   const memberCount = membersQuery.isSuccess ? (membersQuery.data.Items || []).length : 0;
   const isInviteFeatureDisabled = classroomId && classroomId.toLowerCase().includes("wayside");
   return /*#__PURE__*/_jsxs(CardContainer, {
+    compact: compact,
     sx: disableRaised ? {} : classes.hover,
     raised: disableRaised ? false : anchorEl,
+    "data-cy": "classroom-card",
     children: [/*#__PURE__*/_jsxs(CardTop, {
       children: [/*#__PURE__*/_jsxs(CardActionArea, {
         onClick: handleClickImage,
         role: "link",
         children: [/*#__PURE__*/_jsx(ProgressiveCardMedia, {
-          sx: classes.media,
+          sx: {
+            ...classes.media,
+            ...(compact ? {
+              paddingTop: "40%"
+            } : {})
+          },
           highQualitySrc: visible || !pictureXs ? cardPicture || picture || PlaceholderImages.classroom : null,
           lowQualitySrc: pictureXs,
           title: classroomName,
@@ -216,7 +230,11 @@ function ClassroomCard({
       }), userImage ? /*#__PURE__*/_jsx(CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd"
+          color: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
+          ...(compact ? {
+            width: 44,
+            height: 44
+          } : {})
         }),
         "aria-label": `${t("go_to")} ${createdByName || `${classroomName} ${t("creator")}`} ${t("profile")}`,
         title: createdByName || `${classroomName} creator`,
@@ -236,7 +254,11 @@ function ClassroomCard({
       }) : /*#__PURE__*/_jsx(CardAvatar, {
         sx: theme => ({
           backgroundColor: theme.palette.mode === "dark" ? "#ffffff" : "#bdbdbd",
-          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white"
+          color: theme.palette.mode === "dark" ? theme.palette.background.default : "white",
+          ...(compact ? {
+            width: 44,
+            height: 44
+          } : {})
         }),
         "aria-label": `${t("go_to")} ${createdByName || `${classroomName} ${t("creator")}`} ${t("profile")}`,
         title: createdByName || `${classroomName} creator`,
@@ -271,18 +293,20 @@ function ClassroomCard({
       }),
       title: /*#__PURE__*/_jsx(CardTitle, {
         title: classroomName,
-        component: cardTitleComponent
+        component: cardTitleComponent,
+        compact: compact
       }),
-      subheader: t("learn_for_speakers_of", {
-        learnLang: capitalize(t(learnLang)),
-        forLang: capitalize(t(forLang))
+      subheader: /*#__PURE__*/_jsx(CardSubheader, {
+        subheader: t("learn_for_speakers_of", {
+          learnLang: capitalize(t(learnLang)),
+          forLang: capitalize(t(forLang))
+        }),
+        compact: compact
       })
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(CardContent, {
       children: [/*#__PURE__*/_jsxs(CardInfoSection, {
-        display: "flex",
-        alignItems: "center",
         children: [membersQuery.isLoading ? /*#__PURE__*/_jsxs(Typography, {
-          variant: "body2",
+          variant: "caption",
           sx: isCreator ? classes.cursorPointer : null,
           onClick: isCreator ? handleClickOpenMembers : null,
           children: [/*#__PURE__*/_jsx(CircularProgress, {
@@ -290,7 +314,7 @@ function ClassroomCard({
             color: "inherit"
           }), " ", memberCount === 1 ? t("member") : t("members")]
         }) : /*#__PURE__*/_jsxs(Typography, {
-          variant: "body2",
+          variant: "caption",
           sx: isCreator ? classes.cursorPointer : null,
           onClick: isCreator ? handleClickOpenMembers : null,
           children: [memberCount, " ", memberCount === 1 ? t("member") : t("members")]
@@ -300,12 +324,21 @@ function ClassroomCard({
           }
         })]
       }), /*#__PURE__*/_jsx(CardDescription, {
-        variant: "body1",
+        variant: compact ? "caption" : "body2",
         color: "textSecondary",
         component: "p",
+        sx: compact ? {
+          height: "auto",
+          lineHeight: 1.4,
+          display: "-webkit-box",
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+          marginBottom: 1
+        } : {},
         children: description
       })]
-    }), /*#__PURE__*/_jsxs(CardActions, {
+    }), !compact && /*#__PURE__*/_jsxs(CardActions, {
       children: [isCreator && /*#__PURE__*/_jsx(Button, {
         onClick: viewClassroom,
         color: "primary",
@@ -355,7 +388,9 @@ function ClassroomCard({
 }
 function Classroom(props) {
   if (!props.classroom) {
-    return /*#__PURE__*/_jsx(ClassroomLoading, {});
+    return /*#__PURE__*/_jsx(ClassroomLoading, {
+      compact: props.compact
+    });
   }
   return /*#__PURE__*/_jsx(ClassroomCard, {
     ...props