@sequencing/design-system 1.0.62 → 1.0.63

package/dist/types/components/Organisms/Header/Header.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import { HeaderLinkData } from "./_components/HeaderLinkDropdown/HeaderLinkDropdown";
 interface User {
     name: string;
     avatarImageUrl?: string;
@@ -8,11 +7,6 @@ export interface HeaderFunctions {
     closeMobileMenu: () => void;
 }
 export interface HeaderProps {
-    /**
-     * A React node with the links to be rendered on the right side of the header,
-     * it will be rendered after the search bar toggle button (if provided)
-     */
-    auxiliaryLinks?: ReactNode | HeaderLinkData[];
     /**
      * A React node with an optional banner to be rendered above the header.
      * The total header height is dynamic calculated and includes the banner's height
@@ -21,32 +15,28 @@ export interface HeaderProps {
     /** Custom css class to customize the stylings */
     customClass?: string;
     /**
-     * A React node to be rendered on the right side of the header when the user is unauthenticated.
-     */
-    loggedOutButton?: ReactNode;
-    /** A React node with the links to be rendered on the left side of the header */
-    mainLinks?: ReactNode | HeaderLinkData[];
-    /** The URL of user's account page */
-    myAccountUrl: string;
-    /**
-     * A React node with the search component containing:
-     * - A button to toggle the visibility of the search bar
-     * - A div with the search bar implementation
-     */
-    searchComponent?: ReactNode;
-    /**
-     * If the user is authenticated, pass their name and avatar image here,
-     * otherwise, `loggedOutButton` will be displayed instead.
+     * The URL of the site's home page. It will be used when the user clicks on the site's logo.
+     *
+     * PLEASE NOTE: If you want to use the SOFT navigation from your framework (React, NextJs, etc), you should
+     * path the `onRequestHomePage` prop and call the navigation method in the callback.
+     * e.g. for NextJs `onRequestHomePage={(url) => router.push(url)}`
+     * WARNING: Do not change or modify url argument inside your callback, because you will have undocumented behavior
+     * with your navigation. Your goal is only call the navigation method with the url argument.
+     * Default value is `/`.
+     * Without the `onRequestHomePage` prop, the component will use the default behavior of the anchor tag.
      */
-    user?: User;
+    homePageUrl?: string;
     /** Displays loading skeleton animation when set to `true` */
     isLoading?: boolean;
-    /** Specify number of skeleton links to display during loading. Default value is 3 */
+    /** The URL of user's account page */
+    myAccountUrl: string;
+    /** Specify number of skeleton links to display during loading. Default value is 6 */
     numberOfSkeletonLinks?: number;
-    /** Router redirect method. Used to support different routers (Next, react-router-dom, etc) */
+    /** Link clicks callback. Use it together with ``preventHardNavigation``
+     * to support different routers (Next, react-router-dom, etc.).
+     * NOTE: When ``preventHardNavigation`` is disabled, it has no effect.
+     */
     onLinkClick?: (url: string) => void;
-    /** Called when an authenticated user clicks on the Sign Out button inside the main right HeaderChip */
-    onRequestSignOut?: () => void;
     /**
      * Called when a user clicks on the site's logo, provide url argument to callback.
      * Typically used to make soft navigation in your framework (React, NextJs, etc).
@@ -54,20 +44,28 @@ export interface HeaderProps {
      * url argument is the `homePageUrl` prop value.
      */
     onRequestHomePage?: (url: string) => void;
-    /**
-     * The URL of the site's home page. It will be used when the user clicks on the site's logo.
-     *
-     * PLEASE NOTE: If you want to use the SOFT navigation from your framework (React, NextJs, etc), you should
-     * path the `onRequestHomePage` prop and call the navigation method in the callback.
-     * e.g. for NextJs `onRequestHomePage={(url) => router.push(url)}`
-     * WARNING: Do not change or modify url argument inside your callback, because you will have undocumented behavior
-     * with your navigation. Your goal is only call the navigation method with the url argument.
-     * Default value is `/`.
-     * Without the `onRequestHomePage` prop, the component will use the default behavior of the anchor tag.
-     */
-    homePageUrl?: string;
     /** Called when an authenticated user clicks on the My Account link inside the main right HeaderChip */
     onRequestMyAccount?: () => void;
+    /** Called when an anonymous user clicks on the Sign In button inside the auxiliary links section */
+    onRequestSignIn?: () => void;
+    /** Called when an authenticated user clicks on the Sign Out button inside the main right HeaderChip */
+    onRequestSignOut?: () => void;
+    /**
+     * A React node with the search component containing:
+     * - A button to toggle the visibility of the search bar
+     * - A div with the search bar implementation
+     */
+    searchComponent?: ReactNode;
+    /**
+     * If the user is authenticated, pass their name and avatar image here
+     */
+    user?: User;
+    /**
+     * When enabled, it avoids setting ``document.location.href`` upon link clicks and you will be
+     * responsible for handling the navigation through the ``onLinkClick`` function.
+     * This enables soft navigation for apps that want to support it.
+     */
+    preventHardNavigation?: boolean;
 }
 /**
  * This is the default header for Sequencing.
@@ -75,6 +73,7 @@ export interface HeaderProps {
  * and two group of links. The main links are rendered on the left side of the bar,
  * next to the company's logo and the auxiliary links appear on the right side.
  * On the mobile view, all links appear stacked up in a slidein/slide-out menu.
+ * If want to use soft navigation for links, enable the ``preventHardNavigation`` flag.
  * The header is rendered on z-index 5.
  * When logged in, it will render a HeaderChip component with a link to the My Account page
  * and a button for sign-out.

package/dist/types/components/Organisms/Header/_components/HeaderChip/HeaderChip.d.ts

@@ -29,7 +29,7 @@ interface ChipProps {
      */
     showLabelStateIcon?: boolean;
     /** The HeaderChip button's label. Usually, it's the username */
-    label: string;
+    label?: string;
     /** The list of floating options to appear when the user clicks on the HeaderChip button */
     dropdownItems?: ChipDropdownItemProps[];
     /** Disable the click when set to `true` */

package/dist/types/components/Organisms/Header/_components/HeaderLink/HeaderLink.d.ts

@@ -0,0 +1,25 @@
+export interface HeaderLink {
+    /** Absolute or relative link URL. */
+    pathOrUrl?: string;
+    /** Link label. */
+    label: string;
+    /** Custom classname. */
+    className?: string;
+    /** Custom onClick, takes priority over main onLinkClick prop. */
+    onClick?: (url: string) => void;
+    /** A list of nested link objects. */
+    items?: Array<{
+        /** Absolute or relative link URL. */
+        pathOrUrl?: string;
+        /** Link label. */
+        label: string;
+        /** Custom classname. */
+        className?: string;
+        /** Custom onClick, takes priority over main onLinkClick prop. */
+        onClick?: (url: string) => void;
+    }>;
+}
+export declare const anonMainNavData: HeaderLink[];
+export declare const userMainNavData: HeaderLink[];
+export declare const userAuxiliaryNavData: HeaderLink[];
+export declare const anonAuxiliaryNavData: HeaderLink[];

package/dist/types/components/Organisms/Header/_components/HeaderLinkDropdown/HeaderLinkDropdown.d.ts

@@ -1,28 +1,6 @@
 import React from 'react';
-export interface HeaderLinkData {
-    /** Link path. Ignored if ``items`` prop is non-empty */
-    path: string;
-    /** Link label. */
-    label: string;
-    /** Custom classname. */
-    className?: string;
-    /** Custom onClick, takes priority over main onLinkClick prop. */
-    onClick?: (url: string) => void;
-    /** A list of nested link objects. */
-    items?: Array<{
-        /** Absolute URL, used for outside links. Will be ignored if ``path`` prop is non-empty. */
-        url?: string;
-        /** Relative URL, used for links with the app. Takes precedence over ``url`` prop. */
-        path?: string;
-        /** Link label. */
-        label: string;
-        /** Custom classname. */
-        className?: string;
-        /** Custom onClick, takes priority over main onLinkClick prop. */
-        onClick?: (url: string) => void;
-    }>;
-}
-interface HeaderLinkDropdownProps extends HeaderLinkData {
+import { HeaderLink } from '../HeaderLink/HeaderLink';
+interface HeaderLinkDropdownProps extends HeaderLink {
     /** Link click handler. */
     onLinkClick?: (url: string) => void;
 }

package/dist/types/components/Organisms/Header/_components/HeaderLinkSection/HeaderLinkSection.d.ts

@@ -1,10 +1,14 @@
 import { FC, ReactNode } from 'react';
-import { HeaderLinkData } from '../HeaderLinkDropdown/HeaderLinkDropdown';
+import { HeaderLink } from '../HeaderLink/HeaderLink';
 interface HeaderLinkSectionProps {
     /** List of links, or an element to display. */
-    links: ReactNode | HeaderLinkData[];
-    /** Link click handler. Will not be triggered if the ``links`` props is passed an element! */
+    links: ReactNode | HeaderLink[];
+    /** Link click handler. Will not be triggered if the ``links`` props is a ``ReactNode``
+     * or if ``preventHardNavigation`` is false.
+     */
     onLinkClick?: (url: string) => void;
+    /** Prevents setting ``document.location.href`` upon link clicks and instead, calls ``onLinkClick`` */
+    preventHardNavigation?: boolean;
 }
 /**
  * The HeaderLinkSection component is a block of links in the Header.

package/dist/types/components/Organisms/index.d.ts

@@ -1,4 +1,4 @@
 export type { HeaderProps, HeaderFunctions } from "./Header/Header";
-export type { HeaderLinkData } from "./Header/_components/HeaderLinkDropdown/HeaderLinkDropdown";
+export type { HeaderLink } from "./Header/_components/HeaderLink/HeaderLink";
 export { default as Header } from "./Header/Header";
 export { default as Footer } from "./Footer/Footer";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sequencing/design-system",
-	"version": "1.0.62",
+	"version": "1.0.63",
 	"description": "Sequencing Design System",
 	"scripts": {
 		"test": "echo \"Error: no test specified\"",