@eccenca/gui-elements 24.4.1 → 25.0.0-featureimproveprintstylescmem6985.0

package/src/components/Button/button.scss

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "sass:map";
+@use "sass:list";
 
 $button-height: $pt-button-height;
 $button-border-width: 1px; // !default;
@@ -20,9 +21,9 @@ $button-border-radius: $pt-border-radius;
 // $dark-button-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.6), inset 0 1px 2px rgba($black, 0.2) !default;
 // $dark-button-intent-box-shadow: 0 0 0 $button-border-width rgba($black, 0.4) !default;
 // $dark-button-intent-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.4), inset 0 1px 2px rgba($black, 0.2) !default;
-$button-gradient: none; // !default; // linear-gradient(to bottom, rgba($white, 0.8), rgba($white, 0)) !default;
-$button-intent-gradient: $button-gradient; // !default; // linear-gradient(to bottom, rgba($white, 0.1), rgba($white, 0)) !default;
-$dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bottom, rgba($white, 0.05), rgba($white, 0)) !default;
+$button-gradient: none; // !default;
+$button-intent-gradient: $button-gradient; // !default;
+$dark-button-gradient: $button-gradient; // !default;
 // $button-color-disabled: $pt-text-color-disabled !default;
 // $button-background-color: $light-gray5 !default;
 // $button-background-color-hover: $light-gray4 !default;
@@ -49,64 +50,125 @@ $dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bott
 // $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%),
+    // default - hover - active
+    "primary":
+        (
+            eccgui-color-var("identity", "brand", "900"),
+            eccgui-color-mix(
+                eccgui-color-var("identity", "brand", "900"),
+                eccgui-color-var("identity", "text", "900") 10%
+            ),
+            eccgui-color-mix(
+                eccgui-color-var("identity", "brand", "900"),
+                eccgui-color-var("identity", "text", "900") 20%
+            )
+        ),
+    "accent": (
+        eccgui-color-var("identity", "accent", "900"),
+        eccgui-color-mix(
+            eccgui-color-var("identity", "accent", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(eccgui-color-var("identity", "accent", "900"), eccgui-color-var("identity", "text", "900") 20%)
     ),
     "success": (
-        $eccgui-color-success-text,
-        color.scale($eccgui-color-success-text, $lightness: -20%),
-        color.scale($eccgui-color-success-text, $lightness: -40%),
+        eccgui-color-var("semantic", "success", "900"),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "success", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "success", "900"),
+            eccgui-color-var("identity", "text", "900") 20%
+        )
     ),
     "warning": (
-        $eccgui-color-warning-text,
-        color.scale($eccgui-color-warning-text, $lightness: -20%),
-        color.scale($eccgui-color-warning-text, $lightness: -40%),
+        eccgui-color-var("semantic", "warning", "900"),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "warning", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "warning", "900"),
+            eccgui-color-var("identity", "text", "900") 20%
+        )
     ),
     "danger": (
-        $eccgui-color-danger-text,
-        color.scale($eccgui-color-danger-text, $lightness: -20%),
-        color.scale($eccgui-color-danger-text, $lightness: -40%),
-    ),
+        eccgui-color-var("semantic", "danger", "900"),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "danger", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(eccgui-color-var("semantic", "danger", "900"), eccgui-color-var("identity", "text", "900") 20%)
+    )
 );
 
 @import "~@blueprintjs/core/src/components/button/button";
 
-.#{$ns}-button {
-    position: relative;
-
-    .#{$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")...);
+@mixin eccgui-enhance-blueprint-button-intent($intentvalue) {
+    &.#{$ns}-intent-#{$intentvalue} {
+        @include pt-button-intent(map.get($button-intents, $intentvalue)...);
 
         &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
-            fill: rgba($white, 0.7);
+            fill: eccgui-color-rgba($white, 0.7);
         }
 
         &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
-            @include pt-button-intent(map.get($button-intents, "warning")...);
+            @include pt-button-intent(map.get($button-intents, $intentvalue)...);
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-outlined {
-            color: $eccgui-color-warning-text;
+            color: list.nth(map.get($button-intents, $intentvalue), 1);
             background: none;
-            border-color: $eccgui-color-warning-text;
+            border-color: list.nth(map.get($button-intents, $intentvalue), 1);
             box-shadow: none;
 
             &:disabled,
             &.#{$ns}-disabled {
-                color: rgba($eccgui-color-warning-text, 0.39);
+                color: eccgui-color-rgba(list.nth(map.get($button-intents, $intentvalue), 1), $eccgui-opacity-disabled);
+                border-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 1),
+                    $eccgui-opacity-disabled
+                );
+            }
+
+            &:active:not(:disabled):not(.#{$ns}-disabled),
+            &.#{$ns}-active:not(:disabled):not(.#{$ns}-disabled) {
+                color: list.nth(map.get($button-intents, $intentvalue), 3);
+                background-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 3),
+                    $eccgui-opacity-ghostly
+                );
+                border-color: list.nth(map.get($button-intents, $intentvalue), 3);
+            }
+
+            &:focus:not(:disabled):not(.#{$ns}-disabled),
+            &:hover:not(:disabled):not(.#{$ns}-disabled) {
+                color: list.nth(map.get($button-intents, $intentvalue), 2);
+                background-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 2),
+                    0.5 * $eccgui-opacity-ghostly
+                );
+                border-color: list.nth(map.get($button-intents, $intentvalue), 2);
             }
         }
     }
 }
 
+.#{$ns}-button {
+    position: relative;
+
+    .#{$ns}-large {
+        min-height: mini-units(6);
+    }
+
+    // special case override: blueprint do not use configured colors here
+    @include eccgui-enhance-blueprint-button-intent("primary");
+    @include eccgui-enhance-blueprint-button-intent("accent");
+    @include eccgui-enhance-blueprint-button-intent("warning");
+}
+
 .#{$ns}-button-text {
     min-width: 0;
 }

package/src/components/Card/card.scss

@@ -1,8 +1,8 @@
 @use "sass:color";
 
 $card-padding: 0 !default;
-$card-background-color: $white !default;
-$card-selected-background-color: rgba($blue3, 0.1);
+$card-background-color: #{eccgui-color-var("identity", "background", "100")} !default;
+$card-selected-background-color: eccgui-color-rgba($blue3, 0.1);
 $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
 @import "~@blueprintjs/core/src/components/card/card";
@@ -14,22 +14,22 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     justify-content: flex-start;
 
     &.#{$eccgui}-intent--primary {
-        background-color: color.mix($eccgui-color-primary, $card-background-color, 5%);
+        background-color: eccgui-color-var("identity", "brand", "100");
     }
     &.#{$eccgui}-intent--accent {
-        background-color: color.mix($eccgui-color-accent, $card-background-color, 10%);
+        background-color: eccgui-color-var("identity", "accent", "100");
     }
     &.#{$eccgui}-intent--success {
-        background-color: $eccgui-color-success-background;
+        background-color: eccgui-color-var("semantic", "success", "100");
     }
     &.#{$eccgui}-intent--info {
-        background-color: $eccgui-color-info-background;
+        background-color: eccgui-color-var("semantic", "info", "100");
     }
     &.#{$eccgui}-intent--warning {
-        background-color: $eccgui-color-warning-background;
+        background-color: eccgui-color-var("semantic", "warning", "100");
     }
     &.#{$eccgui}-intent--danger {
-        background-color: $eccgui-color-danger-background;
+        background-color: eccgui-color-var("semantic", "danger", "100");
     }
 
     &.#{$ns}-interactive:hover {
@@ -38,13 +38,13 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
     &.#{$ns}-selected {
         background-color: $card-selected-background-color;
-        box-shadow: 0 0 0 3px rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+        box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
 
         &.#{$ns}-interactive {
-            box-shadow: 0 0 0 3px rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+            box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
 
             &:hover {
-                background-color: color.mix($card-selected-background-color, $button-background-color-hover, 50%);
+                background-color: eccgui-color-mix($card-selected-background-color, $button-background-color-hover);
             }
         }
     }
@@ -176,9 +176,9 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
 .#{$eccgui}-card__actions {
     display: flex;
-    flex-flow: row wrap;
     flex-grow: 0;
     flex-shrink: 0;
+    flex-flow: row wrap;
     align-items: center;
     padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing;
 
@@ -242,8 +242,8 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
 .#{$eccgui}-card__actions__aux {
     display: flex;
-    flex-flow: row wrap;
     flex-grow: 1;
+    flex-flow: row wrap;
     align-items: center;
     justify-content: flex-end;
     order: 1000;
@@ -288,3 +288,9 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-card__actions {
+        display: none;
+    }
+}

package/src/components/Chat/ChatArea.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { FlexibleLayoutContainer, FlexibleLayoutContainerProps, FlexibleLayoutItem } from "./../FlexibleLayout";
+import { Spacing, SpacingProps } from "./../Separation/Spacing";
+import { ChatFieldProps } from "./ChatField";
+
+export interface ChatAreaProps
+    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">,
+        TestableComponent {
+    /**
+     * The inut field for the chat.
+     */
+    chatField?: React.ReactElement<ChatFieldProps>;
+    /**
+     * Set the position of the chat field.
+     */
+    chatFieldPosition?: "top" | "bottom";
+    /**
+     * Sets the maximum width for chat contents and input.
+     */
+    contentWidth?: "small" | "medium" | "large" | "full";
+    /**
+     * Put chat content in a list and add spacings automatically.
+     * Works best if each `ChatArea` child represents one chat content item.
+     */
+    autoSpacingSize?: SpacingProps["size"];
+    /**
+     * Scrolls content to the first or last child automatically.
+     * The correct value depends on the place where you insert the most recent chat item.
+     */
+    autoScrollTo?: "first" | "last";
+}
+
+/**
+ * Component to display a full chat, containing chat content bubbles and text input.
+ */
+export const ChatArea = ({
+    children,
+    className,
+    chatField,
+    chatFieldPosition = "bottom",
+    contentWidth = "medium",
+    autoSpacingSize,
+    gapSize = "medium",
+    autoScrollTo,
+    ...otherFlexibleLayoutContainerProps
+}: ChatAreaProps) => {
+    const chatcontents = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (chatcontents.current && children && autoScrollTo) {
+            const chatitems = chatcontents.current.getElementsByClassName(`${eccgui}-chat__content`);
+            if (chatitems.length > 0) {
+                chatitems[autoScrollTo === "first" ? 0 : chatitems.length - 1].scrollIntoView({
+                    behavior: "instant",
+                    block: autoScrollTo === "first" ? "start" : "end",
+                });
+            }
+        }
+    }, [chatcontents, children, autoScrollTo]);
+
+    return (
+        <FlexibleLayoutContainer
+            className={
+                `${eccgui}-chat__area` + ` ${eccgui}-chat__area--${contentWidth}` + (className ? ` ${className}` : "")
+            }
+            vertical
+            noEqualItemSpace
+            gapSize={gapSize}
+            {...otherFlexibleLayoutContainerProps}
+        >
+            {chatField && (
+                <FlexibleLayoutItem
+                    growFactor={0}
+                    shrinkFactor={0}
+                    style={chatFieldPosition === "bottom" ? { order: 1 } : undefined}
+                >
+                    <div className={`${eccgui}-chat__area-contentwidth`}>{chatField}</div>
+                </FlexibleLayoutItem>
+            )}
+            <FlexibleLayoutItem
+                style={
+                    otherFlexibleLayoutContainerProps.useAbsoluteSpace
+                        ? {
+                              overflow: "auto",
+                              minHeight: 0,
+                              padding: "2px 0",
+                          }
+                        : undefined
+                }
+            >
+                <div className={`${eccgui}-chat__area-contentwidth`} ref={chatcontents}>
+                    {autoSpacingSize && children ? (
+                        <ul>
+                            {React.Children.toArray(children).map((child, index) => (
+                                <li key={index}>
+                                    {child}
+                                    <Spacing size={autoSpacingSize} />
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    );
+};
+
+export default ChatArea;

package/src/components/Chat/ChatContent.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
+import { ContextMenuProps } from "./../ContextOverlay/ContextMenu";
+import { DepictionProps } from "./../Depiction/Depiction";
+import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
+import { IconButtonProps } from "./../Icon/IconButton";
+import { Spacing } from "./../Separation/Spacing";
+import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
+
+export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
+    /**
+     * Should be a line of text, e.g. username, timestamp, ...
+     */
+    statusLine?: React.ReactElement<OverflowTextProps>;
+    /**
+     * How the chat content box is displayed.
+     */
+    displayType?: "free" | "simple" | "bubble";
+    /**
+     * A depiction used as avatar next to the content box.
+     */
+    avatar?: React.ReactElement<DepictionProps>;
+    /**
+     * If indented then the content box has some white space on the opposite side to the alignment
+     */
+    indentationSize?: "small" | "medium" | "large";
+    /**
+     * How the content box and avatar is aligned.
+     * If `left` is set then the avatar is on the left side, and the indentation on the right side.
+     */
+    alignment?: "left" | "right";
+    /**
+     * If set then the chat bubble only grows to a height of 50% of the viewport.
+     * In case you need to set other maximum heights then use the `style` property directly.
+     */
+    limitHeight?: boolean;
+    /**
+     * If given then the content is automatically parsed and displayed by our `<Markdown />` component.
+     * `children` need to a `string` then, otherwise it cannot be parsed.
+     */
+    markdownProps?: Omit<MarkdownProps, "children">;
+    /**
+     * Could be used to add some type of toggle button or to include a context menu.
+     */
+    actionButton?: React.ReactElement<IconButtonProps> | React.ReactElement<ContextMenuProps>;
+}
+
+/**
+ * Component to display single chat contents, including avatar and status line.
+ */
+export const ChatContent = ({
+    className,
+    children,
+    statusLine,
+    avatar,
+    displayType = "bubble",
+    indentationSize,
+    alignment = "left",
+    limitHeight,
+    markdownProps,
+    actionButton,
+    ...otherDivProps
+}: ChatContentProps) => {
+    const content =
+        markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
+
+    const chatitem = (
+        <div
+            className={
+                `${eccgui}-chat__content` +
+                ` ${eccgui}-chat__content--display-${displayType}` +
+                ` ${eccgui}-chat__content--align-${alignment}` +
+                (limitHeight ? ` ${eccgui}-chat__content--limitheight` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherDivProps}
+        >
+            {statusLine && (
+                <HtmlContentBlock small>
+                    {statusLine}
+                    <Spacing size="tiny" />
+                </HtmlContentBlock>
+            )}
+            {content}
+        </div>
+    );
+
+    const indentationSizes = {
+        small: "8%",
+        medium: "21%",
+        large: "34%",
+    };
+
+    return (
+        <div
+            style={{
+                marginLeft: alignment === "right" && indentationSize ? indentationSizes[indentationSize] : undefined,
+                marginRight: alignment === "left" && indentationSize ? indentationSizes[indentationSize] : undefined,
+            }}
+        >
+            <FlexibleLayoutContainer noEqualItemSpace gapSize="tiny">
+                {avatar && (
+                    <FlexibleLayoutItem
+                        className={`${eccgui}-chat__content-avatar`}
+                        growFactor={0}
+                        shrinkFactor={0}
+                        style={alignment === "right" ? { order: 1 } : undefined}
+                    >
+                        {React.cloneElement(avatar, { size: "small", ratio: "1:1", rounded: true, resizing: "cover" })}
+                    </FlexibleLayoutItem>
+                )}
+                <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
+                {actionButton && (
+                    <FlexibleLayoutItem
+                        className={`${eccgui}-chat__content-sizetoggle`}
+                        growFactor={0}
+                        shrinkFactor={0}
+                        style={alignment === "right" ? { order: -1 } : undefined}
+                    >
+                        {actionButton}
+                    </FlexibleLayoutItem>
+                )}
+            </FlexibleLayoutContainer>
+        </div>
+    );
+};
+
+export default ChatContent;

package/src/components/Chat/ChatContentCollapsed.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { IconButton } from "../Icon/IconButton";
+import { TextReducer, TextReducerProps } from "../TextReducer/TextReducer";
+
+import { ChatContentProps } from "./ChatContent";
+
+export interface ChatContentCollapsedProps {
+    children: React.ReactElement<ChatContentProps>;
+    /**
+     * Set this to `false` if the compoment should initally start in an expanded state.
+     */
+    collapsed?: boolean;
+    /**
+     * Use this to set extra `TextReducer` properties.
+     * This is used to create the collapsed variant of the given content.
+     */
+    textReducerProps?: Omit<TextReducerProps, "children">;
+    /**
+     * Text for collapse button.
+     */
+    textCollapse?: string;
+    /**
+     * Text for expand button.
+     */
+    textExpand?: string;
+}
+
+/**
+ * Adds an auto collapsing feature for convenience to `ChatContent`.
+ */
+export const ChatContentCollapsed = ({
+    children,
+    collapsed = true,
+    textReducerProps = {},
+    textCollapse = "Collapse",
+    textExpand = "Expand",
+}: ChatContentCollapsedProps) => {
+    const [displayCollapsed, setDispayCollapsed] = React.useState<boolean>(collapsed);
+
+    const childrenAsTextline = (
+        <TextReducer useOverflowTextWrapper {...textReducerProps}>
+            {typeof children.props.children === "string" ? (
+                <Markdown>{children.props.children}</Markdown>
+            ) : (
+                children.props.children
+            )}
+        </TextReducer>
+    );
+
+    return React.cloneElement(children, {
+        children: displayCollapsed ? childrenAsTextline : children.props.children,
+        actionButton: (
+            <IconButton
+                text={displayCollapsed ? textExpand : textCollapse}
+                name={displayCollapsed ? "toggler-showmore" : "toggler-showless"}
+                onClick={() => setDispayCollapsed(!displayCollapsed)}
+            />
+        ),
+    });
+};
+
+export default ChatContentCollapsed;

package/src/components/Chat/ChatField.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IconButton } from "../Icon/IconButton";
+import { TextArea, TextAreaProps } from "../TextField/TextArea";
+
+export interface ChatFieldProps extends TextAreaProps, TestableComponent {
+    /**
+     * Default input to start with.
+     */
+    children?: string;
+    /**
+     * Callback handler to process the input of the field when `Enter` is pressed or the submit button is clicked.
+     * If you use it together with your own handlers for `onChange` and `onKeyDown` it won't work properly.
+     */
+    onTextSubmit?: (value: string) => void;
+}
+
+/**
+ * Component to input chat text.
+ * Based on `TextArea` component.
+ */
+export const ChatField = ({
+    className,
+    onTextSubmit,
+    onChange,
+    onKeyDown,
+    rightElement,
+    ...otherTextAreaProps
+}: ChatFieldProps) => {
+    const chatvalue = React.useRef<string>(otherTextAreaProps.children ?? "");
+
+    const onContentChange = (value: string) => {
+        chatvalue.current = value;
+    };
+
+    const onEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (onKeyDown) onKeyDown(e);
+        if (e.keyCode === 13 && e.shiftKey === false && onTextSubmit) {
+            e.preventDefault();
+            onTextSubmit(chatvalue.current);
+        }
+    };
+
+    return (
+        <TextArea
+            fill
+            autoResize
+            className={`${eccgui}-chat__inputfield` + (className ? ` ${className}` : "")}
+            onChange={
+                onTextSubmit
+                    ? (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                          onContentChange(e.target.value);
+                          if (onChange) onChange(e);
+                      }
+                    : onChange
+            }
+            onKeyDown={onTextSubmit ? onEnter : onKeyDown}
+            rightElement={
+                (onTextSubmit || rightElement) && (
+                    <>
+                        {onTextSubmit && (
+                            <IconButton name={"operation-send"} onClick={() => onTextSubmit(chatvalue.current)} />
+                        )}
+                        {rightElement}
+                    </>
+                )
+            }
+            {...otherTextAreaProps}
+        />
+    );
+};
+
+export default ChatField;