@eccenca/gui-elements 23.1.0-rc.4 → 23.2.0-rc.0

package/src/components/Dialog/Modal.tsx

@@ -1,8 +1,3 @@
-/*
-    we only use Dialog as pre-configured and enhanced Overlay, it is
-    recommended to use Card elements inside.
-*/
-
 import React from 'react';
 import {
     Classes as BlueprintClassNames,
@@ -32,10 +27,11 @@ export interface ModalProps extends OverlayProps, IOverlayState {
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * This element can be used to create own modal elements and edge cases for modal dialogs.
  * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
+ * Then it is recommended to use the `Card` element inside.
  */
-function Modal({
+export const Modal = ({
     children,
     className='',
     overlayClassName='',
@@ -45,7 +41,7 @@ function Modal({
     preventBackdrop=false,
     wrapperDivProps,
     ...otherProps
-}: ModalProps) {
+}: ModalProps) => {
 
     const alteredChildren = React.Children.map(children, (child) => {
         if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {

package/src/components/Dialog/SimpleDialog.tsx

@@ -1,7 +1,3 @@
-/*
-    provides a simple interface for dialogs using modals with a card inside
-*/
-
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { IntentTypes } from "../../common/Intent";
@@ -60,7 +56,7 @@ export interface SimpleDialogProps extends ModalProps, TestableComponent {
  * Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
  * Inherits all properties from `Modal`.
  */
-function SimpleDialog({
+export const SimpleDialog = ({
     children,
     canOutsideClickClose = false,
     canEscapeKeyClose = false,
@@ -75,7 +71,7 @@ function SimpleDialog({
     startInFullScreenMode = false,
     size,
     ...otherProps
-}: SimpleDialogProps) {
+}: SimpleDialogProps) => {
     const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startInFullScreenMode);
     const showToggler = startInFullScreenMode || showFullScreenToggler
     const intentClassName = intent ? `${eccgui}-intent--${intent}` : "";

package/src/components/Dialog/index.ts

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

package/src/components/Form/FieldItem.tsx

@@ -59,7 +59,7 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
 /**
  * Form element that manages the combination of label, helper texts, input element and feedback messages.
  */
-function FieldItem({
+export const FieldItem = ({
     hasStatePrimary = false,
     hasStateSuccess = false,
     hasStateWarning = false,
@@ -71,7 +71,7 @@ function FieldItem({
     helperText,
     messageText,
     ...otherProps
-}: FieldItemProps) {
+}: FieldItemProps) => {
     let classIntent = "";
     switch (true) {
         case hasStatePrimary:

package/src/components/Form/FieldItemRow.tsx

@@ -11,12 +11,12 @@ export interface FieldItemRowProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * Allows to display `FieldItem` children horizontally in one row.
  */
-function FieldItemRow({
+export const FieldItemRow = ({
     children,
     className,
     justifyItemWidths = false,
     ...otherProps
-}: FieldItemRowProps) {
+}: FieldItemRowProps) => {
     return (
         <div
             className={

package/src/components/Form/FieldSet.tsx

@@ -2,7 +2,48 @@ import React from "react";
 import {ClassNames as IntentClassNames} from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function FieldSet({
+export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "title"> {
+    /**
+    * Displays the fieldset inside a box.
+    * Background color of the box is set automatically regarding the set intent state.
+    */
+    boxed?: boolean,
+    /**
+    * The fieldsetsection is displayed with primary color scheme.
+    */
+    hasStatePrimary?: boolean;
+    /**
+    * The fieldset section is displayed with success (some type of green) color scheme.
+    */
+    hasStateSuccess?: boolean;
+    /**
+    * The fieldset section is displayed with warning (some type of orange) color scheme.
+    */
+    hasStateWarning?: boolean;
+    /**
+    * The fieldsetsection is displayed with danger (some type of red) color scheme.
+    */
+    hasStateDanger?: boolean;
+    /**
+    * Optional helper text. If given then it is displayed after the title.
+    */
+    helperText?: string | JSX.Element,
+    /**
+    * Optional notification text.
+    * If given then it is displayed before the fieldset content and is colored reagarding the set intent state.
+    */
+    messageText?: string | JSX.Element,
+    /**
+    * Optional title, set the fieldset legend and if given it is display on top, colored reagarding the set intent state.
+    *
+    */
+    title?: string | JSX.Element,
+}
+
+/**
+ * Displays a group of input elements.
+ */
+export const FieldSet = ({
     boxed = false,
     children,
     className,
@@ -14,7 +55,7 @@ function FieldSet({
     messageText,
     title,
     ...otherProps
-}: any) {
+}: FieldSetProps) => {
     let classIntent = "";
     switch (true) {
         case hasStatePrimary:

package/src/components/Form/Stories/FieldSet.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import { FieldSet, TitleSubsection, FieldItem, FieldItemRow } from '../../../../index';
+import { Default as SimpleFieldItemExample } from "./FieldItem.stories";
+import { Default as SimpleFieldItemRowExample } from "./FieldItemRow.stories";
+
+export default {
+    title: "Forms/FieldSet",
+    component: FieldSet,
+    argTypes: {
+        children: {
+            control: "none",
+        },
+    }
+} as Meta<typeof FieldSet>;
+
+const Template: StoryFn<typeof FieldSet> = (args) => (
+    <FieldSet {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+    title: <TitleSubsection>Fieldset title</TitleSubsection>,
+    children: [
+        <FieldItem {...SimpleFieldItemExample.args} />,
+        <FieldItemRow {...SimpleFieldItemRowExample.args} />
+    ],
+    messageText: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    helperText: <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
+};

package/src/components/Form/index.ts

@@ -0,0 +1,3 @@
+export * from "./FieldItem";
+export * from "./FieldItemRow";
+export * from "./FieldSet";

package/src/components/Grid/Grid.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow"> {
+export interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow" | "as"> {
     /**
      * The available grid height can be distributed between multiple rows.
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.
@@ -15,6 +15,10 @@ interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "na
      * This parent element must be displayed using a fixed, relative or absolute position.
      */
     useAbsoluteSpace?: boolean
+    /**
+     * Provide a HTML element name to render instead of the default `div`.
+     */
+    as?: "article" | "section" | "div"
     /**
      * @deprecated
      * This is set always by default.
@@ -27,13 +31,13 @@ interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "na
  * Grids can also be stacked into other grids for more complex layouts.
  * A very complex level of stacked grids is a sign that something should be designed differently.
  */
-function Grid({
+export const Grid = ({
     children,
     verticalStretchable = false,
     useAbsoluteSpace = false,
     className = '',
     ...restProps
-}: GridProps) {
+}: GridProps) => {
     return (
         <CarbonGrid
             {...restProps}

package/src/components/Grid/GridColumn.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
+export interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm"> {
     /**
      * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
      * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
@@ -18,6 +18,10 @@ interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg"
      * Alignment of column content.
      */
     verticalAlign?: "top" | "center"
+    /**
+     * Overwrite column sizes by using the original size config of the Carbon grid column.
+     */
+    carbonSizeConfig?: Pick<ColumnDefaultProps, "max" | "xlg" | "lg" | "md" | "sm">
     /**
      * @deprecated
      */
@@ -28,21 +32,23 @@ interface GridColumnProps extends Omit<ColumnDefaultProps, "max" | "xlg" | "lg"
  * Grid columns can be used in grid rows.
  * They can contain other grids if this is necessary for more complex layouts.
  */
-function GridColumn({
+export const GridColumn = ({
     children,
     className = '',
     small = false,
     medium = false,
     full,
     verticalAlign = "top",
+    carbonSizeConfig,
     ...otherProps
-}: GridColumnProps) {
+}: GridColumnProps) => {
     let sizeConfig = {};
     if (small) sizeConfig = { md:2, lg:3 };
     if (medium) sizeConfig = { md:3, lg:5 };
     return (
         <CarbonColumn
             {...sizeConfig}
+            {...carbonSizeConfig}
             {...otherProps}
             className={
                 `${eccgui}-grid__column` +

package/src/components/Grid/GridRow.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Row as CarbonRow, RowDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
+export interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
     /**
      * Do not wrap column children when there is not enough space available.
      * This only works for grids on medium sized and larger viewports.
@@ -25,14 +25,14 @@ interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
 /**
  * Grid rows exists as children in a grid and can contain columns.
  */
-function GridRow({
+export const GridRow = ({
     children,
     className = "",
     dontWrapColumns = true,
     fullHeight = false,
     verticalStretched,
     ...otherProps
-}: GridRowProps) {
+}: GridRowProps) => {
     return (
         <CarbonRow
             {...otherProps}

package/src/components/Grid/index.ts

@@ -0,0 +1,3 @@
+export * from "./Grid";
+export * from "./GridRow";
+export * from "./GridColumn";

package/src/components/HoverToggler/HoverToggler.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+export interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
      * Additional CSS class name.
      */
@@ -56,3 +56,5 @@ export const HoverToggler = ({
         </div>
     </div>);
 }
+
+export default HoverToggler;

package/src/components/Icon/BaseIcon.tsx

@@ -1,9 +1,11 @@
 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 { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
-import { CarbonIconType } from "./canonicalIconNames"
+import { CarbonIconType } from "./canonicalIconNames";
 
 export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
     /**
@@ -13,32 +15,32 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
     /**
      * Add tooltip text to icon
      */
-    tooltipText?: string,
+    tooltipText?: string;
     /**
      * Intent state of icon.
      * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
      */
-    intent?: IntentTypes
+    intent?: IntentTypes;
     /**
      * Display large icon version.
      */
-    large?: boolean,
+    large?: boolean;
     /**
      * Display small icon version.
      */
-    small?: boolean,
+    small?: boolean;
     /**
      * Additional CSS classes.
      */
-    className?: string,
+    className?: string;
     /**
      * Description for icon as accessibility fallback.
      */
-    description?: string,
+    description?: string;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
-    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>,
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
 }
 
 /**
@@ -65,11 +67,9 @@ function BaseIcon({
         <CarbonIconNamed
             {...restProps}
             {...sizeConfig}
-            description={ description ?? (tooltipText ?? "")}
+            description={description ?? tooltipText ?? ""}
             className={
-                `${eccgui}-icon` +
-                (intent ? ` ${eccgui}-intent--${intent}` : "") +
-                (!!className ? ` ${className}` : "")
+                `${eccgui}-icon` + (intent ? ` ${eccgui}-intent--${intent}` : "") + (className ? ` ${className}` : "")
             }
             // @ts-ignore tabIndex is number but internally Carbon defined it as string propType.
             tabIndex={typeof tabIndex !== "undefined" ? tabIndex.toString() : undefined}

package/src/components/Icon/Icon.tsx

@@ -22,7 +22,10 @@ const findExistingIcon = (
     }
 }
 
-/** Returns the first icon name that exists or the fallback icon name. */
+/**
+ * Returns the first icon name that exists or the fallback icon name.
+ * @deprecated use `iconUtils.findExistingIconName`
+ */
 export const findExistingIconName = (
     iconNames: string[],
     fallbackIconName: ValidIconName = "undefined"
@@ -38,14 +41,18 @@ export const findExistingIconName = (
     return foundIconName as ValidIconName;
 }
 
+export const iconUtils = {
+    findExistingIconName
+}
+
 /**
  * The icon provides a graphical symbol that is specified by a canonical name.
  * This name is hard-coded to force a homegenous usage of the [Carbon icon library](https://carbondesignsystem.com/guidelines/icons/library).
  */
-function Icon({
+export const Icon = ({
     name,
     ...otherBaseIconProps
-}: IconProps) {
+}: IconProps) => {
     return <BaseIcon iconComponent={findExistingIcon(name)} {...otherBaseIconProps} />
 }
 

package/src/components/Icon/IconButton.tsx

@@ -5,7 +5,7 @@ import Icon from "./Icon";
 import { TestIconProps } from "./TestIcon";
 import {ValidIconName} from "./canonicalIconNames";
 
-export interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+interface ExtendedButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
@@ -31,8 +31,10 @@ export interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon"
     minimal?: boolean;
 }
 
+export type IconButtonProps = ExtendedButtonProps & AnchorOrButtonProps;
+
 /** A button with an icon instead of text. */
-function IconButton({
+export const IconButton = ({
     className = "",
     name = "undefined",
     text,
@@ -41,7 +43,7 @@ function IconButton({
     tooltipAsTitle = false,
     minimal=true,
     ...restProps
-}: IconButtonProps & AnchorOrButtonProps) {
+}: IconButtonProps) => {
     const iconProps = {
         small: restProps.small,
         large: restProps.large,

package/src/components/Icon/TestIcon.tsx

@@ -19,11 +19,11 @@ export interface TestIconProps extends Omit<BaseIconProps, "iconComponent"> {
  * const testIcon = <TestIcon tryout={LogoReact} />
  * ```
  */
-function TestIcon({
+export const TestIcon = ({
     className = "",
     tryout,
     ...otherBaseIconProps
-}: TestIconProps) {
+}: TestIconProps) => {
     return (
         <BaseIcon
             iconComponent={tryout}

package/src/components/Icon/canonicalIconNames.tsx

@@ -85,25 +85,32 @@ export type ValidIconName =
     | "module-visualization"
     | "navigation-back"
     | "navigation-close"
+    | "navigation-down"
     | "navigation-first"
     | "navigation-forth"
     | "navigation-jump"
     | "navigation-last"
+    | "navigation-left"
     | "navigation-next"
     | "navigation-previous"
+    | "navigation-right"
+    | "navigation-up"
     | "operation-aggregation"
     | "operation-autolayout"
     | "operation-clear"
     | "operation-commit"
     | "operation-comparison"
+    | "operation-erase"
     | "operation-filter"
     | "operation-filteredit"
     | "operation-link"
     | "operation-logout"
+    | "operation-merge"
     | "operation-redo"
     | "operation-search"
     | "operation-sharelink"
     | "operation-transform"
+    | "operation-translate"
     | "operation-undo"
     | "operation-unlink"
     | "state-checked"
@@ -231,26 +238,33 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
 
     "navigation-back": icons.ArrowLeft,
     "navigation-close": icons.Close,
+    "navigation-down": icons.ArrowDown,
     "navigation-first": icons.PageFirst,
     "navigation-forth": icons.ArrowRight,
     "navigation-jump": icons.JumpLink,
     "navigation-last": icons.PageLast,
+    "navigation-left": icons.ArrowLeft,
     "navigation-next": icons.ChevronRight,
     "navigation-previous": icons.ChevronLeft,
+    "navigation-right": icons.ArrowRight,
+    "navigation-up": icons.ArrowUp,
 
     "operation-aggregation": icons.DataCollection,
     "operation-autolayout": icons.ChartNetwork,
     "operation-clear": icons.Close,
     "operation-commit": icons.Commit,
     "operation-comparison": icons.Compare,
+    "operation-erase": icons.Erase,
     "operation-filteredit": icons.FilterEdit,
     "operation-filter": icons.Filter,
     "operation-link": icons.Link,
     "operation-logout": icons.Logout,
+    "operation-merge": icons.DirectionMerge,
     "operation-redo": icons.Redo,
     "operation-search": icons.Search,
     "operation-sharelink": icons.CopyLink,
     "operation-transform": icons.Calculation,
+    "operation-translate": icons.Translate,
     "operation-undo": icons.Undo,
     "operation-unlink": icons.Unlink,
 

package/src/components/Icon/icon.scss

@@ -25,11 +25,32 @@ svg.#{$eccgui}-icon {
     }
 }
 
+.#{$ns}-button .#{$eccgui}-icon:first-child {
+    margin-left: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+}
+.#{$ns}-button .#{$eccgui}-icon:last-child {
+    margin-right: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+}
+
 .#{$ns}-button .#{$eccgui}-icon:first-child:last-child,
 .#{$ns}-button .#{$ns}-spinner + .#{$eccgui}-icon:last-child {
     margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
 }
 
+.#{$eccgui}-button--icon {
+    & > * {
+        margin-right: 0;
+    }
+
+    & > .#{$ns}-button-text {
+        margin-left: -5px;
+    }
+
+    & > .#{$eccgui}-tooltip__wrapper + .#{$ns}-button-text {
+        margin-left: 0;
+    }
+}
+
 .#{$eccgui}-menu__item {
     .#{$eccgui}-button--icon,
     .#{$eccgui}-button--icon:not([class*="#{$ns}-intent-"]) {

package/src/components/Icon/index.ts

@@ -1,5 +1,3 @@
-import Icon, { IconProps } from "./Icon";
-import TestIcon, { TestIconProps } from "./TestIcon";
-
-export { Icon, TestIcon };
-export type { IconProps, TestIconProps };
+export * from "./Icon";
+export * from "./TestIcon";
+export * from "./IconButton";

package/src/components/Iframe/Iframe.tsx

@@ -1,7 +1,3 @@
-/*
-    shows iframe and spinner as long as it is not loaded
-*/
-
 import React, { useState, useEffect } from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {TestableComponent} from "../interfaces";
@@ -30,6 +26,9 @@ export interface IframeProps extends TestableComponent {
     htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">
 }
 
+/**
+ * Display iframe but shows a spinner as long as it is not loaded.
+ */
 export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(({
     title,
     className = "",
@@ -87,3 +86,5 @@ export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(({
         </div>
     );
 });
+
+export default Iframe;

package/src/components/Iframe/IframeModal.tsx

@@ -17,7 +17,7 @@ export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
 }
 
 /** Modal that contains an iframe and supports full screen mode. */
-export function IframeModal({
+export const IframeModal = ({
     title,
     src,
     className="",
@@ -27,7 +27,7 @@ export function IframeModal({
     headerOptions,
     size = "large",
     ...otherSimpleDialogProps
-}: IframeModalProps) {
+}: IframeModalProps) => {
     const {
         useViewportHeight,
         useAvailableSpace,
@@ -64,3 +64,5 @@ export function IframeModal({
         </SimpleDialog>
     )
 }
+
+export default IframeModal;

package/src/components/Iframe/index.ts

@@ -0,0 +1,2 @@
+export * from "./Iframe";
+export * from "./IframeModal";

package/src/components/InteractionGate/InteractionGate.tsx

@@ -30,7 +30,7 @@ export interface InteractionGateProps extends Omit<React.HTMLAttributes<HTMLDivE
  * Wrap content that need to be blocked from user interactions
  * It also has options to display a spinner as overlay.
  */
-function InteractionGate({
+export const InteractionGate = ({
     children,
     className,
     inert = false,
@@ -38,7 +38,7 @@ function InteractionGate({
     spinnerProps = {},
     useParentPositioning = false,
     ...otherProps
-}: InteractionGateProps) {
+}: InteractionGateProps) => {
     const domRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {

package/src/components/Label/Label.tsx

@@ -31,7 +31,7 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
     disabled?: boolean;
 }
 
-function Label({
+export const Label = ({
     children,
     className = "",
     disabled,
@@ -41,7 +41,7 @@ function Label({
     tooltipProps,
     isLayoutForElement = "label",
     ...otherLabelProps
-}: LabelProps) {
+}: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
     htmlElementstring = disabled && htmlElementstring === "label" ? "span" : htmlElementstring;