@sequencing/design-system 1.0.50 → 1.0.52

package/dist/types/components/Atoms/Link/Link.d.ts

@@ -1,7 +1,13 @@
 import React, { PropsWithChildren } from "react";
 export type CustomLink = {
-    label: string;
+    /** Link's url */
     url?: string;
+    /** Link's label */
+    label: string;
+    /**
+     * The callback function for when the link is clicked.
+     * Note it suppress the native HTML event and only returns the set `url`
+    */
     onClick?: (url?: string) => void;
 };
 export interface LinkProps {

package/dist/types/components/Molecules/PageSelector/PageSelector.d.ts

@@ -1,5 +1,12 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { CustomLink } from "../../Atoms/Link/Link";
+type CustomLinkWithIcon = CustomLink & {
+    /**
+     * You can pass any React element to be rendered as an addornment. Note you'll have full control over this property,
+     * meaning you are responsible for placing in the page selector
+    */
+    addornment?: ReactNode;
+};
 interface PageSelectorProps {
     /**
      * If pageLinks' length is greater than this value, only mobile views, a fly over menu will appear
@@ -8,10 +15,11 @@ interface PageSelectorProps {
     */
     minimumLinksToDisplayFlyOverMenu?: number;
     /**
-     * Array of `CustomLink` to work as page selectors
+     * Array of `CustomLink` to work as page selectors plus an optional ReactNode
+     * that can be used as an addornment for the page selector
      * @see {@link CustomLink}
     */
-    pageLinks: CustomLink[];
+    pageLinks: CustomLinkWithIcon[];
     /**
      * The index of the selected `pageLink`. This item will appear in a `selected` state.
      * The look and feel of the item is determined by the `variant`.

package/package.json

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