@eccenca/gui-elements 23.0.0-rc.1 → 23.0.0-rc.2

package/src/components/Button/Button.tsx

@@ -52,7 +52,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
     /**
     * Object with additional properties for the tooltip.
     */
-    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>;
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
     */
@@ -79,7 +79,7 @@ function Button({
   icon,
   rightIcon,
   tooltip = null,
-  tooltipProperties,
+  tooltipProps,
   ...restProps
 }: ButtonProps & AnchorOrButtonProps) {
   let intention;
@@ -117,7 +117,7 @@ function Button({
   );
 
   return (tooltip && !restProps.loading) ? (
-    <Tooltip content={tooltip} {...tooltipProperties}>
+    <Tooltip content={tooltip} {...tooltipProps}>
       <span>{button}</span>
     </Tooltip>
   ) : (

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+  ContextMenu,
+  MenuItem,
+} from "../../index";
+
+export default {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  subcomponents: { MenuItem },
+  argTypes: {
+      children: {
+          control: "none",
+      }
+  },
+} as ComponentMeta<typeof ContextMenu>;
+
+const Template: ComponentStory<typeof ContextMenu> = (args) => (
+    <ContextMenu {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <MenuItem key="m0" text={"First option"} />,
+        <MenuItem key="m1" text={"Item two"} />
+    ]
+}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -1,20 +1,54 @@
-import React from "react";
+import React, {ReactElement} from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import ContextOverlay from "./ContextOverlay";
+import { TestableComponent } from "../interfaces";
+import ContextOverlay, { ContextOverlayProps } from "./ContextOverlay";
 import Menu from "../Menu/Menu";
 import IconButton from "../Icon/IconButton";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-interface ContextMenuProps {
-    togglerElement?: ValidIconName | JSX.Element
-    [key: string]: any
+interface ContextMenuProps extends TestableComponent {
+    /**
+     * Addional CSS class names.
+     */
+    className?: string;
+    /**
+     * The elements of the context menu.
+     * They will be wrapped in a `Menu` element automatically.
+     */
+    children?: JSX.Element | JSX.Element[];
+    /**
+     * Toggler that need to be used to display menu.
+     * If a valid icon name is used then the icon element is displayed.
+     * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
+     */
+    togglerElement?: ValidIconName | JSX.Element;
+    /**
+     * Text displayed as title or tooltip on toggler element.
+     */
+    togglerText?: string;
+    /**
+     * Toggler element is displayed larger than normal.
+     */
+    togglerLarge?: boolean;
+    /**
+     * Tooltip on toggler element is display as HTML title, not as extra tooltip element.
+     */
+    tooltipAsTitle?: boolean;
+    /**
+     * Props to spread to `ContextOverlay` that is used to display the dropdown.
+     */
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>
 }
 
+/**
+ * Element displays menu items after toggler is clicked.
+ */
 function ContextMenu({
     children,
     className = "",
     togglerElement = "item-moremenu",
     togglerText = "Show more options",
+    contextOverlayProps,
     togglerLarge = false,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
@@ -22,7 +56,12 @@ function ContextMenu({
     ...restProps
 }: ContextMenuProps) {
     return (
-        <ContextOverlay {...restProps} className={`${eccgui}-contextmenu ` + className}>
+        <ContextOverlay
+            {...restProps}
+            {...contextOverlayProps}
+            className={`${eccgui}-contextmenu ` + className}
+            content={<Menu>{children}</Menu>}
+        >
             {typeof togglerElement === "string" ? (
                 <IconButton
                     tooltipAsTitle={tooltipAsTitle}
@@ -32,9 +71,8 @@ function ContextMenu({
                     data-test-id={restProps["data-test-id"]}
                 />
             ) : (
-                { togglerElement }
+                togglerElement as ReactElement
             )}
-            <Menu>{children}</Menu>
         </ContextOverlay>
     );
 }

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

@@ -0,0 +1,148 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import {
+    PopoverPosition,
+    PopoverInteractionKind,
+    PopperModifiers,
+} from "@blueprintjs/core";
+import {
+    PlacementOptions
+} from "@blueprintjs/popover2";
+
+import {
+  ContextOverlay,
+  HtmlContentBlock,
+  Button
+} from "../../index";
+
+export default {
+  title: "Components/ContextOverlay",
+  component: ContextOverlay,
+  argTypes: {
+      className: {
+          control: "string",
+          description: "A space-delimited list of class names to pass along to a child element."
+      },
+      defaultIsOpen: {
+          control: "boolean",
+          description: "Initial opened state when uncontrolled."
+      },
+      isOpen: {
+          control: "boolean",
+          description: "Whether the popover is visible. Passing this prop puts the popover in controlled mode, where the only way to change visibility is by updating this property."
+      },
+      interactionKind: {
+          control: "select",
+          options: {UNDEFINED: undefined, ...PopoverInteractionKind},
+          description: "The kind of interaction that triggers the display of the popover."
+      },
+      canEscapeKeyClose: {
+          control: "boolean",
+          description: "Whether pressing the esc key should invoke `onClose`."
+      },
+      onClose: {
+          control: "none",
+          description: "A callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the esc key (if enabled).",
+          table: {
+              defaultValue: { summary: undefined },
+              type: { summary: "(event: SyntheticEvent<HTMLElement>) => void" },
+          }
+      },
+      onInteraction: {
+          control: "none",
+          description: "Callback invoked in controlled mode when the popover open state would change due to user interaction.",
+          table: {
+              defaultValue: { summary: undefined },
+              type: { summary: "(nextOpenState: boolean, e?: React.SyntheticEvent<HTMLElement>) => void" },
+          }
+      },
+      children: {
+          control: "none",
+      },
+      content: {
+          control: "none",
+          description: "Elements for overlay content."
+      },
+      minimal: {
+          control: "boolean",
+          description: "Whether to apply minimal styling to this popover or tooltip. Minimal popovers do not have an arrow pointing to their target and use a subtler animation."
+      },
+      placement: {
+          control: "select",
+          options: PlacementOptions,
+          description: "The placement (relative to the target) at which the popover should appear. Mutually exclusive with `position` prop."
+      },
+      /*
+      position: {
+          control: "select",
+          options: {UNDEFINED: undefined, ...PopoverPosition},
+          description: "The position (relative to the target) at which the popover should appear. Mutually exclusive with `placement` prop."
+      },
+      */
+      usePortal: {
+          control: "boolean",
+          description: "Whether the popover should be rendered inside a Portal attached to `portalContainer` prop."
+      },
+      modifiers: {
+          control: "object",
+          description: "Popper modifier options, passed directly to internal Popper instance. See https://popper.js.org/docs/v2/modifiers/ for complete details.",
+          table: {
+              defaultValue: { summary: undefined },
+              type: { summary: "PopperModifiers" },
+          }
+      },
+      hasBackdrop: {
+          control: "boolean",
+          description: "Enables an invisible overlay beneath the popover that captures clicks and prevents interaction with the rest of the document until the popover is closed, only available with `PopoverInteractionKind.CLICK`."
+      },
+      rootBoundary: {
+          control: "select",
+          options: {UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document"},
+          description: "A root boundary element supplied to the `flip` and `preventOverflow` modifiers, shorthand for overriding Popper.js modifier options. See: https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary",
+          table: {
+              defaultValue: { summary: "viewport" },
+              type: { summary: "RootBoundary" },
+          }
+      },
+      positioningStrategy: {
+          control: "select",
+          options: {UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed"},
+          description: "Popper.js positioning strategy. See: https://popper.js.org/docs/v2/constructors/#strategy",
+          table: {
+              defaultValue: { summary: "absolute" },
+              type: { summary: "PositioningStrategy" },
+          }
+      },
+  },
+} as ComponentMeta<typeof ContextOverlay>;
+
+const Template: ComponentStory<typeof ContextOverlay> = (args) => (
+    <ContextOverlay {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <Button>Target</Button>,
+    content: (
+        <HtmlContentBlock style={{maxWidth: "40em", padding: "0.5rem"}}>
+            Overlay:
+            <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+    //position: PopoverPosition.RIGHT,
+    placement: "auto-start",
+    usePortal: true,
+    minimal: false,
+    defaultIsOpen: false,
+    modifiers: {
+        flip: {
+            enabled: true
+        },
+        preventOverflow: {
+            enabled: true,
+        }
+    } as PopperModifiers,
+    rootBoundary: "viewport",
+    hasBackdrop: false,
+}

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -1,23 +1,30 @@
 import React from 'react';
-import { Popover as BlueprintPropover, Position as BlueprintPosition } from "@blueprintjs/core";
+import {
+    Popover2 as BlueprintPropover,
+    Popover2Props as BlueprintPopoverProps,
+} from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-/*
-
-    @see https://blueprintjs.com/docs/#core/components/popover for list of
-    properties
-
-*/
+export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
+    /**
+     * `target` element to use as toggler for the overlay display.
+     */
+    children?: JSX.Element;
+}
 
+/**
+ * Element displays connected content by interacting with a target element.
+ * Full list of available option can be seen at https://blueprintjs.com/docs/#popover2-package/popover2
+ */
 function ContextOverlay({
     children,
     className='',
     ...restProps
-}: any) {
+}: ContextOverlayProps) {
 
     return (
         <BlueprintPropover
-            position={BlueprintPosition.BOTTOM}
+            placement="bottom"
             {...restProps}
             className={`${eccgui}-contextoverlay ` + className}
         >

package/src/components/ContextOverlay/contextoverlay.scss

@@ -3,13 +3,13 @@ $popover-background-color: $white !default;
 $dark-popover-background-color: $dark-gray4 !default;
 */
 
-@import "~@blueprintjs/core/src/components/popover/popover";
+@import "~@blueprintjs/popover2/src/popover2";
 
-.#{$ns}-popover-wrapper {
+.#{$ns}-popover2-content {
     max-width: 100%;
 }
 
-.#{$ns}-popover-target {
+.#{$ns}-popover2-target {
     cursor: pointer;
     max-width: 100%;
 }

package/src/components/Form/FieldItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 import {ClassNames as IntentClassNames} from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {TestableComponent} from "../interfaces";
@@ -21,7 +21,7 @@ interface IProps extends TestableComponent {
     children: JSX.Element | JSX.Element[] | null
     className?: string
     disabled?: boolean
-    labelAttributes?: object
+    labelProps?: LabelProps
     helperText?: string | JSX.Element
     messageText?: string
 }
@@ -34,7 +34,7 @@ function FieldItem({
     children,
     className,
     disabled,
-    labelAttributes = {},
+    labelProps,
     helperText,
     messageText,
     ...otherProps
@@ -57,7 +57,7 @@ function FieldItem({
             break;
     }
 
-    const label = <Label {...labelAttributes} disabled={disabled} />;
+    const label = <Label {...labelProps} disabled={disabled} />;
 
     const userhelp =
         helperText &&

package/src/components/Icon/Icon.tsx

@@ -6,24 +6,40 @@ import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 import canonicalIcons, {IconSized, ValidIconName} from "./canonicalIconNames"
 
 export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
-    // The CSS class name.
-    className?: string,
-    // Canonical icon name
+    /**
+     * Canonical icon name, or an array of strings.
+     * In case of the array the first valid icon name is used.
+     */
     name: ValidIconName | string[],
-    // description for SVG as accessibility fallback
-    description?: string,
-    // Display large icon version
-    large?: boolean,
-    // Display small icon version
-    small?: boolean,
-    // Add tooltip text to icon
+    /**
+     * Add tooltip text to icon
+     */
     tooltipText?: string,
-    // Time after tooltip text is visible when icon is hovered/focuses
-    tooltipOpenDelay?: number,
-    // Other tooltip properties
-    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>,
-    // Intent state of icon (currently only success, info, warning and danger are implemented in style rules)
+    /**
+     * Intent state of icon.
+     * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
+     */
     intent?: IntentTypes
+    /**
+     * Display large icon version.
+     */
+    large?: boolean,
+    /**
+     * Display small icon version.
+     */
+    small?: boolean,
+    /**
+     * Additional CSS classes.
+     */
+    className?: string,
+    /**
+     * Description for icon as accessibility fallback.
+     */
+    description?: string,
+    /**
+     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
+     */
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>,
 }
 
 /** Returns the first icon that exists or the fallback icon. */
@@ -56,8 +72,7 @@ function Icon({
     large = false,
     small = false,
     tooltipText,
-    tooltipOpenDelay,
-    tooltipProperties,
+    tooltipProps,
     intent,
     ...restProps
 }: IconProps) {
@@ -85,7 +100,7 @@ function Icon({
         />
     );
     return tooltipText ? (
-        <Tooltip content={tooltipText} hoverOpenDelay={tooltipOpenDelay} {...tooltipProperties}>
+        <Tooltip content={tooltipText} {...tooltipProps}>
             <span>{icon}</span>
         </Tooltip>
     ) : (

package/src/components/Icon/IconButton.tsx

@@ -4,24 +4,30 @@ import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import Icon from "./Icon";
 import {ValidIconName} from "./canonicalIconNames";
 
-interface IconButtonProps extends ButtonProps {
-    // Canonical icon name
+interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    /**
+     * Canonical icon name, or an array of strings.
+     * In case of the array the first valid icon name is used.
+     */
     name: ValidIconName | string[]
-    className?: string
-    // Tooltip text
+    /**
+     * Button text, will be displayed as tooltip.
+     */
     text?: string,
-    // Time after tooltip text is visible when icon is hovered/focuses
-    tooltipOpenDelay?: number,
-    // Display large icon version
-    large?: boolean,
-    // Display small icon version
-    small?: boolean
-    // If the tooltip should be set as title attribute instead of the Tooltip component. If true, all other tooltip parameters are ignored.
+    /**
+     * If `text` should be set as HTML `title` attribute instead of attaching it as tooltip.
+     * If true then `tooltipProps` is ignored.
+     */
     tooltipAsTitle?: boolean
-    // If set, button will become an anchor button. FIXME: CMEM-3742: Setting this parameter should not change the type of the button. Split into several components.
-    href?: string
-    // Additional description of the icon function to improve accessibility, if not defined then the text label is used as fallback
+    /**
+     * Description for icon as accessibility fallback.
+     * If not set then `text` is used.
+     */
     description?: string
+    /**
+     * Button is displayed with minimal styles (no borders, no background color).
+     */
+    minimal?: boolean;
 }
 
 /** A button with an icon instead of text. */
@@ -29,10 +35,10 @@ function IconButton({
     className = "",
     name = "undefined",
     text,
-    tooltipProperties,
+    tooltipProps,
     description,
-    tooltipOpenDelay = 1000,
     tooltipAsTitle = false,
+    minimal=true,
     ...restProps
 }: IconButtonProps & AnchorOrButtonProps) {
     return (
@@ -45,13 +51,12 @@ function IconButton({
                     small={restProps.small}
                     large={restProps.large}
                     tooltipText={tooltipAsTitle ? undefined : text}
-                    tooltipOpenDelay={tooltipOpenDelay}
-                    tooltipProperties={!!tooltipProperties ? tooltipProperties : {}}
+                    tooltipProps={!!tooltipProps ? {hoverOpenDelay: 1000, ...tooltipProps} : {hoverOpenDelay: 1000}}
                     description={description ? description : text}
                 />
             }
             className={`${eccgui}-button--icon ` + className}
-            minimal
+            minimal={minimal}
         />
     );
 }

package/src/components/Icon/stories/Icon.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+    Icon,
+    Button,
+} from "../../../index";
+import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
+import { Definitions } from "../../../common/Intent";
+
+export default {
+    title: "Components/Icon",
+    component: Icon,
+    argTypes: {
+        name: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
+        intent: {
+            control: "select",
+            options: {...Definitions},
+        },
+    },
+} as ComponentMeta<typeof Icon>;
+
+const Template: ComponentStory<typeof Icon> = (args) => (
+    <Icon {...args} tooltipText={args.name?.toString()}/>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    name: "undefined"
+}
+
+export const IconsOverview = () => {
+    return (
+        <>
+            {
+                Object.keys(canonicalIcons).map((iconName) => {
+                    return (
+                        <Button
+                            icon={iconName as ValidIconName}
+                            outlined
+                            large
+                            tooltip={iconName}
+                        />
+                    )
+                })
+            }
+        </>
+    );
+}

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+    IconButton,
+} from "../../../index";
+import canonicalIcons from "./../canonicalIconNames";
+
+export default {
+    title: "Components/IconButton",
+    component: IconButton,
+    argTypes: {
+        name: {
+            control: "select",
+            options: [...(Object.keys(canonicalIcons))],
+        },
+    },
+} as ComponentMeta<typeof IconButton>;
+
+const Template: ComponentStory<typeof IconButton> = (args) => (
+    <IconButton {...args} text={args.name?.toString()}/>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    name: "item-moremenu"
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+
+import {
+  Label
+} from "../../index";
+
+export default {
+  title: "Components/Label",
+  component: Label,
+  argTypes: {
+  },
+} as ComponentMeta<typeof Label>;
+
+const Template: ComponentStory<typeof Label> = (args) => (
+    <Label {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    text: "Label text",
+    info: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
+    tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
+    disabled: false,
+    htmlFor: "inputid",
+}