@eccenca/gui-elements 23.0.0-rc.3-unofficial.0 → 23.0.0-rc.4

package/src/components/HoverToggler/HoverToggler.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { HoverToggler } from "./../../index";
+
+export default {
+    title: "Components/HoverToggler",
+    component: HoverToggler,
+    argTypes: {
+    },
+} as ComponentMeta<typeof HoverToggler>;
+
+const Template: ComponentStory<typeof HoverToggler> = (args) => (
+    <HoverToggler {...args} style={{height: "auto"}} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    baseContent: "Base content.",
+    hoverContent: <>Content<br/>on <a href="#">hover</a>.</>
+};

package/src/components/HoverToggler/HoverToggler.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * The content that is shown when not hovered.
+     */
+    baseContent: JSX.Element;
+    baseContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * The content that is shown when hovered.
+     */
+    hoverContent: JSX.Element;
+    hoverContentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * Display as inline element.
+     */
+    inline?: boolean;
+}
+
+/** Displays a specific element. Displays another element when hovered. */
+export const HoverToggler = ({
+    className = "",
+    baseContent,
+    baseContentProps,
+    hoverContent,
+    hoverContentProps,
+    inline = false,
+    style,
+    ...otherProps
+}: HoverTogglerProps) => {
+    return (<div
+        className={
+            `${eccgui}-hovertoggler__wrapper` +
+            (inline ? ` ${eccgui}-hovertoggler--inline` : "")
+        }
+        style={style}
+    >
+        <div
+            className={
+                `${eccgui}-hovertoggler` +
+                (className ? ` ${className}` : "")
+            }
+            {...otherProps}
+        >
+            <div className={`${eccgui}-hovertoggler__basecontent`}>
+                <div className={`${eccgui}-hovertoggler__wrappercontent`} {...baseContentProps}>{ baseContent }</div>
+            </div>
+            <div className={`${eccgui}-hovertoggler__hovercontent`}>
+                <div tabIndex={0} className={`${eccgui}-hovertoggler__wrappercontent`} {...hoverContentProps}>{ hoverContent }</div>
+            </div>
+        </div>
+    </div>);
+}

package/src/components/HoverToggler/hovertoggler.scss

@@ -0,0 +1,45 @@
+.#{$eccgui}-hovertoggler__wrapper {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.#{$eccgui}-hovertoggler--inline {
+    display: inline-flex;
+    width: auto;
+}
+
+.#{$eccgui}-hovertoggler {
+    display: flex;
+    width: 200%;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-shrink: 0;
+
+    .#{$eccgui}-hovertoggler--inline > & {
+        display: inline-flex;
+    }
+}
+
+.#{$eccgui}-hovertoggler__basecontent,
+.#{$eccgui}-hovertoggler__hovercontent {
+    overflow: hidden;
+    order: 1;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.#{$eccgui}-hovertoggler__hovercontent {
+    order: 2;
+
+    .#{$eccgui}-hovertoggler:hover > &,
+    &:focus-within {
+        order: 0;
+    }
+}

package/src/components/Icon/canonicalIconNames.tsx

@@ -57,8 +57,10 @@ export type ValidIconName =
     | "item-start"
     | "item-stop"
     | "item-reload"
+    | "item-reset"
     | "item-shuffle"
     | "item-draggable"
+    | "item-settings"
     | "operation-search"
     | "operation-clear"
     | "operation-undo"
@@ -84,6 +86,8 @@ export type ValidIconName =
     | "state-checked"
     | "state-checkedsimple"
     | "state-partlychecked"
+    | "state-declined"
+    | "state-confirmed"
     | "artefact-project"
     | "artefact-workflow"
     | "artefact-dataset"
@@ -116,6 +120,9 @@ export type ValidIconName =
     | "operation-auto-graph-layout"
     | "unlinked-item"
     | "write-protected"
+    | "settings"
+    | "favorite-empty"
+    | "favorite-filled"
     | "undefined"
     | "Undefined";
 
@@ -397,6 +404,11 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.Renew20,
         large: icons.Renew32,
     },
+    "item-reset": {
+        small: icons.Reset16,
+        normal: icons.Reset20,
+        large: icons.Reset32,
+    },
     "item-comment": {
         small: icons.AddComment16,
         normal: icons.AddComment20,
@@ -412,6 +424,11 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.Draggable20,
         large: icons.Draggable32,
     },
+    "item-settings": {
+        small: icons.Settings16,
+        normal: icons.Settings20,
+        large: icons.Settings32,
+    },
 
     "operation-search": {
         small: icons.Search16,
@@ -541,6 +558,17 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         normal: icons.CheckboxIndeterminate20,
         large: icons.CheckboxIndeterminate32,
     },
+    "state-declined": {
+        small: icons.ThumbsDown16,
+        normal: icons.ThumbsDown20,
+        large: icons.ThumbsDown32
+    },
+    "state-confirmed": {
+        small: icons.ThumbsUp16,
+        normal: icons.ThumbsUp20,
+        large: icons.ThumbsUp32
+    },
+
 
     "artefact-project": {
         small: icons.Folder16,
@@ -708,6 +736,24 @@ const canonicalIconNames: Record<ValidIconName, IconSized> = {
         large: icons.DocumentProtected32,
     },
 
+    "settings": {
+        small: icons.Settings16,
+        normal: icons.Settings20,
+        large: icons.Settings32
+    },
+
+    "favorite-empty": {
+        small: icons.Star16,
+        normal: icons.Star20,
+        large: icons.Star32
+    },
+
+    "favorite-filled": {
+        small: icons.StarFilled16,
+        normal: icons.StarFilled20,
+        large: icons.StarFilled32
+    },
+
     undefined: {
         small: icons.Undefined16,
         normal: icons.Undefined20,

package/src/components/InteractionGate/InteractionGate.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import { InteractionGate, Spinner, Link, Button, HtmlContentBlock } from "./../../index";
+
+export default {
+  title: "Components/InteractionGate",
+  component: InteractionGate,
+  subcomponents: { Spinner },
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Any sub lements, could contain elements that provide options for user interactions."
+      }
+  },
+} as ComponentMeta<typeof InteractionGate>;
+
+const Template: ComponentStory<typeof InteractionGate> = (args) => (
+  <InteractionGate {...args}></InteractionGate>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+            <p><Link href="https://example.net">Link</Link></p>
+            <p><Button onClick={() => alert("click")}>Button</Button></p>
+        </HtmlContentBlock>
+    )
+}

package/src/components/InteractionGate/InteractionGate.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, useEffect } from "react";
+// FIXME: re-evaluate if polyfill is necessary
+// we currently need a polyfill for inert because Firefox do not support it natively atm
+// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert#browser_compatibility
+import "wicg-inert";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Spinner, { SpinnerProps } from "./../Spinner/Spinner";
+
+export interface InteractionGateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "inert"> {
+    /**
+     * Prevent interaction with sub elements and narrow them in their visibility.
+     */
+    inert?: boolean;
+    /**
+     * Displays a spinner centered over the sub element.
+     */
+    showSpinner?: boolean;
+    /**
+     * Configure the included `<Spinner />` element.
+     */
+    spinnerProps?: SpinnerProps;
+}
+
+/**
+ * Wrap content that need to be blocked from user interactions
+ * It also has options to display a spinner as overlay.
+ */
+function InteractionGate({
+    children,
+    className,
+    inert = false,
+    showSpinner = false,
+    spinnerProps = {},
+    ...otherProps
+}: InteractionGateProps) {
+    const domRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        // we currently cannot add inert property directly to the div because react types module seem not to know it
+        if (inert) {
+            domRef.current!.setAttribute('inert', '');
+        } else {
+            domRef.current!.removeAttribute('inert');
+        }
+    }, [inert]);
+
+    return (
+        <div className={`${eccgui}-interactiongate__wrapper`}>
+            <div
+                ref={domRef}
+                className={
+                    `${eccgui}-interactiongate` +
+                    (inert ? ` ${eccgui}-interactiongate--inert` : "") +
+                    (className ? ` ${className}` : "")
+                }
+                {...otherProps}
+            >
+                {children}
+            </div>
+            {showSpinner && <Spinner showLocalBackdrop={true} {...spinnerProps} className={`${eccgui}-interactiongate__spinner`} />}
+        </div>
+    );
+}
+
+export default InteractionGate;

package/src/components/InteractionGate/interactiongate.scss

@@ -0,0 +1,11 @@
+.#{eccgui}-interactiongate__wrapper {
+    position: relative;
+}
+
+.#{eccgui}-interactiongate--inert {
+    opacity: $eccgui-opacity-disabled;
+
+    & + .#{$eccgui}-spinner--localbackdrop {
+        background-color: transparent;
+    }
+}

package/src/components/Link/link.scss

@@ -3,4 +3,13 @@
 .#{$prefix}--link {
     font-size: 1em;
     line-height: inherit;
+
+    &:focus {
+        outline: none;
+        outline-offset: 0;
+    }
+    &:focus-visible {
+        outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+        outline-offset: 1px;
+    }
 }

package/src/components/Notification/Notification.tsx

@@ -53,7 +53,7 @@ export interface NotificationProps extends Omit<BlueprintToastProps, "message" |
     /**
      * Icon used as depiction that is displayed with the notification.
      */
-    iconName?: ValidIconName;
+    iconName?: ValidIconName | null;
 }
 
 /**

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,26 @@
 import React, { useState } from "react";
-import {Pagination as CarbonPagination} 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 {
+    /**
+     Hide the select option to set how many items per page are displayed.
+     */
+    hidePageSizeConfiguration?: boolean;
+    /**
+     Hide info about the item numbers that are currently displayed.
+     */
+    hideInfoText?: boolean;
+    /**
+     Hide select box to switch between pages.
+     */
+    hidePageSelect?: boolean;
+    /**
+     Hide buttons to switch beteen nex/prev pages.
+     */
+    hideNavigationArrows?: boolean;
+}
+
 function Pagination({
     className,
     hidePageSizeConfiguration = false,
@@ -9,7 +28,7 @@ function Pagination({
     hidePageSelect = false,
     hideNavigationArrows = false,
     ...otherProps
-}: any) {
+}: PaginationProps) {
     return (
         <CarbonPagination
             {...otherProps}
@@ -38,10 +57,7 @@ interface IPaginationOptions {
     // The option of page sizes
     pageSizes?: number[];
     // Presentation options
-    presentation?: {
-        // For narrow space requirements, the info text in the middle can be hidden
-        hideInfoText?: boolean;
-    };
+    presentation?: Omit<PaginationProps, "onChange" | "totalItems" | "pageSizes" | "page" | "pageSize">;
 }
 
 // Custom hook to add pagination. Currently only use-cases are supported where paging has no further side effects, e.g. REST calls.

package/src/components/SimpleTable/simpletable.scss

@@ -7,9 +7,14 @@ $eccgui-size-tablecell-height-tall: mini-units(6) !default;
 $eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - carbon--rem($eccgui-size-typo-text)) * 0.5 !default;
 $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
+$eccgui-color-tableheader-background: lighten($menu-item-color-hover, 15%) !default; // rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+$eccgui-color-tablerow-background-even: $card-background-color !default;
+$eccgui-color-tablerow-background-odd: lighten($menu-item-color-hover, 24%) !default;
+$eccgui-color-tablerow-hover: $menu-item-color-hover !default;
+$eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
+$eccgui-color-tablerow-selected-hover: mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-hover, 50%) !default;
 
 // lib vars
-/* already defined */
 // import libs
 // currently not needed @import '~carbon-components/scss/components/data-table/data-table-action';
 @import "~carbon-components/scss/components/data-table/data-table-core";
@@ -23,6 +28,10 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
     min-width: unset;
 }
 
+.#{$prefix}--data-table-header {
+    background-color: $eccgui-color-tablerow-background-even;
+}
+
 .#{$prefix}--data-table {
     min-width: 100%;
 }
@@ -33,9 +42,12 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 }
 
 .#{$prefix}--data-table th {
-    background-color: rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+    background-color: $eccgui-color-tableheader-background;
     font-weight: $eccgui-size-tableheader-font-weight;
 }
+.#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
+    background: $eccgui-color-tableheader-background;
+}
 
 .#{$prefix}--data-table thead tr,
 .#{$prefix}--data-table tbody tr,
@@ -72,6 +84,50 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
     }
 }
 
+.#{$prefix}--data-table td,
+.#{$prefix}--data-table tbody th {
+    border-top: 1px solid $eccgui-color-tablerow-background-even;
+    background-color: $eccgui-color-tablerow-background-even;
+}
+
+.#{$prefix}--data-table tbody {
+    background-color: $eccgui-color-tablerow-background-even;
+
+    tr {
+        &:hover {
+            background-color: transparent;
+
+            th, td {
+                border-top: 1px solid $eccgui-color-tablerow-hover;
+                border-bottom: 1px solid $eccgui-color-tablerow-hover;
+                background-color: $eccgui-color-tablerow-hover;
+            }
+        }
+
+        &.#{$prefix}--data-table--selected {
+            th {
+                border-top: 1px solid mix($eccgui-color-tablerow-selected, $eccgui-color-tableheader-background, 50%);
+                background-color: mix($eccgui-color-tablerow-selected, $eccgui-color-tableheader-background, 50%);
+            }
+            td {
+                border-top: 1px solid $eccgui-color-tablerow-selected;
+                background-color: $eccgui-color-tablerow-selected;
+            }
+
+            &:hover {
+                th {
+                    border-top: 1px solid mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tableheader-background, 50%);
+                    background-color: mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tableheader-background, 50%);
+                }
+                td {
+                    border-top: 1px solid $eccgui-color-tablerow-selected-hover;
+                    background-color: $eccgui-color-tablerow-selected-hover;
+                }
+            }
+        }
+    }
+}
+
 // Compact
 
 .#{$prefix}--data-table--compact thead tr,
@@ -110,6 +166,10 @@ $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 
 // Sticky header
 
+.#{$prefix}--data-table_inner-container {
+    background-color: $eccgui-color-tableheader-background;
+}
+
 .#{$prefix}--data-table--sticky-header {
     thead tr th {
         // border-bottom-color: $active-ui;

package/src/components/Spinner/Spinner.tsx

@@ -23,6 +23,12 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
     stroke?: SpinnerStroke
     // Delay when to show the spinner in ms, default: 0
     delay?: number
+    /**
+     * Includes a backdrop behind the spinner that narrows visibility of the area behind the spinner.
+     * This option only works with "local" spinners, for "inline" spinners there is no backdrop, "global" spinners always have backdrops.
+     * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or soe equivalent CSS rule.
+     */
+    showLocalBackdrop?: boolean
 }
 
 function Spinner({
@@ -32,6 +38,7 @@ function Spinner({
     position = "local",
     size,
     stroke,
+    showLocalBackdrop = false,
     delay = 0,
     ...otherProps
 }: SpinnerProps) {
@@ -80,11 +87,12 @@ function Spinner({
             tagName={spinnerElement}
             className={
                 `${eccgui}-spinner` +
-                (className ? " " + className : "") +
-                ` ${eccgui}-spinner--intent-` +
-                spinnerIntent +
-                ` ${eccgui}-spinner--size-` +
-                spinnerSize
+                ` ${eccgui}-spinner--position-${position}` +
+                ` ${eccgui}-spinner--intent-${spinnerIntent}` +
+                ` ${eccgui}-spinner--size-${spinnerSize}` +
+                (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +
+                (className ? " " + className : "")
+
             }
             {...otherProps}
         />

package/src/components/Spinner/spinner.scss

@@ -69,6 +69,20 @@ span.#{$eccgui}-spinner {
     width: 1em;
 }
 
+.#{$eccgui}-spinner--localbackdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
+
+    .#{$eccgui}-card & {
+        background-color: rgba($card-background-color, $eccgui-opacity-muted);
+    }
+}
+
 .#{$eccgui}-spinner__overlay {
     position: fixed;
     display: flex;

package/src/components/Switch/Switch.tsx

@@ -1,10 +1,15 @@
-import React, { memo } from 'react';
-import { Switch as BlueprintSwitch } from "@blueprintjs/core";
+import React, {memo, SyntheticEvent} from 'react';
+import { Switch as BlueprintSwitch, SwitchProps } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function Switch({className, ...otherProps}:any) {
-    const handleChange = (e: any) => {
-        otherProps.onChange(e.target.checked)
+interface Props extends Omit<SwitchProps, "onChange"> {
+    onChange?: (value: boolean) => any
+}
+
+function Switch({onChange, ...otherProps}: Props) {
+    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
+        const checked = !!(e as any).target?.checked
+        onChange && onChange(checked);
     };
 
     return <BlueprintSwitch

package/src/components/Tabs/Tab.tsx

@@ -4,6 +4,7 @@ import {
     TabProps as BlueprintTabProps
 } from "@blueprintjs/core";
 import Color from "color";
+import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import TabTitle, { TabTitleProps } from "./TabTitle";
 
@@ -47,7 +48,7 @@ export const transformTabProperties = ({
         }
         colorStyles = {
             backgroundColor: `${color.rgb().toString()}`,
-            color: color.isLight() ? "#000" : "#fff",
+            color: decideContrastColorValue({testColor: color}),
         }
     }
     const extraStyles = (dontShrink || !!backgroundColor) ? {style: {...flexStyles, ...colorStyles}} : {};

package/src/components/Tag/Tag.tsx

@@ -4,6 +4,7 @@ import {
     TagProps as BlueprintTagProps
 } from "@blueprintjs/core";
 import Color from "color";
+import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 interface TagProps extends Omit<
@@ -74,7 +75,7 @@ function Tag({
             ...additionalStyles,
             ...{
                 backgroundColor: color.rgb().toString(),
-                color: color.isLight() ? "#000" : "#fff",
+                color: decideContrastColorValue({testColor: color}),
             }
         }
     }

package/src/components/Tag/TagList.tsx

@@ -14,7 +14,7 @@ function TagList({
         <ul
             className={
                 `${eccgui}-tag__list` +
-                ((className && label) ? ' ' + className : '')
+                ((className && !label) ? ' ' + className : '')
             }
             {...otherProps}
         >

package/src/components/Tag/tag.scss

@@ -93,6 +93,7 @@ $tag-round-adjustment: 0px !default;
 .#{$eccgui}-tag__list-item {
     margin-bottom: $eccgui-size-margin-tag;
     display: inline-block;
+    max-width: 100%;
 }
 
 .#{$eccgui}-tag__list-label,

package/src/components/TextField/TextField.tsx

@@ -69,6 +69,10 @@ function TextField({
       break;
   }
 
+  if ((!!otherProps.readOnly || !!otherProps.disabled) && !!otherProps.value && !otherProps.title) {
+      otherProps["title"] = otherProps.value;
+  }
+
   return (
     <BlueprintInputGroup
       className={`${eccgui}-textfield ` + className}

package/src/components/TextField/stories/TextField.stories.tsx

@@ -96,4 +96,5 @@ export const Default = Template.bind({});
 Default.args = {
     fullWidth: false,
     placeholder: "placeholder text",
+    readOnly: false,
 };