@eccenca/gui-elements 23.7.0-rc.0 → 23.7.0-rc.2

package/src/components/Sticky/stories/StickyTarget.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, Story } from "@storybook/react";
+
+import { HtmlContentBlock, StickyTarget } from "../../../../index";
+
+export default {
+    title: "Components/StickyTarget",
+    component: StickyTarget,
+    argTypes: {},
+} as Meta<typeof StickyTarget>;
+
+const Template: Story<typeof StickyTarget> = (args) => (
+    <div style={{ height: "10rem", overflow: "auto", position: "relative" }}>
+        <HtmlContentBlock>
+            {args.getConnectedElement && args.to !== "bottom" && (
+                <p
+                    id="connected-element"
+                    style={{ background: "red", color: "white", padding: "0.5rem", position: "fixed", top: "20px" }}
+                >
+                    Top element.
+                </p>
+            )}
+            <LoremIpsum p={3} avgSentencesPerParagraph={5} random={false} />
+            <StickyTarget {...args} style={args.to === "bottom" ? { zIndex: 2 } : undefined}>
+                <p style={{ color: "red", padding: "0.5rem" }}>First sticky element.</p>
+            </StickyTarget>
+            <LoremIpsum p={5} avgSentencesPerParagraph={5} random={false} />
+            <div>
+                <StickyTarget {...args}>
+                    <p style={{ color: "green", padding: "0.5rem" }}>Sticky element.</p>
+                </StickyTarget>
+                <LoremIpsum p={5} avgSentencesPerParagraph={5} random={false} />
+            </div>
+            <StickyTarget {...args}>
+                <p style={{ color: "blue", padding: "0.5rem" }}>Another sticky element.</p>
+            </StickyTarget>
+            <LoremIpsum p={5} avgSentencesPerParagraph={5} random={false} />
+            {args.getConnectedElement && args.to === "bottom" && (
+                <p
+                    id="connected-element"
+                    style={{ background: "red", color: "white", padding: "0.5rem", position: "fixed", bottom: "20px" }}
+                >
+                    Bottom element.
+                </p>
+            )}
+        </HtmlContentBlock>
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    className: "stickytarget-extraclass",
+    "data-test-id": "stickytarget-test-id",
+    "data-testid": "stickytarget-testid",
+};
+
+export const ConnectedElement = Template.bind({});
+ConnectedElement.args = {
+    getConnectedElement: () => {
+        return window.document.getElementById("connected-element") || false;
+    },
+};

package/src/components/TextField/TextArea.tsx

@@ -1,35 +1,63 @@
 import React from "react";
 import {
+    Classes as BlueprintClassNames,
     Intent as BlueprintIntent,
+    MaybeElement,
     TextArea as BlueprintTextArea,
     TextAreaProps as BlueprintTextAreaProps,
 } from "@blueprintjs/core";
 
+import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Icon } from "../Icon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
-export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
     /**
      * when set to true the input takes a blue border color
+     * @deprecated Use the `intent` property.
      */
     hasStatePrimary?: boolean;
     /**
      * when set to true the input takes a green border color
+     * @deprecated Use the `intent` property.
      */
     hasStateSuccess?: boolean;
     /**
      * when set to true the input takes an orange border color
+     * @deprecated Use the `intent` property.
      */
     hasStateWarning?: boolean;
     /**
      * when set to true the input takes a red border color
+     * @deprecated Use the `intent` property.
      */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the text area.
+     */
+    intent?: IntentTypes | "edited" | "removed";
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps;
+    /**
+     * Left aligned icon, can be a canonical icon name or an `Icon` element.
+     * This will update left padding on the text area.
+     */
+    leftIcon?: ValidIconName | MaybeElement;
+    /**
+     * Element to render on right side of text area. Should be not too large.
+     * This will update right padding on the text area.
+     */
+    rightElement?: JSX.Element;
+    /**
+     * Add HTML properties to the wrapper element.
+     * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
+     */
+    wrapperDivProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 }
 
 export const TextArea = ({
@@ -40,38 +68,172 @@ export const TextArea = ({
     hasStateDanger = false,
     rows = 5,
     invisibleCharacterWarning,
+    leftIcon,
+    rightElement,
+    wrapperDivProps,
     ...otherProps
 }: TextAreaProps) => {
-    let intent;
+    const textAreaCallback = React.useCallback(
+        (textAreaElement: HTMLTextAreaElement) => {
+            if (textAreaElement && typeof textAreaElement === "object") {
+                let textAreaStyle: CSSStyleDeclaration;
+                if (!textAreaElement.dataset.processed) {
+                    textAreaStyle = getComputedStyle(textAreaElement);
+                    textAreaElement.dataset.processed = "yes";
+                    textAreaElement.dataset.paddingtop = textAreaStyle.paddingTop ?? "0px";
+                    textAreaElement.dataset.paddingleft = textAreaStyle.paddingLeft ?? "0px";
+                    textAreaElement.dataset.paddingright = textAreaStyle.paddingRight ?? "0px";
+                } else {
+                    textAreaStyle = {
+                        paddingTop: textAreaElement.dataset.paddingtop ?? "0px",
+                        paddingLeft: textAreaElement.dataset.paddingleft ?? "0px",
+                        paddingRight: textAreaElement.dataset.paddingright ?? "0px",
+                    } as CSSStyleDeclaration;
+                }
+                const textAreaElementRect = textAreaElement.getBoundingClientRect();
+                const wrapperElement = textAreaElement.parentElement;
+
+                if (leftIcon && wrapperElement) {
+                    const leftIconElement = wrapperElement.querySelector(`.${eccgui}-textarea__icon`) as HTMLElement;
+                    const leftIconElementRect = leftIconElement.getBoundingClientRect();
+                    if (
+                        parseInt(textAreaStyle.paddingTop, 10) * 2 + (leftIconElementRect.height ?? 0) <=
+                        (textAreaElementRect.height ?? 0)
+                    ) {
+                        leftIconElement.style.setProperty("top", textAreaStyle.paddingTop);
+                    } else {
+                        leftIconElement.style.setProperty(
+                            "top",
+                            `${((textAreaElementRect.height ?? 0) - (leftIconElementRect.height ?? 0)) * 0.5}px`
+                        );
+                    }
+                    leftIconElement.style.setProperty("left", textAreaStyle.paddingLeft);
+                    textAreaElement.style.setProperty(
+                        "padding-left",
+                        `calc(${leftIconElementRect.width ? 2 : 1} * ${textAreaStyle.paddingLeft} + ${
+                            leftIconElementRect.width ?? 0
+                        }px)`
+                    );
+                    leftIconElement.addEventListener("click", (_event: MouseEvent) => {
+                        textAreaElement.focus();
+                    }); //onclick((_event: MouseEvent) => {textAreaElement.dispatchEvent("click")})
+                }
+
+                if (rightElement && wrapperElement) {
+                    const rightElementElement = wrapperElement.querySelector(
+                        `.${eccgui}-textarea__options`
+                    ) as HTMLElement;
+                    const rightElementElementRect = rightElementElement.getBoundingClientRect();
+                    if (
+                        parseInt(textAreaStyle.paddingTop, 10) * 2 + (rightElementElementRect.height ?? 0) <=
+                        (textAreaElementRect.height ?? 0)
+                    ) {
+                        rightElementElement.style.setProperty("top", textAreaStyle.paddingTop);
+                    } else {
+                        rightElementElement.style.setProperty(
+                            "top",
+                            `${((textAreaElementRect.height ?? 0) - (rightElementElementRect.height ?? 0)) * 0.5}px`
+                        );
+                    }
+                    rightElementElement.style.setProperty("right", textAreaStyle.paddingRight);
+                    textAreaElement.style.setProperty(
+                        "padding-right",
+                        `calc(${rightElementElementRect.width ? 2 : 1} * ${textAreaStyle.paddingRight} + ${
+                            rightElementElementRect.width ?? 0
+                        }px)`
+                    );
+                }
+            }
+        },
+        [leftIcon, rightElement]
+    );
+
+    let deprecatedIntent;
     switch (true) {
         case hasStatePrimary:
-            intent = BlueprintIntent.PRIMARY;
+            deprecatedIntent = IntentDefinitions.PRIMARY;
             break;
         case hasStateSuccess:
-            intent = BlueprintIntent.SUCCESS;
+            deprecatedIntent = IntentDefinitions.SUCCESS;
             break;
         case hasStateWarning:
-            intent = BlueprintIntent.WARNING;
+            deprecatedIntent = IntentDefinitions.WARNING;
             break;
         case hasStateDanger:
-            intent = BlueprintIntent.DANGER;
+            deprecatedIntent = IntentDefinitions.DANGER;
             break;
         default:
             break;
     }
 
-    const maybeWrappedOnChange = useTextValidation({ ...otherProps, invisibleCharacterWarning });
+    const { intent = deprecatedIntent, ...otherBlueprintTextAreaProps } = otherProps;
 
-    return (
+    let iconIntent;
+    switch (intent) {
+        case "edited":
+            iconIntent = IntentDefinitions.INFO;
+            break;
+        case "removed":
+            iconIntent = IntentDefinitions.DANGER;
+            break;
+        default:
+            iconIntent = intent as IntentTypes;
+            break;
+    }
+
+    const maybeWrappedOnChange = useTextValidation({ ...otherBlueprintTextAreaProps, invisibleCharacterWarning });
+
+    const textarea = (
         <BlueprintTextArea
-            className={`${eccgui}-textarea ` + className}
-            intent={intent}
-            rows={rows ? rows : undefined}
-            {...otherProps}
+            inputRef={textAreaCallback}
+            className={
+                `${eccgui}-textarea` +
+                (intent ? ` ${eccgui}-intent--${intent}` : "") +
+                (className ? ` ${className}` : "")
+            }
+            intent={
+                intent && !["info", "edited", "removed", "neutral"].includes(intent)
+                    ? (intent as BlueprintIntent)
+                    : undefined
+            }
+            spellCheck={intent === "removed" ? false : undefined}
+            rows={
+                rows && !otherBlueprintTextAreaProps.autoResize && !otherBlueprintTextAreaProps.growVertically
+                    ? rows
+                    : 1
+            }
+            {...otherBlueprintTextAreaProps}
             dir={"auto"}
             onChange={maybeWrappedOnChange}
         />
     );
+
+    const { className: wrapperClassName, ...otherWrapperDivProps } = wrapperDivProps ?? {};
+
+    return wrapperDivProps || leftIcon || rightElement ? (
+        <div
+            className={`${eccgui}-textarea__wrapper` + (wrapperClassName ? ` ${wrapperClassName}` : "")}
+            {...otherWrapperDivProps}
+        >
+            {textarea}
+            {leftIcon && (
+                <div className={`${eccgui}-textarea__icon`}>
+                    {typeof leftIcon === "string" ? (
+                        <Icon
+                            name={leftIcon as ValidIconName}
+                            className={BlueprintClassNames.ICON}
+                            intent={iconIntent as IntentTypes | undefined}
+                        />
+                    ) : (
+                        <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
+                    )}
+                </div>
+            )}
+            {rightElement && <div className={`${eccgui}-textarea__options`}>{rightElement}</div>}
+        </div>
+    ) : (
+        textarea
+    );
 };
 
 export default TextArea;

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

@@ -1,22 +1,49 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
-import { TextArea as CustomTextArea } from "./../../../../index";
-type TextAreaType = typeof CustomTextArea;
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
+import { Button, IconButton, TextArea } from "./../../../../index";
+type TextAreaType = typeof TextArea;
 
 export default {
     title: "Forms/TextArea",
-    component: CustomTextArea,
-    argTypes: {},
-} as ComponentMeta<TextAreaType>;
+    component: TextArea,
+    argTypes: {
+        leftIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+        rightElement: {
+            control: helpersArgTypes.exampleIcon.control,
+            options: [...helpersArgTypes.exampleIcon.options, "Button element", "2 Icon buttons"],
+            mapping: {
+                ...helpersArgTypes.exampleIcon.mapping,
+                "Button element": (
+                    <Button small onClick={() => alert("clicked")}>
+                        Button label
+                    </Button>
+                ),
+                "2 Icon buttons": (
+                    <>
+                        <IconButton name={"item-comment"} onClick={() => alert("1 clicked")} text="Button 1" />
+                        <IconButton name={"item-edit"} onClick={() => alert("2 clicked")} text="Button 2" />
+                    </>
+                ),
+            },
+        },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
+    },
+} as Meta<TextAreaType>;
 
-const Template: ComponentStory<TextAreaType> = (args) => <CustomTextArea {...args}></CustomTextArea>;
+const Template: StoryFn<TextAreaType> = (args) => <TextArea {...args}></TextArea>;
 
 export const Default = Template.bind({});
 Default.args = {
-    hasStatePrimary: false,
-    hasStateSuccess: false,
-    hasStateWarning: false,
-    hasStateDanger: false,
-    rows: 5,
+    rows: 10,
+    wrapperDivProps: {
+        "data-test-id": "textarea-test-id",
+        "data-testid": "textarea-testid",
+    },
 };

package/src/components/TextField/textfield.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:color";
 
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
@@ -57,23 +58,31 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 // enhancements
 
-@mixin intent-state-flash($state, $bgcolor, $mixratio: 24%) {
+$eccgui-map-intent-bgcolors: (
+    "primary": $eccgui-color-info-background,
+    "success": $eccgui-color-success-background,
+    "warning": $eccgui-color-warning-background,
+    "danger": $eccgui-color-danger-background,
+);
+
+@mixin intent-state-flash-animation($state, $bgcolor, $mixratio: 24%) {
     @keyframes intent-state-flash-#{$state} {
         0% {
-            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
         }
+
         39% {
             background-color: $bgcolor;
         }
+
         100% {
-            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
         }
     }
+}
 
-    .#{$ns}-input-group.#{$ns}-intent-#{$state} & {
-        background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
-        animation-name: intent-state-flash-#{$state};
-    }
+@each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+    @include intent-state-flash-animation($each-intent, $each-bgcolor);
 }
 
 .#{$ns}-input {
@@ -82,10 +91,12 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
         animation-delay: 0.5s;
     }
 
-    @include intent-state-flash("primary", $eccgui-color-info-background);
-    @include intent-state-flash("success", $eccgui-color-success-background);
-    @include intent-state-flash("warning", $eccgui-color-warning-background);
-    @include intent-state-flash("danger", $eccgui-color-danger-background);
+    @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
+            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            animation-name: intent-state-flash-#{$each-intent};
+        }
+    }
 
     .#{$ns}-input-group.#{$eccgui}-intent--info & {
         @include pt-input-intent($eccgui-color-info-text);
@@ -114,6 +125,62 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 .#{$eccgui}-textarea {
     width: 100%;
+
+    &[class*="#{$eccgui}-intent--"] {
+        animation-duration: 1s;
+        animation-delay: 0.5s;
+    }
+
+    @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        &.#{$eccgui}-intent--#{$each-intent} {
+            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            animation-name: intent-state-flash-#{$each-intent};
+        }
+    }
+
+    &.#{$eccgui}-intent--info {
+        @include pt-input-intent($eccgui-color-info-text);
+    }
+
+    &.#{$eccgui}-intent--accent {
+        @include pt-input-intent($eccgui-color-primary);
+    }
+
+    &.#{$eccgui}-intent--neutral {
+        @include pt-input-intent($eccgui-color-workspace-text);
+    }
+
+    &.#{$eccgui}-intent--edited {
+        @include pt-input-intent($eccgui-color-info-text);
+
+        color: $eccgui-color-info-text;
+    }
+
+    &.#{$eccgui}-intent--removed {
+        @include pt-input-intent($eccgui-color-danger-text);
+
+        text-decoration: line-through $eccgui-color-danger-text 2px;
+    }
+
+    &.#{$ns}-text-area-auto-resize {
+        height: unset;
+    }
+}
+
+.#{$eccgui}-textarea__wrapper {
+    position: relative;
+}
+
+.#{$eccgui}-textarea__icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.#{$eccgui}-textarea__options {
+    position: absolute;
+    top: 0;
+    right: 0;
 }
 
 .#{$eccgui}-textfield--justifyclearance {

package/src/components/index.scss

@@ -24,6 +24,7 @@
 @import "./Separation/separation";
 @import "./Skeleton/skeleton";
 @import "./Spinner/spinner";
+@import "./Sticky/sticky";
 @import "./Structure/titles";
 @import "./Table/table";
 @import "./Tabs/tabs";

package/src/components/index.ts

@@ -36,6 +36,7 @@ export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
 export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
+export * from "./Sticky";
 export * from "./Structure";
 export * from "./Switch/Switch";
 export * from "./Table";

package/src/includes/blueprintjs/_requisits.scss

@@ -1,5 +1,5 @@
 @import "~@blueprintjs/colors/src/colors";
-@import "~@blueprintjs/core/src/common/variables";
+@import "~@blueprintjs/core/src/common/variables-extended";
 
 // future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended";
 @import "~@blueprintjs/core/src/common/react-transition";