@eccenca/gui-elements 24.0.1 → 24.1.0-featureimprovepublishingprocesscmem6356.1

package/src/components/Card/CardActions.tsx

@@ -8,6 +8,10 @@ export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
      * Mainly used for cards used as modals (dialogs).
      */
     inverseDirection?: boolean;
+    /**
+     * Set footer to display its children on only one line.
+     */
+    noWrap?: boolean;
 }
 
 /**
@@ -18,6 +22,7 @@ export const CardActions = ({
     children,
     className = "",
     inverseDirection = false,
+    noWrap = false,
     ...otherProps
 }: CardActionsProps) => {
     return (
@@ -26,6 +31,7 @@ export const CardActions = ({
             className={
                 `${eccgui}-card__actions` +
                 (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : "") +
+                (noWrap ? ` ${eccgui}-card__actions--nowrap` : "") +
                 (className ? " " + className : "")
             }
         >

package/src/components/Card/CardContent.tsx

@@ -15,10 +15,16 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps) => {
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(({
+    children,
+    className='',
+    noFlexHeight,
+    ...otherProps
+}: CardContentProps, ref) => {
     return (
         <div
             {...otherProps}
+            ref={ref}
             className={
                 `${eccgui}-card__content` +
                 (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
@@ -28,6 +34,4 @@ export const CardContent = ({ children, className = "", noFlexHeight, ...otherPr
             {children}
         </div>
     );
-};
-
-export default CardContent;
+});

package/src/components/Card/card.scss

@@ -236,6 +236,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     flex-direction: row-reverse;
 }
 
+.#{$eccgui}-card__actions--nowrap {
+    flex-wrap: nowrap;
+}
+
 .#{$eccgui}-card__actions__aux {
     display: flex;
     flex-flow: row wrap;
@@ -272,4 +276,15 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     .#{$eccgui}-card__actions--inversedirection > & {
         justify-content: flex-start;
     }
+
+    .#{$eccgui}-card__actions--nowrap > & {
+        flex-shrink: 5;
+        flex-wrap: nowrap;
+        min-width: 0;
+
+        & > * {
+            flex-shrink: 10;
+            min-width: 0;
+        }
+    }
 }

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -15,9 +15,10 @@ export default {
     },
 } as Meta<typeof CodeAutocompleteField>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const Template: StoryFn<typeof CodeAutocompleteField> = (args) => (
     <OverlaysProvider>
-        <CodeAutocompleteField {...args} />
+        <CodeAutocompleteField {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -63,7 +64,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
     },
     placeholder:
         "The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
-    onChange(): any {
+    onChange(): void {
         // Do nothing
     },
 };

package/src/components/ContentGroup/ContentGroup.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+
+export default {
+    title: "Components/ContentGroup",
+    component: ContentGroup,
+    argTypes: {
+        handlerToggleCollapse: {
+            action: "toggle collapse",
+        },
+    },
+} as Meta<typeof ContentGroup>;
+
+const TemplateFull: StoryFn<typeof ContentGroup> = (args) => <ContentGroup {...args} />;
+
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+    title: "Content group title",
+    contextInfo: <Badge children={100} maxLength={3} intent={"warning"} title="Found warnings context." />,
+    annotation: (
+        <Tag backgroundColor={"purple"} round>
+            Context tag
+        </Tag>
+    ),
+    actionOptions: (
+        <>
+            <IconButton name="item-remove" text="Example remove tooltip" disruptive />
+        </>
+    ),
+    isCollapsed: false,
+    handlerToggleCollapse: () => {},
+    borderMainConnection: true,
+    borderSubConnection: ["red", "blue"],
+    level: 1,
+    minimumHeadlineLevel: 5,
+    whitespaceSize: "small",
+    description: "More context description by tooltip.",
+    hideGroupDivider: false,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={3} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+};

package/src/components/ContentGroup/ContentGroup.tsx

@@ -0,0 +1,256 @@
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {
+    Divider,
+    Icon,
+    IconButton,
+    OverflowText,
+    Section,
+    SectionHeader,
+    Spacing,
+    StickyTarget,
+    StickyTargetProps,
+    Toolbar,
+    ToolbarSection,
+    Tooltip,
+} from "../index";
+
+export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
+    /**
+     * Title of the content group.
+     */
+    title?: string;
+    /**
+     * Level of the content group.
+     */
+    level?: number;
+    /**
+     * Context information to display in the header.
+     */
+    contextInfo?: React.ReactElement | React.ReactElement[];
+    /**
+     * Annotation to display in the content.
+     */
+    annotation?: React.ReactElement | React.ReactElement[];
+    /**
+     * Action options to display in the header.
+     */
+    actionOptions?: React.ReactElement | React.ReactElement[];
+    /**
+     * Flag to collapse the content group.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Text to display when the callapse button is hovered.
+     * If not set then it uses "Show more" or "Show less".
+     */
+    textToggleCollapse?: string;
+    /**
+     * Event handler to toggle the collapse state.
+     */
+    handlerToggleCollapse?: () => void;
+    /**
+     * Use a border on the left side to visually connect the whole content content group.
+     */
+    borderMainConnection?: boolean;
+    /**
+     * Use a border on the left side to visually emphase the content group.
+     * If it is set to an array of color codes then the border is multi colored.
+     */
+    borderSubConnection?: boolean | string[];
+    /**
+     * Whitespace size between header and the content.
+     */
+    whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+    /**
+     * Title minimum headline level.
+     */
+    minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Props to pass to `StickyTarget`.
+     */
+    stickyHeaderProps?: Omit<StickyTargetProps, "children">;
+    /**
+     * Description of the content group.
+     * Added as tooltip to an info icon placed in the content group header.
+     */
+    description?: string;
+    /**
+     * Flag to hide the group divider.
+     */
+    hideGroupDivider?: boolean;
+    /**
+     * Additional props to pass to the content container.
+     */
+    contentProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+}
+
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export const ContentGroup = ({
+    children,
+    className = "",
+    title,
+    contextInfo,
+    annotation,
+    actionOptions,
+    isCollapsed = false,
+    textToggleCollapse,
+    handlerToggleCollapse,
+    borderMainConnection = false,
+    borderSubConnection = false,
+    level = 1,
+    minimumHeadlineLevel = 3,
+    whitespaceSize = "small",
+    style,
+    stickyHeaderProps,
+    description,
+    hideGroupDivider,
+    contentProps,
+    ...otherContentWrapperProps
+}: ContentGroupProps) => {
+    const displayHeader = title || handlerToggleCollapse;
+
+    let borderGradient: string[] | undefined = undefined;
+    if (typeof borderSubConnection === "object") {
+        const borderColors: string[] = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+        borderGradient = borderColors.reduce((acc: string[], borderColor: string, index: number): string[] => {
+            try {
+                const color = Color(borderColor);
+
+                acc.push(
+                    `${color.rgb().toString()} ` +
+                        `${(index / borderColors.length) * 100}% ` +
+                        `${((index + 1) / borderColors.length) * 100}%`
+                );
+            } catch {
+                // eslint-disable-next-line no-console
+                console.warn("Received invalid background color for tag: " + borderColor);
+            }
+            return acc;
+        }, []);
+    }
+
+    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const { className: contentClassName, ...otherContentProps } = contentProps ?? {};
+
+    const headerContent = displayHeader ? (
+        <>
+            <SectionHeader className={`${eccgui}-contentgroup__header`}>
+                <Toolbar>
+                    {handlerToggleCollapse && (
+                        <ToolbarSection>
+                            <IconButton
+                                className={`${eccgui}-contentgroup__header__toggler`}
+                                name={isCollapsed ? "toggler-showmore" : "toggler-showless"}
+                                text={textToggleCollapse ?? (isCollapsed ? "Show more" : "Show less")}
+                                onClick={handlerToggleCollapse}
+                            />
+                            <Spacing vertical size="small" />
+                        </ToolbarSection>
+                    )}
+                    {title && (
+                        <ToolbarSection canShrink>
+                            {React.createElement(
+                                "h" +
+                                    Math.min(
+                                        Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
+                                        6
+                                    ).toString(),
+                                {
+                                    children: <OverflowText>{title}</OverflowText>,
+                                    className: `${eccgui}-contentgroup__header__title`,
+                                }
+                            )}
+                            {description && (
+                                <>
+                                    <Spacing vertical size="tiny" />
+                                    <Tooltip content={description}>
+                                        <Icon name="item-info" small className="dmapp--text-info" />
+                                    </Tooltip>
+                                </>
+                            )}
+                        </ToolbarSection>
+                    )}
+                    {contextInfoElements &&
+                        contextInfoElements[0]?.props &&
+                        Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (
+                            <ToolbarSection className={`${eccgui}-contentgroup__header__context`} canGrow>
+                                <div className={`${eccgui}-contentgroup__content `}>
+                                    <Spacing vertical size="tiny" />
+                                    {contextInfoElements}
+                                </div>
+                            </ToolbarSection>
+                        )}
+                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                        <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
+                            <Spacing vertical size="small" />
+                            {actionOptions}
+                        </ToolbarSection>
+                    )}
+                </Toolbar>
+            </SectionHeader>
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    {!hideGroupDivider && <Divider addSpacing="small" />}
+                    <Spacing size={whitespaceSize} />
+                </>
+            )}
+        </>
+    ) : (
+        <></>
+    );
+
+    return (
+        <Section
+            className={
+                `${eccgui}-contentgroup` +
+                (className ? ` ${className}` : "") +
+                (whitespaceSize ? ` ${eccgui}-contentgroup--padding-${whitespaceSize}` : "") +
+                (borderMainConnection ? ` ${eccgui}-contentgroup--border-main` : "") +
+                (borderSubConnection ? ` ${eccgui}-contentgroup--border-sub` : "")
+            }
+            style={
+                borderGradient
+                    ? ({
+                          ...(style ?? {}),
+                          [`--${eccgui}-color-contentgroup-border-sub`]: borderGradient.join(", "),
+                      } as React.CSSProperties)
+                    : style
+            }
+            {...otherContentWrapperProps}
+        >
+            {headerContent && stickyHeaderProps ? (
+                <StickyTarget {...stickyHeaderProps}>{headerContent}</StickyTarget>
+            ) : (
+                headerContent
+            )}
+            {(!isCollapsed || !handlerToggleCollapse) && (
+                <>
+                    <div className={`${eccgui}-contentgroup__content`}>
+                        <div
+                            className={classNames(`${eccgui}-contentgroup__content__body`, contentClassName)}
+                            {...otherContentProps}
+                        >
+                            {children}
+                        </div>
+                        {contextInfo && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__context`}>{contextInfoElements}</div>
+                        )}
+                        {annotation && <div>{annotation}</div>}
+                        {actionOptions && !displayHeader && (
+                            <div className={`${eccgui}-contentgroup__content__options`}>{actionOptions}</div>
+                        )}
+                    </div>
+                </>
+            )}
+        </Section>
+    );
+};

package/src/components/ContentGroup/_contentgroup.scss

@@ -0,0 +1,56 @@
+$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
+$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+
+.#{$eccgui}-contentgroup {
+    --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};
+    --#{$eccgui}-color-contentgroup-border-sub: #{$eccgui-color-scontentgroup-border-sub};
+}
+
+.#{$eccgui}-contentgroup--border-main {
+    border-left: 0.25 * $eccgui-size-block-whitespace solid
+        var(--#{$eccgui}-color-contentgroup-border-main, #{$eccgui-color-scontentgroup-border-main});
+
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-left: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup--border-sub {
+    position: relative;
+    border-right: 0.25 * $eccgui-size-block-whitespace solid transparent;
+
+    &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 100%;
+        width: 0.25 * $eccgui-size-block-whitespace;
+        content: " ";
+        background-color: var(--#{$eccgui}-color-contentgroup-border-sub, #{$eccgui-color-scontentgroup-border-sub});
+        background-image: linear-gradient(to bottom, var(--#{$eccgui}-color-contentgroup-border-sub));
+    }
+
+    &.#{$eccgui}-contentgroup--padding-small {
+        padding-right: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup--padding-small {
+    + .#{$eccgui}-contentgroup {
+        margin-top: 0.5 * $eccgui-size-block-whitespace;
+    }
+
+    > .#{$eccgui}-contentgroup__content {
+        column-gap: 0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-contentgroup__content {
+    display: flex;
+}
+
+.#{$eccgui}-contentgroup__content__body {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+}

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

@@ -4,31 +4,40 @@ import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/co
 import { PopperPlacements } from "@blueprintjs/core";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 
+const interactionKindOptions = { UNDEFINED: undefined, ...PopoverInteractionKind };
+const rootBoundaryOptions = { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" };
+const positioningStrategyOptions = { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" };
+
 export default {
     title: "Components/ContextOverlay",
     component: ContextOverlay,
     argTypes: {
         interactionKind: {
-            options: { UNDEFINED: undefined, ...PopoverInteractionKind },
+            options: Object.keys(interactionKindOptions),
+            mapping: interactionKindOptions,
         },
         placement: {
             options: PopperPlacements,
         },
         rootBoundary: {
-            options: { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" },
+            options: Object.keys(rootBoundaryOptions),
+            mapping: rootBoundaryOptions,
         },
         positioningStrategy: {
-            options: { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" },
+            options: Object.keys(positioningStrategyOptions),
+            mapping: positioningStrategyOptions,
         },
     },
 } as Meta<typeof ContextOverlay>;
 
+let forcedUpdateKey = 0;
 const Template: StoryFn<typeof ContextOverlay> = (args) => (
     <OverlaysProvider>
-        <ContextOverlay {...args} />
+        <ContextOverlay {...args} key={++forcedUpdateKey} />
     </OverlaysProvider>
 );
 
@@ -55,4 +64,6 @@ Default.args = {
     } as PopperModifierOverrides,
     rootBoundary: "viewport",
     hasBackdrop: false,
+    onOpening: fn(),
+    onInteraction: fn(),
 };

package/src/components/Depiction/depiction.scss

@@ -72,6 +72,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item & {
         height: $button-height;
     }
+    .#{$eccgui}-overviewitem__item--highdensity.#{$eccgui}-overviewitem__item--hasspacing > .#{$eccgui}-depiction &,
+    .#{$eccgui}-overviewitem__list--highdensity
+        > li
+        > .#{$eccgui}-overviewitem__item.#{$eccgui}-overviewitem__item--hasspacing
+        & {
+        height: calc(#{$button-height} - #{$eccgui-size-typo-base * 0.5});
+    }
 }
 
 .#{$eccgui}-depiction__image--disabled {

package/src/components/Dialog/SimpleDialog.tsx

@@ -5,7 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import IconButton from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
+import { Card, CardActions, CardActionsProps, CardContent, CardHeader, CardOptions, CardTitle } from "./../Card";
 import Divider from "./../Separation/Divider";
 import Modal, { ModalProps } from "./Modal";
 
@@ -45,6 +45,8 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
     showFullScreenToggler?: boolean;
     /** Starts the modal in full screen mode. The show full screen toggler will be automatically enabled. */
     startInFullScreenMode?: boolean;
+    /** Forward properties to the actions footer component. */
+    actionsProps?: Omit<CardActionsProps, "inverseDirection">;
 }
 
 /**
@@ -66,6 +68,7 @@ export const SimpleDialog = ({
     showFullScreenToggler = false,
     startInFullScreenMode = false,
     size,
+    actionsProps,
     ...otherProps
 }: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
@@ -112,7 +115,11 @@ export const SimpleDialog = ({
                     <CardContent className={`${eccgui}-dialog__notifications`}>{notifications}</CardContent>
                 )}
                 {actions && (
-                    <CardActions inverseDirection className={intentClassName}>
+                    <CardActions
+                        {...actionsProps}
+                        inverseDirection
+                        className={`${actionsProps?.className ?? ""} ${intentClassName}`}
+                    >
                         {actions}
                     </CardActions>
                 )}

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

@@ -1,14 +1,16 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { AlertDialog } from "./../../../../index";
-import { Default as SimpleDialogExample } from "./SimpleDialog.stories";
+import simpleDialogStory, { Default as SimpleDialogExample } from "./SimpleDialog.stories";
 
 export default {
     title: "Components/Dialog/AlertDialog",
     component: AlertDialog,
     argTypes: {
+        ...simpleDialogStory.argTypes,
         headerOptions: { table: { disable: true } },
         children: { table: { disable: true } },
         actions: { table: { disable: true } },
@@ -42,4 +44,6 @@ Default.args = {
     success: false,
     warning: true,
     danger: false,
+    onOpening: fn(),
+    onClosing: fn(),
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
@@ -11,8 +12,7 @@ export default {
     component: Modal,
     argTypes: {
         children: {
-            control: "none",
-            description: "Elements to include into the modal container.",
+            control: false,
         },
     },
 } as Meta<typeof Modal>;
@@ -30,4 +30,6 @@ Default.args = {
     isOpen: true,
     usePortal: false,
     children: <Card {...SimpleCard.args} />,
+    onOpening: fn(),
+    onClosing: fn(),
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { SimpleDialog } from "./../../../../index";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";
@@ -14,10 +15,10 @@ export default {
     argTypes: {
         ...storyModal.argTypes,
         headerOptions: {
-            control: "none",
+            control: false,
         },
         actions: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof SimpleDialog>;
@@ -39,4 +40,6 @@ Default.args = {
     hasBorder: true,
     isOpen: true,
     usePortal: false,
+    onOpening: fn(),
+    onClosing: fn(),
 };