@equinor/echo-components 0.5.10 → 0.5.11

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './floatingSearchBar/FloatingSearchBar';
 export * from './inlineTagIconLink/InlineTagIconLink';
 export * from './listItem';
 export * from './listRow/ListRow';
+export * from './rightPanel';
 export * from './sidebarButton/SidebarButton';
 export * from './sidesheet';
 export * from './splitView';

package/dist/components/rightPanel/PanelContextWrapper.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PanelSize } from '../../types/menuItem';
+export interface PanelContextState {
+    activePanel: string | undefined;
+    panelSize: PanelSize;
+    updateActivePanel: (newActivePanel: string | undefined) => void;
+    updatePanelSize: (newPanelSize: PanelSize) => void;
+}
+/**
+ * Panel context with default initialized values
+ *
+ */
+export declare const PanelContext: React.Context<PanelContextState>;
+/**
+ * The panel context wrapper that should be used within Panel component to store the state of the panel
+ *
+ */
+export declare const PanelContextWrapper: React.FC;
+export default PanelContextWrapper;

package/dist/components/rightPanel/index.d.ts

@@ -0,0 +1,5 @@
+export * from './menuButton/MenuButton';
+export * from './panel/Panel';
+export * from './panelContent/PanelContent';
+export * from './panelWrapper/PanelWrapper';
+export * from './usePanelContext';

package/dist/components/rightPanel/menuButton/MenuButton.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface MenuButtonProps {
+    text: string;
+    active: boolean;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    children: React.ReactNode;
+    refValue?: React.RefObject<HTMLButtonElement>;
+    id?: string;
+}
+/**
+ * The menu bottom items
+ * On desktop it will have an active border on the left,
+ * and on mobile the active border will be on the bottom
+ * Contains an icon and a descriptive text
+ * @param {*} {
+ *     text, the text below the icon, also displayed on hover
+ *     active, boolean describing the buttons active state
+ *     children, the icon to be displayed
+ *     onClick, the on click event
+ *     refValue, a reference value in case its needed
+ *     id: the id of the button in case its needed
+ * }
+ * @return {*}  {JSX.Element}
+ */
+declare const MenuButton: React.FC<MenuButtonProps>;
+export default MenuButton;

package/dist/components/rightPanel/panel/Panel.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MenuItem } from '../../../types/menuItem';
+interface PanelProps {
+    menuItems: MenuItem[];
+    header: string | React.ReactNode;
+}
+/**
+ * The actual right side panel. This component wraps the panel with a panel state
+ *
+ * @param {PanelProps} {
+ * menuItems, the items to be displayed in the menu and its belonging panels
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const Panel: React.FC<PanelProps>;
+export default Panel;

package/dist/components/rightPanel/panelContent/PanelContent.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface PanelContentProps {
+    header: string;
+    children: React.ReactNode;
+    backToMainPanel?: () => void;
+}
+/**
+ * The component that wraps the panel drawer content
+ * This components displays a header with close and possible back button
+ * It also displays the content wrapped with some css
+ *
+ * @param {PanelContentProps} {
+ *     header, the header text to display
+ *     children, the panels content
+ *     backToMainPanel: optional parameter that controls whether the panel should have a back button or not
+ *      to be used in cases where there are panels within panels
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const PanelContent: React.FC<PanelContentProps>;
+export default PanelContent;

package/dist/components/rightPanel/panelWrapper/PanelWrapper.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { MenuItem } from '../../../types/menuItem';
+interface PanelWrapperProps {
+    menuItems: MenuItem[];
+    header: string | React.ReactNode;
+}
+/**
+ * Component that display's the buttons in a panel. It will automatically try to calculate how many buttons to display
+ * and how many buttons to hide behind the more menu.
+ * It controls which panel to display when a button is clicked
+ * On desktop this component will render on the right side, and on the top in mobile view
+ *
+ * @param {*} {
+ * menuItems, the items to be displayed in the menu and its belonging panels
+ * header, the header that will be displayed on mobile.
+ * If its a string then it will only display a header text. But it can also be a component with self defined html
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const PanelWrapper: React.FC<PanelWrapperProps>;
+export default PanelWrapper;

package/dist/components/rightPanel/usePanelContext.d.ts

@@ -0,0 +1,8 @@
+import { PanelContextState } from './PanelContextWrapper';
+/**
+ * Hook that exposes panel context, if not used within a PanelContext this hook will throw an error
+ *
+ * @export
+ * @return {*}  {PanelContextState} Returns the existing panel context or throws error if not used within a PanelContext
+ */
+export declare function usePanelContext(): PanelContextState;