@eccenca/gui-elements 23.3.1 → 23.4.0

package/src/components/OverviewItem/overviewitem.scss

@@ -1,10 +1,8 @@
 $eccgui-color-overviewitem-divider: $ui-03 !default;
 $eccgui-size-overviewitem-spacing: $eccgui-size-typo-base * 0.5 !default;
-
 $eccgui-color-overviewitem-depiction-background: $eccgui-color-workspace-text !default;
 $eccgui-color-overviewitem-depiction-text: $eccgui-color-workspace-background !default;
 $eccgui-size-overviewitem-depiction-border-radius: $pt-border-radius !default;
-
 $eccgui-size-overviewitem-line-typo-small: $eccgui-size-typo-caption !default;
 $eccgui-size-overviewitem-line-typo-small-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-size-overviewitem-line-typo-large: $eccgui-size-typo-subtitle !default;
@@ -12,8 +10,7 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__list--hascolumns {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     align-items: stretch;
 
     & > li {
@@ -25,8 +22,8 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     }
 
     &.#{$eccgui}-overviewitem__list--hasspacing {
-        margin-left: -1 * $eccgui-size-overviewitem-spacing * 0.5;
         margin-right: -1 * $eccgui-size-overviewitem-spacing * 0.5;
+        margin-left: -1 * $eccgui-size-overviewitem-spacing * 0.5;
 
         & > li {
             box-sizing: border-box;
@@ -48,13 +45,12 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__item {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: stretch;
+    flex-flow: row nowrap;
     align-content: stretch;
-    height: mini-units(6);
+    align-items: stretch;
+    justify-content: flex-start;
     max-width: 100%;
+    height: mini-units(6);
 
     &[tabindex]:not([tabindex="-1"]) {
         cursor: pointer;
@@ -66,19 +62,19 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
         // @extend .#{$ns}-menu-item;
 
         &--active {
-            background-color: $eccgui-color-accent;
             color: $eccgui-color-accent-contrast;
+            background-color: $eccgui-color-accent;
         }
     }
 }
 
 .#{$eccgui}-overviewitem__item--highdensity,
 .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
-    height: $button-height; //mini-units(4);
+    height: $button-height; // mini-units(4);
 
     & > .#{$eccgui}-overviewitem__depiction {
-        width: $button-height; //mini-units(4);
-        height: $button-height; //mini-units(4);
+        width: $button-height; // mini-units(4);
+        height: $button-height; // mini-units(4);
     }
 }
 
@@ -98,27 +94,28 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 }
 
 .#{$eccgui}-overviewitem__depiction {
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
+    align-content: center;
+    align-items: center;
     width: mini-units(6);
     height: mini-units(6);
     overflow: hidden;
-    display: flex;
-    align-items: center;
-    align-content: center;
     text-align: center;
     border-radius: $eccgui-size-overviewitem-depiction-border-radius;
 
     & > * {
+        display: block;
         width: auto;
         max-height: 100%;
-        display: block;
         margin: 0 auto;
     }
 
     &:not(.#{$eccgui}-overviewitem__depiction--keepcolors) {
-        background-color: $eccgui-color-overviewitem-depiction-background;
         color: $eccgui-color-overviewitem-depiction-text;
+        background-color: $eccgui-color-overviewitem-depiction-background;
+
         svg {
             fill: $eccgui-color-overviewitem-depiction-text;
         }
@@ -126,14 +123,13 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 }
 
 .#{$eccgui}-overviewitem__description {
-    flex-grow: 1;
-    flex-shrink: 1;
     display: flex;
     flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: stretch;
+    flex-grow: 1;
+    flex-shrink: 1;
     align-content: stretch;
+    align-items: stretch;
+    justify-content: flex-start;
     overflow: hidden;
 
     .#{$eccgui}-overviewitem__depiction + & {
@@ -142,24 +138,23 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 }
 
 .#{$eccgui}-overviewitem__line {
-    flex-shrink: 1;
-    flex-grow: 1;
     display: flex;
+    flex: 1 1 100%;
     align-items: center;
     overflow: hidden;
-    white-space: nowrap;
     font-size: 1rem;
+    white-space: nowrap;
 
     & > * {
         display: inline-block;
-        font-size: inherit;
         max-width: 100%;
+        font-size: inherit;
     }
 }
 
 .#{$eccgui}-overviewitem__line--small {
     font-size: $eccgui-size-overviewitem-line-typo-small;
-    line-height: $eccgui-size-overviewitem-line-typo-small-lineheight
+    line-height: $eccgui-size-overviewitem-line-typo-small-lineheight;
 }
 
 .#{$eccgui}-overviewitem__line--large {
@@ -168,13 +163,12 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 }
 
 .#{$eccgui}-overviewitem__actions {
+    display: flex;
+    flex-flow: row nowrap;
     flex-grow: 0;
     flex-shrink: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
     align-items: center;
+    justify-content: flex-end;
 
     &:not(:first-child) {
         margin-left: mini-units(1);

package/src/components/Pagination/pagination.scss

@@ -6,8 +6,8 @@ $eccgui-color-pagination-text: $eccgui-color-workspace-text !default;
 $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
 
 .#{$prefix}--pagination {
-    background-color: $eccgui-color-pagination-background;
     font-size: $eccgui-size-typo-pagination;
+    background-color: $eccgui-color-pagination-background;
 
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
@@ -29,6 +29,11 @@ span.#{$prefix}--pagination__text {
     }
 }
 
+.#{$prefix}--pagination__button--no-index {
+    // TODO: revalidate if this is still necessary using the latest version of carbon lib
+    color: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled);
+}
+
 .#{$eccgui}-pagination--hideinfotext {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
         display: none;

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -2,12 +2,19 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Label, { LabelProps } from "../Label/Label";
+import OverflowText from "../Typography/OverflowText";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Force label to get displayed without line breaks.
+     * This works best if you use a simple string as content.
+     * Otherwise you may need to take care yourself about it.
+     */
+    nowrap?: boolean;
     /**
      * Additional label properties, e.g. `tooltip`.
      * It is only used if the `PropertyName` has simple text input.
@@ -15,19 +22,31 @@ export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
+export const PropertyName = ({
+    children,
+    className = "",
+    size,
+    nowrap,
+    labelProps,
+    ...otherDtProps
+}: PropertyNameProps) => {
     return (
         <dt
             className={
                 `${eccgui}-propertyvalue__property` +
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
+                (nowrap ? ` ${eccgui}-propertyvalue__property--nowrap` : "") +
                 (className ? " " + className : "")
             }
             {...otherDtProps}
         >
             <div>
                 {typeof children === "string" ? (
-                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                    <Label
+                        text={nowrap ? <OverflowText inline>{children}</OverflowText> : children}
+                        isLayoutForElement="span"
+                        {...labelProps}
+                    />
                 ) : (
                     children
                 )}

package/src/components/PropertyValuePair/PropertyValue.tsx

@@ -1,14 +1,30 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import OverflowText from "../Typography/OverflowText";
 
-export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {};
+export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Force value to get displayed without line breaks.
+     * This works best if you use a string or inline element as content.
+     * Otherwise you may need to take care yourself about it.
+     */
+    nowrap?: boolean;
+}
 
-export const PropertyValue = ({ className = "", children, ...otherProps }: PropertyValueProps) => {
+export const PropertyValue = ({ children, className = "", nowrap, ...otherDdProps }: PropertyValueProps) => {
     return (
-        <dd className={`${eccgui}-propertyvalue__value` + (className ? " " + className : "")} {...otherProps}>
-            <div>{children}</div>
+        <dd
+            className={
+                `${eccgui}-propertyvalue__value` +
+                (nowrap ? ` ${eccgui}-propertyvalue__value--nowrap` : "") +
+                (className ? " " + className : "")
+            }
+            {...otherDdProps}
+        >
+            <div>{nowrap ? <OverflowText passDown>{children}</OverflowText> : children}</div>
         </dd>
     );
-}
+};
 
 export default PropertyValue;

package/src/components/PropertyValuePair/PropertyValuePair.tsx

@@ -1,6 +1,10 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import PropertyName from "./PropertyName";
+import PropertyValue from "./PropertyValue";
+
 export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Add a bit white space to the bottom of the element.
@@ -10,15 +14,30 @@ export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElem
      * Add a horizontal rule to the bottom of the element.
      */
     hasDivider?: boolean;
-};
+    /**
+     * Forward the `nowrap` option to it `PropertyName` and `PropertyValue` children.
+     */
+    nowrap?: boolean;
+}
 
 export const PropertyValuePair = ({
-    className = "",
     children,
+    className = "",
+    nowrap,
     hasSpacing = false,
     hasDivider = false,
     ...otherProps
 }: PropertyValuePairProps) => {
+    const alteredChildren = nowrap
+        ? React.Children.map(children, (child) => {
+              const originalChild = child as React.ReactElement;
+              if (originalChild.type && (originalChild.type === PropertyName || originalChild.type === PropertyValue)) {
+                  return React.cloneElement(originalChild, { nowrap: true });
+              }
+              return child;
+          })
+        : children;
+
     return (
         <div
             className={
@@ -29,9 +48,9 @@ export const PropertyValuePair = ({
             }
             {...otherProps}
         >
-            {children}
+            {alteredChildren}
         </div>
     );
-}
+};
 
 export default PropertyValuePair;

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -6,7 +6,7 @@
 
 .#{$eccgui}-propertyvalue__pair {
     display: block;
-    max-width: 100%;
+    width: 100%;
     clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {
@@ -63,6 +63,11 @@
     }
 }
 
+.#{$eccgui}-propertyvalue__property--nowrap {
+    overflow: visible;
+    white-space: nowrap;
+}
+
 .#{$eccgui}-propertyvalue__value {
     box-sizing: content-box;
     margin-left: math.div(3, 16) * 100%;

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

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

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { PropertyValue } from "../../../index";
+
+export default {
+    title: "Components/PropertyValuePair/Value",
+    component: PropertyValue,
+    argTypes: {},
+} as Meta<typeof PropertyValue>;
+
+const Template: StoryFn<typeof PropertyValue> = (args) => <PropertyValue {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: loremIpsum({ p: 3, avgSentencesPerParagraph: 5, avgWordsPerSentence: 8, random: false }).toString(),
+};

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(),
+};