@eccenca/gui-elements 23.5.0 → 23.6.0-rc.1

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,7 +15,7 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
  */
 export const OverviewItemActions = ({
     children,
-    className = '',
+    className = "",
     hiddenInteractions = false,
     ...restProps
 }: OverviewItemActionsProps) => {
@@ -23,13 +24,13 @@ export const OverviewItemActions = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__actions` +
-                (hiddenInteractions ? ` ${eccgui}-overviewitem__actions--hiddeninteractions ` : '') +
-                (!!className ? ` ${className}` : '')
+                (hiddenInteractions ? ` ${eccgui}-overviewitem__actions--hiddeninteractions ` : "") +
+                (className ? ` ${className}` : "")
             }
         >
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemActions;

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import { Depiction } from "./../Depiction/Depiction";
 import Icon from "./../Icon/Icon";
 import TestIcon from "./../Icon/TestIcon";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDivElement> {
     // by default the SVG depictions are displayed light on dark color, this property prevents it
@@ -19,8 +21,8 @@ export const OverviewItemDepiction = ({
         // mimic OverviewItemDepiction "behaviour"
         border: false,
         backgroundColor: keepColors ? undefined : "dark",
-        ratio: "1:1" as "1:1",
-        padding: "medium" as "medium",
+        ratio: "1:1" as const,
+        padding: "medium" as const,
     };
     // only return Depiction element if it is wrapped inside OverviewItemDepiction
     if (typeof children === "object" && !!children && "type" in children && children.type === Depiction) {

package/src/components/OverviewItem/OverviewItemDescription.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface OverviewItemDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type OverviewItemDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
 
 export const OverviewItemDescription = ({
     children,
@@ -12,7 +13,7 @@ export const OverviewItemDescription = ({
         <div {...otherDivProps} className={`${eccgui}-overviewitem__description ` + className}>
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemDescription;

package/src/components/OverviewItem/OverviewItemLine.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemLineProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -20,9 +21,9 @@ export interface OverviewItemLineProps extends React.HTMLAttributes<HTMLDivEleme
  */
 export const OverviewItemLine = ({
     children,
-    className = '',
-    small=false,
-    large=false,
+    className = "",
+    small = false,
+    large = false,
     ...restProps
 }: OverviewItemLineProps) => {
     return (
@@ -30,14 +31,14 @@ export const OverviewItemLine = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__line ` +
-                (small ? `${eccgui}-overviewitem__line--small ` : '' ) +
-                (large ? `${eccgui}-overviewitem__line--large ` : '' ) +
+                (small ? `${eccgui}-overviewitem__line--small ` : "") +
+                (large ? `${eccgui}-overviewitem__line--large ` : "") +
                 className
             }
         >
             {children}
         </div>
-    )
-}
+    );
+};
 
 export default OverviewItemLine;

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
@@ -27,11 +28,11 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
  */
 export const OverviewItemList = ({
     children,
-    className = '',
+    className = "",
     densityHigh = false,
     hasDivider = false,
     hasSpacing = false,
-    columns=1,
+    columns = 1,
     ...restProps
 }: OverviewItemListProps) => {
     return (
@@ -39,20 +40,18 @@ export const OverviewItemList = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__list ` +
-                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : '') +
-                (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : '') +
-                (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : '') +
-                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // FIXME: Support numbers > 2
+                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : "") +
+                (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : "") +
+                (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : "") +
+                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : "") + // FIXME: Support numbers > 2
                 className
             }
         >
-            {
-                React.Children.map(children, (child) => {
-                    return <li>{ child }</li>
-                })
-            }
+            {React.Children.map(children, (child) => {
+                return <li>{child}</li>;
+            })}
         </ol>
-    )
-}
+    );
+};
 
 export default OverviewItemList;

package/src/components/OverviewItem/index.tsx

@@ -1,9 +1,9 @@
-import OverviewItem from './OverviewItem';
-import OverviewItemDepiction from './OverviewItemDepiction';
-import OverviewItemDescription from './OverviewItemDescription';
-import OverviewItemLine from './OverviewItemLine';
-import OverviewItemActions from './OverviewItemActions';
-import OverviewItemList from './OverviewItemList';
+import OverviewItem from "./OverviewItem";
+import OverviewItemActions from "./OverviewItemActions";
+import OverviewItemDepiction from "./OverviewItemDepiction";
+import OverviewItemDescription from "./OverviewItemDescription";
+import OverviewItemLine from "./OverviewItemLine";
+import OverviewItemList from "./OverviewItemList";
 
 export {
     OverviewItem,

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -1,21 +1,20 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
 
 import {
     Badge,
+    Card,
+    Depiction,
     OverviewItem,
     OverviewItemActions,
     OverviewItemDepiction,
     OverviewItemDescription,
-    Depiction,
-} from "./../../../index";
-
-import Card from "../../Card/Card";
-
+} from "./../../../../index";
+import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
+import { Default as ActionsExample } from "./OverviewItemActions.stories";
 import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
-import { Default as ActionsExample } from "./OverviewItemActions.stories";
-import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
     title: "Components/OverviewItem",
@@ -29,49 +28,57 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Elements used as depiction, text and interactive elements of an overview-item."
-        }
+            description: "Elements used as depiction, text and interactive elements of an overview-item.",
+        },
     },
-} as ComponentMeta<typeof OverviewItem>;
+} as Meta<typeof OverviewItem>;
 
-const Template: ComponentStory<typeof OverviewItem> = (args) => (
-    <OverviewItem {...args}></OverviewItem>
+const Template: StoryFn<typeof OverviewItem> = (args) => (
+    <OverlaysProvider>
+        <OverviewItem {...args} />
+    </OverlaysProvider>
 );
 
 export const ItemExample = Template.bind({});
 ItemExample.args = {
     children: [
-        <OverviewItemDepiction { ...DepictionExample.args } />,
-        <OverviewItemDescription { ...DescriptionExample.args } />,
-        <OverviewItemActions children={ ActionsExample.args.children[0] } hiddenInteractions />,
-        <OverviewItemActions children={ ActionsExample.args.children[1] } />
-    ]
-}
+        <OverviewItemDepiction {...DepictionExample.args} key="depiction" />,
+        <OverviewItemDescription {...DescriptionExample.args} key="description" />,
+        <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions key="hiddenactions" />,
+        <OverviewItemActions children={ActionsExample.args.children[1]} key="actions" />,
+    ],
+};
 
 export const ItemWithDepictionElement = Template.bind({});
 ItemWithDepictionElement.args = {
     children: [
         <Depiction
-            { ...OtherDepictionExample.args }
-            badge={<Badge position="top-right" intent="accent">B</Badge>}
+            {...OtherDepictionExample.args}
+            badge={
+                <Badge position="top-right" intent="accent">
+                    B
+                </Badge>
+            }
             ratio="1:1"
             resizing="stretch"
             captionPosition="tooltip"
             border
             rounded
         />,
-        <OverviewItemDescription { ...DescriptionExample.args } />,
-        <OverviewItemActions children={ ActionsExample.args.children[0] } hiddenInteractions />,
-        <OverviewItemActions children={ ActionsExample.args.children[1] } />
-    ]
-}
+        <OverviewItemDescription {...DescriptionExample.args} />,
+        <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions />,
+        <OverviewItemActions children={ActionsExample.args.children[1]} />,
+    ],
+};
 
-const TemplateCard: ComponentStory<typeof OverviewItem> = (args) => (
-    <Card isOnlyLayout><OverviewItem {...args}></OverviewItem></Card>
+const TemplateCard: StoryFn<typeof OverviewItem> = (args) => (
+    <Card isOnlyLayout>
+        <OverviewItem {...args}></OverviewItem>
+    </Card>
 );
 
 export const ItemInCard = TemplateCard.bind({});
 ItemInCard.args = {
     ...ItemExample.args,
     hasSpacing: true,
-}
+};

package/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx

@@ -1,31 +1,26 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import IconButton from "../../Icon/IconButton";
-import Button from "../../Button/Button";
-import ContextMenu from "../../ContextOverlay/ContextMenu";
+import { Meta, StoryFn } from "@storybook/react";
 
-import OverviewItemActions from "./../OverviewItemActions";
+import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../../index";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemActions",
-  component: OverviewItemActions,
-  subcomponents: { Button, IconButton, ContextMenu },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "User-interactive elements."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemActions>;
+    title: "Components/OverviewItem/OverviewItemActions",
+    component: OverviewItemActions,
+    subcomponents: { Button, IconButton, ContextMenu },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "User-interactive elements.",
+        },
+    },
+} as Meta<typeof OverviewItemActions>;
 
-const Template: ComponentStory<typeof OverviewItemActions> = (args) => (
-  <OverviewItemActions {...args}></OverviewItemActions>
-);
+const Template: StoryFn<typeof OverviewItemActions> = (args) => <OverviewItemActions {...args}></OverviewItemActions>;
 
 export const Default = Template.bind({});
 Default.args = {
     children: [
         <IconButton name="item-remove" tooltip="Remove this item" disruptive />,
-        <Button affirmative>Other action</Button>
-    ]
-}
+        <Button affirmative>Other action</Button>,
+    ],
+};

package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx

@@ -1,31 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Depiction, Icon, OverviewItemDepiction } from "../../../index";
+import { Meta, StoryFn } from "@storybook/react";
 
+import { Depiction, Icon, OverviewItemDepiction } from "./../../../../index";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemDepiction",
-  component: OverviewItemDepiction,
-  subcomponents: {Icon },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Element used as depiction."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemDepiction>;
+    title: "Components/OverviewItem/OverviewItemDepiction",
+    component: OverviewItemDepiction,
+    subcomponents: { Icon },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Element used as depiction.",
+        },
+    },
+} as Meta<typeof OverviewItemDepiction>;
 
-const Template: ComponentStory<typeof OverviewItemDepiction> = (args) => (
-  <OverviewItemDepiction {...args}></OverviewItemDepiction>
+const Template: StoryFn<typeof OverviewItemDepiction> = (args) => (
+    <OverviewItemDepiction {...args}></OverviewItemDepiction>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <><Icon name="artefact-dataset" /></>
-}
+    children: (
+        <>
+            <Icon name="artefact-dataset" />
+        </>
+    ),
+};
 
 export const UseDepictionElement = Template.bind({});
 UseDepictionElement.args = {
-    children: <Depiction {...DepictionExample.args} resizing="contain" />
-}
+    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+};

package/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx

@@ -1,32 +1,35 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
 
-import OverviewItemDescription from "./../OverviewItemDescription";
-import OverviewItemLine from "./../OverviewItemLine";
+import { OverviewItemDescription, OverviewItemLine } from "./../../../../index";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemDescription",
-  component: OverviewItemDescription,
-  subcomponents: {
-      OverviewItemLine
-  },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements for text content."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemDescription>;
+    title: "Components/OverviewItem/OverviewItemDescription",
+    component: OverviewItemDescription,
+    subcomponents: {
+        OverviewItemLine,
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements for text content.",
+        },
+    },
+} as Meta<typeof OverviewItemDescription>;
 
-const Template: ComponentStory<typeof OverviewItemDescription> = (args) => (
-  <OverviewItemDescription {...args}></OverviewItemDescription>
+const Template: StoryFn<typeof OverviewItemDescription> = (args) => (
+    <OverviewItemDescription {...args}></OverviewItemDescription>
 );
 
 export const Default = Template.bind({});
 Default.args = {
     children: [
-        <OverviewItemLine large><h4>Item title</h4></OverviewItemLine>,
-        <OverviewItemLine small><LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} /></OverviewItemLine>
-    ]
-}
+        <OverviewItemLine large>
+            <h4>Item title</h4>
+        </OverviewItemLine>,
+        <OverviewItemLine small>
+            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+        </OverviewItemLine>,
+    ],
+};

package/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx

@@ -1,25 +1,23 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
 
-import OverviewItemLine from "./../OverviewItemLine";
+import { OverviewItemLine } from "./../../../../index";
 
 export default {
-  title: "Components/OverviewItem/OverviewItemLine",
-  component: OverviewItemLine,
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements for line content."
-      }
-  },
-} as ComponentMeta<typeof OverviewItemLine>;
+    title: "Components/OverviewItem/OverviewItemLine",
+    component: OverviewItemLine,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements for line content.",
+        },
+    },
+} as Meta<typeof OverviewItemLine>;
 
-const Template: ComponentStory<typeof OverviewItemLine> = (args) => (
-  <OverviewItemLine {...args}></OverviewItemLine>
-);
+const Template: StoryFn<typeof OverviewItemLine> = (args) => <OverviewItemLine {...args}></OverviewItemLine>;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-}
+    children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />,
+};

package/src/components/OverviewItem/stories/OverviewItemList.stories.tsx

@@ -1,30 +1,24 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import {
-    OverviewItem,
-    OverviewItemList,
-} from "./../";
+import { Meta, StoryFn } from "@storybook/react";
 
+import { OverviewItem, OverviewItemList } from "./../../../../index";
 import { ItemExample } from "./OverviewItem.stories";
 
 export default {
     title: "Components/OverviewItem",
     component: OverviewItemList,
     subcomponents: {
-        OverviewItem
+        OverviewItem,
     },
     argTypes: {
         children: {
             control: "none",
-            description: "Should contain only `OverviewItem` elements, maybe wrapped inside cards."
-        }
+            description: "Should contain only `OverviewItem` elements, maybe wrapped inside cards.",
+        },
     },
-} as ComponentMeta<typeof OverviewItemList>;
+} as Meta<typeof OverviewItemList>;
 
-const Template: ComponentStory<typeof OverviewItemList> = (args) => (
-    <OverviewItemList {...args}></OverviewItemList>
-);
+const Template: StoryFn<typeof OverviewItemList> = (args) => <OverviewItemList {...args}></OverviewItemList>;
 
 export const ItemList = Template.bind({});
 ItemList.args = {
@@ -33,9 +27,9 @@ ItemList.args = {
     densityHigh: false,
     columns: 1,
     children: [
-        <OverviewItem { ...ItemExample.args } />,
-        <OverviewItem { ...ItemExample.args } />,
-        <OverviewItem { ...ItemExample.args } />,
-        <OverviewItem { ...ItemExample.args } />,
-    ]
-}
+        <OverviewItem {...ItemExample.args} />,
+        <OverviewItem {...ItemExample.args} />,
+        <OverviewItem {...ItemExample.args} />,
+        <OverviewItem {...ItemExample.args} />,
+    ],
+};

package/src/components/Pagination/Pagination.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
-import {
-    Pagination as CarbonPagination,
-    PaginationProps as CarbonPaginationProps,
-} from "carbon-components-react";
+import { Pagination as CarbonPagination, PaginationProps as CarbonPaginationProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface PaginationProps extends CarbonPaginationProps {
@@ -55,7 +53,7 @@ export const Pagination = ({
             }
         />
     );
-}
+};
 
 interface IPaginationDetails {
     total: number;
@@ -85,28 +83,36 @@ export const usePagination = ({
         current: 1,
         limit: initialPageSize ? initialPageSize : minSize,
         minPageSize: minSize,
-    })
+    });
     const [pagination, _setPagination] = useState<IPaginationDetails>(_pagination.current);
     const setPagination = React.useCallback((newPagination: IPaginationDetails) => {
         // Check if pagination has actually changed
-        const current = _pagination.current
-        if (newPagination.current !== current.current ||
+        const current = _pagination.current;
+        if (
+            newPagination.current !== current.current ||
             newPagination.minPageSize !== current.minPageSize ||
             newPagination.limit !== current.limit ||
-            newPagination.total !== current.total) {
-            _pagination.current = newPagination
-            _setPagination(newPagination)
+            newPagination.total !== current.total
+        ) {
+            _pagination.current = newPagination;
+            _setPagination(newPagination);
         }
-    }, [])
-    const onPaginationChange = React.useCallback(({ page, pageSize }: {page: any, pageSize: any}) => {
-        setPagination({ ..._pagination.current, current: page, limit: pageSize });
-    }, [setPagination]);
+    }, []);
+    const onPaginationChange = React.useCallback(
+        ({ page, pageSize }: { page: any; pageSize: any }) => {
+            setPagination({ ..._pagination.current, current: page, limit: pageSize });
+        },
+        [setPagination]
+    );
     // When the total number of pageable items changes, this function must be called
-    const onTotalChange = React.useCallback((total: number): void => {
-        if(_pagination.current.total !== total) {
-            setPagination({ ..._pagination.current, total: total, current: 1 });
-        }
-    }, [setPagination]);
+    const onTotalChange = React.useCallback(
+        (total: number): void => {
+            if (_pagination.current.total !== total) {
+                setPagination({ ..._pagination.current, total: total, current: 1 });
+            }
+        },
+        [setPagination]
+    );
     const paginationElement = (
         <Pagination
             onChange={onPaginationChange}