@eccenca/gui-elements 6.3.0 → 22.0.0-rc.6

package/src/components/Form/form.scss

@@ -0,0 +1,159 @@
+$eccgui-size-typo-formitem: $eccgui-size-typo-caption !default;
+$eccgui-size-typo-formitem-lineheight: $eccgui-size-typo-caption-lineheight !default;
+$eccgui-color-formitem-text: rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
+
+@import "~@blueprintjs/core/src/components/forms/common";
+
+@import "~@blueprintjs/core/src/components/forms/control-group";
+// already used in own component @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
+@import "~@blueprintjs/core/src/components/forms/file-input";
+@import "~@blueprintjs/core/src/components/forms/form-group";
+// already used in own component @import "~@blueprintjs/core/src/components/forms/input-group"; // TextField
+// already used in own component @import "~@blueprintjs/core/src/components/forms/input"; // TextField
+@import "~@blueprintjs/core/src/components/forms/label";
+@import "~@blueprintjs/core/src/components/forms/numeric-input";
+
+form {
+    display: block;
+}
+
+.#{$eccgui}-fielditem,
+.#{$eccgui}-fieldset {
+    display: block;
+    max-width: 100%;
+    min-width: 0;
+
+    &:not(:last-child) {
+        margin-bottom: $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-fielditem__helpertext,
+.#{$eccgui}-fielditem__message,
+.#{$eccgui}-fieldset__helpertext,
+.#{$eccgui}-fieldset__message {
+    display: block;
+    font-size: $eccgui-size-typo-formitem;
+    line-height: $eccgui-size-typo-formitem-lineheight;
+    color: $eccgui-color-formitem-text;
+
+    .#{$eccgui}-fielditem--disabled > & {
+        color: rgba($eccgui-color-formitem-text, 1) !important;
+        opacity: $eccgui-opacity-disabled !important;
+    }
+}
+
+.#{$eccgui}-fielditem__inputfields {
+    &:not(:first-child) {
+        margin-top: $eccgui-size-block-whitespace / 4;
+    }
+    &:not(:last-child) {
+        margin-bottom: $eccgui-size-block-whitespace / 4;
+    }
+}
+
+.#{$eccgui}-fielditem__message {
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-accent;
+    }
+    &.#{$eccgui}-intent--success {
+        color: $eccgui-color-success-text;
+    }
+    &.#{$eccgui}-intent--warning {
+        color: $eccgui-color-warning-text;
+    }
+    &.#{$eccgui}-intent--danger {
+        color: $eccgui-color-danger-text;
+    }
+}
+
+.#{$eccgui}-fieldset {
+    legend {
+        width: 100%;
+        color: $eccgui-color-applicationheader-text;
+        display: block;
+        float: left;
+    }
+
+    &.#{$eccgui}-fieldset--boxed {
+        padding: $eccgui-size-block-whitespace/2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace
+            $eccgui-size-block-whitespace;
+        background-color: $data-table-zebra-color;
+
+        legend {
+            float: left;
+        }
+    }
+
+    &.#{$eccgui}-intent--primary {
+        &.#{$eccgui}-fieldset--boxed {
+            background-color: $eccgui-color-info-background;
+        }
+        .#{$eccgui}-fieldset__message,
+        legend {
+            color: $eccgui-color-info-text;
+        }
+    }
+    &.#{$eccgui}-intent--success {
+        &.#{$eccgui}-fieldset--boxed {
+            background-color: $eccgui-color-success-background;
+        }
+        .#{$eccgui}-fieldset__message,
+        legend {
+            color: $eccgui-color-success-text;
+        }
+    }
+    &.#{$eccgui}-intent--warning {
+        &.#{$eccgui}-fieldset--boxed {
+            background-color: $eccgui-color-warning-background;
+        }
+        .#{$eccgui}-fieldset__message,
+        legend {
+            color: $eccgui-color-warning-text;
+        }
+    }
+    &.#{$eccgui}-intent--danger {
+        &.#{$eccgui}-fieldset--boxed {
+            background-color: $eccgui-color-danger-background;
+        }
+        .#{$eccgui}-fieldset__message,
+        legend {
+            color: $eccgui-color-danger-text;
+        }
+    }
+}
+
+.#{$eccgui}-fieldset__helpertext,
+.#{$eccgui}-fieldset__message {
+    margin-top: $eccgui-size-block-whitespace / 4;
+}
+
+.#{$eccgui}-fieldset__fielditems {
+    &:not(:first-child) {
+        &:before {
+            content: " ";
+            height: $eccgui-size-block-whitespace;
+            display: block;
+            clear: both;
+        }
+    }
+}
+
+.#{$eccgui}-fielditem__row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: flex-end;
+    margin: 0 -1 * $eccgui-size-block-whitespace/2;
+
+    & > .#{$eccgui}-fielditem {
+        flex-shrink: 1;
+        flex-grow: 1;
+        margin: 0 $eccgui-size-block-whitespace/2;
+    }
+
+    &:not(:last-child) {
+        margin-bottom: $eccgui-size-block-whitespace;
+    }
+}

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { Grid as CarbonGrid } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Grid({
+    children,
+    verticalStretchable,
+    useAbsoluteSpace,
+    className = '',
+    ...restProps
+}: any) {
+    return (
+        <CarbonGrid
+            {...restProps}
+            className={
+                `${eccgui}-grid` +
+                (!!verticalStretchable ? ` ${eccgui}-grid--stretchable` : "") +
+                (!!useAbsoluteSpace ? ` ${eccgui}-grid--absolutespace` : "") +
+                (className ? " " + className : "")
+            }
+            fullWidth={true}
+        >
+            { children }
+        </CarbonGrid>
+    )
+}
+
+export default Grid;

package/src/components/Grid/GridColumn.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { Column as CarbonColumn } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function GridColumn({
+    children,
+    className = '',
+    small = false,
+    medium = false,
+    full = true,
+    verticalAlign = '',
+    ...otherProps
+}: any) {
+    let sizeConfig = {};
+    if (small) sizeConfig = { md:2, lg:3 };
+    if (medium) sizeConfig = { md:3, lg:5 };
+    return (
+        <CarbonColumn
+            {...otherProps}
+            {...sizeConfig}
+            className={
+                `${eccgui}-grid__column` +
+                (verticalAlign ? ` ${eccgui}-grid__column--vertical-` + verticalAlign : '') +
+                (className ? ' '+className : '')
+            }
+        >
+            { children }
+        </CarbonColumn>
+    )
+}
+
+export default GridColumn;

package/src/components/Grid/GridRow.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { Row as CarbonRow } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function GridRow({
+    children,
+    className = "",
+    dontWrapColumns = true,
+    fullHeight = false,
+    verticalStretched,
+    ...otherProps
+}: any) {
+    return (
+        <CarbonRow
+            {...otherProps}
+            className={
+                `${eccgui}-grid__row` +
+                (dontWrapColumns ? ` ${eccgui}-grid__row--dontwrapcolumns` : "") +
+                (verticalStretched ? ` ${eccgui}-grid__row--stretched` : "") +
+                (fullHeight ? ` ${eccgui}-grid__row--fullheight` : "") +
+                (className ? " " + className : "")
+            }
+        >
+            {children}
+        </CarbonRow>
+    );
+}
+
+export default GridRow;

package/src/components/Grid/grid.scss

@@ -0,0 +1,89 @@
+// own vars
+$eccgui-size-grid-gutter: $eccgui-size-block-whitespace !default;
+
+// import lib requisits
+@import "~carbon-components/scss/globals/scss/feature-flags";
+@import "~carbon-components/scss/globals/scss/functions";
+@import "~carbon-components/scss/globals/scss/mixins";
+@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/mixins";
+// overwrite lib vars
+$carbon--grid-gutter: carbon--rem($eccgui-size-grid-gutter);
+// load grid
+@include exports("grid") {
+    @include carbon--grid();
+}
+
+// adjustments
+
+.#{$prefix}--grid {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.#{$prefix}--grid--full-width {
+    max-width: 100%;
+    width: 100%;
+}
+
+.#{$eccgui}-grid--stretchable {
+    display: flex;
+    flex-direction: column;
+    width: auto;
+
+    & > .#{$prefix}--row {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+}
+
+.#{$eccgui}-grid--absolutespace {
+    position: absolute;
+    top: 0;
+    left: 0.5rem;
+    right: 0.5rem;
+    bottom: 0;
+}
+
+.#{$prefix}--row {
+    flex-wrap: wrap;
+}
+
+.#{$eccgui}-grid__row--fullheight {
+    min-height: calc(100vh - #{2 * $eccgui-size-block-whitespace});
+
+    .#{$prefix}--header ~ .#{$prefix}--content & {
+        min-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+    }
+}
+
+.#{$eccgui}-grid__row--stretched {
+
+    .#{$eccgui}-grid--stretchable > & {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow-y: auto;
+    }
+}
+
+.#{$prefix}--col {
+    /*
+        We need to explicitely remove a minimum width from flex layout columns,
+        otherwise they try to grow (if allowed) until every text can be shown
+        without overflowing, even if text is styled to be hidden overflowed.
+
+        @see https://css-tricks.com/flexbox-truncated-text/
+    */
+    min-width: 0;
+}
+
+.#{$eccgui}-grid__column {
+    position: relative;
+}
+
+.#{$eccgui}-grid__column--vertical-center {
+    align-self: center;
+}
+
+.#{$eccgui}-grid__row--wrapcolumns {
+    flex-wrap: nowrap;
+}

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { IconProps as CarbonIconProps } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IntentTypes } from "../../common/Intent";
+import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
+import canonicalIcons, {IconSized, ValidIconName} from "./canonicalIconNames"
+
+interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+    // The CSS class name.
+    className?: string,
+    // Canonical icon name
+    name: ValidIconName | string[],
+    // description for SVG as accessibility fallback
+    description?: string,
+    // Display large icon version
+    large?: boolean,
+    // Display small icon version
+    small?: boolean,
+    // Add tooltip text to icon
+    tooltipText?: string,
+    // Time after tooltip text is visible when icon is hovered/focuses
+    tooltipOpenDelay?: number,
+    // Other tooltip properties
+    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>,
+    // Intent state of icon (currently only success, info, warning and danger are implemented in style rules)
+    intent?: IntentTypes
+}
+
+/** Returns the first icon that exists or the fallback icon. */
+const findExistingIcon = (iconName: ValidIconName | string[],
+                          fallbackItem: IconSized = canonicalIcons["Undefined"]): IconSized => {
+    if (typeof iconName === "string") {
+        return canonicalIcons[iconName] ?? fallbackItem
+    } else {
+        return canonicalIcons[findExistingIconName(iconName)]
+    }
+}
+
+/** Returns the first icon name that exists or the fallback icon name. */
+export const findExistingIconName = (iconNames: string[],
+                                     fallbackIconName: string = "Undefined"): string => {
+    let foundIconName: string = fallbackIconName;
+    const iconNameStack = [...iconNames]
+    while (foundIconName === fallbackIconName && iconNameStack.length > 0) {
+        let iconNameToTest = iconNameStack.shift();
+        if (iconNameToTest && canonicalIcons[iconNameToTest] != null) {
+            foundIconName = iconNameToTest
+        }
+    }
+    return foundIconName
+}
+
+function Icon({
+    className = "",
+    name = "undefined",
+    large = false,
+    small = false,
+    tooltipText,
+    tooltipOpenDelay,
+    tooltipProperties,
+    intent,
+    ...restProps
+}: IconProps) {
+    let sizeConfig = { height: 20, width: 20 };
+    if (small) sizeConfig = { height: 16, width: 16 };
+    if (large) sizeConfig = { height: 32, width: 32 };
+    const carbonIcon = findExistingIcon(name)
+    let CarbonIconSized = carbonIcon.normal
+    if(small) CarbonIconSized = carbonIcon.small
+    if(large) CarbonIconSized = carbonIcon.large
+
+    if (!!tooltipText && !restProps.description) {
+        restProps['description'] = tooltipText;
+    }
+
+    const icon = (
+        <CarbonIconSized
+            {...restProps}
+            {...sizeConfig}
+            className={
+                `${eccgui}-icon ` +
+                (intent ? `${eccgui}-intent--${intent} ` : "") +
+                className
+            }
+        />
+    );
+    return tooltipText ? (
+        <Tooltip content={tooltipText} hoverOpenDelay={tooltipOpenDelay} {...tooltipProperties}>
+            <span>{icon}</span>
+        </Tooltip>
+    ) : (
+        icon
+    );
+}
+
+export default Icon;

package/src/components/Icon/IconButton.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import Button, { ButtonProps, AnchorOrButtonProps } from "../Button/Button";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import Icon from "./Icon";
+import {ValidIconName} from "./canonicalIconNames";
+
+interface IconButtonProps extends ButtonProps {
+    // Canonical icon name
+    name: ValidIconName
+    className?: string
+    // Tooltip text
+    text?: string,
+    // Time after tooltip text is viible when icon is hovered/focuses
+    tooltipOpenDelay?: number,
+    // Display large icon version
+    large?: boolean,
+    // Display small icon version
+    small?: boolean
+    // If the tooltip should be set as title attribute instead of the Tooltip component. If true, all other tooltip parameters are ignored.
+    tooltipAsTitle?: boolean
+    // If set, button will become an anchor button. FIXME: Setting this parameter should not change the type of the button. Split into several components.
+    href?: string
+    // Additional description of the icon function to improve accessibility, if not defined then the text label is used as fallback
+    description?: string
+}
+
+/** A button with an icon instead of text. */
+function IconButton({
+    className = "",
+    name = "undefined",
+    text,
+    tooltipProperties,
+    description,
+    tooltipOpenDelay = 1000,
+    tooltipAsTitle = false,
+    ...restProps
+}: IconButtonProps & AnchorOrButtonProps) {
+    return (
+        <Button
+            title={tooltipAsTitle && text ? text : undefined}
+            {...restProps}
+            icon={
+                <Icon
+                    name={name}
+                    small={restProps.small}
+                    large={restProps.large}
+                    tooltipText={tooltipAsTitle ? undefined : text}
+                    tooltipOpenDelay={tooltipOpenDelay}
+                    tooltipProperties={!!tooltipProperties ? tooltipProperties : {}}
+                    description={description ? description : text}
+                />
+            }
+            className={`${eccgui}-button--icon ` + className}
+            minimal
+        />
+    );
+}
+
+export default IconButton;

package/src/components/Icon/canonicalIconNames.json

@@ -0,0 +1,120 @@
+{
+  "application-dataintegration": "DataUnstructured",
+
+  "application-homepage": "Workspace",
+  "application-useraccount": "UserAvatar",
+  "application-warning": "WarningAlt",
+  "application-mapping": "ModelBuilder",
+  "application-explore": "Explore",
+  "application-vocabularies": "Catalog",
+  "application-queries": "DataView",
+  "application-legacygui": "ResetAlt",
+  "application-activities": "Activity",
+  "module-timetracker": "Timer",
+  "module-accesscontrol": "UserAdmin",
+  "module-annotation": "WatsonHealthTextAnnotationToggle",
+  "module-dashboard": "Dashboard",
+  "module-search": "Search",
+  "module-visualization": "DataVis_1",
+  "module-reports": "ReportData",
+  "module-thesauri": "Book",
+  "module-linkedrules": "Connect",
+  "module-integrations": "AppConnectivity",
+  "module-gdprsearch": "UserProfile",
+
+  "toggler-showmore": "ChevronDown",
+  "toggler-showless": "ChevronUp",
+  "toggler-moveright": "ChevronRight",
+  "toggler-moveleft": "ChevronLeft",
+  "toggler-maximize": "Maximize",
+  "toggler-minimize": "Minimize",
+  "toggler-tree": "TreeViewAlt",
+
+  "navigation-back": "ArrowLeft",
+  "navigation-forth": "ArrowRight",
+  "navigation-close": "Close",
+  "navigation-jump": "JumpLink",
+  "navigation-last": "PageLast",
+  "navigation-previous": "ChevronLeft",
+  "navigation-next": "ChevronRight",
+  "navigation-first": "PageFirst",
+
+  "item-moremenu": "OverflowMenuVertical",
+  "item-vertmenu": "OverflowMenuHorizontal",
+  "item-viewdetails": "View",
+  "item-clone": "Copy",
+  "item-edit": "Edit",
+  "item-evaluation": "Analytics",
+  "item-execution": "Run",
+  "item-info": "Information",
+  "item-remove": "TrashCan",
+  "item-add-artefact": "AddAlt",
+  "item-launch": "Launch",
+  "item-download": "Download",
+  "item-question": "Help",
+  "item-copy": "CopyFile",
+  "item-save": "Save",
+  "item-start": "PlayFilledAlt",
+  "item-stop": "StopFilledAlt",
+  "item-reload": "Renew",
+  "item-shuffle": "Shuffle",
+  "item-draggable": "Draggable",
+
+  "operation-search": "Search",
+  "operation-clear": "Close",
+  "operation-undo": "Undo",
+  "operation-redo": "Redo",
+  "operation-logout": "Logout",
+  "operation-filter": "Filter",
+  "operation-filteredit": "FilterEdit",
+  "operation-auto-graph-layout": "Flow",
+
+  "list-sort": "ArrowsVertical",
+  "list-sortasc": "ArrowDown",
+  "list-sortdesc": "ArrowUp",
+
+  "state-info": "InformationFilled",
+  "state-success": "CheckmarkFilled",
+  "state-warning": "WarningAltFilled",
+  "state-danger": "ErrorFilled",
+  "state-unchecked": "Checkbox",
+  "state-checked": "CheckboxChecked",
+  "state-partlychecked": "CheckboxIndeterminate",
+
+  "artefact-project": "Folder",
+  "artefact-workflow": "ModelBuilder",
+  "artefact-dataset": "Data_2",
+  "artefact-dataset-csv": "Csv",
+  "artefact-dataset-multicsv": "Csv",
+  "artefact-dataset-sparkview": "Sql",
+  "artefact-dataset-sqlendpoint": "Sql",
+  "artefact-dataset-jdbc": "Sql",
+  "artefact-dataset-xml": "Xml",
+  "artefact-dataset-json": "Json",
+  "artefact-dataset-excel": "Xls",
+  "artefact-dataset-file": "DataVis_1",
+  "artefact-dataset-eccencadataplatform": "DataVis_1",
+  "artefact-dataset-sparqlendpoint": "DataVis_1",
+  "artefact-dataset-neo4j": "DataVis_1",
+  "artefact-transform": "DataRefinery",
+  "artefact-linking": "Connect",
+  "artefact-task": "Script",
+  "artefact-customtask": "Script",
+  "artefact-file": "Document",
+  "artefact-embedded": "DataBase",
+  "artefact-remote": "VirtualMachine",
+  "artefact-deprecated": "WarningSquare",
+  "artefact-uncategorized": "Unknown",
+  "artefact-rawdata": "ScriptReference",
+  "artefact-report": "Report",
+
+  "activity-error-report": "Error",
+
+  "select-caret": "CaretSort",
+
+  "linked-item": "Link",
+  "unlinked-item": "Unlink",
+
+  "undefined": "Undefined",
+  "Undefined": "Undefined"
+}