@learningpool/ui 1.6.0-beta.12 → 1.6.0-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/components/landmarks/Header/Header.d.ts +26 -0
  2. package/components/landmarks/Header/Header.js +75 -0
  3. package/components/landmarks/Header/HeaderActionButtons.d.ts +3 -0
  4. package/components/landmarks/Header/HeaderActionButtons.js +66 -0
  5. package/components/landmarks/Header/HeaderStyles.d.ts +55 -0
  6. package/components/landmarks/Header/HeaderStyles.js +13 -0
  7. package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.d.ts +3 -3
  8. package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenuStyles.d.ts +1 -1
  9. package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.d.ts +1 -1
  10. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.d.ts +1 -1
  11. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.d.ts +1 -1
  12. package/index.d.ts +1 -0
  13. package/index.js +1 -0
  14. package/package.json +1 -1
  15. package/utils/constants.d.ts +1 -0
  16. package/utils/constants.js +3 -0
  17. package/utils/theme.d.ts +2 -2
  18. package/utils/theme.js +3 -3
package/components/landmarks/Header/Header.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ interface AdditionalButtonItemProps {
3
+ label: string;
4
+ onClick?: any;
5
+ icon?: React.ReactElement;
6
+ hide?: boolean;
7
+ }
8
+ interface BreadcrumbItemProps {
9
+ label: string;
10
+ href: string;
11
+ color?: string;
12
+ }
13
+ interface HeaderProps {
14
+ title: string;
15
+ titleComponent?: React.ElementType<any>;
16
+ maxCharactersPerLine?: number;
17
+ subtitle?: string;
18
+ callToAction?: any;
19
+ callToActionComponent?: 'button' | 'link' | string;
20
+ additionalButtons?: AdditionalButtonItemProps[];
21
+ isSticky?: boolean;
22
+ breadcrumbItems?: BreadcrumbItemProps[];
23
+ maxBreadcumbItems?: number;
24
+ }
25
+ declare const Header: (props: HeaderProps) => React.ReactElement;
26
+ export default Header;
package/components/landmarks/Header/Header.js ADDED
@@ -0,0 +1,75 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { useEffect } from 'react';
25
+ import Button from '@mui/material/Button';
26
+ import Link from '@mui/material/Link';
27
+ import Typography from '@mui/material/Typography';
28
+ import useMediaQuery from '@mui/material/useMediaQuery';
29
+ import useTheme from '@mui/material/styles/useTheme';
30
+ import HeaderActionButtons from './HeaderActionButtons';
31
+ import { StyledAdditionalButtonsContainer, StyledBreadcrumbs, StyledHeaderPrimary, StyledHeaderSecondary, StyledPaper } from './HeaderStyles';
32
+ import { DEFAULT_MAX_CHARACTERS_PER_LINE } from '../../../utils/constants';
33
+ var Header = function (props) {
34
+ var _a, _b;
35
+ var title = props.title, subtitle = props.subtitle, breadcrumbItems = props.breadcrumbItems, maxBreadcumbItems = props.maxBreadcumbItems, callToAction = props.callToAction, callToActionComponent = props.callToActionComponent, isSticky = props.isSticky, titleComponent = props.titleComponent, maxCharactersPerLine = props.maxCharactersPerLine, rest = __rest(props, ["title", "subtitle", "breadcrumbItems", "maxBreadcumbItems", "callToAction", "callToActionComponent", "isSticky", "titleComponent", "maxCharactersPerLine"]);
36
+ var additionalButtons = props.additionalButtons;
37
+ var theme = useTheme();
38
+ var isMediumAndUp = useMediaQuery(theme.breakpoints.up('md'));
39
+ useEffect(function () {
40
+ if (!callToAction) {
41
+ return;
42
+ }
43
+ callToAction.hide = isMediumAndUp;
44
+ // No additional buttons exist so CallToAction is the only item in the list
45
+ if (!additionalButtons || additionalButtons.length === 0) {
46
+ if (callToAction) {
47
+ additionalButtons = [];
48
+ additionalButtons.push(callToAction);
49
+ return;
50
+ }
51
+ }
52
+ // Additional buttons exist so add the CallToAction as the first item in the list
53
+ if (additionalButtons && additionalButtons.length > 0) {
54
+ var callToActionIndex = additionalButtons.indexOf(callToAction);
55
+ var hasCallToActionInArray = callToActionIndex !== -1;
56
+ if (!hasCallToActionInArray) {
57
+ // Add the CallToAction item to the top of the Menu
58
+ additionalButtons.splice(0, 0, callToAction);
59
+ }
60
+ if (hasCallToActionInArray) {
61
+ // Show or hide the CallToAction item based on 'isMediumAndUp'
62
+ additionalButtons[callToActionIndex].hide = callToAction.hide;
63
+ }
64
+ }
65
+ }, [props.additionalButtons, isMediumAndUp]);
66
+ return (_jsxs(StyledPaper, __assign({}, rest, { elevation: 0, className: "".concat(isSticky && 'is-sticky') }, { children: [_jsxs(StyledHeaderPrimary, { children: [breadcrumbItems && breadcrumbItems.length > 0 && (_jsx(StyledBreadcrumbs, __assign({ maxItems: maxBreadcumbItems !== null && maxBreadcumbItems !== void 0 ? maxBreadcumbItems : 2, "aria-label": 'breadcrumb', separator: theme.direction === 'ltr' ? '/' : '\\' }, { children: breadcrumbItems.map(function (breadcrumbItem) {
67
+ var _a;
68
+ return (_jsx(Link, __assign({ underline: 'hover', color: (_a = breadcrumbItem.color) !== null && _a !== void 0 ? _a : 'inherit', href: breadcrumbItem.href }, { children: breadcrumbItem.label })));
69
+ }) }))), _jsx(Typography, __assign({ component: titleComponent !== null && titleComponent !== void 0 ? titleComponent : 'h1',
70
+ // Good support for 'ch' https://caniuse.com/ch-unit
71
+ style: { maxWidth: "".concat(maxCharactersPerLine !== null && maxCharactersPerLine !== void 0 ? maxCharactersPerLine : DEFAULT_MAX_CHARACTERS_PER_LINE, "ch") } }, { children: title })), subtitle && (_jsx(Typography, __assign({ component: 'h2', variant: 'subtitle1', color: theme.palette.text.secondary, style: { maxWidth: "".concat(maxCharactersPerLine !== null && maxCharactersPerLine !== void 0 ? maxCharactersPerLine : DEFAULT_MAX_CHARACTERS_PER_LINE, "ch") } }, { children: subtitle })))] }), _jsxs(StyledHeaderSecondary, { children: [isMediumAndUp && callToAction && (callToActionComponent && callToActionComponent === 'link'
72
+ ? _jsx(Button, __assign({ href: '#', startIcon: (_a = callToAction.icon) !== null && _a !== void 0 ? _a : null }, { children: callToAction.label }))
73
+ : _jsx(Button, __assign({ startIcon: (_b = callToAction.icon) !== null && _b !== void 0 ? _b : null, variant: 'contained' }, { children: callToAction.label }))), additionalButtons && additionalButtons.length > 0 && (_jsx(StyledAdditionalButtonsContainer, { children: _jsx(HeaderActionButtons, { forceListView: true, options: additionalButtons }) }))] })] })));
74
+ };
75
+ export default Header;
package/components/landmarks/Header/HeaderActionButtons.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const HeaderActionButtons: (props: any) => JSX.Element | null;
3
+ export default HeaderActionButtons;
package/components/landmarks/Header/HeaderActionButtons.js ADDED
@@ -0,0 +1,66 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { useState } from 'react';
14
+ import Icon from '@mui/material/Icon';
15
+ import Menu from '@mui/material/Menu';
16
+ import MenuItem from '@mui/material/MenuItem';
17
+ import IconButton from '@mui/material/IconButton';
18
+ import Tooltip from '@mui/material/Tooltip';
19
+ import MoreVertIcon from '@mui/icons-material/MoreVert';
20
+ var MAX_ICONS = 0;
21
+ var HeaderActionButtons = function (props) {
22
+ var options = props.options, styles = props.styles, forceListView = props.forceListView;
23
+ var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
24
+ var handleClick = function (event) {
25
+ event === null || event === void 0 ? void 0 : event.stopPropagation();
26
+ setAnchorEl(event.currentTarget);
27
+ };
28
+ var handleClose = function (event) {
29
+ event === null || event === void 0 ? void 0 : event.stopPropagation();
30
+ setAnchorEl(null);
31
+ };
32
+ var handleOptionClick = function (event, option) {
33
+ event === null || event === void 0 ? void 0 : event.stopPropagation();
34
+ option === null || option === void 0 ? void 0 : option.onClick();
35
+ handleClose(event);
36
+ };
37
+ if (!options) {
38
+ console.log('Did you mean to pass items using the `options` parameter?');
39
+ return null;
40
+ }
41
+ // Show icon buttons if less than MAX_ICONS
42
+ if (options.length <= MAX_ICONS && !forceListView) {
43
+ return (_jsx("div", __assign({ style: styles }, { children: options.map(function (option) {
44
+ var label = option.label, icon = option.icon, onClick = option.onClick;
45
+ var handleOptionClick = onClick;
46
+ return (_jsx(Tooltip, __assign({ title: label, "aria-label": label, placement: 'bottom', enterDelay: 500, enterNextDelay: 50, leaveDelay: 50, disableInteractive: true }, { children: _jsx(IconButton, __assign({ size: 'small', "aria-label": label, onClick: handleOptionClick }, { children: _jsx(Icon, { children: icon }) })) }), label));
47
+ }) })));
48
+ }
49
+ // Show menu and v-ellipsis if more than MAX_ICONS
50
+ return (_jsxs("div", __assign({ style: styles }, { children: [_jsx(IconButton, __assign({ "aria-label": 'more', "aria-haspopup": 'true', onClick: handleClick }, { children: _jsx(MoreVertIcon, {}) })), _jsx(Menu, __assign({ id: 'actionButtonMenu', anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: {
51
+ vertical: 'bottom',
52
+ horizontal: 'center'
53
+ },
54
+ // getContentAnchorEl={null}
55
+ transformOrigin: {
56
+ vertical: 'top',
57
+ horizontal: 'center'
58
+ } }, { children: options.map(function (option) {
59
+ var label = option.label, isDisabled = option.isDisabled, actionKey = option.actionKey, hide = option.hide;
60
+ if (hide) {
61
+ return null;
62
+ }
63
+ return (_jsx(MenuItem, __assign({ onClick: function (event) { return handleOptionClick(event, option); }, "aria-label": label, disabled: isDisabled }, { children: label }), actionKey));
64
+ }) }))] })));
65
+ };
66
+ export default HeaderActionButtons;
package/components/landmarks/Header/HeaderStyles.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ /// <reference types="react" />
2
+ export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
3
+ children?: import("react").ReactNode;
4
+ classes?: Partial<import("@mui/material").PaperClasses> | undefined;
5
+ elevation?: number | undefined;
6
+ square?: boolean | undefined;
7
+ sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
8
+ variant?: "outlined" | "elevation" | undefined;
9
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
10
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
11
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
12
+ export declare const StyledBreadcrumbs: import("@emotion/styled").StyledComponent<{
13
+ children?: import("react").ReactNode;
14
+ classes?: Partial<import("@mui/material").BreadcrumbsClasses> | undefined;
15
+ expandText?: string | undefined;
16
+ itemsAfterCollapse?: number | undefined;
17
+ itemsBeforeCollapse?: number | undefined;
18
+ maxItems?: number | undefined;
19
+ separator?: import("react").ReactNode;
20
+ sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
21
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
22
+ ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
23
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "separator" | "sx" | "expandText" | "itemsAfterCollapse" | "itemsBeforeCollapse" | "maxItems"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
24
+ export declare const StyledHeaderPrimary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
25
+ children?: import("react").ReactNode;
26
+ component?: import("react").ElementType<any> | undefined;
27
+ ref?: import("react").Ref<unknown> | undefined;
28
+ sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
29
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
30
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
31
+ }, 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").Theme>, {}, {}>;
32
+ export declare const StyledHeaderSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
33
+ children?: import("react").ReactNode;
34
+ component?: import("react").ElementType<any> | undefined;
35
+ ref?: import("react").Ref<unknown> | undefined;
36
+ sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
37
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
38
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
39
+ }, 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").Theme>, {}, {}>;
40
+ export declare const StyledAdditionalButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
41
+ children?: import("react").ReactNode;
42
+ component?: import("react").ElementType<any> | undefined;
43
+ ref?: import("react").Ref<unknown> | undefined;
44
+ sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
45
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
46
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
47
+ }, 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").Theme>, {}, {}>;
48
+ export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
49
+ children?: import("react").ReactNode;
50
+ component?: import("react").ElementType<any> | undefined;
51
+ ref?: import("react").Ref<unknown> | undefined;
52
+ sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
53
+ } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
54
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
55
+ }, 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").Theme>, {}, {}>;
package/components/landmarks/Header/HeaderStyles.js ADDED
@@ -0,0 +1,13 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import { Box, Paper } from '../../../index';
6
+ import { Breadcrumbs, styled } from '@mui/material';
7
+ export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n position: relative;\n width: 100%;\n\n &.is-sticky {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n position: relative;\n width: 100%;\n\n &.is-sticky {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
8
+ export var StyledBreadcrumbs = styled(Breadcrumbs)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: ", ";\n margin-bottom: 0.5rem;\n\n ol {\n flex-direction: ", ";\n }\n"], ["\n font-size: ", ";\n margin-bottom: 0.5rem;\n\n ol {\n flex-direction: ", ";\n }\n"])), function (props) { return props.theme.typography.subtitle2.fontSize; }, function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
9
+ export var StyledHeaderPrimary = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n padding: 1rem;\n padding-inline-start: 2rem;\n\n h1,\n h4 {\n font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n text-align: ", ";\n }\n"], ["\n align-items: ", ";\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n padding: 1rem;\n padding-inline-start: 2rem;\n\n h1,\n h4 {\n font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n text-align: ", ";\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'flex-start' : 'flex-end'; }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
10
+ export var StyledHeaderSecondary = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-direction: ", ";\n justify-content: flex-end;\n padding: 1rem;\n padding-inline-end: 2rem;\n\n button,\n a {\n white-space: nowrap;\n }\n"], ["\n align-items: center;\n display: flex;\n flex-direction: ", ";\n justify-content: flex-end;\n padding: 1rem;\n padding-inline-end: 2rem;\n\n button,\n a {\n white-space: nowrap;\n }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
11
+ export var StyledAdditionalButtonsContainer = styled(Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-inline-start: ", ";\n margin-inline-end: ", ";\n"], ["\n margin-inline-start: ", ";\n margin-inline-end: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? '0.5rem' : '0'; }, function (props) { return props.theme.direction === 'rtl' ? '0.5rem' : '0'; });
12
+ export var StyledBox = styled(Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), function (props) { return props.theme.palette.background.default; });
13
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.d.ts CHANGED
@@ -285,7 +285,7 @@ export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
285
285
  } | undefined;
286
286
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
287
287
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
288
- }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
288
+ }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
289
289
  export declare const StyledListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
290
290
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
291
291
  centerRipple?: boolean | undefined;
@@ -327,7 +327,7 @@ export declare const StyledChildListItem: import("@emotion/styled").StyledCompon
327
327
  } | undefined;
328
328
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
329
329
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
330
- }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
330
+ }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
331
331
  export declare const StyledChildListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
332
332
  export declare const StyledChildListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
333
333
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -369,7 +369,7 @@ export declare const StyledListSecondaryItem: import("@emotion/styled").StyledCo
369
369
  } | undefined;
370
370
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
371
371
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
372
- }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
372
+ }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
373
373
  export declare const StyledListSecondaryButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
374
374
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
375
375
  centerRipple?: boolean | undefined;
package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenuStyles.d.ts CHANGED
@@ -56,7 +56,7 @@ export declare const FlyoutMenuItem: import("@emotion/styled").StyledComponent<{
56
56
  } | undefined;
57
57
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
58
58
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
59
- }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
59
+ }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
60
60
  export declare const FlyoutMenuButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
61
61
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
62
62
  centerRipple?: boolean | undefined;
package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
14
14
  } | undefined;
15
15
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
16
16
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
17
- }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
17
+ }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
18
18
  isDrawerOpen?: boolean | undefined;
19
19
  }, {}, {}>;
20
20
  export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.d.ts CHANGED
@@ -56,7 +56,7 @@ export declare const FlyoutMenuItem: import("@emotion/styled").StyledComponent<{
56
56
  } | undefined;
57
57
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
58
58
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
59
- }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
59
+ }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
60
60
  export declare const FlyoutMenuButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
61
61
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
62
62
  centerRipple?: boolean | undefined;
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
14
14
  } | undefined;
15
15
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
16
16
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
17
- }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
17
+ }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
18
18
  isDrawerOpen?: boolean | undefined;
19
19
  }, {}, {}>;
20
20
  export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
package/index.d.ts CHANGED
@@ -128,5 +128,6 @@ export { default as List } from './components/datadisplay/List/List';
128
128
  export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
129
129
  export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
130
130
  export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
131
+ export { default as Header } from './components/landmarks/Header/Header';
131
132
  export { default as MobileNavigation } from './components/navigation/MobileNavigation/MobileNavigation';
132
133
  export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';
package/index.js CHANGED
@@ -140,5 +140,6 @@ export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
140
140
  export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
141
141
  export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
142
142
  // Stream Suite components
143
+ export { default as Header } from './components/landmarks/Header/Header';
143
144
  export { default as MobileNavigation } from './components/navigation/MobileNavigation/MobileNavigation';
144
145
  export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.6.0-beta.12",
12
+ "version": "1.6.0-beta.13",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",
package/utils/constants.d.ts CHANGED
@@ -4,3 +4,4 @@ export declare const MOBILE_NAV_PANEL_TYPES: {
4
4
  SEARCH: string;
5
5
  AVATAR: string;
6
6
  };
7
+ export declare const DEFAULT_MAX_CHARACTERS_PER_LINE = 50;
package/utils/constants.js CHANGED
@@ -4,3 +4,6 @@ export var MOBILE_NAV_PANEL_TYPES = {
4
4
  SEARCH: 'search',
5
5
  AVATAR: 'avatar'
6
6
  };
7
+ // 50 seems a reasonable default limit
8
+ // https://m2.material.io/design/typography/understanding-typography.html#readability
9
+ export var DEFAULT_MAX_CHARACTERS_PER_LINE = 50;
package/utils/theme.d.ts CHANGED
@@ -53,7 +53,7 @@ export declare const lightTheme: {
53
53
  };
54
54
  divider: string;
55
55
  text: {
56
- primary: "#000";
56
+ primary: string;
57
57
  };
58
58
  };
59
59
  };
@@ -77,7 +77,7 @@ export declare const darkTheme: {
77
77
  };
78
78
  divider: string;
79
79
  text: {
80
- primary: "#fff";
80
+ primary: string;
81
81
  };
82
82
  };
83
83
  };
package/utils/theme.js CHANGED
@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import { amber, blue, common } from '@mui/material/colors';
12
+ import { amber, blue } from '@mui/material/colors';
13
13
  var DEFAULT_HEADER_TYPOGRAPHY = {
14
14
  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
15
15
  };
@@ -40,7 +40,7 @@ export var lightTheme = {
40
40
  },
41
41
  divider: 'rgba(0, 0, 0, 0.075)',
42
42
  text: {
43
- primary: common.black
43
+ primary: 'rgba(0,0,0,0.95)'
44
44
  }
45
45
  }
46
46
  };
@@ -49,7 +49,7 @@ export var darkTheme = {
49
49
  primary: amber,
50
50
  divider: 'rgba(255, 255, 255, 0.075)',
51
51
  text: {
52
- primary: common.white
52
+ primary: 'rgba(255,255,255,0.95)'
53
53
  }
54
54
  }
55
55
  };