@veracity/vui 0.3.2 → 0.4.0

package/header/header.js

@@ -69,49 +69,64 @@ var react_1 = __importStar(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var context_1 = require("./context");
+var headerAccount_1 = __importDefault(require("./headerAccount"));
 var headerContent_1 = __importDefault(require("./headerContent"));
 var headerCreateAccount_1 = __importDefault(require("./headerCreateAccount"));
 var headerDivider_1 = __importDefault(require("./headerDivider"));
-var headerLink_1 = __importDefault(require("./headerLink"));
-var headerLinks_1 = __importDefault(require("./headerLinks"));
+var headerLinkItem_1 = __importDefault(require("./headerLinkItem"));
+var headerLinksList_1 = __importDefault(require("./headerLinksList"));
 var headerLogo_1 = __importDefault(require("./headerLogo"));
 var headerMobileContent_1 = __importDefault(require("./headerMobileContent"));
 var headerMobileToggle_1 = __importDefault(require("./headerMobileToggle"));
 var headerNotifications_1 = __importDefault(require("./headerNotifications"));
-var headerProfile_1 = __importDefault(require("./headerProfile"));
 var headerServices_1 = __importDefault(require("./headerServices"));
 var headerSignIn_1 = __importDefault(require("./headerSignIn"));
-exports.HeaderBase = core_1.styled.headerBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-bottom: 1px solid prussian.80;\n\tdisplay: flex;\n\theight: 72px;\n\tposition: relative;\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-bottom: 1px solid prussian.80;\n\tdisplay: flex;\n\theight: 72px;\n\tposition: relative;\n"
+exports.HeaderBase = core_1.styled.headerBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-bottom: 1px solid prussian.80;\n\tdisplay: flex;\n\tposition: relative;\n"], ["\n\talign-items: center;\n\tbackground-color: white;\n\tborder-bottom: 1px solid prussian.80;\n\tdisplay: flex;\n\tposition: relative;\n"
     /**
-     * Branded Veracity Header with logo, links, services, profile and other data. Controls max-width of the content.
+     * Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content.
      * Exposes some props to the children via context.
      */
 ])));
 /**
- * Branded Veracity Header with logo, links, services, profile and other data. Controls max-width of the content.
+ * Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content.
  * Exposes some props to the children via context.
  */
 exports.Header = (0, core_1.vui)(function (props, ref) {
-    var _a = __read((0, react_1.useState)(false), 2), isMobileOpen = _a[0], setIsMobileOpen = _a[1];
-    var children = props.children, className = props.className, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "size", "variant"]);
+    var children = props.children, className = props.className, _a = props.headerHeight, headerHeight = _a === void 0 ? 72 : _a, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "headerHeight", "size", "variant"]);
+    var _b = __read((0, react_1.useState)(false), 2), isMobileOpen = _b[0], setIsMobileOpen = _b[1];
+    var mobileContentRef = (0, react_1.useRef)(null);
+    var mobileToggleRef = (0, react_1.useRef)(null);
     var styles = (0, core_1.useStyleConfig)('Header', props);
-    var isDesktop = (0, core_1.useUp)('lg');
-    var isMobile = (0, core_1.useDown)('lg');
-    var context = (0, react_1.useMemo)(function () { return ({ isDesktop: isDesktop, isMobile: isMobile, isMobileOpen: isMobileOpen, setIsMobileOpen: setIsMobileOpen, size: size, variant: variant }); }, [isDesktop, isMobile, isMobileOpen, setIsMobileOpen, size, variant]);
+    (0, utils_1.useClickOutside)([mobileContentRef, mobileToggleRef], function () {
+        setIsMobileOpen(false);
+    });
+    var isDesktop = (0, core_1.useUp)('md');
+    var isMobile = (0, core_1.useDown)('md');
+    var context = {
+        headerHeight: headerHeight,
+        isDesktop: isDesktop,
+        isMobile: isMobile,
+        isMobileOpen: isMobileOpen,
+        mobileContentRef: mobileContentRef,
+        mobileToggleRef: mobileToggleRef,
+        setIsMobileOpen: setIsMobileOpen,
+        size: size,
+        variant: variant
+    };
     return (react_1.default.createElement(context_1.HeaderProvider, { value: context },
-        react_1.default.createElement(exports.HeaderBase, __assign({ className: (0, utils_1.cs)('vui-header', className), px: { xs: 2, lg: 5 }, ref: ref }, styles.container, rest), (0, utils_1.runIfFn)(children, context))));
+        react_1.default.createElement(exports.HeaderBase, __assign({ className: (0, utils_1.cs)('vui-header', className), h: headerHeight, px: { xs: 2, lg: 5 }, ref: ref }, styles.container, rest), (0, utils_1.runIfFn)(children, context))));
 });
 exports.Header.displayName = 'Header';
+exports.Header.Account = headerAccount_1.default;
 exports.Header.Content = headerContent_1.default;
 exports.Header.CreateAccount = headerCreateAccount_1.default;
 exports.Header.Divider = headerDivider_1.default;
-exports.Header.Link = headerLink_1.default;
-exports.Header.Links = headerLinks_1.default;
+exports.Header.LinkItem = headerLinkItem_1.default;
+exports.Header.LinksList = headerLinksList_1.default;
 exports.Header.Logo = headerLogo_1.default;
 exports.Header.MobileContent = headerMobileContent_1.default;
 exports.Header.MobileToggle = headerMobileToggle_1.default;
 exports.Header.Notifications = headerNotifications_1.default;
-exports.Header.Profile = headerProfile_1.default;
 exports.Header.Services = headerServices_1.default;
 exports.Header.SignIn = headerSignIn_1.default;
 exports.default = exports.Header;

package/header/header.types.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, RefObject, SetStateAction } from 'react';
 import { BoxProps } from '../box';
 import { ButtonProps } from '../button';
 import { IconProp } from '../icon';
@@ -6,79 +6,98 @@ import { ListItemProps, ListProps } from '../list';
 import { MenuProps } from '../menu';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement, RenderProps } from '../utils';
-import { HeaderProfileData } from './headerProfile.types';
-export declare type HeaderContext = {
+import { RenderProps } from '../utils';
+import { headerLinksProd } from './consts';
+import { HeaderAccountData } from './headerAccount.types';
+export declare type HeaderContext = Pick<HeaderProps, 'headerHeight'> & {
     isDesktop: boolean;
     isMobile: boolean;
     isMobileOpen: boolean;
+    mobileContentRef: RefObject<HTMLElement | null>;
+    mobileToggleRef: RefObject<HTMLElement | null>;
     setIsMobileOpen: Dispatch<SetStateAction<boolean>>;
 };
-/** Defines create account link URL. */
 export declare type HeaderCreateAccountData = {
+    /** Provides URL to create account link. */
     url?: string;
 };
 export declare type HeaderCreateAccountProps = BoxProps & HeaderCreateAccountData;
-/** Defines link information. */
 export declare type HeaderLinkData = {
+    /** Displays and icon on the left side of the link. */
     icon?: IconProp;
+    /** Adds styling for currently active link. */
+    isActive?: boolean;
+    /** Provides text content to the list item. */
     text?: string;
+    /** Provides href attribute to the internal link element. */
     url?: string;
 };
-export declare type HeaderLinkProps = ListItemProps & HeaderLinkData;
-export declare type HeaderLinksProps = ListProps & {
+/** Union of link ids based on Header links dictionary for Prod environment. */
+export declare type HeaderLinkKey = keyof typeof headerLinksProd;
+export declare type HeaderLinkItemProps = ListItemProps & HeaderLinkData;
+export declare type HeaderLinksListProps = ListProps & {
     /** Array of objects with data for each link. */
     links?: HeaderLinkData[];
 };
-/** Defines src to load the logo from and link's URL. */
 export declare type HeaderLogoData = {
+    /** Loads logo svg from the given source. */
     src?: string;
+    /** Renders logo wrapper as a link with given url as href. */
     url?: string;
 };
 export declare type HeaderLogoProps = BoxProps & HeaderLogoData;
-/** Defines notifications count and icon link URL. */
 export declare type HeaderNotificationsData = {
+    /** Displays a badge with given number of notifications. */
     count?: number;
+    /** Provides href to the icon link. */
     url?: string;
 };
 export declare type HeaderNotificationsProps = ThemingProps<'Header'> & Omit<ButtonProps, 'size' | 'variant'> & HeaderNotificationsData;
 export declare type HeaderProps = SystemProps & ThemingProps<'Header'> & {
     /** Exposes render props to the children. */
     children?: HeaderRenderProps;
+    /** Sets the height of the Header and is used by internal parts for positioning and sizing. */
+    headerHeight?: number;
 };
 export declare type HeaderRenderProps = RenderProps<HeaderContext>;
+export declare type HeaderServicesData = {
+    /** Provides text content to the service item. */
+    text?: string;
+    /** Provides href attribute to the internal link element. */
+    url?: string;
+};
 export declare type HeaderServicesProps = MenuProps & {
     /** Props object passed to the MenuButton component. */
     buttonProps?: ButtonProps;
     /** Props object passed to the MenuList component. */
     listProps?: ListProps;
     /** Array of objects with data for each service link. */
-    services?: HeaderLinkData[];
+    services?: HeaderServicesData[];
 };
-/** Defines URL of the sign in button. */
 export declare type HeaderSignInData = {
+    /** Provides href to the button link. */
     url?: string;
 };
 export declare type HeaderSignInProps = ButtonProps & HeaderSignInData;
 export declare type LoggedInHeaderProps = HeaderProps & {
+    /** Socket placing account popover icon on the right side. */
+    account?: HeaderAccountData | JSX.Element;
     /** Socket placing links in the middle. */
-    links?: HeaderLinkData[] | AnyElement;
+    links?: HeaderLinkData[] | JSX.Element;
     /** Socket placing logo on the left side. */
-    logo?: HeaderLogoData | AnyElement;
+    logo?: HeaderLogoData | JSX.Element;
     /** Socket placing notifications icon on the right side. */
-    notifications?: HeaderNotificationsData | AnyElement;
-    /** Socket placing profile popover icon on the right side. */
-    profile?: HeaderProfileData | AnyElement;
+    notifications?: HeaderNotificationsData | JSX.Element;
     /** Socket placing services menu icon on the right side. */
-    services?: HeaderLinkData[] | AnyElement;
+    services?: HeaderServicesData[] | JSX.Element;
 };
 export declare type LoggedOutHeaderProps = HeaderProps & {
     /** Socket placing create account prompt on the right side. */
-    createAccount?: string | AnyElement;
+    createAccount?: HeaderCreateAccountData | JSX.Element;
     /** Socket placing links in the middle. */
-    links?: HeaderLinkData[] | AnyElement;
+    links?: HeaderLinkData[] | JSX.Element;
     /** Socket placing logo on the left side. */
-    logo?: HeaderLogoData | AnyElement;
+    logo?: HeaderLogoData | JSX.Element;
     /** Socket placing sign in button on the right side. */
-    signIn?: HeaderSignInData['url'] | AnyElement;
+    signIn?: HeaderSignInData | JSX.Element;
 };

package/header/headerAccount.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { HeaderAccountProps } from './headerAccount.types';
+/** Displays user account information and helpful links, like settings or logout. */
+export default function HeaderAccount(props: HeaderAccountProps): JSX.Element;

package/header/{headerProfile.js → headerAccount.js}

@@ -71,20 +71,28 @@ var utils_1 = require("../utils");
 var context_1 = require("./context");
 function UserInfo(_a) {
     var companyName = _a.companyName, userName = _a.userName;
-    return (react_1.default.createElement(box_1.default, { p: 2, spaceX: 2 },
+    return (react_1.default.createElement(box_1.default, { p: 2, pb: 1, spaceX: 2 },
         react_1.default.createElement(avatar_1.default, { colorScheme: "prussian", name: userName, size: "lg", variant: "solid" }),
         react_1.default.createElement(box_1.default, { column: true },
             userName && (react_1.default.createElement(t_1.default, { mb: 0.5, weight: "demi" }, userName)),
             companyName && react_1.default.createElement(t_1.default, null, companyName))));
 }
-/** Displays user profile information and helpful links, like settings or logout. */
-function HeaderProfile(props) {
-    var children = props.children, contentProps = props.contentProps, sections = props.sections, triggerProps = props.triggerProps, userInfo = props.userInfo, rest = __rest(props, ["children", "contentProps", "sections", "triggerProps", "userInfo"]);
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)()).profile;
+/** Disables popper's dynamic re-positioning */
+var mobilePopoverOptions = { popperOptions: { modifiers: [{ name: 'computeStyles', enabled: false }] } };
+/** Displays user account information and helpful links, like settings or logout. */
+function HeaderAccount(props) {
+    var children = props.children, contentProps = props.contentProps, _a = props.options, options = _a === void 0 ? {} : _a, sections = props.sections, triggerProps = props.triggerProps, userInfo = props.userInfo, rest = __rest(props, ["children", "contentProps", "options", "sections", "triggerProps", "userInfo"]);
+    var _b = (0, context_1.useHeaderContext)(), headerHeight = _b.headerHeight, isMobile = _b.isMobile;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).account;
+    // Render content in full view on mobile
+    var popoverOptions = isMobile ? (0, utils_1.merge)(options, mobilePopoverOptions) : options;
+    var contentScreenProps = isMobile
+        ? { h: "calc(100vh - " + headerHeight + "px)", left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
+        : { maxH: 360, py: 1, w: 320 };
     var name = (0, utils_1.isObject)(userInfo) ? userInfo.userName : '';
-    return (react_1.default.createElement(popover_1.default, __assign({ placement: "bottom-end" }, rest),
-        react_1.default.createElement(popover_1.default.Trigger, __assign({ as: avatar_1.default, colorScheme: "prussian", isInteractive: true, name: name, variant: "solid" }, styles.trigger, triggerProps)),
-        react_1.default.createElement(popover_1.default.Content, __assign({ column: true, py: 1 }, styles.content, contentProps),
+    return (react_1.default.createElement(popover_1.default, __assign({ offset: [0, 8], options: popoverOptions, placement: "bottom-end" }, rest),
+        react_1.default.createElement(popover_1.default.Trigger, __assign({ as: avatar_1.default, colorScheme: "prussian", isInteractive: true, ml: 2, name: name, title: "Account", variant: "solid" }, styles.trigger, triggerProps)),
+        react_1.default.createElement(popover_1.default.Content, __assign({ column: true }, styles.content, contentScreenProps, contentProps),
             (0, utils_1.isObject)(userInfo) ? react_1.default.createElement(UserInfo, __assign({}, userInfo)) : userInfo,
             (0, utils_1.isObject)(sections)
                 ? Object.entries(sections).map(function (_a) {
@@ -98,4 +106,4 @@ function HeaderProfile(props) {
                 })
                 : sections)));
 }
-exports.default = HeaderProfile;
+exports.default = HeaderAccount;

package/header/headerAccount.types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { AvatarProps } from '../avatar';
+import { BoxProps } from '../box';
+import { PopoverProps } from '../popover';
+import { HeaderLinkData } from './header.types';
+/** Defines account link sections and user information. */
+export declare type HeaderAccountData = {
+    sections?: HeaderAccountSectionsData;
+    userInfo?: HeaderAccountUserInfoData;
+};
+export declare type HeaderAccountProps = PopoverProps & {
+    /** Props object passed to the PopoverContent component. */
+    contentProps?: BoxProps;
+    /** Socket displaying a set of link sections below user information. */
+    sections?: HeaderAccountData['sections'] | JSX.Element;
+    /** Props object passed to the PopoverTrigger component. */
+    triggerProps?: AvatarProps;
+    /** Socket displaying user information on top of the account popover. */
+    userInfo?: HeaderAccountData['userInfo'] | JSX.Element;
+};
+/** Defines heading and an array of links within one section. */
+export declare type HeaderAccountSectionData = {
+    heading?: string;
+    links?: HeaderLinkData[];
+};
+/** Defines a set of link sections within the account popover. */
+export declare type HeaderAccountSectionsData = {
+    [sectionName: string]: HeaderAccountSectionData;
+};
+/** Defines user information within the Account. */
+export declare type HeaderAccountUserInfoData = {
+    companyName?: string;
+    userName?: string;
+};
+export declare type HeaderAccountUserInfoProps = HeaderAccountUserInfoData;

package/header/headerContent.js

@@ -21,7 +21,7 @@ var core_1 = require("../core");
 var context_1 = require("./context");
 /** Controls max-width of the content and centers itself vertically. */
 exports.HeaderContent = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-headerContent", h: "100%", maxW: 1440, mx: "auto", ref: ref, w: "100%" }, styles.content, props)));
 });
 exports.HeaderContent.displayName = 'HeaderContent';

package/header/headerCreateAccount.js

@@ -34,11 +34,14 @@ var t_1 = __importDefault(require("../t"));
 var context_1 = require("./context");
 /** Text inviting to create an account when logged out. */
 exports.HeaderCreateAccount = (0, core_1.vui)(function (props, ref) {
+    var _a;
     var url = props.url, rest = __rest(props, ["url"]);
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerCreateAccount", column: true, flexShrink: 0, ref: ref }, styles.createAccount, rest),
-        react_1.default.createElement(t_1.default, { size: "sm" }, "New to Veracity?"),
-        react_1.default.createElement(link_1.default, { fontWeight: "medium", href: url, isUnderlined: true, size: "sm" }, "Create account")));
+    var isMobile = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).isMobile;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).createAccount;
+    var screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 };
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerCreateAccount", column: true, flexShrink: 0, ref: ref }, styles.container, screenProps, rest),
+        react_1.default.createElement(t_1.default, __assign({ size: "sm" }, styles.text), "New to Veracity?"),
+        react_1.default.createElement(link_1.default, __assign({ fontWeight: "medium", href: url, isUnderlined: true, size: "sm" }, styles.link), "Create account")));
 });
 exports.HeaderCreateAccount.displayName = 'HeaderCreateAccount';
 exports.default = exports.HeaderCreateAccount;

package/header/headerDivider.js

@@ -21,8 +21,8 @@ var divider_1 = __importDefault(require("../divider"));
 var context_1 = require("./context");
 /** Vertical line dividing some of the Header content. */
 exports.HeaderDivider = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    return (react_1.default.createElement(divider_1.default, __assign({ borderColor: "prussian.80", className: "vui-headerDivider", isVertical: true, mx: 1, ref: ref }, styles.divider, props)));
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(divider_1.default, __assign({ borderColor: "prussian.80", className: "vui-headerDivider", h: 40, isVertical: true, ref: ref }, styles.divider, props)));
 });
 exports.HeaderDivider.displayName = 'HeaderDivider';
 exports.default = exports.HeaderDivider;

package/header/headerLinkItem.d.ts

@@ -0,0 +1,4 @@
+import { HeaderLinkItemProps } from './header.types';
+/** Individual link item of the Header. */
+export declare const HeaderLinkItem: import("../core").VuiComponent<"li", HeaderLinkItemProps>;
+export default HeaderLinkItem;

package/header/headerLinkItem.js

@@ -0,0 +1,53 @@
+"use strict";
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderLinkItem = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var list_1 = __importDefault(require("../list"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Individual link item of the Header. */
+exports.HeaderLinkItem = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var className = props.className, icon = props.icon, isActive = props.isActive, linkProps = props.linkProps, onClickProp = props.onClick, url = props.url, rest = __rest(props, ["className", "icon", "isActive", "linkProps", "onClick", "url"]);
+    var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobile = _b.isMobile, setIsMobileOpen = _b.setIsMobileOpen;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).linkItem;
+    var onClick = (0, utils_1.useCallbackRef)(function (e) {
+        setIsMobileOpen(false);
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+    });
+    var linkActiveProps = isActive
+        ? isMobile
+            ? { bg: 'blue.10', borderLeftWidth: 6, hoverBg: 'blue.20', pl: '10px' }
+            : { borderBottomWidth: 4, pt: '4px' }
+        : {};
+    var itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' };
+    return (react_1.default.createElement(list_1.default.Item, __assign({ className: (0, utils_1.cs)('vui-headerLinkItem', className), iconLeft: icon, linkProps: __assign(__assign(__assign(__assign({}, linkActiveProps), { borderColor: 'prussian.80', href: url, ringInset: true, transition: 'all 0.1s, border-width 0s, padding 0s', w: { xs: '100%', md: 'max-content' } }), styles.link), linkProps), onClick: onClick, ref: ref }, itemScreenProps, styles.container, rest)));
+});
+exports.HeaderLinkItem.displayName = 'HeaderLinkItem';
+exports.default = exports.HeaderLinkItem;

package/header/headerLinksList.d.ts

@@ -0,0 +1,4 @@
+import { HeaderLinksListProps } from './header.types';
+/** List of Header Links. */
+export declare const HeaderLinksList: import("../core").VuiComponent<"ul", HeaderLinksListProps>;
+export default HeaderLinksList;

package/header/{headerLinks.js → headerLinksList.js}

@@ -25,17 +25,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderLinks = void 0;
+exports.HeaderLinksList = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var list_1 = __importDefault(require("../list"));
 var context_1 = require("./context");
-var headerLink_1 = __importDefault(require("./headerLink"));
+var headerLinkItem_1 = __importDefault(require("./headerLinkItem"));
 /** List of Header Links. */
-exports.HeaderLinks = (0, core_1.vui)(function (props, ref) {
+exports.HeaderLinksList = (0, core_1.vui)(function (props, ref) {
+    var _a;
     var children = props.children, links = props.links, rest = __rest(props, ["children", "links"]);
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    return (react_1.default.createElement(list_1.default, __assign({ className: "vui-headerLinks", ref: ref }, styles.links, rest), children !== null && children !== void 0 ? children : links === null || links === void 0 ? void 0 : links.map(function (link, index) { return react_1.default.createElement(headerLink_1.default, __assign({ key: index }, link)); })));
+    var isMobile = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).isMobile;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    var screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' };
+    return (react_1.default.createElement(list_1.default, __assign({ className: "vui-headerLinksList", display: "flex", ref: ref }, styles.linksList, screenStyles, rest), children !== null && children !== void 0 ? children : links === null || links === void 0 ? void 0 : links.map(function (link, index) { return react_1.default.createElement(headerLinkItem_1.default, __assign({ key: index }, link)); })));
 });
-exports.HeaderLinks.displayName = 'HeaderLinks';
-exports.default = exports.HeaderLinks;
+exports.HeaderLinksList.displayName = 'HeaderLinksList';
+exports.default = exports.HeaderLinksList;

package/header/headerLogo.js

@@ -30,19 +30,15 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var svg_1 = __importDefault(require("../svg"));
-var utils_1 = require("../utils");
 var context_1 = require("./context");
-var defaultLogo = core_1.cdnUrl + "/common/icons/logos/veracity-by-dnv.svg";
+var defaultLogo = core_1.cdnUrl + "/common/icons/logos/veracity-logo.svg";
 /** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
 exports.HeaderLogo = (0, core_1.vui)(function (props, ref) {
     var _a = props.src, src = _a === void 0 ? defaultLogo : _a, url = props.url, rest = __rest(props, ["src", "url"]);
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    var aliasedProps = (0, utils_1.filterUndefined)({
-        as: url ? 'a' : undefined,
-        href: url ? url : undefined
-    });
-    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerLogo", maxH: 72, mr: 2, ref: ref }, styles.logo, aliasedProps, rest),
-        react_1.default.createElement(svg_1.default, { src: src })));
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).logo;
+    var linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {};
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-headerLogo", flexShrink: 0, h: 40, mr: 2, ref: ref }, styles.container, linkProps, rest),
+        react_1.default.createElement(svg_1.default, __assign({ "aria-label": "logo", h: "100%", src: src }, styles.svg))));
 });
 exports.HeaderLogo.displayName = 'HeaderLogo';
 exports.default = exports.HeaderLogo;

package/header/headerMobileContent.js

@@ -18,13 +18,14 @@ exports.HeaderMobileContent = void 0;
 var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays some of the Header content when on a mobile screen. */
 exports.HeaderMobileContent = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var isMobileOpen = ((_a = (0, context_1.useHeader)()) !== null && _a !== void 0 ? _a : {}).isMobileOpen;
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    return isMobileOpen ? (react_1.default.createElement(box_1.default, __assign({ bg: "white", className: "vui-headerMobileContent", column: true, position: "absolute", ref: ref, top: "100%", zIndex: "100" }, styles.mobileContent, props))) : null;
+    var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, mobileContentRef = _b.mobileContentRef;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return isMobileOpen ? (react_1.default.createElement(box_1.default, __assign({ bg: "white", className: "vui-headerMobileContent", column: true, h: "calc(100vh - 100% - 1px)", left: 0, overflowX: "hidden", overflowY: "auto", position: "absolute", ref: (0, utils_1.mergeRefs)(ref, mobileContentRef), right: 0, top: "calc(100% + 1px)", zIndex: "100" }, styles.mobileContent, props))) : null;
 });
 exports.HeaderMobileContent.displayName = 'HeaderMobileContent';
 exports.default = exports.HeaderMobileContent;

package/header/headerMobileToggle.d.ts

@@ -1,4 +1,4 @@
-import { IconProps } from '../icon';
+import { ButtonProps } from '../button';
 /** Button that toggles display of the mobile content. */
-export declare const HeaderMobileToggle: import("../core").VuiComponent<"svg", IconProps>;
+export declare const HeaderMobileToggle: import("../core").VuiComponent<"button", ButtonProps>;
 export default HeaderMobileToggle;

package/header/headerMobileToggle.js

@@ -16,19 +16,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderMobileToggle = void 0;
 var react_1 = __importDefault(require("react"));
+var button_1 = require("../button");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Button that toggles display of the mobile content. */
 exports.HeaderMobileToggle = (0, core_1.vui)(function (props, ref) {
     var _a;
-    var _b = (_a = (0, context_1.useHeader)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, setIsMobileOpen = _b.setIsMobileOpen;
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    var icon = isMobileOpen ? 'falTimes' : 'falBars';
-    function onClick() {
-        setIsMobileOpen(function (s) { return !s; });
-    }
-    return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-headerMobileToggle", cursor: "pointer", name: icon, onClick: onClick, ref: ref, scale: 2 }, styles.mobileToggle, props)));
+    var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobileOpen = _b.isMobileOpen, mobileToggleRef = _b.mobileToggleRef, setIsMobileOpen = _b.setIsMobileOpen;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    var iconName = isMobileOpen ? 'falTimes' : 'falBars';
+    return (react_1.default.createElement(button_1.IconButton, __assign({ className: "vui-headerMobileToggle", colorScheme: "prussian", icon: react_1.default.createElement(icon_1.default, { name: iconName, scale: 2 }), ml: 2, onClick: function () { return setIsMobileOpen(function (s) { return !s; }); }, p: "3px", ref: (0, utils_1.mergeRefs)(ref, mobileToggleRef) }, styles.mobileToggle, props)));
 });
 exports.HeaderMobileToggle.displayName = 'HeaderMobileToggle';
 exports.default = exports.HeaderMobileToggle;

package/header/headerNotifications.js

@@ -33,19 +33,18 @@ exports.HeaderNotifications = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = __importDefault(require("../button"));
 var core_1 = require("../core");
-var icon_1 = __importDefault(require("../icon"));
 var context_1 = require("./context");
-var Badge = core_1.styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tbackground-color: red.70;\n"], ["\n\tbackground-color: red.70;\n"
+var Badge = core_1.styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tbackground-color: red.70;\n\tborder-radius: round;\n\tcolor: white;\n\tdisplay: flex;\n\tfont-size: 8px;\n\tfont-weight: medium;\n\theight: 16px;\n\tjustify-content: center;\n\tposition: absolute;\n\tright: 1px;\n\ttop: 1px;\n\twidth: 16px;\n"], ["\n\talign-items: center;\n\tbackground-color: red.70;\n\tborder-radius: round;\n\tcolor: white;\n\tdisplay: flex;\n\tfont-size: 8px;\n\tfont-weight: medium;\n\theight: 16px;\n\tjustify-content: center;\n\tposition: absolute;\n\tright: 1px;\n\ttop: 1px;\n\twidth: 16px;\n"
     /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 ])));
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 exports.HeaderNotifications = (0, core_1.vui)(function (props, ref) {
     var children = props.children, _a = props.count, count = _a === void 0 ? 0 : _a, url = props.url, rest = __rest(props, ["children", "count", "url"]);
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    return (react_1.default.createElement(button_1.default, __assign({ as: "a", href: url, minW: 0, px: "7px", ref: ref }, styles.notifications, rest),
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(button_1.default, __assign({ as: "a", href: url, minW: 0, ml: 1, position: "relative", px: "7px", ref: ref, title: "Notifications", variant: "text" }, styles.notifications, rest),
         react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(icon_1.default, { name: "falBell" }),
-            count > 0 && react_1.default.createElement(Badge, null, count))));
+            react_1.default.createElement(button_1.default.Icon, { name: "falBell" }),
+            count > 0 && react_1.default.createElement(Badge, null, count < 100 ? count : '99+'))));
 });
 exports.HeaderNotifications.displayName = 'HeaderNotifications';
 exports.default = exports.HeaderNotifications;

package/header/headerServices.js

@@ -33,19 +33,23 @@ var context_1 = require("./context");
 /** Displays a list of services available to the user. */
 function HeaderServices(props) {
     var buttonProps = props.buttonProps, children = props.children, listProps = props.listProps, _a = props.services, services = _a === void 0 ? [] : _a, rest = __rest(props, ["buttonProps", "children", "listProps", "services"]);
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)()).services;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).services;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.RenderOnDesktop, { screen: "lg" },
-            react_1.default.createElement(menu_1.default, __assign({}, rest),
-                react_1.default.createElement(menu_1.default.Button, __assign({ icon: "falTh" }, styles.button, buttonProps)),
-                react_1.default.createElement(menu_1.default.List, __assign({}, styles.list, listProps), services.map(function (_a, index) {
+        react_1.default.createElement(core_1.RenderOnDesktop, null,
+            react_1.default.createElement(menu_1.default, __assign({ offset: [0, 8], placement: "bottom-end", size: "lg" }, rest),
+                react_1.default.createElement(menu_1.default.Button, __assign({ colorScheme: "prussian", icon: "falTh", ml: 1, title: "My services" }, styles.button, buttonProps)),
+                react_1.default.createElement(menu_1.default.List, __assign({ maxH: 400, maxW: 320 }, styles.list, listProps),
+                    react_1.default.createElement(menu_1.default.List.Heading, null, "My Services"),
+                    services.map(function (_a, index) {
+                        var text = _a.text, url = _a.url;
+                        return (react_1.default.createElement(menu_1.default.Item, __assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text }, styles.item)));
+                    })))),
+        react_1.default.createElement(core_1.RenderOnMobile, null,
+            react_1.default.createElement(list_1.default, __assign({ borderBottom: "1px solid grey.40" }, styles.list, listProps),
+                react_1.default.createElement(list_1.default.Heading, null, "My Services"),
+                services.map(function (_a, index) {
                     var text = _a.text, url = _a.url;
                     return (react_1.default.createElement(menu_1.default.Item, __assign({ key: index, linkProps: { href: url }, text: text }, styles.item)));
-                })))),
-        react_1.default.createElement(core_1.RenderOnMobile, { screen: "lg" },
-            react_1.default.createElement(list_1.default, __assign({}, styles.list, listProps), services.map(function (_a, index) {
-                var text = _a.text, url = _a.url;
-                return (react_1.default.createElement(menu_1.default.Item, __assign({ key: index, linkProps: { href: url }, text: text }, styles.item)));
-            })))));
+                })))));
 }
 exports.default = HeaderServices;

package/header/headerSignIn.js

@@ -33,7 +33,7 @@ var context_1 = require("./context");
 /** Sign in button leading to Veracity login page. */
 exports.HeaderSignIn = (0, core_1.vui)(function (props, ref) {
     var url = props.url, rest = __rest(props, ["url"]);
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
     return (react_1.default.createElement(button_1.default, __assign({ as: "a", className: "vui-headerSignIn", href: url, ref: ref }, styles.signIn, rest), "Sign in"));
 });
 exports.HeaderSignIn.displayName = 'HeaderSignIn';

package/header/helpers.d.ts

@@ -0,0 +1,17 @@
+import { Environment } from '../utils';
+import { HeaderLinkData } from './header.types';
+import { HeaderAccountSectionsData } from './headerAccount.types';
+/**
+ * Computes Header links for the Account's sections.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+export declare function getHeaderAccountSections(environment: Environment, isLoggedIn?: boolean): HeaderAccountSectionsData;
+/**
+ * Computes Header main links.
+ * Links are selected per environment and modified based on log in state.
+ * @param environment current application environment
+ * @param isLoggedIn is current user logged in
+ */
+export declare function getHeaderMainLinks(environment: Environment, isLoggedIn?: boolean): HeaderLinkData[];