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

package/src/components/DecoupledOverlay/DecoupledOverlay.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
+import { createPopper } from "@popperjs/core";
+
+import { CLASSPREFIX as eccgui, ContextOverlayProps, TestableComponent, TooltipSize, WhiteSpaceContainer } from "../../index";
+
+export interface DecoupledOverlayProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        TestableComponent,
+        Pick<ContextOverlayProps, "usePortal" | "portalContainer" | "placement" | "minimal" | "paddingSize"> {
+    /**
+     * Element that should be used. The step content is displayed as a tooltip instead of a modal.
+     * In case of an array, the first match is highlighted. */
+    targetSelectorOrElement: string | Element;
+    /**
+     * The size of the overlay.
+     * */
+    size?: TooltipSize;
+}
+
+/**
+ * Use an overlay popover without the necessity to use a target that need to be rendered in place.
+ * The target is referenced by a selector string or element object.
+ * It can exist somewhere in the DOM, but it must exist when the overlay is rendered.
+ * It is always displayed, close it by removement.
+ */
+export const DecoupledOverlay = ({
+    targetSelectorOrElement,
+    usePortal = true,
+    portalContainer = document.body,
+    minimal = false,
+    placement = "auto",
+    size = "large",
+    paddingSize,
+    children,
+}: DecoupledOverlayProps) => {
+    const overlayRef = React.useCallback(
+        (overlay: HTMLDivElement | null) => {
+            const target =
+                typeof targetSelectorOrElement === "string"
+                    ? document.querySelector(targetSelectorOrElement)
+                    : targetSelectorOrElement;
+            if (overlay && target) {
+                createPopper(target, overlay, {
+                    placement: placement,
+                    modifiers: [
+                        {
+                            name: "offset",
+                            options: {
+                                offset: [0, 15],
+                            },
+                        },
+                    ],
+                });
+            }
+        },
+        [targetSelectorOrElement]
+    );
+
+    const overlay = (
+        <div
+            className={
+                `${eccgui}-decoupled-overlay` +
+                ` ${eccgui}-decoupled-overlay--${size}` +
+                ` ${BlueprintClasses.POPOVER}` +
+                (minimal ? ` ${BlueprintClasses.MINIMAL}` : "")
+            }
+            role="tooltip"
+            ref={overlayRef}
+        >
+            {!minimal && (
+                <div
+                    className={`${eccgui}-decoupled-overlay__arrow ${BlueprintClasses.POPOVER_ARROW}`}
+                    data-popper-arrow
+                    aria-hidden
+                />
+            )}
+            <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-decoupled-overlay__content`}>
+                {paddingSize ? (
+                    <WhiteSpaceContainer
+                        paddingTop={paddingSize}
+                        paddingRight={paddingSize}
+                        paddingBottom={paddingSize}
+                        paddingLeft={paddingSize}
+                    >
+                        {children}
+                    </WhiteSpaceContainer>
+                ) : children}
+            </div>
+        </div>
+    );
+
+    return usePortal ? createPortal(overlay, portalContainer) : overlay;
+};
+
+export default DecoupledOverlay;

package/src/components/DecoupledOverlay/_decoupledoverlay.scss

@@ -0,0 +1,46 @@
+.#{$eccgui}-decoupled-overlay__arrow {
+    &::before {
+        background: $card-background-color;
+    }
+
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="top"] & {
+        bottom: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="right"] & {
+        left: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="bottom"] & {
+        top: -0.5 * $eccgui-size-block-whitespace;
+    }
+    .#{$eccgui}-decoupled-overlay[data-popper-placement="left"] & {
+        right: -0.5 * $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-decoupled-overlay {
+    &.#{$prefix-blueprintjs}-popover {
+        z-index: 8001;
+    }
+
+    &--small {
+        @extend .#{$eccgui}-tooltip--small;
+    }
+
+    &--medium {
+        @extend .#{$eccgui}-tooltip--medium;
+    }
+
+    &--large {
+        @extend .#{$eccgui}-tooltip--large;
+    }
+
+    &:has(.#{$eccgui}-decoupled-overlay__arrow) {
+        .#{$eccgui}-decoupled-overlay__content {
+            min-height: 30px; // height of blueprint arrow
+        }
+    }
+}
+
+.#{$eccgui}-decoupled-overlay__content {
+    padding: 0.1px; // force margins of children to stay inside
+}

package/src/components/Depiction/depiction.scss

@@ -220,3 +220,9 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     position: fixed;
     left: -5000rem;
 }
+
+@media print {
+    .#{$eccgui}-depiction {
+        print-color-adjust: exact;
+    }
+}

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

@@ -1,20 +1,11 @@
 import React from "react";
-import { Classes, OverlaysProvider } from "@blueprintjs/core";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
-import {
-    Button,
-    Card,
-    CardContent,
-    Modal,
-    ModalContext,
-    ModalSize,
-    Spacing,
-    useModalContext,
-} from "./../../../../index";
+import { Card, Modal } from "./../../../../index";
 
 export default {
     title: "Components/Dialog/Modal",
@@ -24,15 +15,18 @@ export default {
             control: false,
         },
     },
+    decorators: [
+        (Story) => (
+            <OverlaysProvider>
+                <div style={{ height: "400px" }}>
+                    <Story />
+                </div>
+            </OverlaysProvider>
+        ),
+    ],
 } as Meta<typeof Modal>;
 
-const Template: StoryFn<typeof Modal> = (args) => (
-    <OverlaysProvider>
-        <div style={{ height: "400px" }}>
-            <Modal {...args} />
-        </div>
-    </OverlaysProvider>
-);
+const Template: StoryFn<typeof Modal> = (args) => <Modal {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -42,135 +36,3 @@ Default.args = {
     onOpening: fn(),
     onClosing: fn(),
 };
-
-const ContextTemplate = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
-    const { setModalOpen, openModalStack } = useModalContext();
-
-    return (
-        <OverlaysProvider>
-            <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
-                <ModalContext.Provider value={{ setModalOpen, openModalStack }}>{children}</ModalContext.Provider>
-            </div>
-        </OverlaysProvider>
-    );
-};
-
-const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
-    return (
-        <Card style={{ height: "100%" }}>
-            <CardContent>{children}</CardContent>
-        </Card>
-    );
-};
-
-/** Component for nested modals. */
-const ExampleModal = ({
-    id,
-    size,
-    children,
-}: {
-    id?: string;
-    size: ModalSize;
-    children?: React.HTMLAttributes<HTMLDivElement>["children"];
-}) => {
-    const [isOpen, setIsOpen] = React.useState(true);
-    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
-
-    React.useEffect(() => {
-        setPortalElement(document.getElementById("modalPortal")!);
-    }, []);
-
-    return (
-        <Modal
-            modalId={id}
-            size={size}
-            isOpen={isOpen}
-            usePortal={true}
-            portalContainer={portalElement}
-            hasBackdrop={true}
-            onOpened={() => {
-                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
-                document.body.classList.remove(Classes.OVERLAY_OPEN);
-            }}
-        >
-            <ModalContent>
-                Modal with constant modal ID "{id}".
-                <Spacing />
-                <TrackingContent />
-                <Spacing />
-                {children}
-                <Spacing />
-                <Button key={"close"} onClick={() => setIsOpen(false)}>
-                    Close
-                </Button>
-            </ModalContent>
-        </Modal>
-    );
-};
-
-const InnerModal = () => {
-    return <ExampleModal id="innerModal" size="small" />;
-};
-
-const MiddleModal = () => {
-    return (
-        <ExampleModal id="middleModal" size="regular">
-            <InnerModal />
-        </ExampleModal>
-    );
-};
-
-/** Shows the current stack of open modals. */
-const TrackingContent = () => {
-    const modalContext = React.useContext(ModalContext);
-
-    return (
-        <ul>
-            {(modalContext.openModalStack() ?? []).map((modalId, idx) => (
-                <li key={modalId}>
-                    {idx + 1}. {modalId}
-                </li>
-            ))}
-        </ul>
-    );
-};
-
-/**
- * `ModalContext` can be used as provider to track a stack of modals.
- *
- * ```(Javascript)
- * const ContextTemplate = () => {
- *     const { setModalOpen, openModalStack } = useModalContext();
- *     return (
- *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
- *             <SimpleDialog size="large" isOpen>
- *                 <OtherModal />
- *             </SimpleDialog>
- *         </ModalContext.Provider>
- *     );
- * };
- *
- * const OtherModal = () => {
- *     const modalContext = React.useContext(ModalContext);
- *     return (
- *         <SimpleDialog size="small">
- *            <ul>
- *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
- *                    <li key={modalId}>
- *                        {idx + 1}. {modalId}
- *                    </li>
- *                ))}
- *            </ul>
- *         </SimpleDialog>
- *     );
- * };
- * ```
- */
-export const NestedModalWithContext = ContextTemplate.bind({});
-NestedModalWithContext.args = {
-    children: [
-        <ExampleModal id="rootModal" size="large">
-            <MiddleModal />
-        </ExampleModal>,
-    ],
-};

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

@@ -0,0 +1,153 @@
+import React from "react";
+import { Classes, OverlaysProvider } from "@blueprintjs/core";
+import { Meta } from "@storybook/react";
+
+import {
+    Button,
+    Card,
+    CardContent,
+    Modal,
+    ModalContext,
+    ModalContextProps,
+    ModalSize,
+    Spacing,
+    useModalContext,
+} from "./../../../../index";
+
+/**
+ * `ModalContext` can be used as provider to track a stack of modals.
+ *
+ * ```(Javascript)
+ * import { ModalContext, SimpleDialog } from "@eccenca/gui-elements";
+ *
+ * const ContextTemplate = () => {
+ *     const { setModalOpen, openModalStack } = useModalContext();
+ *     return (
+ *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+ *             <SimpleDialog size="large" isOpen>
+ *                 <OtherModal />
+ *             </SimpleDialog>
+ *         </ModalContext.Provider>
+ *     );
+ * };
+ *
+ * const OtherModal = () => {
+ *     const modalContext = React.useContext(ModalContext);
+ *     return (
+ *         <SimpleDialog size="small">
+ *            <ul>
+ *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+ *                    <li key={modalId}>
+ *                        {idx + 1}. {modalId}
+ *                    </li>
+ *                ))}
+ *            </ul>
+ *         </SimpleDialog>
+ *     );
+ * };
+ * ```
+ */
+export default {
+    title: "Components/Dialog/ModalContext",
+    decorators: [
+        (Story) => (
+            <OverlaysProvider>
+                <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
+                    <Story />
+                </div>
+            </OverlaysProvider>
+        ),
+    ],
+} as Meta<ModalContextProps>;
+
+export const Usage = () => {
+    const { setModalOpen, openModalStack } = useModalContext();
+
+    return (
+        <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+            <ExampleModal id="rootModal" size="large">
+                <MiddleModal />
+            </ExampleModal>
+        </ModalContext.Provider>
+    );
+};
+
+const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Card style={{ height: "100%" }}>
+            <CardContent>{children}</CardContent>
+        </Card>
+    );
+};
+
+/** Component for nested modals. */
+const ExampleModal = ({
+    id,
+    size,
+    children,
+}: {
+    id?: string;
+    size: ModalSize;
+    children?: React.HTMLAttributes<HTMLDivElement>["children"];
+}) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
+
+    React.useEffect(() => {
+        setPortalElement(document.getElementById("modalPortal")!);
+    }, []);
+
+    return (
+        <Modal
+            modalId={id}
+            size={size}
+            isOpen={isOpen}
+            usePortal={true}
+            portalContainer={portalElement}
+            hasBackdrop={true}
+            onOpened={() => {
+                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
+                document.body.classList.remove(Classes.OVERLAY_OPEN);
+            }}
+        >
+            <ModalContent>
+                Modal with constant modal ID "{id}".
+                <Spacing />
+                <TrackingContent />
+                <Spacing />
+                {children}
+                <Spacing />
+                <Button key={"close"} onClick={() => setIsOpen(false)}>
+                    Close
+                </Button>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+const InnerModal = () => {
+    return <ExampleModal id="innerModal" size="small" />;
+};
+
+const MiddleModal = () => {
+    return (
+        <ExampleModal id="middleModal" size="regular">
+            <InnerModal />
+        </ExampleModal>
+    );
+};
+
+/** Shows the current stack of open modals. */
+const TrackingContent = () => {
+    const modalContext = React.useContext(ModalContext);
+
+    return (
+        <ul>
+            {(modalContext.openModalStack() ?? []).map((modalId, idx) => (
+                <li key={modalId}>
+                    {idx + 1}. {modalId}
+                </li>
+            ))}
+        </ul>
+    );
+};

package/src/components/FlexibleLayout/flexiblelayout.scss

@@ -46,3 +46,19 @@
         flex-basis: auto;
     }
 }
+
+@media print {
+    .#{$eccgui}-flexible__container,
+    .#{$eccgui}-flexible__item {
+        position: relative;
+        display: block;
+        width: auto;
+        height: auto;
+        padding: 0;
+        margin: 0;
+
+        &:is(.#{$eccgui}-flexible__item) {
+            margin-bottom: $eccgui-size-block-whitespace;
+        }
+    }
+}

package/src/components/Grid/grid.scss

@@ -86,3 +86,20 @@ $grid-gutter: rem($eccgui-size-grid-gutter);
         flex-wrap: nowrap;
     }
 }
+
+@media print {
+    .#{$eccgui}-grid,
+    .#{$eccgui}-grid__row,
+    .#{$eccgui}-grid__column {
+        position: relative;
+        display: block;
+        width: auto;
+        height: auto;
+        padding: 0;
+        margin: 0;
+
+        &:is(.#{$eccgui}-grid__column) {
+            margin-bottom: $eccgui-size-block-whitespace;
+        }
+    }
+}

package/src/components/Grid/stories/Grid.stories.tsx

@@ -11,19 +11,22 @@ export default {
     subcomponents: { GridRow, GridColumn },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
+    decorators: [
+        (Story) => (
+            <div style={{ minHeight: "30vh", position: "relative" }}>
+                <Story />
+            </div>
+        ),
+    ],
 } as Meta<typeof Grid>;
 
-const Template: StoryFn<typeof Grid> = (args) => (
-    <div style={{ minHeight: "30vh", position: "relative" }}>
-        <Grid {...args} />
-    </div>
-);
+const Template: StoryFn<typeof Grid> = (args) => <Grid {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <GridRow {...RowExample.args} verticalStretched />,
+    children: [<GridRow {...RowExample.args} verticalStretched />, <GridRow {...RowExample.args} verticalStretched />],
     verticalStretchable: true,
 };

package/src/components/Grid/stories/GridRow.stories.tsx

@@ -10,21 +10,27 @@ export default {
     component: GridRow,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof GridRow>;
 
-const Template: StoryFn<typeof GridRow> = (args) => (
-    <Grid style={{ minHeight: "30vh" }} verticalStretchable>
-        <GridRow {...args} />
-    </Grid>
-);
+const Template: StoryFn<typeof GridRow> = (args) => <GridRow {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <GridColumn {...ColumnExample.args} verticalAlign="center" />,
+    children: [
+        <GridColumn {...ColumnExample.args} verticalAlign="center" key="col1" />,
+        <GridColumn {...ColumnExample.args} verticalAlign="center" key="col1" />,
+    ],
 };
+Default.decorators = [
+    (Story) => (
+        <Grid style={{ minHeight: "30vh" }} verticalStretchable>
+            <Story />
+        </Grid>
+    ),
+];
 
 const TemplateStretched: StoryFn<typeof GridRow> = (args) => (
     <Grid style={{ minHeight: "50vh" }} verticalStretchable>

package/src/components/Icon/IconButton.tsx

@@ -2,11 +2,11 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Button, { ButtonProps } from "../Button/Button";
+import {TestableComponent} from "../interfaces";
 
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
 import { TestIconProps } from "./TestIcon";
-import {TestableComponent} from "../interfaces";
 
 interface ExtendedButtonProps
     extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,5 +1,6 @@
 import * as icons from "@carbon/react/icons";
 import { CarbonIconType as IconType } from "@carbon/react/icons";
+import { transform} from "./transformIcon";
 
 const canonicalIcons = {
     "application-activities": icons.Activity,
@@ -172,8 +173,10 @@ const canonicalIcons = {
     "state-checked": icons.CheckboxChecked,
     "state-checkedsimple": icons.Checkmark,
     "state-confirmed": icons.ThumbsUp,
+    "state-confirmed-all": icons.ThumbsUpDouble,
     "state-danger": icons.ErrorFilled,
     "state-declined": icons.ThumbsDown,
+    "state-declined-all": transform(icons.ThumbsUpDouble, 0, false, true),
     "state-flagged": icons.Flag,
     "state-info": icons.InformationFilled,
     "state-locked": icons.Locked,

package/src/components/Icon/transformIcon.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { CarbonIconType, CarbonIconProps } from "@carbon/react/icons";
+
+export const transform = (IconSymbol: CarbonIconType, rotate: number = 0, flipH: boolean = false, flipV: boolean = false) : CarbonIconType => {
+    return React.forwardRef((props: CarbonIconProps, ref: React.ForwardedRef<React.ReactSVGElement>) => {
+        return (
+            <IconSymbol
+                {...props}
+                ref={ref}
+                transform={
+                    `scale(${flipH ? "-1" : "1"}, ${flipV ? "-1" : "1"}) rotate(${rotate})`
+                }
+            />
+        );
+    })
+}
+

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Link } from "../../../index";
+
+export default {
+    title: "Components/Link",
+    component: Link,
+    argTypes: {
+        target: {
+            control: "select",
+            options: ["_self", "_blank", "_parent", "_top"],
+        },
+    },
+} as Meta<typeof Link>;
+
+const Template: StoryFn<typeof Link> = (args) => <Link {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: "Example link",
+    href: "https://example.com/",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    children: "Disabled link",
+    href: "https://example.com/",
+    disabled: true,
+};