@veracity/vui 0.3.2 → 0.5.0

package/header/header.types.d.ts

@@ -1,84 +1,99 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, RefObject, SetStateAction } from 'react';
 import { BoxProps } from '../box';
 import { ButtonProps } from '../button';
+import { LinksDict } from '../core';
 import { IconProp } from '../icon';
 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 { HeaderAccountData } from './headerAccount.types';
+export declare type HeaderContentProps = BoxProps;
+export declare type HeaderContext = Pick<HeaderProps, 'headerHeight'> & {
     isDesktop: boolean;
     isMobile: boolean;
     isMobileOpen: boolean;
+    links: LinksDict;
+    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;
+    /** Unique name that identifies a link in the links dictionary. */
+    id?: string;
+    /** 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 & {
-    /** Array of objects with data for each link. */
-    links?: HeaderLinkData[];
-};
-/** Defines src to load the logo from and link's URL. */
+export declare type HeaderLinkItemProps = ListItemProps & HeaderLinkData;
 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 HeaderMainLinksProps = ListProps & {
+    /** Array of objects with data for each link. */
+    links?: HeaderLinkData[];
+};
 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 HeaderNotificationsProps = ButtonProps & 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 HeaderServicesProps = MenuProps & {
+export declare type HeaderServicesData = {
+    /** Array of objects with data for each service link. */
+    links?: HeaderLinkData[];
+};
+export declare type HeaderServicesProps = MenuProps & HeaderServicesData & {
     /** Props object passed to the MenuButton component. */
     buttonProps?: ButtonProps;
+    /** Children are disabled for this component. */
+    children?: never;
     /** Props object passed to the MenuList component. */
     listProps?: ListProps;
-    /** Array of objects with data for each service link. */
-    services?: HeaderLinkData[];
 };
-/** 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 links in the middle. */
-    links?: HeaderLinkData[] | AnyElement;
-    /** Socket placing logo on the left side. */
-    logo?: HeaderLogoData | AnyElement;
-    /** Socket placing notifications icon on the right side. */
-    notifications?: HeaderNotificationsData | AnyElement;
-    /** Socket placing profile popover icon on the right side. */
-    profile?: HeaderProfileData | AnyElement;
-    /** Socket placing services menu icon on the right side. */
-    services?: HeaderLinkData[] | AnyElement;
+    /** Socket for account popover icon on the right side. */
+    account?: HeaderAccountData | JSX.Element;
+    /** Socket for logo on the left side. */
+    logo?: HeaderLogoData | JSX.Element;
+    /** Socket for main links in the middle-right. */
+    mainLinks?: HeaderLinkData[] | JSX.Element;
+    /** Socket for notifications icon on the right side. */
+    notifications?: HeaderNotificationsData | JSX.Element;
+    /** Socket for services menu icon on the right side. */
+    services?: HeaderServicesData | JSX.Element;
 };
 export declare type LoggedOutHeaderProps = HeaderProps & {
-    /** Socket placing create account prompt on the right side. */
-    createAccount?: string | AnyElement;
-    /** Socket placing links in the middle. */
-    links?: HeaderLinkData[] | AnyElement;
-    /** Socket placing logo on the left side. */
-    logo?: HeaderLogoData | AnyElement;
-    /** Socket placing sign in button on the right side. */
-    signIn?: HeaderSignInData['url'] | AnyElement;
+    /** Socket for create account prompt on the right side. */
+    createAccount?: HeaderCreateAccountData | JSX.Element;
+    /** Socket for logo on the left side. */
+    logo?: HeaderLogoData | JSX.Element;
+    /** Socket for links in the middle-right section. */
+    mainLinks?: HeaderLinkData[] | JSX.Element;
+    /** Socket for sign in button on the right side. */
+    signIn?: HeaderSignInData | JSX.Element;
 };

package/header/headerAccount.d.ts

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

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

@@ -40,62 +40,49 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderAccount = void 0;
 var react_1 = __importStar(require("react"));
 var avatar_1 = __importDefault(require("../avatar"));
-var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var list_1 = __importDefault(require("../list"));
 var popover_1 = __importDefault(require("../popover"));
-var t_1 = __importDefault(require("../t"));
 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 },
-        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;
+var headerAccountUserInfo_1 = __importDefault(require("./headerAccountUserInfo"));
+/** 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 contentProps = props.contentProps, _a = props.options, options = _a === void 0 ? {} : _a, sections = props.sections, triggerProps = props.triggerProps, userInfo = props.userInfo, rest = __rest(props, ["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),
-            (0, utils_1.isObject)(userInfo) ? react_1.default.createElement(UserInfo, __assign({}, userInfo)) : userInfo,
-            (0, utils_1.isObject)(sections)
-                ? Object.entries(sections).map(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], _c = _b[1], heading = _c.heading, links = _c.links;
-                    return (react_1.default.createElement(react_1.Fragment, { key: key },
+    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.isJsx)(userInfo) ? userInfo : userInfo && react_1.default.createElement(headerAccountUserInfo_1.default, __assign({}, userInfo)),
+            (0, utils_1.isJsx)(sections)
+                ? sections
+                : sections && (react_1.default.createElement(list_1.default, null, sections.map(function (_a, index) {
+                    var heading = _a.heading, links = _a.links;
+                    return (react_1.default.createElement(react_1.Fragment, { key: index },
                         react_1.default.createElement(list_1.default.Divider, null),
-                        react_1.default.createElement(list_1.default, { heading: heading }, links === null || links === void 0 ? void 0 : links.map(function (_a, index) {
-                            var icon = _a.icon, text = _a.text, url = _a.url;
-                            return (react_1.default.createElement(list_1.default.Item, { iconLeft: icon, key: index, linkProps: { href: url }, text: text }));
-                        }))));
-                })
-                : sections)));
+                        heading && react_1.default.createElement(list_1.default.Heading, { text: heading }), links === null || links === void 0 ? void 0 :
+                        links.map(function (_a, index) {
+                            var icon = _a.icon, url = _a.url, rest = __rest(_a, ["icon", "url"]);
+                            return (react_1.default.createElement(list_1.default.Item, __assign({ iconLeft: icon, key: index, linkProps: { href: url } }, rest)));
+                        })));
+                }))))));
 }
-exports.default = HeaderProfile;
+exports.HeaderAccount = HeaderAccount;
+HeaderAccount.displayName = 'HeaderAccount';
+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 { PopoverContentProps, PopoverProps, PopoverTriggerProps } from '../popover';
+import { RightJoinProps } from '../utils';
+import { HeaderLinkData } from './header.types';
+/** Defines account link sections and user information. */
+export declare type HeaderAccountData = {
+    sections?: HeaderAccountSectionData[];
+    userInfo?: HeaderAccountUserInfoData;
+};
+export declare type HeaderAccountProps = PopoverProps & {
+    /** Children are disabled for this component. */
+    children?: never;
+    /** Props object passed to the PopoverContent component. */
+    contentProps?: PopoverContentProps;
+    /** Socket for a set of link sections below user information. */
+    sections?: HeaderAccountData['sections'] | JSX.Element;
+    /** Props object passed to the PopoverTrigger component. */
+    triggerProps?: RightJoinProps<PopoverTriggerProps, AvatarProps>;
+    /** Socket for 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[];
+};
+export declare type HeaderAccountUserInfoData = {
+    /** Displays company name in account user info section. */
+    companyName?: string;
+    /** Displays user name in account user info section. */
+    userName?: string;
+};
+export declare type HeaderAccountUserInfoProps = BoxProps & HeaderAccountUserInfoData;

package/header/headerAccount.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/header/headerAccountUserInfo.d.ts

@@ -0,0 +1,4 @@
+import { HeaderAccountUserInfoProps } from './headerAccount.types';
+/** Displays user information, like username and company name, within HeaderAccount part. */
+export declare const HeaderAccountUserInfo: import("../core").VuiComponent<"div", HeaderAccountUserInfoProps>;
+export default HeaderAccountUserInfo;

package/header/headerAccountUserInfo.js

@@ -0,0 +1,46 @@
+"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.HeaderAccountUserInfo = void 0;
+var react_1 = __importDefault(require("react"));
+var avatar_1 = __importDefault(require("../avatar"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays user information, like username and company name, within HeaderAccount part. */
+exports.HeaderAccountUserInfo = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, companyName = props.companyName, userName = props.userName, rest = __rest(props, ["children", "companyName", "userName"]);
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-headerAccountUserInfo", p: 2, pb: 1, ref: ref, spaceX: 2 }, styles.accountUserInfo, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        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))))));
+});
+exports.HeaderAccountUserInfo.displayName = 'HeaderAccountUserInfo';
+exports.default = exports.HeaderAccountUserInfo;

package/header/headerContent.d.ts

@@ -1,4 +1,3 @@
-import { BoxProps } from '../box';
-/** Controls max-width of the content and centers itself vertically. */
-export declare const HeaderContent: import("../core").VuiComponent<"div", BoxProps>;
+/** Controls max-width of the content and centers itself horizontally. */
+export declare const HeaderContent: import("../core").VuiComponent<"div", import("../box").BoxProps>;
 export default HeaderContent;

package/header/headerContent.js

@@ -19,10 +19,10 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var context_1 = require("./context");
-/** Controls max-width of the content and centers itself vertically. */
+/** Controls max-width of the content and centers itself horizontally. */
 exports.HeaderContent = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeader)());
-    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)));
+    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: 1, mx: "auto", ref: ref, w: 1 }, styles.content, props));
 });
 exports.HeaderContent.displayName = 'HeaderContent';
 exports.default = exports.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 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 _a;
+    var children = props.children, url = props.url, rest = __rest(props, ["children", "url"]);
+    var _b = (_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}, isMobile = _b.isMobile, links = _b.links;
+    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), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
+        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 !== null && url !== void 0 ? url : links.signUp, 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/headerLogo.js

@@ -30,19 +30,17 @@ 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 _a;
+    var children = props.children, _b = props.src, src = _b === void 0 ? defaultLogo : _b, url = props.url, rest = __rest(props, ["children", "src", "url"]);
+    var links = ((_a = (0, context_1.useHeaderContext)()) !== null && _a !== void 0 ? _a : {}).links;
+    var styles = (0, core_1.useStyleConfig)('Header', (0, context_1.useHeaderContext)()).logo;
+    var logoUrl = url !== null && url !== void 0 ? url : links.home;
+    var linkProps = logoUrl ? { as: 'a', href: logoUrl, 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), children !== null && children !== void 0 ? children : 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/headerMainLinks.d.ts

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

package/header/{headerLinks.js → headerMainLinks.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.HeaderMainLinks = 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.HeaderMainLinks = (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-headerMainLinks", display: "flex", ref: ref }, styles.mainLinks, 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.HeaderMainLinks.displayName = 'HeaderMainLinks';
+exports.default = exports.HeaderMainLinks;

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;