@sequencing/design-system 1.0.30 → 1.0.32

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

@@ -28,13 +28,17 @@ export interface AppBarProps {
     isBeta?: boolean;
     /** Formatted date of the app's last update, it will appear after the text "Last Updated:" */
     lastUpdated?: string;
-    /** If provided, will render question mark icon after "Last Updated" content, with provided tooltip content appearing on click */
+    /**
+     * If provided, will render question mark icon after "Last Updated" content, with provided tooltip content appearing on click
+     * TODO: Use Popover https://sequencing.atlassian.net/browse/ENGR-4876
+     * */
     lastUpdatedTooltip?: ReactNode;
     /** Custom component to render on the right side */
     rightAddornment?: ReactNode;
     /**
      * Component to be displayed when the user clicks on the question mark icon.
      * If no content is provided, the icon doesn't appear.
+     * TODO: Use Popover https://sequencing.atlassian.net/browse/ENGR-4876
      */
     tooltipContent?: ReactNode;
     /** Application's version displayed on the right side of the bar. It's hidden on mobile */

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

@@ -0,0 +1,48 @@
+import React from "react";
+export interface PopoverContentProps {
+    /** Title of the popover */
+    title?: string;
+    /** Content of the popover */
+    children: React.ReactNode;
+}
+/**
+ * PopoverContent is a component that is used to display the content of the Popover. Title and content styles are predefined.
+ */
+export declare const PopoverContent: (props: PopoverContentProps) => React.JSX.Element;
+export interface PopoverProps {
+    /** Css class applied to the Popover for custom styling */
+    className?: string;
+    /** Element that will trigger the Popover */
+    children: React.ReactNode;
+    /**
+     * If `true`, the Popover will not have a maximum width. Default width and minimal width is 320px.
+     */
+    noMaxWidth?: boolean;
+    /**
+     * Content of the Popover. It can be a string or a React component.
+     * Please note that by default content has limit of 320px width and base result will be with text.
+     * If you want to use a custom content which could be larger please add noMaxWidth prop and control width of yourself.
+     * If you want to have our default experiences you could use PopoverContent component.
+     */
+    title?: React.ReactNode;
+}
+/**
+ * The Popover component is used to display content above the current page.
+ * It is not ready to be used everywhere, it needs to be improved.
+ * Position of the popover will be set automatically based on the position of the child element. By default, below the child.
+ * if there will not be enough space to show the popover below the child, it will be shown above the child.
+ * If there will not be enough space to show the popover above the child, it will be shown below the child and user
+ * must scroll to see the content.
+ * X position will be set automatically based on the position of the child element. By default, left.
+ * You might have problem with click if you add Popover inside label element.
+ *
+ * Why Popover not Tooltip? Tooltip is very simple and usually showing only small peas of text.
+ * Popover is more complex and could show more content as we do usually.
+ *
+ * Future improvements:
+ * 1. Open on Hover - not implemented
+ * 2. Reposition during scroll - not implemented
+ * 3. Control from outside - not implemented
+ */
+declare const Popover: (props: PopoverProps) => React.JSX.Element;
+export default Popover;

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

@@ -1,6 +1,8 @@
 export { default as Modal } from "./Modal/Modal";
 export { default as AppBar } from "./AppBar/AppBar";
 export { default as DatePicker } from "./DatePicker/DatePicker";
+export { default as Popover, PopoverContent } from "./Popover/Popover";
 export type { AppBarProps } from "./AppBar/AppBar";
 export type { ModalProps } from "./Modal/Modal";
 export type { DatePickerProps } from "./DatePicker/DatePicker";
+export type { PopoverProps, PopoverContentProps } from "./Popover/Popover";

package/package.json

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