@local-civics/mgmt-ui 0.1.102 → 0.1.103

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, { 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,
@@ -3085,6 +3135,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;