@eccenca/gui-elements 24.0.1 → 24.1.0-featureimprovepublishingprocesscmem6356.1

package/src/components/Icon/canonicalIconNames.tsx

@@ -19,6 +19,9 @@ const canonicalIcons = {
     "artefact-commit": icons.Commit,
     "artefact-task-deleteprojectfiles": icons.TrashCan,
     "artefact-task-downloadfile": icons.CloudDownload,
+    "artefact-task-pivot": icons.Transpose,
+    "artefact-task-unpivot": icons.Transpose,
+    "artefact-task-concatenatetofile": icons.DocumentExport,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,
@@ -65,6 +68,7 @@ const canonicalIcons = {
     "item-download": icons.Download,
     "item-draggable": icons.Draggable,
     "item-edit": icons.Edit,
+    "item-magic-edit": icons.MagicWand,
     "item-evaluation": icons.Analytics,
     "item-execution": icons.Run,
     "item-info": icons.Information,
@@ -84,6 +88,7 @@ const canonicalIcons = {
     "item-vertmenu": icons.OverflowMenuHorizontal,
     "item-viewdetails": icons.View,
     "item-hidedetails": icons.ViewOff,
+    "item-image": icons.Image,
 
     "list-sortasc": icons.ArrowDown,
     "list-sortdesc": icons.ArrowUp,
@@ -125,6 +130,13 @@ const canonicalIcons = {
     "operation-filterremove": icons.FilterRemove,
     "operation-filter": icons.Filter,
     "operation-format-codeblock": icons.CodeBlock,
+    "operation-format-text-code": icons.Code,
+    "operation-format-text-bold": icons.TextBold,
+    "operation-format-text-italic": icons.TextItalic,
+    "operation-format-text-strikethrough": icons.TextStrikethrough,
+    "operation-format-list-bullet": icons.ListBulleted,
+    "operation-format-list-checked": icons.ListChecked,
+    "operation-format-list-numbered": icons.ListNumbered,
     "operation-fix": icons.Tools,
     "operation-link": icons.Link,
     "operation-logout": icons.Logout,

package/src/components/Label/Label.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Label } from "../../index";
+import { Icon, Label } from "../../index";
 
 export default {
     title: "Forms/Label",
@@ -19,4 +19,5 @@ Default.args = {
     tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
     disabled: false,
     htmlFor: "inputid",
+    additionalElements: <Icon name={"state-warning"} tooltipText={"message"} small />,
 };

package/src/components/Label/Label.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
+import Spacing from "../Separation/Spacing";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -34,6 +35,12 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * visual appearance of the label
      */
     emphasis?: "strong" | "normal";
+    /**
+     * Add other elements to the end of the label content
+     */
+    additionalElements?: React.ReactNode | React.ReactNode[];
+    /** Force label to get displayed as inline block element. */
+    inline?: boolean;
 }
 
 export const Label = ({
@@ -46,6 +53,8 @@ export const Label = ({
     tooltipProps,
     isLayoutForElement = "label",
     emphasis = "normal",
+    additionalElements,
+    inline,
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -63,16 +72,23 @@ export const Label = ({
                 </span>
             )}
             {children && <span className={`${eccgui}-label__other`}>{children}</span>}
+            {additionalElements && (
+                <>
+                    <Spacing vertical size="tiny" />
+                    {additionalElements}
+                </>
+            )}
         </>
     );
 
-    return !!text || !!info || !!tooltip || !!children ? (
+    return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (
         React.createElement(
             htmlElementstring,
             {
                 className:
                     `${eccgui}-label ${eccgui}-label--${emphasis}` +
                     (className ? " " + className : "") +
+                    (inline ? ` ${eccgui}-label--inline` : "") +
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,
             },

package/src/components/Label/label.scss

@@ -8,7 +8,6 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     font-size: $eccgui-size-typo-label;
     line-height: $eccgui-size-typo-label-lineheight;
     color: $eccgui-color-label-text;
-    vertical-align: middle;
 
     .#{$eccgui}-typography__overflowtext--passdown > & {
         display: flex;
@@ -17,6 +16,11 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     }
 }
 
+.#{$eccgui}-label--inline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .#{$eccgui}-label--disabled {
     opacity: $eccgui-opacity-disabled;
 }

package/src/components/Menu/MenuItem.tsx

@@ -5,6 +5,7 @@ import { openInNewTab } from "../../common/utils/openInNewTab";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 
 import { TestIconProps } from "./../Icon/TestIcon";
 
@@ -15,16 +16,41 @@ export interface MenuItemProps
      * If set the icon is diplayed on the left side of the menu item.
      */
     icon?: ValidIconName | string[] | React.ReactElement<TestIconProps>;
+    /**
+     * Submenu.
+     */
     children?: React.ReactNode;
+    /**
+     * Tooltip, but only added to the label, not to the full menu item.
+     */
+    tooltip?: string | JSX.Element;
 }
 
 /**
  * Single item, used as child inside `Menu`.
  */
-export const MenuItem = ({ children, className = "", icon, onClick, href, ...restProps }: MenuItemProps) => {
+export const MenuItem = ({
+    children,
+    className = "",
+    icon,
+    onClick,
+    href,
+    text,
+    tooltip,
+    ...restProps
+}: MenuItemProps) => {
     return (
         <BlueprintMenuItem
             {...restProps}
+            text={
+                tooltip ? (
+                    <Tooltip content={tooltip} fill>
+                        {text}
+                    </Tooltip>
+                ) : (
+                    text
+                )
+            }
             href={href}
             onClick={(e: React.MouseEvent<HTMLElement>) =>
                 openInNewTab(e as React.MouseEvent<HTMLAnchorElement>, onClick, href)

package/src/components/Menu/menu.scss

@@ -48,6 +48,7 @@ $menu-background-color: transparent !default;
 @import "~@blueprintjs/core/src/components/menu/menu";
 
 .#{$ns}-menu {
+    min-width: auto;
     padding: 0;
 
     .#{$ns}-popover2-content > & {

package/src/components/OverviewItem/OverviewItem.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Card, { CardProps } from "../Card/Card";
 
 export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -11,6 +12,17 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Add a bit white space around the element.
      */
     hasSpacing?: boolean;
+    /**
+     * Uses a `Card` element to wrap the `OverviewItem` inside.
+     * It is always used with `isOnlyLayout` set to `true`.
+     * Should be used together with `hasSpacing`.
+     */
+    hasCardWrapper?: boolean;
+    /**
+     * Forwarding basic `Card` properties to the wrapper element.
+     * Only used if `hasCardWrapper` is set to `true`.
+     */
+    cardProps?: Omit<CardProps, "children" | "isOnlyLayout" | "fullHeight" | "whitespaceAmount" | "compact">;
 }
 
 /**
@@ -22,6 +34,8 @@ export const OverviewItem = ({
     className = "",
     densityHigh = false,
     hasSpacing = false,
+    hasCardWrapper = false,
+    cardProps,
     ...otherProps
 }: OverviewItemProps) => {
     const item = (
@@ -38,6 +52,7 @@ export const OverviewItem = ({
         </div>
     );
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const accessibilityParameters: { [key: string]: any } = Object.create(null);
     if (typeof otherProps.onClick !== "undefined" || typeof otherProps.onKeyDown !== "undefined") {
         accessibilityParameters["tabIndex"] = 0;
@@ -46,7 +61,15 @@ export const OverviewItem = ({
         accessibilityParameters["role"] = "button";
     }
 
-    return React.cloneElement(item, accessibilityParameters);
+    const element = React.cloneElement(item, accessibilityParameters);
+
+    return hasCardWrapper ? (
+        <Card isOnlyLayout {...cardProps}>
+            {element}
+        </Card>
+    ) : (
+        element
+    );
 };
 
 export default OverviewItem;

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -5,6 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
     /**
      * Displays the element using reduced height and less white space inside.
+     * @deprecated (v25) use property directly on `OverviewItem` children.
      */
     densityHigh?: boolean;
     /**
@@ -23,8 +24,8 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
 }
 
 /**
- * This element can include all basic information and actions to give an overview about the item.
- * Mainly used in items list or to create basic widgets.
+ * This component is a listing container for multiple `OverviewItem` elements.
+ * It should only contains `OverviewItem` children but it does not check and control that condition.
  */
 export const OverviewItemList = ({
     children,

package/src/components/OverviewItem/overviewitem.scss

@@ -193,7 +193,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     .#{$eccgui}-overviewitem__item:hover &,
     .#{$eccgui}-overviewitem__item:focus &,
-    .#{$eccgui}-overviewitem__item:active & {
+    .#{$eccgui}-overviewitem__item:active &,
+    &:focus-within,
+    &:has(.#{$ns}-active),
+    &:has(.#{$ns}-popover-open) {
         display: flex;
     }
 }

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -27,7 +27,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements used as depiction, text and interactive elements of an overview-item.",
         },
     },
@@ -47,6 +47,9 @@ ItemExample.args = {
         <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions key="hiddenactions" />,
         <OverviewItemActions children={ActionsExample.args.children[1]} key="actions" />,
     ],
+    densityHigh: false,
+    hasSpacing: false,
+    hasCardWrapper: false,
 };
 
 export const ItemWithDepictionElement = Template.bind({});
@@ -69,16 +72,7 @@ ItemWithDepictionElement.args = {
         <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions />,
         <OverviewItemActions children={ActionsExample.args.children[1]} />,
     ],
-};
-
-const TemplateCard: StoryFn<typeof OverviewItem> = (args) => (
-    <Card isOnlyLayout>
-        <OverviewItem {...args}></OverviewItem>
-    </Card>
-);
-
-export const ItemInCard = TemplateCard.bind({});
-ItemInCard.args = {
-    ...ItemExample.args,
+    densityHigh: false,
     hasSpacing: true,
+    hasCardWrapper: true,
 };

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";
@@ -30,7 +31,7 @@ Default.args = {
             return { label: item };
         }),
     itemRenderer: (item, props) => {
-        return <MenuItem text={item.label} title={item.label} />;
+        return <MenuItem text={item.label} title={item.label} {...props} />;
     },
     fill: true,
 };
@@ -53,6 +54,7 @@ ControlledTarget.args = {
     ...Default.args,
     fill: false,
     children: <Button text="Controlled select target" intent="primary" />,
+    onActiveItemChange: fn(),
 };
 
 /**
@@ -70,4 +72,5 @@ ClearanceOption.args = {
     onClearanceHandler: () => {
         alert("Reset now.");
     },
+    onActiveItemChange: fn(),
 };

package/src/components/Switch/Switch.tsx

@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+    Classes as BlueprintClasses,
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!!e.target?.checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch
+            className={`${eccgui}-switch ${className ?? ""} ${
+                label && !otherProps.labelElement ? BlueprintClasses.INLINE : ""
+            }`}
+            labelElement={
+                label ? (
+                    <Label text={label} isLayoutForElement="span" disabled={otherProps.disabled} inline />
+                ) : undefined
+            }
+            {...otherProps}
+            onChange={handleChange}
+        />
+    );
 };
 
 export default memo(Switch);

package/src/components/Tag/TagList.tsx

@@ -10,11 +10,11 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     const tagList = (
         <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
             {React.Children.map(children, (child, i) => {
-                return (
+                return child ? (
                     <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
                         {child}
                     </li>
-                );
+                ) : null;
             })}
         </ul>
     );

package/src/components/TextField/SearchField.tsx

@@ -35,10 +35,38 @@ export const SearchField = ({
     className = "",
     emptySearchInputMessage = "Enter search term",
     onClearanceHandler,
-    onClearanceText = "Clear input",
+    onClearanceText = "Clear current search term",
+    onChange,
     leftIcon = <Icon name="operation-search" />,
+    rightElement,
     ...otherProps
 }: SearchFieldProps) => {
+    const [value, setValue] = React.useState<string>("");
+
+    const clearanceButton =
+        onClearanceHandler && value ? (
+            <IconButton
+                data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
+                name="operation-clear"
+                text={onClearanceText}
+                onClick={() => {
+                    setValue("");
+                    onClearanceHandler();
+                }}
+            />
+        ) : undefined;
+
+    const changeHandlerProcess = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+
+    React.useEffect(() => {
+        setValue(otherProps.value ?? otherProps.defaultValue ?? "");
+    }, [otherProps.value, otherProps.defaultValue]);
+
     return (
         <TextField
             className={
@@ -50,16 +78,16 @@ export const SearchField = ({
             placeholder={emptySearchInputMessage}
             aria-label={emptySearchInputMessage}
             rightElement={
-                onClearanceHandler && otherProps.value ? (
-                    <IconButton
-                        data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
-                        name="operation-clear"
-                        text={onClearanceText ? onClearanceText : "Clear current search term"}
-                        onClick={onClearanceHandler}
-                    />
-                ) : undefined
+                (clearanceButton || rightElement) && (
+                    <>
+                        {rightElement}
+                        {clearanceButton}
+                    </>
+                )
             }
+            onChange={changeHandlerProcess}
             {...otherProps}
+            value={value}
             type={"search"}
             leftIcon={leftIcon}
             round={true}

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -1,12 +1,20 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
 import SearchField from "./../SearchField";
 
 export default {
     title: "Components/SearchField",
     component: SearchField,
     argTypes: {
+        leftIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+        rightElement: {
+            ...helpersArgTypes.exampleIcon,
+        },
         hasStatePrimary: { table: { disable: true } },
         hasStateSuccess: { table: { disable: true } },
         hasStateWarning: { table: { disable: true } },
@@ -23,7 +31,7 @@ Default.args = {
     onClearanceText: "",
 };
 
-export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args) => {
+const SearchFieldWithClearanceIconTemplate: StoryFn<typeof SearchField> = (args) => {
     const [query, setQuery] = React.useState<string>("");
     return (
         <SearchField
@@ -34,3 +42,9 @@ export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args)
         />
     );
 };
+
+export const SearchFieldWithClearanceIcon = SearchFieldWithClearanceIconTemplate.bind({});
+SearchFieldWithClearanceIcon.args = {
+    onClearanceHandler: null,
+    onClearanceText: "Clear field",
+};

package/src/components/TextField/stories/TextField.stories.tsx

@@ -31,6 +31,7 @@ Default.args = {
     fullWidth: false,
     placeholder: "placeholder text",
     readOnly: false,
+    disabled: false,
 };
 
 /** Text field with default value that contains a zero width/invisible character.
@@ -46,7 +47,7 @@ const invisibleCharacterWarningProps: TextFieldProps = {
                 const codePointsString = [...Array.from(codePoints)]
                     .map((n) => {
                         const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n);
-                        return info.fullLabel;
+                        return info?.fullLabel;
                     })
                     .join(", ");
                 alert("Invisible character detected in input string. Code points: " + codePointsString);

package/src/components/TextField/textfield.scss

@@ -4,7 +4,8 @@
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
-$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio * $eccgui-size-type-levelratio !default;
+$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
+    $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
@@ -50,10 +51,23 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
         height: 100%;
         max-height: $input-button-height-large;
 
-        & > .#{eccgui}-icon {
+        & > * {
+            vertical-align: middle;
+        }
+
+        & > .#{eccgui}-icon,
+        & > .#{eccgui}-tooltip__wrapper {
             display: inline-flex;
+            align-items: center;
             height: 100%;
-            margin: 0 0.5 * $eccgui-size-block-whitespace;
+
+            &:first-child {
+                margin-left: 0.5 * $eccgui-size-block-whitespace;
+            }
+
+            &:last-child {
+                margin-right: 0.5 * $eccgui-size-block-whitespace;
+            }
         }
     }
 }

package/src/components/Typography/OverflowText.tsx

@@ -1,13 +1,34 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../../components/interfaces";
 
-export interface OverflowTextProps {
-    ellipsis?: "reverse" | "none";
+export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * How is ellipsis used to cut text overflows.
+     * Use `reverse`to use the ellipis on text start and display the end of the text.
+     */
+    ellipsis?: "add" | "reverse" | "none";
+    /**
+     * Display component as inline element.
+     */
     inline?: boolean;
+    /**
+     * Using text overflow on all children elements.
+     */
     passDown?: boolean;
+    /**
+     * Additional CSS class name.
+     */
     className?: string;
+    /**
+     * HTML element that is used for the component.
+     */
     useHtmlElement?: "p" | "div" | "span";
+    /**
+     * Used for all other necessary properties.
+     * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
+     */
     [key: string]: any;
 }
 
@@ -15,7 +36,7 @@ export interface OverflowTextProps {
 export const OverflowText = ({
     className = "",
     children,
-    ellipsis,
+    ellipsis = "add",
     inline = false,
     passDown = false,
     useHtmlElement,

package/src/components/Typography/stories/OverflowText.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { OverflowText } from "../../../index";
+
+const config = {
+    title: "Components/Typography/OverflowText",
+    component: OverflowText,
+    argTypes: {
+        children: {
+            control: "select",
+            options: ["simple text", "2 paragraphs"],
+            mapping: {
+                "simple text": loremIpsum({
+                    p: 1,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                }),
+                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            },
+            description: "Content of the element.",
+        },
+    },
+} as Meta<typeof OverflowText>;
+export default config;
+
+const Template: StoryFn<typeof OverflowText> = (args) => <OverflowText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: config?.argTypes?.children?.mapping ? config.argTypes.children.mapping["simple text"] : "Overflow text",
+};

package/src/components/index.scss

@@ -41,3 +41,4 @@
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";
 @import "./MultiSuggestField/multisuggestfield";
+@import "./ContentGroup/contentgroup";

package/src/components/index.ts

@@ -48,5 +48,6 @@ export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
 export * from "./Workspace";
+export * from "./ContentGroup/ContentGroup";
 
 export * from "./interfaces";