@eccenca/gui-elements 25.0.0-rc.2 → 25.1.0-featurev2510colorfield.0

package/src/components/Application/ApplicationViewability.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import classNames from "classnames";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type media = "print" | "screen";
+
+interface ApplicationViewabilityShow {
+    /**
+     * Show on media type.
+     * If used, `hide` cannot be set.
+     */
+    show: media;
+    hide?: never;
+}
+
+interface ApplicationViewabilityHide {
+    /**
+     * Hide on media type.
+     * If used, `show` cannot be set.
+     */
+    hide: media;
+    show?: never;
+}
+
+interface ApplicationViewabilityUndecided {
+    /**
+     * Only one child allowed.
+     * Need to process the `className` property.
+     */
+    children: React.ReactElement<{ className?: string }>;
+}
+
+export type ApplicationViewabilityProps = ApplicationViewabilityUndecided &
+    (ApplicationViewabilityShow | ApplicationViewabilityHide);
+
+/**
+ * Sets the viewability of the the contained element regarding media.
+ * Can be used to hide elements, e.g. when the page is printed.
+ */
+export const ApplicationViewability = ({ children, show, hide }: ApplicationViewabilityProps) => {
+    if (!show && !hide) {
+        return children;
+    }
+    if (show === hide) {
+        // eslint-disable-next-line no-console
+        console.warn("`<ApplicationViewability/>` used with same media type for `hide` and `show`.");
+        return children;
+    }
+
+    const enhancedClone = React.cloneElement(children, {
+        className: classNames(children.props.className, {
+            [`${eccgui}-application__hide--${hide}`]: hide,
+            [`${eccgui}-application__show--${show}`]: show,
+        }),
+    });
+
+    return enhancedClone;
+};
+
+export default ApplicationViewability;

package/src/components/Application/_colors.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 
 :root {
+    // creating css custom properties from palette colors
     @each $palette-group-name, $palette-group-tints in $eccgui-color-palette-light {
         @each $palette-tint-name, $palette-tint-colors in $palette-group-tints {
             @for $i from 1 through list.length($palette-tint-colors) {
@@ -12,4 +13,18 @@
             }
         }
     }
+
+    // set aliases for base colors
+    --#{$eccgui}-color-primary: #{$eccgui-color-primary};
+    --#{$eccgui}-color-primary-contrast: #{$eccgui-color-primary-contrast};
+    --#{$eccgui}-color-accent: #{$eccgui-color-accent};
+    --#{$eccgui}-color-accent-contrast: #{$eccgui-color-accent-contrast};
+    --#{$eccgui}-color-success-foreground: #{$eccgui-color-success-text};
+    --#{$eccgui}-color-success-background: #{$eccgui-color-success-background};
+    --#{$eccgui}-color-info-foreground: #{$eccgui-color-info-text};
+    --#{$eccgui}-color-info-background: #{$eccgui-color-info-background};
+    --#{$eccgui}-color-warning-foreground: #{$eccgui-color-warning-text};
+    --#{$eccgui}-color-warning-background: #{$eccgui-color-warning-background};
+    --#{$eccgui}-color-danger-foreground: #{$eccgui-color-danger-text};
+    --#{$eccgui}-color-danger-background: #{$eccgui-color-danger-background};
 }

package/src/components/Application/_content.scss

@@ -25,3 +25,10 @@ $ui-02: $eccgui-color-workspace-background !default;
 .#{$eccgui}-application__content--railsidebar {
     margin-left: mini-units(8);
 }
+
+@media print {
+    .#{$eccgui}-application__content {
+        padding: $eccgui-size-block-whitespace 0 0 0 !important;
+        margin: 0;
+    }
+}

package/src/components/Application/_header.scss

@@ -98,10 +98,10 @@ span.#{$prefix}--header__name {
 .#{$eccgui}-application__title--content {
     display: inline-block;
     overflow: hidden;
+    text-overflow: ellipsis;
     font-size: $eccgui-size-typo-caption;
     font-weight: $eccgui-font-weight-bold;
     line-height: $eccgui-size-typo-caption-lineheight;
-    text-overflow: ellipsis;
     letter-spacing: $eccgui-font-spacing-wide;
     white-space: nowrap;
 }
@@ -122,7 +122,7 @@ span.#{$prefix}--header__name {
         height: auto;
         max-height: mini-units(5);
         padding: 0;
-        margin: mini-units(1.4) 0 mini-units(1.6) 0;
+        margin: mini-units(1.4) 0 mini-units(1.6);
         vertical-align: middle;
     }
 }
@@ -195,9 +195,9 @@ a.#{$prefix}--header__menu-item:active {
 .#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border: none;
     outline: 1px dotted $shell-header-focus;
     outline-offset: -1px;
+    border: none;
     box-shadow: none;
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
@@ -267,3 +267,12 @@ a.#{$prefix}--header__menu-item:focus > svg {
         margin: 0;
     }
 }
+
+@media print {
+    .#{$eccgui}-application__header {
+        position: relative;
+        & > :not(.#{$eccgui}-workspace__header) {
+            display: none;
+        }
+    }
+}

package/src/components/Application/_viewability.scss

@@ -0,0 +1,13 @@
+@media print {
+    .#{eccgui}-application__hide--print,
+    .#{eccgui}-application__show--screen {
+        display: none !important;
+    }
+}
+
+@media screen {
+    .#{eccgui}-application__hide--screen,
+    .#{eccgui}-application__show--print {
+        display: none !important;
+    }
+}

package/src/components/Application/application.scss

@@ -10,3 +10,4 @@
 // @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";
+@import "viewability";

package/src/components/Application/index.ts

@@ -8,4 +8,5 @@ export * from "./ApplicationToolbar";
 export * from "./ApplicationToolbarSection";
 export * from "./ApplicationToolbarAction";
 export * from "./ApplicationToolbarPanel";
+export * from "./ApplicationViewability";
 export * from "./helper";

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/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/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/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/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
 
@@ -73,3 +79,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,69 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+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,
+    includeColorWeight: [],
+    includePaletteGroup: [],
+    allowCustomColor: true,
+};
+
+interface TemplateColorHashProps
+    extends Pick<ColorFieldProps, "onChange" | "allowCustomColor" | "includeColorWeight" | "includePaletteGroup"> {
+    stringForColorHashValue: string;
+}
+
+const TemplateColorHash: StoryFn<TemplateColorHashProps> = (args: TemplateColorHashProps) => (
+    <ColorField
+        allowCustomColor={args.allowCustomColor}
+        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.",
+};

package/src/components/ColorField/ColorField.test.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { ColorField } from "./ColorField";
+
+describe("ColorField", () => {
+    describe("rendering", () => {
+        it("renders without crashing, and correct component CSS class is applied", () => {
+            const { container } = render(<ColorField />);
+            expect(container).not.toBeEmptyDOMElement();
+            expect(container.getElementsByClassName(`${eccgui}-colorfield`).length).toBe(1);
+        });
+
+        it("renders a color input by default (no palette presets)", () => {
+            const { container } = render(
+                <ColorField includePaletteGroup={[]} includeColorWeight={[]} allowCustomColor={true} />
+            );
+            expect(container.querySelector("input[type='color']")).toBeInTheDocument();
+        });
+
+        // Jest cannot test this because it does not (cannot) load Styles where the palette isconfigured
+        /*
+        it("renders a readonly text input when palette colors are configured, and custom picker CSS class is applied", () => {
+            const { container } = render(<ColorField className="my-custom-class" />);
+            // With default palette settings, a text input with readOnly is shown
+            expect(container.querySelector("input[type='text']")).toBeInTheDocument();
+            expect(container.querySelector("input[readonly]")).toBeInTheDocument();
+            expect(container.querySelector(`.${eccgui}-colorfield--custom-picker`)).toBeInTheDocument();
+        });
+         */
+
+        it("applies additional className", () => {
+            render(
+                <ColorField
+                    className="my-custom-class"
+                    includePaletteGroup={[]}
+                    includeColorWeight={[]}
+                    allowCustomColor={true}
+                />
+            );
+            expect(document.querySelector(".my-custom-class")).toBeInTheDocument();
+        });
+    });
+
+    describe("value handling", () => {
+        it("uses defaultValue as initial color", () => {
+            render(
+                <ColorField
+                    defaultValue="#ff0000"
+                    includePaletteGroup={[]}
+                    includeColorWeight={[]}
+                    allowCustomColor={true}
+                />
+            );
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#ff0000");
+        });
+
+        it("uses value prop as initial color", () => {
+            render(
+                <ColorField value="#00ff00" includePaletteGroup={[]} includeColorWeight={[]} allowCustomColor={true} />
+            );
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#00ff00");
+        });
+
+        it("falls back to #000000 when no value or defaultValue is provided", () => {
+            render(<ColorField includePaletteGroup={[]} includeColorWeight={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#000000");
+        });
+
+        it("updates displayed value when value prop changes", () => {
+            const { rerender } = render(
+                <ColorField value="#ff0000" includePaletteGroup={[]} includeColorWeight={[]} allowCustomColor={true} />
+            );
+            let input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#ff0000");
+
+            rerender(
+                <ColorField value="#0000ff" includePaletteGroup={[]} includeColorWeight={[]} allowCustomColor={true} />
+            );
+            input = document.querySelector("input") as HTMLInputElement;
+            expect(input.value).toBe("#0000ff");
+        });
+    });
+
+    describe("disabled state", () => {
+        it("is disabled when disabled prop is true", () => {
+            render(<ColorField disabled includePaletteGroup={[]} includeColorWeight={[]} allowCustomColor={true} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input).toBeDisabled();
+        });
+
+        it("is disabled when no palette colors and allowCustomColor is false", () => {
+            render(<ColorField includePaletteGroup={[]} includeColorWeight={[]} allowCustomColor={false} />);
+            const input = document.querySelector("input") as HTMLInputElement;
+            expect(input).toBeDisabled();
+        });
+    });
+
+    describe("onChange callback", () => {
+        it("calls onChange when native color input changes", async () => {
+            const user = userEvent.setup();
+            const onChange = jest.fn();
+            render(
+                <ColorField
+                    onChange={onChange}
+                    includePaletteGroup={[]}
+                    includeColorWeight={[]}
+                    allowCustomColor={true}
+                />
+            );
+            const input = document.querySelector("input[type='color']") as HTMLInputElement;
+            input.type = "text"; // for unknown reasons Jest seems not able to test it on color inputs
+            await user.type(input, "#123456");
+            expect(onChange).toHaveBeenCalled();
+        });
+    });
+});