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

package/src/components/Tabs/TabPanel.tsx

@@ -1,33 +1,28 @@
 import React from "react";
 import { Classes } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Addicional CSS class name.
      */
-    className?: string,
+    className?: string;
     /**
      * `id` of the tab element that is connected to this panel content.
      */
-    labelledBy?: string,
+    labelledBy?: string;
     /**
      * Tab panel is not displayed.
      */
-    hidden?: boolean,
+    hidden?: boolean;
 }
 
 /**
  * Element to display the content related to a tab.
  * This could be used if `<Tabs />` is used in uncontrolled mode.
  */
-export const TabPanel = ({
-    children,
-    className = "",
-    labelledBy,
-    hidden = false,
-    ...otherDivProps
-}: TabPanelProps) => {
+export const TabPanel = ({ children, className = "", labelledBy, hidden = false, ...otherDivProps }: TabPanelProps) => {
     return (
         <div
             {...otherDivProps}
@@ -35,9 +30,9 @@ export const TabPanel = ({
             aria-labelledby={labelledBy}
             aria-hidden={hidden}
         >
-            { children }
+            {children}
         </div>
-    )
-}
+    );
+};
 
 export default TabPanel;

package/src/components/Tabs/TabTitle.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Button from "../Button/Button";
 
@@ -43,9 +44,9 @@ export const TabTitle = ({
     tooltip,
     titlePrefix,
     titleSuffix,
-    large=false,
-    small=false,
-    disabled=false,
+    large = false,
+    small = false,
+    disabled = false,
 }: TabTitleProps) => {
     return (
         <Button
@@ -55,7 +56,7 @@ export const TabTitle = ({
             text={text}
             tooltip={disabled ? undefined : tooltip}
             tooltipProps={{
-                rootBoundary: "viewport"
+                rootBoundary: "viewport",
             }}
             icon={<>{titlePrefix}</>}
             rightIcon={<>{titleSuffix}</>}

package/src/components/Tabs/Tabs.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import {
-    Tabs as BlueprintTabs,
-    TabsProps as BlueprintTabsProps,
-} from "@blueprintjs/core";
+import React from "react";
+import { Tabs as BlueprintTabs, TabsProps as BlueprintTabsProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
 import Tab, { TabProps, transformTabProperties } from "./Tab";
 
-export interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
+export interface TabsProps extends TestableComponent, Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
     children?: React.ReactNode;
     /**
      * Data structure containing all tabs, including their titles and content panels.
@@ -18,36 +18,48 @@ export interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large"
      * Otherwise they will be shrinked if not enough space.
      */
     allowScrollbars?: boolean;
+    /**
+     * If set then a `div` element is used as wrapper.
+     * It uses the attributes given via this property.
+     */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
-export const Tabs = (
-    {
-        tabs=[],
-        children,
-        className = "",
-        allowScrollbars,
-        ...restProps
-    }: TabsProps) => {
-
-    return (
+export const Tabs = ({
+    tabs = [],
+    children,
+    className = "",
+    allowScrollbars,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
+    wrapperProps,
+    ...restProps
+}: TabsProps) => {
+    const tabsContent = (
         <BlueprintTabs
-            className={
-                className +
-                ` ${eccgui}-tabs` +
-                (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")
-            }
+            className={className + ` ${eccgui}-tabs` + (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")}
             {...restProps}
             animate={false}
         >
-            {!!tabs ? (
-                tabs.map(tab => {
-                    return <Tab {...transformTabProperties(tab)} />;
-                })
-            ) : (
-                children
-            )}
+            {tabs
+                ? tabs.map((tab) => {
+                      return <Tab {...transformTabProperties(tab)} />;
+                  })
+                : children}
         </BlueprintTabs>
     );
+
+    return wrapperProps || dataTestId || dataTestid ? (
+        <div
+            className={`${eccgui}-tabs__wrapper`}
+            {...(wrapperProps ?? {})}
+            {...{ "data-test-id": dataTestId, "data-testid": dataTestid }}
+        >
+            {tabsContent}
+        </div>
+    ) : (
+        <>{tabsContent}</>
+    );
 };
 
 export default Tabs;

package/src/components/Tabs/stories/Tab.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Tabs, Tab as TabDummyForStorybook } from "./../../../../";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Tab as TabDummyForStorybook, Tabs } from "./../../../../";
 
 export default {
     title: "Components/Tabs",
@@ -13,22 +14,15 @@ export default {
 } as ComponentMeta<typeof TabDummyForStorybook>;
 
 const Tab = (args) => {
-    return (
-        <Tabs
-            id="titledemo"
-            tabs={[args]}
-        />
-    )
-}
+    return <Tabs id="titledemo" tabs={[args]} />;
+};
 
-const TemplateFull: ComponentStory<typeof TabDummyForStorybook> = (args) => (
-    <Tab {...args} />
-);
+const TemplateFull: ComponentStory<typeof TabDummyForStorybook> = (args) => <Tab {...args} />;
 
 export const TabElement = TemplateFull.bind({});
 TabElement.args = {
     id: "tabtest",
     title: "Tab title",
     dontShrink: false,
-    panel: <div>Test panel content.</div>
+    panel: <div>Test panel content.</div>,
 };

package/src/components/Tabs/stories/TabPanel.stories.tsx

@@ -1,21 +1,19 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { TabPanel } from "./../../../";
 
 export default {
     title: "Components/Tabs",
     component: TabPanel,
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<typeof TabPanel>;
 
-const TemplateFull: ComponentStory<typeof TabPanel> = (args) => (
-    <TabPanel {...args} />
-);
+const TemplateFull: ComponentStory<typeof TabPanel> = (args) => <TabPanel {...args} />;
 
 export const TabPanelElement = TemplateFull.bind({});
 TabPanelElement.args = {
     children: <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />,
-    hidden: false
+    hidden: false,
 };

package/src/components/Tabs/stories/TabTitle.stories.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
 
 export default {
     title: "Components/Tabs",
     component: TabTitleOrg,
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<typeof TabTitleOrg>;
 
 const TabTitle = (args) => {
@@ -16,16 +16,14 @@ const TabTitle = (args) => {
             tabs={[
                 {
                     id: "titlesimple",
-                    title: <TabTitleOrg {...args} />
-                }
+                    title: <TabTitleOrg {...args} />,
+                },
             ]}
         />
-    )
-}
+    );
+};
 
-const TemplateFull: ComponentStory<typeof TabTitleOrg> = (args) => (
-    <TabTitle {...args} />
-);
+const TemplateFull: ComponentStory<typeof TabTitleOrg> = (args) => <TabTitle {...args} />;
 
 export const TabTitleElement = TemplateFull.bind({});
 TabTitleElement.args = {

package/src/components/Tabs/stories/Tabs.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { Tabs, TabTitle } from "./../../../";
 
 export default {
@@ -22,9 +23,7 @@ export default {
     },
 } as ComponentMeta<typeof Tabs>;
 
-const TemplateFull: ComponentStory<typeof Tabs> = (args) => (
-    <Tabs {...args} />
-);
+const TemplateFull: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
 
 export const TabsContainerUncontrolled = TemplateFull.bind({});
 TabsContainerUncontrolled.args = {
@@ -44,8 +43,8 @@ TabsContainerUncontrolled.args = {
             id: "storytab3",
             title: <TabTitle text="Tab title 3" tooltip="Tab tooltip 3" />,
             panel: <div>Tab content 3</div>,
-        }
-    ]
+        },
+    ],
 };
 
 /*

package/src/components/Tabs/tabs.scss

@@ -13,10 +13,10 @@ $tab-indicator-width: 3px !default;
 */
 
 .#{$ns}-tab-list {
-    border-bottom: solid 1px $pt-divider-black;
+    column-gap: $eccgui-size-block-whitespace * 0.25;
     max-width: 100%;
     overflow: auto;
-    column-gap: $eccgui-size-block-whitespace * 0.25;
+    border-bottom: solid 1px $pt-divider-black;
 
     & > *:not(:last-child) {
         margin-right: 0;
@@ -24,8 +24,8 @@ $tab-indicator-width: 3px !default;
 }
 
 .#{$ns}-tab {
-    outline: none;
     max-width: 50%;
+    outline: none;
 
     .#{$ns}-tabs:not(.#{$eccgui}-tabs--scrollablelist) > .#{$ns}-tab-list > & {
         flex-shrink: 1;
@@ -33,22 +33,25 @@ $tab-indicator-width: 3px !default;
     }
 
     & > .#{$ns}-button, // normal button
-    & > span > span > .#{$ns}-button { // button with tooltip
-        outline: none;
-        margin-bottom: $tab-indicator-width;
-        max-width: 15rem;
+    & > span > span > .#{$ns}-button {
+        // button with tooltip
         width: 100%;
+        max-width: 15rem;
+        margin-bottom: $tab-indicator-width;
         color: inherit;
         border-radius: 0;
+        outline: none;
 
         .#{$ns}-button-text {
-            white-space: nowrap;
             overflow-x: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
+
             //min-width: 6em;
         }
 
-        &::before, & > *:not(:last-child) {
+        &::before,
+        & > *:not(:last-child) {
             margin-right: $eccgui-size-block-whitespace * 0.25;
         }
     }
@@ -57,12 +60,13 @@ $tab-indicator-width: 3px !default;
     &:hover {
         & > .#{$ns}-button,
         & > span > span > span > .#{$ns}-button {
-            background: $minimal-button-background-color-hover;
             color: inherit;
+            background: $minimal-button-background-color-hover;
         }
     }
 }
 
-.#{$eccgui}-tab__panel, .#{$ns}-tab-panel {
+.#{$eccgui}-tab__panel,
+.#{$ns}-tab-panel {
     margin-top: $eccgui-size-block-whitespace;
 }

package/src/components/Tag/Tag.tsx

@@ -1,30 +1,21 @@
-import React from 'react';
-import {
-    Tag as BlueprintTag,
-    TagProps as BlueprintTagProps
-} from "@blueprintjs/core";
+import React from "react";
+import { Tag as BlueprintTag, TagProps as BlueprintTagProps } from "@blueprintjs/core";
 import Color from "color";
+
+import { intentClassName, IntentTypes } from "../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon, { IconProps } from "../Icon/Icon";
 import { TestIconProps } from "../Icon/TestIcon";
-import { ValidIconName } from "../Icon/canonicalIconNames";
-import {
-    IntentTypes,
-    intentClassName
-} from "../../common/Intent";
+
 import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface TagProps extends Omit<
-    BlueprintTagProps,
-    // currently not supported
-    "active" |
-    "fill" |
-    "icon" |
-    "intent" |
-    "large" |
-    "multiline" |
-    "rightIcon"
-> {
+export interface TagProps
+    extends Omit<
+        BlueprintTagProps,
+        // currently not supported
+        "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"
+    > {
     // own properties
 
     /**
@@ -68,7 +59,7 @@ export interface TagProps extends Omit<
 
 function Tag({
     children,
-    className = '',
+    className = "",
     intent,
     icon,
     emphasis = "normal",
@@ -78,41 +69,41 @@ function Tag({
     backgroundColor,
     ...otherProps
 }: TagProps) {
-    otherProps['interactive'] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
-    if (!!backgroundColor) {
+    otherProps["interactive"] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
+    if (backgroundColor) {
         const additionalStyles = otherProps.style ?? {};
-        let color = Color("#ffffff")
+        let color = Color("#ffffff");
         try {
             color = Color(backgroundColor);
-        } catch(ex) {
-            console.warn("Received invalid background color for tag: " + backgroundColor)
+        } catch (ex) {
+            console.warn("Received invalid background color for tag: " + backgroundColor);
         }
 
-        otherProps['style'] = {
+        otherProps["style"] = {
             ...additionalStyles,
             ...{
                 backgroundColor: color.rgb().toString(),
-                color: decideContrastColorValue({testColor: color}),
-            }
-        }
+                color: decideContrastColorValue({ testColor: color }),
+            },
+        };
     }
-    const leftIcon = (!!icon && typeof icon === "string") ? <Icon name={icon} /> : icon;
+    const leftIcon = !!icon && typeof icon === "string" ? <Icon name={icon} /> : icon;
     return (
         <BlueprintTag
             {...otherProps}
             className={
                 `${eccgui}-tag__item ${eccgui}-tag--${emphasis}emphasis` +
-                (!!intent ? ` ${intentClassName(intent)}` : '') +
-                (small ? ` ${eccgui}-tag--small` : '') +
-                (large ? ` ${eccgui}-tag--large` : '') +
-                (className ? ' ' + className : '')
+                (intent ? ` ${intentClassName(intent)}` : "") +
+                (small ? ` ${eccgui}-tag--small` : "") +
+                (large ? ` ${eccgui}-tag--large` : "") +
+                (className ? " " + className : "")
             }
             minimal={minimal}
-            icon={!!leftIcon ? React.cloneElement(leftIcon, { small: !large}) : undefined}
+            icon={leftIcon ? React.cloneElement(leftIcon, { small: !large }) : undefined}
         >
             {children}
         </BlueprintTag>
     );
-};
+}
 
 export default Tag;

package/src/components/Tag/TagList.tsx

@@ -1,54 +1,34 @@
-import React from 'react';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface TagListProps extends React.HTMLAttributes<HTMLUListElement> {
     label?: string;
 }
 
-function TagList({
-    children,
-    className = '',
-    label = '',
-    ...otherProps
-}: TagListProps) {
-
+function TagList({ children, className = "", label = "", ...otherProps }: TagListProps) {
     const tagList = (
-        <ul
-            className={
-                `${eccgui}-tag__list` +
-                ((className && !label) ? ' ' + className : '')
-            }
-            {...otherProps}
-        >
-            {
-                React.Children.map(children, (child, i) => {
-                    return <li className={`${eccgui}-tag__list-item`} key={'tagitem_'+i}>
+        <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
+            {React.Children.map(children, (child, i) => {
+                return (
+                    <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
                         {child}
                     </li>
-                })
-            }
+                );
+            })}
         </ul>
     );
 
     if (label) {
         return (
-            <div
-                className={
-                    `${eccgui}-tag__list-wrapper` +
-                    (className ? ' ' + className : '')
-                }
-            >
-                <strong className={`${eccgui}-tag__list-label`}>
-                    {label}
-                </strong>
-                <span className={`${eccgui}-tag__list-content`}>
-                    {tagList}
-                </span>
+            <div className={`${eccgui}-tag__list-wrapper` + (className ? " " + className : "")}>
+                <strong className={`${eccgui}-tag__list-label`}>{label}</strong>
+                <span className={`${eccgui}-tag__list-content`}>{tagList}</span>
             </div>
         );
     }
 
     return tagList;
-};
+}
 
 export default TagList;

package/src/components/Tag/stories/Tag.stories.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Tag } from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
+import { Tag } from "./../../../../index";
+
 export default {
     title: "Components/Tag",
     component: Tag,
@@ -26,9 +28,7 @@ export default {
     },
 } as ComponentMeta<typeof Tag>;
 
-const Template: ComponentStory<typeof Tag> = (args) => (
-  <Tag {...args} />
-);
+const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/Tag/stories/TagList.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TagList, Tag } from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Tag, TagList } from "./../../../../index";
 
 export default {
     title: "Components/Tag",
@@ -12,17 +13,10 @@ export default {
     },
 } as ComponentMeta<typeof TagList>;
 
-const Template: ComponentStory<typeof TagList> = (args) => (
-  <TagList {...args} />
-);
+const Template: ComponentStory<typeof TagList> = (args) => <TagList {...args} />;
 
 export const List = Template.bind({});
 List.args = {
     label: "Tag list",
-    children: [
-        <Tag>Short</Tag>,
-        <Tag>List</Tag>,
-        <Tag>Of</Tag>,
-        <Tag>Tags</Tag>,
-    ]
+    children: [<Tag>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
 };