@eccenca/gui-elements 24.0.0-rc.0 → 24.0.0-rc.2

package/src/components/FlexibleLayout/FlexibleLayoutItem.tsx

@@ -0,0 +1,59 @@
+import React, { forwardRef } from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface FlexibleLayoutItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Defines the ability for the item to grow.
+     * The factor defines how much space the item would take up compared to the other items with a grow factor greater than zero.
+     * Must be equal or greater than zero.
+     * With a factor of `0` the item cannot grow.
+     */
+    growFactor?: number;
+    /**
+     * Defines the ability for the item to shrink.
+     * The factor defines how strong the shrink effect has impact on the item compared to the other items with a shrink factor greater than zero.
+     * Must be equal or greater than zero.
+     * With a factor of `0` the item cannot shrink.
+     */
+    shrinkFactor?: number;
+}
+
+/**
+ * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned.
+ * `FlexibleLayoutItem`s can contain `FlexibleLayoutContainer` for more partitions.
+ * `FlexibleLayoutItem` siblings will share all available space from the `FlexibleLayoutContainer` container.
+ */
+export const FlexibleLayoutItem = forwardRef<HTMLDivElement, FlexibleLayoutItemProps>(
+    (
+        {
+            children,
+            className = "",
+            growFactor = 1,
+            shrinkFactor = 1,
+            style,
+            ...otherDivProps
+        }: FlexibleLayoutItemProps,
+        ref
+    ) => {
+        const sizing = {} as any;
+        if (typeof growFactor !== "undefined" && growFactor >= 0 && growFactor !== 1) {
+            sizing[`--${eccgui}-flexible-item-grow`] = growFactor.toString(10);
+        }
+        if (typeof shrinkFactor !== "undefined" && shrinkFactor >= 0 && shrinkFactor !== 1) {
+            sizing[`--${eccgui}-flexible-item-shrink`] = shrinkFactor.toString(10);
+        }
+        return (
+            <div
+                className={`${eccgui}-flexible__item` + (className ? " " + className : "")}
+                style={{ ...(style ?? {}), ...sizing }}
+                ref={ref}
+                {...otherDivProps}
+            >
+                {children}
+            </div>
+        );
+    }
+);
+
+export default FlexibleLayoutItem;

package/src/components/FlexibleLayout/flexiblelayout.scss

@@ -0,0 +1,48 @@
+.#{$eccgui}-flexible__container {
+    --#{$eccgui}-flexible-item-shrink: 1;
+    --#{$eccgui}-flexible-item-grow: 1;
+    --#{$eccgui}-flexible-container-gapsize: 0;
+
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: var(--#{$eccgui}-flexible-container-gapsize);
+    place-content: stretch center;
+    align-items: stretch;
+    width: 100%;
+}
+
+.#{$eccgui}-flexible__container--absolutespace {
+    position: absolute;
+    inset: 0;
+}
+
+.#{$eccgui}-flexible__container--vertical {
+    flex-direction: column;
+}
+
+.#{$eccgui}-flexible__container--gap-tiny {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 0.25};
+}
+.#{$eccgui}-flexible__container--gap-small {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 0.5};
+}
+.#{$eccgui}-flexible__container--gap-medium {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace};
+}
+.#{$eccgui}-flexible__container--gap-large {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 1.5};
+}
+.#{$eccgui}-flexible__container--gap-xlarge {
+    --#{$eccgui}-flexible-container-gapsize: #{$eccgui-size-block-whitespace * 2};
+}
+
+.#{$eccgui}-flexible__item {
+    position: relative;
+    flex: var(--#{$eccgui}-flexible-item-grow) var(--#{$eccgui}-flexible-item-shrink) 100%;
+    min-width: 0;
+
+    .#{$eccgui}-flexible__container--notequalitemspace > & {
+        flex-basis: auto;
+    }
+}

package/src/components/FlexibleLayout/index.ts

@@ -0,0 +1,2 @@
+export * from "./FlexibleLayoutContainer";
+export * from "./FlexibleLayoutItem";

package/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Divider, FlexibleLayoutContainer, FlexibleLayoutItem, HtmlContentBlock } from "../../../../index";
+
+export default {
+    title: "Components/FlexibleLayout/Container",
+    component: FlexibleLayoutContainer,
+} as Meta<typeof FlexibleLayoutContainer>;
+
+const Template: StoryFn<typeof FlexibleLayoutContainer> = (args) => (
+    <div style={{ position: "relative", height: "400px" }}>
+        <FlexibleLayoutContainer {...args}>
+            <FlexibleLayoutItem>
+                <HtmlContentBlock>
+                    <LoremIpsum p={1} avgSentencesPerParagraph={3} random={false} />
+                </HtmlContentBlock>
+            </FlexibleLayoutItem>
+            <FlexibleLayoutItem>
+                <Divider />
+                <HtmlContentBlock>
+                    <LoremIpsum p={3} avgSentencesPerParagraph={2} random={false} />
+                </HtmlContentBlock>
+            </FlexibleLayoutItem>
+        </FlexibleLayoutContainer>
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { FlexibleLayoutContainer, FlexibleLayoutItem, HtmlContentBlock } from "../../../../index";
+
+export default {
+    title: "Components/FlexibleLayout/Item",
+    component: FlexibleLayoutItem,
+} as Meta<typeof FlexibleLayoutItem>;
+
+const Template: StoryFn<typeof FlexibleLayoutItem> = (args) => (
+    <FlexibleLayoutContainer horizontal>
+        <FlexibleLayoutItem {...args}>
+            <HtmlContentBlock>
+                <LoremIpsum p={1} avgSentencesPerParagraph={1} avgWordsPerSentence={3} random={false} />
+            </HtmlContentBlock>
+        </FlexibleLayoutItem>
+        <FlexibleLayoutItem>
+            <HtmlContentBlock>
+                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+        </FlexibleLayoutItem>
+    </FlexibleLayoutContainer>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/Icon/canonicalIconNames.tsx

@@ -66,9 +66,9 @@ const canonicalIcons = {
     "entity-robot": icons.Bot,
 
     "item-add-artefact": icons.AddAlt,
-    "item-clone": icons.Copy,
+    "item-clone": icons.Replicate,
     "item-comment": icons.AddComment,
-    "item-copy": icons.CopyFile,
+    "item-copy": icons.Copy,
     "item-download": icons.Download,
     "item-draggable": icons.Draggable,
     "item-edit": icons.Edit,

package/src/components/Label/Label.tsx

@@ -30,6 +30,10 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * If there is no `isLayoutForElement` set then a `span` is used.
      */
     disabled?: boolean;
+    /**
+     * visual appearance of the label
+     */
+    emphasis?: "strong" | "normal";
 }
 
 export const Label = ({
@@ -41,6 +45,7 @@ export const Label = ({
     tooltip,
     tooltipProps,
     isLayoutForElement = "label",
+    emphasis = "normal",
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -66,7 +71,7 @@ export const Label = ({
             htmlElementstring,
             {
                 className:
-                    `${eccgui}-label` +
+                    `${eccgui}-label ${eccgui}-label--${emphasis}` +
                     (className ? " " + className : "") +
                     (disabled ? ` ${eccgui}-label--disabled` : ""),
                 ...otherLabelProps,

package/src/components/Label/label.scss

@@ -21,6 +21,12 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
     opacity: $eccgui-opacity-disabled;
 }
 
+.#{$eccgui}-label--strong {
+    .#{$eccgui}-label__text {
+        font-weight: bolder;
+    }
+}
+
 .#{$eccgui}-label__text {
     .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
         display: block;

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -2,12 +2,35 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type PropertyValueListProps = React.HTMLAttributes<HTMLDListElement>;
+import { PropertyValuePair } from "./PropertyValuePair";
+
+export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {
+    /**
+     * Only use one single column and put property label and value below each other.
+     * This property is forwardd to direct `PropertyValuePair` children.
+     */
+    singleColumn?: boolean;
+}
+
+export const PropertyValueList = ({
+    className = "",
+    children,
+    singleColumn = false,
+    ...otherProps
+}: PropertyValueListProps) => {
+    const alteredChildren = singleColumn
+        ? React.Children.map(children, (child) => {
+              const originalChild = child as React.ReactElement;
+              if (originalChild && originalChild.type && originalChild.type === PropertyValuePair) {
+                  return React.cloneElement(originalChild, { singleColumn: true });
+              }
+              return child;
+          })
+        : children;
 
-export const PropertyValueList = ({ className = "", children, ...otherProps }: PropertyValueListProps) => {
     return (
         <dl className={`${eccgui}-propertyvalue__list` + (className ? " " + className : "")} {...otherProps}>
-            {children}
+            {alteredChildren}
         </dl>
     );
 };

package/src/components/PropertyValuePair/PropertyValuePair.tsx

@@ -18,6 +18,10 @@ export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElem
      * Forward the `nowrap` option to it `PropertyName` and `PropertyValue` children.
      */
     nowrap?: boolean;
+    /**
+     * Only use one single column and put property label and value below each other.
+     */
+    singleColumn?: boolean;
 }
 
 export const PropertyValuePair = ({
@@ -26,6 +30,7 @@ export const PropertyValuePair = ({
     nowrap,
     hasSpacing = false,
     hasDivider = false,
+    singleColumn = false,
     ...otherProps
 }: PropertyValuePairProps) => {
     const alteredChildren = nowrap
@@ -44,7 +49,8 @@ export const PropertyValuePair = ({
                 `${eccgui}-propertyvalue__pair` +
                 (className ? " " + className : "") +
                 (hasSpacing ? ` ${eccgui}-propertyvalue__pair--hasspacing` : "") +
-                (hasDivider ? ` ${eccgui}-propertyvalue__pair--hasdivider` : "")
+                (hasDivider ? ` ${eccgui}-propertyvalue__pair--hasdivider` : "") +
+                (singleColumn ? ` ${eccgui}-propertyvalue__pair--singlecolumn` : "")
             }
             {...otherProps}
         >

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -34,32 +34,41 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    min-height: $eccgui-size-textfield-height-regular;
+
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        min-height: $eccgui-size-textfield-height-regular;
+    }
 }
 
 .#{$eccgui}-propertyvalue__property {
-    float: left;
-    width: math.div(3, 16) * 100%;
-    overflow: hidden;
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        float: left;
+        width: math.div(3, 16) * 100%;
+        overflow: hidden;
 
-    & > div {
-        margin-right: $eccgui-size-block-whitespace;
+        & > div {
+            margin-right: $eccgui-size-block-whitespace;
+        }
     }
 }
 
 .#{$eccgui}-propertyvalue__property--small {
-    width: math.div(2, 16) * 100%;
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        width: math.div(2, 16) * 100%;
 
-    & + .#{$eccgui}-propertyvalue__value {
-        margin-left: math.div(2, 16) * 100%;
+        & + .#{$eccgui}-propertyvalue__value {
+            margin-left: math.div(2, 16) * 100%;
+        }
     }
 }
 
 .#{$eccgui}-propertyvalue__property--large {
-    width: math.div(5, 16) * 100%;
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        width: math.div(5, 16) * 100%;
 
-    & + .#{$eccgui}-propertyvalue__value {
-        margin-left: math.div(5, 16) * 100%;
+        & + .#{$eccgui}-propertyvalue__value {
+            margin-left: math.div(5, 16) * 100%;
+        }
     }
 }
 
@@ -70,7 +79,10 @@
 
 .#{$eccgui}-propertyvalue__value {
     box-sizing: content-box;
-    margin-left: math.div(3, 16) * 100%;
+
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        margin-left: math.div(3, 16) * 100%;
+    }
 
     &:not(:last-child) {
         .#{$eccgui}-propertyvalue__pair--hasdivider > & {

package/src/components/PropertyValuePair/stories/PropertyValueList.stories.tsx

@@ -14,7 +14,7 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Shoukd be one or more `<PropertyValuePair />` elements.",
+            description: "Should be one or more `<PropertyValuePair />` elements.",
         },
     },
 } as Meta<typeof PropertyValueList>;

package/src/components/PropertyValuePair/stories/PropertyValuePair.stories.tsx

@@ -16,7 +16,7 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Shoukd be `<PropertyName/>` and `<PropertyValue/>`, 1 of each.",
+            description: "Should be `<PropertyName/>` and `<PropertyValue/>`, 1 of each.",
         },
     },
 } as Meta<typeof PropertyValuePair>;

package/src/components/Typography/typography.scss

@@ -296,3 +296,54 @@ table {
         }
     }
 }
+
+// Highlight spots in text bodies
+
+:is(#{$eccgui-selector-text-spot-highlight}) {
+    position: relative;
+    text-decoration: none;
+    transition: text-decoration 2s allow-discrete;
+
+    &::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        content: " ";
+        background-color: $eccgui-color-primary;
+        opacity: 1;
+        transition: all 1s ease-in;
+    }
+
+    &:empty {
+        &::before {
+            border-radius: 100%;
+        }
+    }
+
+    &:target,
+    &.#{$eccgui}-typography--spothighlight {
+        text-decoration: underline;
+        text-decoration-style: dotted;
+        text-decoration-color: $eccgui-color-accent;
+
+        &::before {
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            opacity: 0;
+        }
+
+        &:empty {
+            &::before {
+                top: -2.5 * $eccgui-size-block-whitespace;
+                left: -2.5 * $eccgui-size-block-whitespace;
+                width: 5 * $eccgui-size-block-whitespace;
+                height: 5 * $eccgui-size-block-whitespace;
+            }
+        }
+    }
+}

package/src/components/index.scss

@@ -6,6 +6,7 @@
 @import "./Checkbox/checkbox";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
+@import "./FlexibleLayout/flexiblelayout";
 @import "./Form/form";
 @import "./Grid/grid";
 @import "./HoverToggler/hovertoggler";

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from "./Checkbox/Checkbox";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
+export * from "./FlexibleLayout";
 export * from "./Form";
 export * from "./Grid";
 export * from "./HoverToggler/HoverToggler";

package/src/configuration/_variables.scss

@@ -80,6 +80,10 @@ $eccgui-opacity-invisible: 0 !default;
 $eccgui-zindex-modals: 8001 !default; // higher than carbon ui shell header
 $eccgui-zindex-overlays: 10001 !default; // add delta to dialog portals
 
+// -- Dynamic selectors --------------------------------------------------------
+
+$eccgui-selector-text-spot-highlight: "unknownelement" !default;
+
 // -- Calculation of more config vars ------------------------------------------
 
 /*