@local-civics/mgmt-ui 0.1.102 → 0.1.104

package/dist/index.d.ts

@@ -23,6 +23,22 @@ interface NavbarProps {
 }
 declare function Navbar(props: NavbarProps): JSX.Element;
 
+/**
+ * GettingStartedProps
+ */
+type GettingStartedProps = {
+    opened: boolean;
+    loading: boolean;
+    videoURL: string;
+    onClose: () => void;
+};
+/**
+ * GettingStarted
+ * @param props
+ * @constructor
+ */
+declare const GettingStarted: (props: GettingStartedProps) => JSX.Element;
+
 /**
  * AccountItem
  */
@@ -667,4 +683,4 @@ type AppProps = {
  */
 declare const App: (props: AppProps) => JSX.Element;
 
-export { AccountItem, AdminProvider, AdminProviderProps, App, AppProps, Badge, BadgeClass, BadgeItem, BadgeProps, BadgeUserItem, Badges, BadgesProps, Class, ClassItem, ClassProps, Classes, ClassesProps, Dashboard, DashboardClass, DashboardProps, Home, HomeProps, Lesson, LessonClass, LessonItem, LessonProps, LessonUserItem, Lessons, LessonsProps, MemberItem, Navbar, NavbarProps, NewTrialRegistration, Organization, OrganizationProps, People, PeopleProps, StartAnonymousLesson, StartAnonymousLessonProps, Student, StudentProps, SwitchAccount, SwitchAccountProps, TrialHome, TrialHomeProps, TrialRegistration, TrialRegistrationProps, UserItem };
+export { AccountItem, AdminProvider, AdminProviderProps, App, AppProps, Badge, BadgeClass, BadgeItem, BadgeProps, BadgeUserItem, Badges, BadgesProps, Class, ClassItem, ClassProps, Classes, ClassesProps, Dashboard, DashboardClass, DashboardProps, GettingStarted, GettingStartedProps, Home, HomeProps, Lesson, LessonClass, LessonItem, LessonProps, LessonUserItem, Lessons, LessonsProps, MemberItem, Navbar, NavbarProps, NewTrialRegistration, Organization, OrganizationProps, People, PeopleProps, StartAnonymousLesson, StartAnonymousLessonProps, Student, StudentProps, SwitchAccount, SwitchAccountProps, TrialHome, TrialHomeProps, TrialRegistration, TrialRegistrationProps, UserItem };

package/dist/index.js

@@ -62,7 +62,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$p = core.createStyles((theme) => ({
+const useStyles$q = core.createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -73,7 +73,7 @@ const useStyles$p = core.createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$q();
   return /* @__PURE__ */ React__namespace.createElement(core.Group, __spreadValues$9({ className: classes.user }, others), /* @__PURE__ */ React__namespace.createElement(core.Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React__namespace.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -84,7 +84,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$o = core.createStyles((theme, _params, getRef) => {
+const useStyles$p = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -137,7 +137,7 @@ const useStyles$o = core.createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$o();
+  const { classes, theme, cx } = useStyles$p();
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = React.useState(initiallyOpened || hasActiveLinks || false);
@@ -201,7 +201,7 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$n = core.createStyles((theme, _params, getRef) => {
+const useStyles$o = core.createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -300,7 +300,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$n();
+  const { classes, cx } = useStyles$o();
   const [burgerOpen, setBurgerOpen] = React__namespace.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -343,6 +343,56 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React__namespace.createElement(icons.IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React__namespace.createElement("span", null, "Logout"))))));
 }
 
+const useStyles$n = core.createStyles((theme) => ({
+  inner: {
+    paddingTop: theme.spacing.xl,
+    paddingBottom: theme.spacing.xl * 4
+  },
+  content: {
+    maxWidth: 600,
+    marginRight: theme.spacing.xl,
+    [theme.fn.smallerThan("md")]: {
+      maxWidth: "100%",
+      marginRight: 0
+    }
+  },
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    fontSize: 44,
+    lineHeight: 1.2,
+    fontWeight: 900,
+    [theme.fn.smallerThan("xs")]: {
+      fontSize: 28
+    }
+  },
+  control: {
+    [theme.fn.smallerThan("xs")]: {
+      flex: 1
+    }
+  },
+  highlight: {
+    position: "relative",
+    backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+    borderRadius: theme.radius.sm,
+    padding: "4px 12px"
+  }
+}));
+const GettingStarted = (props) => {
+  const { classes } = useStyles$n();
+  return /* @__PURE__ */ React__namespace.createElement(
+    core.Modal,
+    {
+      centered: true,
+      fullScreen: true,
+      opened: props.opened,
+      onClose: () => props.onClose && props.onClose(),
+      size: "sm"
+    },
+    /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, props.loading && /* @__PURE__ */ React__namespace.createElement(core.Center, { style: { height: 400 } }, /* @__PURE__ */ React__namespace.createElement(core.Loader, null)), !props.loading && /* @__PURE__ */ React__namespace.createElement(core.Container, null, /* @__PURE__ */ React__namespace.createElement(core.Group, { position: "center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.inner }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.content }, /* @__PURE__ */ React__namespace.createElement(core.Button, { onClick: props.onClose, radius: "xl", size: "md", className: classes.control }, "Skip tour"), /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, "An experience purpose built for educators like you!"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", mt: "md" }, "Hello! We're excited that you chose try out a few of the tools that Local Civics can bring to your classroom. Watch this short video tour to get a sense of how to navigate around the platform."), /* @__PURE__ */ React__namespace.createElement("video", { style: { marginTop: "20px", marginBottom: "20px" }, width: "600", height: "350", controls: true }, /* @__PURE__ */ React__namespace.createElement("source", { src: props.videoURL, type: "video/mp4" }), "Your browser does not support the video tag."))))))
+  );
+};
+
 const useStyles$m = core.createStyles((theme) => ({
   title: {
     fontSize: 34,
@@ -2517,7 +2567,7 @@ const BadgeGrid = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(core.SimpleGrid, { cols: 4, breakpoints: [{ maxWidth: "sm", cols: 1 }, { maxWidth: "md", cols: 3 }] }, badges);
 };
 function TaskCard(props) {
-  return /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href, sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "md", weight: 500 }, props.title)), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: 5, mb: 25, h: 100, sx: { overflowY: "scroll" } }, props.description), /* @__PURE__ */ React__namespace.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(core.Card, { withBorder: true, radius: "md" }, /* @__PURE__ */ React__namespace.createElement(core.UnstyledButton, { component: reactRouterDom.Link, to: props.href, sx: { ":hover": { textDecoration: "underline" } } }, /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "md", weight: 500 }, props.title)), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed", mt: 5, mb: 25, h: 125, sx: { overflowY: "scroll" } }, props.description), /* @__PURE__ */ React__namespace.createElement(
     core.Button,
     {
       variant: "gradient",
@@ -2531,6 +2581,7 @@ function TaskCard(props) {
 
 const useStyles$3 = core.createStyles((theme) => ({
   action: {
+    backgroundColor: "inherit",
     ":hover": {
       textDecoration: "underline"
     }
@@ -2573,7 +2624,7 @@ const TrialHome = (props) => {
       description: `Welcome to your Local Civics Trial Account${props.firstName ? ", " + props.firstName : ""}!`,
       image: "https://cdn.localcivics.io/hub/landing.jpg"
     }
-  )), /* @__PURE__ */ React__namespace.createElement(core.Title, { mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected,", /* @__PURE__ */ React__namespace.createElement("br", null), " check out these lessons to get started with your students!"), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
+  )), /* @__PURE__ */ React__namespace.createElement(core.Title, { maw: 500, mb: 20, mt: 20, className: classes.title }, "Based on the tags you selected, check out these lessons to get started with your students!"), /* @__PURE__ */ React__namespace.createElement(BadgeGrid, { onAssign: props.onAssign, badges: props.badges })));
 };
 
 var __defProp$2 = Object.defineProperty;
@@ -3085,6 +3136,7 @@ exports.Badges = Badges;
 exports.Class = Class;
 exports.Classes = Classes;
 exports.Dashboard = Dashboard;
+exports.GettingStarted = GettingStarted;
 exports.Home = Home;
 exports.Lesson = Lesson;
 exports.Lessons = Lessons;