@eccenca/gui-elements 23.3.1-rc.2 → 23.4.0-rc.0

package/src/components/PropertyValuePair/stories/PropertyValueList.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { PropertyValueList, PropertyValuePair } from "../../../index";
+
+import { Default as PairExample } from "./PropertyValuePair.stories";
+
+export default {
+    title: "Components/PropertyValuePair/List",
+    component: PropertyValueList,
+    subcomponents: {
+        PropertyValuePair,
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Shoukd be one or more `<PropertyValuePair />` elements.",
+        },
+    },
+} as Meta<typeof PropertyValueList>;
+
+const Template: StoryFn<typeof PropertyValueList> = (args) => <PropertyValueList {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <PropertyValuePair {...PairExample.args} hasDivider hasSpacing />,
+        <PropertyValuePair {...PairExample.args} hasDivider hasSpacing />,
+        <PropertyValuePair {...PairExample.args} hasDivider hasSpacing />,
+        <PropertyValuePair {...PairExample.args} hasDivider hasSpacing />,
+        <PropertyValuePair {...PairExample.args} hasDivider hasSpacing />,
+    ],
+};

package/src/components/PropertyValuePair/stories/PropertyValuePair.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { PropertyName, PropertyValue, PropertyValuePair } from "../../../index";
+
+import { Default as NameExample } from "./PropertyName.stories";
+import { Default as ValueExample } from "./PropertyValue.stories";
+
+export default {
+    title: "Components/PropertyValuePair",
+    component: PropertyValuePair,
+    subcomponents: {
+        PropertyName,
+        PropertyValue,
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Shoukd be `<PropertyName/>` and `<PropertyValue/>`, 1 of each.",
+        },
+    },
+} as Meta<typeof PropertyValuePair>;
+
+const Template: StoryFn<typeof PropertyValuePair> = (args) => <PropertyValuePair {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [<PropertyName {...NameExample.args} />, <PropertyValue {...ValueExample.args} />],
+};

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Skeleton } from "./../../../index";
+
+export default {
+    title: "Components/Skeleton",
+    component: Skeleton,
+    argTypes: {},
+} as Meta<typeof Skeleton>;
+
+const SkeletonExample: StoryFn<typeof Skeleton> = (args) => <Skeleton {...args} />;
+
+export const Inline = SkeletonExample.bind({});
+Inline.args = {
+    children: (
+        <span className="test">
+            {loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 3, random: false }).toString()}
+        </span>
+    ),
+};
+
+export const Block = SkeletonExample.bind({});
+Block.args = {
+    children: (
+        <p>{loremIpsum({ p: 1, avgSentencesPerParagraph: 5, avgWordsPerSentence: 8, random: false }).toString()}</p>
+    ),
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { SKELETON } from "./classnames";
+
+export interface SkeletonProps {
+    /**
+     * Element that need to displayed using the skeleton styles.
+     */
+    children: JSX.Element | JSX.Element[];
+}
+
+/**
+ * `<Skeleton />` provides a loading state display of its children elements.
+ * It does not provide its own content.
+ */
+export function Skeleton({ children }: SkeletonProps) {
+    const alteredChildren = React.Children.map(children, (child) => {
+        const originalChild = child as React.ReactElement;
+        if (originalChild.props) {
+            return React.cloneElement(originalChild, {
+                className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,
+                // @see https://blueprintjs.com/docs/versions/4/#core/components/skeleton
+                disabled: true,
+                tabIndex: -1,
+            });
+        }
+        return originalChild;
+    });
+    return <>{alteredChildren}</>;
+}
+
+export default Skeleton;

package/src/components/Skeleton/classnames.ts

@@ -0,0 +1,3 @@
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
+
+export const SKELETON = BlueprintClasses.SKELETON;

package/src/components/Skeleton/skeleton.scss

@@ -0,0 +1 @@
+@import "~@blueprintjs/core/src/components/skeleton/skeleton";

package/src/components/Table/TableCell.tsx

@@ -1,37 +1,41 @@
 import React from "react";
-import {
-    TableCell as CarbonTableCell,
-    TableCellProps as CarbonTableCellProps,
-} from "carbon-components-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 left of the cell.
+     * Use this property to change the horizontal alignment.
+     */
+    alignHorizontal?: "left" | "center";
     /**
      * By default all table cell content is aligned to the top of the cell.
      * Use this property to change the vertical alignment.
      */
-    alignVertical?: "middle";
+    alignVertical?: "top" | "middle";
 }
 
 export function TableCell({
     className = "",
     children,
+    alignHorizontal,
     alignVertical,
     ...otherTableCellProps
 }: TableCellProps) {
-
     return (
         <CarbonTableCell
             className={
                 `${eccgui}-simpletable__cell` +
-                (!!alignVertical ? ` ${eccgui}-simpletable__cell--${alignVertical}` : "") +
+                (alignHorizontal ? ` ${eccgui}-simpletable__cell--${alignHorizontal}` : "") +
+                (alignVertical ? ` ${eccgui}-simpletable__cell--${alignVertical}` : "") +
                 (className ? ` ${className}` : "")
             }
             {...otherTableCellProps}
         >
             {children}
         </CarbonTableCell>
-    ) ;
+    );
 }
 
 export default TableCell;

package/src/components/Table/stories/TableCell.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Table, TableBody, TableCell, TableContainer, TableRow } from "../../../index";
+
+export default {
+    title: "Components/Table/TableCell",
+    component: TableCell,
+    argTypes: {},
+} as Meta<typeof TableCell>;
+
+const Template: StoryFn<typeof TableCell> = (args) => {
+    return (
+        <TableContainer>
+            <Table>
+                <TableBody>
+                    <TableRow>
+                        <TableCell {...args} />
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    children: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(),
+};

package/src/components/Table/table.scss

@@ -1,7 +1,11 @@
+@use "sass:color";
+
 // import libs
 @use "~@carbon/styles/scss/components/data-table/data-table";
+
 // currently not needed @import "~@carbon/styles/scss/components/data-table/action";
 @use "~@carbon/styles/scss/components/data-table/expandable/index" as table-expandable;
+
 // currently not needed @import ~@carbon/styles/scss/components/data-table/skeleton;
 @use "~@carbon/styles/scss/components/data-table/sort/index" as table-sort;
 @include data-table.data-table;
@@ -17,11 +21,15 @@ $eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
 $eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
 $eccgui-color-table-background: $card-background-color !default;
 $eccgui-color-tableheader-background: $button-background-color !default;
-$eccgui-color-tablerow-background-even: lighten($menu-item-color-hover, 24%) !default;
+$eccgui-color-tablerow-background-even: color.adjust($menu-item-color-hover, $lightness: 24%) !default;
 $eccgui-color-tablerow-background-odd: transparent !default;
 $eccgui-color-tablerow-hover: $menu-item-color-hover !default;
 $eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
-$eccgui-color-tablerow-selected-hover: mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-hover, 50%) !default;
+$eccgui-color-tablerow-selected-hover: color.mix(
+    $eccgui-color-tablerow-selected,
+    $eccgui-color-tablerow-hover,
+    50%
+) !default;
 $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 // changes
@@ -32,8 +40,29 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 .#{$prefix}--data-table {
     min-width: 100%;
+
     --#{$eccgui}-color-border: #{$eccgui-color-tablerow-border};
     --#{$eccgui}-divider-row: none;
+
+    thead th,
+    tbody td,
+    tbody th {
+        padding-right: $eccgui-size-block-whitespace * 0.5;
+        padding-left: $eccgui-size-block-whitespace * 0.5;
+        overflow: hidden;
+
+        &.#{$prefix}--table-expand {
+            width: $button-height;
+            height: $button-height;
+            padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
+            padding-left: 0;
+        }
+    }
+
+    thead th.#{$prefix}--table-expand {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
 }
 
 .#{$eccgui}-simpletable--haslayout {
@@ -45,14 +74,14 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 }
 
 .#{$prefix}--data-table thead {
-    background-color: transparent;
     font-weight: $eccgui-size-tablecell-font-weight;
+    background-color: transparent;
 }
 
 .#{$prefix}--data-table th,
 .#{$prefix}--data-table-header {
-    background-color: $eccgui-color-tableheader-background;
     font-weight: $eccgui-size-tableheader-font-weight;
+    background-color: $eccgui-color-tableheader-background;
 }
 .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
     background: $eccgui-color-tableheader-background;
@@ -65,10 +94,10 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 }
 
 .#{$prefix}--data-table .#{$prefix}--table-header-label {
-    padding: $eccgui-size-tablecell-padding-regular 0;
-    overflow: hidden;
     flex-shrink: 1;
     min-width: 0;
+    padding: $eccgui-size-tablecell-padding-regular 0;
+    overflow: hidden;
     text-overflow: ellipsis;
 }
 
@@ -76,13 +105,19 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 .#{$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;
+    background: var(--#{$eccgui}-color-cell) !important;
+    border-top: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-cell) !important;
+    border-bottom: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-border) !important;
 
     &.#{$eccgui}-simpletable__cell--middle {
         vertical-align: middle;
     }
 
+    &.#{$eccgui}-simpletable__cell--center {
+        text-align: center;
+    }
+
     & + td:first-of-type {
         padding-left: $spacing-05;
     }
@@ -94,49 +129,25 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
     min-width: 0;
 }
 
-.#{$prefix}--data-table {
-    thead th, tbody td, tbody th {
-        padding-left: $eccgui-size-block-whitespace * 0.5;
-        padding-right: $eccgui-size-block-whitespace * 0.5;
-        overflow: hidden;
-
-        &.#{$prefix}--table-expand {
-            height: $button-height;
-            width: $button-height;
-            padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
-            padding-left: 0;
-        }
-    }
-
-    thead th.#{$prefix}--table-expand {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-}
-
 .#{$prefix}--table-expand__button {
-    height: $button-height;
     width: $button-height;
-}
-
-.#{$prefix}--data-table td,
-.#{$prefix}--data-table tbody th {
-    border-top: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-cell) !important;
-    border-bottom: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-border) !important;
-    background: var(--#{$eccgui}-color-cell) !important;
+    height: $button-height;
 }
 
 // Row background colors
 
 .#{$eccgui}-simpletable--colorless > tbody {
-    & > tr, & > tr:hover {
+    & > tr,
+    & > tr:hover {
         background: transparent;
+
         --#{$eccgui}-color-cell: transparent;
     }
 }
 
 .#{$prefix}--data-table:not(.#{$eccgui}-simpletable--colorless) > tbody {
     background-color: transparent;
+
     --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-background-odd};
 
     & > tr {
@@ -149,23 +160,34 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
         &.#{$prefix}--expandable-row--hover {
             background-color: transparent;
 
-            & > th, & > td {
+            & > th,
+            & > td {
                 --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-hover};
             }
         }
 
         &.#{$prefix}--data-table--selected {
             & > th {
-                --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected, $eccgui-color-tableheader-background, 50%)};
+                --#{$eccgui}-color-cell: #{color.mix(
+                        $eccgui-color-tablerow-selected,
+                        $eccgui-color-tableheader-background,
+                        50%
+                    )};
             }
+
             & > td {
                 --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-selected};
             }
 
             &:hover {
                 & > th {
-                    --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tableheader-background, 50%)};
+                    --#{$eccgui}-color-cell: #{color.mix(
+                            $eccgui-color-tablerow-selected-hover,
+                            $eccgui-color-tableheader-background,
+                            50%
+                        )};
                 }
+
                 & > td {
                     --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-selected-hover};
                 }
@@ -176,43 +198,67 @@ $eccgui-color-tablerow-border: $pt-divider-black !default;
 
 // zebra style
 
-.#{$prefix}--data-table--zebra > tbody > tr[data-parent-row]:nth-child(4n+3),
-.#{$prefix}--data-table--zebra > tbody > tr[data-child-row]:nth-child(4n+4),
+.#{$prefix}--data-table--zebra > tbody > tr[data-parent-row]:nth-child(4n + 3),
+.#{$prefix}--data-table--zebra > tbody > tr[data-child-row]:nth-child(4n + 4),
 .#{$prefix}--data-table > tbody > tr.#{eccgui}-simpletable__row--zebra,
 .#{$prefix}--data-table > tbody > tr.#{eccgui}-simpletable__row--zebra + tr[data-child-row],
-.#{$prefix}--data-table--zebra > tbody > tr:not([data-parent-row]):not([data-child-row]):nth-child(2n+0) {
+.#{$prefix}--data-table--zebra > tbody > tr:not([data-parent-row]):not([data-child-row]):nth-child(2n + 0) {
     // even rows
 
     &.#{$prefix}--expandable-row:not([data-child-row]) {
         --#{$eccgui}-color-border: #{$eccgui-color-tablerow-background-even};
     }
 
-    & > th, & > td {
+    & > th,
+    & > td {
         --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-background-even};
     }
 
     &:hover,
     &:hover + tr[data-child-row],
     &.#{$prefix}--expandable-row--hover {
-        & > th, & > td {
-            --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-hover, $eccgui-color-tablerow-background-even, 50%)};
+        & > th,
+        & > td {
+            --#{$eccgui}-color-cell: #{color.mix(
+                    $eccgui-color-tablerow-hover,
+                    $eccgui-color-tablerow-background-even,
+                    50%
+                )};
         }
     }
 
     &.#{$prefix}--data-table--selected {
         & > th {
-            --#{$eccgui}-color-cell: #{mix(mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%), $eccgui-color-tableheader-background, 50%)};
+            --#{$eccgui}-color-cell: #{color.mix(
+                    color.mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%),
+                    $eccgui-color-tableheader-background,
+                    50%
+                )};
         }
+
         & > td {
-            --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%)};
+            --#{$eccgui}-color-cell: #{color.mix(
+                    $eccgui-color-tablerow-selected,
+                    $eccgui-color-tablerow-background-even,
+                    50%
+                )};
         }
 
         &:hover {
             & > th {
-                --#{$eccgui}-color-cell: #{mix(mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%), $eccgui-color-tableheader-background, 50%)};
+                --#{$eccgui}-color-cell: #{color.mix(
+                        color.mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%),
+                        $eccgui-color-tableheader-background,
+                        50%
+                    )};
             }
+
             & > td {
-                --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%)};
+                --#{$eccgui}-color-cell: #{color.mix(
+                        $eccgui-color-tablerow-selected-hover,
+                        $eccgui-color-tablerow-background-even,
+                        50%
+                    )};
             }
         }
     }
@@ -283,8 +329,8 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
 // Sorting option
 
 .#{$prefix}--table-sort {
-    background-color: transparent;
     padding-left: $eccgui-size-block-whitespace * 0.5;
+    background-color: transparent;
 
     &:hover {
         background-color: $button-background-color-hover;

package/src/components/TextField/stories/TextField.stories.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TextField } from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import {TextFieldProps} from "../TextField";
-import characters from "../../../common/utils/characters"
+import characters from "../../../common/utils/characters";
+import { TextFieldProps } from "../TextField";
+
+import { TextField } from "./../../../../index";
 
 export default {
     title: "Forms/TextField",
@@ -17,13 +19,11 @@ export default {
         },
         intent: {
             ...helpersArgTypes.exampleIntent,
-        }
+        },
     },
 } as ComponentMeta<typeof TextField>;
 
-const Template: ComponentStory<typeof TextField> = (args) => (
-    <TextField {...args}></TextField>
-);
+const Template: ComponentStory<typeof TextField> = (args) => <TextField {...args}></TextField>;
 
 export const Default = Template.bind({});
 
@@ -36,24 +36,27 @@ Default.args = {
 /** Text field with default value that contains a zero width/invisible character.
  * As long as the character exists, an alert is raised for every value change with a delay of 500ms.
  * Instead of an alert, something more sophisticated like a clean up action should be offered in production. */
-export const InvisibleCharacterWarning = Template.bind({})
+export const InvisibleCharacterWarning = Template.bind({});
 
 const invisibleCharacterWarningProps: TextFieldProps = {
     ...Default.args,
     invisibleCharacterWarning: {
         callback: (codePoints) => {
-            if(codePoints.size) {
+            if (codePoints.size) {
                 const codePointsString = [...Array.from(codePoints)]
                     .map((n) => {
-                        const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n)
-                        return info.fullLabel
+                        const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n);
+                        return info.fullLabel;
                     })
-                    .join(", ")
-                alert("Invisible character detected in input string. Code points: " + codePointsString)
+                    .join(", ");
+                alert("Invisible character detected in input string. Code points: " + codePointsString);
             }
         },
-        callbackDelay: 500
+        callbackDelay: 500,
+    },
+    onChange: () => {
+        /** needs to be defined, else the invisible character warning callback will not be triggered. */
     },
-    defaultValue: "Invisible character ->​<-"
-}
-InvisibleCharacterWarning.args = invisibleCharacterWarningProps
+    defaultValue: "Invisible character ->​<-",
+};
+InvisibleCharacterWarning.args = invisibleCharacterWarningProps;