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

package/src/components/Grid/Grid.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 // @ts-ignore // FlexGrid is not part of @types/carbon-components-react
 import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns" | "narrow" | "as"> {
@@ -9,21 +10,21 @@ export interface GridProps extends Omit<GridDefaultProps, "fullWidth" | "columns
      * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.
      * This property can be set for multiple rows, then they share the available vertical space regarding their content.
      */
-    verticalStretchable?: boolean
+    verticalStretchable?: boolean;
     /**
      * Use the exact space defined by the parent element.
      * This parent element must be displayed using a fixed, relative or absolute position.
      */
-    useAbsoluteSpace?: boolean
+    useAbsoluteSpace?: boolean;
     /**
      * Provide a HTML element name to render instead of the default `div`.
      */
-    as?: "article" | "section" | "div"
+    as?: "article" | "section" | "div";
     /**
      * @deprecated
      * This is set always by default.
      */
-    fullWidth?: boolean
+    fullWidth?: boolean;
 }
 
 /**
@@ -35,7 +36,7 @@ export const Grid = ({
     children,
     verticalStretchable = false,
     useAbsoluteSpace = false,
-    className = '',
+    className = "",
     ...restProps
 }: GridProps) => {
     return (
@@ -43,15 +44,15 @@ export const Grid = ({
             {...restProps}
             className={
                 `${eccgui}-grid` +
-                (!!verticalStretchable ? ` ${eccgui}-grid--stretchable` : "") +
-                (!!useAbsoluteSpace ? ` ${eccgui}-grid--absolutespace` : "") +
+                (verticalStretchable ? ` ${eccgui}-grid--stretchable` : "") +
+                (useAbsoluteSpace ? ` ${eccgui}-grid--absolutespace` : "") +
                 (className ? " " + className : "")
             }
             fullWidth={true}
         >
-            { children }
+            {children}
         </CarbonGrid>
-    )
-}
+    );
+};
 
 export default Grid;

package/src/components/Grid/GridRow.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 // import PropTypes from 'prop-types';
 import { Row as CarbonRow, RowDefaultProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
@@ -8,18 +9,18 @@ export interface GridRowProps extends Omit<RowDefaultProps, "narrow"> {
      * Do not wrap column children when there is not enough space available.
      * This only works for grids on medium sized and larger viewports.
      */
-    dontWrapColumns?: boolean
+    dontWrapColumns?: boolean;
     /**
      * Row uses maximum height of the workview.
      */
-    fullHeight?: boolean
+    fullHeight?: boolean;
     /**
      * When a row is vertically stretched then it uses the remaining spcae on the y-axis.
      * Option can be used on multiple rows, then they share the available space.
      * This makes only sense if the grid height is set by additional styles or properties.
      * The grid must be set to `verticalStretchable=true`.
      */
-    verticalStretched?: boolean
+    verticalStretched?: boolean;
 }
 
 /**
@@ -47,6 +48,6 @@ export const GridRow = ({
             {children}
         </CarbonRow>
     );
-}
+};
 
 export default GridRow;

package/src/components/Grid/grid.scss

@@ -5,19 +5,20 @@ $eccgui-size-grid-gutter: $eccgui-size-block-whitespace !default;
 
 // overwrite lib vars
 $grid-gutter: rem($eccgui-size-grid-gutter);
+
 // load grid
 @import "~@carbon/styles/scss/grid/flexbox";
 
 // adjustments
 
 .#{$prefix}--grid {
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
 }
 
 .#{$prefix}--grid--full-width {
-    max-width: 100%;
     width: 100%;
+    max-width: 100%;
 }
 
 .#{$eccgui}-grid--stretchable {
@@ -33,16 +34,13 @@ $grid-gutter: rem($eccgui-size-grid-gutter);
 
 .#{$eccgui}-grid--absolutespace {
     position: absolute;
-    top: 0;
-    left: 0.5 * $eccgui-size-grid-gutter;;
-    right: 0.5 * $eccgui-size-grid-gutter;;
-    bottom: 0;
+    inset: 0 0.5 * $eccgui-size-grid-gutter 0 0.5 * $eccgui-size-grid-gutter;
 }
 
 .#{$prefix}--row {
     flex-wrap: wrap;
-    margin-left: -0.5 * $eccgui-size-grid-gutter;;
-    margin-right: -0.5 * $eccgui-size-grid-gutter;;
+    margin-right: -0.5 * $eccgui-size-grid-gutter;
+    margin-left: -0.5 * $eccgui-size-grid-gutter;
 }
 
 .#{$eccgui}-grid__row--fullheight {
@@ -54,7 +52,6 @@ $grid-gutter: rem($eccgui-size-grid-gutter);
 }
 
 .#{$eccgui}-grid__row--stretched {
-
     .#{$eccgui}-grid--stretchable > & {
         flex-grow: 1;
         flex-shrink: 1;
@@ -71,8 +68,8 @@ $grid-gutter: rem($eccgui-size-grid-gutter);
         @see https://css-tricks.com/flexbox-truncated-text/
     */
     min-width: 0;
-    padding-left: 0.5 * $eccgui-size-grid-gutter;;
-    padding-right: 0.5 * $eccgui-size-grid-gutter;;
+    padding-right: 0.5 * $eccgui-size-grid-gutter;
+    padding-left: 0.5 * $eccgui-size-grid-gutter;
 }
 
 .#{$eccgui}-grid__column {
@@ -84,7 +81,8 @@ $grid-gutter: rem($eccgui-size-grid-gutter);
 }
 
 .#{$eccgui}-grid__row--dontwrapcolumns {
-     @media (min-width: 42rem) { // Carbon breakpoint for medium viewports
-         flex-wrap: nowrap;
-     }
+    @media (width >= 42rem) {
+        // Carbon breakpoint for medium viewports
+        flex-wrap: nowrap;
+    }
 }

package/src/components/Grid/stories/Grid.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Grid, GridRow, GridColumn } from "../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Grid, GridColumn, GridRow } from "../../../../index";
+
 import { Default as RowExample } from "./GridRow.stories";
 
 export default {
@@ -10,12 +12,12 @@ export default {
     argTypes: {
         children: {
             control: "none",
-        }
+        },
     },
 } as ComponentMeta<typeof Grid>;
 
 const Template: ComponentStory<typeof Grid> = (args) => (
-    <div style={{ minHeight: "30vh", position: "relative"}}>
+    <div style={{ minHeight: "30vh", position: "relative" }}>
         <Grid {...args} />
     </div>
 );
@@ -24,4 +26,4 @@ export const Default = Template.bind({});
 Default.args = {
     children: <GridRow {...RowExample.args} verticalStretched />,
     verticalStretchable: true,
-}
+};

package/src/components/Grid/stories/GridColumn.stories.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
-import { Grid, GridRow, GridColumn, HtmlContentBlock } from "../../../../index";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../../index";
 
 export default {
     title: "Components/Grid/Column",
@@ -9,7 +10,7 @@ export default {
     argTypes: {
         children: {
             control: "none",
-        }
+        },
     },
 } as ComponentMeta<typeof GridColumn>;
 
@@ -29,7 +30,7 @@ Default.args = {
             <LoremIpsum p={2} avgSentencesPerParagraph={3} random={false} />
         </HtmlContentBlock>
     ),
-}
+};
 
 const otherColumn = (
     <GridColumn>
@@ -38,7 +39,7 @@ const otherColumn = (
             <LoremIpsum p={3} avgSentencesPerParagraph={2} random={false} />
         </HtmlContentBlock>
     </GridColumn>
-)
+);
 
 const TemplateWidths: ComponentStory<typeof GridColumn> = (args) => (
     <Grid>
@@ -47,20 +48,20 @@ const TemplateWidths: ComponentStory<typeof GridColumn> = (args) => (
         </GridRow>
         <GridRow>
             <GridColumn {...args} />
-            { otherColumn }
+            {otherColumn}
         </GridRow>
         <GridRow>
             <GridColumn {...args} medium />
-            { otherColumn }
+            {otherColumn}
         </GridRow>
         <GridRow>
             <GridColumn {...args} small />
-            { otherColumn }
+            {otherColumn}
         </GridRow>
     </Grid>
 );
 
 export const Widths = TemplateWidths.bind({});
 Widths.args = {
-    ...Default.args
-}
+    ...Default.args,
+};

package/src/components/Grid/stories/GridRow.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Grid, GridRow, GridColumn } from "../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Grid, GridColumn, GridRow } from "../../../../index";
+
 import { Default as ColumnExample } from "./GridColumn.stories";
 
 export default {
@@ -9,12 +11,12 @@ export default {
     argTypes: {
         children: {
             control: "none",
-        }
+        },
     },
 } as ComponentMeta<typeof GridRow>;
 
 const Template: ComponentStory<typeof GridRow> = (args) => (
-    <Grid style={{minHeight: "30vh"}} verticalStretchable>
+    <Grid style={{ minHeight: "30vh" }} verticalStretchable>
         <GridRow {...args} />
     </Grid>
 );
@@ -22,10 +24,10 @@ const Template: ComponentStory<typeof GridRow> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
     children: <GridColumn {...ColumnExample.args} verticalAlign="center" />,
-}
+};
 
 const TemplateStretched: ComponentStory<typeof GridRow> = (args) => (
-    <Grid style={{minHeight: "50vh"}} verticalStretchable>
+    <Grid style={{ minHeight: "50vh" }} verticalStretchable>
         <GridRow {...args}>
             <GridColumn>Top row.</GridColumn>
         </GridRow>
@@ -43,5 +45,5 @@ const TemplateStretched: ComponentStory<typeof GridRow> = (args) => (
 
 export const VerticalStretched = TemplateStretched.bind({});
 VerticalStretched.args = {
-    ...Default.args
-}
+    ...Default.args,
+};

package/src/components/HoverToggler/HoverToggler.stories.tsx

@@ -1,20 +1,24 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { HoverToggler } from "./../../index";
 
 export default {
     title: "Components/HoverToggler",
     component: HoverToggler,
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<typeof HoverToggler>;
 
-const Template: ComponentStory<typeof HoverToggler> = (args) => (
-    <HoverToggler {...args} style={{height: "auto"}} />
-);
+const Template: ComponentStory<typeof HoverToggler> = (args) => <HoverToggler {...args} style={{ height: "auto" }} />;
 
 export const Default = Template.bind({});
 Default.args = {
     baseContent: "Base content.",
-    hoverContent: <>Content<br/>on <a href="#">hover</a>.</>
+    hoverContent: (
+        <>
+            Content
+            <br />
+            on <a href="#">hover</a>.
+        </>
+    ),
 };

package/src/components/HoverToggler/HoverToggler.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface HoverTogglerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -33,28 +34,25 @@ export const HoverToggler = ({
     style,
     ...otherProps
 }: HoverTogglerProps) => {
-    return (<div
-        className={
-            `${eccgui}-hovertoggler__wrapper` +
-            (inline ? ` ${eccgui}-hovertoggler--inline` : "")
-        }
-        style={style}
-    >
+    return (
         <div
-            className={
-                `${eccgui}-hovertoggler` +
-                (className ? ` ${className}` : "")
-            }
-            {...otherProps}
+            className={`${eccgui}-hovertoggler__wrapper` + (inline ? ` ${eccgui}-hovertoggler--inline` : "")}
+            style={style}
         >
-            <div className={`${eccgui}-hovertoggler__basecontent`}>
-                <div className={`${eccgui}-hovertoggler__wrappercontent`} {...baseContentProps}>{ baseContent }</div>
-            </div>
-            <div className={`${eccgui}-hovertoggler__hovercontent`}>
-                <div tabIndex={0} className={`${eccgui}-hovertoggler__wrappercontent`} {...hoverContentProps}>{ hoverContent }</div>
+            <div className={`${eccgui}-hovertoggler` + (className ? ` ${className}` : "")} {...otherProps}>
+                <div className={`${eccgui}-hovertoggler__basecontent`}>
+                    <div className={`${eccgui}-hovertoggler__wrappercontent`} {...baseContentProps}>
+                        {baseContent}
+                    </div>
+                </div>
+                <div className={`${eccgui}-hovertoggler__hovercontent`}>
+                    <div tabIndex={0} className={`${eccgui}-hovertoggler__wrappercontent`} {...hoverContentProps}>
+                        {hoverContent}
+                    </div>
+                </div>
             </div>
         </div>
-    </div>);
-}
+    );
+};
 
 export default HoverToggler;

package/src/components/HoverToggler/hovertoggler.scss

@@ -1,9 +1,9 @@
 .#{$eccgui}-hovertoggler__wrapper {
-    width: 100%;
-    overflow: hidden;
     display: flex;
-    justify-content: flex-start;
     align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    overflow: hidden;
 }
 
 .#{$eccgui}-hovertoggler--inline {
@@ -13,10 +13,10 @@
 
 .#{$eccgui}-hovertoggler {
     display: flex;
-    width: 200%;
-    justify-content: flex-start;
-    align-items: stretch;
     flex-shrink: 0;
+    align-items: stretch;
+    justify-content: flex-start;
+    width: 200%;
 
     .#{$eccgui}-hovertoggler--inline > & {
         display: inline-flex;
@@ -25,14 +25,14 @@
 
 .#{$eccgui}-hovertoggler__basecontent,
 .#{$eccgui}-hovertoggler__hovercontent {
-    overflow: hidden;
-    order: 1;
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
-    width: 50%;
-    display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    order: 1;
+    width: 50%;
+    overflow: hidden;
 }
 
 .#{$eccgui}-hovertoggler__hovercontent {

package/src/components/Icon/Icon.tsx

@@ -1,13 +1,14 @@
 import React from "react";
+
 import BaseIcon, { BaseIconProps } from "./BaseIcon";
-import canonicalIcons, { CarbonIconType, ValidIconName } from "./canonicalIconNames"
+import canonicalIcons, { CarbonIconType, ValidIconName } from "./canonicalIconNames";
 
 export interface IconProps extends Omit<BaseIconProps, "iconComponent"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
      */
-    name: ValidIconName | string[],
+    name: ValidIconName | string[];
 }
 
 /** Returns the first icon that exists or the fallback icon. */
@@ -20,7 +21,7 @@ const findExistingIcon = (
     } else {
         return canonicalIcons[findExistingIconName(iconName)];
     }
-}
+};
 
 /**
  * Returns the first icon name that exists or the fallback icon name.
@@ -33,27 +34,24 @@ export const findExistingIconName = (
     let foundIconName: string = fallbackIconName;
     const iconNameStack = [...iconNames];
     while (foundIconName === fallbackIconName && iconNameStack.length > 0) {
-        let iconNameToTest = iconNameStack.shift();
+        const iconNameToTest = iconNameStack.shift();
         if (iconNameToTest && (canonicalIcons as any)[iconNameToTest] != null) {
             foundIconName = iconNameToTest;
         }
     }
     return foundIconName as ValidIconName;
-}
+};
 
 export const iconUtils = {
-    findExistingIconName
-}
+    findExistingIconName,
+};
 
 /**
  * The icon provides a graphical symbol that is specified by a canonical name.
  * This name is hard-coded to force a homegenous usage of the [Carbon icon library](https://carbondesignsystem.com/guidelines/icons/library).
  */
-export const Icon = ({
-    name,
-    ...otherBaseIconProps
-}: IconProps) => {
-    return <BaseIcon iconComponent={findExistingIcon(name)} {...otherBaseIconProps} />
-}
+export const Icon = ({ name, ...otherBaseIconProps }: IconProps) => {
+    return <BaseIcon iconComponent={findExistingIcon(name)} {...otherBaseIconProps} />;
+};
 
 export default Icon;

package/src/components/Icon/IconButton.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Button, { AnchorOrButtonProps, ButtonProps } from "../Button/Button";
+import Button, { ButtonProps } from "../Button/Button";
 
 import { ValidIconName } from "./canonicalIconNames";
-import Icon from "./Icon";
+import Icon, { IconProps } from "./Icon";
 import { TestIconProps } from "./TestIcon";
 
-interface ExtendedButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+interface ExtendedButtonProps
+    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.
@@ -33,7 +34,7 @@ interface ExtendedButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "
     minimal?: boolean;
 }
 
-export type IconButtonProps = ExtendedButtonProps & AnchorOrButtonProps;
+export type IconButtonProps = ExtendedButtonProps;
 
 /** A button with an icon instead of text. */
 export const IconButton = ({
@@ -70,7 +71,7 @@ export const IconButton = ({
             {...restProps}
             icon={
                 typeof name === "string" || Array.isArray(name) ? (
-                    <Icon name={name} {...iconProps} />
+                    <Icon name={name as IconProps["name"]} {...iconProps} />
                 ) : (
                     React.cloneElement(name, iconProps)
                 )

package/src/components/Icon/icon.scss

@@ -16,12 +16,12 @@
 }
 
 svg.#{$eccgui}-icon {
-    max-width: none;
-    flex-shrink: 0;
     flex-grow: 0;
+    flex-shrink: 0;
+    max-width: none;
 
     &:not([fill]) {
-        fill: currentColor;
+        fill: currentcolor;
     }
 }
 
@@ -54,7 +54,10 @@ svg.#{$eccgui}-icon {
 .#{$eccgui}-menu__item {
     .#{$eccgui}-button--icon,
     .#{$eccgui}-button--icon:not([class*="#{$ns}-intent-"]) {
-        &, &:hover, &:focus, &:active {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
             color: inherit;
         }
     }

package/src/components/Icon/stories/Icon.stories.tsx

@@ -1,8 +1,9 @@
 import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { Button, Icon } from "../../../../index";
 import { Definitions } from "../../../common/Intent";
-import { Button, Icon } from "../../../index";
 
 import canonicalIcons, { ValidIconName } from "./../canonicalIconNames";
 
@@ -21,7 +22,11 @@ export default {
     },
 } as Meta<typeof Icon>;
 
-const Template: StoryFn<typeof Icon> = (args) => <Icon {...args} tooltipText={args.name?.toString()} />;
+const Template: StoryFn<typeof Icon> = (args) => (
+    <OverlaysProvider>
+        <Icon {...args} tooltipText={args.name?.toString()} />
+    </OverlaysProvider>
+);
 
 export const Default = Template.bind({});
 Default.args = {
@@ -29,11 +34,11 @@ Default.args = {
 };
 
 const TemplateSizes: StoryFn<typeof Icon> = (args) => (
-    <>
+    <OverlaysProvider>
         <Icon {...args} small />
         <Icon {...args} />
         <Icon {...args} large />
-    </>
+    </OverlaysProvider>
 );
 
 export const IconSizes = TemplateSizes.bind({});
@@ -43,10 +48,10 @@ IconSizes.args = {
 
 export const IconsOverview = () => {
     return (
-        <>
+        <OverlaysProvider>
             {Object.keys(canonicalIcons).map((iconName) => {
-                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} />;
+                return <Button icon={iconName as ValidIconName} outlined large tooltip={iconName} key={iconName} />;
             })}
-        </>
+        </OverlaysProvider>
     );
 };

package/src/components/Icon/stories/IconButton.stories.tsx

@@ -1,7 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
-import { IconButton,TestIcon } from "../../../index";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { IconButton, TestIcon } from "../../../../index";
+
 import canonicalIcons from "./../canonicalIconNames";
 
 export default {
@@ -11,24 +14,23 @@ export default {
         text: { control: "text" },
         name: {
             control: "select",
-            options: [
-            "Test icon",
-                ...(Object.keys(canonicalIcons)),
-            ],
+            options: ["Test icon", ...Object.keys(canonicalIcons)],
             mapping: {
-            "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon"/>,
-                ...(Object.keys(canonicalIcons)),
-            }
+                "Test icon": <TestIcon tryout={LogoReact} className="testclass-icon" />,
+                ...Object.keys(canonicalIcons),
+            },
         },
     },
-} as ComponentMeta<typeof IconButton>;
+} as Meta<typeof IconButton>;
 
-const Template: ComponentStory<typeof IconButton> = (args) => (
-    <IconButton {...args} />
+const Template: StoryFn<typeof IconButton> = (args) => (
+    <OverlaysProvider>
+        <IconButton {...args} />
+    </OverlaysProvider>
 );
 
 export const Default = Template.bind({});
 Default.args = {
     name: "item-moremenu",
-    text: "Tooltip text"
-}
+    text: "Tooltip text",
+};