@learningpool/ui 1.3.0 → 1.4.0-beta.3

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+/// <reference types="react-addons-linked-state-mixin" />
+import { Theme } from '@mui/material';
+import { CSSObject } from '@mui/material/styles';
+export declare const DRAWER_WIDTH: {
+    Collapsed: number;
+    Expanded: number;
+};
+export declare const paperStyles: (theme: Theme) => CSSObject;
+export declare const openedMixin: (theme: Theme) => CSSObject;
+export declare const closedMixin: (theme: Theme) => CSSObject;
+export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListItem: import("@emotion/styled").StyledComponent<{
+    button?: false | undefined;
+} & import("@mui/material").ListItemBaseProps & {
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
+    } | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DrawerToggleHitboxContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    children?: import("react").ReactNode;
+}, {}, {}>;
+export declare const ListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -0,0 +1,146 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemIcon as SSListItemIcon, IconButton } from '../../../index';
+import { styled } from '@mui/material/styles';
+export var DRAWER_WIDTH = {
+    Collapsed: 60,
+    Expanded: 250
+};
+export var paperStyles = function (theme) { return ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.primary.main
+        : theme.palette.background.paper,
+    border: 0,
+    color: theme.palette.mode === 'dark'
+        ? theme.palette.primary.contrastText
+        : theme.palette.getContrastText(theme.palette.background.paper),
+    boxShadow: 'none'
+}); };
+export var openedMixin = function (theme) { return ({
+    width: DRAWER_WIDTH.Expanded,
+    transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+    overflowX: 'hidden',
+    boxShadow: 'none'
+}); };
+export var closedMixin = function (theme) {
+    var _a;
+    return (_a = {
+            transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+            width: "calc(".concat(theme.spacing(7), " + 1px)")
+        },
+        _a[theme.breakpoints.up('sm')] = {
+            width: "calc(".concat(theme.spacing(8), " + 1px)")
+        },
+        _a.overflowX = 'hidden',
+        _a.boxShadow = theme.shadows[1],
+        _a);
+};
+export var DrawerHeader = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (__assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: "".concat(theme.spacing(1), " 10px 0") }, theme.mixins.toolbar), (_b = { backgroundColor: theme.palette.mode === 'dark'
+                ? theme.palette.primary.main
+                : theme.palette.background.paper, minHeight: '56px !important' }, _b[theme.breakpoints.up('sm')] = {
+        minHeight: '64px !important'
+    }, _b)));
+});
+export var ListItem = styled(SSListItem)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.primary.contrastText
+            : theme.palette.getContrastText(theme.palette.background.paper)
+        // paddingLeft: theme.spacing(2),
+        // paddingRight: theme.spacing(2),
+        // [theme.breakpoints.up('sm')]: {
+        //   paddingLeft: theme.spacing(2.5),
+        //   paddingRight: theme.spacing(2.5)
+        // }
+    });
+});
+export var DrawerToggle = styled(IconButton)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            width: '44px',
+            height: '44px',
+            position: 'fixed',
+            zIndex: theme.zIndex.drawer + 1,
+            background: 'transparent',
+            paddingLeft: theme.spacing(2),
+            paddingRight: theme.spacing(2),
+            top: '80.5px'
+        },
+        _b[theme.breakpoints.up('sm')] = {
+            paddingLeft: theme.spacing(2.5),
+            paddingRight: theme.spacing(2.5),
+            top: '88.5px'
+        },
+        _b.transition = 'left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+        _b);
+});
+export var DrawerToggleHitboxContent = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.primary.main
+            : theme.palette.background.paper,
+        borderRadius: '50%',
+        boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
+        height: '1.75rem',
+        padding: theme.spacing(0.5),
+        width: '1.75rem'
+    });
+});
+export var ListItemButton = styled(SSListItemButton)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            alignItems: 'center',
+            color: theme.palette.mode === 'dark'
+                ? theme.palette.primary.contrastText
+                : theme.palette.getContrastText(theme.palette.background.paper),
+            display: 'flex',
+            textTransform: 'none',
+            textDecoration: 'none',
+            padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2))
+        },
+        _b[theme.breakpoints.up('sm')] = {
+            paddingLeft: theme.spacing(2.5),
+            paddingRight: theme.spacing(2.5)
+        },
+        _b.width = '100%',
+        _b);
+});
+export var ListItemAvatar = styled(ListItemButton)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        minHeight: 48,
+        '& .MuiListItemIcon-root': {
+            justifyContent: 'center',
+            minWidth: 0,
+            marginLeft: '-4px'
+        },
+        '& .MuiAvatar-root': {
+            height: 32,
+            width: 32
+        }
+    });
+});
+export var ListItemIcon = styled(SSListItemIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.primary.contrastText
+            : theme.palette.getContrastText(theme.palette.background.paper)
+    });
+});

package/components/pages/ErrorPage/ErrorPage.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ErrorPageProps {
+    errorCode: string;
+    errorTitle: string;
+    errorMessage: string;
+}
+export default function ErrorPage(props: ErrorPageProps): React.ReactElement;
+export {};

package/components/pages/ErrorPage/ErrorPage.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LearningPoolLogo } from '../../../assets/Images';
+import CssBaseline from '@mui/material/CssBaseline';
+import Typography from '@mui/material/Typography';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { StyledContainer, StyledBox, StyledLogoBox } from './ErrorPageStyles';
+export default function ErrorPage(props) {
+    var errorCode = props.errorCode, errorTitle = props.errorTitle, errorMessage = props.errorMessage;
+    var theme = createTheme();
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(StyledContainer, __assign({ component: 'main' }, { children: [_jsx(CssBaseline, {}), _jsxs(StyledBox, { children: [_jsxs(Typography, __assign({ component: 'h1', variant: 'h4', sx: {
+                                mb: 2
+                            } }, { children: [errorCode ? (_jsxs("span", { children: [errorCode, " | "] })) : '', _jsx("span", { children: errorTitle })] })), _jsx(Typography, __assign({ variant: 'body1', sx: {
+                                color: 'text.secondary',
+                                mb: 3
+                            } }, { children: errorMessage }))] }), _jsx(StyledLogoBox, { children: _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '200px', height: '45px' } }) })] })) })));
+}

package/components/pages/ErrorPage/ErrorPageStyles.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+/// <reference types="react-addons-linked-state-mixin" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material/Container").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material/styles").Breakpoint | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "fixed" | "maxWidth" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledLogoBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/pages/ErrorPage/ErrorPageStyles.js

@@ -0,0 +1,32 @@
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import { styled } from '@mui/material/styles';
+export var StyledContainer = styled(Container)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100vh',
+    textAlign: 'center'
+}); });
+export var StyledBox = styled(Box)(function () { return ({
+    alignItems: 'center',
+    display: 'flex',
+    flex: '1',
+    flexDirection: 'column',
+    height: '100%',
+    justifyContent: 'center',
+    overflow: 'hidden'
+}); });
+export var StyledLogoBox = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            alignSelf: 'center',
+            marginRight: 0,
+            marginBottom: theme.spacing(5)
+        },
+        _b[theme.breakpoints.up('md')] = {
+            alignSelf: 'flex-end',
+            marginRight: theme.spacing(5)
+        },
+        _b);
+});

package/components/pages/SideInSide/SideInSide.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function SideInSide(props: any): React.ReactElement;

package/components/pages/SideInSide/SideInSide.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../index';
+import CssBaseline from '@mui/material/CssBaseline';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { SideInSideStyles } from './SideInSideStyles';
+import { LearningPoolLogo, StreamSuiteLogo } from '../../../assets/Images';
+import { Link } from '@mui/material';
+function Copyright(props) {
+    return (_jsxs(Typography, __assign({ variant: "body2", color: "text.secondary", align: "center" }, props, { children: ['Copyright © ', _jsx(Link, __assign({ color: "inherit", href: "https://learningpool.com/" }, { children: "Learning Pool" })), ' ', new Date().getFullYear(), '.'] })));
+}
+var theme = createTheme();
+export default function SideInSide(props) {
+    var classes = SideInSideStyles(props).classes;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, component: "main", className: classes.root, style: props === null || props === void 0 ? void 0 : props.style }, { children: [_jsx(CssBaseline, {}), _jsx(Grid, __assign({ item: true, xs: false, sm: false, md: 6, lg: 7, xl: 8, className: classes.pageBackgroundContainer }, { children: _jsx(Box, __assign({ className: classes.pageBackgroundLogoContainer }, { children: (props === null || props === void 0 ? void 0 : props.pageBackgroundLogo)
+                            ? (_jsx("img", { src: "".concat(String(props.pageBackgroundLogo)), alt: "".concat(String(props.pageBackgroundLogoAlt)), className: classes.pageBackgroundLogo }))
+                            : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '200px', width: '200px' } }) })) })), _jsx(Grid, __assign({ item: true, xs: 12, sm: 12, md: 6, lg: 5, xl: 4, component: Paper, elevation: 6, square: true }, { children: _jsxs(Box, __assign({ className: classes.contentPanel }, { children: [_jsx(Box, __assign({ className: classes.contentPanelImageContainer }, { children: (props === null || props === void 0 ? void 0 : props.formLogo)
+                                    ? (_jsx("img", { src: "".concat(String(props.formLogo)), alt: "".concat(String(props.formLogoAlt)), className: classes.contentPanelImage }))
+                                    : _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '250px', height: '60px' } }) })), _jsx(Typography, __assign({ component: "h1", variant: "h6" }, { children: props.welcomeMessage })), (props === null || props === void 0 ? void 0 : props.children) ? props.children : null, (props === null || props === void 0 ? void 0 : props.isStreamHomeEnabled)
+                                ? (_jsxs(_Fragment, { children: [_jsx(Divider, __assign({ sx: { mt: 1 } }, { children: "Or" })), _jsx(Button, __assign({ type: "submit", onClick: props === null || props === void 0 ? void 0 : props.handleStreamHomeLogin, fullWidth: true, className: classes.streamHomeButton, startIcon: (props === null || props === void 0 ? void 0 : props.startIcon)
+                                                ? props.startIcon
+                                                : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '25px', width: '25px' } }) }, { children: "Log in with Stream Home" }))] }))
+                                : null, _jsx(Box, __assign({ className: classes.footerContent }, { children: (props === null || props === void 0 ? void 0 : props.footerContent) ? props.footerContent : _jsx(Copyright, {}) }))] })) }))] })) })));
+}

package/components/pages/SideInSide/SideInSideStyles.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@mui/material/styles';
+export declare const SideInSideStyles: (params: void, styleOverrides?: {
+    props: {
+        classes?: Record<string, string> | undefined;
+    } & Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"root" | "pageBackgroundContainer" | "pageBackgroundLogoContainer" | "pageBackgroundLogo" | "contentPanel" | "contentPanelImageContainer" | "contentPanelImage" | "submitButton" | "streamHomeButton" | "footerContent", string>;
+    theme: Theme;
+    css: import("tss-react/types").Css;
+    cx: import("tss-react/types").Cx;
+};

package/components/pages/SideInSide/SideInSideStyles.js

@@ -0,0 +1,60 @@
+import { makeStyles } from 'tss-react/mui';
+export var SideInSideStyles = makeStyles()(function (theme, props) { return ({
+    root: {
+        height: '100vh',
+        width: '100%'
+    },
+    pageBackgroundContainer: {
+        backgroundImage: (props === null || props === void 0 ? void 0 : props.pageBackgroundImage)
+            ? "url(".concat(String(props.pageBackgroundImage), ")")
+            : 'url(https://source.unsplash.com/YWIOwHvRBvU)',
+        backgroundRepeat: 'no-repeat',
+        backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        flex: 1
+    },
+    pageBackgroundLogoContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        justifyContent: 'center'
+    },
+    pageBackgroundLogo: {
+        maxWidth: '250px'
+    },
+    contentPanel: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        marginLeft: theme.spacing(6),
+        marginRight: theme.spacing(6),
+        paddingBottom: theme.spacing(2),
+        paddingTop: theme.spacing(8)
+    },
+    contentPanelImageContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: theme.spacing(3),
+        marginTop: theme.spacing(1)
+    },
+    contentPanelImage: {
+        maxWidth: '400px',
+        width: '66%'
+    },
+    submitButton: {
+        marginBottom: theme.spacing(2),
+        marginTop: theme.spacing(3)
+    },
+    streamHomeButton: {
+        marginBottom: "".concat(theme.spacing(5), " !important"),
+        marginTop: "".concat(theme.spacing(3), " !important")
+    },
+    footerContent: {
+        marginTop: 'auto',
+        width: '100%'
+    }
+}); });

package/index.d.ts

@@ -1,9 +1,17 @@
 export { default as Avatar } from './components/datadisplay/Avatar/Avatar';
 export { default as Button } from './components/atoms/Button/Button';
+export { default as IconButton } from './components/atoms/IconButton/IconButton';
+export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
+export { default as TextField } from './components/atoms/TextField/TextField';
 export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
+export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
+export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
+export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
 export { default as AvatarGroup } from '@mui/material/AvatarGroup';
 export { default as Backdrop } from '@mui/material/Backdrop';
+export { default as CircularProgress } from '@mui/material/CircularProgress';
+export { default as LinearProgress } from '@mui/material/LinearProgress';
 export { default as ListItem } from '@mui/material/ListItem';
 export { default as ListItemAvatar } from '@mui/material/ListItemAvatar';
 export { default as ListItemButton } from '@mui/material/ListItemButton';
@@ -11,3 +19,4 @@ export { default as ListItemIcon } from '@mui/material/ListItemIcon';
 export { default as ListItemSecondaryAction } from '@mui/material/ListItemSecondaryAction';
 export { default as ListItemText } from '@mui/material/ListItemText';
 export { default as ListSubheader } from '@mui/material/ListSubheader';
+export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/index.js

@@ -1,11 +1,19 @@
 // Learning Pool intercepted
 export { default as Avatar } from './components/datadisplay/Avatar/Avatar';
 export { default as Button } from './components/atoms/Button/Button';
+export { default as IconButton } from './components/atoms/IconButton/IconButton';
+export { default as Checkbox } from './components/atoms/Checkbox/Checkbox';
+export { default as TextField } from './components/atoms/TextField/TextField';
 export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
+export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
+export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
+export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
 // Straight through MUI
 export { default as AvatarGroup } from '@mui/material/AvatarGroup';
 export { default as Backdrop } from '@mui/material/Backdrop';
+export { default as CircularProgress } from '@mui/material/CircularProgress';
+export { default as LinearProgress } from '@mui/material/LinearProgress';
 export { default as ListItem } from '@mui/material/ListItem';
 export { default as ListItemAvatar } from '@mui/material/ListItemAvatar';
 export { default as ListItemButton } from '@mui/material/ListItemButton';
@@ -13,3 +21,5 @@ export { default as ListItemIcon } from '@mui/material/ListItemIcon';
 export { default as ListItemSecondaryAction } from '@mui/material/ListItemSecondaryAction';
 export { default as ListItemText } from '@mui/material/ListItemText';
 export { default as ListSubheader } from '@mui/material/ListSubheader';
+// Stream Suite components
+export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@learningpool/ui",
   "author": "Learning Pool",
+  "description": "UI library for use on modern Learning Pool projects, built on top of MUI.",
   "license": "MIT",
   "keywords": [
     "learning-pool",
@@ -8,15 +9,16 @@
     "components",
     "ui"
   ],
-  "version": "1.3.0",
+  "version": "1.4.0-beta.3",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.3.1",
+    "@learningpool/app-switcher": "^1.0.4",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -25,6 +27,7 @@
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "anysort": "^2.0.0",
+    "focus-trap-react": "^8.11.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.1",
@@ -36,14 +39,16 @@
     "analyze:build": "source-map-explorer 'build/static/js/*.js'",
     "analyze:module": "source-map-explorer 'dist/*.js'",
     "build": "build-storybook",
-    "build:module": "rm -rf dist && yarn run tsc",
+    "build:module": "rm -rf dist && tsc && npm run generate:package",
+    "generate:package": "node ./merge.js",
     "lint": "eslint --ext .tsx ./src",
     "lint:fix": "eslint --ext .tsx ./src --fix",
     "semantic-release": "ht2-release-public-circleci-lib-dist",
     "start": "start-storybook -p 6006",
-    "start:run-tests": "yarn test:generate-output && yarn start",
+    "start:run-tests": "npm run test:generate-output && npm run start",
     "test": "jest",
-    "test:update-snapshot": "jest --updateSnapshot",
+    "test:u": "jest --updateSnapshot && npm run lint:fix",
+    "test:update-snapshot": "test:u",
     "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
   },
   "browserslist": {
@@ -59,33 +64,33 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.8",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "7.16.7",
-    "@ht2-labs/semantic-release": "2.0.105",
-    "@storybook/addon-a11y": "6.4.20",
-    "@storybook/addon-actions": "6.5.0-alpha.57",
-    "@storybook/addon-essentials": "6.5.0-alpha.57",
-    "@storybook/addon-jest": "6.4.20",
-    "@storybook/addon-links": "6.5.0-alpha.57",
-    "@storybook/addons": "6.4.20",
-    "@storybook/builder-webpack5": "6.5.0-alpha.57",
-    "@storybook/manager-webpack5": "6.5.0-alpha.57",
-    "@storybook/node-logger": "6.5.0-alpha.57",
+    "@babel/cli": "7.17.10",
+    "@babel/core": "7.18.5",
+    "@babel/preset-env": "7.18.2",
+    "@babel/preset-react": "7.17.12",
+    "@babel/preset-typescript": "7.17.12",
+    "@ht2-labs/semantic-release": "3.0.0",
+    "@storybook/addon-a11y": "6.5.6",
+    "@storybook/addon-actions": "6.5.6",
+    "@storybook/addon-essentials": "6.5.6",
+    "@storybook/addon-jest": "6.5.6",
+    "@storybook/addon-links": "6.5.6",
+    "@storybook/addons": "6.5.6",
+    "@storybook/builder-webpack5": "6.5.6",
+    "@storybook/manager-webpack5": "6.5.6",
+    "@storybook/node-logger": "6.5.6",
     "@storybook/preset-create-react-app": "4.1.1",
-    "@storybook/react": "6.5.0-alpha.57",
-    "@storybook/theming": "6.4.20",
+    "@storybook/react": "6.5.6",
+    "@storybook/theming": "6.5.6",
     "babel-preset-minify": "0.5.2",
     "eslint-config-standard": "16.0.3",
     "eslint-config-standard-with-typescript": "21.0.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-promise": "4.3.1",
     "source-map-explorer": "2.5.2",
     "source-map-loader": "3.0.1",
     "ts-node": "10.8.0",
-    "webpack": "5.71.0"
+    "webpack": "5.72.1"
   },
   "release": {
     "branches": [