@eccenca/gui-elements 24.0.0-rc.3 → 24.0.0-rc.5

package/src/components/Breadcrumb/breadcrumb.scss

@@ -1,6 +1,8 @@
 @import "~@blueprintjs/core/src/components/breadcrumbs/breadcrumbs";
 @import "~@blueprintjs/core/src/components/overflow-list/overflow-list";
 
+$eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
+
 .#{$eccgui}-breadcrumb__list {
     height: auto;
 
@@ -19,7 +21,7 @@
         margin: 0;
         text-align: center;
         vertical-align: middle;
-        content: "/";
+        content: ">";
         background: none;
     }
 
@@ -65,10 +67,15 @@
     a {
         @extend .#{$eccgui}-breadcrumb__item;
         @extend .#{$ns}-breadcrumb;
+
+        color: $eccgui-color-breadcrumb-link;
+        cursor: pointer;
     }
 }
 
 a.#{$eccgui}-breadcrumb__item {
+    color: $eccgui-color-breadcrumb-link;
+    cursor: pointer;
     &:not(.#{$ns}-breadcrumb-current):not(.#{$ns}-disabled) {
         text-decoration: underline;
 

package/src/components/Depiction/stories/Depiction.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Badge, Depiction, Icon, TestIcon } from "../../../index";
+import { Badge, Depiction, Icon, OverviewItem, TestIcon } from "../../../index";
 
 import canonicalIcons from "./../../Icon/canonicalIconNames";
 import { Svg9to16 } from "./test-9to16";
@@ -81,8 +81,25 @@ const TemplateFull: StoryFn<typeof Depiction> = (args) => (
     </OverlaysProvider>
 );
 
+const TemplateInsideOverviewItem: StoryFn<typeof Depiction> = (args) => (
+    <OverlaysProvider>
+        <OverviewItem>
+            <Depiction {...args} />
+        </OverviewItem>
+    </OverlaysProvider>
+);
+
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
     image: <img src={png16to9} />,
     caption: "This is a test description for the image.",
 };
+
+export const InsideOverviewItem = TemplateInsideOverviewItem.bind({});
+InsideOverviewItem.args = {
+    ...FullExample.args,
+    backgroundColor: "dark",
+    ratio: "1:1",
+    padding: "medium",
+    resizing: "contain",
+};

package/src/components/Icon/canonicalIconNames.tsx

@@ -17,7 +17,8 @@ const canonicalIcons = {
 
     "artefact-chatlog": icons.Chat,
     "artefact-commit": icons.Commit,
-    "artefact-customtask": icons.Script,
+    "artefact-task-deleteprojectfiles": icons.TrashCan,
+    "artefact-task-downloadfile": icons.CloudDownload,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,

package/src/components/MultiSelect/MultiSelect.tsx

@@ -119,6 +119,12 @@ interface MultiSelectCommonProps<T>
      * If not provided, values are filtered by their labels
      */
     searchPredicate?: (item: T, query: string) => boolean;
+    /**
+     * Limits the height of the input target plus its dropdown menu when it is opened.
+     * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100).
+     * If not set than the dropdown menu cannot be larger that appr. the half of the available viewport hight.
+     */
+    limitHeightOpened?: boolean | number;
 }
 
 /** @deprecated (v25) use MultiSuggestFieldProps */
@@ -172,6 +178,7 @@ function MultiSelect<T>({
     "data-testid": dataTestid,
     wrapperProps,
     searchPredicate,
+    limitHeightOpened,
     ...otherMultiSelectProps
 }: MultiSelectProps<T>) {
     // Options created by a user
@@ -184,6 +191,8 @@ function MultiSelect<T>({
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() =>
         prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : []
     );
+    // Max height of the menu
+    const [calculatedMaxHeight, setCalculatedMaxHeight] = React.useState<string | null>(null);
 
     //currently focused element in popover list
     const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
@@ -244,6 +253,29 @@ function MultiSelect<T>({
         setSelectedItems(externalSelectedItems);
     }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]);
 
+    React.useEffect(() => {
+        const calculateMaxHeight = () => {
+            if (inputRef.current) {
+                // Get the height of the input target
+                const inputTargetHeight = inputRef.current.getBoundingClientRect().height;
+                // Calculate the menu dropdown by using the limited height reduced by the target height
+                setCalculatedMaxHeight(`calc(${maxHeightToProcess}vh - ${inputTargetHeight}px)`);
+            }
+        };
+
+        const removeListener = () => {
+            window.removeEventListener("resize", calculateMaxHeight);
+        };
+
+        if (!limitHeightOpened || (typeof limitHeightOpened === "number" && limitHeightOpened > 100))
+            return removeListener;
+        const maxHeightToProcess = typeof limitHeightOpened === "number" ? limitHeightOpened : 100;
+
+        calculateMaxHeight();
+        window.addEventListener("resize", calculateMaxHeight);
+        return removeListener;
+    }, [limitHeightOpened, selectedItems]);
+
     /**
      * using the equality prop specified checks if an item has already been selected
      * @param matcher
@@ -514,6 +546,11 @@ function MultiSelect<T>({
                 {
                     "data-test-id": dataTestId ? dataTestId + "_drowpdown" : undefined,
                     "data-testid": dataTestid ? dataTestid + "_dropdown" : undefined,
+                    style: calculatedMaxHeight
+                        ? ({
+                              "--eccgui-multisuggestfield-max-height": `${calculatedMaxHeight}`,
+                          } as React.CSSProperties)
+                        : undefined,
                 } as BlueprintMultiSelectProps<T>["popoverContentProps"]
             }
         />

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
@@ -7,7 +8,7 @@ import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from
 
 const testLabels = loremIpsum({
     p: 1,
-    avgSentencesPerParagraph: 5,
+    avgSentencesPerParagraph: 50,
     avgWordsPerSentence: 1,
     startWithLoremIpsum: false,
     random: false,
@@ -16,8 +17,8 @@ const testLabels = loremIpsum({
     .split(".")
     .map((item) => item.trim());
 
-const items = new Array(5).fill(undefined).map((_, id) => {
-    const testLabel = testLabels[id];
+const items = new Array(50).fill(undefined).map((_, id) => {
+    const testLabel = `${testLabels[id]}${id + 1}`;
     return { testLabel, testId: `${testLabel}-id` };
 });
 
@@ -36,9 +37,9 @@ export default {
 
 const Template: StoryFn<typeof MultiSuggestField> = (args) => {
     return (
-        <div>
+        <OverlaysProvider>
             <MultiSuggestField {...args} />
-        </div>
+        </OverlaysProvider>
     );
 };
 
@@ -91,7 +92,7 @@ const DeferredSelectionTemplate: StoryFn = () => {
     const identity = useCallback((item: string): string => item, []);
 
     return (
-        <>
+        <OverlaysProvider>
             <div>Selected items loaded: {loaded.toString()}</div>
 
             <br />
@@ -107,7 +108,7 @@ const DeferredSelectionTemplate: StoryFn = () => {
             <br />
 
             <button onClick={() => setLoaded((prev) => !prev)}>Toggle selected</button>
-        </>
+        </OverlaysProvider>
     );
 };
 
@@ -142,14 +143,16 @@ const CreationTemplate: StoryFn = () => {
     }, []);
 
     return (
-        <MultiSuggestField<string>
-            items={items}
-            selectedItems={selectedValues}
-            onSelection={handleOnSelect}
-            itemId={identity}
-            itemLabel={identity}
-            createNewItemFromQuery={identity}
-        />
+        <OverlaysProvider>
+            <MultiSuggestField<string>
+                items={items}
+                selectedItems={selectedValues}
+                onSelection={handleOnSelect}
+                itemId={identity}
+                itemLabel={identity}
+                createNewItemFromQuery={identity}
+            />
+        </OverlaysProvider>
     );
 };
 
@@ -173,7 +176,7 @@ const WithResetButtonComponent = (): JSX.Element => {
     };
 
     return (
-        <div>
+        <OverlaysProvider>
             <button onClick={handleReset}>Reset</button>
             <br />
             <br />
@@ -185,7 +188,7 @@ const WithResetButtonComponent = (): JSX.Element => {
                 itemLabel={({ testLabel }) => testLabel}
                 createNewItemFromQuery={(query) => ({ testId: `${query}-id`, testLabel: query })}
             />
-        </div>
+        </OverlaysProvider>
     );
 };
 
@@ -215,7 +218,7 @@ const WithinModal = (): JSX.Element => {
     };
 
     return (
-        <>
+        <OverlaysProvider>
             <button onClick={() => setIsOpen(true)}>open modal</button>
 
             <SimpleDialog isOpen={isOpen} onClose={() => setIsOpen(false)} canOutsideClickClose>
@@ -233,7 +236,7 @@ const WithinModal = (): JSX.Element => {
                     />
                 </div>
             </SimpleDialog>
-        </>
+        </OverlaysProvider>
     );
 };
 

package/src/components/MultiSuggestField/_multisuggestfield.scss

@@ -0,0 +1,8 @@
+@import "~@blueprintjs/select/src/components/multi-select/multi-select";
+
+.#{$ns}-multi-select-popover {
+    .#{$ns}-menu {
+        max-width: unset;
+        max-height: var(--eccgui-multisuggestfield-max-height, 45vh);
+    }
+}

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -6,10 +6,10 @@ import "@testing-library/jest-dom";
 import { MultiSuggestField } from "../../../../index";
 import { CustomSearch, Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
 
-const testLabels = ["label1", "label2", "label3", "label4", "label5"];
+//const testLabels = ["label1", "label2", "label3", "label4", "label5"];
 
-const items = new Array(5).fill(undefined).map((_, id) => {
-    const testLabel = testLabels[id];
+const items = new Array(50).fill(undefined).map((_, id) => {
+    const testLabel = `label${id + 1}`;
     return { testLabel, testId: `${testLabel}-id` };
 });
 
@@ -108,7 +108,7 @@ describe("MultiSuggestField", () => {
                 expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
             });
 
-            fireEvent.change(input, { target: { value: "ex" } });
+            fireEvent.change(input, { target: { value: "cras" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -277,7 +277,7 @@ describe("MultiSuggestField", () => {
                 expect(menuItems.length).toBe(CustomSearch.args.items.length);
             });
 
-            fireEvent.change(input, { target: { value: "label1" } });
+            fireEvent.change(input, { target: { value: "label11" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -289,10 +289,10 @@ describe("MultiSuggestField", () => {
                 const item = menuItems[0];
 
                 const [div] = item.getElementsByTagName("div");
-                expect(div.textContent).toBe("label1");
+                expect(div.textContent).toBe("label11");
             });
 
-            fireEvent.change(input, { target: { value: "label1-id" } });
+            fireEvent.change(input, { target: { value: "label11-id" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -304,10 +304,10 @@ describe("MultiSuggestField", () => {
                 const item = menuItems[0];
 
                 const [div] = item.getElementsByTagName("div");
-                expect(div.textContent).toBe("label1");
+                expect(div.textContent).toBe("label11");
             });
 
-            fireEvent.change(input, { target: { value: "label1-id-other" } });
+            fireEvent.change(input, { target: { value: "label11-id-other" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -549,5 +549,99 @@ describe("MultiSuggestField", () => {
             const tagsAfterRemove = container.querySelectorAll("span[data-tag-index]");
             expect(tagsAfterRemove.length).toBe(0);
         });
+
+        it("should not contain the custom css property when limitHeightOpened not provided", async () => {
+            const { container } = render(
+                <MultiSuggestField {...Default.args} openOnKeyDown={false} data-testid="multi-suggest-field" />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeFalsy();
+            });
+        });
+
+        it("should notcontain the custom css property when limitHeightOpened greater than 100", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened={110}
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeFalsy();
+            });
+        });
+
+        it("should contain the custom css property when limitHeightOpened is true", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeDefined();
+            });
+        });
+
+        it("should contain the custom css property when limitHeightOpened a valid number value", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened={80}
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeDefined();
+            });
+        });
     });
 });

package/src/components/OverviewItem/overviewitem.scss

@@ -46,11 +46,19 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 .#{$eccgui}-overviewitem__item {
     display: flex;
     flex-flow: row nowrap;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     max-width: 100%;
-    height: mini-units(6);
+    height: auto;
+
+    // TODO: we may revalidate later again
+    // @see http://localhost:6006/?path=/docs/components-application--docs as testcase
+    // there is a weird bug in Firefox v132+
+    // with a fixed height the calculation of `asprect-ratio` for child elements seems to be broken in some situations (especially in combination with top/bottom `padding`)
+    // however, it is working when we set min- and max-height (what leads basically to the same layout like a fixed height)
+    // height: mini-units(6);
+    min-height: mini-units(6);
+    max-height: mini-units(6);
 
     &[tabindex]:not([tabindex="-1"]) {
         cursor: pointer;
@@ -70,7 +78,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__item--highdensity,
 .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
-    height: $button-height; // mini-units(4);
+    // same fix for Firefox v132+ like for the normal element height
+    // height: $button-height; // mini-units(4);
+    min-height: $button-height;
+    max-height: $button-height;
 
     & > .#{$eccgui}-overviewitem__depiction {
         width: $button-height; // mini-units(4);
@@ -107,9 +118,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     & > * {
         display: block;
-        width: auto;
+        max-width: 100%;
         max-height: 100%;
         margin: 0 auto;
+        object-fit: contain;
     }
 
     &:not(.#{$eccgui}-overviewitem__depiction--keepcolors) {
@@ -127,9 +139,8 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     overflow: hidden;
 
     .#{$eccgui}-overviewitem__depiction + & {

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

@@ -13,7 +13,7 @@ import {
 } from "./../../../../index";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
-import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
+import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
 
 export default {

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

@@ -1,7 +1,9 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Depiction, Icon, OverviewItemDepiction } from "./../../../../index";
+import png16to9 from "../../Depiction/stories/test-16to9.png";
+
+import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
@@ -17,11 +19,24 @@ export default {
 } as Meta<typeof OverviewItemDepiction>;
 
 const Template: StoryFn<typeof OverviewItemDepiction> = (args) => (
-    <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    <OverviewItem>
+        <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    </OverviewItem>
 );
 
-export const Default = Template.bind({});
-Default.args = {
+/**
+ * If a `<Depiction/>` is used as only content then it is returned directly by `<OverviewItemDepiction/>`.
+ */
+export const UseDepictionElement = Template.bind({});
+UseDepictionElement.args = {
+    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+};
+
+/**
+ * If an `<Icon/>` (or `<TestIcon/>`) is used as only content for `<OverviewItemDepiction/>` then it returns automatically a `<Depiction/>` element setting the `image` property to that icon.
+ */
+export const AutoTransform = Template.bind({});
+AutoTransform.args = {
     children: (
         <>
             <Icon name="artefact-dataset" />
@@ -29,7 +44,10 @@ Default.args = {
     ),
 };
 
-export const UseDepictionElement = Template.bind({});
-UseDepictionElement.args = {
-    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+/**
+ * For all other content the `<OverviewItemDepiction/>` wrapper is set around it to keep it in the allowed size. This works mainly for image content.
+ */
+export const Default = Template.bind({});
+Default.args = {
+    children: <img src={png16to9} />,
 };

package/src/components/TextField/textfield.scss

@@ -4,8 +4,7 @@
 // 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;

package/src/components/Tooltip/Tooltip.tsx

@@ -20,7 +20,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
      */
     size?: "small" | "medium" | "large";
     /**
-     * The tolltip will be attached to this element when it is hovered.
+     * The tooltip will be attached to this element when it is hovered.
      */
     children: React.ReactNode | React.ReactNode[];
     /**

package/src/components/Typography/HtmlContentBlock.tsx

@@ -7,17 +7,29 @@ import * as TypographyClassNames from "./classnames";
 // FIXME: CMEM-3742: comment + add story
 
 export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
-    className?: string;
+    /**
+     * Content block uses smaller font size.
+     */
     small?: boolean;
+    /**
+     * To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line.
+     */
+    linebreakForced?: boolean;
+    /**
+     * No automatic line breaks are inserted.
+     */
+    linebreakPrevented?: boolean;
+    /**
+     * Sub elements like code blocks are displayed without own scrollbars.
+     * This option may infer with `linebreakForced` and `linebreakPrevented`.
+     */
+    noScrollbarsOnChildren?: boolean;
     /** currently not supported */
     large?: boolean;
     /** currently not supported */
     muted?: boolean;
     /** currently not supported */
     disabled?: boolean;
-    linebreakForced?: boolean;
-    linebreakPrevented?: boolean;
-    noScrollbarsOnChildren?: boolean;
 }
 
 export const HtmlContentBlock = ({

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

@@ -0,0 +1,50 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HtmlContentBlock } from "../../../index";
+
+const whiteSpaceSizeOptions = {
+    control: "select",
+    options: {
+        "not set": undefined,
+        tiny: "tiny",
+        small: "small",
+        regular: "regular",
+        large: "large",
+        xlarge: "xlarge",
+    },
+};
+
+export default {
+    title: "Components/Typography/HtmlContentBlock",
+    component: HtmlContentBlock,
+    argTypes: {
+        children: { control: false },
+    },
+} as Meta<typeof HtmlContentBlock>;
+
+const Template: StoryFn<typeof HtmlContentBlock> = (args) => <HtmlContentBlock {...args} />;
+
+const testContent = (
+    <>
+        <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        <p>
+            <strong>
+                {loremIpsum({
+                    p: 2,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                })
+                    .toString()
+                    .replaceAll(" ", "")}
+            </strong>
+        </p>
+        <LoremIpsum p={3} avgSentencesPerParagraph={5} random={false} />
+    </>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: testContent,
+};