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

package/src/components/Dialog/ModalContext.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+export interface ModalContextProps {
+    /** Set that a specific modal is currently being open (or closed) */
+    setModalOpen: (modalId: string, isOpen: boolean) => void;
+
+    /** The currently opened modals ordered by when they have been opened. Oldest coming first. */
+    openModalStack(): string[] | undefined;
+}
+
+/** Can be provided in the application to react to modal related changes. */
+export const ModalContext = React.createContext<ModalContextProps>({
+    setModalOpen: () => {},
+    openModalStack: () => [],
+});
+
+/** Default implementation for modal context props.
+ * Tracks open modals in a stack representation.
+ **/
+export const useModalContext = (): ModalContextProps => {
+    // A stack of modal IDs. These should reflect a stacked opening of modals on top of each other.
+    const currentOpenModalStack = React.useRef<string[]>([]);
+
+    const setOpenModalStack = ((stackUpdateFunction: (old: string[]) => string[]) => {
+        currentOpenModalStack.current = stackUpdateFunction([...currentOpenModalStack.current])
+    })
+
+    const setModalOpen = React.useCallback((modalId: string, isOpen: boolean) => {
+        setOpenModalStack(old => {
+            if (isOpen) {
+                return [...old, modalId];
+            } else {
+                const idx = old.findIndex((id) => modalId === id);
+                switch (idx) {
+                    case -1:
+                        // Trying to close modal that has not been registered as open!
+                        return old;
+                    case old.length - 1:
+                        return old.slice(0, idx);
+                    default:
+                        // Modal in between is closed. Consider all modals after it also as closed.
+                        return old.slice(0, idx);
+                }
+            }
+        });
+    }, []);
+
+    const openModalStack = React.useCallback(() => {
+        return currentOpenModalStack.current.length ? [...currentOpenModalStack.current] : undefined
+    }, [])
+
+    return {
+        openModalStack,
+        setModalOpen,
+    };
+};

package/src/components/Dialog/index.ts

@@ -1,3 +1,4 @@
 export * from "./Modal";
 export * from "./SimpleDialog";
 export * from "./AlertDialog";
+export * from "./ModalContext";

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

@@ -15,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 = {

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/canonicalIconNames.tsx

@@ -25,6 +25,17 @@ const canonicalIcons = {
     "artefact-task-concatenatetofile": icons.DocumentExport,
     "artefact-task-sqlupdatequeryoperator": icons.Sql,
     "artefact-task-customsqlexecution": icons.Sql,
+    "artefact-task-multitablemerge": icons.JoinFull,
+    "artefact-task-jsonparseroperator": icons.JsonReference,
+    "artefact-task-searchaddresses": icons.SearchLocate,
+    "artefact-task-sparkfunction": icons.Flash,
+    "artefact-task-eccencadataplatformgraphstorefileuploadoperator": icons.Upload,
+    "artefact-task-xsltoperator": icons.TransformCode,
+    "artefact-task-distinctby": icons.Filter,
+    "artefact-task-template": icons.Template,
+    "artefact-task-merge": icons.Connect,
+    "artefact-task-scheduler": icons.EventSchedule,
+    "artefact-task-sendemail": icons.Email,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
@@ -77,6 +88,7 @@ const canonicalIcons = {
     "item-execution": icons.Run,
     "item-info": icons.Information,
     "item-launch": icons.Launch,
+    "item-legend": icons.Legend,
     "item-moremenu": icons.OverflowMenuVertical,
     "item-question": icons.Help,
     "item-reload": icons.Renew,
@@ -94,8 +106,8 @@ const canonicalIcons = {
     "item-hidedetails": icons.ViewOff,
     "item-image": icons.Image,
 
-    "list-sortasc": icons.ArrowDown,
-    "list-sortdesc": icons.ArrowUp,
+    "list-sortasc": icons.ArrowUp,
+    "list-sortdesc": icons.ArrowDown,
     "list-sort": icons.ArrowsVertical,
 
     "module-accesscontrol": icons.UserAdmin,
@@ -147,6 +159,7 @@ const canonicalIcons = {
     "operation-logout": icons.Logout,
     "operation-magic": icons.MagicWand,
     "operation-merge": icons.DirectionMerge,
+    "operation-tour": icons.Tour,
     "operation-redo": icons.Redo,
     "operation-search": icons.Search,
     "operation-send": icons.Send,
@@ -161,9 +174,13 @@ const canonicalIcons = {
     "state-confirmed": icons.ThumbsUp,
     "state-danger": icons.ErrorFilled,
     "state-declined": icons.ThumbsDown,
+    "state-flagged": icons.Flag,
     "state-info": icons.InformationFilled,
     "state-locked": icons.Locked,
     "state-partlychecked": icons.CheckboxIndeterminate,
+    "state-progress": icons.InProgress,
+    "state-progress-error": icons.InProgressError,
+    "state-progress-warning": icons.InProgressWarning,
     "state-protected": icons.DocumentProtected,
     "state-success": icons.CheckmarkFilled,
     "state-unchecked": icons.Checkbox,
@@ -171,13 +188,19 @@ const canonicalIcons = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-carettop": icons.CaretUp,
     "toggler-caretright": icons.CaretRight,
     "toggler-caretdown": icons.CaretDown,
+    "toggler-caretleft": icons.CaretLeft,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
+    "toggler-micon": icons.Microphone,
+    "toggler-micoff": icons.MicrophoneOff,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
     "toggler-list": icons.List,
+    "toggler-radio": icons.RadioButton,
+    "toggler-radio-checked": icons.RadioButtonChecked,
     "toggler-rowexpand": icons.RowExpand,
     "toggler-rowcollapse": icons.RowCollapse,
     "toggler-showless": icons.ChevronUp,

package/src/components/Icon/icon.scss

@@ -1,6 +1,12 @@
 .#{$eccgui}-icon {
     vertical-align: text-bottom;
 
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+    }
     &.#{$eccgui}-intent--info {
         color: $eccgui-color-info-text;
     }

package/src/components/Icon/stories/Icon.stories.tsx

@@ -2,7 +2,18 @@ import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Button, Icon } from "../../../../index";
+import {
+    Card,
+    FlexibleLayoutContainer,
+    FlexibleLayoutItem,
+    Icon,
+    OverflowText,
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    TitleSubsection,
+} from "../../../../index";
 import { Definitions } from "../../../common/Intent";
 import BaseIcon from "../BaseIcon";
 
@@ -19,7 +30,8 @@ export default {
         },
         intent: {
             control: "select",
-            options: { ...Definitions },
+            options: [...Object.keys(Definitions)],
+            mapping: { ...Definitions },
         },
     },
 } as Meta<typeof Icon>;
@@ -49,12 +61,60 @@ IconSizes.args = {
     name: "undefined",
 };
 
+/**
+ * Available icons by their canonical names.
+ * If you need another icon then use `<TestIcon /`> component.
+ */
 export const IconsOverview = () => {
+    let section = "";
+    let separation = <></>;
     return (
         <OverlaysProvider>
-            {Object.keys(canonicalIcons).map((iconName) => {
-                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} key={iconName} />;
-            })}
+            <FlexibleLayoutContainer
+                noEqualItemSpace
+                gapSize="small"
+                style={{ flexWrap: "wrap", justifyContent: "flex-start" }}
+            >
+                {Object.keys(canonicalIcons)
+                    .sort()
+                    .map((iconName) => {
+                        if (
+                            section !==
+                            iconName.substring(0, iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length)
+                        ) {
+                            section = iconName.substring(
+                                0,
+                                iconName.indexOf("-") > 0 ? iconName.indexOf("-") : iconName.length
+                            );
+                            separation = (
+                                <FlexibleLayoutItem style={{ width: "100%", padding: "1rem 0 0.5rem 0" }}>
+                                    <TitleSubsection>{section}</TitleSubsection>
+                                </FlexibleLayoutItem>
+                            );
+                        } else {
+                            separation = <></>;
+                        }
+                        return (
+                            <React.Fragment key={iconName}>
+                                {separation}
+                                <FlexibleLayoutItem growFactor={0} style={{ width: "20rem" }}>
+                                    <Card>
+                                        <OverviewItem>
+                                            <OverviewItemDepiction keepColors>
+                                                <Icon name={iconName as ValidIconName} />
+                                            </OverviewItemDepiction>
+                                            <OverviewItemDescription>
+                                                <OverviewItemLine small>
+                                                    <OverflowText>{iconName}</OverflowText>
+                                                </OverviewItemLine>
+                                            </OverviewItemDescription>
+                                        </OverviewItem>
+                                    </Card>
+                                </FlexibleLayoutItem>
+                            </React.Fragment>
+                        );
+                    })}
+            </FlexibleLayoutContainer>
         </OverlaysProvider>
     );
 };

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -5,13 +5,13 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { IconButton, TestIcon } from "../../../../index";
 
+import buttonStory from "./../../Button/Button.stories";
 import canonicalIcons from "./../canonicalIconNames";
 
 export default {
     title: "Components/IconButton",
     component: IconButton,
     argTypes: {
-        text: { control: "text" },
         name: {
             control: "select",
             options: ["Test icon", ...Object.keys(canonicalIcons)],
@@ -20,6 +20,7 @@ export default {
                 ...Object.keys(canonicalIcons),
             },
         },
+        intent: buttonStory.argTypes?.intent,
     },
 } as Meta<typeof IconButton>;
 

package/src/components/Notification/Notification.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { LoremIpsum } from "react-lorem-ipsum";
+import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, HtmlContentBlock, Notification, Spacing } from "../../../index";
+import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index";
 
 export default {
     title: "Components/Notification",
@@ -33,12 +33,26 @@ ExampleWithMessage.args = {
 export const ExampleWithChildren = TemplateFull.bind({});
 ExampleWithChildren.args = {
     children: (
-        <HtmlContentBlock>
-            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
-            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
-        </HtmlContentBlock>
+        <>
+            <HtmlContentBlock>
+                <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+                <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+            <br />
+            <Markdown
+                htmlContentBlockProps={{
+                    style: {
+                        maxHeight: "25vh",
+                        overflow: "auto",
+                    },
+                }}
+            >
+                {"```\n" + loremIpsum({ random: false }) + "\n```"}
+            </Markdown>
+        </>
     ),
     onDismiss: false, // workaround for undefined function in Storybook
+    actions: [<></>],
 };
 
 export const ExampleNeutralMessage = TemplateFull.bind({});

package/src/components/Notification/notification.scss

@@ -3,6 +3,10 @@
 @use "sass:math";
 @import "~@blueprintjs/core/src/components/toast/toast";
 
+.#{$ns}-toast-message {
+    min-width: 0;
+}
+
 .#{$eccgui}-notification {
     width: 100%;
     min-width: math.div(4, 16) * 100vw;
@@ -69,20 +73,27 @@
     display: flex;
     align-items: baseline;
     justify-content: space-between;
-    margin: -10px; // TODO: use blueprint var ofr toast padding here
+    margin: -0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__messagebody {
     flex-grow: 1;
     flex-shrink: 1;
-    padding: 10px; // TODO: use blueprint var ofr toast padding here
+    min-width: 0;
+    padding: 0.5 * $toast-margin;
 }
 
 .#{$eccgui}-notification__actions {
     flex-grow: 0;
     flex-shrink: 0;
 
-    .#{$ns}-button:not([class*="intent"]) {
+    .#{$ns}-button:not([class*="intent"]):not(:disabled) {
         color: inherit;
     }
 }
+
+@media print {
+    .#{$eccgui}-notification__actions {
+        display: none;
+    }
+}

package/src/components/OverviewItem/overviewitem.scss

@@ -197,3 +197,12 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
         display: flex;
     }
 }
+
+@media print {
+    .#{$eccgui}-overviewitem__actions {
+        display: none;
+    }
+    .#{$eccgui}-overviewitem__depiction {
+        print-color-adjust: exact;
+    }
+}

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

@@ -1,11 +1,17 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { ProgressBar } from "../../../../index";
 export default {
     title: "Components/ProgressBar",
     component: ProgressBar,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+        },
+    },
 } as Meta<typeof ProgressBar>;
 
 const ProgressBarExample: StoryFn<typeof ProgressBar> = (args) => <ProgressBar {...args}></ProgressBar>;