@equinor/echo-components 0.5.8-rc1 → 0.5.8-rc2

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

@@ -1,6 +1,6 @@
 import { Body, BodyProps } from './Body';
 import { DateSection, DateSectionProps } from './DateSection';
-import { EchoCard as BaseEchoCard } from './EchoCard';
+import { EchoCard as BaseEchoCard, EchoCardProps } from './EchoCard';
 import { LinkSection } from './LinkSection';
 import { Title, TitleProps } from './Title';
 declare type CardType = typeof BaseEchoCard & {
@@ -11,4 +11,4 @@ declare type CardType = typeof BaseEchoCard & {
 };
 declare const EchoCard: CardType;
 export { EchoCard };
-export type { TitleProps, DateSectionProps, BodyProps };
+export type { EchoCardProps, TitleProps, DateSectionProps, BodyProps };

package/dist/components/floatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface WithLabel {
+    variant: 'square_icon_with_text';
+    label: string;
+}
+interface WithoutLabel {
+    variant: 'circle_icon' | 'square_icon';
+    label?: never;
+}
+declare type MutuallyExclusiveVariantLabel = WithLabel | WithoutLabel;
+export declare type FloatingActionButtonProps = MutuallyExclusiveVariantLabel & {
+    iconName: string;
+    ariaLabel?: string;
+    /**
+     * Disable button if true
+     */
+    disabled?: boolean;
+    /**
+     * The method to be called when button is pressed
+     */
+    onClick: () => void;
+};
+/**
+ * Floating actions buttons exists within the viewport, seperated from any sheet, dialog or menu
+ * and are typically used for special actions pertaining to the module they are used in.
+ * @return {*}  {JSX.Element} Floating actions button
+ */
+declare const FloatingActionButton: React.FC<FloatingActionButtonProps>;
+export { FloatingActionButton };

package/dist/components/index.d.ts

@@ -1 +1,17 @@
+export * from './buttonWithPopover/ButtonWithPopover';
+export * from './contextMenu/ContextMenu';
+export * from './contextMenuPopover/DataInfoButton';
+export * from './datePicker/ReactDatePicker';
+export * from './dialogGenerator/DialogGenerator';
+export * from './dropdown/Dropdown';
+export * from './echoBottomBar/EchoBottomBar';
+export * from './echoCard/index';
+export * from './echoHeader/EchoHeader';
+export * from './inlineTagIconLink/InlineTagIconLink';
+export * from './listItem';
+export * from './floatingActionButton/FloatingActionButton';
+export * from './listRow/ListRow';
+export * from './sidebarButton/SidebarButton';
 export * from './sidesheet';
+export * from './tagContextMenu/TagContextMenu';
+export * from './timePicker/TimePicker';

package/dist/components/listItem/ListItem.d.ts

@@ -0,0 +1,50 @@
+import React, { CSSProperties } from 'react';
+interface VisualComponent {
+    icon?: never;
+    visual?: React.ReactNode;
+}
+interface IconOptions {
+    icon?: {
+        name: string;
+        color?: string;
+        backgroundColor?: string;
+    };
+    visual?: never;
+}
+/**
+ * Make property "icon" and "visual" mutually exclusive
+ */
+declare type WithVisualOrIconOptions = VisualComponent | IconOptions;
+interface ListItemBaseProps {
+    /**
+     * Add List Action Area
+     */
+    listAction?: React.ReactNode;
+    /**
+     * Main content Area
+     */
+    primary: string | React.ReactNode;
+    secondary?: string | React.ReactNode;
+    tertiary?: string | React.ReactNode;
+    /**
+     * Caption Area
+     */
+    caption?: string | React.ReactNode;
+    /**
+     * Add Item Action Area
+     */
+    itemAction?: React.ReactNode;
+    /**
+     * Change container element. Default is "li"
+     */
+    as?: React.ElementType;
+    onCardClick?: () => void;
+    /**
+     * Style Modification
+     */
+    className?: string;
+    style?: CSSProperties;
+}
+export declare type ListItemProps = ListItemBaseProps & WithVisualOrIconOptions;
+declare function ListItem(props: ListItemProps): JSX.Element;
+export { ListItem };

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

@@ -0,0 +1 @@
+export * from './ListItem';

package/dist/components/listRow/ListRow.d.ts

@@ -1,6 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { ExpandableRowProps } from '../../types/expandableRowProps';
-import { IconListItem } from '../../types/iconListItem';
+import { ExpandableRowProps, IconListItem } from '@types';
 export interface ListRowProps {
     isDraggable: boolean;
     item: IconListItem;

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;

package/dist/components/sidebarButton/SidebarButton.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export declare type ButtonType = 'rightBarButton' | 'bottomBarButton' | 'leftBarButton' | 'tabButton';
+export interface SidebarButtonProps {
+    text: string;
+    active: boolean;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * count must be bigger than 0.
+     */
+    count?: number;
+    buttonType: ButtonType;
+    refValue?: React.RefObject<HTMLButtonElement>;
+    id?: string;
+    children: React.ReactNode;
+}
+/**
+ * The reusable button component that is used in sidebars/bottom bar or as a tab button.
+ *
+ * On desktop it will have an active border on the left/right/top
+ * depending if ButtonType is set to: "rightBarButton"/"leftBarButton"/"bottomBarButton".
+ * The tabButton have the active border on the left.
+ *
+ * On mobile with the right sidebar, the active border will be on the bottom.
+ * In landscape mode with the bottom bar, the active border will be on the right.
+ *
+ *
+ * The button contains an icon and a descriptive text.
+ * @param {*} {
+ *     text: the text below the icon.
+ *     active: boolean describing the button's active state.
+ *     onClick: the onClick event.
+ *     count: used for the tabButton.
+ *     buttonType: decides which button type it is.
+ *     refValue: a reference value, in case it's needed.
+ *     id: the id of the button, in case it's needed.
+ *     children: the icon to be displayed.
+ * }
+ * @return {*}  {JSX.Element}
+ */
+export declare const SidebarButton: React.FC<SidebarButtonProps>;
+export default SidebarButton;

package/dist/elements/index.d.ts

@@ -0,0 +1,8 @@
+export * from './draggableItemsWrapper/DraggableItemsWrapper';
+export { Icon } from './icon/Icon';
+export { RadioButtonGroup } from './radioButtonGroup/RadioButtonGroup';
+export * from './roundIconButton/RoundIconButton';
+export { SliderField } from './sliderField/SliderField';
+export { TagIcon } from './tagIcon/TagIcon';
+export { TagIconShadowWrapper } from './tagIcon/TagIconShadow';
+export * from './textIconButton/TextIconButton';

package/dist/helpers/classnames.d.ts

@@ -0,0 +1,5 @@
+declare type ClassNameDynamic = {
+    [key: string]: boolean;
+};
+export declare function classnames(...parts: (string | ClassNameDynamic | undefined | boolean)[]): string | undefined;
+export {};

package/dist/helpers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classnames';
+export * from './getIcon';
+export * from './tagCategoryIcon';

package/dist/icons/echoAssets/data.d.ts

@@ -0,0 +1,3 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const sap_notifications: IconData;
+export declare const sap_workorders: IconData;

package/dist/icons/echoAssets/external.d.ts

@@ -0,0 +1,3 @@
+import { IconData } from '@equinor/eds-icons';
+export declare const timp: IconData;
+export declare const timp_text: IconData;

package/dist/icons/echoAssets/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data';
+export * from './external';

package/dist/icons/index.d.ts

@@ -0,0 +1 @@
+export * from './echoAssets';

package/dist/index.d.ts

@@ -1,28 +1,8 @@
+import './theme/theme.css';
 export * from './components';
-export { ButtonWithPopover } from './components/buttonWithPopover/ButtonWithPopover';
-export { ContextMenu } from './components/contextMenu/ContextMenu';
-export { DataInfoButton } from './components/contextMenuPopover/DataInfoButton';
-export { ReactDatePicker } from './components/datePicker/ReactDatePicker';
-export { DialogGenerator } from './components/dialogGenerator/DialogGenerator';
-export { Dropdown } from './components/dropdown/Dropdown';
-export { EchoBottomBar } from './components/echoBottomBar/EchoBottomBar';
-export { EchoCard } from './components/echoCard/index';
-export { EchoHeader } from './components/echoHeader/EchoHeader';
-export { InlineTagIconLink } from './components/inlineTagIconLink/InlineTagIconLink';
-export { ListRow } from './components/listRow/ListRow';
-export { TagContextMenu } from './components/tagContextMenu/TagContextMenu';
-export { TimePicker } from './components/timePicker/TimePicker';
-export { DraggableItemsWrapper } from './elements/draggableItemsWrapper/DraggableItemsWrapper';
-export { Icon } from './elements/icon/Icon';
-export { RadioButtonGroup } from './elements/radioButtonGroup/RadioButtonGroup';
-export * from './elements/roundIconButton/RoundIconButton';
-export { SliderField } from './elements/sliderField/SliderField';
-export { TagIcon } from './elements/tagIcon/TagIcon';
-export { TagIconShadowWrapper } from './elements/tagIcon/TagIconShadow';
-export { TextIconButton } from './elements/textIconButton/TextIconButton';
-export { getIcon } from './helpers/getIcon';
-export { IconList } from './structure/iconList/IconList';
-export { LinkCard } from './structure/linkCard/LinkCard';
+export * from './elements';
+export * from './helpers';
+export * from './icons';
+export * from './structure';
 export { themeConst } from './theme/themeConst';
 export * from './types';
-import './theme/theme.css';