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

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;

package/src/components/Structure/_titles.scss

@@ -2,12 +2,10 @@ $eccgui-size-typo-title-page: $eccgui-size-typo-title !default;
 $eccgui-size-typo-title-page-lineheight: $eccgui-size-typo-title-lineheight !default;
 $eccgui-font-weight-title-page: $eccgui-font-weight-bold !default;
 $eccgui-font-spacing-title-page: $eccgui-font-spacing-condensed !default;
-
 $eccgui-size-typo-title-mainsection: $eccgui-size-typo-title-page !default;
 $eccgui-size-typo-title-mainsection-lineheight: $eccgui-size-typo-title-page-lineheight !default;
 $eccgui-font-weight-title-mainsection: $eccgui-font-weight-regular !default;
 $eccgui-font-spacing-title-mainsection: $eccgui-font-spacing-regular !default;
-
 $eccgui-size-typo-title-subsection: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-title-subsection-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-font-weight-title-subsection: $eccgui-font-weight-bold !default;
@@ -15,8 +13,8 @@ $eccgui-font-spacing-title-subsection: $eccgui-font-spacing-wide !default;
 
 .#{$eccgui}-structure__title-page {
     font-size: $eccgui-size-typo-title-page;
-    line-height: $eccgui-size-typo-title-page-lineheight;
     font-weight: $eccgui-font-weight-title-page;
+    line-height: $eccgui-size-typo-title-page-lineheight;
     letter-spacing: $eccgui-font-spacing-title-page;
 
     & > * {
@@ -27,8 +25,8 @@ $eccgui-font-spacing-title-subsection: $eccgui-font-spacing-wide !default;
 
 .#{$eccgui}-structure__title-mainsection {
     font-size: $eccgui-size-typo-title-mainsection;
-    line-height: $eccgui-size-typo-title-mainsection-lineheight;
     font-weight: $eccgui-font-weight-title-mainsection;
+    line-height: $eccgui-size-typo-title-mainsection-lineheight;
     letter-spacing: $eccgui-font-spacing-title-mainsection;
 
     & > * {
@@ -39,8 +37,8 @@ $eccgui-font-spacing-title-subsection: $eccgui-font-spacing-wide !default;
 
 .#{$eccgui}-structure__title-subsection {
     font-size: $eccgui-size-typo-title-subsection;
-    line-height: $eccgui-size-typo-title-subsection-lineheight;
     font-weight: $eccgui-font-weight-title-subsection;
+    line-height: $eccgui-size-typo-title-subsection-lineheight;
     text-transform: uppercase;
     letter-spacing: $eccgui-font-spacing-title-subsection;
 

package/src/components/Switch/Stories/Switch.stories.tsx

@@ -1,27 +1,25 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import Switch from '../Switch'
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import Switch from "../Switch";
 
 export default {
     title: "Forms/Switch",
     component: Switch,
-    argTypes: {
-    },
-} as ComponentMeta<typeof Switch>
+    argTypes: {},
+} as ComponentMeta<typeof Switch>;
 
-const Template: ComponentStory<typeof Switch> = (args) => (
-    <Switch {...args} />
-);
+const Template: ComponentStory<typeof Switch> = (args) => <Switch {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    label : "Switch label",
-    inline : true,
-}
+    label: "Switch label",
+    inline: true,
+};
 
 export const WithStateLabel = Template.bind({});
 WithStateLabel.args = {
     ...Default.args,
-    innerLabel : 'Off',
-    innerLabelChecked : "On"
-}
+    innerLabel: "Off",
+    innerLabelChecked: "On",
+};

package/src/components/Switch/Switch.tsx

@@ -1,32 +1,26 @@
-import React, {memo, SyntheticEvent} from 'react';
-import {
-    Switch as BlueprintSwitch,
-    SwitchProps as BlueprintSwitchProps,
-} from "@blueprintjs/core";
+import React, { memo, SyntheticEvent } from "react";
+import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any
+    onChange?: (value: boolean) => any;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({onChange, className, ...otherProps}: SwitchProps) => {
+export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
     const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked
+        const checked = !!(e as any).target?.checked;
         onChange && onChange(checked);
     };
 
-    return <BlueprintSwitch
-        className={`${eccgui}-switch ${className}`}
-        {...otherProps}
-        onChange={handleChange}
-    />
-}
+    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+};
 
 export default memo(Switch);

package/src/components/Table/Table.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import {
+    DataTableSize as CarbonDataTableSize,
     Table as CarbonTable,
     TableProps as CarbonTableProps,
-    DataTableSize as CarbonDataTableSize,
 } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated
 export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted;
 
-export interface TableProps extends Omit<
-    CarbonTableProps,
-    "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
->, React.TableHTMLAttributes<HTMLTableElement> {
+export interface TableProps
+    extends Omit<CarbonTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
+        React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Sets basically the height of a row inside the table.
      * Please use only `small`, `medium` and `large`.
@@ -40,13 +40,13 @@ export interface TableProps extends Omit<
 
 export const tableRowHeightSizes: Record<string, CarbonDataTableSize> = {
     // current values
-    "small": "xs",
-    "medium": "sm",
-    "large": "md",
+    small: "xs",
+    medium: "sm",
+    large: "md",
     // deprecated values
-    "compact": "xs",
-    "tall": "md",
-}
+    compact: "xs",
+    tall: "md",
+};
 
 export function Table({
     className = "",
@@ -57,12 +57,13 @@ export function Table({
     children,
     ...otherCarbonTableProps
 }: TableProps) {
-
-    let colLayout : boolean | JSX.Element = false;
+    let colLayout: boolean | JSX.Element = false;
     if (!!columnWidths && columnWidths.length > 0) {
         colLayout = (
             <colgroup className={`${eccgui}-simpletable__layout`}>
-                {columnWidths.map((width,i) => <col key={i} style={{ width }}/>)}
+                {columnWidths.map((width, i) => (
+                    <col key={i} style={{ width }} />
+                ))}
             </colgroup>
         );
     }
@@ -82,7 +83,7 @@ export function Table({
             {!!colLayout && colLayout}
             {children}
         </CarbonTable>
-    ) ;
+    );
 }
 
 export default Table;

package/src/components/Table/TableContainer.tsx

@@ -2,32 +2,28 @@ import React from "react";
 import {
     DataTable as CarbonDataTable,
     DataTableProps as CarbonDataTableProps,
-    TableContainerProps as CarbonTableContainerProps
+    TableContainerProps as CarbonTableContainerProps,
 } from "carbon-components-react";
-import { TableRowHeightSize,  tableRowHeightSizes } from "./Table";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface TableDataContainerProps extends Omit<
-    CarbonDataTableProps,
-    "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
->, React.TableHTMLAttributes<HTMLTableElement> {
+import { TableRowHeightSize, tableRowHeightSizes } from "./Table";
+
+interface TableDataContainerProps
+    extends Omit<CarbonDataTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
+        React.TableHTMLAttributes<HTMLTableElement> {
     children(signature: any): JSX.Element;
     size?: TableRowHeightSize;
 }
-interface TableSimpleContainerProps extends Omit<
-    CarbonTableContainerProps,
-    "description" | "stickyHeader" | "title" | "useStaticWidth"
->, React.HTMLAttributes<HTMLDivElement> {
+interface TableSimpleContainerProps
+    extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
+        React.HTMLAttributes<HTMLDivElement> {
     children?: JSX.Element;
 }
 
 export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
 
-export function TableContainer({
-    className = "",
-    ...otherProps
-}: TableContainerProps) {
-
+export function TableContainer({ className = "", ...otherProps }: TableContainerProps) {
     const otherDataTableProps = otherProps as TableDataContainerProps;
 
     return !!otherDataTableProps.headers || !!otherDataTableProps.rows ? (

package/src/components/Table/TableExpandRow.tsx

@@ -1,16 +1,15 @@
 import React from "react";
-import {
-    TableExpandRowProps as CarbonTableExpandRowProps,
-} from "carbon-components-react";
-import {usePrefix as carbonPrefix} from "carbon-components-react/es/index"
+import { TableExpandRowProps as CarbonTableExpandRowProps } from "carbon-components-react";
+import { usePrefix as carbonPrefix } from "carbon-components-react/es/index";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
 import IconButton from "./../Icon/IconButton";
 import { TableCell } from "./index";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface TableExpandRowProps extends Omit<
-    CarbonTableExpandRowProps,
-    "ariaLabel" | "expandIconDescription"
->, React.HTMLAttributes<HTMLTableRowElement> {
+export interface TableExpandRowProps
+    extends Omit<CarbonTableExpandRowProps, "ariaLabel" | "expandIconDescription">,
+        React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
      */
@@ -19,12 +18,12 @@ export interface TableExpandRowProps extends Omit<
      * Display this row with the styles from a zebra style-enabled table.
      */
     useZebraStyle?: boolean;
-};
+}
 
 /**
  * Table row that is suffixed by a cell containing a button to expand/collapse this row.
  */
-export function TableExpandRow ({
+export function TableExpandRow({
     togglerText,
     isExpanded,
     isSelected,
@@ -34,12 +33,11 @@ export function TableExpandRow ({
     children,
     ...otherCarbonTableExpandRowProps
 }: TableExpandRowProps) {
-
     const carbonClassPrefix = carbonPrefix();
 
-    const toggleButton = isExpanded ?
-        React.cloneElement(<IconButton name="toggler-showless" text={togglerText} />, {onClick: onExpand}) :
-        React.cloneElement(<IconButton name="toggler-showmore" text={togglerText} />, {onClick: onExpand});
+    const toggleButton = isExpanded
+        ? React.cloneElement(<IconButton name="toggler-showless" text={togglerText} />, { onClick: onExpand })
+        : React.cloneElement(<IconButton name="toggler-showmore" text={togglerText} />, { onClick: onExpand });
 
     return (
         <tr
@@ -49,22 +47,17 @@ export function TableExpandRow ({
                 (isExpanded ? ` ${carbonClassPrefix}--expandable-row` : "") +
                 (isSelected ? ` ${carbonClassPrefix}--data-table--selected` : "") +
                 (useZebraStyle ? ` ${eccgui}-simpletable__row--zebra` : "") +
-                (!!className ? ` ${className}` : "")
+                (className ? ` ${className}` : "")
             }
             data-parent-row={true}
             {...otherCarbonTableExpandRowProps}
         >
-            <TableCell
-                className={
-                    `${eccgui}-simpletable__rowexpander` +
-                    ` ${carbonClassPrefix}--table-expand`
-                }
-            >
-                { toggleButton }
+            <TableCell className={`${eccgui}-simpletable__rowexpander` + ` ${carbonClassPrefix}--table-expand`}>
+                {toggleButton}
             </TableCell>
-            { children }
+            {children}
         </tr>
-    )
+    );
 }
 
 export default TableExpandRow;

package/src/components/Table/TableRow.tsx

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-    TableRow as CarbonTableRow,
-    TableRowProps as CarbonTableRowProps,
-} from "carbon-components-react";
+import { TableRow as CarbonTableRow, TableRowProps as CarbonTableRowProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface TableRowProps extends CarbonTableRowProps, React.TdHTMLAttributes<HTMLTableRowElement> {
@@ -12,13 +10,7 @@ export interface TableRowProps extends CarbonTableRowProps, React.TdHTMLAttribut
     useZebraStyle?: boolean;
 }
 
-export function TableRow({
-    className = "",
-    children,
-    useZebraStyle,
-    ...otherTableRowProps
-}: TableRowProps) {
-
+export function TableRow({ className = "", children, useZebraStyle, ...otherTableRowProps }: TableRowProps) {
     return (
         <CarbonTableRow
             className={
@@ -30,7 +22,7 @@ export function TableRow({
         >
             {children}
         </CarbonTableRow>
-    ) ;
+    );
 }
 
 export default TableRow;

package/src/components/Table/index.tsx

@@ -6,9 +6,4 @@ export * from "./TableExpandHeader";
 export * from "./TableCell";
 
 // TODO, we may wrap to add own classes (currently not necessary)
-export {
-    TableHead,
-    TableBody,
-    TableExpandedRow,
-    TableHeader,
-} from "carbon-components-react";
+export { TableHead, TableBody, TableExpandedRow, TableHeader } from "carbon-components-react";

package/src/components/Tabs/Tab.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import {
-    Tab as BlueprintTab,
-    TabProps as BlueprintTabProps
-} from "@blueprintjs/core";
+import React from "react";
+import { Tab as BlueprintTab, TabProps as BlueprintTabProps } from "@blueprintjs/core";
 import Color from "color";
-import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
+import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 import TabTitle, { TabTitleProps } from "./TabTitle";
 
-export interface TabProps extends Omit<BlueprintTabProps, "title"> {
+export interface TabProps extends TestableComponent, Omit<BlueprintTabProps, "title"> {
     /**
      * Title (or tab label).
      */
@@ -29,33 +29,34 @@ export interface TabProps extends Omit<BlueprintTabProps, "title"> {
 
 export const transformTabProperties = ({
     title,
-    dontShrink=false,
-    className="",
+    dontShrink = false,
+    className = "",
     backgroundColor,
     ...otherBlueprintTabProperties
 }: TabProps) => {
-    const flexStyles = dontShrink ? { flexShrink: 0} : {};
+    const flexStyles = dontShrink ? { flexShrink: 0 } : {};
     let colorStyles = {};
-    if (!!backgroundColor) {
-        let color = Color("#ffffff")
+    if (backgroundColor) {
+        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);
         }
         colorStyles = {
             backgroundColor: `${color.rgb().toString()}`,
-            color: decideContrastColorValue({testColor: color}),
-        }
+            color: decideContrastColorValue({ testColor: color }),
+        };
     }
-    const extraStyles = (dontShrink || !!backgroundColor) ? {style: {...flexStyles, ...colorStyles}} : {};
+    const extraStyles = dontShrink || !!backgroundColor ? { style: { ...flexStyles, ...colorStyles } } : {};
     return {
         key: otherBlueprintTabProperties.id,
         className: className + ` ${eccgui}-tabs`,
         title: typeof title === "string" ? <TabTitle text={title} /> : title,
         ...otherBlueprintTabProperties,
-        ...extraStyles
-    }
-}
+        ...extraStyles,
+    };
+};
 
-export default BlueprintTab;
+export const Tab = BlueprintTab;
+export default Tab;