@eccenca/gui-elements 6.3.0 → 22.0.1

package/src/components/TextField/textfield.scss

@@ -0,0 +1,63 @@
+// own vars
+$eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
+$eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
+$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
+    $eccgui-size-type-levelratio !default;
+$eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
+$eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace / 2 !default;
+$eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
+$eccgui-color-textfield-text: $eccgui-color-application-text !default;
+$eccgui-color-textfield-background: white !default; // TODO define global var for it
+// lib vars
+$pt-input-height: $eccgui-size-textfield-height-regular; // !default;
+$pt-input-height-large: $eccgui-size-textfield-height-large; // !default;
+$pt-input-height-small: $eccgui-size-textfield-height-small; // !default;
+$input-padding-horizontal: $eccgui-size-textfield-padding-horizontal-regular; // !default;
+$input-small-padding: $eccgui-size-textfield-padding-horizontal-small; // !default;
+$input-font-weight: $eccgui-typo-textfield-fontweight; // !default;
+// $input-transition: box-shadow $pt-transition-duration $pt-transition-ease;
+$input-color: $eccgui-color-textfield-text; // !default;
+$input-color-disabled: rgba($eccgui-color-textfield-text, 0.39); // !default;
+$input-placeholder-color: rgba($eccgui-color-textfield-text, 0.61); // !default;
+$input-background-color: $eccgui-color-textfield-background; // !default;
+// $input-background-color-disabled: rgba($light-gray1, 0.5) !default;
+// $input-shadow-color-focus: $pt-intent-primary !default;
+// $pt-input-box-shadow: inset border-shadow(0.15), inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
+// $input-box-shadow-focus: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
+$input-button-height: $eccgui-size-textfield-height-regular / $eccgui-size-type-levelratio; // !default;
+$input-button-height-large: $eccgui-size-textfield-height-large / $eccgui-size-type-levelratio; // !default;
+$input-button-height-small: $eccgui-size-textfield-height-small / $eccgui-size-type-levelratio; // !default;
+// lib includes
+@import "~@blueprintjs/core/src/components/forms/input-group";
+@import "~@blueprintjs/core/src/components/forms/input";
+
+// fixes
+
+.#{$ns}-input-group {
+    // fix for correct fill/fullWidth option
+    display: inline-block;
+    &.#{$ns}-fill {
+        display: block;
+    }
+}
+
+// enhancements
+
+.#{$eccgui}-textarea {
+    width: 100%;
+}
+
+.#{$eccgui}-textfield--justifyclearance {
+    input[type="search"]::-ms-clear,
+    input[type="search"]::-ms-reveal {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+    input[type="search"]::-webkit-search-decoration,
+    input[type="search"]::-webkit-search-cancel-button,
+    input[type="search"]::-webkit-search-results-button,
+    input[type="search"]::-webkit-search-results-decoration {
+        -webkit-appearance: none;
+    }
+}

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Toolbar from "./Toolbar";
+import ToolbarSection from "./ToolbarSection";
+import Button from "../Button/Button";
+import IconButton from "../Icon/IconButton"
+import Spacing from "../Separation/Spacing";
+
+export default {
+  title: "Components/Toolbar",
+  component: Toolbar,
+  subcomponents: {
+    ToolbarSection,
+  },
+  argTypes: {},
+} as ComponentMeta<typeof Toolbar>;
+
+const Template: ComponentStory<typeof Toolbar> = (args) => (
+    <Toolbar {...args}>
+        <ToolbarSection>
+            <IconButton name="operation-undo" />
+            <IconButton name="operation-redo" />
+            <Spacing size="tiny" vertical={!args.verticalStack} hasDivider />
+            <IconButton name="item-copy" />
+        </ToolbarSection>
+        <ToolbarSection canGrow />
+        <Spacing size="tiny" vertical={!args.verticalStack} />
+        <ToolbarSection>
+            <IconButton name="item-remove" disruptive />
+            <Button text="Save" affirmative />
+        </ToolbarSection>
+    </Toolbar>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  verticalStack: false,
+  noWrap: false,
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Allow sections to break up into multiple lines when there is not enough space available.
+     * Only makes sense for horizontal toolbars.
+     */
+     noWrap?: boolean;
+     /**
+      * Toolbar displays vertically like a column.
+      * Can be used for toolbars in sidebars.
+      */
+     verticalStack?: boolean;
+}
+
+/**
+ * Element to group user-interaction elements.
+ */
+function Toolbar({
+    children,
+    className = '',
+    noWrap = false,
+    verticalStack = false,
+    ...restProps
+}: ToolbarProps) {
+    return (
+        <div
+            {...restProps}
+            className={
+                `${eccgui}-toolbar ` +
+                (noWrap ? ` ${eccgui}-toolbar--nowrap` : '') +
+                (verticalStack ? ` ${eccgui}-toolbar--vertical` : '') +
+                (className ? ' ' + className : '')
+            }
+        >
+            { children }
+        </div>
+    )
+}
+
+export default Toolbar;

package/src/components/Toolbar/ToolbarSection.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+    * Is allowed to allocate more space than necessary to show all children.
+    */
+    canGrow?: boolean;
+    /**
+    * Allow element to get shrinked if there is not enough space to show all content.
+    * This only makes sense if it contains children that are elastic in its size.
+    */
+    canShrink?: boolean;
+    /**
+    * Hides content that overflows available space.
+    */
+    hideOverflow?: boolean;
+}
+
+/**
+ * Provides element to group toolbar elements together.
+ * It can be configured how dynamic it is displayed regarding provided space inside the `Toolbar` parent.
+ */
+function ToolbarSection({
+    children,
+    className = '',
+    canGrow = false,
+    canShrink = false,
+    hideOverflow = false,
+    ...otherProps
+}:ToolbarSectionProps) {
+    return (
+        <div
+            {...otherProps}
+            className={
+                `${eccgui}-toolbar__section` +
+                (canGrow ? ` ${eccgui}-toolbar__section--cangrow` : '') +
+                (canShrink ? ` ${eccgui}-toolbar__section--canshrink` : '') +
+                (hideOverflow ? ` ${eccgui}-toolbar__section--overflowhidden` : '') +
+                (className ? ' ' + className : '')
+            }
+        >
+            { children }
+        </div>
+    )
+}
+
+export default ToolbarSection;

package/src/components/Toolbar/toolbar.scss

@@ -0,0 +1,52 @@
+.#{$eccgui}-toolbar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+
+}
+
+.#{$eccgui}-toolbar--vertical {
+    flex-direction: column;
+}
+
+.#{$eccgui}-toolbar--nowrap {
+    flex-wrap: nowrap;
+}
+
+.#{$eccgui}-toolbar__section {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    min-width: 0;
+
+    .#{$eccgui}-toolbar--vertical > & {
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.#{$eccgui}-toolbar__section--cangrow,
+.#{$eccgui}-toolbar__section--cangrow > * {
+    flex-grow: 1;
+}
+
+.#{$eccgui}-toolbar__section--canshrink {
+    flex-shrink: 1;
+}
+
+.#{$eccgui}-toolbar__section--overflowhidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.#{$ns}-control {
+    .#{$eccgui}-toolbar > &,
+    .#{$eccgui}-toolbar__section > & {
+        margin-bottom: 0;
+    }
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Classes as BlueprintClassNames, Tooltip as BlueprintTooltip } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {TooltipProps as BlueprintTooltipProps} from "@blueprintjs/core";
+
+export interface TooltipProps {
+    className?: string
+    addIndicator?: boolean
+    /** Blueprint specific tooltip props */
+    tooltipProps?: Partial<BlueprintTooltipProps>
+    /** The content that is displayed when hovering over the tooltip area. */
+    content: JSX.Element | string
+    /** The size specifies the dimension the element can maximal grow. */
+    size?: "small" | "medium" | "large"
+    children: React.ReactNode | React.ReactNode[]
+    /** @deprecated Use tooltipProps for Blueprint specific props or add concrete properties in all other cases. */
+    [key: string]: any
+}
+
+function Tooltip({
+    children,
+    content,
+    className = "",
+    size = "medium",
+    addIndicator = false,
+    tooltipProps = {},
+    ...otherProps
+}: TooltipProps) {
+    return (
+        <BlueprintTooltip
+            lazy={true}
+            hoverOpenDelay={500}
+            {...otherProps}
+            content={content}
+            {...tooltipProps}
+            className={
+                `${eccgui}-tooltip__wrapper` +
+                (className ? " " + className : "") +
+                (addIndicator === true ? " " + BlueprintClassNames.TOOLTIP_INDICATOR : "")
+            }
+            targetClassName={`${eccgui}-tooltip__target` + (className ? " " + className + "__target" : "")}
+            popoverClassName={
+                `${eccgui}-tooltip__content` +
+                ` ${eccgui}-tooltip--${size}` +
+                (className ? " " + className + "__content" : "")
+            }
+        >
+            {children}
+        </BlueprintTooltip>
+    );
+}
+
+export default Tooltip;

package/src/components/Tooltip/tooltip.scss

@@ -0,0 +1,37 @@
+// own vars
+$eccgui-size-typo-tooltip: $eccgui-size-typo-caption !default;
+$eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !default;
+$eccgui-size-tooltip-width: 20em !default;
+// library vars
+$tooltip-background-color: $eccgui-color-applicationheader-text; // !default;
+$tooltip-text-color: $eccgui-color-applicationheader-background; // !default;
+// $dark-tooltip-background-color: $light-gray3 !default;
+// $dark-tooltip-text-color: $dark-gray5 !default;
+$tooltip-padding-vertical: $eccgui-size-block-whitespace/4; // !default;
+$tooltip-padding-horizontal: $eccgui-size-block-whitespace/2; // !default;
+
+@import "~@blueprintjs/core/src/components/tooltip/tooltip";
+
+.#{$ns}-tooltip {
+    font-size: $eccgui-size-typo-tooltip;
+    line-height: $eccgui-size-typo-tooltip-lineheight;
+    white-space: normal;
+    word-wrap: break-word;
+}
+
+.#{$eccgui}-tooltip--small {
+    max-width: $eccgui-size-tooltip-width / 2;
+}
+.#{$eccgui}-tooltip--medium {
+    max-width: $eccgui-size-tooltip-width;
+}
+.#{$eccgui}-tooltip--large {
+    max-width: $eccgui-size-tooltip-width * 2;
+}
+
+.#{$eccgui}-tooltip__content {
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+}

package/src/components/Typography/Highlighter.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+interface IHighlighterProps {
+    label?: string;
+    searchValue?: string;
+}
+
+/**
+ * Returns a highlighted string according to the words of the search query.
+ * @param label       The string to highlight.
+ * @param searchValue The mutli-word search query from which single words should be highlighted in the label.
+ */
+function Highlighter({ label, searchValue }: IHighlighterProps) {
+    return <>{getSearchHighlight(label, searchValue)}</>;
+}
+
+const getSearchHighlight = (label?: string, searchValue?: string) => {
+    if (!searchValue || !label) {
+        return label;
+    }
+
+    const searchStringParts = extractSearchWords(searchValue);
+    if (searchStringParts.length === 0) {
+        return label;
+    }
+    const multiWordRegex = createMultiWordRegex(searchStringParts);
+    const result: any[] = [];
+
+    let offset = 0;
+    // loop through matches and add unmatched and matched parts to result array
+    let matchArray = multiWordRegex.exec(label);
+    let key = 0;
+    while (matchArray !== null) {
+        key++;
+        result.push(label.slice(offset, matchArray.index));
+        result.push(<mark key={key}>{matchArray[0]}</mark>);
+        offset = multiWordRegex.lastIndex;
+        matchArray = multiWordRegex.exec(label);
+    }
+    // Add remaining unmatched string
+    result.push(label.slice(offset));
+    return result;
+};
+
+/** Escapes strings to match literally.
+ *  taken from https://stackoverflow.com/questions/6318710/javascript-equivalent-of-perls-q-e-or-quotemeta
+ */
+const escapeRegexWord = (str: string) => {
+    return str.toLowerCase().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+};
+
+/** Extracts search words separated by white space. */
+export function extractSearchWords(textQuery: string, toLowerCase: boolean = false): string[] {
+    const words = textQuery.split(RegExp("\\s+")).filter((word) => word !== "");
+    return toLowerCase ? words.map(w => w.toLowerCase()) : words
+}
+
+/** Returns true if all search words are included in the given text */
+export function matchesAllWords(text: string,
+                                searchWords: string[]): boolean {
+    return searchWords.every(w => text.includes(w))
+}
+
+/** Creates a case-insensitive multi-word regex, that matches any of the given words. */
+export function createMultiWordRegex(multiWordQuery: string[], global: boolean = true) {
+    const regexString = multiWordQuery.map(escapeRegexWord).join("|");
+    return RegExp(regexString, (global ? "g" : "") + "i");
+}
+
+export default Highlighter;

package/src/components/Typography/HtmlContentBlock.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import * as TypographyClassNames from "./classnames";
+
+function HtmlContentBlock({
+    className = "",
+    children,
+    small = false,
+    large = false, // currently unsupported
+    muted = false, // currently unsupported
+    disabled = false, // currently unsupported
+    ...otherProps
+}: any) {
+    return (
+        <div
+            className={
+                `${eccgui}-typography__contentblock` +
+                (className ? " " + className : "") +
+                (small ? " " + TypographyClassNames.SMALL : "") +
+                (large ? " " + TypographyClassNames.LARGE : "") +
+                (muted ? " " + TypographyClassNames.MUTED : "") +
+                (disabled ? " " + TypographyClassNames.DISABLED : "")
+            }
+        >
+            {children}
+        </div>
+    );
+}
+
+export default HtmlContentBlock;

package/src/components/Typography/OverflowText.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface IProps {
+    ellipsis?: "reverse" | "none"
+    inline?: boolean
+    passDown?: boolean
+    className?: string
+    useHtmlElement?: "p" | "div" | "span"
+    [key: string]: any
+}
+
+/** Prevents text from overflowing. */
+function OverflowText({
+    className = "",
+    children,
+    ellipsis,
+    inline = false,
+    passDown = false,
+    useHtmlElement,
+    ...otherProps
+}: IProps) {
+    const defaultHtmlElement = inline ? "span" : "div";
+    const overflowtextElement = useHtmlElement
+        ? React.createElement(useHtmlElement)
+        : React.createElement(defaultHtmlElement);
+
+    return (
+        <overflowtextElement.type
+            {...otherProps}
+            className={
+                `${eccgui}-typography__overflowtext` +
+                (className ? " " + className : "") +
+                (ellipsis && (ellipsis === "reverse" || ellipsis === "none")
+                    ? ` ${eccgui}-typography__overflowtext--ellipsis-` + ellipsis
+                    : "") +
+                (inline ? ` ${eccgui}-typography__overflowtext--inline` : "") +
+                (passDown ? ` ${eccgui}-typography__overflowtext--passdown` : "")
+            }
+        >
+            {children}
+        </overflowtextElement.type>
+    );
+}
+
+export default OverflowText;

package/src/components/Typography/WhiteSpaceContainer.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function WhiteSpaceContainer({
+    className = "",
+    children,
+    marginTop = "", // tiny, small, regular, large, xlarge
+    marginRight = "",
+    marginBottom = "",
+    marginLeft = "",
+    paddingTop = "", // tiny, small, regular, large, xlarge
+    paddingRight = "",
+    paddingBottom = "",
+    paddingLeft = "",
+    ...otherProps
+}: any) {
+
+    const elementClassName = `${eccgui}-typography__whitespace`;
+
+    return (
+        <div
+            className={
+                elementClassName +
+                (className ? " " + className : "") +
+                (marginTop ? ` ${elementClassName}-margintop-${marginTop}` : "") +
+                (marginRight ? ` ${elementClassName}-marginright-${marginRight}` : "") +
+                (marginBottom ? ` ${elementClassName}-marginbottom-${marginBottom}` : "") +
+                (marginLeft ? ` ${elementClassName}-marginleft-${marginLeft}` : "") +
+                (paddingTop ? ` ${elementClassName}-paddingtop-${paddingTop}` : "") +
+                (paddingRight ? ` ${elementClassName}-paddingright-${paddingRight}` : "") +
+                (paddingBottom ? ` ${elementClassName}-paddingbottom-${paddingBottom}` : "") +
+                (paddingLeft ? ` ${elementClassName}-paddingleft-${paddingLeft}` : "")
+            }
+            {...otherProps}
+        >
+            {children}
+        </div>
+    );
+}
+
+export default WhiteSpaceContainer;

package/src/components/Typography/_reset.scss

@@ -0,0 +1,36 @@
+// reset proposals by Eric Meyer
+@import "~reset-css/sass/reset";
+
+// Chrome 62 fix
+button,
+select,
+input,
+textarea {
+    border-radius: 0;
+    font-family: inherit;
+}
+
+// MSI remove clear button from text fields
+input[type="text"]::-ms-clear {
+    display: none;
+}
+
+// justify box sizing model
+* {
+    box-sizing: border-box;
+}
+
+// Fix to remove added margins on buttons in safari (see #5155)
+button {
+    margin: 0;
+}
+
+svg {
+    // forgotten in reset import but necessary to fix problems when used together with MDL resets
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}

package/src/components/Typography/classnames.ts

@@ -0,0 +1,10 @@
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+// helper classes
+export const NOOVERFLOW = eccgui + "-typography--nooverflow";
+export const FORCELINEBREAK = eccgui + "-typography--forcelinebreak";
+export const PREVENTLINEBREAK = eccgui + "-typography--preventlinebreak";
+export const LARGE = eccgui + "-typography--large";
+export const SMALL = eccgui + "-typography--small";
+export const MUTED = eccgui + "-typography--muted";
+export const DISABLED = eccgui + "-typography--disabled";