@eccenca/gui-elements 23.5.0 → 23.6.0-rc.0

package/src/components/RadioButton/radiobutton.scss

@@ -12,8 +12,7 @@
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
-        input:disabled:checked ~ .#{$ns}-control-indicator
-        {
+        input:disabled:checked ~ .#{$ns}-control-indicator {
             background-color: $eccgui-color-checkbox-background;
             opacity: 1;
 
@@ -28,6 +27,5 @@
         input:checked ~ .#{$ns}-control-indicator::before {
             background-image: url("~@carbon/icons/svg/32/radio-button--checked.svg");
         }
-
     }
 }

package/src/components/Select/Select.tsx

@@ -1,12 +1,15 @@
 import React from "react";
-import { Select2 as BlueprintSelect, Select2Props as BlueprintSelectProps } from "@blueprintjs/select";
+import { Classes as BlueprintClasses, InputGroupProps } from "@blueprintjs/core";
+import { Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
 
 import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index";
 
 export interface SelectProps<T>
-    extends Omit<BlueprintSelectProps<T>, "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef">,
+    extends TestableComponent,
+        Omit<BlueprintSelectProps<T>, "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef">,
         Pick<ButtonProps, "icon" | "rightIcon"> {
     /**
      * Textual representation of the the selected value.
@@ -35,6 +38,11 @@ export interface SelectProps<T>
      * Only works with the uncontrolled default select target.
      */
     onClearanceText?: string;
+    /**
+     * If set then a `div` element is used as wrapper.
+     * It uses the attributes given via this property.
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 /**
@@ -54,19 +62,35 @@ export function Select<T>({
     onClearanceHandler,
     inputProps,
     onClearanceText = "Reset selection",
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
+    wrapperProps,
     ...otherSelectProps
 }: SelectProps<T>) {
-    return (
+    const selectContent = (
         <BlueprintSelect<T>
-            popoverProps={{
-                minimal: true,
-                matchTargetWidth: otherSelectProps.fill ?? false,
-                ...contextOverlayProps,
-            }}
-            inputProps={{
-                round: true,
-                ...inputProps,
-            }}
+            popoverProps={
+                {
+                    minimal: true,
+                    matchTargetWidth: otherSelectProps.fill ?? false,
+                    ...contextOverlayProps,
+                } as ContextOverlayProps
+            }
+            popoverContentProps={
+                {
+                    "data-test-id": dataTestId ? dataTestId + "_drowpdown" : undefined,
+                    "data-testid": dataTestid ? dataTestid + "_dropdown" : undefined,
+                } as BlueprintSelectProps<T>["popoverContentProps"]
+            }
+            inputProps={
+                {
+                    round: true,
+                    fill: otherSelectProps.fill,
+                    "data-test-id": dataTestId ? dataTestId + "_searchinput" : undefined,
+                    "data-testid": dataTestid ? dataTestid + "_searchinput" : undefined,
+                    ...inputProps,
+                } as InputGroupProps
+            }
             className={`${eccgui}-select` + (className ? ` ${className}` : "")}
             {...otherSelectProps}
         >
@@ -97,10 +121,25 @@ export function Select<T>({
                             )}
                         </>
                     }
+                    textClassName={text ? "" : BlueprintClasses.TEXT_MUTED}
+                    data-test-id={dataTestId + "_togger"}
+                    data-testid={dataTestid + "_togger"}
                 />
             )}
         </BlueprintSelect>
     );
+
+    return wrapperProps || dataTestId || dataTestid ? (
+        <div
+            className={`${eccgui}-select__wrapper`}
+            {...(wrapperProps ?? {})}
+            {...{ "data-test-id": dataTestId, "data-testid": dataTestid }}
+        >
+            {selectContent}
+        </div>
+    ) : (
+        <>{selectContent}</>
+    );
 }
 
 /** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */

package/src/components/Separation/Divider.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import { SpacingProps } from "./Spacing";
 
 export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
@@ -32,7 +34,7 @@ export function Divider({
                 (addSpacing !== "none" ? ` ${eccgui}-separation__spacing--${addSpacing}` : "") +
                 (width !== "full" ? ` ${eccgui}-separation__divider-horizontal--${width}` : "") +
                 (alignment !== "left" ? ` ${eccgui}-separation__divider-horizontal--${alignment}` : "") +
-                (!!className ? ` ${className}` : "")
+                (className ? ` ${className}` : "")
             }
             {...otherHrProps}
         />

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

@@ -1,22 +1,21 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Button, Divider } from "./../../../../index";
 export default {
     title: "Components/Separation/Divider",
     component: Divider,
-    argTypes: {
-    }
-} as ComponentMeta<typeof 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"/>
+        <Button children="Example element" />
+        <Divider {...args} />
+        <Button children="Another element" />
     </>
 );
 
-export const Default  = DividerExample.bind({});
-Default.args = {
-};
+export const Default = DividerExample.bind({});
+Default.args = {};

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

@@ -1,25 +1,26 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import Button from '../../Button/Button'
-import Spacing from '../Spacing'
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import Button from "../../Button/Button";
+import Spacing from "../Spacing";
 export default {
     title: "Components/Separation/Spacing",
     component: Spacing,
     argTypes: {
-        size: { control: 'radio'},
-    }
-} as ComponentMeta<typeof Spacing>
+        size: { control: "radio" },
+    },
+} as ComponentMeta<typeof Spacing>;
 
 // buttons used for only showing space with elements
 const SpacingExample: ComponentStory<typeof Spacing> = (args) => (
     <>
-     <Button children="Example element"/>
-     <Spacing {...args}/>
-     <Button children="Another element"/>
+        <Button children="Example element" />
+        <Spacing {...args} />
+        <Button children="Another element" />
     </>
 );
 
-export const Default  = SpacingExample.bind({});
+export const Default = SpacingExample.bind({});
 Default.args = {
     size: "medium",
 };

package/src/components/Separation/separation.scss

@@ -4,18 +4,18 @@ $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;
+    width: 100%;
+    height: 1px;
+    padding: 0;
+    margin: 0;
 }
 
 .#{$eccgui}-separation__divider-horizontal,
 .#{$eccgui}-separation__spacing--hasdivider {
-    border: none;
     background-color: $eccgui-color-separation-divider;
+    border: none;
 }
 
 .#{$eccgui}-separation__spacing-horizontal,
@@ -63,8 +63,8 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
 }
 
 .#{$eccgui}-separation__divider-horizontal--center {
-    margin-left: auto;
     margin-right: auto;
+    margin-left: auto;
 }
 
 .#{$eccgui}-separation__divider-horizontal--right {
@@ -73,8 +73,8 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
 
 .#{$eccgui}-separation__spacing-vertical {
     display: inline-block;
-    height: 1em * $eccgui-size-typo-base-lineheight;
     width: 1px;
+    height: 1em * $eccgui-size-typo-base-lineheight;
     vertical-align: text-bottom;
 
     &.#{$eccgui}-separation__spacing--none {

package/src/components/Spinner/Spinner.tsx

@@ -1,58 +1,59 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import {
     Overlay as BlueprintOverlay,
     OverlayProps as BlueprintOverlayProps,
     Spinner as BlueprintSpinner,
-    SpinnerProps as BlueprintSpinnerProps
+    SpinnerProps as BlueprintSpinnerProps,
 } from "@blueprintjs/core";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 // @deprecated use `SpinnerProps['position']`
-export type SpinnerPosition = "local" | "inline" | "global"
+export type SpinnerPosition = "local" | "inline" | "global";
 // @deprecated use `SpinnerProps['size']`
-export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit"
+export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
 // @deprecated use `SpinnerProps['stroke']`
-export type SpinnerStroke = "thin" | "medium" | "bold"
-type Intent = "inherit" | "primary" | "success" | "warning" | "danger"
+export type SpinnerStroke = "thin" | "medium" | "bold";
+type Intent = "inherit" | "primary" | "success" | "warning" | "danger";
 
 /** A spinner that is either displayed globally or locally. */
 export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
     /**
      * intent value or a valid css color definition
      */
-    color?: Intent | string
+    color?: Intent | string;
     /**
      * Additional CSS class names.
      */
-    className?: string
+    className?: string;
     /**
      * Position where and how the spinner is displayed:
      * * `local`: the spinner is displayed as centered overlay to the neareast parent with relative (or equivalent) positioning
      * * `inline`: the spinner is displayed as inline element
      * * `global`: the spinner is displayed including backdrop centered over the full viewport
      */
-    position?: SpinnerPosition
+    position?: SpinnerPosition;
     /**
      * The size of the spinner.
      * The default size relates to the `position`.
      */
-    size?: SpinnerSize
+    size?: SpinnerSize;
     /**
      * The stroke width that is used to visualize the spinner.
      * The default size relates to the `position`.
      * There are only rare cases to set this property,
      */
-    stroke?: SpinnerStroke
+    stroke?: SpinnerStroke;
     /**
      * Delay when to show the spinner in ms.
      */
-    delay?: number
+    delay?: number;
     /**
      * Includes a backdrop behind the spinner that narrows visibility of the area behind the spinner.
      * This option only works with "local" spinners, for "inline" spinners there is no backdrop, "global" spinners always have backdrops.
      * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or some other CSS rule with an equivalent outcome.
      */
-    showLocalBackdrop?: boolean
+    showLocalBackdrop?: boolean;
     /**
      * Use this property to alter the display of the backdrop used for the global spinner
      */
@@ -62,7 +63,7 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
      * You can set it to document the purpose of the spinner.
      * It is currently not supported and not displayed.
      */
-    description?: string
+    description?: string;
 }
 
 export const Spinner = ({
@@ -79,7 +80,7 @@ export const Spinner = ({
 }: SpinnerProps) => {
     const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
     useEffect(() => {
-        if(!showSpinner) {
+        if (!showSpinner) {
             const timeoutId = setTimeout(() => setShowSpinner(true), delay);
             return () => clearTimeout(timeoutId);
         }
@@ -89,7 +90,7 @@ export const Spinner = ({
     const internSizes = {
         thin: 100,
         medium: 50,
-        bold: 10
+        bold: 10,
     };
 
     const spinnerElement = position === "inline" ? "span" : "div";
@@ -127,7 +128,6 @@ export const Spinner = ({
                 ` ${eccgui}-spinner--size-${spinnerSize}` +
                 (showLocalBackdrop ? ` ${eccgui}-spinner--localbackdrop` : "") +
                 (className ? " " + className : "")
-
             }
             {...otherProps}
         />
@@ -149,9 +149,9 @@ export const Spinner = ({
         >
             {spinner}
         </BlueprintOverlay>
-    ) : (
-        showSpinner ? spinner : null
-    );
-}
+    ) : showSpinner ? (
+        spinner
+    ) : null;
+};
 
 export default Spinner;

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -1,20 +1,21 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import Spinner from "../Spinner";
 export default {
     title: "Components/Spinner",
     component: Spinner,
     argTypes: {
-        color: { control: 'radio', options: ["inherit", "primary", "success", "warning", "danger"]},
-        position: { control: 'radio', options: ["local", "inline", "global"]},
-        size: { control: 'radio', options: ["tiny", "small", "medium", "large", "xlarge", "inherit"]},
-        stroke: { control: 'radio', options: ["thin", "medium", "bold"]},
-    }
-} as ComponentMeta<typeof Spinner>
+        color: { control: "radio", options: ["inherit", "primary", "success", "warning", "danger"] },
+        position: { control: "radio", options: ["local", "inline", "global"] },
+        size: { control: "radio", options: ["tiny", "small", "medium", "large", "xlarge", "inherit"] },
+        stroke: { control: "radio", options: ["thin", "medium", "bold"] },
+    },
+} as ComponentMeta<typeof Spinner>;
 
 const SpinnerExample: ComponentStory<typeof Spinner> = (args) => (
-    <div style={{height: "300px", minHeight: "20vw", position: "relative"}}>
-        <Spinner {...args}/>
+    <div style={{ height: "300px", minHeight: "20vw", position: "relative" }}>
+        <Spinner {...args} />
     </div>
 );
 

package/src/components/Spinner/spinner.scss

@@ -8,11 +8,11 @@ $eccgui-size-spinner-xlarge: 256px !default;
 @import "~@blueprintjs/core/src/components/spinner/spinner";
 
 .#{$eccgui}-spinner {
-    overflow: hidden;
     height: 100%;
+    overflow: hidden;
 
     .#{$ns}-spinner-head {
-        stroke: currentColor;
+        stroke: currentcolor;
     }
     .#{$ns}-spinner-track {
         stroke: rgba(#000, 0.1);
@@ -45,37 +45,33 @@ span.#{$eccgui}-spinner {
 }
 
 .#{$eccgui}-spinner--size-tiny svg {
-    height: $eccgui-size-spinner-tiny;
     width: $eccgui-size-spinner-tiny;
+    height: $eccgui-size-spinner-tiny;
 }
 .#{$eccgui}-spinner--size-small svg {
-    height: $eccgui-size-spinner-small;
     width: $eccgui-size-spinner-small;
+    height: $eccgui-size-spinner-small;
 }
 .#{$eccgui}-spinner--size-medium svg {
-    height: $eccgui-size-spinner-medium;
     width: $eccgui-size-spinner-medium;
+    height: $eccgui-size-spinner-medium;
 }
 .#{$eccgui}-spinner--size-large svg {
-    height: $eccgui-size-spinner-large;
     width: $eccgui-size-spinner-large;
+    height: $eccgui-size-spinner-large;
 }
 .#{$eccgui}-spinner--size-xlarge svg {
-    height: $eccgui-size-spinner-xlarge;
     width: $eccgui-size-spinner-xlarge;
+    height: $eccgui-size-spinner-xlarge;
 }
 .#{$eccgui}-spinner--size-inherit svg {
-    height: 1em;
     width: 1em;
+    height: 1em;
 }
 
 .#{$eccgui}-spinner--localbackdrop {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
+    inset: 0;
     background-color: rgba($eccgui-color-workspace-background, $eccgui-opacity-muted);
 
     .#{$eccgui}-card & {

package/src/components/Structure/Section.tsx

@@ -1,17 +1,15 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SectionProps extends React.HTMLAttributes<HTMLElement> {};
+export type SectionProps = React.HTMLAttributes<HTMLElement>;
 
-export const Section = ({ children, className = '', ...restProps }: SectionProps) => {
+export const Section = ({ children, className = "", ...restProps }: SectionProps) => {
     return (
-        <section
-            {...restProps}
-            className={`${eccgui}-structure__section ` + className}
-        >
-            { children }
+        <section {...restProps} className={`${eccgui}-structure__section ` + className}>
+            {children}
         </section>
-    )
-}
+    );
+};
 
 export default Section;

package/src/components/Structure/SectionHeader.tsx

@@ -1,17 +1,15 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SectionHeaderProps extends React.HTMLAttributes<HTMLElement> {};
+export type SectionHeaderProps = React.HTMLAttributes<HTMLElement>;
 
-export const SectionHeader = ({ children, className = '', ...restProps }: SectionHeaderProps) => {
+export const SectionHeader = ({ children, className = "", ...restProps }: SectionHeaderProps) => {
     return (
-        <header
-            {...restProps}
-            className={`${eccgui}-structure__section__header `+className}
-        >
-            { children }
+        <header {...restProps} className={`${eccgui}-structure__section__header ` + className}>
+            {children}
         </header>
-    )
-}
+    );
+};
 
 export default SectionHeader;

package/src/components/Structure/TitleMainsection.tsx

@@ -1,31 +1,22 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface TitleMainsectionProps extends React.HTMLAttributes<HTMLElement> {};
+export type TitleMainsectionProps = React.HTMLAttributes<HTMLElement>;
 
-export const TitleMainsection = ({
-    children,
-    className = '',
-    ...restProps
-}: TitleMainsectionProps) => {
-    let htmlElement = React.createElement('div');
+export const TitleMainsection = ({ children, className = "", ...restProps }: TitleMainsectionProps) => {
+    let htmlElement = React.createElement("div");
     const childrenArray = React.Children.toArray(children);
 
-    if (
-        childrenArray.length === 1 &&
-        typeof childrenArray[0] === 'string'
-    ) {
-        htmlElement = React.createElement('h2');
+    if (childrenArray.length === 1 && typeof childrenArray[0] === "string") {
+        htmlElement = React.createElement("h2");
     }
 
     return (
-        <htmlElement.type
-            {...restProps}
-            className={`${eccgui}-structure__title-mainsection ` + className}
-        >
+        <htmlElement.type {...restProps} className={`${eccgui}-structure__title-mainsection ` + className}>
             {children}
         </htmlElement.type>
     );
-}
+};
 
 export default TitleMainsection;

package/src/components/Structure/TitlePage.tsx

@@ -1,31 +1,22 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface TitlePageProps extends React.HTMLAttributes<HTMLElement> {};
+export type TitlePageProps = React.HTMLAttributes<HTMLElement>;
 
-export const TitlePage = ({
-    children,
-    className = '',
-    ...restProps
-}: TitlePageProps) => {
-    let htmlElement = React.createElement('div');
+export const TitlePage = ({ children, className = "", ...restProps }: TitlePageProps) => {
+    let htmlElement = React.createElement("div");
     const childrenArray = React.Children.toArray(children);
 
-    if (
-        childrenArray.length === 1 &&
-        typeof childrenArray[0] === 'string'
-    ) {
-        htmlElement = React.createElement('h1');
+    if (childrenArray.length === 1 && typeof childrenArray[0] === "string") {
+        htmlElement = React.createElement("h1");
     }
 
     return (
-        <htmlElement.type
-            {...restProps}
-            className={`${eccgui}-structure__title-page ` + className}
-        >
+        <htmlElement.type {...restProps} className={`${eccgui}-structure__title-page ` + className}>
             {children}
         </htmlElement.type>
     );
-}
+};
 
 export default TitlePage;

package/src/components/Structure/TitleSubsection.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement> {
@@ -6,17 +7,12 @@ export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement>
      * HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
      */
     useHtmlElement?: keyof JSX.IntrinsicElements;
-};
+}
 
-export const TitleSubsection = ({
-    children,
-    className = "",
-    useHtmlElement,
-    ...restProps
-}: TitleSubsectionProps) => {
+export const TitleSubsection = ({ children, className = "", useHtmlElement, ...restProps }: TitleSubsectionProps) => {
     const childrenArray = React.Children.toArray(children);
     const defaultHtmlElement = childrenArray.length === 1 && typeof childrenArray[0] === "string" ? "h3" : "div";
-    const titleElement = useHtmlElement??defaultHtmlElement;
+    const titleElement = useHtmlElement ?? defaultHtmlElement;
 
     return React.createElement(
         titleElement,
@@ -26,6 +22,6 @@ export const TitleSubsection = ({
         },
         children
     );
-}
+};
 
 export default TitleSubsection;