@eccenca/gui-elements 23.0.0 → 23.1.0-rc.2

package/src/components/Depiction/stories/test-16to9.tobase64.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 1920 1080"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g>
+    <rect
+       style="fill:#ffeeaa;stroke:none;stroke-width:10.8677;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+       width="1920"
+       height="1080"
+       x="0"
+       y="0" />
+    <rect
+       style="fill:#fff6d5;stroke:#ffcc00;stroke-width:10;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+       width="1810"
+       height="970"
+       x="55"
+       y="55" />
+    <path
+       style="fill:none;stroke:#ffcc00;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
+       d="m 55,55 1810,970"
+    />
+    <path
+       style="fill:none;stroke:#ffcc00;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
+       d="M 55,1025 1865,55"
+    />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:Roboto"
+       x="592.71484"
+       y="587.39581"
+    ><tspan
+         x="592.71484"
+         y="587.39581">1920 x 1080</tspan></text>
+  </g>
+</svg>

package/src/components/Depiction/stories/test-16to9.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+export const Svg16to9 = () => {
+    return (
+        <svg
+           width="1920"
+           height="1080"
+           viewBox="0 0 1920 1080"
+           // preserveAspectRatio="xMidYMid slice"
+           version="1.1"
+           xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <rect
+               style={{fill:"#ffeeaa", stroke:"none", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
+               width="1920"
+               height="1080"
+               x="0"
+               y="0" />
+            <rect
+               style={{"fill":"#fff6d5", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
+               width="1810"
+               height="970"
+               x="55"
+               y="55" />
+            <path
+               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
+               d="m 55,55 1810,970"
+            />
+            <path
+               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
+               d="M 55,1025 1865,55"
+            />
+            <text
+               style={{fontStyle:"normal", fontVariant:"normal", fontWeight:"normal", fontStretch:"normal", fontSize:"133.333px", lineHeight:"1.25", fontFamily:"Roboto"}}
+               x="592.71484"
+               y="587.39581"
+            ><tspan
+                 x="592.71484"
+                 y="587.39581">1920 x 1080</tspan></text>
+          </g>
+        </svg>
+    );
+}

package/src/components/Depiction/stories/test-9to16.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1080"
+   height="1920"
+   viewBox="0 0 1080 1920"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+     transform="translate(-420,420)">
+    <rect
+       style="fill:#ffeeaa;stroke:none;stroke-width:10.8677;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+       width="1920"
+       height="1080"
+       x="-420"
+       y="-1500"
+       transform="rotate(90)" />
+    <rect
+       style="fill:#fff6d5;stroke:#ffcc00;stroke-width:10;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+       width="1810"
+       height="970"
+       x="-365"
+       y="-1445"
+       transform="rotate(90)" />
+    <path
+       style="fill:none;stroke:#ffcc00;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 1445,-365 475,1445"
+    />
+    <path
+       style="fill:none;stroke:#ffcc00;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 475,-365 970,1810"
+    />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:Roboto"
+       x="592.71576"
+       y="587.39569"
+    ><tspan
+         x="592.71576"
+         y="587.39569">1080 x 1920</tspan></text>
+  </g>
+</svg>

package/src/components/Depiction/stories/test-9to16.tobase64.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1080"
+   height="1920"
+   viewBox="0 0 1080 1920"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+     transform="translate(-420,420)">
+    <rect
+       style="fill:#ffeeaa;stroke:none;stroke-width:10.8677;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+       width="1920"
+       height="1080"
+       x="-420"
+       y="-1500"
+       transform="rotate(90)" />
+    <rect
+       style="fill:#fff6d5;stroke:#ffcc00;stroke-width:10;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+       width="1810"
+       height="970"
+       x="-365"
+       y="-1445"
+       transform="rotate(90)" />
+    <path
+       style="fill:none;stroke:#ffcc00;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 1445,-365 475,1445"
+    />
+    <path
+       style="fill:none;stroke:#ffcc00;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 475,-365 970,1810"
+    />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:Roboto"
+       x="592.71576"
+       y="587.39569"
+    ><tspan
+         x="592.71576"
+         y="587.39569">1080 x 1920</tspan></text>
+  </g>
+</svg>

package/src/components/Depiction/stories/test-9to16.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+export const Svg9to16 = () => {
+    return (
+        <svg
+           width="1080"
+           height="1920"
+           viewBox="0 0 1080 1920"
+           version="1.1"
+           id="svg5"
+           xmlns="http://www.w3.org/2000/svg"
+        >
+          <g transform="translate(-420,420)">
+            <rect
+               style={{fill:"#ffeeaa", stroke:"none", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
+               width="1920"
+               height="1080"
+               x="-420"
+               y="-1500"
+               transform="rotate(90)" />
+            <rect
+               style={{"fill":"#fff6d5", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
+               id="rect234"
+               width="1810"
+               height="970"
+               x="-365"
+               y="-1445"
+               transform="rotate(90)" />
+            <path
+               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
+               d="M 1445,-365 475,1445"
+               id="path1013" />
+            <path
+               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
+               d="m 475,-365 970,1810"
+               id="path1015" />
+            <text
+               style={{fontStyle:"normal", fontVariant:"normal", fontWeight:"normal", fontStretch:"normal", fontSize:"133.333px", lineHeight:"1.25", fontFamily:"Roboto"}}
+               x="592.71576"
+               y="587.39569"
+               id="text1797"><tspan
+                 id="tspan1795"
+                 x="592.71576"
+                 y="587.39569">1080 x 1920</tspan></text>
+          </g>
+        </svg>
+    );
+}

package/src/components/Grid/Grid.tsx

@@ -1,14 +1,32 @@
 import React from "react";
-// import PropTypes from 'prop-types';
-import { Grid as CarbonGrid } from "carbon-components-react";
+// @ts-ignore // FlexGrid is not part of @types/carbon-components-react
+import { FlexGrid as CarbonGrid, GridDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {GridDefaultProps} from "carbon-components-react/lib/components/Grid/Grid";
 
-interface GridProps extends GridDefaultProps {
+interface GridProps extends Omit<GridDefaultProps, "fullWidth"> {
+    /**
+     * The available grid height can be distributed between multiple rows.
+     * To do so the `verticalStretched` property must be set for the `<GridRow />` element that need to be stretched.
+     * This property can be set for multiple rows, then they share the available vertical space regarding their content.
+     */
     verticalStretchable?: boolean
+    /**
+     * Use the exact space defined by the parent element.
+     * This parent element must be displayed using a fixed, relative or absolute position.
+     */
     useAbsoluteSpace?: boolean
+    /**
+     * @deprecated
+     * This is set always by default.
+     */
+    fullWidth?: boolean
 }
 
+/**
+ * Layouts a grid that can contain rows and columns.
+ * Grids can also be stacked into other grids for more complex layouts.
+ * A very complex level of stacked grids is a sign that something should be designed differently.
+ */
 function Grid({
     children,
     verticalStretchable = false,

package/src/components/Grid/GridColumn.tsx

@@ -1,23 +1,40 @@
 import React from "react";
 // import PropTypes from 'prop-types';
-import { Column as CarbonColumn } from "carbon-components-react";
+import { Column as CarbonColumn, ColumnDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {ColumnDefaultProps} from "carbon-components-react/lib/components/Grid/Column";
 
 interface GridColumnProps extends ColumnDefaultProps {
+    /**
+     * Column width is small, using 3 (or 2, on medium viewports) parts out of 16.
+     * This boolean property is basically a quick switch for setting `{ md:2, lg:3 }`.
+     */
     small?: boolean
+    /**
+     * Column width is medium, using 5 (or 3, on medium viewports) parts out of 16.
+     * This boolean property is basically a quick switch for setting `{ md:3, lg:5 }`.
+     */
     medium?: boolean
+    /**
+     * Alignment of column content.
+     */
+    verticalAlign?: "top" | "center"
+    /**
+     * @deprecated
+     */
     full?: boolean
-    verticalAlign?: "center"
 }
 
+/**
+ * Grid columns can be used in grid rows.
+ * They can contain other grids if this is necessary for more complex layouts.
+ */
 function GridColumn({
     children,
     className = '',
     small = false,
     medium = false,
-    full = true,
-    verticalAlign,
+    full,
+    verticalAlign = "top",
     ...otherProps
 }: GridColumnProps) {
     let sizeConfig = {};
@@ -25,8 +42,8 @@ function GridColumn({
     if (medium) sizeConfig = { md:3, lg:5 };
     return (
         <CarbonColumn
-            {...otherProps}
             {...sizeConfig}
+            {...otherProps}
             className={
                 `${eccgui}-grid__column` +
                 (verticalAlign ? ` ${eccgui}-grid__column--vertical-` + verticalAlign : '') +

package/src/components/Grid/GridRow.tsx

@@ -1,15 +1,30 @@
 import React from "react";
 // import PropTypes from 'prop-types';
-import { Row as CarbonRow } from "carbon-components-react";
+import { Row as CarbonRow, RowDefaultProps } from "carbon-components-react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {RowDefaultProps} from "carbon-components-react/lib/components/Grid/Row";
 
 interface GridRowProps extends RowDefaultProps {
+    /**
+     * Do not wrap column children when there is not enough space available.
+     * This only works for grids on medium sized and larger viewports.
+     */
     dontWrapColumns?: boolean
+    /**
+     * Row uses maximum height of the workview.
+     */
     fullHeight?: boolean
+    /**
+     * When a row is vertically stretched then it uses the remaining spcae on the y-axis.
+     * Option can be used on multiple rows, then they share the available space.
+     * This makes only sense if the grid height is set by additional styles or properties.
+     * The grid must be set to `verticalStretchable=true`.
+     */
     verticalStretched?: boolean
 }
 
+/**
+ * Grid rows exists as children in a grid and can contain columns.
+ */
 function GridRow({
     children,
     className = "",

package/src/components/Grid/grid.scss

@@ -1,17 +1,12 @@
+@use "sass:map";
+
 // own vars
 $eccgui-size-grid-gutter: $eccgui-size-block-whitespace !default;
 
-// import lib requisits
-@import "~carbon-components/scss/globals/scss/feature-flags";
-@import "~carbon-components/scss/globals/scss/functions";
-@import "~carbon-components/scss/globals/scss/mixins";
-@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/mixins";
 // overwrite lib vars
-$carbon--grid-gutter: carbon--rem($eccgui-size-grid-gutter);
+$grid-gutter: rem($eccgui-size-grid-gutter);
 // load grid
-@include exports("grid") {
-    @include carbon--grid();
-}
+@import "~@carbon/styles/scss/grid/flexbox";
 
 // adjustments
 
@@ -39,13 +34,15 @@ $carbon--grid-gutter: carbon--rem($eccgui-size-grid-gutter);
 .#{$eccgui}-grid--absolutespace {
     position: absolute;
     top: 0;
-    left: 0.5rem;
-    right: 0.5rem;
+    left: 0.5 * $eccgui-size-grid-gutter;;
+    right: 0.5 * $eccgui-size-grid-gutter;;
     bottom: 0;
 }
 
 .#{$prefix}--row {
     flex-wrap: wrap;
+    margin-left: -0.5 * $eccgui-size-grid-gutter;;
+    margin-right: -0.5 * $eccgui-size-grid-gutter;;
 }
 
 .#{$eccgui}-grid__row--fullheight {
@@ -74,6 +71,8 @@ $carbon--grid-gutter: carbon--rem($eccgui-size-grid-gutter);
         @see https://css-tricks.com/flexbox-truncated-text/
     */
     min-width: 0;
+    padding-left: 0.5 * $eccgui-size-grid-gutter;;
+    padding-right: 0.5 * $eccgui-size-grid-gutter;;
 }
 
 .#{$eccgui}-grid__column {
@@ -84,6 +83,8 @@ $carbon--grid-gutter: carbon--rem($eccgui-size-grid-gutter);
     align-self: center;
 }
 
-.#{$eccgui}-grid__row--wrapcolumns {
-    flex-wrap: nowrap;
+.#{$eccgui}-grid__row--dontwrapcolumns {
+     @media (min-width: 42rem) { // Carbon breakpoint for medium viewports
+         flex-wrap: nowrap;
+     }
 }

package/src/components/Grid/stories/Grid.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Grid, GridRow, GridColumn } from "../../../../index";
+import { Default as RowExample } from "./GridRow.stories";
+
+export default {
+    title: "Components/Grid",
+    component: Grid,
+    subcomponents: { GridRow, GridColumn },
+    argTypes: {
+        children: {
+            control: "none",
+        }
+    },
+} as ComponentMeta<typeof Grid>;
+
+const Template: ComponentStory<typeof Grid> = (args) => (
+    <div style={{ minHeight: "30vh", position: "relative"}}>
+        <Grid {...args} />
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <GridRow {...RowExample.args} verticalStretched />,
+    verticalStretchable: true,
+}

package/src/components/Grid/stories/GridColumn.stories.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import { Grid, GridRow, GridColumn, HtmlContentBlock } from "../../../../index";
+
+export default {
+    title: "Components/Grid/Column",
+    component: GridColumn,
+    argTypes: {
+        children: {
+            control: "none",
+        }
+    },
+} as ComponentMeta<typeof GridColumn>;
+
+const Template: ComponentStory<typeof GridColumn> = (args) => (
+    <Grid>
+        <GridRow>
+            <GridColumn {...args} />
+        </GridRow>
+    </Grid>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <HtmlContentBlock>
+            <h2>This is a column.</h2>
+            <LoremIpsum p={2} avgSentencesPerParagraph={3} random={false} />
+        </HtmlContentBlock>
+    ),
+}
+
+const otherColumn = (
+    <GridColumn>
+        <HtmlContentBlock>
+            <h2>This is another column.</h2>
+            <LoremIpsum p={3} avgSentencesPerParagraph={2} random={false} />
+        </HtmlContentBlock>
+    </GridColumn>
+)
+
+const TemplateWidths: ComponentStory<typeof GridColumn> = (args) => (
+    <Grid>
+        <GridRow>
+            <GridColumn {...args} />
+        </GridRow>
+        <GridRow>
+            <GridColumn {...args} />
+            { otherColumn }
+        </GridRow>
+        <GridRow>
+            <GridColumn {...args} medium />
+            { otherColumn }
+        </GridRow>
+        <GridRow>
+            <GridColumn {...args} small />
+            { otherColumn }
+        </GridRow>
+    </Grid>
+);
+
+export const Widths = TemplateWidths.bind({});
+Widths.args = {
+    ...Default.args
+}

package/src/components/Grid/stories/GridRow.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Grid, GridRow, GridColumn } from "../../../../index";
+import { Default as ColumnExample } from "./GridColumn.stories";
+
+export default {
+    title: "Components/Grid/Row",
+    component: GridRow,
+    argTypes: {
+        children: {
+            control: "none",
+        }
+    },
+} as ComponentMeta<typeof GridRow>;
+
+const Template: ComponentStory<typeof GridRow> = (args) => (
+    <Grid style={{minHeight: "30vh"}} verticalStretchable>
+        <GridRow {...args} />
+    </Grid>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <GridColumn {...ColumnExample.args} verticalAlign="center" />,
+}
+
+const TemplateStretched: ComponentStory<typeof GridRow> = (args) => (
+    <Grid style={{minHeight: "50vh"}} verticalStretchable>
+        <GridRow {...args}>
+            <GridColumn>Top row.</GridColumn>
+        </GridRow>
+        <GridRow {...args} verticalStretched>
+            <GridColumn verticalAlign="center">Stretched row.</GridColumn>
+        </GridRow>
+        <GridRow {...args} verticalStretched>
+            <GridColumn verticalAlign="center">Stretched row.</GridColumn>
+        </GridRow>
+        <GridRow {...args}>
+            <GridColumn>Bottom row.</GridColumn>
+        </GridRow>
+    </Grid>
+);
+
+export const VerticalStretched = TemplateStretched.bind({});
+VerticalStretched.args = {
+    ...Default.args
+}

package/src/components/Icon/BaseIcon.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { IconProps as CarbonIconProps } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { IntentTypes } from "../../common/Intent";
+import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
+import { CarbonIconType } from "./canonicalIconNames"
+
+export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
+    /**
+     * Carbon icon component that is used.
+     */
+    iconComponent: CarbonIconType;
+    /**
+     * Add tooltip text to icon
+     */
+    tooltipText?: string,
+    /**
+     * Intent state of icon.
+     * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
+     */
+    intent?: IntentTypes
+    /**
+     * Display large icon version.
+     */
+    large?: boolean,
+    /**
+     * Display small icon version.
+     */
+    small?: boolean,
+    /**
+     * Additional CSS classes.
+     */
+    className?: string,
+    /**
+     * Description for icon as accessibility fallback.
+     */
+    description?: string,
+    /**
+     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
+     */
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>,
+}
+
+/**
+ * The base icon provides the basic functionality that is necessary to wrap the Carbon icon component.
+ */
+function BaseIcon({
+    iconComponent,
+    className = "",
+    large = false,
+    small = false,
+    tooltipText,
+    tooltipProps,
+    intent,
+    description,
+    ...restProps
+}: BaseIconProps) {
+    let sizeConfig = { height: 20, width: 20, size: 20 };
+    if (small) sizeConfig = { height: 16, width: 16, size: 16 };
+    if (large) sizeConfig = { height: 32, width: 32, size: 32 };
+    const CarbonIconNamed = iconComponent;
+
+    const icon = (
+        <CarbonIconNamed
+            {...restProps}
+            {...sizeConfig}
+            description={ description ?? (tooltipText ?? "")}
+            className={
+                `${eccgui}-icon` +
+                (intent ? ` ${eccgui}-intent--${intent}` : "") +
+                (!!className ? ` ${className}` : "")
+            }
+        />
+    );
+    return tooltipText ? (
+        <Tooltip content={tooltipText} {...tooltipProps}>
+            <span>{icon}</span>
+        </Tooltip>
+    ) : (
+        icon
+    );
+}
+
+export default BaseIcon;