@eccenca/gui-elements 23.1.0-rc.1 → 23.1.0-rc.3

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/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;

package/src/components/Table/TableExpandRow.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import {
+    TableExpandRowProps as CarbonTableExpandRowProps,
+} from "carbon-components-react";
+import {usePrefix as carbonPrefix} from "carbon-components-react/es/index"
+import IconButton from "./../Icon/IconButton";
+import { TableCell } from "./index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TableExpandRowProps extends Omit<
+    CarbonTableExpandRowProps,
+    "ariaLabel" | "expandIconDescription"
+>, React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
+     */
+    togglerText: string;
+    /**
+     * Display this row with the styles from a zebra style-enabled table.
+     */
+    useZebraStyle?: boolean;
+};
+
+/**
+ * Table row that is suffixed by a cell containing a button to expand/collapse this row.
+ */
+export function TableExpandRow ({
+    togglerText,
+    isExpanded,
+    isSelected,
+    useZebraStyle,
+    onExpand,
+    className,
+    children,
+    ...otherCarbonTableExpandRowProps
+}: TableExpandRowProps) {
+
+    const carbonClassPrefix = carbonPrefix();
+
+    const toggleButton = isExpanded ?
+        React.cloneElement(<IconButton name="toggler-showless" text={togglerText} />, {onClick: onExpand}) :
+        React.cloneElement(<IconButton name="toggler-showmore" text={togglerText} />, {onClick: onExpand});
+
+    return (
+        <tr
+            className={
+                `${eccgui}-simpletable__row` +
+                ` ${carbonClassPrefix}--parent-row` +
+                (isExpanded ? ` ${carbonClassPrefix}--expandable-row` : "") +
+                (isSelected ? ` ${carbonClassPrefix}--data-table--selected` : "") +
+                (useZebraStyle ? ` ${eccgui}-simpletable__row--zebra` : "") +
+                (!!className ? ` ${className}` : "")
+            }
+            data-parent-row={true}
+            {...otherCarbonTableExpandRowProps}
+        >
+            <TableCell
+                className={
+                    `${eccgui}-simpletable__rowexpander` +
+                    ` ${carbonClassPrefix}--table-expand`
+                }
+            >
+                { toggleButton }
+            </TableCell>
+            { children }
+        </tr>
+    )
+}
+
+export default TableExpandRow;

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {
+    TableRow as CarbonTableRow,
+    TableRowProps as CarbonTableRowProps,
+} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TableRowProps extends CarbonTableRowProps, React.TdHTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Display this row with the styles from a zebra style-enabled table.
+     */
+    useZebraStyle?: boolean;
+}
+
+export function TableRow({
+    className = "",
+    children,
+    useZebraStyle,
+    ...otherTableRowProps
+}: TableRowProps) {
+
+    return (
+        <CarbonTableRow
+            className={
+                `${eccgui}-simpletable__row` +
+                (useZebraStyle ? ` ${eccgui}-simpletable__row--zebra` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherTableRowProps}
+        >
+            {children}
+        </CarbonTableRow>
+    ) ;
+}
+
+export default TableRow;

package/src/components/Table/index.tsx

@@ -0,0 +1,14 @@
+export * from "./TableContainer";
+export * from "./Table";
+export * from "./TableRow";
+export * from "./TableExpandRow";
+export * from "./TableExpandHeader";
+export * from "./TableCell";
+
+// TODO, we may wrap to add own classes (currently not necessary)
+export {
+    TableHead,
+    TableBody,
+    TableExpandedRow,
+    TableHeader,
+} from "carbon-components-react";