);
-};
-
-export default CardContent;
+});
diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss
index 31594a6ee..ebfdcb563 100644
--- a/src/components/Card/card.scss
+++ b/src/components/Card/card.scss
@@ -236,6 +236,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
flex-direction: row-reverse;
}
+.#{$eccgui}-card__actions--nowrap {
+ flex-wrap: nowrap;
+}
+
.#{$eccgui}-card__actions__aux {
display: flex;
flex-flow: row wrap;
@@ -272,4 +276,15 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
.#{$eccgui}-card__actions--inversedirection > & {
justify-content: flex-start;
}
+
+ .#{$eccgui}-card__actions--nowrap > & {
+ flex-shrink: 5;
+ flex-wrap: nowrap;
+ min-width: 0;
+
+ & > * {
+ flex-shrink: 10;
+ min-width: 0;
+ }
+ }
}
diff --git a/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx b/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx
index bc4ff6134..2cb97db30 100644
--- a/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx
+++ b/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx
@@ -15,9 +15,10 @@ export default {
},
} as Meta
;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
const Template: StoryFn = (args) => (
-
+
);
@@ -63,7 +64,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
},
placeholder:
"The word before the cursor will be auto-completed. At the beginning or after a space, all results are shown.",
- onChange(): any {
+ onChange(): void {
// Do nothing
},
};
diff --git a/src/components/ContentGroup/ContentGroup.stories.tsx b/src/components/ContentGroup/ContentGroup.stories.tsx
new file mode 100644
index 000000000..bf524e9b8
--- /dev/null
+++ b/src/components/ContentGroup/ContentGroup.stories.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+
+export default {
+ title: "Components/ContentGroup",
+ component: ContentGroup,
+ argTypes: {
+ handlerToggleCollapse: {
+ action: "toggle collapse",
+ },
+ },
+} as Meta;
+
+const TemplateFull: StoryFn = (args) => ;
+
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+ title: "Content group title",
+ contextInfo: ,
+ annotation: (
+
+ Context tag
+
+ ),
+ actionOptions: (
+ <>
+
+
+ ),
+ isCollapsed: false,
+ handlerToggleCollapse: () => {},
+ borderMainConnection: true,
+ borderSubConnection: ["red", "blue"],
+ level: 1,
+ minimumHeadlineLevel: 5,
+ whitespaceSize: "small",
+ description: "More context description by tooltip.",
+ hideGroupDivider: false,
+ children: (
+
+
+
+ ),
+};
diff --git a/src/components/ContentGroup/ContentGroup.tsx b/src/components/ContentGroup/ContentGroup.tsx
new file mode 100644
index 000000000..521e4092f
--- /dev/null
+++ b/src/components/ContentGroup/ContentGroup.tsx
@@ -0,0 +1,256 @@
+import React from "react";
+import classNames from "classnames";
+import Color from "color";
+
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {
+ Divider,
+ Icon,
+ IconButton,
+ OverflowText,
+ Section,
+ SectionHeader,
+ Spacing,
+ StickyTarget,
+ StickyTargetProps,
+ Toolbar,
+ ToolbarSection,
+ Tooltip,
+} from "../index";
+
+export interface ContentGroupProps extends Omit, "title">, TestableComponent {
+ /**
+ * Title of the content group.
+ */
+ title?: string;
+ /**
+ * Level of the content group.
+ */
+ level?: number;
+ /**
+ * Context information to display in the header.
+ */
+ contextInfo?: React.ReactElement | React.ReactElement[];
+ /**
+ * Annotation to display in the content.
+ */
+ annotation?: React.ReactElement | React.ReactElement[];
+ /**
+ * Action options to display in the header.
+ */
+ actionOptions?: React.ReactElement | React.ReactElement[];
+ /**
+ * Flag to collapse the content group.
+ */
+ isCollapsed?: boolean;
+ /**
+ * Text to display when the callapse button is hovered.
+ * If not set then it uses "Show more" or "Show less".
+ */
+ textToggleCollapse?: string;
+ /**
+ * Event handler to toggle the collapse state.
+ */
+ handlerToggleCollapse?: () => void;
+ /**
+ * Use a border on the left side to visually connect the whole content content group.
+ */
+ borderMainConnection?: boolean;
+ /**
+ * Use a border on the left side to visually emphase the content group.
+ * If it is set to an array of color codes then the border is multi colored.
+ */
+ borderSubConnection?: boolean | string[];
+ /**
+ * Whitespace size between header and the content.
+ */
+ whitespaceSize?: "tiny" | "small" | "medium" | "large" | "xlarge";
+ /**
+ * Title minimum headline level.
+ */
+ minimumHeadlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+ /**
+ * Props to pass to `StickyTarget`.
+ */
+ stickyHeaderProps?: Omit;
+ /**
+ * Description of the content group.
+ * Added as tooltip to an info icon placed in the content group header.
+ */
+ description?: string;
+ /**
+ * Flag to hide the group divider.
+ */
+ hideGroupDivider?: boolean;
+ /**
+ * Additional props to pass to the content container.
+ */
+ contentProps?: Omit, "children">;
+}
+
+/**
+ * Manage display of a grouped content section.
+ * Add info, actions and context annotations by using its properties.
+ * Can be nested into each other.
+ */
+export const ContentGroup = ({
+ children,
+ className = "",
+ title,
+ contextInfo,
+ annotation,
+ actionOptions,
+ isCollapsed = false,
+ textToggleCollapse,
+ handlerToggleCollapse,
+ borderMainConnection = false,
+ borderSubConnection = false,
+ level = 1,
+ minimumHeadlineLevel = 3,
+ whitespaceSize = "small",
+ style,
+ stickyHeaderProps,
+ description,
+ hideGroupDivider,
+ contentProps,
+ ...otherContentWrapperProps
+}: ContentGroupProps) => {
+ const displayHeader = title || handlerToggleCollapse;
+
+ let borderGradient: string[] | undefined = undefined;
+ if (typeof borderSubConnection === "object") {
+ const borderColors: string[] = Array.isArray(borderSubConnection) ? borderSubConnection : [borderSubConnection];
+ borderGradient = borderColors.reduce((acc: string[], borderColor: string, index: number): string[] => {
+ try {
+ const color = Color(borderColor);
+
+ acc.push(
+ `${color.rgb().toString()} ` +
+ `${(index / borderColors.length) * 100}% ` +
+ `${((index + 1) / borderColors.length) * 100}%`
+ );
+ } catch {
+ // eslint-disable-next-line no-console
+ console.warn("Received invalid background color for tag: " + borderColor);
+ }
+ return acc;
+ }, []);
+ }
+
+ const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+ const { className: contentClassName, ...otherContentProps } = contentProps ?? {};
+
+ const headerContent = displayHeader ? (
+ <>
+
+
+ {handlerToggleCollapse && (
+
+
+
+
+ )}
+ {title && (
+
+ {React.createElement(
+ "h" +
+ Math.min(
+ Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
+ 6
+ ).toString(),
+ {
+ children: {title},
+ className: `${eccgui}-contentgroup__header__title`,
+ }
+ )}
+ {description && (
+ <>
+
+
+
+
+
+ )}
+
+ )}
+ {contextInfoElements &&
+ contextInfoElements[0]?.props &&
+ Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (
+
+
+
+ {contextInfoElements}
+
+
+ )}
+ {!isCollapsed && handlerToggleCollapse && actionOptions && (
+
+
+ {actionOptions}
+
+ )}
+
+
+ {(!isCollapsed || !handlerToggleCollapse) && (
+ <>
+ {!hideGroupDivider && }
+
+
+ )}
+
+ ) : (
+ <>
+ );
+
+ return (
+
+ {headerContent && stickyHeaderProps ? (
+ {headerContent}
+ ) : (
+ headerContent
+ )}
+ {(!isCollapsed || !handlerToggleCollapse) && (
+ <>
+
+
+ {children}
+
+ {contextInfo && !displayHeader && (
+
{contextInfoElements}
+ )}
+ {annotation &&
{annotation}
}
+ {actionOptions && !displayHeader && (
+
{actionOptions}
+ )}
+