@local-civics/mgmt-ui 0.1.87 → 0.1.90

package/dist/index.d.ts

@@ -449,6 +449,9 @@ type LessonProps = {
     questions: Item$2[];
     trial?: boolean;
     lessonsCompleted?: number;
+    contributors?: {
+        name: string;
+    }[];
     onBackClick: () => void;
     onClassChange: (classId: string) => void;
     onCopyLinkClick: () => void;
@@ -565,7 +568,7 @@ type StartAnonymousLessonProps = {
     description: string;
     educatorName: string;
     studentName?: string;
-    onStart: () => void;
+    onStart: (name: string) => void;
 };
 /**
  * StartAnonymousLesson
@@ -586,9 +589,6 @@ type TaskCardProps = {
     lessonsCompleted: number;
     lessonsTotal: number;
     href: string;
-    users: {
-        name: string;
-    }[];
 };
 
 /**

package/dist/index.js

@@ -10,8 +10,8 @@ var dropzone = require('@mantine/dropzone');
 var form = require('@mantine/form');
 var papa = require('papaparse');
 var modals = require('@mantine/modals');
-var reactCharts = require('react-charts');
 var AvatarInit = require('avatar-initials');
+var reactCharts = require('react-charts');
 var hooks = require('@mantine/hooks');
 
 function _interopNamespaceDefault(e) {
@@ -403,10 +403,7 @@ const useStyles$k = core.createStyles((theme) => ({
     display: "flex",
     backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
     padding: theme.spacing.xl * 1.5,
-    borderRadius: theme.radius.md,
-    [theme.fn.smallerThan("sm")]: {
-      flexDirection: "column"
-    }
+    borderRadius: theme.radius.md
   },
   title: {
     color: theme.white,
@@ -444,7 +441,7 @@ const useStyles$k = core.createStyles((theme) => ({
     }
   }
 }));
-const StatsGroup = ({ data }) => {
+const StatsGroup = ({ data, footer }) => {
   const { classes } = useStyles$k();
   const stats = data.map((stat) => {
     const value = (() => {
@@ -455,7 +452,7 @@ const StatsGroup = ({ data }) => {
     })();
     return /* @__PURE__ */ React__namespace.createElement("div", { key: stat.title, className: classes.stat }, /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.count }, value.toLocaleString(), stat.unit), /* @__PURE__ */ React__namespace.createElement(core.Text, { className: classes.title }, stat.title));
   });
-  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.root }, stats);
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.root }, stats, footer);
 };
 
 const Tabs = (props) => {
@@ -1891,6 +1888,35 @@ const Lesson = (props) => {
   const [tab, setTab] = React.useState("question");
   const numberOfStudents = props.students.length;
   const percentageOfLessonsCompleted = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
+  const contributors = props.contributors || [];
+  const avatars = contributors.slice(0, 5).map((u, i) => {
+    const fullName = u.name;
+    let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
+    const src = AvatarInit.initialAvatar({
+      background: "#1c7ed6",
+      color: "#fff",
+      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+      fontSize: 10,
+      fontWeight: 250,
+      size: 30,
+      initials
+    });
+    return /* @__PURE__ */ React__namespace.createElement(core.Avatar, { key: i, src, radius: "xl" });
+  });
+  const remainingUsers = contributors.slice(5).length;
+  if (remainingUsers) {
+    const initials = "+" + compact(remainingUsers);
+    const src = AvatarInit.initialAvatar({
+      background: "#1c7ed6",
+      color: "#fff",
+      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
+      fontSize: 10,
+      fontWeight: 250,
+      size: 30,
+      initials
+    });
+    avatars.push(/* @__PURE__ */ React__namespace.createElement(core.Avatar, { src, radius: "xl" }));
+  }
   return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { onClick: props.onBackClick }, /* @__PURE__ */ React__namespace.createElement(
     core.Badge,
     {
@@ -1906,13 +1932,18 @@ const Lesson = (props) => {
       onCopyLinkClick: props.onCopyLinkClick,
       onExportDataClick: props.onExportDataClick
     }
-  ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
+  ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(
+    StatsGroup,
     {
-      title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
-      value: props.trial ? props.lessonsCompleted || 0 : percentageOfLessonsCompleted,
-      unit: props.trial ? "" : "%"
+      data: [
+        {
+          title: props.trial ? "# OF SUBMISSIONS" : "LESSON COMPLETION",
+          value: props.trial ? props.lessonsCompleted || 0 : percentageOfLessonsCompleted,
+          unit: props.trial ? "" : "%"
+        }
+      ]
     }
-  ] }), !props.trial && /* @__PURE__ */ React__namespace.createElement(
+  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar.Group, { spacing: "sm" }, avatars)), !props.trial && /* @__PURE__ */ React__namespace.createElement(
     core.Select,
     {
       clearable: true,
@@ -2476,7 +2507,7 @@ const StartAnonymousLesson = (props) => {
       onChange: (e) => setName(e.target.value),
       classNames: { input: classes.input, label: classes.inputLabel }
     }
-  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Button, { disabled: !name && !props.studentName, onClick: props.onStart, className: classes.control }, !props.studentName ? "Start lesson" : "Continue lesson"))))));
+  ), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "right", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Button, { disabled: !name && !props.studentName, onClick: () => props.onStart(name), className: classes.control }, !props.studentName ? "Start lesson" : "Continue lesson"))))));
 };
 
 var __defProp$3 = Object.defineProperty;
@@ -2500,21 +2531,6 @@ const BadgeGrid = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 3, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, badges);
 };
 function TaskCard(props) {
-  const avatars = props.users.slice(0, 3).map((u, i) => {
-    const fullName = u.name;
-    let initials = fullName.split(/[ -]/).map((n) => n.charAt(0)).join("");
-    const src = AvatarInit.initialAvatar({
-      background: "#f4f6f7",
-      color: "#888888",
-      fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
-      fontSize: 10,
-      fontWeight: 250,
-      size: 30,
-      initials
-    });
-    return /* @__PURE__ */ React__namespace.createElement(core.Avatar, { key: i, src, radius: "xl" });
-  });
-  const remainingUsers = props.users.slice(3).length;
   const isComplete = props.lessonsCompleted >= props.lessonsTotal;
   return /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart" }, /* @__PURE__ */ React__namespace.createElement(core.ThemeIcon, { size: "lg", variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, /* @__PURE__ */ React__namespace.createElement(icons.IconBadge, { size: 20 })), !!props.lessonsTotal && isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "gradient", gradient: { from: "indigo", to: "cyan" } }, "Complete"), !!props.lessonsTotal && !isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Incomplete")), /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href, mt: "md", sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "lg", weight: 500 }, props.title)), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: 5 }, props.description), !!props.lessonsCompleted && /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "sm", mt: "md" }, "Lessons completed:", " ", /* @__PURE__ */ React__namespace.createElement(
     core.Text,
@@ -2524,7 +2540,7 @@ function TaskCard(props) {
       sx: (theme) => ({ color: theme.colorScheme === "dark" ? theme.white : theme.black })
     },
     props.lessonsCompleted
-  )), !!props.lessonsTotal && /* @__PURE__ */ React__namespace.createElement(core.Progress, { value: props.lessonsCompleted / props.lessonsTotal * 100, mt: 5 }), /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "apart", mt: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Avatar.Group, { spacing: "sm" }, avatars, !!remainingUsers && /* @__PURE__ */ React__namespace.createElement(core.Avatar, { radius: "xl" }, "+", remainingUsers))));
+  )), !!props.lessonsTotal && /* @__PURE__ */ React__namespace.createElement(core.Progress, { value: props.lessonsCompleted / props.lessonsTotal * 100, mt: 5 }));
 }
 
 const TrialHome = (props) => {
@@ -2589,6 +2605,8 @@ const useStyles$2 = core.createStyles((theme, { checked }) => ({
     border: `1px solid ${checked ? theme.fn.variant({ variant: "outline", color: theme.primaryColor }).border : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]}`,
     borderRadius: theme.radius.sm,
     padding: theme.spacing.md,
+    paddingTop: theme.spacing.sm,
+    paddingBottom: theme.spacing.sm,
     backgroundColor: checked ? theme.fn.variant({ variant: "light", color: theme.primaryColor }).background : theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white
   },
   body: {
@@ -2748,7 +2766,7 @@ const TrialRegistration = (props) => {
   const [lastName, setLastName] = React__namespace.useState("");
   const [schoolName, setSchoolName] = React__namespace.useState("");
   const [interests, setInterests] = React__namespace.useState({});
-  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 1200, ml: "auto", mr: "auto", cols: 2, spacing: 50, breakpoints: [{ maxWidth: "md", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { maw: 1300, ml: "auto", mr: "auto", cols: 2, spacing: 50, breakpoints: [{ maxWidth: "md", cols: 1 }] }, /* @__PURE__ */ React__namespace.createElement(core.Group, { spacing: "sm" }, /* @__PURE__ */ React__namespace.createElement(
     core.Image,
     {
       height: 200,