@equinor/fusion-framework-react-components-bookmark 1.0.8 → 1.0.10

package/src/components/messages/Message.tsx

@@ -1,6 +1,6 @@
 import { Icon, Typography } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import { error_outlined, file_description } from '@equinor/eds-icons';
@@ -8,25 +8,25 @@ import { error_outlined, file_description } from '@equinor/eds-icons';
 export type PortalMessageType = 'Error' | 'Info' | 'Warning' | 'NoContent';
 
 const getMessageType = (type?: PortalMessageType) => {
-    switch (type) {
-        case 'Error':
-            return { color: tokens.colors.interactive.danger__resting.hex, icon: error_outlined };
-        case 'Info':
-            return { color: tokens.colors.interactive.primary__resting.hex, icon: error_outlined };
-        case 'Warning':
-            return { color: tokens.colors.interactive.warning__resting.hex, icon: error_outlined };
-        case 'NoContent':
-            return {
-                color: tokens.colors.interactive.primary__resting.hex,
-                icon: file_description,
-            };
-        default:
-            return undefined;
-    }
+  switch (type) {
+    case 'Error':
+      return { color: tokens.colors.interactive.danger__resting.hex, icon: error_outlined };
+    case 'Info':
+      return { color: tokens.colors.interactive.primary__resting.hex, icon: error_outlined };
+    case 'Warning':
+      return { color: tokens.colors.interactive.warning__resting.hex, icon: error_outlined };
+    case 'NoContent':
+      return {
+        color: tokens.colors.interactive.primary__resting.hex,
+        icon: file_description,
+      };
+    default:
+      return undefined;
+  }
 };
 
 const Styles = {
-    Wrapper: styled.div`
+  Wrapper: styled.div`
         width: 100%;
         height: 100%;
         display: flex;
@@ -35,7 +35,7 @@ const Styles = {
         gap: 1rem;
         justify-content: center;
     `,
-    Content: styled.div`
+  Content: styled.div`
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -45,38 +45,38 @@ const Styles = {
 };
 
 type MessageProps = {
-    readonly title: string;
-    readonly body?: React.FC | string;
-    readonly type?: PortalMessageType;
-    readonly color?: string;
+  readonly title: string;
+  readonly body?: React.FC | string;
+  readonly type?: PortalMessageType;
+  readonly color?: string;
 };
 
 export const Message = ({
-    title,
-    type = 'Info',
-    color,
-    children,
+  title,
+  type = 'Info',
+  color,
+  children,
 }: PropsWithChildren<MessageProps>) => {
-    const currentType = getMessageType(type);
-    return (
-        <Styles.Wrapper>
-            <Icon
-                data-testid="icon"
-                size={40}
-                color={currentType?.color || color || tokens.colors.text.static_icons__tertiary.hex}
-                data={currentType?.icon || error_outlined}
-            />
-            <Styles.Content>
-                <Typography
-                    color={tokens.colors.text.static_icons__default.hex}
-                    variant={'h3'}
-                    aria-label={`Title for ${type} message`}
-                >
-                    {title}
-                </Typography>
+  const currentType = getMessageType(type);
+  return (
+    <Styles.Wrapper>
+      <Icon
+        data-testid="icon"
+        size={40}
+        color={currentType?.color || color || tokens.colors.text.static_icons__tertiary.hex}
+        data={currentType?.icon || error_outlined}
+      />
+      <Styles.Content>
+        <Typography
+          color={tokens.colors.text.static_icons__default.hex}
+          variant={'h3'}
+          aria-label={`Title for ${type} message`}
+        >
+          {title}
+        </Typography>
 
-                <Typography>{children && children}</Typography>
-            </Styles.Content>
-        </Styles.Wrapper>
-    );
+        <Typography>{children && children}</Typography>
+      </Styles.Content>
+    </Styles.Wrapper>
+  );
 };

package/src/components/row/MoreMenu.tsx

@@ -1,34 +1,34 @@
 import { Menu } from '@equinor/eds-core-react';
-import { MutableRefObject } from 'react';
-import { MenuOption } from './Row';
+import type { MutableRefObject } from 'react';
+import type { MenuOption } from './Row';
 
 type MenuProps = {
-    readonly pRef: MutableRefObject<HTMLElement | null>;
-    readonly onClose: VoidFunction;
-    readonly open: boolean;
-    readonly options: MenuOption[];
+  readonly pRef: MutableRefObject<HTMLElement | null>;
+  readonly onClose: VoidFunction;
+  readonly open: boolean;
+  readonly options: MenuOption[];
 };
 
 export const MoreMenu = ({ pRef, onClose, open, options }: MenuProps) => {
-    return (
-        <Menu open={open} anchorEl={pRef.current}>
-            {options.map(({ onClick, name, disabled, Icon }) => (
-                <Menu.Item
-                    disabled={disabled}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        onClick();
-                        onClose();
-                    }}
-                    key={name}
-                >
-                    <>
-                        {Icon && Icon}
-                        {name}
-                    </>
-                </Menu.Item>
-            ))}
-        </Menu>
-    );
+  return (
+    <Menu open={open} anchorEl={pRef.current}>
+      {options.map(({ onClick, name, disabled, Icon }) => (
+        <Menu.Item
+          disabled={disabled}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick();
+            onClose();
+          }}
+          key={name}
+        >
+          <>
+            {Icon && Icon}
+            {name}
+          </>
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
 };

package/src/components/row/Row.tsx

@@ -1,7 +1,7 @@
 import { Icon, Typography } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
 import { useOutsideClick } from '@equinor/eds-utils';
-import { MutableRefObject, ReactNode, useCallback, useRef } from 'react';
+import { type MutableRefObject, type ReactNode, useCallback, useRef } from 'react';
 import { MoreMenu } from './MoreMenu';
 
 import styled from 'styled-components';
@@ -9,29 +9,29 @@ import { useBookmarkComponentContext } from '../BookmarkProvider';
 import { from } from 'rxjs';
 
 export type MenuOption = {
-    name: string;
-    disabled: boolean;
-    onClick: VoidFunction;
-    Icon?: ReactNode;
+  name: string;
+  disabled: boolean;
+  onClick: VoidFunction;
+  Icon?: ReactNode;
 };
 
 type RowProps = {
-    readonly name: string;
-    readonly id: string;
-    readonly menuOpen: boolean;
-    readonly onMenuOpen: (id: string) => void;
-    readonly menuOptions: MenuOption[];
-    readonly children?: ReactNode;
+  readonly name: string;
+  readonly id: string;
+  readonly menuOpen: boolean;
+  readonly onMenuOpen: (id: string) => void;
+  readonly menuOptions: MenuOption[];
+  readonly children?: ReactNode;
 };
 
 const Styled = {
-    Icons: styled.div`
+  Icons: styled.div`
         display: flex;
         flex-direction: row;
         gap: 0.2em;
         align-items: center;
     `,
-    ListItem: styled.div`
+  ListItem: styled.div`
         cursor: pointer;
         &:hover {
             background-color: ${tokens.colors.ui.background__light.hex};
@@ -48,51 +48,51 @@ const Styled = {
 };
 
 export const Row = ({ name, menuOptions, children, id, menuOpen, onMenuOpen }: RowProps) => {
-    const pRef = useRef<HTMLElement | null>(null);
-    const { provider } = useBookmarkComponentContext();
+  const pRef = useRef<HTMLElement | null>(null);
+  const { provider } = useBookmarkComponentContext();
 
-    const onListItemClick = useCallback(
-        (e: React.MouseEvent) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (provider) {
-                from(provider.setCurrentBookmark(id)).subscribe();
-            }
-        },
-        [provider, id],
-    );
+  const onListItemClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (provider) {
+        from(provider.setCurrentBookmark(id)).subscribe();
+      }
+    },
+    [provider, id],
+  );
 
-    useOutsideClick(pRef.current, () => onMenuOpen(''));
+  useOutsideClick(pRef.current, () => onMenuOpen(''));
 
-    // TODO: @noggling fix this
-    return (
-        /* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions*/
-        <Styled.ListItem onClick={onListItemClick}>
-            <Typography>{name}</Typography>
-            <Styled.Icons>
-                {children}
-                {!!menuOptions?.length && (
-                    <Icon
-                        name="more_vertical"
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onMenuOpen(id);
-                        }}
-                        color={tokens.colors.interactive.primary__resting.hex}
-                        ref={pRef as unknown as MutableRefObject<SVGSVGElement>}
-                    />
-                )}
+  // TODO: @noggling fix this
+  return (
+    /* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions*/
+    <Styled.ListItem onClick={onListItemClick}>
+      <Typography>{name}</Typography>
+      <Styled.Icons>
+        {children}
+        {!!menuOptions?.length && (
+          <Icon
+            name="more_vertical"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onMenuOpen(id);
+            }}
+            color={tokens.colors.interactive.primary__resting.hex}
+            ref={pRef as unknown as MutableRefObject<SVGSVGElement>}
+          />
+        )}
 
-                <MoreMenu
-                    open={menuOpen}
-                    options={menuOptions}
-                    onClose={() => {
-                        onMenuOpen('');
-                    }}
-                    pRef={pRef}
-                />
-            </Styled.Icons>
-        </Styled.ListItem>
-    );
+        <MoreMenu
+          open={menuOpen}
+          options={menuOptions}
+          onClose={() => {
+            onMenuOpen('');
+          }}
+          pRef={pRef}
+        />
+      </Styled.Icons>
+    </Styled.ListItem>
+  );
 };

package/src/components/section/Section.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Button, Icon, Typography } from '@equinor/eds-core-react';
 import { chevron_down, chevron_right } from '@equinor/eds-icons';
 
@@ -7,7 +7,7 @@ import { tokens } from '@equinor/eds-tokens';
 import styled from 'styled-components';
 
 const Styled = {
-    Button: styled(Button)`
+  Button: styled(Button)`
         width: 100%;
         padding: 0;
         padding-top: 0.5rem;
@@ -23,7 +23,7 @@ const Styled = {
             background: none;
         }
     `,
-    List: styled.ol`
+  List: styled.ol`
         margin-left: 0.7rem;
         padding-left: 1rem;
         display: flex;
@@ -34,24 +34,24 @@ const Styled = {
 };
 
 Icon.add({
-    chevron_down,
-    chevron_right,
+  chevron_down,
+  chevron_right,
 });
 
 type SectionProps = {
-    readonly name: string;
-    readonly children: ReactNode;
+  readonly name: string;
+  readonly children: ReactNode;
 };
 export const Section = ({ children, name }: SectionProps) => {
-    const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(true);
 
-    return (
-        <div>
-            <Styled.Button variant="ghost" onClick={() => setIsExpanded((s) => !s)}>
-                <Icon name={isExpanded ? chevron_down.name : chevron_right.name} />
-                <Typography variant="h6">{name}</Typography>
-            </Styled.Button>
-            {isExpanded && <Styled.List>{children}</Styled.List>}
-        </div>
-    );
+  return (
+    <div>
+      <Styled.Button variant="ghost" onClick={() => setIsExpanded((s) => !s)}>
+        <Icon name={isExpanded ? chevron_down.name : chevron_right.name} />
+        <Typography variant="h6">{name}</Typography>
+      </Styled.Button>
+      {isExpanded && <Styled.List>{children}</Styled.List>}
+    </div>
+  );
 };