@eccenca/gui-elements 23.1.0-rc.2 → 23.1.0-rc.4

package/src/components/Icon/BaseIcon.tsx

@@ -53,6 +53,7 @@ function BaseIcon({
     tooltipProps,
     intent,
     description,
+    tabIndex,
     ...restProps
 }: BaseIconProps) {
     let sizeConfig = { height: 20, width: 20, size: 20 };
@@ -70,6 +71,8 @@ function BaseIcon({
                 (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}
         />
     );
     return tooltipText ? (

package/src/components/Icon/IconButton.tsx

@@ -5,7 +5,7 @@ import Icon from "./Icon";
 import { TestIconProps } from "./TestIcon";
 import {ValidIconName} from "./canonicalIconNames";
 
-interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+export interface IconButtonProps 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.

package/src/components/Icon/canonicalIconNames.tsx

@@ -62,11 +62,13 @@ export type ValidIconName =
     | "item-save"
     | "item-settings"
     | "item-shuffle"
+    | "item-skip-forward"
     | "item-start"
     | "item-stop"
     | "item-upload"
     | "item-vertmenu"
     | "item-viewdetails"
+    | "item-hidedetails"
     | "list-sort"
     | "list-sortasc"
     | "list-sortdesc"
@@ -116,15 +118,20 @@ export type ValidIconName =
     | "state-unchecked"
     | "state-warning"
     | "toggler-caret"
+    | "toggler-caretright"
+    | "toggler-caretdown"
     | "toggler-maximize"
     | "toggler-minimize"
     | "toggler-moveleft"
     | "toggler-moveright"
+    | "toggler-rowexpand"
+    | "toggler-rowcollapse"
     | "toggler-showless"
     | "toggler-showmore"
     | "toggler-star-empty"
     | "toggler-star-filled"
     | "toggler-tree"
+    | "form-template"
     | "undefined";
 
 export type CarbonIconType = React.ComponentType<CarbonIconProps>;
@@ -198,11 +205,13 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "item-save": icons.Save,
     "item-settings": icons.Settings,
     "item-shuffle": icons.Shuffle,
+    "item-skip-forward": icons.SkipForwardFilled,
     "item-start": icons.PlayFilledAlt,
     "item-stop": icons.StopFilledAlt,
     "item-upload": icons.Upload,
     "item-vertmenu": icons.OverflowMenuHorizontal,
     "item-viewdetails": icons.View,
+    "item-hidedetails": icons.ViewOff,
 
     "list-sortasc": icons.ArrowDown,
     "list-sortdesc": icons.ArrowUp,
@@ -258,16 +267,22 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-caretright": icons.CaretRight,
+    "toggler-caretdown": icons.CaretDown,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
+    "toggler-rowexpand": icons.RowExpand,
+    "toggler-rowcollapse": icons.RowCollapse,
     "toggler-showless": icons.ChevronUp,
     "toggler-showmore": icons.ChevronDown,
     "toggler-star-empty": icons.Star,
     "toggler-star-filled": icons.StarFilled,
     "toggler-tree": icons.TreeViewAlt,
 
+    "form-template": icons.Parameter,
+
     undefined: icons.Undefined,
 };
 

package/src/components/Menu/menu.scss

@@ -55,6 +55,10 @@ $menu-background-color: transparent !default;
     }
 }
 
+span.#{$ns}-menu-item-icon:empty {
+    display: none;
+}
+
 .#{$prefix}--side-nav--rail {
     .#{$ns}-menu-item {
         white-space: nowrap;

package/src/components/OverviewItem/overviewitem.scss

@@ -176,9 +176,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     justify-content: flex-end;
     align-items: center;
 
-    //.#{$eccgui}-overviewitem__description + & {
+    &:not(:first-child) {
         margin-left: mini-units(1);
-    //}
+    }
 }
 
 .#{$eccgui}-overviewitem__actions--hiddeninteractions {

package/src/components/Pagination/Pagination.tsx

@@ -26,6 +26,10 @@ export interface PaginationProps extends CarbonPaginationProps {
      * Hide prev/next arrows to navigate through the pages.
      */
     hideNavigationArrows?: boolean;
+    /**
+     * Element is displayed with dividing borders.
+     */
+    hideBorders?: boolean;
 }
 
 function Pagination({
@@ -34,6 +38,7 @@ function Pagination({
     hideInfoText = false,
     hidePageSelect = false,
     hideNavigationArrows = false,
+    hideBorders = false,
     ...otherProps
 }: PaginationProps) {
     return (
@@ -45,7 +50,8 @@ function Pagination({
                 (hidePageSizeConfiguration ? ` ${eccgui}-pagination--hidepagesize` : "") +
                 (hideInfoText ? ` ${eccgui}-pagination--hideinfotext` : "") +
                 (hidePageSelect ? ` ${eccgui}-pagination--hidepageselect` : "") +
-                (hideNavigationArrows ? ` ${eccgui}-pagination--hidenavigation` : "")
+                (hideNavigationArrows ? ` ${eccgui}-pagination--hidenavigation` : "") +
+                (hideBorders ? ` ${eccgui}-pagination--hideborders` : "")
             }
         />
     );
@@ -74,19 +80,33 @@ export const usePagination = ({
     initialPageSize,
 }: IPaginationOptions) => {
     const minSize = Math.min(...pageSizes);
-    const [pagination, setPagination] = useState<IPaginationDetails>({
+    const _pagination = React.useRef<IPaginationDetails>({
         total: 0,
         current: 1,
         limit: initialPageSize ? initialPageSize : minSize,
         minPageSize: minSize,
-    });
-    const onPaginationChange = ({ page, pageSize }: {page: any, pageSize: any}) => {
-        setPagination({ ...pagination, current: page, limit: pageSize });
-    };
+    })
+    const [pagination, _setPagination] = useState<IPaginationDetails>(_pagination.current);
+    const setPagination = React.useCallback((newPagination: IPaginationDetails) => {
+        // Check if pagination has actually changed
+        const current = _pagination.current
+        if (newPagination.current !== current.current ||
+            newPagination.minPageSize !== current.minPageSize ||
+            newPagination.limit !== current.limit ||
+            newPagination.total !== current.total) {
+            _pagination.current = newPagination
+            _setPagination(newPagination)
+        }
+    }, [])
+    const onPaginationChange = React.useCallback(({ page, pageSize }: {page: any, pageSize: any}) => {
+        setPagination({ ..._pagination.current, current: page, limit: pageSize });
+    }, [setPagination]);
     // When the total number of pageable items changes, this function must be called
-    const onTotalChange = (total: number): void => {
-        setPagination({ ...pagination, total: total, current: 1 });
-    };
+    const onTotalChange = React.useCallback((total: number): void => {
+        if(_pagination.current.total !== total) {
+            setPagination({ ..._pagination.current, total: total, current: 1 });
+        }
+    }, [setPagination]);
     const paginationElement = (
         <Pagination
             onChange={onPaginationChange}

package/src/components/Pagination/pagination.scss

@@ -46,3 +46,19 @@ span.#{$prefix}--pagination__text {
         display: none;
     }
 }
+
+.#{$eccgui}-pagination--hideborders {
+    border-top: none;
+
+    .#{$prefix}--select__item-count .#{$prefix}--select-input {
+        border-right: none;
+    }
+
+    .#{$prefix}--select__page-number .#{$prefix}--select-input {
+        border-left: none;
+    }
+
+    .#{$prefix}--pagination__button {
+        border-left: none;
+    }
+}

package/src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export * from "./ProgressBar";

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -22,6 +22,10 @@
             margin-top: $eccgui-size-block-whitespace * 0.5;
         }
     }
+
+    .#{$eccgui}-label {
+        color: inherit;
+    }
 }
 
 .#{$eccgui}-propertyvalue__property,

package/src/components/Separation/Divider.tsx

@@ -1,8 +1,42 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { SpacingProps } from "./Spacing";
 
-function Divider({ addSpacing = "none" }: any) {
-    return <hr className={`${eccgui}-separation__divider-horizontal ${eccgui}-separation__spacing--${addSpacing}`} />;
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    /**
+     * Add whitespace arount the horizontal rule.
+     */
+    addSpacing?: "none" | SpacingProps["size"];
+    /**
+     * Set the width of the horizontal rule.
+     */
+    width?: "short" | "half" | "medium" | "full";
+    /**
+     * Set the horizontal alignment of the horizontal rule.
+     * This is only visible for widths that are not set to `full`.
+     */
+    alignment?: "left" | "center" | "right";
+}
+
+export function Divider({
+    className,
+    addSpacing = "none",
+    width = "full",
+    alignment = "left",
+    ...otherHrProps
+}: DividerProps) {
+    return (
+        <hr
+            className={
+                `${eccgui}-separation__divider-horizontal` +
+                (addSpacing !== "none" ? ` ${eccgui}-separation__spacing--${addSpacing}` : "") +
+                (width !== "full" ? ` ${eccgui}-separation__divider-horizontal--${width}` : "") +
+                (alignment !== "left" ? ` ${eccgui}-separation__divider-horizontal--${alignment}` : "") +
+                (!!className ? ` ${className}` : "")
+            }
+            {...otherHrProps}
+        />
+    );
 }
 
 export default Divider;

package/src/components/Separation/Spacing.tsx

@@ -5,7 +5,7 @@ export interface SpacingProps {
     /**
      * Set the amount of white space that separates two elements.
      */
-    size?: "tiny" | "small" | "medium" | "large"
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge"
     /**
      * If set then is a ruler displayed in the middle of the spacing area.
      * The direction of the ruler is used from the spacing.

package/src/components/Separation/Stories/Divider.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Button, Divider } from "./../../../../index";
+export default {
+    title: "Components/Separation/Divider",
+    component: Divider,
+    argTypes: {
+    }
+} as ComponentMeta<typeof Divider>
+
+// buttons used for only showing space with elements
+const DividerExample: ComponentStory<typeof Divider> = (args) => (
+    <>
+     <Button children="Example element"/>
+     <Divider {...args}/>
+     <Button children="Another element"/>
+    </>
+);
+
+export const Default  = DividerExample.bind({});
+Default.args = {
+};

package/src/components/Separation/separation.scss

@@ -25,26 +25,52 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
     }
 
     &.#{$eccgui}-separation__spacing--tiny {
-        margin: $eccgui-size-separation-spacing-medium * 0.125 0;
+        margin-top: $eccgui-size-separation-spacing-medium * 0.125;
+        margin-bottom: $eccgui-size-separation-spacing-medium * 0.125;
     }
 
     &.#{$eccgui}-separation__spacing--small {
-        margin: $eccgui-size-separation-spacing-medium * 0.25 0;
+        margin-top: $eccgui-size-separation-spacing-medium * 0.25;
+        margin-bottom: $eccgui-size-separation-spacing-medium * 0.25;
     }
 
     &.#{$eccgui}-separation__spacing--medium {
-        margin: $eccgui-size-separation-spacing-medium * 0.5 0;
+        margin-top: $eccgui-size-separation-spacing-medium * 0.5;
+        margin-bottom: $eccgui-size-separation-spacing-medium * 0.5;
     }
 
     &.#{$eccgui}-separation__spacing--large {
-        margin: $eccgui-size-separation-spacing-medium * 0.75 0;
+        margin-top: $eccgui-size-separation-spacing-medium * 0.75;
+        margin-bottom: $eccgui-size-separation-spacing-medium * 0.75;
     }
 
     &.#{$eccgui}-separation__spacing--xlarge {
-        margin: $eccgui-size-separation-spacing-medium 0;
+        margin-top: $eccgui-size-separation-spacing-medium;
+        margin-bottom: $eccgui-size-separation-spacing-medium;
     }
 }
 
+.#{$eccgui}-separation__divider-horizontal--short {
+    width: 39%;
+}
+
+.#{$eccgui}-separation__divider-horizontal--half {
+    width: 50%;
+}
+
+.#{$eccgui}-separation__divider-horizontal--medium {
+    width: 61%;
+}
+
+.#{$eccgui}-separation__divider-horizontal--center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.#{$eccgui}-separation__divider-horizontal--right {
+    margin-left: auto;
+}
+
 .#{$eccgui}-separation__spacing-vertical {
     display: inline-block;
     height: 1em * $eccgui-size-typo-base-lineheight;

package/src/components/Switch/Switch.tsx

@@ -10,16 +10,20 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
      * Event handler for changed state.
      */
     onChange?: (value: boolean) => any
+    /**
+     * class names
+     */
+    className?: string;
 }
 
-function Switch({onChange, ...otherProps}: SwitchProps) {
+function Switch({onChange, className, ...otherProps}: SwitchProps) {
     const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
         const checked = !!(e as any).target?.checked
         onChange && onChange(checked);
     };
 
     return <BlueprintSwitch
-        className={`${eccgui}-switch`}
+        className={`${eccgui}-switch ${className}`}
         {...otherProps}
         onChange={handleChange}
     />

package/src/components/Table/Table.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import {
+    Table as CarbonTable,
+    TableProps as CarbonTableProps,
+    DataTableSize as CarbonDataTableSize,
+} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated
+export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted;
+
+export interface TableProps extends Omit<
+    CarbonTableProps,
+    "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
+>, React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Sets basically the height of a row inside the table.
+     * Please use only `small`, `medium` and `large`.
+     * `compact` and `tall` are deprecated.
+     */
+    size?: TableRowHeightSize;
+    /**
+     * All rows are divided by horizontal borders.
+     */
+    hasDivider?: boolean;
+    /**
+     * This will lead to a `colgroup` element within the `table` setting `with` styles for each column.
+     * The table is then displayed `fixed`.
+     * All values need to be valid CSS width expression, e.g. `30px`, `5rem`, `40%`.
+     * If you need to add more attributes to the `col` elements, e.g. class names, then you need to control `colgroup` and `fixed` table by yourself.
+     */
+    columnWidths?: string[];
+    /**
+     * Table is displayed without any own coloring.
+     * For example this can be used for sub tables inside other elements with already set background colors.
+     * Zebra styles won't work if this option is enabled!
+     */
+    colorless?: boolean;
+}
+
+export const tableRowHeightSizes: Record<string, CarbonDataTableSize> = {
+    // current values
+    "small": "xs",
+    "medium": "sm",
+    "large": "md",
+    // deprecated values
+    "compact": "xs",
+    "tall": "md",
+}
+
+export function Table({
+    className = "",
+    size = "medium",
+    hasDivider = true,
+    columnWidths,
+    colorless,
+    children,
+    ...otherCarbonTableProps
+}: TableProps) {
+
+    let colLayout : boolean | JSX.Element = false;
+    if (!!columnWidths && columnWidths.length > 0) {
+        colLayout = (
+            <colgroup className={`${eccgui}-simpletable__layout`}>
+                {columnWidths.map((width,i) => <col key={i} style={{ width }}/>)}
+            </colgroup>
+        );
+    }
+
+    return (
+        <CarbonTable
+            className={
+                `${eccgui}-simpletable ${eccgui}-simpletable--${size}` +
+                (hasDivider ? ` ${eccgui}-simpletable--rowdivider` : "") +
+                (colLayout ? ` ${eccgui}-simpletable--haslayout` : "") +
+                (colorless ? ` ${eccgui}-simpletable--colorless` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherCarbonTableProps}
+            size={tableRowHeightSizes[size]}
+        >
+            {!!colLayout && colLayout}
+            {children}
+        </CarbonTable>
+    ) ;
+}
+
+export default Table;

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import {
+    TableCell as CarbonTableCell,
+    TableCellProps as CarbonTableCellProps,
+} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TableCellProps extends CarbonTableCellProps, React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * By default all table cell content is aligned to the top of the cell.
+     * Use this property to change the vertical alignment.
+     */
+    alignVertical?: "middle";
+}
+
+export function TableCell({
+    className = "",
+    children,
+    alignVertical,
+    ...otherTableCellProps
+}: TableCellProps) {
+
+    return (
+        <CarbonTableCell
+            className={
+                `${eccgui}-simpletable__cell` +
+                (!!alignVertical ? ` ${eccgui}-simpletable__cell--${alignVertical}` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherTableCellProps}
+        >
+            {children}
+        </CarbonTableCell>
+    ) ;
+}
+
+export default TableCell;

package/src/components/Table/TableContainer.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+    DataTable as CarbonDataTable,
+    DataTableProps as CarbonDataTableProps,
+    TableContainerProps as CarbonTableContainerProps
+} from "carbon-components-react";
+import { TableRowHeightSize,  tableRowHeightSizes } from "./Table";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface TableDataContainerProps extends Omit<
+    CarbonDataTableProps,
+    "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
+>, React.TableHTMLAttributes<HTMLTableElement> {
+    children(signature: any): JSX.Element;
+    size?: TableRowHeightSize;
+}
+interface TableSimpleContainerProps extends Omit<
+    CarbonTableContainerProps,
+    "description" | "stickyHeader" | "title" | "useStaticWidth"
+>, React.HTMLAttributes<HTMLDivElement> {
+    children?: JSX.Element;
+}
+
+export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
+
+export function TableContainer({
+    className = "",
+    ...otherProps
+}: TableContainerProps) {
+
+    const otherDataTableProps = otherProps as TableDataContainerProps;
+
+    return !!otherDataTableProps.headers || !!otherDataTableProps.rows ? (
+        <CarbonDataTable.TableContainer className={`${eccgui}-simpletable__container ` + className}>
+            <CarbonDataTable
+                {...otherDataTableProps}
+                size={
+                    otherDataTableProps.size
+                        ? tableRowHeightSizes[otherDataTableProps.size]
+                        : tableRowHeightSizes.medium
+                }
+            />
+        </CarbonDataTable.TableContainer>
+    ) : (
+        <CarbonDataTable.TableContainer {...otherProps} className={`${eccgui}-simpletable__container ` + className} />
+    );
+}
+
+export default TableContainer;

package/src/components/Table/TableExpandHeader.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+    TableExpandHeader as CarbonTableExpandHeader,
+    TableExpandHeaderProps as CarbonTableExpandHeaderProps,
+} from "carbon-components-react";
+import IconButton from "./../Icon/IconButton";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TableExpandHeaderProps extends Omit<
+    CarbonTableExpandHeaderProps,
+    "children" | "ariaLabel" | "enableExpando" | "expandIconDescription"
+>, React.ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
+     */
+    togglerText: string;
+};
+
+/**
+ * Adds a button to the table header that can trigger a function to expand/collapse all rows of the table.
+ */
+export function TableExpandHeader ({
+    togglerText,
+    isExpanded,
+    onExpand,
+    className,
+    enableToggle,
+    ...otherCarbonTableExpandHeaderProps
+}: TableExpandHeaderProps) {
+
+    const toggleButton = isExpanded ?
+        React.cloneElement(<IconButton name="toggler-rowcollapse" text={togglerText} />, {onClick: onExpand}) :
+        React.cloneElement(<IconButton name="toggler-rowexpand" text={togglerText} />, {onClick: onExpand});
+
+    return (
+        <CarbonTableExpandHeader
+            className={
+                `${eccgui}-simpletable__headexpander` +
+                (!!className ? ` ${className}` : "")
+            }
+            isExpanded={isExpanded}
+            onExpand={onExpand}
+            enableToggle={false}
+            {...otherCarbonTableExpandHeaderProps}
+        >
+            { enableToggle && toggleButton }
+        </CarbonTableExpandHeader>
+    )
+}
+
+export default TableExpandHeader;