@eccenca/gui-elements 22.0.1 → 22.1.0

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -2,11 +2,11 @@
     &.selected:before {
         content: " ";
         position: absolute;
-        top: -11 * $reactflow-node-border-width;
-        right: -11 * $reactflow-node-border-width;
-        bottom: -11 * $reactflow-node-border-width;
-        left: -11 * $reactflow-node-border-width;
-        border-width: $reactflow-node-border-width;
+        top: -6 * $reactflow-node-border-width;
+        right: -6 * $reactflow-node-border-width;
+        bottom: -6 * $reactflow-node-border-width;
+        left: -6 * $reactflow-node-border-width;
+        border-width: 1px;
         border-color: $reactflow-edge-stroke-color-selected;
         border-radius: $reactflow-node-border-radius;
         border-style: dotted;
@@ -23,6 +23,10 @@
         width: unset !important;
         text-align: unset !important;
         padding: unset !important;
+
+        &.selected, &.selected:hover {
+            box-shadow: none;
+        }
     }
 }
 
@@ -43,7 +47,7 @@
     border-style: solid;
 
     &:hover {
-        box-shadow: 0 0 0 11 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
+        box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 }
 
@@ -53,13 +57,13 @@
 
 @keyframes pumpingshadow {
   0% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
   }
   50% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 11 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 11 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
+    box-shadow: 0 0 2 * $reactflow-node-border-width 6 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 6 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
   }
   100% {
-    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+    box-shadow: 0 0 2 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
   }
 }
 
@@ -174,15 +178,15 @@
 // Node sizes
 
 .#{$eccgui}-graphviz__node--tiny {
-    width: $reactflow-node-basesize * 3;
+    width: $reactflow-node-basesize * 4;
     min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 2;
+    max-height: $reactflow-node-basesize * 4;
 }
 
 .#{$eccgui}-graphviz__node--small {
     width: $reactflow-node-basesize * 5;
     min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 3;
+    max-height: $reactflow-node-basesize * 8;
 }
 
 .#{$eccgui}-graphviz__node--medium {
@@ -197,113 +201,6 @@
     max-height: $reactflow-node-basesize * 13;
 }
 
-// Node types
-
-.react-flow__node-graphNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #fff;
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-    }
-}
-
-.react-flow__node-classNode {
-    .#{$eccgui}-graphviz__node {
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-        border-color: darken($button-background-color, 60%);
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken($button-background-color, 60%);
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-    }
-}
-
-.react-flow__node-instanceNode {
-    .#{$eccgui}-graphviz__node {
-        border-color: darken($button-background-color, 50%);
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken($button-background-color, 50%);
-    }
-}
-
-.react-flow__node-propertyNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: complement($button-background-color);
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-}
-
-.react-flow__node-datasetNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #e1f5fe;
-        border-color: #039be5;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #039be5;
-    }
-}
-
-.react-flow__node-linkingNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #e0f7fa;
-        border-color: #00acc1;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #00acc1;
-    }
-}
-
-.react-flow__node-transformNode {
-    .#{$eccgui}-graphviz__node {
-        border-color: #00897b;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #00897b;
-    }
-}
-
-.react-flow__node-taskNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #eceff1;
-        border-color: #546e7a;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #546e7a;
-    }
-}
-
-.react-flow__node-workflowNode {
-    .#{$eccgui}-graphviz__node {
-        background-color: #fff;
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-    }
-    .#{$eccgui}-graphviz__node__extension--expanded {
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-    }
-}
-
 // Node highlights
 
 .#{$eccgui}-graphviz__node--highlight-success,
@@ -313,12 +210,12 @@
         content: " ";
         display: block;
         position: absolute;
-        top: -3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        bottom: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
         border-radius: inherit;
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-danger-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-danger-text;
         z-index: -1;
     }
 }
@@ -329,12 +226,12 @@
         content: " ";
         display: block;
         position: absolute;
-        top: -3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        bottom: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+        top: -2 * $reactflow-node-border-width;
+        left: -2 * $reactflow-node-border-width;
+        bottom: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
         border-radius: inherit;
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-accent;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-accent;
         z-index: -1;
     }
 
@@ -342,41 +239,47 @@
     &.#{$eccgui}-graphviz__node--highlight-warning,
     &.#{$eccgui}-graphviz__node--highlight-danger {
         &:after {
-            top: -7 * $reactflow-node-border-width;
-            left: -7 * $reactflow-node-border-width;
-            bottom: -7 * $reactflow-node-border-width;
-            right: -7 * $reactflow-node-border-width;
+            top: -4 * $reactflow-node-border-width;
+            left: -4 * $reactflow-node-border-width;
+            bottom: -4 * $reactflow-node-border-width;
+            right: -4 * $reactflow-node-border-width;
         }
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-success {
     &:before {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-success-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-success-text;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-warning {
     &:before {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-warning-text;
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width $eccgui-color-warning-text;
     }
 }
 
 .#{$eccgui}-graphviz__node--highlight-altmatch {
     &:after {
-        box-shadow: 0 0 0 3*$reactflow-node-border-width complement($eccgui-color-primary);
+        box-shadow: 0 0 0 2 * $reactflow-node-border-width complement($eccgui-color-primary);
     }
 }
 
 // Node tools
 
 .#{$eccgui}-graphviz__nodetools__content {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 0;
 }
 
 // Node content extension
 
 .#{$eccgui}-graphviz__node__extension {
     background-color: $reactflow-node-background-color;
+    min-height: $eccgui-size-block-whitespace / 2;
+    flex-grow: 1;
+    flex-shrink: 1;
 
     .#{$eccgui}-graphviz__node--tiny & {
         max-height: $reactflow-node-basesize * 3;
@@ -398,73 +301,23 @@
 .#{$eccgui}-graphviz__node__extension--expanded {
     display: flex;
     flex-direction: column;
-    border-width: $reactflow-node-border-width;
-    border-color: $reactflow-node-border-color;
-    border-radius: $reactflow-node-border-radius;
-    border-style: solid;
-
     // separation between node content and extension
     // do not inherit styles here
     border-top-color: $eccgui-color-separation-divider !important;
-    border-top-width: $reactflow-node-border-width !important;
+    border-top-width: 1px !important;
     border-top-style: solid !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
 
-    position: absolute;
-    top: 100%;
-    left: -1 * $reactflow-node-border-width;
-    right: -1 * $reactflow-node-border-width;
-
-    .react-flow__node-graphNode & {
-        border-color: #8e24aa;
-        border-style: double;
-        border-width: 3 * $reactflow-node-border-width;
-        left: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
-    }
-
-    .react-flow__node-classNode & {
-        border-color: darken($button-background-color, 60%);
-        border-width: 2 * $reactflow-node-border-width;
-        border-radius: 0;
-        left: -2 * $reactflow-node-border-width;
-        right: -2 * $reactflow-node-border-width;
-    }
-
-    .react-flow__node-instanceNode & {
-        border-color: darken($button-background-color, 50%);
-    }
-
-    .react-flow__node-propertyNode & {
-        border-color: darken(complement($button-background-color), 40%);
-        border-radius: 2 * $reactflow-node-border-radius;
-        border-style: dashed;
-    }
-
-    .react-flow__node-datasetNode & {
-        border-color: #039be5;
-    }
-
-    .react-flow__node-linkingNode & {
-        border-color: #00acc1;
-    }
-
-    .react-flow__node-transformNode & {
-        border-color: #00897b;
-    }
-
-    .react-flow__node-taskNode & {
-        border-color: #546e7a;
-    }
-
-    .react-flow__node-workflowNode & {
-        border-color: #4527a0;
-        border-width: 3 * $reactflow-node-border-width;
-        border-style: double;
-        border-radius: 0;
-        left: -3 * $reactflow-node-border-width;
-        right: -3 * $reactflow-node-border-width;
+    &.#{$eccgui}-graphviz__node__extension--slideout {
+        position: absolute;
+        top: 100%;
+        left: -1 * $reactflow-node-border-width;
+        right: -1 * $reactflow-node-border-width;
+        border-width: $reactflow-node-border-width;
+        border-color: $reactflow-node-border-color;
+        border-radius: $reactflow-node-border-radius;
+        border-style: solid;
     }
 }
 
@@ -481,6 +334,18 @@
     flex-shrink: 1;
     overflow: auto;
     overflow: auto;
+
+    .#{$eccgui}-tag__item {
+        max-width: 20%;
+
+        &:first-child {
+            max-width: 75%;
+        }
+
+        &:last-child {
+            max-width: 100%
+        }
+    }
 }
 
 .#{$eccgui}-graphviz__node__extension-actions {

package/src/extensions/react-flow/nodes/{NodeContent.stories.tsx → stories/NodeContent.stories.tsx}

@@ -2,12 +2,15 @@ import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { LoremIpsum } from 'react-lorem-ipsum';
 import ReactFlow, { Elements } from 'react-flow-renderer';
-import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
 
-import { NodeContent } from "./NodeContent";
-import { nodeTypes } from "./nodeTypes";
-import { NodeContentExtension } from "./NodeContentExtension";
-import { Default as ContentExtensionExample } from "./NodeContentExtension.stories";
+import { NodeContent } from "./../NodeContent";
+import { nodeTypes } from "./../nodeTypes";
+import { NodeContentExtension } from "./../NodeContentExtension";
+import {
+    Default as ContentExtensionExample,
+    SlideOutOfNode as ContentExtensionExampleSlideOut,
+} from "./NodeContentExtension.stories";
 
 export default {
     title: "Extensions/React Flow/Node Content",
@@ -81,3 +84,9 @@ Default.args = {
     contentExtension: <ContentExtensionExample />,
     minimalShape: "none",
 };
+
+export const SlideOut = Template.bind({});
+SlideOut.args = {
+    ...Default.args,
+    contentExtension: <ContentExtensionExampleSlideOut />
+};

package/src/extensions/react-flow/nodes/stories/NodeContentExtension.stories.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import { NodeContentExtension } from "./../NodeContentExtension";
+import IconButton from "../../../../components/Icon/IconButton";
+import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock";
+
+export default {
+    title: "Extensions/React Flow/Node Content Extension",
+    component: NodeContentExtension,
+    argTypes: {
+    },
+} as ComponentMeta<typeof NodeContentExtension>;
+
+export const Default = () => {
+    const [isExpanded, setExpanded] = useState<boolean>(false);
+
+    const toggleExpansion = (event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
+        setExpanded(!expanded);
+    }
+
+    return (
+        <NodeContentExtension
+            isExpanded={isExpanded}
+            onToggle={toggleExpansion}
+            actionButtons={
+                <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />
+            }
+        >
+            <HtmlContentBlock>
+                <h4>Extension example.</h4>
+                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+        </NodeContentExtension>);
+}
+
+export const SlideOutOfNode = () => {
+    const [isExpanded, setExpanded] = useState<boolean>(false);
+
+    const toggleExpansion = (event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
+        setExpanded(!expanded);
+    }
+
+    return (
+        <NodeContentExtension
+            slideOutOfNode
+            isExpanded={isExpanded}
+            onToggle={toggleExpansion}
+            actionButtons={
+                <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />
+            }
+        >
+            <HtmlContentBlock>
+                <h4>Extension example.</h4>
+                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+        </NodeContentExtension>);
+}

package/src/extensions/react-flow/nodes/{NodeDefault.stories.tsx → stories/NodeDefault.stories.tsx}

@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import ReactFlow, { Elements } from 'react-flow-renderer';
+import { ReactFlow } from "./../../../../cmem";
+import { Elements } from 'react-flow-renderer';
 
-import { NodeDefault } from "./NodeDefault";
-import { NodeContent } from "./NodeContent";
-import { nodeTypes } from "./nodeTypes";
+import { NodeDefault } from "./../NodeDefault";
+import { NodeContent } from "./../NodeContent";
+import { nodeTypes } from "./../nodeTypes";
 import { Default as NodeContentExample } from "./NodeContent.stories";
 
 export default {

package/src/index.scss

@@ -169,6 +169,7 @@
 @import "./components/Tabs/tabs";
 @import "./components/PropertyValuePair/propertyvalue";
 @import "./components/Iframe/iframe";
+@import "./components/AutoSuggestion/AutoSuggestion";
 
 // == load tweaks ==============================================================
 

package/src/index.ts

@@ -8,6 +8,9 @@ import ApplicationToolbar from "./components/Application/ApplicationToolbar";
 import ApplicationToolbarSection from "./components/Application/ApplicationToolbarSection";
 import ApplicationToolbarAction from "./components/Application/ApplicationToolbarAction";
 import ApplicationToolbarPanel from "./components/Application/ApplicationToolbarPanel";
+import AutoSuggestion from "./components/AutoSuggestion/AutoSuggestion";
+import { AutoSuggestionList } from "./components/AutoSuggestion/AutoSuggestionList";
+import SingleLineCodeEditor from "./components/AutoSuggestion/SingleLineCodeEditor";
 
 import HtmlContentBlock from "./components/Typography/HtmlContentBlock";
 import OverflowText from "./components/Typography/OverflowText";
@@ -31,6 +34,8 @@ import Button from "./components/Button/Button";
 import Checkbox from "./components/Checkbox/Checkbox";
 import RadioButton from "./components/RadioButton/RadioButton";
 import Tabs from "./components/Tabs/Tabs";
+import Tab from "./components/Tabs/Tab";
+import TabTitle from "./components/Tabs/TabTitle";
 import TextField from "./components/TextField/TextField";
 import TextArea from "./components/TextField/TextArea";
 import SearchField from "./components/TextField/SearchField";
@@ -56,6 +61,7 @@ import TagList from "./components/Tag/TagList";
 import Notification from "./components/Notification/Notification";
 import Toast from "./components/Notification/Toast";
 import { Select } from "@blueprintjs/select";
+import MultiSelect from "./components/MultiSelect/MultiSelect";
 
 import { Iframe } from "./components/Iframe/Iframe";
 import { IframeModal } from "./components/Iframe/IframeModal";
@@ -125,6 +131,8 @@ import { openInNewTab } from "./common/utils/openInNewTab";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
 
+import * as LegacyReplacements from "./legacy-replacements";
+
 const HelperClasses = {
     Typography: TypographyClassNames,
     Intent: IntentClassNames,
@@ -145,6 +153,9 @@ export {
     ApplicationToolbarSection,
     ApplicationToolbarAction,
     ApplicationToolbarPanel,
+    AutoSuggestion,
+    AutoSuggestionList,
+    SingleLineCodeEditor,
     HtmlContentBlock,
     OverflowText,
     WhiteSpaceContainer,
@@ -182,11 +193,13 @@ export {
     Checkbox,
     RadioButton,
     Tabs,
+    Tab,
+    TabTitle,
     TextField,
     TextArea,
     SearchField,
-    Switch, // TODO: scss styles
-    NumericInput, // TODO: scss styles
+    Switch,
+    NumericInput,
     FieldItem,
     FieldItemRow,
     FieldSet,
@@ -226,12 +239,14 @@ export {
     PropertyValueList,
     Toast,
     HelperClasses,
-    Select, // TODO: include as own element
+    Select, // FIXME: CMEM-3742: include as own element
+    MultiSelect,
     AutoCompleteField,
     ProgressBar,
     Iframe,
     IframeModal,
-    Utilities
+    Utilities,
+    LegacyReplacements,
 };
 
 export * from "./cmem";

package/src/legacy-replacements/Tabs/Tabs.stories.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Tabs } from "./../../legacy-replacements";
+
+export default {
+    title: "Legacy/Tabs",
+    component: Tabs,
+    argTypes: {
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "string",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+    },
+} as ComponentMeta<typeof Tabs>;
+
+const TemplateDeprecated: ComponentStory<typeof Tabs> = (args) => (
+    <Tabs {...args} />
+);
+
+export const DeprecatedUsage = TemplateDeprecated.bind({});
+DeprecatedUsage.args = {
+    prefixTabNames: "deprecatedtabs",
+    activeTab: "deprecatedtab1",
+    tabs: [
+        {
+            tabId: "deprecatedtab1",
+            tabTitle: "Tab title 1",
+            tabContent: "Tab content 1",
+        },
+        {
+            tabId: "deprecatedtab2",
+            tabTitle: "Tab title 2",
+            tabContent: "Tab content 2",
+        },
+        {
+            tabId: "deprecatedtab3",
+            tabTitle: "Tab title 3",
+            tabContent: "Tab content 3",
+        }
+    ]
+};