@eccenca/gui-elements 6.1.0 → 22.0.0-rc.6

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+    Tag as BlueprintTag,
+    TagProps as BlueprintTagProps
+} from "@blueprintjs/core";
+import Color from "color";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface TagProps extends Omit<
+    BlueprintTagProps,
+    // currently not supported
+    "active" |
+    "fill" |
+    "large" |
+    "multiline" |
+    "intent" |
+    "rightIcon" |
+    "round"
+> {
+    // own properties
+
+    /**
+     * Sets the background color of a tag, depends on the `Color` object provided by the
+     * [npm color module](https://www.npmjs.com/package/color) v3. You can use it with
+     * all allowed [CSS color values](https://developer.mozilla.org/de/docs/Web/CSS/color_value).
+     *
+     * The front color is set automatically, so the tag label is always readable.
+     */
+    backgroundColor?: Color | string;
+
+    /**
+     * visual appearance and "thickness" of the tag
+     */
+    emphasis?: "stronger" | "strong" | "normal" | "weak" | "weaker";
+    /**
+     * display tag in a small version
+     */
+    small?: boolean;
+
+    // deprecated
+
+    /**
+     * **deprecated**, use `minimal=false` plus `emphasis="stronger"`
+     */
+    emphasized?: never;
+}
+
+function Tag({
+    children,
+    className = '',
+    emphasis = "normal",
+    minimal = true,
+    small = false,
+    backgroundColor,
+    ...otherProps
+}: TagProps) {
+    otherProps['interactive'] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
+    if (!!backgroundColor) {
+        const additionalStyles = otherProps.style ?? {};
+        const color = Color(backgroundColor);
+        otherProps['style'] = {
+            ...additionalStyles,
+            ...{
+                backgroundColor: color.rgb().toString(),
+                color: color.isLight() ? "#000" : "#fff",
+            }
+        }
+    }
+    return (
+        <BlueprintTag
+            {...otherProps}
+            className={
+                `${eccgui}-tag__item ${eccgui}-tag--${emphasis}emphasis` +
+                (small ? ` ${eccgui}-tag--small` : '') +
+                (className ? ' ' + className : '')
+            }
+            minimal={minimal}
+        >
+            {children}
+        </BlueprintTag>
+    );
+};
+
+export default Tag;

package/src/components/Tag/TagList.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function TagList({
+    children,
+    className = '',
+    label = '',
+    ...otherProps
+}: any) {
+
+
+
+    const tagList = (
+        <ul
+            className={
+                `${eccgui}-tag__list` +
+                ((className && label) ? ' ' + className : '')
+            }
+        >
+            {
+                React.Children.map(children, (child, i) => {
+                    return <li className={`${eccgui}-tag__list-item`} key={'tagitem_'+i}>
+                        {child}
+                    </li>
+                })
+            }
+        </ul>
+    );
+
+    if (label) {
+        return (
+            <div
+                className={
+                    `${eccgui}-tag__list-wrapper` +
+                    (className ? ' ' + className : '')
+                }
+            >
+                <strong className={`${eccgui}-tag__list-label`}>
+                    {label}
+                </strong>
+                <span className={`${eccgui}-tag__list-content`}>
+                    {tagList}
+                </span>
+            </div>
+        );
+    }
+
+    return tagList;
+};
+
+export default TagList;

package/src/components/Tag/tag.scss

@@ -0,0 +1,132 @@
+// own vars
+$eccgui-size-typo-tag: $eccgui-size-typo-caption !default;
+$eccgui-size-typo-tag-lineheight: $eccgui-size-typo-caption-lineheight !default;
+$eccgui-size-typo-tag-large: $eccgui-size-typo-text !default;
+$eccgui-size-typo-tag-large-lineheight: $eccgui-size-typo-text-lineheight !default;
+$eccgui-size-margin-tag: $eccgui-size-inline-whitespace / 2 !default;
+$eccgui-color-tag-background-emphasized: $eccgui-color-workspace-text !default;
+// lib vars
+$tag-default-color: $eccgui-color-tag-background-emphasized; // !default;
+// $dark-tag-default-color: $gray5 !default;
+$tag-height: $eccgui-size-typo-tag * $eccgui-size-typo-tag-lineheight; // !default;
+$tag-line-height: $eccgui-size-typo-tag; // !default;
+$tag-padding-top: ($tag-height - $tag-line-height) / 2; // !default;
+$tag-padding: $tag-padding-top * 2; // !default;
+$tag-margin: 0; // !default;
+$tag-height-large: $eccgui-size-typo-tag-large * $eccgui-size-typo-tag-large-lineheight; // !default;
+$tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
+$tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
+// $tag-icon-spacing: ($tag-height - 12px) / 2 !default;
+// $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) / 2 !default;
+// $tag-round-adjustment: 2px !default;
+
+@import "~@blueprintjs/core/src/components/tag/tag";
+
+.#{$eccgui}-tag__item {
+    flex-shrink: 0;
+    flex-grow: 0;
+
+    .#{$eccgui}-overviewitem__description > & {
+        max-width: 39%;
+    }
+
+    &.#{$eccgui}-tag--small {
+        font-size: $eccgui-size-typo-caption;
+        line-height: $eccgui-size-typo-caption-lineheight;
+        max-height: calc(#{$eccgui-size-typo-caption-lineheight * $eccgui-size-typo-caption} - 2px);
+        min-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    svg {
+        fill: currentColor;
+    }
+}
+
+.#{$eccgui}-tag__list-wrapper,
+.#{$eccgui}-tag__list-label,
+.#{$eccgui}-tag__list-content,
+.#{$eccgui}-tag__list,
+.#{$eccgui}-tag__list-item {
+    display: inline;
+    vertical-align: baseline;
+    font-size: $eccgui-size-typo-tag;
+    line-height: $eccgui-size-typo-tag-lineheight;
+    font-weight: $eccgui-font-weight-light;
+}
+
+.#{$eccgui}-tag__list-label {
+    white-space: nowrap;
+}
+
+.#{$eccgui}-tag__list-wrapper:not(:last-child),
+.#{$eccgui}-tag__list:not(:last-child) {
+    margin-right: $eccgui-size-margin-tag * 2;
+}
+
+.#{$eccgui}-tag__list-item {
+    margin-bottom: $eccgui-size-margin-tag;
+    display: inline-block;
+}
+
+.#{$eccgui}-tag__list-label,
+.#{$eccgui}-tag__list-item:not(:last-child) {
+    margin-right: $eccgui-size-margin-tag;
+}
+
+.#{$ns}-tag-remove {
+    .#{$ns}-icon,
+    svg {
+        height: $eccgui-size-typo-tag;
+        width: $eccgui-size-typo-tag;
+    }
+}
+
+.#{$ns}-tag {
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba($tag-default-color, 0.75);
+    background-color: rgba($tag-default-color, 0.75);
+
+    &:not([class*="#{$ns}-intent-"]) {
+        &.#{$eccgui}-tag--strongeremphasis {
+            border-color: rgba($tag-default-color, 1);
+            background-color: rgba($tag-default-color, 1);
+        }
+        &.#{$eccgui}-tag--strongemphasis {
+            border-color: rgba($tag-default-color, 0.875);
+            background-color: rgba($tag-default-color, 0.875);
+        }
+        &.#{$eccgui}-tag--weakemphasis {
+            border-color: rgba($tag-default-color, 0.625);
+            background-color: rgba($tag-default-color, 0.625);
+        }
+        &.#{$eccgui}-tag--weakeremphasis {
+            border-color: rgba($tag-default-color, 0.5);
+            background-color: rgba($tag-default-color, 0.5);
+        }
+    }
+
+    &.#{$ns}-minimal:not([class*="#{$ns}-intent-"]) {
+        border-color: rgba($tag-default-color, 0.15);
+        background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
+
+        &.#{$eccgui}-tag--strongeremphasis {
+            border-color: rgba($tag-default-color, 0.3);
+            background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
+        }
+        &.#{$eccgui}-tag--strongemphasis {
+            border-color: rgba($tag-default-color, 0.225);
+            background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
+        }
+        &.#{$eccgui}-tag--weakemphasis {
+            border-color: rgba($tag-default-color, 0.075);
+            background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
+        }
+        &.#{$eccgui}-tag--weakeremphasis {
+            border-color: rgba($tag-default-color, 0.15);
+            background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
+        }
+    }
+}

package/src/components/TagInput/taginput.scss

@@ -0,0 +1 @@
+@import "~@blueprintjs/core/src/components/tag-input/tag-input";

package/src/components/TextField/SearchField.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import IconButton from "../Icon/IconButton";
+import Icon from "../Icon/Icon";
+import TextField, { TextFieldProps } from "./TextField";
+import { TestableComponent } from "../../components/interfaces";
+
+interface SearchFieldProps extends TestableComponent, Omit<
+    TextFieldProps,
+    "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
+> {
+    /**
+    * Placeholder text for search box.
+    */
+    emptySearchInputMessage?: string;
+    /**
+    * Event handler to reset search input.
+    * If set then `rightElement` is automatically set with an action button to trigger the handler.
+    */
+    onClearanceHandler?: () => void;
+    /**
+    * Tooltip to show for the clear button.
+    */
+    onClearanceText?: string;
+}
+
+/**
+ * Special `TextField` element for search term inputs.
+ */
+function SearchField({
+  className = "",
+  emptySearchInputMessage = "Enter search term",
+  onClearanceHandler,
+  onClearanceText = "Clear input",
+  leftIcon = <Icon name="operation-search" />,
+  ...otherProps
+}: SearchFieldProps) {
+  return (
+    <TextField
+      className={
+        `${eccgui}-textfield--searchinput` +
+        (onClearanceHandler ? ` ${eccgui}-textfield--justifyclearance` : "") +
+        (className ? ` ${className}` : "")
+      }
+      dir={"auto"}
+      placeholder={emptySearchInputMessage}
+      aria-label={emptySearchInputMessage}
+      rightElement={
+        onClearanceHandler && otherProps.value ? (
+          <IconButton
+            data-test-id={
+              otherProps["data-test-id"] &&
+              `${otherProps["data-test-id"]}-clear-btn`
+            }
+            name="operation-clear"
+            text={
+              onClearanceText ? onClearanceText : "Clear current search term"
+            }
+            onClick={onClearanceHandler}
+          />
+        ) : undefined
+      }
+      {...otherProps}
+      type={"search"}
+      leftIcon={leftIcon}
+      round={true}
+    />
+  );
+}
+
+export default SearchField;

package/src/components/TextField/TextArea.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  TextArea as BlueprintTextArea,
+  Intent as BlueprintIntent,
+  TextAreaProps as BlueprintTextAreaProps,
+} from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+  /**
+   * when set to true the input takes a blue border color
+   */
+  hasStatePrimary?: boolean;
+  /**
+   * when set to true the input takes a green border color
+   */
+  hasStateSuccess?: boolean;
+  /**
+   * when set to true the input takes an orange border color
+   */
+  hasStateWarning?: boolean;
+  /**
+   * when set to true the input takes a red border color
+   */
+  hasStateDanger?: boolean;
+}
+
+function TextArea({
+  className = "",
+  hasStatePrimary = false,
+  hasStateSuccess = false,
+  hasStateWarning = false,
+  hasStateDanger = false,
+  rows = 5,
+  ...otherProps
+}: TextAreaProps) {
+  let intent;
+  switch (true) {
+    case hasStatePrimary:
+      intent = BlueprintIntent.PRIMARY;
+      break;
+    case hasStateSuccess:
+      intent = BlueprintIntent.SUCCESS;
+      break;
+    case hasStateWarning:
+      intent = BlueprintIntent.WARNING;
+      break;
+    case hasStateDanger:
+      intent = BlueprintIntent.DANGER;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <BlueprintTextArea
+      className={`${eccgui}-textarea ` + className}
+      intent={intent}
+      rows={rows ? rows : undefined}
+      {...otherProps}
+      dir={"auto"}
+    />
+  );
+}
+
+export default TextArea;

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import {
+    InputGroup as BlueprintInputGroup,
+    Classes as BlueprintClassNames,
+    Intent as BlueprintIntent,
+    MaybeElement,
+    HTMLInputProps,
+    InputGroupProps,
+} from "@blueprintjs/core";
+import Icon from "../Icon/Icon";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ValidIconName} from "../Icon/canonicalIconNames";
+
+export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" | "leftIcon"> & HTMLInputProps> {
+    /**
+    * The input element is displayed with primary color scheme.
+    */
+    hasStatePrimary?: boolean;
+    /**
+    * The input element is displayed with success (some type of green) color scheme.
+    */
+    hasStateSuccess?: boolean;
+    /**
+    * The input element is displayed with warning (some type of orange) color scheme.
+    */
+    hasStateWarning?: boolean;
+    /**
+    * The input element is displayed with danger (some type of red) color scheme.
+    */
+    hasStateDanger?: boolean;
+    /**
+     * The input element uses the full horizontal width of the parent container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Left aligned icon, can be a canonical icon name or an `Icon` element.
+     */
+    leftIcon?: ValidIconName | MaybeElement
+}
+
+/**
+  * Text input field.
+  */
+function TextField({
+  className = "",
+  hasStatePrimary = false,
+  hasStateSuccess = false,
+  hasStateWarning = false,
+  hasStateDanger = false,
+  fullWidth = true,
+  leftIcon,
+  ...otherProps
+}: TextFieldProps) {
+  let intent;
+  switch (true) {
+    case hasStatePrimary:
+      intent = BlueprintIntent.PRIMARY;
+      break;
+    case hasStateSuccess:
+      intent = BlueprintIntent.SUCCESS;
+      break;
+    case hasStateWarning:
+      intent = BlueprintIntent.WARNING;
+      break;
+    case hasStateDanger:
+      intent = BlueprintIntent.DANGER;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <BlueprintInputGroup
+      className={`${eccgui}-textfield ` + className}
+      intent={intent}
+      fill={fullWidth}
+      {...otherProps}
+      leftIcon={
+        leftIcon != null && leftIcon !== false ? (
+          typeof leftIcon === "string" ? (
+            <Icon
+              name={leftIcon}
+              className={BlueprintClassNames.ICON}
+              intent={intent}
+            />
+          ) : (
+            <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
+          )
+        ) : undefined
+      }
+      dir={"auto"}
+    />
+  );
+}
+
+export default TextField;

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import SearchField from "./../SearchField";
+
+export default {
+  title: "Components/SearchField",
+  component: SearchField,
+  argTypes: {
+      hasStatePrimary: { table: { disable: true } },
+      hasStateSuccess: { table: { disable: true } },
+      hasStateWarning: { table: { disable: true } },
+      hasStateDanger: { table: { disable: true } },
+      fullWidth: { table: { disable: true } },
+  },
+} as ComponentMeta<typeof SearchField>;
+
+const Template: ComponentStory<typeof SearchField> = (args) => (
+  <SearchField {...args}></SearchField>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    onClearanceHandler: null,
+    onClearanceText: "",
+};
+
+export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> = (
+  args
+) => {
+  const [query, setQuery] = React.useState<string>("");
+  return (
+    <SearchField
+      {...args}
+      value={query}
+      onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
+      onClearanceHandler={() => setQuery("")}
+    ></SearchField>
+  );
+};

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import CustomTextArea from "./../TextArea";
+
+type TextAreaType = typeof CustomTextArea;
+
+export default {
+  title: "Components/TextArea",
+  component: CustomTextArea,
+  argTypes: {
+    small: {
+      description: "Whether the text area should appear with small styling.",
+      control: "boolean",
+    },
+    large: {
+      description: "Whether the text area should appear with large styling",
+      control: "boolean",
+    },
+    growVertically: {
+      description:
+        "Whether the text area should automatically grow vertically to accommodate content.",
+      control: "boolean",
+    },
+  },
+} as ComponentMeta<TextAreaType>;
+
+const Template: ComponentStory<TextAreaType> = (args) => (
+  <CustomTextArea {...args}></CustomTextArea>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  hasStatePrimary: false,
+  hasStateSuccess: false,
+  hasStateWarning: false,
+  hasStateDanger: false,
+  rows: 5,
+};

package/src/components/TextField/stories/TextField.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import TextField from "./../TextField";
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
+export default {
+    title: "Components/TextField",
+    component: TextField,
+    argTypes: {
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        value: {
+            description: "Form value of the input, for controlled usage.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        type: {
+            description: "HTML `input` type attribute.",
+            control: "text",
+            table: {
+                defaultValue: { summary: "text" },
+                type: { summary: "string" },
+            }
+        },
+        placeholder: {
+            description: "Placeholder text in the absence of any value.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        disabled: {
+            description: "Whether this action is non-interactive and the button is not usable.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        leftIcon: {
+            ...helpersArgTypes.exampleIcon,
+            description: "Left aligned icon, can be a canonical icon name or an `Icon` element.",
+        },
+        rightElement: {
+            ...helpersArgTypes.exampleIcon,
+            description: "Right aligned element, mainly provided for user-interaction elements, e.g. minimal buttons, spinners, or tags.",
+            //control: { disable: true, },
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "JSX.Element" },
+            }
+        },
+        onChange: {
+            description: "Change event handler. Use `event.target.value` for new value.",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "React.FormEventHandler<HTMLElement>" },
+            }
+        },
+        large: {
+            description: "Whether this input should use large styles.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        small: {
+            description: "Whether this input should use small styles",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+    },
+} as ComponentMeta<typeof TextField>;
+
+const Template: ComponentStory<typeof TextField> = (args) => (
+    <TextField {...args}></TextField>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+    fullWidth: false,
+    placeholder: "placeholder text",
+};