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

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LogoReact } from "@carbon/icons-react";
+import { Badge, Icon, TestIcon } from "../../../index";
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
+export default {
+    title: "Components/Badge",
+    component: Badge,
+    argTypes: {
+        children: {
+            control: "select",
+            options: ["Number", "Text", "Named icon", "Test icon"],
+            mapping: {
+                "Number": 123123,
+                "Text": "Label text",
+                "Named icon": <Icon name="item-viewdetails" />,
+                "Test icon": <TestIcon tryout={LogoReact} />,
+            },
+        },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
+    },
+} as ComponentMeta<typeof Badge>;
+
+const TemplateFull: ComponentStory<typeof Badge> = (args) => (
+    <div style={{position: "relative", border: "solid 1px", width: "10rem"}}>
+        Element area
+        {" "}
+        <Badge {...args} />
+    </div>
+);
+
+export const FullExample = TemplateFull.bind({});
+FullExample.args = {
+    children: "123"
+};
+
+export const WithTitletip = TemplateFull.bind({});
+WithTitletip.args = {
+    position: "bottom-right",
+    children: 1000,
+    maxLength: 3,
+    intent: "info",
+    tagProps: {htmlTitle: "1000 messages available"},
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import Tag, { TagProps } from "../Tag/Tag";
+import { IconProps } from "../Icon/Icon";
+import { TestIconProps } from "../Icon/TestIcon";
+import { IntentTypes } from "../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /**
+     * The badge only accepts numbers, text and ions as valid content.
+     */
+    children: string | number | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
+    /**
+     * Position relative to the parent element where the badge is displayed.
+     * `top-right` and `bottom-right` relate to the closest parent element that uses a `relative` or similar positioning.
+     */
+    position?: "inline" | "top-right" | "bottom-right";
+    /**
+     * Size of the badge.
+     */
+    size?: "small" | "medium" | "large"
+    /**
+     * Maximum characters used by the badge.
+     * Text will be ellipsed, a number is displayed for example a 99+.
+     * `maxLength` need to be at least 2, otherwise it's ignored.
+     * For text it is only a raw measurement, not always an exact character count.
+     */
+    maxLength?: number;
+    /**
+     * Meaning of the badge.
+     */
+    intent?: IntentTypes;
+    /**
+     * Internally the `<Tag/>` element is used for the badge.
+     * Forward other options to the tag.
+     * This may overwrite properties set by the badge, use it with care.
+     */
+    tagProps?: TagProps;
+}
+
+/**
+ * Display a badge element to add more context to another element.
+ * It can display icons, text and numbers.
+ */
+export function Badge({
+  children,
+  className = "",
+  position = "inline",
+  size = "medium",
+  maxLength,
+  intent,
+  tagProps,
+  ...spanProps
+}: BadgeProps) {
+    let badgeContent = children;
+    // shorten number values
+    // for maxLength=3 display 99+ instead of 1023.
+    if (
+        typeof children === "number" &&
+        maxLength &&
+        maxLength > 1 &&
+        children >= Math.pow(10, maxLength-1)
+    ) {
+        badgeContent = `${Math.pow(10, maxLength-1) - 1}+`
+    }
+    if (typeof children === "object") {
+        badgeContent = "";
+    }
+    return (
+        <span
+            className={
+                `${eccgui}-badge ${eccgui}-badge--${position}` +
+                (typeof children === "object" ? ` ${eccgui}-badge--icon` : '')
+            }
+            {...spanProps}
+        >
+            <Tag
+                className={`${eccgui}-badge__tag`}
+                round
+                small={size === "small"}
+                large={size === "large"}
+                emphasis={!intent ? "stronger" : undefined}
+                intent={intent}
+                minimal={!!intent ? false : true}
+                icon={typeof children === "object" ? children : undefined}
+                style={(typeof children === "string" && maxLength && maxLength > 1) ? {maxWidth: `calc((${maxLength-1}em + ${maxLength-1}ch)/2)`} : {}}
+                {...tagProps}
+            >
+                {badgeContent}
+            </Tag>
+        </span>
+    );
+}

package/src/components/Badge/badge.scss

@@ -0,0 +1,44 @@
+.#{$eccgui}-badge__tag {
+    padding: 0 $tag-padding-top * 0.5;
+    text-align: center;
+
+    &.#{$ns}-round {
+        padding: 0 $tag-padding-top * 0.5;
+    }
+
+    .#{$eccgui}-badge--icon & {
+        padding: 0;
+        min-height: 0;
+        min-width: 0;
+    }
+}
+
+.#{$eccgui}-badge--inline {
+    display: inline-block;
+
+    &.#{$eccgui}-badge--icon {
+        vertical-align: middle;
+    }
+}
+
+.#{$eccgui}-badge--bottom-right {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    .#{$eccgui}-badge__tag {
+        right: -50%;
+        bottom: -0.5 * $eccgui-size-inline-whitespace;
+    }
+}
+
+.#{$eccgui}-badge--top-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    .#{$eccgui}-badge__tag {
+        right: -50%;
+        top: -0.5 * $eccgui-size-inline-whitespace;
+    }
+}

package/src/components/Depiction/Depiction.tsx

@@ -0,0 +1,198 @@
+import React, {useCallback, useEffect, useRef} from "react";
+import Color from "color";
+import SVG from 'react-inlinesvg';
+import { BadgeProps } from "../Badge/Badge";
+import { IconProps } from "../Icon/Icon";
+import { TestIconProps } from "../Icon/TestIcon";
+import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
+import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+
+export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Image that should be used as depiction.
+     */
+    image: React.ReactElement<IconProps | TestIconProps | React.ImgHTMLAttributes<HTMLImageElement> | React.SVGProps<SVGSVGElement>>;
+    /**
+     * In case you use an SVG encoded as a data URL in the `<img />` element, then it is transformed to a inline SVG inside the DOM tree.
+     * Should be work with Base64 and URL encoded data URIs.
+     */
+    forceInlineSvg?: boolean;
+    /**
+     * Sets the height of the depiction, not the dimension (width x height).
+     */
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge" | "source";
+    /**
+     * Resizing strategy for image to match the given ratio.
+     * * contain: image is fully visible in the depiction
+     * * cover: the image fully covers the depition area but it may displayed only partially
+     * * stretch: image is streched to fill the depiction area
+     */
+    resizing?: "contain" | "cover" | "stretch";
+    /**
+     * Aspect ration of the depiction.
+     */
+    ratio?: "1:1" | "source"; // | "3:2" | "5:4" | "16:9"
+    /**
+     * Use a fully rounded shape on the depiction edges.
+     * Combined with `ratio="1:1"` its displayed within a circular shape.
+     */
+    rounded?: boolean;
+    /**
+     * Color that is used for the depiction background.
+     * This may be important if you use PNG, SVG or other image types that can have transparent background areas.
+     */
+    backgroundColor?: Color | string | "light" | "dark";
+    /**
+     * The depiction is displayed with a border around it.
+     */
+    border?: boolean;
+    /**
+     * Add padding around the image inside the depiction.
+     * The amount of padding is defined relative to the depiction size, so a small padding on a small depiction is displayed smaller than a small padding on a large depiction.
+     */
+    padding?: "none" | "tiny" | "small" | "medium" | "large";
+    /**
+     * Description of the depiction.
+     */
+    caption?: string | JSX.Element;
+    /**
+     * How is the caption displayed.
+     */
+    captionPosition?: "none" | "tooltip";
+    /**
+     * In case of `captionPosition="tooltip"` this can be used to set the properties of the Tooltip element.
+     */
+    tooltipProps?: TooltipProps;
+    /**
+     * Attach a `<Badge />` element to the depiction.
+     */
+    badge?: React.ReactElement<BadgeProps>,
+}
+
+/**
+ * Display a graphical representation and attache a caption or a badge to it.
+ */
+export function Depiction({
+    className = "",
+    image,
+    forceInlineSvg = false,
+    size="medium",
+    resizing="cover",
+    ratio="source",
+    caption,
+    captionPosition="none",
+    backgroundColor,
+    border,
+    rounded,
+    padding = "none",
+    badge,
+    tooltipProps,
+    ...otherFigureProps
+}: DepictionProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
+            let color = Color("#ffffff")
+            try {
+                color = Color(backgroundColor);
+            } catch(ex) {
+                console.warn("Received invalid background color for depiction: " + backgroundColor)
+            }
+            containerRef.current!.style.setProperty(`--${eccgui}-depiction-background`, color.rgb().toString());
+            containerRef.current!.style.setProperty(`--${eccgui}-depiction-color`, decideContrastColorValue({testColor: color}));
+        }
+    }, [backgroundColor]);
+
+    const updateSvgResizing = React.useCallback((el: SVGElement) => {
+        let preserveAspectRatio = "";
+        switch (resizing) {
+            case "cover":
+                preserveAspectRatio = "xMidYMid slice";
+                break;
+            case "stretch":
+                preserveAspectRatio = "none";
+                break;
+        }
+        el.setAttribute("preserveAspectRatio", preserveAspectRatio);
+    }, [resizing])
+
+    const inlineSvgCall = useCallback((svgElement: SVGElement) => {
+        if(svgElement) {
+            updateSvgResizing(svgElement)
+        }
+    }, [updateSvgResizing]);
+
+    useEffect(() => {
+        // Resize element after every render
+        const svgElement = containerRef.current!.getElementsByTagName("svg");
+        if (svgElement.length > 0) {
+            updateSvgResizing(svgElement[0]);
+        }
+    })
+
+    let depiction = image;
+    if (
+        forceInlineSvg &&
+        image.type === "img" &&
+        "src" in image.props &&
+        !!image.props.src &&
+        image.props.src.startsWith("data:image/svg+xml")
+    ) {
+        depiction = (
+            <SVG
+                src={image.props.src}
+                innerRef={inlineSvgCall}
+            >
+                {image}
+            </SVG>
+        )
+    }
+
+    const depictionContainer = (
+        <div
+            ref={containerRef}
+            className={
+                `${eccgui}-depiction__image` +
+                ` ${eccgui}-depiction__image--${size}` +
+                ` ${eccgui}-depiction__image--${resizing}-sizing` +
+                ` ${eccgui}-depiction__image--ratio-${ratio.replace(":", "to")}` +
+                (backgroundColor === "light" || backgroundColor === "dark" ? ` ${eccgui}-depiction__image--color-${backgroundColor}` : '') +
+                (!!backgroundColor ? ` ${eccgui}-depiction__image--color-config` : '') +
+                (border ? ` ${eccgui}-depiction__image--hasborder` : '') +
+                (rounded ? ` ${eccgui}-depiction__image--roundedborder` : '') +
+                (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : '')
+            }
+        >
+            {depiction}
+        </div>
+    );
+
+    return (
+        <figure
+            className={
+                `${eccgui}-depiction` +
+                (className ? ` ${className}` : '')
+            }
+            {...otherFigureProps}
+        >
+            { captionPosition === "tooltip" && !!caption ? (
+                <Tooltip content={caption} size="medium" {...tooltipProps}>{depictionContainer}</Tooltip>
+            ) : (
+                depictionContainer
+            )}
+            {!!caption && (
+                <figcaption
+                    className={
+                        `${eccgui}-depiction__caption` +
+                        ` ${eccgui}-depiction__caption--${captionPosition}`
+                    }
+                >
+                    {caption}
+                </figcaption>
+            )}
+            {badge}
+        </figure>
+    );
+}

package/src/components/Depiction/depiction.scss

@@ -0,0 +1,176 @@
+$eccgui-size-depiction-height-tiny: mini-units(3) !default;
+$eccgui-size-depiction-height-small: mini-units(6) !default;
+$eccgui-size-depiction-height-medium: mini-units(12) !default;
+$eccgui-size-depiction-height-large: mini-units(24) !default;
+$eccgui-size-depiction-height-xlarge: mini-units(48) !default;
+
+$eccgui-color-depiction-background: $eccgui-color-workspace-text !default;
+$eccgui-color-depiction-text: $eccgui-color-workspace-background !default;
+$eccgui-size-depiction-border-radius: $pt-border-radius !default;
+
+
+.#{$eccgui}-depiction {
+    max-width: 100%;
+    display: inline-flex;
+    position: relative;
+
+    .#{$eccgui}-overviewitem__item > & {
+        flex-grow: 0;
+        flex-shrink: 0;
+        align-self: stretch;
+    }
+
+    & + .#{$eccgui}-overviewitem__description {
+        margin-left: mini-units(1);
+    }
+}
+
+.#{$eccgui}-depiction__image {
+    overflow: hidden;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: $eccgui-size-depiction-border-radius;
+
+    img, svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    .#{$eccgui}-icon {
+        vertical-align: initial;
+    }
+
+    /*
+    Fix for Firefox,
+    the width of .#{$eccgui}-depiction container is not reduced to its content
+    when .#{$eccgui}-depiction__image updated to the available height.
+    */
+    .#{$eccgui}-overviewitem__item > .#{$eccgui}-depiction & {
+        height: mini-units(6);
+    }
+    .#{$eccgui}-overviewitem__item--highdensity > .#{$eccgui}-depiction &,
+    .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item & {
+        height: $button-height;
+    }
+}
+
+.#{$eccgui}-depiction__image--ratio-source {
+    aspect-ratio: auto;
+
+    img, svg {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+
+.#{$eccgui}-depiction__image--ratio-1to1 {
+    aspect-ratio: 1/1;
+}
+
+.#{$eccgui}-depiction__image--contain-sizing {
+    img, svg {
+        object-fit: contain;
+    }
+}
+
+.#{$eccgui}-depiction__image--cover-sizing {
+    img, svg {
+        object-fit: cover;
+    }
+}
+
+.#{$eccgui}-depiction__image--stretch-sizing {
+    img, svg {
+        object-fit: fill;
+    }
+}
+
+.#{$eccgui}-depiction__image--tiny {
+    height: $eccgui-size-depiction-height-tiny;
+
+    &.#{$eccgui}-depiction__image--roundedborder {
+        border-radius: 0.5 * $eccgui-size-depiction-height-tiny;
+    }
+}
+.#{$eccgui}-depiction__image--small {
+    height: $eccgui-size-depiction-height-small;
+
+    &.#{$eccgui}-depiction__image--roundedborder {
+        border-radius: 0.5 * $eccgui-size-depiction-height-small;
+    }
+}
+.#{$eccgui}-depiction__image--medium {
+    height: $eccgui-size-depiction-height-medium;
+
+    &.#{$eccgui}-depiction__image--roundedborder {
+        border-radius: 0.5 * $eccgui-size-depiction-height-medium;
+    }
+}
+.#{$eccgui}-depiction__image--large {
+    height: $eccgui-size-depiction-height-large;
+
+    &.#{$eccgui}-depiction__image--roundedborder {
+        border-radius: 0.5 * $eccgui-size-depiction-height-large;
+    }
+}
+.#{$eccgui}-depiction__image--xlarge {
+    height: $eccgui-size-depiction-height-xlarge;
+
+    &.#{$eccgui}-depiction__image--roundedborder {
+        border-radius: 0.5 * $eccgui-size-depiction-height-xlarge;
+    }
+}
+.#{$eccgui}-depiction__image--source {
+    height: auto;
+
+    &.#{$eccgui}-depiction__image--roundedborder {
+        border-radius: 0.5 * $eccgui-size-depiction-height-xlarge;
+    }
+}
+
+.#{$eccgui}-depiction__image--padding-tiny {
+    padding: 5%;
+}
+
+.#{$eccgui}-depiction__image--padding-small {
+    padding: 8%;
+}
+
+.#{$eccgui}-depiction__image--padding-medium {
+    padding: 13%;
+}
+
+.#{$eccgui}-depiction__image--padding-large {
+    padding: 21%;
+}
+
+.#{$eccgui}-depiction__image--color-dark {
+    --#{$eccgui}-depiction-background: #{$eccgui-color-depiction-background};
+    --#{$eccgui}-depiction-color: #{$eccgui-color-depiction-text};
+}
+.#{$eccgui}-depiction__image--color-light {
+    --#{$eccgui}-depiction-background: #{$eccgui-color-depiction-text};
+    --#{$eccgui}-depiction-color: #{$eccgui-color-depiction-background};
+}
+.#{$eccgui}-depiction__image--color-config {
+    background: var(--#{$eccgui}-depiction-background);
+    color: var(--#{$eccgui}-depiction-color);
+
+    /*
+    Lead to more problems, even with our Carbon icons, that it "heals" unknown SVGs
+    svg, path, circle, ellipse, line, polygon, polyline, rect {
+        fill: currentColor;
+        stroke: transparent;
+    }
+    */
+}
+
+.#{$eccgui}-depiction__image--hasborder {
+    border: 1px solid currentColor;
+}
+
+.#{$eccgui}-depiction__caption--none,
+ .#{$eccgui}-depiction__caption--tooltip {
+    position: fixed;
+    left: -5000rem;
+}

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LogoReact } from "@carbon/icons-react";
+import { Badge, Depiction, Icon, TestIcon } from "../../../index";
+import canonicalIcons from "./../../Icon/canonicalIconNames";
+import png16to9 from "./test-16to9.png";
+import png9to16 from "./test-9to16.png";
+import svg16to9 from "./test-16to9.svg";
+import svg9to16 from "./test-9to16.svg";
+import svg16to9base64 from "./test-16to9.tobase64.svg";
+import svg9to16base64 from "./test-9to16.tobase64.svg";
+import { Svg16to9 } from "./test-16to9";
+import { Svg9to16 } from "./test-9to16";
+
+const allIcons = new Map([
+    ...Object.keys(canonicalIcons).map((keyId) => { return [`Icon: ${keyId}`, <Icon name={keyId} />] })
+]);
+
+const exampleImages = {
+    "PNG 16:9 as URL": <img src={png16to9} />,
+    "PNG 9:16 as URL": <img src={png9to16} />,
+    "SVG 16:9 as URL": <img src={svg16to9} />,
+    "SVG 9:16 as URL": <img src={svg9to16} />,
+    "SVG 16:9 as Base64": <img src={svg16to9base64} />,
+    "SVG 9:16 as Base64": <img src={svg9to16base64} />,
+    "SVG 16:9 as React element": <Svg16to9 />,
+    "SVG 9:16 as React element": <Svg9to16 />,
+    // "PNG 16:9 as Base64": <img src={`${base64Reader.result}`} />,
+    // "SVG 16:9 as Base64": <img src={`${base64Reader.result}`} />,
+    "Test icon": <TestIcon tryout={LogoReact} />,
+    ...Object.fromEntries(allIcons),
+};
+
+const exampleBadges = {
+    "No badge": undefined,
+    "Text badge (small, danger, bottom-right)": <Badge maxLength={5} intent="danger" position="bottom-right" size="small">Problem occured!</Badge>,
+    "Icon badge (accent, inline, bottom-right)": <Badge intent="info" position="bottom-right"><Icon name="application-useraccount" /></Badge>,
+    "Number badge (large, info, top-right)": <Badge maxLength={2} intent="info" position="top-right" size="large" children={123} />,
+}
+
+export default {
+    title: "Components/Depiction",
+    component: Depiction,
+    argTypes: {
+        image: {
+            control: "select",
+            options: Object.keys(exampleImages),
+            mapping: exampleImages,
+        },
+        backgroundColor: {
+            control: "color",
+        },
+        badge: {
+            control: "select",
+            options: Object.keys(exampleBadges),
+            mapping: exampleBadges,
+        },
+    },
+} as ComponentMeta<typeof Depiction>;
+
+const TemplateFull: ComponentStory<typeof Depiction> = (args) => (
+    <Depiction {...args} />
+);
+
+export const FullExample = TemplateFull.bind({});
+FullExample.args = {
+    image: <img src={png16to9} />,
+    caption: "This is a test description for the image."
+};

package/src/components/Depiction/stories/test-16to9.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>