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

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {ComponentMeta, ComponentStory} from "@storybook/react";
+
+import {AutoCompleteField, IAutoCompleteFieldProps} from "../AutoCompleteField";
+import {extractSearchWords, matchesAllWords} from "../../Typography/Highlighter";
+import {createNewItemRendererFactory} from "../autoCompleteFieldUtils";
+
+const AutoCompleteFieldStory: ComponentMeta<typeof AutoCompleteField> = {
+    title: "Components/AutoCompleteField",
+    component: AutoCompleteField,
+    argTypes: {
+    },
+}
+
+const Template: ComponentStory<typeof AutoCompleteField> = (args) => (
+    <AutoCompleteField {...args}></AutoCompleteField>
+);
+
+export const Default = Template.bind({});
+export const AdaptQueryAfterSelection = Template.bind({})
+export const AllowReset = Template.bind({})
+export const AllowCustomValues = Template.bind({})
+
+// Renders string values as string
+const defaultRenderer = (item: string) => item
+
+const defaultArgs: IAutoCompleteFieldProps<string, string> = {
+    itemRenderer: (item: string) => `Rendered item: ${item}`,
+    itemValueRenderer: (item: string) => `Selected item: ${item}`,
+    itemValueString: (item: string) => `Query: ${item}`,
+    onSearch: (query: string) => {
+        const multiWord = extractSearchWords(query, true)
+        return ["search item A", "search element B", "search object C"]
+            .filter(word => matchesAllWords(word.toLowerCase(), multiWord))
+    },
+    onChange: elem => {
+        console.log(`Entry '${elem}' selected!`)
+    },
+    itemValueSelector: defaultRenderer,
+    noResultText: "No result"
+}
+
+// Changes the search query for the selected item, e.g. when the rendered item text should be different from the query finding this item.
+const adaptQueryAfterSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    resetQueryToValue: (selectedValue: string) => selectedValue
+}
+
+// Allows to reset a selection
+const resetSelection: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    reset: {
+        resetValue: "",
+        resetButtonText: "Clear selected value",
+        resettableValue: (value: string) => true
+    }
+}
+
+const allowCustomValues: IAutoCompleteFieldProps<string, string> = {
+    ...defaultArgs,
+    createNewItem: {
+        itemRenderer: createNewItemRendererFactory(
+            (query: string) => `Create new item: ${query}`,
+            "item-add-artefact"
+        ),
+        itemFromQuery: item => item,
+    }
+}
+
+Default.args = defaultArgs;
+AdaptQueryAfterSelection.args = adaptQueryAfterSelection
+AllowReset.args = resetSelection
+AllowCustomValues.args = allowCustomValues
+
+export default AutoCompleteFieldStory

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -2,14 +2,14 @@ import React from "react";
 // import PropTypes from 'prop-types';
 import {
     Breadcrumb as BlueprintBreadcrumbItem,
-    IBreadcrumbProps as IBlueprintBreadcrumbItemProps,
+    BreadcrumbProps as BlueprintBreadcrumbItemProps,
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { openInNewTab } from "../../common/utils/openInNewTab";
 
 // FIXME: enforce href and remove onClick later
-export type IBreadcrumbItemProps = Omit<
-    IBlueprintBreadcrumbItemProps,
+export type BreadcrumbItemProps = Omit<
+    BlueprintBreadcrumbItemProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "icon" |
     "iconTitle" |
@@ -17,13 +17,17 @@ export type IBreadcrumbItemProps = Omit<
     "target"
 >;
 
+/**
+ * Item of the breadcrumbs list.
+ * It cannot be used directly but the properties can be used within the elements of the `BreadcrumbList.items` property.
+ */
 function BreadcrumbItem({
     className = "",
     onClick,
     href,
     //itemDivider='',
     ...otherBlueprintBreadcrumbProps
-}: IBreadcrumbItemProps) {
+}: BreadcrumbItemProps) {
 
     /*
         FIXME: adding `data-divider` does not work this way because BlueprintJS
@@ -32,11 +36,16 @@ function BreadcrumbItem({
         CSS/Sass as content for the pseudo element, currently done static in CSS
         with slash char.
     */
+
+    const allowActions = !otherBlueprintBreadcrumbProps.current && !otherBlueprintBreadcrumbProps.disabled;
+    const actions = allowActions ? {
+        href,
+        onClick: (e:React.MouseEvent<HTMLElement>) => openInNewTab(e, onClick, href),
+    } : {};
     return (
       <BlueprintBreadcrumbItem
         {...otherBlueprintBreadcrumbProps}
-        href={href}
-        onClick={(e) => openInNewTab(e, onClick, href)}
+        {...actions}
         className={`${eccgui}-breadcrumb__item ` + className}
         /* data-divider={itemDivider ? itemDivider : ''} */
       />

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import {
-    Breadcrumbs as BlueprintBreadcrumbList,
-    IBreadcrumbsProps as IBlueprintBreadcrumbsProps,
-} from "@blueprintjs/core";
+    Breadcrumbs2 as BlueprintBreadcrumbList,
+    Breadcrumbs2Props as BlueprintBreadcrumbsProps,
+} from "@blueprintjs/popover2";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import BreadcrumbItem from "./BreadcrumbItem";
-import { IBreadcrumbItemProps } from "./BreadcrumbItem";
+import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
 type ReducedBreadcrumbsProps = Omit<
-    IBlueprintBreadcrumbsProps,
+    BlueprintBreadcrumbsProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "breadcrumbRenderer" |
     "collapseFrom" |
@@ -19,15 +19,15 @@ type ReducedBreadcrumbsProps = Omit<
 >;
 
 // FIXME: enforce onItemClick later when href value can always be routed correctly
-interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
+interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         list of breadcrumb items to display
     */
-    items: IBreadcrumbItemProps[];
+    items: BreadcrumbItemProps[];
     /**
         click handler used on breadcrumb items
     */
-    onItemClick?(itemUrl: string, event: object): any;
+    onItemClick?(itemUrl: string | undefined, event: object): any;
     /**
         native attributes for the unordered HTML list (ul)
     */
@@ -35,17 +35,32 @@ interface IBreadcrumbListProps extends ReducedBreadcrumbsProps {
     /**
         char that devides breadcrumb items, default: "/" (currently unsupported)
     */
-    itemDivider?: never;
+    //itemDivider?: never;
+    /**
+     * Do not re-render breadcrumbs in a shortened version if they overflow the available space.
+     */
+    ignoreOverflow?: boolean;
+    /**
+     * If set to `true` then breadcrumb items can shrink.
+     * This way we cannot prevent overflowing breadcrumbs completely but this happens very late.
+     * You should enable this when `ignoreOverflow` is `true`.
+     */
+    latenOverflow?: boolean;
 }
 
+/**
+ * Navigation path to the currently show resource or view in the application.
+ */
 function BreadcrumbList({
     className = "",
     // itemDivider = "/",
     onItemClick,
     htmlUlProps,
+    ignoreOverflow = false,
+    latenOverflow = false,
     ...otherBlueprintBreadcrumbsProps
-}: IBreadcrumbListProps) {
-    const renderBreadcrumb = (propsBreadcrumb: any) => {
+}: BreadcrumbListProps) {
+    const renderBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
         const {onClick, ...otherProps} = propsBreadcrumb;
         return (
             <BreadcrumbItem
@@ -62,18 +77,25 @@ function BreadcrumbList({
         );
     };
 
-    const renderCurrentBreadcrumb = (propsBreadcrumb: any) => {
-        return <BreadcrumbItem {...propsBreadcrumb} current={true} href={null} onClick={null} /*itemDivider={itemDivider}*/ />;
+    const renderCurrentBreadcrumb = (propsBreadcrumb: BreadcrumbItemProps) => {
+        return <BreadcrumbItem {...propsBreadcrumb} current={true} /*itemDivider={itemDivider}*/ />;
     };
 
     return (
         <BlueprintBreadcrumbList
             {...otherBlueprintBreadcrumbsProps}
             {...htmlUlProps}
-            className={`${eccgui}-breadcrumb__list ` + className}
+            className={
+                `${eccgui}-breadcrumb__list` +
+                (latenOverflow ? ` ${eccgui}-breadcrumb__list--latenoverflow` : "") +
+                (className ? ` ${className}` : "")
+            }
             minVisibleItems={1}
             breadcrumbRenderer={renderBreadcrumb}
             currentBreadcrumbRenderer={renderCurrentBreadcrumb}
+            overflowListProps={ignoreOverflow ? {
+                minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
+            } : {}}
         />
     );
 }

package/src/components/Breadcrumb/breadcrumb.scss

@@ -5,7 +5,6 @@
     height: auto;
 
     & > li {
-
         &:last-of-type {
             min-width: 0;
         }
@@ -39,9 +38,33 @@
     }
 }
 
+.#{$eccgui}-breadcrumb__list--latenoverflow {
+    & > li {
+        flex-shrink: 1;
+        min-width: 0;
+    }
+
+    .#{$eccgui}-breadcrumb__item > * {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        vertical-align: middle;
+        display: inline;
+    }
+}
+
 .#{$eccgui}-breadcrumb__item {
     font-size: inherit;
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-block;
 }
+
+a.#{$eccgui}-breadcrumb__item {
+    &:not(.#{$ns}-breadcrumb-current):not(.#{$ns}-disabled) {
+        text-decoration: underline;
+        &:hover,
+        &:focus {
+            text-decoration: none;
+        }
+    }
+}

package/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { BreadcrumbItem } from './../../../index';
+
+export default {
+    title: "Components/Breadcrumbs/Item",
+    component: BreadcrumbItem,
+    argTypes: {
+    },
+}  as ComponentMeta<typeof BreadcrumbItem>
+
+const Template: ComponentStory<typeof BreadcrumbItem> = (args) => (
+    <BreadcrumbItem {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    text : 'Breadcrumb item',
+};

package/src/components/Breadcrumb/stories/BreadcrumbList.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { BreadcrumbList, BreadcrumbItem } from './../../../index';
+
+export default {
+    title: "Components/Breadcrumbs/List",
+    component: BreadcrumbList,
+    subcomponents: { BreadcrumbItem },
+    argTypes: {
+    },
+}  as ComponentMeta<typeof BreadcrumbList>
+
+const Template: ComponentStory<typeof BreadcrumbList> = (args) => (
+    <BreadcrumbList  {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    items : [
+        {text: "Root page", href : "#" },
+        {text: "Main click category", onClick: () => alert("Breadcrumb click")},
+        {text: <div>Sub category item</div>, href: "#"},
+        {text: <span>Disabled breadcrumb with a very long title</span>, disabled: true},
+        {text: "Current breadcrumb item", current: true}
+    ],
+};

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/Button/button.scss

@@ -1,11 +1,14 @@
+@use "sass:color";
+@use "sass:map";
+
 $button-height: $pt-button-height;
 $button-border-width: 1px; // !default;
-$button-padding: ($pt-grid-size / 2) $pt-grid-size; // !default;
+$button-padding: ($pt-grid-size * 0.5) $pt-grid-size; // !default;
 $button-border-radius: $pt-border-radius;
 // $button-padding-small: 0 ($pt-grid-size * 0.7) !default;
-// $button-padding-large: ($pt-grid-size / 2) ($pt-grid-size * 1.5) !default;
-// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
-// $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
+// $button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
+// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+// $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
 // $button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 2px rgba($black, 0.2) !default;
 // $button-intent-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.4), inset 0 (-$button-border-width) 0 rgba($black, 0.2) !default;
@@ -44,10 +47,44 @@ $dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bott
 // $button-outlined-border-intent-opacity: 0.6 !default;
 // $button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
+$button-intents: (
+  "primary": ($eccgui-color-accent, color.scale($eccgui-color-accent, $lightness: -20%), color.scale($eccgui-color-accent, $lightness: -40%)),
+  "success": ($eccgui-color-success-text, color.scale($eccgui-color-success-text, $lightness: -20%), color.scale($eccgui-color-success-text, $lightness: -40%)),
+  "warning": ($eccgui-color-warning-text, color.scale($eccgui-color-warning-text, $lightness: -20%), color.scale($eccgui-color-warning-text, $lightness: -40%)),
+  "danger": ($eccgui-color-danger-text, color.scale($eccgui-color-danger-text, $lightness: -20%), color.scale($eccgui-color-danger-text, $lightness: -40%))
+);
+
 @import "~@blueprintjs/core/src/components/button/button";
 
-.#{$ns}-button.#{$ns}-large {
-    min-height: mini-units(6);
+.#{$ns}-button {
+    .#{$ns}-large {
+        min-height: mini-units(6);
+    }
+    // special case override: blueprint do not use configured colors here
+    &.#{$ns}-intent-warning {
+      @include pt-button-intent(map.get($button-intents, "warning")...);
+
+      &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
+        fill: rgba($white, 0.7);
+      }
+
+      &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
+        @include pt-button-intent(map.get($button-intents, "warning")...);
+      }
+
+      &.#{$ns}-minimal,
+      &.#{$ns}-outlined {
+        background: none;
+        box-shadow: none;
+        color: $eccgui-color-warning-text;
+        border-color: $eccgui-color-warning-text;
+
+        &:disabled,
+        &.#{$ns}-disabled {
+            color: rgba($eccgui-color-warning-text, 0.39);
+        }
+      }
+    }
 }
 
 .#{$ns}-button-text {

package/src/components/Card/card.scss

@@ -49,7 +49,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__header {
-    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing;
     box-sizing: content-box;
     flex-grow: 0;
     flex-shrink: 0;
@@ -83,7 +83,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__content {
-    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
     flex-grow: 1;
     flex-shrink: 1;
     overflow: auto;
@@ -95,7 +95,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__actions {
-    padding: $eccgui-size-card-spacing/4;
+    padding: $eccgui-size-card-spacing * 0.25;
     flex-grow: 0;
     flex-shrink: 0;
     display: flex;
@@ -103,7 +103,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     align-items: center;
 
     & > * {
-        margin: $eccgui-size-card-spacing/4;
+        margin: $eccgui-size-card-spacing * 0.25;
     }
 
     &.#{$eccgui}-intent--success > .#{$eccgui}-button:first-child {
@@ -133,7 +133,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     align-items: center;
 
     & > * {
-        margin: $eccgui-size-card-spacing/4;
+        margin: $eccgui-size-card-spacing * 0.25;
     }
 
     .#{$eccgui}-card__actions--inversedirection > & {

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

@@ -0,0 +1,33 @@
+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"}>
+            <MenuItem key="m0" text={"First sub option"} />
+            <MenuItem key="m1" text={"Sub item two"} />
+        </MenuItem>
+    ]
+}

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>
     );
 }