@eccenca/gui-elements 25.0.0 → 25.1.0-changeupgradedtoreact18cmem6639.0

package/src/components/Application/stories/ApplicationViewability.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ApplicationViewability } from "../../../index";
+export default {
+    title: "Components/Application/Viewability",
+    component: ApplicationViewability,
+    argTypes: {
+        children: {
+            control: false,
+        },
+        hide: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+        show: {
+            control: {
+                type: "radio",
+            },
+            options: ["print", "screen"],
+        },
+    },
+} as Meta<typeof ApplicationViewability>;
+
+const TemplateBasicExample: StoryFn<typeof ApplicationViewability> = (args) => <ApplicationViewability {...args} />;
+
+export const Default = TemplateBasicExample.bind({});
+Default.args = {
+    children: (
+        <div>
+            <LoremIpsum random={false} />
+        </div>
+    ),
+};

package/src/components/Application/stories/ColorPalettes.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { render } from "react-dom";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
+import { createRoot } from 'react-dom/client';
 
 import CssCustomProperties from "./../../../common/utils/CssCustomProperties";
 import {
@@ -194,10 +194,11 @@ const ColorPaletteConfigurator = ({
                     }, 0 as number);
                 const warningsTarget = document.getElementById("sumWarnings");
                 if (warningsTarget) {
+                    const warningsRoot = createRoot(warningsTarget)
                     if (warnings > 0) {
-                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                        warningsRoot.render(<Badge intent={"warning"}>{warnings}</Badge>);
                     } else {
-                        render(<></>, warningsTarget);
+                        warningsRoot.render(<></>);
                     }
                 }
             }

package/src/components/Application/tests/ApplicationViewability.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { expect } from "@storybook/test";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { ApplicationViewability, ApplicationViewabilityProps, CLASSPREFIX as eccgui } from "../../../index";
+
+import { Default as ApplicationViewabilityStory } from "./../stories/ApplicationViewability.stories";
+
+const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
+    const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
+    const element = container.getElementsByClassName(
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+    );
+    expect(element.length).toBe(1);
+    return element;
+};
+
+describe("ApplicationViewability", () => {
+    it("should be visible on `show=screen`", () => {
+        applyViewabilityAndCheckClass({ show: "screen" });
+        /**
+         * Currently we cannot really test visibility via jest if it is defined by S/CSS rules because those styles are not known.
+         * Looks like it is not too easy to include and test them.
+         * So we only test for the correct CSS class.
+         */
+        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `hide=screen`", () => {
+        applyViewabilityAndCheckClass({ hide: "screen" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+    it("should be visible on `hide=print`", () => {
+        applyViewabilityAndCheckClass({ hide: "print" });
+        // waitFor(() => expect(element).toBeVisible());
+    });
+    it("should not be visible on `show=print`", () => {
+        applyViewabilityAndCheckClass({ show: "print" });
+        // waitFor(() => expect(element).not.toBeVisible());
+    });
+});

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -39,7 +39,9 @@
     }
 
     &:has(.cm-editor.cm-focused) {
-        box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
     }
 
     .cm-editor {

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -124,10 +124,10 @@ export interface CodeAutocompleteFieldProps {
      */
     useTabForCompletions?: boolean;
     /** An additional element that is put to the left side of the input field */
-    leftElement?: JSX.Element | null;
+    leftElement?: React.JSX.Element | null;
     /** An additional element that is put to the right side of the input field
      */
-    rightElement?: JSX.Element | null;
+    rightElement?: React.JSX.Element | null;
     /** Placeholder tobe shown when no text has been entered, yet. */
     placeholder?: string;
     /** If the horizontal scrollbars should be shown. */
@@ -214,7 +214,7 @@ export const CodeAutocompleteField = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>();
+    const currentCm = React.useRef<EditorView>(undefined);
     currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
@@ -361,7 +361,7 @@ export const CodeAutocompleteField = ({
         return { fromOffset, toOffset };
     };
 
-    const inputActionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node:any) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -88,7 +88,7 @@ export const AutoSuggestionList = ({
 }: AutoSuggestionListProps) => {
     const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
     // Refs of list items
-    const [refs] = React.useState<React.RefObject<Element>[]>([]);
+    const [refs] = React.useState<React.RefObject<Element | null>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
     const generateRef = (index: number) => {
         if (!refs[index]) {

package/src/components/AutoSuggestion/tests/ExtendedCodeEditor.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { render } from "@testing-library/react";
 import { EditorView } from "@codemirror/view";
+import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -64,7 +64,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
         query: string,
         modifiers: SuggestFieldItemRendererModifierProps,
         handleClick: () => any
-    ): string | JSX.Element;
+    ): string | React.JSX.Element;
 
     /** Renders the string that should be displayed in the input field after the item has been selected.
      */
@@ -122,7 +122,7 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
             query: string,
             modifiers: SuggestFieldItemRendererModifierProps,
             handleClick: React.MouseEventHandler<HTMLElement>
-        ) => JSX.Element | undefined;
+        ) => React.JSX.Element | undefined;
 
         /** If the new item option will always be shown as the first entry in the suggestion list, else it will be the last entry.
          * @default false
@@ -160,19 +160,10 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
-SuggestField.defaultProps = {
-    autoFocus: false,
-    disabled: false,
-    onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
-    fill: true,
-    requestErrorPrefix: "",
-    hasBackDrop: false,
-};
-
 /**
  * A component with the appearance of an input field that allows to select and optionally create new items.
  * It shows suggestions for the entered text from which the user can select any option.
- * 
+ *
  * It has the following fixed behavior:
  *
  * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
@@ -187,21 +178,21 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
         className,
         reset,
         noResultText,
-        disabled,
-        onlyDropdownWithQuery,
+        disabled = false,
+        onlyDropdownWithQuery = false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
         itemValueSelector,
         itemRenderer,
         onSearch,
         onChange,
         initialValue,
-        autoFocus,
+        autoFocus = false,
         createNewItem,
         itemValueRenderer,
         resetQueryToValue,
         itemValueString,
-        requestErrorPrefix,
-        hasBackDrop,
-        fill,
+        requestErrorPrefix = "",
+        hasBackDrop = false,
+        fill = true,
         loadMoreResults,
         ...otherProps
     } = props;

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -14,7 +14,7 @@ import { SuggestFieldItemRendererModifierProps } from "./interfaces";
  * @param iconName Optional icon to show left to the text.
  */
 export const createNewItemRendererFactory = (
-    itemTextRenderer: (query: string) => string | JSX.Element,
+    itemTextRenderer: (query: string) => string | React.JSX.Element,
     iconName?: ValidIconName | React.ReactElement<TestIconProps>
 ) => {
     // Return custom render function

package/src/components/Badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Badge, Icon, TestIcon } from "../../../index";
+import { Badge, Icon, TestIcon } from "../../components";
 
 export default {
     title: "Components/Badge",

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { Badge } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+describe("Badge", () => {
+    it("should shorten a number badge exceeding maxLength to a 9+ notation", () => {
+        const { container } = render(<Badge maxLength={2}>{42}</Badge>);
+        const badge = container.querySelector(`.${eccgui}-badge__tag`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("9+");
+    });
+    it("should apply maxWidth style to a string badge when maxLength is set", () => {
+        const { container } = render(<Badge maxLength={4}>forty two</Badge>);
+        const tag = container.querySelector(`.${eccgui}-badge__tag`);
+        expect(tag).not.toBeNull();
+        expect((tag as HTMLElement).style.maxWidth).toBe("calc((3em + 3ch)/2)");
+    });
+});

package/src/components/Breadcrumb/breadcrumb.scss

@@ -19,8 +19,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
         width: $eccgui-size-block-whitespace;
         height: auto;
         margin: 0;
-        text-align: center;
         vertical-align: middle;
+        text-align: center;
         content: ">";
         background: none;
     }
@@ -61,8 +61,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
 .#{$eccgui}-breadcrumb__item {
     display: inline-block;
     overflow: hidden;
-    font-size: inherit;
     text-overflow: ellipsis;
+    font-size: inherit;
 
     a {
         @extend .#{$eccgui}-breadcrumb__item;

package/src/components/Button/Button.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
 
 import Button from "./Button";
@@ -21,7 +22,7 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").lastChild).toEqual(screen.getByText(/left icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
     });
 
     it("should have icon at the right after the text", () => {
@@ -31,6 +32,19 @@ describe("Button", () => {
             </Button>
         );
         expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
-        expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+        expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
+    });
+
+    it("should render badge markup with correct content when used on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={"badge content"} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("badge content");
+    });
+    it("should render badge markup with correct content when batch displays a 0 (zero) number on an icon button", () => {
+        const { container } = render(<Button name="item-info" badge={0} text={"Cation label"} />);
+        const badge = container.querySelector(`.${eccgui}-badge`);
+        expect(badge).not.toBeNull();
+        expect(badge).toHaveTextContent("0");
     });
 });

package/src/components/Button/Button.tsx

@@ -47,7 +47,7 @@ interface AdditionalButtonProps {
     /**
      * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
      */
-    tooltip?: string | JSX.Element | null;
+    tooltip?: string | React.JSX.Element | null;
     /**
      * Object with additional properties for the tooltip.
      */
@@ -55,11 +55,11 @@ interface AdditionalButtonProps {
     /**
      * Icon displayed on button start.
      */
-    icon?: ValidIconName | JSX.Element;
+    icon?: ValidIconName | React.JSX.Element;
     /**
      * Icon displayed on button end.
      */
-    rightIcon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | React.JSX.Element;
 }
 
 interface ExtendedButtonProps
@@ -104,16 +104,21 @@ export const Button = ({
 
     const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
+    const iconSize = {
+        small: restProps["size"] === "small",
+        large: restProps["size"] === "large",
+    };
+
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
             intent={(intent || intentByFunction) as BlueprintIntent}
-            icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
-            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
+            icon={typeof icon === "string" ? <Icon name={icon} {...iconSize} /> : icon}
+            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} {...iconSize} /> : rightIcon}
         >
             {children}
-            {badge && (
+            {typeof badge !== "undefined" && (
                 <Badge
                     children={badge}
                     {...constructBadgeProperties({

package/src/components/Button/button.scss

@@ -166,7 +166,9 @@ $button-intents: (
     // 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("success");
     @include eccgui-enhance-blueprint-button-intent("warning");
+    @include eccgui-enhance-blueprint-button-intent("danger");
 }
 
 .#{$ns}-button-text {

package/src/components/Card/CardHeader.tsx

@@ -8,7 +8,7 @@ import CardOptions from "./CardOptions";
 import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
-    children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined;
 }
 
 export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {

package/src/components/Card/card.scss

@@ -288,3 +288,9 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-card__actions {
+        display: none;
+    }
+}

package/src/components/Card/stories/Card.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../components";
 
 import { Default as CardActionsExample } from "./CardActions.stories";
 import { Default as CardContentExample } from "./CardContent.stories";

package/src/components/Checkbox/Stories/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Checkbox, HtmlContentBlock } from "../../../../index";
+import { Checkbox, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Forms/Checkbox",

package/src/components/Checkbox/checkbox.scss

@@ -24,9 +24,15 @@ $control-indicator-spacing: $eccgui-size-inline-whitespace !default;
 // $switch-background-color-active: rgba($gray1, 0.5) !default;
 // $switch-background-color-disabled: $button-background-color-disabled !default;
 $switch-checked-background-color: $eccgui-color-accent !default;
-$switch-checked-background-color-hover: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
+$switch-checked-background-color-hover: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-narrow
+) !default;
 $switch-checked-background-color-active: $switch-checked-background-color-hover !default;
-$switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
+$switch-checked-background-color-disabled: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-disabled
+) !default;
 
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 
@@ -41,7 +47,7 @@ $switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-bac
         }
 
         input:focus ~ .#{$ns}-control-indicator {
-            outline-offset: 0;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
@@ -66,6 +72,14 @@ $switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-bac
             background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg");
         }
     }
+
+    &.#{$ns}-switch {
+        --#{$eccgui}-a11y-outline-offset: 1px;
+
+        input:focus ~ .#{$ns}-control-indicator {
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+        }
+    }
 }
 
 .#{$ns}-control-indicator + *,
@@ -73,3 +87,9 @@ $switch-checked-background-color-disabled: eccgui-color-rgba($switch-checked-bac
     display: inline-block;
     vertical-align: text-top;
 }
+
+@media print {
+    .#{$ns}-control {
+        print-color-adjust: exact;
+    }
+}

package/src/components/ColorField/ColorField.stories.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { getEnabledColorsProps } from "../../common/utils/colorHash";
+import textFieldTest from "../TextField/stories/TextField.stories";
+
+import { ColorField, ColorFieldProps } from "./ColorField";
+
+export default {
+    title: "Forms/ColorField",
+    component: ColorField,
+    argTypes: {
+        ...textFieldTest.argTypes,
+    },
+} as Meta<typeof ColorField>;
+
+const Template: StoryFn<typeof ColorField> = (args) => <ColorField {...args}></ColorField>;
+
+export const Default = Template.bind({});
+Default.args = {
+    onChange: (e) => {
+        alert(e.target.value);
+    },
+};
+
+export const NoPalettePresets = Template.bind({});
+NoPalettePresets.args = {
+    ...Default.args,
+    allowCustomColor: true,
+    colorPresets: [],
+};
+
+type TemplateColorHashProps = { stringForColorHashValue: string } & Pick<
+    ColorFieldProps,
+    "onChange" | "allowCustomColor"
+> &
+    Pick<getEnabledColorsProps, "includeColorWeight" | "includePaletteGroup">;
+
+const TemplateColorHash: StoryFn<TemplateColorHashProps> = (args: TemplateColorHashProps) => (
+    <ColorField
+        allowCustomColor={args.allowCustomColor}
+        colorPresets={ColorField.listColorPalettePresets({
+            includeColorWeight: args.includeColorWeight,
+            includePaletteGroup: args.includePaletteGroup,
+        })}
+        value={ColorField.calculateColorHashValue(args.stringForColorHashValue, {
+            allowCustomColor: args.allowCustomColor,
+            includeColorWeight: args.includeColorWeight,
+            includePaletteGroup: args.includePaletteGroup,
+        })}
+    />
+);
+
+/**
+ * Component provides a helper function to calculate a color hash from a text,
+ * that can be used as `value` or `defaultValue`.
+ *
+ * ```
+ * <ColorField value={ColorField.calculateColorHashValue("MyText")} />
+ * ```
+ *
+ * You can add `options` to set the config for the color palette filters.
+ * The same default values like on `ColorField` are used for them.
+ */
+export const ColorHashValue = TemplateColorHash.bind({});
+ColorHashValue.args = {
+    ...Default.args,
+    allowCustomColor: true,
+    includeColorWeight: [300, 500, 700],
+    includePaletteGroup: ["layout", "extra"],
+    stringForColorHashValue: "My text that will used to create a color hash as initial value.",
+};