@eccenca/gui-elements 23.0.0-rc.6 → 23.0.0-rc.7

package/src/components/Checkbox/Checkbox.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
-import { Checkbox as BlueprintCheckbox } from "@blueprintjs/core";
+import {
+    Checkbox as BlueprintCheckbox,
+    CheckboxProps as BlueprintCheckboxProps
+} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+interface CheckboxProps extends BlueprintCheckboxProps {
+    // currently we do not alter it
+};
+
 function Checkbox({
     children,
     className='',
     ...restProps
-}: any) {
+}: CheckboxProps) {
     return (
         <BlueprintCheckbox
             {...restProps}

package/src/components/Checkbox/Stories/Checkbox.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Checkbox, HtmlContentBlock } from "../../../../index";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+export default {
+    title: "Forms/Checkbox",
+    component:  Checkbox,
+    argTypes: {
+        onChange : {action : 'clicked'}
+    },
+} as ComponentMeta<typeof Checkbox>
+
+const Template:ComponentStory<typeof Checkbox>  = (args) => (
+    <Checkbox  {...args} />
+);
+
+export const SimpleTextLabel = Template.bind({});
+SimpleTextLabel.args = {
+    label : "Checkbox label",
+    inline : true,
+};
+
+export const ElementsAsLabel = Template.bind({});
+ElementsAsLabel.args = {
+    ...SimpleTextLabel.args,
+    label : undefined,
+    inline : false,
+    children: <HtmlContentBlock><LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} /></HtmlContentBlock>
+};

package/src/components/Checkbox/checkbox.scss

@@ -63,3 +63,7 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
         }
     }
 }
+
+.#{$ns}-control-indicator + * {
+    margin-top: -1 * $eccgui-size-typo-text * $eccgui-size-typo-text-lineheight;
+}

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -26,8 +26,8 @@ Default.args = {
     children: [
         <MenuItem key="m0" text={"First option"} />,
         <MenuItem key="m1" text={"Item two"}>
-            <MenuItem key="m0" text={"First sub option"} />
-            <MenuItem key="m1" text={"Sub item two"} />
+            <MenuItem key="m2" text={"First sub option"} />
+            <MenuItem key="m3" text={"Sub item two"} />
         </MenuItem>
     ]
 }

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,72 +1,12 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import Modal from "./../Modal";
-import Card from "../../Card/Card";
+import { Modal, Card } from "./../../../../index";
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
 export default {
     title: "Components/Dialog/Modal",
     component: Modal,
     argTypes: {
-        autoFocus: {
-            description: "Modal acquires application focus when it first opens.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
-        canEscapeKeyClose: {
-            description: "Pressing the `esc` key triggers `onClose` handler.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            }
-        },
-        canOutsideClickClose: {
-            description: "Clicking outside the modal triggers `onClose` handler.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            }
-        },
-        enforceFocus: {
-            description: "Prevent focus from leaving modal element. If an element outside the modal is focused then the modal will immediately bring focus back to itself. If you are nesting modal components, either disable this prop on the outermost modal or mark the nested ones `usePortal={false}`.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
-        isOpen: {
-            description: "Toggles the visibility of the overlay and its children, this prop is required because the component is controlled",
-        },
-        onClose: {
-            description: "A callback that is invoked when user interaction causes the modal to close.",
-            table: {
-                type: { summary: "(event: SyntheticEvent<HTMLElement>) => void" },
-                defaultValue: { summary: undefined },
-            }
-        },
-        shouldReturnFocusOnClose: {
-            description: "Return focus to the last active element in the document after modal closes.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
-        usePortal: {
-            description: "Whether the modal should be wrapped in a Portal, which renders its contents in a new element attached to `portalContainer` prop, by default to `document.body`.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
         children: {
             control: "none",
             description: "Elements to include into the modal container."

package/src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import SimpleDialog from "./../SimpleDialog";
+import { SimpleDialog } from "./../../../../index";
 import storyModal from "./Modal.stories";
 import { Default as CardContentExample } from "./../../Card/stories/CardContent.stories";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";

package/src/components/Form/FieldItem.tsx

@@ -14,15 +14,45 @@ import {TestableComponent} from "../interfaces";
 */
 
 export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
+    /**
+     * Set primary state.
+     * This is not routed through automatically.
+     */
     hasStatePrimary?: boolean
+    /**
+     * Set success state.
+     * This is not routed through automatically.
+     */
     hasStateSuccess?: boolean
+    /**
+     * Set warning state.
+     * This is not routed through automatically.
+     */
     hasStateWarning?: boolean
+    /**
+     * Set danger state.
+     * This is not routed through automatically.
+     */
     hasStateDanger?: boolean
-    children: JSX.Element | JSX.Element[] | null
-    className?: string
+    /**
+     * Is disabled.
+     * The included inout element nedd to set disabled directly itself.
+     * This is not routed through automatically.
+     */
     disabled?: boolean
+    /**
+     * Used to set properties for the `Label` element that is used.
+     */
     labelProps?: LabelProps
+    /**
+     * Text for user help.
+     * Is displayed between label and input element.
+     */
     helperText?: string | JSX.Element
+    /**
+     * Feedback notification.
+     * Is displayed below the included input element.
+     */
     messageText?: string
 }
 

package/src/components/Form/Stories/FieldItem.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { FieldItem, TextField } from '../../../../index';
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+export default {
+    title: "Forms/FieldItem",
+    component: FieldItem,
+    argTypes: {
+        children: {
+            control: "none",
+        },
+    }
+} as ComponentMeta<typeof FieldItem>;
+
+const Template: ComponentStory<typeof FieldItem> = (args) => (
+    <FieldItem {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+    children : <TextField />,
+    messageText : <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    helperText: <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
+    labelProps: {
+        text: "Input label"
+    }
+};

package/src/components/Form/Stories/FieldItemRow.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import FieldItem from '../FieldItem'
+import FieldItemRow from "../FieldItemRow";
+import { Default as FieldItemStory } from "./FieldItem.stories";
+
+export default {
+    title: "Forms/FieldItemRow",
+    component: FieldItemRow,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements to include into the Accordion component"
+        },
+    }
+
+} as ComponentMeta<typeof FieldItemRow>;
+
+const Template: ComponentStory<typeof FieldItemRow> = (args) => (
+    <FieldItemRow {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+    children : [
+        <>
+            <FieldItem {...FieldItemStory.args}/>
+            <FieldItem {...FieldItemStory.args}/>
+            <FieldItem {...FieldItemStory.args}/>
+        </>
+    ]
+};

package/src/components/Label/Label.stories.tsx

@@ -7,7 +7,7 @@ import {
 } from "../../index";
 
 export default {
-  title: "Components/Label",
+  title: "Forms/Label",
   component: Label,
   argTypes: {
   },

package/src/components/Menu/Menu.tsx

@@ -1,9 +1,27 @@
 import React from 'react';
-import { Menu as BlueprintMenu } from "@blueprintjs/core";
+import {
+    Menu as BlueprintMenu,
+    MenuProps as BlueprintMenuProps,
+} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function Menu({children, className='', ...restProps}: any) {
-    return <BlueprintMenu {...restProps} className={`${eccgui}-menu__list ` + className}>{children}</BlueprintMenu>;
+export interface MenuProps extends BlueprintMenuProps {
+    // we do not add own changes here currently
+}
+
+function Menu({
+    children,
+    className="",
+    ...restProps
+}: MenuProps) {
+    return (
+        <BlueprintMenu
+            {...restProps}
+            className={`${eccgui}-menu__list ` + className}
+        >
+            {children}
+        </BlueprintMenu>
+    );
 }
 
 export default Menu;

package/src/components/Menu/MenuDivider.tsx

@@ -1,9 +1,26 @@
 import React from 'react';
-import { MenuDivider as BlueprintMenuDivider } from "@blueprintjs/core";
+import {
+    MenuDivider as BlueprintMenuDivider,
+    MenuDividerProps as BlueprintMenuDividerProps,
+} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function MenuDivider({children, className='', ...restProps}: any) {
-    return <BlueprintMenuDivider {...restProps} className={`${eccgui}-menu__divider ` + className}>{children}</BlueprintMenuDivider>;
+export interface MenuDividerProps extends BlueprintMenuDividerProps {
+    // we do not add own changes here currently
+}
+
+function MenuDivider({
+    children,
+    className="",
+    ...restProps
+}: MenuDividerProps) {
+    return (
+        <BlueprintMenuDivider
+            {...restProps}
+            className={`${eccgui}-menu__divider ` + className}>
+            {children}
+        </BlueprintMenuDivider>
+    );
 }
 
 export default MenuDivider;

package/src/components/Menu/MenuItem.tsx

@@ -5,22 +5,25 @@ import Icon from '../Icon/Icon';
 import { openInNewTab } from '../../common/utils/openInNewTab';
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target"> {
+export interface MenuItemProps extends Omit<BlueprintMenuItemProps, "icon" | "children">, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "children"> {
     /*
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[];
+    children?: React.ReactNode
 }
 
-/** A single item in a Menu. */
+/**
+ * Single item, used as child inside `Menu`.
+ */
 function MenuItem({
-                      children,
-                      className = '',
-                      icon,
-                      onClick,
-                      href,
-                      ...restProps
-                  }: MenuItemProps) {
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    ...restProps
+}: MenuItemProps) {
     return (
         <BlueprintMenuItem
             {...restProps}
@@ -31,7 +34,7 @@ function MenuItem({
                 icon ? <Icon name={icon} /> : false
             }
         >
-            {children}
+            {children ?? null}
         </BlueprintMenuItem>
     );
 }

package/src/components/Menu/Stories/Menu.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Menu, MenuItem, MenuDivider } from "../../../../index";
+import { Default as MenuItemStory } from '../Stories/MenuItem.stories';
+import { Default as ContentMenuStory } from '../../ContextOverlay/ContextMenu.stories';
+
+export default {
+    title: "Components/Menu",
+    component: Menu,
+    subcomponents: {MenuItem, MenuDivider},
+    argTypes: {
+        children: {
+            control: "none",
+        },
+    }
+} as ComponentMeta<typeof Menu>
+
+const MenuExample: ComponentStory<typeof Menu> = (args) => (
+    <Menu style={{width: "200px"}} {...args} />
+);
+
+export const Default  = MenuExample.bind({});
+Default.args = {
+    children : (
+        <>
+            {ContentMenuStory.args.children}
+            <MenuDivider title ="Second menu part"/>
+            <MenuItem {...MenuItemStory.args} selected />
+        </>
+    ),
+};

package/src/components/Menu/Stories/MenuItem.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Menu, MenuItem } from "../../../../index";
+export default {
+    title: "Components/Menu/MenuItem",
+    component: MenuItem,
+    argTypes: {
+    }
+} as ComponentMeta<typeof MenuItem>
+
+const MenuExample: ComponentStory<typeof MenuItem> = (args) => (
+    <Menu style={{width: "200px"}}><MenuItem {...args} /></Menu>
+);
+
+export const Default  = MenuExample.bind({});
+Default.args = {
+    children: (
+        <>
+        <MenuItem key="m6" text={"Sub option 1"} />
+        <MenuItem key="m6" text={"Sub option 2"} />
+        </>
+    ),
+    text: "Parent option",
+    key: "m4"
+};

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -1,32 +1,13 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
-
-import MultiSelectExample from "./MultiSelect";
+import { MultiSelect as MultiSelectExample } from "./../../../index";
 
 export default {
-    title: "Components/MultiSelect",
+    title: "Forms/MultiSelect",
     component: MultiSelectExample,
     argTypes: {
-        placeholder: {
-            description: "Input placeholder text",
-            control: "text",
-            table: {
-                type: { summary: "string" },
-            },
-        },
-        openOnKeyDown: {
-            description:
-                "If true, the component waits until a keydown event in the TagInput before opening its popover. If false, the popover opens immediately after a mouse click focuses the component's TagInput ",
-            control: "boolean",
-            defaultValue: false,
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            },
-        },
         items: {
-            description: "Array of items in the list",
             control: "none",
         },
     },

package/src/components/MultiSelect/MultiSelect.tsx

@@ -126,6 +126,7 @@ function MultiSelect<T>({
     ...otherProps
 }: IProps<T>) {
     const [createdItems, setCreatedItems] = React.useState<T[]>([]);
+    const [createdSelectedItems, setCreatedSelectedItems] = React.useState<T[]>([]);
     const [itemsCopy, setItemsCopy] = React.useState<T[]>([...items]);
     const [filteredItemList, setFilteredItemList] = React.useState<T[]>([]);
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() => (prePopulateWithItems ? [...items] : []));
@@ -165,14 +166,14 @@ function MultiSelect<T>({
         onSelection &&
             onSelection({
                 newlySelected: selectedItems.slice(-1)[0],
-                createdItems,
+                createdItems: createdSelectedItems,
                 selectedItems,
             });
         /* eslint-disable react-hooks/exhaustive-deps */
     }, [
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
-        createdItems.map((item) => itemId(item)).join("|"),
+        createdSelectedItems.map((item) => itemId(item)).join("|"),
     ]);
 
     /**
@@ -192,18 +193,34 @@ function MultiSelect<T>({
         setSelectedItems((items) => items.filter((item) => itemId(item) !== matcher));
     };
 
+    
+
     /**
      * selects and deselects an item from selection list
      * if the item exists it removes it instead
      * @param item
      */
     const onItemSelect = (item: T) => {
+    
         if (itemHasBeenSelectedAlready(itemId(item))) {
             removeItemSelection(itemId(item));
         } else {
             setSelectedItems((items) => [...items, item]);
         }
-        inputRef.current?.select()
+        
+        //remove if already exist
+        if (createdSelectedItems.find((t) => itemLabel(t) === itemLabel(item))) {
+           setCreatedSelectedItems((prevItems) => prevItems.filter(prevItem => itemLabel(prevItem) !== itemLabel(item)))
+        }else {
+            const wasNewlyCreated = createdItems.find((t) => itemLabel(t) === itemLabel(item));
+            //only add to createdSelectedItems if it was previously created and not 
+            // from the initial items or a possible query response 
+            if(wasNewlyCreated){
+                 setCreatedSelectedItems((prevItems) =>[...prevItems, item])
+            }
+        }
+ 
+        inputRef.current?.select();
     };
 
     /**
@@ -266,7 +283,7 @@ function MultiSelect<T>({
      */
     const removeTagFromSelectionViaIndex = (label: React.ReactNode, index: number) => {
         setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
-        setCreatedItems(items => items.filter(item => itemLabel(item) !== label));
+        setCreatedSelectedItems(items => items.filter(item => itemLabel(item) !== label));
     };
 
     /**
@@ -276,8 +293,8 @@ function MultiSelect<T>({
         const newItem = createNewItemFromQuery!!(query);
         //set new items
         setCreatedItems((items) => [...items, newItem]);
+        setCreatedSelectedItems((items) => [...items, newItem])
         setQuery("");
-        itemsCopy.push(newItem);
         return newItem;
     };
 

package/src/components/Notification/Notification.stories.tsx

@@ -1,40 +1,12 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LoremIpsum } from 'react-lorem-ipsum';
-
-import Notification from "./Notification";
-import HtmlContentBlock from "./../Typography/HtmlContentBlock";
-import Button from "./../Button/Button";
-import Spacing from "./../Separation/Spacing";
+import { Notification, HtmlContentBlock, Button, Spacing} from "../../../index";
 
 export default {
     title: "Components/Notification",
     component: Notification,
     argTypes: {
-        className: {
-            description: "A space-delimited list of class names.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        onDismiss: {
-            description: "Callback invoked when the toast is dismissed, either by the user or by the timeout.",
-            control: "none",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "(didTimeoutExpire: boolean) => void" },
-            }
-        },
-        timeout: {
-            description: "Milliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout.",
-            control: "number",
-            table: {
-                defaultValue: { summary: 0 },
-                type: { summary: "number" },
-            }
-        },
         message: {
             control: "none",
         },

package/src/components/Pagination/Pagination.tsx

@@ -1,22 +1,29 @@
 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";
 
-interface PaginationProps extends CarbonPaginationProps {
+export interface PaginationProps extends CarbonPaginationProps {
     /**
-     Hide the select option to set how many items per page are displayed.
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Hide dropdown to select how many items will be shown per page.
      */
     hidePageSizeConfiguration?: boolean;
     /**
-     Hide info about the item numbers that are currently displayed.
+     * Hide info block about the section of the displayed items.
      */
     hideInfoText?: boolean;
     /**
-     Hide select box to switch between pages.
+     * Hide dropdown to select page number directly.
      */
     hidePageSelect?: boolean;
     /**
-     Hide buttons to switch beteen nex/prev pages.
+     * Hide prev/next arrows to navigate through the pages.
      */
     hideNavigationArrows?: boolean;
 }

package/src/components/Pagination/Stories/Pagination.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Pagination } from "../../../../index";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+export default {
+    title: "Components/Pagination",
+    component: Pagination,
+    argTypes: {
+    }
+} as ComponentMeta<typeof Pagination>
+
+const PaginationExample = (args) => (
+    <Pagination {...args}/>
+);
+
+export const Default : ComponentStory<typeof Pagination> = PaginationExample.bind({});
+Default.args = {
+    pageSizes:[10,20,50,100],
+    totalItems : 60,
+    backwardText:"Previous page",
+    forwardText : "Next page",
+};
+
+export const ExtendedPagesizeSelection : ComponentStory<typeof Pagination> = PaginationExample.bind({});
+ExtendedPagesizeSelection.args = {
+    ...Default.args,
+    pageSizes:[
+       {text: "10", value : "10"},
+       {text: "20", value : "25"},
+       {text: "50", value : "50"},
+       {text : 'Large page with 100 items' , value : "100"}
+    ],
+};