@eccenca/gui-elements 6.2.0 → 22.0.0-rc.7

package/src/components/Notification/notification.scss

@@ -0,0 +1,83 @@
+// TODO: add vars and process them
+
+@import "~@blueprintjs/core/src/components/toast/toast";
+
+.#{$eccgui}-notification {
+    border-style: solid;
+    border-width: 1px 1px 1px 0.25rem;
+    border-color: $eccgui-color-application-text;
+    color: $eccgui-color-application-text;
+    background-color: $eccgui-color-application-background;
+    font-size: 1rem;
+    line-height: $eccgui-size-typo-base-lineheight;
+    min-width: 4/16 * 100vw;
+    width: 100%;
+    max-width: 40rem;
+    margin-top: $eccgui-size-block-whitespace;
+
+    & > .#{$eccgui}-icon {
+        color: inherit;
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+
+    &.#{$eccgui}-notification--static > .#{$ns}-button-group {
+        :last-child {
+            display: none;
+        }
+    }
+
+    &:not(.#{$eccgui}-notification--toast) {
+        max-width: none;
+        box-shadow: none;
+        margin-top: 0;
+    }
+
+    &.#{$eccgui}-intent--info {
+        border-color: $eccgui-color-info-text;
+        color: $eccgui-color-info-text;
+        background-color: $eccgui-color-info-background;
+    }
+    &.#{$eccgui}-intent--success {
+        border-color: $eccgui-color-success-text;
+        color: $eccgui-color-success-text;
+        background-color: $eccgui-color-success-background;
+    }
+    &.#{$eccgui}-intent--warning {
+        border-color: $eccgui-color-warning-text;
+        color: $eccgui-color-warning-text;
+        background-color: $eccgui-color-warning-background;
+    }
+    &.#{$eccgui}-intent--danger {
+        border-color: $eccgui-color-danger-text;
+        color: $eccgui-color-danger-text;
+        background-color: $eccgui-color-danger-background;
+    }
+}
+
+.#{$eccgui}-notification--fullwidth {
+    min-width: 0;
+    max-width: none;
+}
+
+.#{$eccgui}-notification__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin: -10px; // TODO: use blueprint var ofr toast padding here
+}
+
+.#{$eccgui}-notification__messagebody {
+    padding: 10px; // TODO: use blueprint var ofr toast padding here
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.#{$eccgui}-notification__actions {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .#{$ns}-button {
+        color: inherit;
+    }
+}

package/src/components/NumericInput/NumericInput.tsx

@@ -0,0 +1,4 @@
+import { NumericInput } from "@blueprintjs/core";
+import { memo } from "react";
+
+export default memo(NumericInput);

package/src/components/OverviewItem/OverviewItem.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Displays the element using reduced height and less white space inside.
+     */
+    densityHigh?: boolean;
+    /**
+     * Add a bit white space around the element.
+     */
+    hasSpacing?: boolean;
+}
+
+/**
+ * This element can include all basic information and actions to give an overview about the item.
+ * Mainly used in items list or to create basic widgets.
+ */
+function OverviewItem({
+    children,
+    className = '',
+    densityHigh = false,
+    hasSpacing = false,
+    ...otherProps
+}: OverviewItemProps) {
+
+    const item = (
+        <div
+            {...otherProps}
+            className={
+                `${eccgui}-overviewitem__item ` +
+                (densityHigh ? `${eccgui}-overviewitem__item--highdensity ` : '') +
+                (hasSpacing ? `${eccgui}-overviewitem__item--hasspacing ` : '') +
+                className
+            }
+        >
+            {children}
+        </div>
+    );
+
+    let accessibilityParameters:  { [key: string]: any; } = {};
+    if (
+        typeof otherProps.onClick !== 'undefined' ||
+        typeof otherProps.onKeyDown !== 'undefined'
+    ) {
+        accessibilityParameters['tabIndex'] = 0;
+    }
+    if (
+        typeof otherProps.onClick !== 'undefined' &&
+        typeof otherProps.onKeyDown !== 'undefined'
+    ) {
+        accessibilityParameters['role'] = "button";
+    }
+
+    return React.cloneElement(
+            item,
+            accessibilityParameters
+    );
+}
+
+export default OverviewItem;

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Display it only when the parent `OverviewItem` is hovered or focused.
+     */
+    hiddenInteractions?: boolean;
+}
+
+/**
+ * Contains an arbitrary number of elements for user-interactions.
+ * It does not make sense to include more than 1 or 2 of these elements within `OverviewItem`.
+ */
+function OverviewItemActions ({
+    children,
+    className = '',
+    hiddenInteractions = false,
+    ...restProps
+}: OverviewItemActionsProps) {
+    return (
+        <div
+            {...restProps}
+            className={
+                `${eccgui}-overviewitem__actions` +
+                (hiddenInteractions ? ` ${eccgui}-overviewitem__actions--hiddeninteractions ` : '') +
+                (!!className ? ` ${className}` : '')
+            }
+        >
+            {children}
+        </div>
+    )
+}
+
+export default OverviewItemActions;

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDivElement> {
+    // by default the SVG depictions are displayed light on dark color, this property prevents it
+    keepColors?: boolean;
+}
+
+function OverviewItemDepiction({
+    children,
+    className = '',
+    keepColors = false,
+    ...restProps
+}: OverviewItemDepictionProps) {
+    return (
+        <div
+            {...restProps}
+            className={
+                `${eccgui}-overviewitem__depiction ` +
+                (keepColors ? `${eccgui}-overviewitem__depiction--keepcolors ` : "") +
+                className
+            }
+        >
+            {children}
+        </div>
+    )
+}
+
+export default OverviewItemDepiction;

package/src/components/OverviewItem/OverviewItemDescription.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function OverviewItemDescription({
+    children,
+    className = '',
+    ...restProps
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div {...restProps} className={`${eccgui}-overviewitem__description `+className}>
+            {children}
+        </div>
+    )
+}
+
+export default OverviewItemDescription;

package/src/components/OverviewItem/OverviewItemLine.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemLineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Use it with a small font size.
+     */
+    small?: boolean;
+    /**
+     * Use it with a large font size.
+     */
+    large?: boolean;
+}
+
+/**
+ * Contains content of a single line in an `OverviewItemDescription` element.
+ * It is limited to one line only, text is not broken to multiple lines on white spaces.
+ * If the content overflows the container then this part of the content is hidden.
+ * It does not make sense to include more that 2 or 3 of those lines within one `OverviewItemDescription`.
+ */
+function OverviewItemLine({
+    children,
+    className = '',
+    small=false,
+    large=false,
+    ...restProps
+}: OverviewItemLineProps) {
+    return (
+        <div
+            {...restProps}
+            className={
+                `${eccgui}-overviewitem__line ` +
+                (small ? `${eccgui}-overviewitem__line--small ` : '' ) +
+                (large ? `${eccgui}-overviewitem__line--large ` : '' ) +
+                className
+            }
+        >
+            {children}
+        </div>
+    )
+}
+
+export default OverviewItemLine;

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * Displays the element using reduced height and less white space inside.
+     */
+    densityHigh?: boolean;
+    /**
+     * Add a bit white space around each of the contained items.
+     */
+    hasSpacing?: boolean;
+    /**
+     * Insert a horizontal rule between list items.
+     */
+    hasDivider?: boolean;
+    /**
+     * Use multiple columns.
+     * Currently only lists using 1 and 2 columns are supported.
+     */
+    columns?: number;
+}
+
+/**
+ * This element can include all basic information and actions to give an overview about the item.
+ * Mainly used in items list or to create basic widgets.
+ */
+function OverviewItemList({
+    children,
+    className = '',
+    densityHigh = false,
+    hasDivider = false,
+    hasSpacing = false,
+    columns=1,
+    ...restProps
+}: OverviewItemListProps) {
+    return (
+        <ol
+            {...restProps}
+            className={
+                `${eccgui}-overviewitem__list ` +
+                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : '') +
+                (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : '') +
+                (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : '') +
+                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // TODO: add number
+                className
+            }
+        >
+            {
+                React.Children.map(children, (child, i) => {
+                    return <li>{ child }</li>
+                })
+            }
+        </ol>
+    )
+}
+
+export default OverviewItemList;

package/src/components/OverviewItem/index.tsx

@@ -0,0 +1,15 @@
+import OverviewItem from './OverviewItem';
+import OverviewItemDepiction from './OverviewItemDepiction';
+import OverviewItemDescription from './OverviewItemDescription';
+import OverviewItemLine from './OverviewItemLine';
+import OverviewItemActions from './OverviewItemActions';
+import OverviewItemList from './OverviewItemList';
+
+export {
+    OverviewItem,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+    OverviewItemLine,
+    OverviewItemActions,
+    OverviewItemList,
+};

package/src/components/OverviewItem/overviewitem.scss

@@ -0,0 +1,193 @@
+$eccgui-color-overviewitem-divider: $ui-03 !default;
+$eccgui-size-overviewitem-spacing: $eccgui-size-typo-base/2 !default;
+
+$eccgui-color-overviewitem-depiction-background: $eccgui-color-workspace-text !default;
+$eccgui-color-overviewitem-depiction-text: $eccgui-color-workspace-background !default;
+$eccgui-size-overviewitem-depiction-border-radius: $pt-border-radius !default;
+
+$eccgui-size-overviewitem-line-typo-small: $eccgui-size-typo-caption !default;
+$eccgui-size-overviewitem-line-typo-small-lineheight: $eccgui-size-typo-caption-lineheight !default;
+$eccgui-size-overviewitem-line-typo-large: $eccgui-size-typo-subtitle !default;
+$eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle-lineheight !default;
+
+.#{$eccgui}-overviewitem__list--hascolumns {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: stretch;
+
+    & > li {
+        width: calc(1/2 * 100% - #{$eccgui-size-overviewitem-spacing});
+
+        &:nth-child(odd) {
+            margin-right: $eccgui-size-overviewitem-spacing;
+        }
+    }
+
+    &.#{$eccgui}-overviewitem__list--hasspacing {
+        margin-left: -1 * $eccgui-size-overviewitem-spacing/2;
+        margin-right: -1 * $eccgui-size-overviewitem-spacing/2;
+
+        & > li {
+            box-sizing: border-box;
+            padding: $eccgui-size-overviewitem-spacing/2;
+        }
+    }
+}
+
+.#{$eccgui}-overviewitem__list--hasdivider > li:not(:last-child) {
+    border-bottom: 1px solid $eccgui-color-overviewitem-divider;
+}
+
+.#{$eccgui}-overviewitem__list--hasspacing:not(.#{$eccgui}-overviewitem__list--hascolumns) > li:not(:first-child) {
+    padding-top: $eccgui-size-overviewitem-spacing/2;
+}
+.#{$eccgui}-overviewitem__list--hasspacing:not(.#{$eccgui}-overviewitem__list--hascolumns) > li:not(:last-child) {
+    padding-bottom: $eccgui-size-overviewitem-spacing/2;
+}
+
+.#{$eccgui}-overviewitem__item {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    align-content: stretch;
+    height: mini-units(6);
+    max-width: 100%;
+
+    &[tabindex]:not([tabindex="-1"]) {
+        cursor: pointer;
+    }
+
+    .#{$ns}-menu > & {
+        // TODO: discuss if this should be enabled via explicit element property
+        @extend .#{$ns}-menu-item;
+
+        &--active {
+            background-color: $eccgui-color-accent;
+            color: $eccgui-color-accent-contrast;
+        }
+    }
+}
+
+.#{$eccgui}-overviewitem__item--highdensity,
+.#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
+    height: $button-height; //mini-units(4);
+
+    & > .#{$eccgui}-overviewitem__depiction {
+        width: $button-height; //mini-units(4);
+        height: $button-height; //mini-units(4);
+    }
+}
+
+.#{$eccgui}-overviewitem__item--hasspacing {
+    box-sizing: content-box;
+    padding: $eccgui-size-overviewitem-spacing/2;
+
+    &.#{$eccgui}-overviewitem__item--highdensity,
+    .#{$eccgui}-overviewitem__list--highdensity > li > & {
+        box-sizing: border-box;
+
+        & > .#{$eccgui}-overviewitem__depiction {
+            width: calc(#{$button-height} - #{$eccgui-size-overviewitem-spacing});
+            height: calc(#{$button-height} - #{$eccgui-size-overviewitem-spacing});
+        }
+    }
+}
+
+.#{$eccgui}-overviewitem__depiction {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: mini-units(6);
+    height: mini-units(6);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    text-align: center;
+    border-radius: $eccgui-size-overviewitem-depiction-border-radius;
+
+    & > * {
+        width: auto;
+        max-height: 100%;
+        display: block;
+        margin: 0 auto;
+    }
+
+    &:not(.#{$eccgui}-overviewitem__depiction--keepcolors) {
+        background-color: $eccgui-color-overviewitem-depiction-background;
+        color: $eccgui-color-overviewitem-depiction-text;
+        svg {
+            fill: $eccgui-color-overviewitem-depiction-text;
+        }
+    }
+}
+
+.#{$eccgui}-overviewitem__description {
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    align-content: stretch;
+    overflow: hidden;
+
+    .#{$eccgui}-overviewitem__depiction + & {
+        margin-left: mini-units(1);
+    }
+}
+
+.#{$eccgui}-overviewitem__line {
+    flex-shrink: 1;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 1rem;
+
+    & > * {
+        display: inline-block;
+        font-size: inherit;
+        max-width: 100%;
+    }
+}
+
+.#{$eccgui}-overviewitem__line--small {
+    font-size: $eccgui-size-overviewitem-line-typo-small;
+    line-height: $eccgui-size-overviewitem-line-typo-small-lineheight
+}
+
+.#{$eccgui}-overviewitem__line--large {
+    font-size: $eccgui-size-overviewitem-line-typo-large;
+    line-height: $eccgui-size-overviewitem-line-typo-large-lineheight;
+}
+
+.#{$eccgui}-overviewitem__actions {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: center;
+
+    //.#{$eccgui}-overviewitem__description + & {
+        margin-left: mini-units(1);
+    //}
+}
+
+.#{$eccgui}-overviewitem__actions--hiddeninteractions {
+    .#{$eccgui}-overviewitem__item > & {
+        display: none;
+    }
+
+    .#{$eccgui}-overviewitem__item:hover &,
+    .#{$eccgui}-overviewitem__item:focus &,
+    .#{$eccgui}-overviewitem__item:active & {
+        display: flex;
+    }
+}

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+    OverviewItem,
+    OverviewItemActions,
+    OverviewItemDepiction,
+    OverviewItemDescription,
+} from "./../";
+
+import Card from "../../Card/Card";
+
+import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
+import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
+import { Default as ActionsExample } from "./OverviewItemActions.stories";
+
+export default {
+    title: "Components/OverviewItem",
+    component: OverviewItem,
+    subcomponents: {
+        OverviewItemDepiction,
+        OverviewItemDescription,
+        OverviewItemActions,
+        Card,
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements used as depiction, text and interactive elements of an overview-item."
+        }
+    },
+} as ComponentMeta<typeof OverviewItem>;
+
+const Template: ComponentStory<typeof OverviewItem> = (args) => (
+    <OverviewItem {...args}></OverviewItem>
+);
+
+export const ItemExample = Template.bind({});
+ItemExample.args = {
+    children: [
+        <OverviewItemDepiction { ...DepictionExample.args } />,
+        <OverviewItemDescription { ...DescriptionExample.args } />,
+        <OverviewItemActions children={ ActionsExample.args.children[0] } hiddenInteractions />,
+        <OverviewItemActions children={ ActionsExample.args.children[1] } />
+    ]
+}
+
+const TemplateCard: ComponentStory<typeof OverviewItem> = (args) => (
+    <Card isOnlyLayout><OverviewItem {...args}></OverviewItem></Card>
+);
+
+export const ItemInCard = TemplateCard.bind({});
+ItemInCard.args = {
+    ...ItemExample.args,
+    hasSpacing: true,
+}

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import IconButton from "../../Icon/IconButton";
+import Button from "../../Button/Button";
+import ContextMenu from "../../ContextOverlay/ContextMenu";
+
+import OverviewItemActions from "./../OverviewItemActions";
+
+export default {
+  title: "Components/OverviewItem/OverviewItemActions",
+  component: OverviewItemActions,
+  subcomponents: { Button, IconButton, ContextMenu },
+  argTypes: {
+      children: {
+          control: "none",
+          description: "User-interactive elements."
+      }
+  },
+} as ComponentMeta<typeof OverviewItemActions>;
+
+const Template: ComponentStory<typeof OverviewItemActions> = (args) => (
+  <OverviewItemActions {...args}></OverviewItemActions>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <IconButton name="item-remove" tooltip="Remove this item" disruptive />,
+        <Button affirmative>Other action</Button>
+    ]
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import Icon from "../../Icon/Icon";
+
+import OverviewItemDepiction from "./../OverviewItemDepiction";
+
+export default {
+  title: "Components/OverviewItem/OverviewItemDepiction",
+  component: OverviewItemDepiction,
+  subcomponents: {Icon },
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Element used as depiction."
+      }
+  },
+} as ComponentMeta<typeof OverviewItemDepiction>;
+
+const Template: ComponentStory<typeof OverviewItemDepiction> = (args) => (
+  <OverviewItemDepiction {...args}></OverviewItemDepiction>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <Icon name="artefact-dataset" />
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import OverviewItemDescription from "./../OverviewItemDescription";
+import OverviewItemLine from "./../OverviewItemLine";
+
+export default {
+  title: "Components/OverviewItem/OverviewItemDescription",
+  component: OverviewItemDescription,
+  subcomponents: {
+      OverviewItemLine
+  },
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Elements for text content."
+      }
+  },
+} as ComponentMeta<typeof OverviewItemDescription>;
+
+const Template: ComponentStory<typeof OverviewItemDescription> = (args) => (
+  <OverviewItemDescription {...args}></OverviewItemDescription>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <OverviewItemLine large><h4>Item title</h4></OverviewItemLine>,
+        <OverviewItemLine small><LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} /></OverviewItemLine>
+    ]
+}