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

package/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import OverviewItemLine from "./../OverviewItemLine";
+
+export default {
+  title: "Components/OverviewItem/OverviewItemLine",
+  component: OverviewItemLine,
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Elements for line content."
+      }
+  },
+} as ComponentMeta<typeof OverviewItemLine>;
+
+const Template: ComponentStory<typeof OverviewItemLine> = (args) => (
+  <OverviewItemLine {...args}></OverviewItemLine>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+}

package/src/components/OverviewItem/stories/OverviewItemList.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+    OverviewItem,
+    OverviewItemList,
+} from "./../";
+
+import { ItemExample } from "./OverviewItem.stories";
+
+export default {
+    title: "Components/OverviewItem",
+    component: OverviewItemList,
+    subcomponents: {
+        OverviewItem
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Should contain only `OverviewItem` elements, maybe wrapped inside cards."
+        }
+    },
+} as ComponentMeta<typeof OverviewItemList>;
+
+const Template: ComponentStory<typeof OverviewItemList> = (args) => (
+    <OverviewItemList {...args}></OverviewItemList>
+);
+
+export const ItemList = Template.bind({});
+ItemList.args = {
+    hasSpacing: true,
+    hasDivider: true,
+    densityHigh: false,
+    columns: 1,
+    children: [
+        <OverviewItem { ...ItemExample.args } />,
+        <OverviewItem { ...ItemExample.args } />,
+        <OverviewItem { ...ItemExample.args } />,
+        <OverviewItem { ...ItemExample.args } />,
+    ]
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import {Pagination as CarbonPagination} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Pagination({
+    className,
+    hidePageSizeConfiguration = false,
+    hideInfoText = false,
+    hidePageSelect = false,
+    hideNavigationArrows = false,
+    ...otherProps
+}: any) {
+    return (
+        <CarbonPagination
+            {...otherProps}
+            className={
+                `${eccgui}-pagination` +
+                (className ? " " + className : "") +
+                (hidePageSizeConfiguration ? ` ${eccgui}-pagination--hidepagesize` : "") +
+                (hideInfoText ? ` ${eccgui}-pagination--hideinfotext` : "") +
+                (hidePageSelect ? ` ${eccgui}-pagination--hidepageselect` : "") +
+                (hideNavigationArrows ? ` ${eccgui}-pagination--hidenavigation` : "")
+            }
+        />
+    );
+}
+
+interface IPaginationDetails {
+    total: number;
+    current: number;
+    limit: number;
+    minPageSize: number;
+}
+
+interface IPaginationOptions {
+    // The initial page size
+    initialPageSize?: number;
+    // The option of page sizes
+    pageSizes?: number[];
+    // Presentation options
+    presentation?: {
+        // For narrow space requirements, the info text in the middle can be hidden
+        hideInfoText?: boolean;
+    };
+}
+
+// Custom hook to add pagination. Currently only use-cases are supported where paging has no further side effects, e.g. REST calls.
+export const usePagination = ({
+    pageSizes = [5, 10, 25, 50],
+    presentation = {},
+    initialPageSize,
+}: IPaginationOptions) => {
+    const minSize = Math.min(...pageSizes);
+    const [pagination, setPagination] = useState<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 });
+    };
+    // 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 paginationElement = (
+        <Pagination
+            onChange={onPaginationChange}
+            totalItems={pagination.total}
+            pageSizes={pageSizes}
+            page={pagination.current}
+            pageSize={pagination.limit}
+            {...presentation}
+        />
+    );
+    return [pagination, paginationElement, onTotalChange] as const;
+};
+
+export default Pagination;

package/src/components/Pagination/pagination.scss

@@ -0,0 +1,47 @@
+$eccgui-color-pagination-background: transparent !default;
+$eccgui-color-pagination-text: $eccgui-color-workspace-text !default;
+$eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
+
+@import "~carbon-components/scss/components/pagination/pagination";
+
+.#{$prefix}--pagination {
+    background-color: $eccgui-color-pagination-background;
+    font-size: $eccgui-size-typo-pagination;
+
+    .#{$prefix}--form-item,
+    .#{$prefix}--select-input {
+        font-size: 100%;
+    }
+}
+
+span.#{$prefix}--pagination__text {
+    color: $eccgui-color-pagination-text;
+}
+
+.#{$eccgui}-pagination--hidepagesize {
+    .#{$prefix}--pagination__left {
+        padding-left: 0;
+
+        & > *:not(:last-child) {
+            display: none;
+        }
+    }
+}
+
+.#{$eccgui}-pagination--hideinfotext {
+    .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
+        display: none;
+    }
+}
+
+.#{$eccgui}-pagination--hidepageselect {
+    .#{$prefix}--pagination__right > *:not(button) {
+        display: none;
+    }
+}
+
+.#{$eccgui}-pagination--hidenavigation {
+    .#{$prefix}--pagination__right > button {
+        display: none;
+    }
+}

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,8 @@
+import {
+    ProgressBar as BlueprintProgressBar,
+    ProgressBarProps as BlueprintProgressBarProps
+} from "@blueprintjs/core";
+
+// we currently do not apply changes or additions
+export const ProgressBar = BlueprintProgressBar;
+export type ProgressBarProps = BlueprintProgressBarProps;

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Label from "../Label/Label";
+
+function PropertyName({ className = "", children, ...otherProps }: any) {
+    return (
+        <dt className={`${eccgui}-propertyvalue__property` + (className ? " " + className : "")} {...otherProps}>
+            <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
+        </dt>
+    );
+}
+
+export default PropertyName;

package/src/components/PropertyValuePair/PropertyValue.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function PropertyValue({ className = "", children, ...otherProps }: any) {
+    return (
+        <dd className={`${eccgui}-propertyvalue__value` + (className ? " " + className : "")} {...otherProps}>
+            <div>{children}</div>
+        </dd>
+    );
+}
+
+export default PropertyValue;

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function PropertyValueList({ className = "", children, ...otherProps }: any) {
+    return (
+        <dl className={`${eccgui}-propertyvalue__list` + (className ? " " + className : "")} {...otherProps}>
+            {children}
+        </dl>
+    );
+}
+
+export default PropertyValueList;

package/src/components/PropertyValuePair/PropertyValuePair.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function PropertyValuePair({ className = "", children, hasSpacing = false, hasDivider = false, ...otherProps }: any) {
+    return (
+        <div
+            className={
+                `${eccgui}-propertyvalue__pair` +
+                (className ? " " + className : "") +
+                (hasSpacing ? ` ${eccgui}-propertyvalue__pair--hasspacing` : "") +
+                (hasDivider ? ` ${eccgui}-propertyvalue__pair--hasdivider` : "")
+            }
+            {...otherProps}
+        >
+            {children}
+        </div>
+    );
+}
+
+export default PropertyValuePair;

package/src/components/PropertyValuePair/index.tsx

@@ -0,0 +1,6 @@
+import PropertyName from "./PropertyName";
+import PropertyValue from "./PropertyValue";
+import PropertyValuePair from "./PropertyValuePair";
+import PropertyValueList from "./PropertyValueList";
+
+export { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList };

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -0,0 +1,56 @@
+.#{$eccgui}-propertyvalue__list {
+    display: block;
+}
+
+.#{$eccgui}-propertyvalue__pair {
+    display: block;
+    clear: both;
+
+    &.#{$eccgui}-propertyvalue__pair--hasdivider {
+        &:not(:last-child) {
+            border-bottom: solid 1px $pt-divider-black;
+        }
+    }
+    &.#{$eccgui}-propertyvalue__pair--hasspacing {
+        &:not(:last-child) {
+            padding-bottom: $eccgui-size-block-whitespace / 2;
+            margin-bottom: $eccgui-size-block-whitespace / 2;
+        }
+        .#{$eccgui}-propertyvalue__pair + & {
+            margin-top: $eccgui-size-block-whitespace / 2;
+        }
+    }
+}
+
+.#{$eccgui}-propertyvalue__property,
+.#{$eccgui}-propertyvalue__value {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: $eccgui-size-textfield-height-regular;
+}
+
+.#{$eccgui}-propertyvalue__property {
+    float: left;
+    width: 3/16 * 100%;
+    overflow: hidden;
+
+    & > div {
+        margin-right: $eccgui-size-block-whitespace;
+    }
+}
+
+.#{$eccgui}-propertyvalue__value {
+    margin-left: 3/16 * 100%;
+    box-sizing: content-box;
+
+    &:not(:last-child) {
+        .#{$eccgui}-propertyvalue__pair--hasdivider > & {
+            border-bottom: solid 1px $pt-divider-black;
+        }
+        .#{$eccgui}-propertyvalue__pair--hasspacing > & {
+            padding-bottom: $eccgui-size-block-whitespace / 2;
+            margin-bottom: $eccgui-size-block-whitespace / 2;
+        }
+    }
+}

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Radio as BlueprintRadioButton } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function RadioButton({
+    children,
+    className='',
+    ...restProps
+}: any) {
+    return (
+        <BlueprintRadioButton
+            {...restProps}
+            className={`${eccgui}-radiobutton `+className}
+        >
+            {children}
+        </BlueprintRadioButton>
+    );
+};
+
+export default RadioButton;

package/src/components/RadioButton/radiobutton.scss

@@ -0,0 +1,29 @@
+// Checkbox need to be imported before, we won't double it here currently
+
+.#{$ns}-control {
+    &.#{$ns}-radio {
+        input ~ .#{$ns}-control-indicator,
+        input:checked ~ .#{$ns}-control-indicator {
+            box-shadow: none;
+        }
+
+        input:disabled ~ .#{$ns}-control-indicator,
+        input:disabled:checked ~ .#{$ns}-control-indicator
+        {
+            background-color: $eccgui-color-checkbox-background;
+            opacity: 1;
+
+            &::before {
+                opacity: 0.25;
+            }
+        }
+
+        input ~ .#{$ns}-control-indicator::before {
+            background-image: url("~@carbon/icons/svg/32/radio-button.svg");
+        }
+        input:checked ~ .#{$ns}-control-indicator::before {
+            background-image: url("~@carbon/icons/svg/32/radio-button--checked.svg");
+        }
+
+    }
+}

package/src/components/Separation/Divider.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Divider({ addSpacing = "none" }: any) {
+    return <hr className={`${eccgui}-separation__divider-horizontal ${eccgui}-separation__spacing--${addSpacing}`} />;
+}
+
+export default Divider;

package/src/components/Separation/Spacing.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+
+interface IProps {
+    size?: "tiny" | "small" | "medium" | "large"
+    hasDivider?: boolean
+    vertical?: boolean
+}
+
+/** Adds horizontal or vertical space between neighbouring elements. */
+function Spacing({ size = "medium", hasDivider = false, vertical = false }: IProps) {
+    const direction = vertical ? "vertical" : "horizontal";
+    return (
+        <div
+            className={
+                `${eccgui}-separation__spacing-` + direction +
+                ` ${eccgui}-separation__spacing--` + size +
+                (hasDivider ? ` ${eccgui}-separation__spacing--hasdivider` : "")
+            }
+        />
+    );
+}
+
+export default Spacing;

package/src/components/Separation/separation.scss

@@ -0,0 +1,77 @@
+$eccgui-size-separation-spacing-medium: $eccgui-size-typo-base !default;
+$eccgui-color-separation-divider: $pt-divider-black !default;
+
+.#{$eccgui}-separation__spacing-horizontal,
+.#{$eccgui}-separation__spacing-vertical,
+.#{$eccgui}-separation__divider-horizontal {
+    margin: 0;
+    padding: 0;
+    box-sizing: content-box;
+    height: 1px;
+    width: 100%;
+    display: block;
+}
+
+.#{$eccgui}-separation__divider-horizontal,
+.#{$eccgui}-separation__spacing--hasdivider {
+    border: none;
+    background-color: $eccgui-color-separation-divider;
+}
+
+.#{$eccgui}-separation__spacing-horizontal,
+.#{$eccgui}-separation__divider-horizontal {
+    &.#{$eccgui}-separation__spacing--none {
+        // margin: 0;
+    }
+
+    &.#{$eccgui}-separation__spacing--tiny {
+        margin: $eccgui-size-separation-spacing-medium/8 0;
+    }
+
+    &.#{$eccgui}-separation__spacing--small {
+        margin: $eccgui-size-separation-spacing-medium/4 0;
+    }
+
+    &.#{$eccgui}-separation__spacing--medium {
+        margin: $eccgui-size-separation-spacing-medium/2 0;
+    }
+
+    &.#{$eccgui}-separation__spacing--large {
+        margin: $eccgui-size-separation-spacing-medium * 0.75 0;
+    }
+
+    &.#{$eccgui}-separation__spacing--xlarge {
+        margin: $eccgui-size-separation-spacing-medium 0;
+    }
+}
+
+.#{$eccgui}-separation__spacing-vertical {
+    display: inline-block;
+    height: 1em * $eccgui-size-typo-base-lineheight;
+    width: 1px;
+    vertical-align: text-bottom;
+
+    &.#{$eccgui}-separation__spacing--none {
+        // margin: 0;
+    }
+
+    &.#{$eccgui}-separation__spacing--tiny {
+        margin: 0 $eccgui-size-separation-spacing-medium/8;
+    }
+
+    &.#{$eccgui}-separation__spacing--small {
+        margin: 0 $eccgui-size-separation-spacing-medium/4;
+    }
+
+    &.#{$eccgui}-separation__spacing--medium {
+        margin: 0 $eccgui-size-separation-spacing-medium/2;
+    }
+
+    &.#{$eccgui}-separation__spacing--large {
+        margin: 0 $eccgui-size-separation-spacing-medium * 0.75;
+    }
+
+    &.#{$eccgui}-separation__spacing--xlarge {
+        margin: 0 $eccgui-size-separation-spacing-medium;
+    }
+}

package/src/components/SimpleTable/TableContainer.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { DataTable as CarbonDataTable } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function TableContainer({ children, className = "", ...otherProps }: any) {
+    if (typeof otherProps.title !== "undefined") {
+        otherProps.title = "";
+    }
+    if (typeof otherProps.description !== "undefined") {
+        otherProps.description = "";
+    }
+
+    return (
+        <CarbonDataTable.TableContainer {...otherProps} className={`${eccgui}-simpletable__container ` + className}>
+            {children}
+        </CarbonDataTable.TableContainer>
+    );
+}
+
+export default TableContainer;

package/src/components/SimpleTable/index.tsx

@@ -0,0 +1,4 @@
+import{ Table, TableHead, TableRow, TableBody, TableCell, TableHeader } from "carbon-components-react";
+import TableContainer from "./TableContainer";
+
+export { TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TableHeader };

package/src/components/SimpleTable/simpletable.scss

@@ -0,0 +1,121 @@
+// own vars
+$eccgui-size-tablecell-height-regular: mini-units(5) !default;
+$eccgui-size-tablecell-padding-regular: ($eccgui-size-tablecell-height-regular - carbon--rem($eccgui-size-typo-text)) / 2 !default;
+$eccgui-size-tablecell-height-compact: mini-units(4) !default;
+$eccgui-size-tablecell-padding-compact: ($eccgui-size-tablecell-height-compact - carbon--rem($eccgui-size-typo-text)) / 2 !default;
+$eccgui-size-tablecell-height-tall: mini-units(6) !default;
+$eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - carbon--rem($eccgui-size-typo-text)) / 2 !default;
+$eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
+$eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
+
+// lib vars
+/* already defined */
+// import libs
+// currently not needed @import '~carbon-components/scss/components/data-table/data-table-action';
+@import "~carbon-components/scss/components/data-table/data-table-core";
+// currently not needed @import '~carbon-components/scss/components/data-table/data-table-expandable';
+// currently not needed @import '~carbon-components/scss/components/data-table/data-table-sort';
+// currently not needed @import '~carbon-components/scss/components/data-table/data-table-inline-edit';
+// currently not needed @import '~carbon-components/scss/components/data-table/data-table-skeleton';
+
+// changes
+.#{$eccgui}-simpletable__container {
+    min-width: unset;
+}
+
+.#{$prefix}--data-table {
+    min-width: 100%;
+}
+
+.#{$prefix}--data-table thead {
+    background-color: transparent;
+    font-weight: $eccgui-size-tablecell-font-weight;
+}
+
+.#{$prefix}--data-table th {
+    background-color: rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+    font-weight: $eccgui-size-tableheader-font-weight;
+}
+
+.#{$prefix}--data-table thead tr,
+.#{$prefix}--data-table tbody tr,
+.#{$prefix}--data-table tbody tr th {
+    height: $eccgui-size-tablecell-height-regular;
+}
+
+.#{$prefix}--data-table .#{$prefix}--table-header-label {
+    padding: $eccgui-size-tablecell-padding-regular 0;
+}
+
+.#{$prefix}--data-table td,
+.#{$prefix}--data-table tbody th {
+    padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
+    padding-bottom: $eccgui-size-tablecell-padding-regular * 0.95;
+
+    vertical-align: top;
+
+    & + td:first-of-type {
+        padding-left: $spacing-05;
+    }
+}
+
+.#{$prefix}--data-table .#{$prefix}--table-column-menu,
+.#{$prefix}--data-table .#{$prefix}--table-column-menu:last-of-type {
+    width: auto;
+    min-width: 0;
+}
+
+.#{$prefix}--data-table {
+    thead th, tbody td, tbody th {
+        padding-left: $eccgui-size-block-whitespace / 2;
+        padding-right: $eccgui-size-block-whitespace / 2;
+    }
+}
+
+// Compact
+
+.#{$prefix}--data-table--compact thead tr,
+.#{$prefix}--data-table--compact tbody tr,
+.#{$prefix}--data-table--compact tbody tr th {
+    height: $eccgui-size-tablecell-height-compact;
+}
+
+.#{$prefix}--data-table--compact .#{$prefix}--table-header-label {
+    padding: $eccgui-size-tablecell-padding-compact 0;
+}
+
+.#{$prefix}--data-table--compact td,
+.#{$prefix}--data-table--compact tbody tr th {
+    padding-top: $eccgui-size-tablecell-padding-compact * 1.05;
+    padding-bottom: $eccgui-size-tablecell-padding-compact * 0.95;
+}
+
+// Tall
+
+.#{$prefix}--data-table--tall thead tr,
+.#{$prefix}--data-table--tall tbody tr,
+.#{$prefix}--data-table--tall tbody tr th {
+    height: $eccgui-size-tablecell-height-compact;
+}
+
+.#{$prefix}--data-table--tall .#{$prefix}--table-header-label {
+    padding: $eccgui-size-tablecell-padding-tall 0;
+}
+
+.#{$prefix}--data-table--tall td,
+.#{$prefix}--data-table--tall tbody tr th {
+    padding-top: $eccgui-size-tablecell-padding-tall * 1.05;
+    padding-bottom: $eccgui-size-tablecell-padding-tall * 0.95;
+}
+
+// Sticky header
+
+.#{$prefix}--data-table--sticky-header {
+    thead tr th {
+        // border-bottom-color: $active-ui;
+    }
+
+    tr {
+        min-height: $eccgui-size-tablecell-height-regular;
+    }
+}