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

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,199 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Button from "./Button";
+import Icon from "../Icon/Icon";
+import Spacing from "../Separation/Spacing";
+
+export default {
+    title: "Components/Button",
+    component: Button,
+    argTypes: {
+        active: {
+            description: "Button will display in an active state.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "boolean",
+            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" },
+            }
+        },
+        minimal: {
+            description: "Whether this button should use minimal styles.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        outlined: {
+            description: "Whether this button should use outlined styles.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        text: {
+            description: "Action text. Can be any single React renderable. Can be used as alternative to include `children` elements.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "React.ReactNode" },
+            }
+        },
+        type: {
+            description: "HTML type attribute of button. Note that this prop has no effect on buttons with `href` property set.",
+            control: "text",
+            table: {
+                defaultValue: { summary: "button" },
+                type: { summary: "button | reset | submit" },
+            }
+        },
+        loading: {
+            description: "Button is displayed disabled and contains a spinner instead of its contents.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        fill: {
+            description: "Whether this button should expand to fill its container.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        large: {
+            description: "Whether this button should use large styles.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        small: {
+            description: "Whether this button should use small styles",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        icon: {
+            description: "Left aligned icon, can be a canonical icon name or an `Icon` element.",
+            control: { disable: true, },
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "Icon | string" },
+            }
+        },
+        rightIcon: {
+            description: "Right aligned icon, can be a canonical icon name or an `Icon` element.",
+            control: { disable: true, },
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "Icon | string" },
+            }
+        },
+        onClick: {
+            description: "Click event handler.",
+            action: "clicked",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "(event: MouseEvent<HTMLElement>) => void" },
+            }
+        },
+    },
+} as ComponentMeta<typeof Button>;
+
+const TemplateFull: ComponentStory<typeof Button> = (args) => (
+    <Button {...args} />
+);
+
+export const FullExample = TemplateFull.bind({});
+FullExample.args = {
+    hasStatePrimary: false,
+    hasStateSuccess: false,
+    hasStateWarning: false,
+    hasStateDanger: false,
+    elevated: false,
+    affirmative: false,
+    disruptive: false,
+    tooltip: "Example tooltip",
+    loading: false,
+    text: "Button label",
+};
+
+FullExample.parameters = {
+    jest: "Button.test.tsx",
+};
+
+const TemplateIcons: ComponentStory<typeof Button> = (args) => (
+    <>
+        <Button {...args} icon={"item-viewdetails"} />
+        <Spacing vertical />
+        <Button {...args} rightIcon={<Icon name={"item-download"} />} />
+    </>
+);
+export const ButtonsWithIcon = TemplateIcons.bind({});
+ButtonsWithIcon.args = FullExample.args;
+
+const TemplateSemantic: ComponentStory<typeof Button> = (args) => (
+    <>
+        <Button {...args} text="Normal action" />
+        <Spacing vertical />
+        <Button {...args} affirmative text="Affirmative action" />
+        <Spacing vertical />
+        <Button {...args} disruptive text="Disruptive action" />
+    </>
+);
+export const ButtonSemantics = TemplateSemantic.bind({});
+ButtonSemantics.args = FullExample.args;
+
+const TemplateState: ComponentStory<typeof Button> = (args) => (
+    <>
+        <Button {...args} text="Success" hasStateSuccess />
+        <Spacing vertical />
+        <Button {...args} text="Warning" hasStateWarning />
+        <Spacing vertical />
+        <Button {...args} text="Danger" hasStateDanger />
+    </>
+);
+export const ButtonStates = TemplateState.bind({});
+ButtonStates.args = FullExample.args;
+
+const TemplateContent: ComponentStory<typeof Button> = (args) => (
+    <>
+        <Button {...args} text="Property label" />
+        <Spacing vertical />
+        <Button {...args} text={undefined}>Children label</Button>
+    </>
+);
+export const ButtonLabels = TemplateContent.bind({});
+ButtonLabels.args = FullExample.args;
+
+const TemplateAnchor: ComponentStory<typeof Button> = (args) => (
+    <>
+        <Button {...args} text="Example link" href="https://eccenca.com/" target="_new" />
+    </>
+);
+export const LinkButton = TemplateAnchor.bind({});
+LinkButton.args = FullExample.args;

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import {
+  FullExample,
+} from "./Button.stories";
+
+import Button from "./Button";
+import Icon from "../Icon/Icon";
+
+describe("Button", () => {
+  it("should render default button successfully", () => {
+    render(<Button {...FullExample.args}>Default Button</Button>);
+    expect(screen.getByRole("button")).toHaveTextContent(/default button/i);
+  });
+
+  it("should have icon at the left followed by text", () => {
+    const { container } = render(
+      <Button {...FullExample.args} icon={"item-viewdetails"}>Left icon</Button>
+    );
+    expect(screen.getByRole("button").lastChild).toEqual(
+      screen.getByText(/left icon/i)
+    );
+    expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+  });
+
+  it("should have icon at the right after the text", () => {
+    const { container } = render(
+      <Button {...FullExample.args} rightIcon={<Icon name={"item-download"} />}>Right icon</Button>
+    );
+    expect(screen.getByRole("button").firstChild).toEqual(
+      screen.getByText(/right icon/i)
+    );
+    expect(container.getElementsByClassName("eccgui-icon").length).toBe(1);
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import {
+  AnchorButton as BlueprintAnchorButton,
+  Button as BlueprintButton,
+  ButtonProps as BlueprintButtonProps,
+  AnchorButtonProps as BlueprintAnchorButtonProps,
+  Intent as BlueprintIntent,
+} from "@blueprintjs/core";
+import Icon from "../Icon/Icon";
+import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
+
+export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+    * Always use this when the button triggers an affirmative action, e.g. confirm a process.
+    * The button is displayed with primary color scheme.
+    */
+    affirmative?: boolean;
+    /**
+    * Always use this when the button triggers an disruptive action, e.g. delete or remove.
+    * The button is displayed with primary color scheme.
+    */
+    disruptive?: boolean;
+    /**
+    * Use this when a button is important enough to highlight it in a set of other buttons.
+    * The button is displayed with primary color scheme.
+    */
+    elevated?: boolean;
+    /**
+    * The button is displayed with primary color scheme.
+    */
+    hasStatePrimary?: boolean;
+    /**
+    * The button is displayed with success (some type of green) color scheme.
+    */
+    hasStateSuccess?: boolean;
+    /**
+    * The button is displayed with warning (some type of orange) color scheme.
+    */
+    hasStateWarning?: boolean;
+    /**
+    * The button is displayed with danger (some type of red) color scheme.
+    */
+    hasStateDanger?: boolean;
+    /**
+    * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
+    */
+    tooltip?: string | JSX.Element | null;
+    /**
+    * Object with additional properties for the tooltip.
+    */
+    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>;
+    /**
+    * If an URL is set then the button is included as HTML anchor element instead of a button form element.
+    */
+    href?: string;
+    icon?: string | JSX.Element;
+    rightIcon?: string | JSX.Element;
+    target?: string;
+}
+
+/**
+ * Display a button element to enable user interaction.
+ * It normally should trigger action when clicked.
+ */
+function Button({
+  children,
+  className = "",
+  affirmative = false,
+  disruptive = false,
+  elevated = false,
+  hasStatePrimary = false,
+  hasStateSuccess = false,
+  hasStateWarning = false,
+  hasStateDanger = false,
+  icon,
+  rightIcon,
+  tooltip = null,
+  tooltipProperties,
+  ...restProps
+}: ButtonProps & AnchorOrButtonProps) {
+  let intention;
+  switch (true) {
+    case affirmative || elevated || hasStatePrimary:
+      intention = BlueprintIntent.PRIMARY;
+      break;
+    case hasStateSuccess:
+      intention = BlueprintIntent.SUCCESS;
+      break;
+    case hasStateWarning:
+      intention = BlueprintIntent.WARNING;
+      break;
+    case disruptive || hasStateDanger:
+      intention = BlueprintIntent.DANGER;
+      break;
+    default:
+      break;
+  }
+
+  let ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
+
+  const button = (
+    <ButtonType
+      {...restProps}
+      className={`${eccgui}-button ` + className}
+      intent={intention}
+      icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
+      rightIcon={
+    typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon
+      }
+    >
+      {children}
+    </ButtonType>
+  );
+
+  return tooltip ? (
+    <Tooltip content={tooltip} {...tooltipProperties}>
+      <span>{button}</span>
+    </Tooltip>
+  ) : (
+    button
+  );
+}
+
+export default Button;

package/src/components/Button/button.scss

@@ -0,0 +1,55 @@
+$button-height: $pt-button-height;
+$button-border-width: 1px; // !default;
+$button-padding: ($pt-grid-size / 2) $pt-grid-size; // !default;
+$button-border-radius: $pt-border-radius;
+// $button-padding-small: 0 ($pt-grid-size * 0.7) !default;
+// $button-padding-large: ($pt-grid-size / 2) ($pt-grid-size * 1.5) !default;
+// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
+// $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
+// $button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
+// $button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 2px rgba($black, 0.2) !default;
+// $button-intent-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.4), inset 0 (-$button-border-width) 0 rgba($black, 0.2) !default;
+// $button-intent-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.4), inset 0 1px 2px rgba($black, 0.2) !default;
+// $button-box-shadow-overlay: 0 0 0 $button-border-width rgba($black, 0.2), 0 1px 1px rgba($black, 0.2) !default;
+// $button-box-shadow-overlay-active: 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 1px rgba($black, 0.1) !default;
+// $dark-button-box-shadow: 0 0 0 $button-border-width rgba($black, 0.4) !default;
+// $dark-button-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.6), inset 0 1px 2px rgba($black, 0.2) !default;
+// $dark-button-intent-box-shadow: 0 0 0 $button-border-width rgba($black, 0.4) !default;
+// $dark-button-intent-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.4), inset 0 1px 2px rgba($black, 0.2) !default;
+$button-gradient: none; // !default; // linear-gradient(to bottom, rgba($white, 0.8), rgba($white, 0)) !default;
+$button-intent-gradient: $button-gradient; // !default; // linear-gradient(to bottom, rgba($white, 0.1), rgba($white, 0)) !default;
+$dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bottom, rgba($white, 0.05), rgba($white, 0)) !default;
+// $button-color-disabled: $pt-text-color-disabled !default;
+// $button-background-color: $light-gray5 !default;
+// $button-background-color-hover: $light-gray4 !default;
+// $button-background-color-active: $light-gray2 !default;
+// $button-background-color-disabled: rgba($light-gray1, 0.5) !default;
+// $button-background-color-active-disabled: rgba($light-gray1, 0.7) !default;
+// $button-intent-color-disabled: rgba($white, 0.6);
+// $dark-button-color-disabled: $pt-dark-text-color-disabled !default;
+// $dark-button-background-color: $dark-gray5 !default;
+// $dark-button-background-color-hover: $dark-gray4 !default;
+// $dark-button-background-color-active: $dark-gray2 !default;
+// $dark-button-background-color-disabled: rgba($dark-gray5, 0.5) !default;
+// $dark-button-background-color-active-disabled: rgba($dark-gray5, 0.7) !default;
+// $dark-button-intent-color-disabled: rgba($white, 0.3);
+// $minimal-button-divider-width: 1px !default;
+// $minimal-button-background-color: none !default;
+// $minimal-button-background-color-hover: rgba($gray4, 0.3) !default;
+// $minimal-button-background-color-active: rgba($gray2, 0.3) !default;
+// $dark-minimal-button-background-color: none !default;
+// $dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
+// $dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
+// $button-outlined-width: 1px !default;
+// $button-outlined-border-intent-opacity: 0.6 !default;
+// $button-outlined-border-disabled-intent-opacity: 0.2 !default;
+
+@import "~@blueprintjs/core/src/components/button/button";
+
+.#{$ns}-button.#{$ns}-large {
+    min-height: mini-units(6);
+}
+
+.#{$ns}-button-text {
+    min-width: 0;
+}

package/src/components/Card/Card.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+    Card as BlueprintCard,
+    CardProps as BlueprintCardProps
+} from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface CardProps extends BlueprintCardProps {
+    /**
+     * When set to `true` card is included as simple HTML `div` element.
+     * By default it is a HTML `section`.
+     */
+    isOnlyLayout?: boolean;
+    /**
+     * When set to true, will take the full height of container
+     */
+    fullHeight?: boolean;
+    /**
+     * when set to true will invert the background color and slightly darken
+     */
+    elevated?: boolean;
+}
+
+/**
+ * Element to separate content sections from each other.
+ * Cards can include other cards but should not.
+ */
+function Card({
+    children,
+    className='',
+    elevation=1,
+    isOnlyLayout=false,
+    fullHeight=false,
+    elevated=false,
+    interactive,
+    ...otherProps
+}: CardProps) {
+    const cardElement = (
+        <BlueprintCard
+            className={
+                `${eccgui}-card ` +
+                (fullHeight ? ` ${eccgui}-card--fullheight ` : '') +
+                (elevated ? ` ${eccgui}-card--elevated ` : '') +
+                className
+            }
+            elevation={elevation}
+            interactive={!!otherProps.onClick ? true : interactive}
+            {...otherProps}
+        >
+            {children}
+        </BlueprintCard>
+    );
+
+    // TODO: improve Card element so it is itself a section html element
+    return isOnlyLayout === false ? <section>{cardElement}</section> : cardElement;
+};
+
+export default Card;

package/src/components/Card/CardActions.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Set an inverse direction of how the elements are aligned.
+     * Mainly used for cards used as modals (dialogs).
+     */
+    inverseDirection?: boolean;
+}
+
+/**
+ * Contains a footer with user-interaction elements like buttons for the `Card` element.
+ * Content must be ordered by importance, so the main action comes before other actions.
+ */
+function CardActions ({
+    children,
+    className='',
+    inverseDirection=false,
+    ...otherProps
+}: OverviewItemProps) {
+    return (
+        <footer
+            {...otherProps}
+            className={
+                `${eccgui}-card__actions` +
+                (inverseDirection ? ` ${eccgui}-card__actions--inversedirection` : '') +
+                (className ? ' ' + className : '')
+            }
+        >
+            {children}
+        </footer>
+    );
+};
+
+export default CardActions;

package/src/components/Card/CardActionsAux.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * Additional side buttons inside `CardActions`.
+ * Elements are aligned to the other side of the container.
+ */
+function CardActionsAux ({
+    children,
+    className='',
+    ...otherProps
+}: OverviewItemProps) {
+    return (
+        <div
+            {...otherProps}
+            className={
+                `${eccgui}-card__actions__aux` +
+                (className ? ' ' + className : '')
+            }
+        >
+            {children}
+        </div>
+    );
+};
+
+export default CardActionsAux;

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * Holds the card content.
+ * Display scrollbars in case there is not enough space for it.
+ */
+function CardContent({
+    children,
+    className='',
+    ...otherProps
+}: OverviewItemProps) {
+    return (
+        <div
+            {...otherProps}
+            className={`${eccgui}-card__content ` + className}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default CardContent;

package/src/components/Card/CardHeader.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import OverviewItem, { OverviewItemProps } from "./../OverviewItem/OverviewItem";
+import { OverviewItemDescription } from "./../OverviewItem";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import CardTitle from "./CardTitle";
+import CardOptions from "./CardOptions";
+
+interface CardHeaderProps extends OverviewItemProps {
+    children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+}
+
+function CardHeader({
+    children,
+    className = "",
+    densityHigh = true,
+    ...otherProps
+}: CardHeaderProps) {
+    let actions: any[] = [];
+    let description: any[] = [];
+
+    children && (Array.isArray(children) ? children : [children]).forEach((child) => {
+        if (typeof child === "object" && child && !!child.type) {
+            switch (child.type) {
+                case CardTitle:
+                    description.push(child);
+                    break;
+                case CardOptions:
+                    actions.push(child);
+                    break;
+            }
+        }
+    });
+
+    return (
+        <header>
+            <OverviewItem {...otherProps} className={`${eccgui}-card__header ` + className} densityHigh={densityHigh}>
+                {description.length > 0 && <OverviewItemDescription>{description}</OverviewItemDescription>}
+                {actions}
+            </OverviewItem>
+        </header>
+    );
+}
+
+export default CardHeader;

package/src/components/Card/CardOptions.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import OverviewItemActions, { OverviewItemActionsProps } from './../OverviewItem/OverviewItemActions';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface CardOptionsProps extends Omit<OverviewItemActionsProps, "hiddenInteractions"> {
+
+}
+
+/**
+ * Container for elements that allow user-interaction, e.g. buttons or context menus.
+ * Can contain multiple of them.
+ * Is displayed right-aligned in the `CardHeader`.
+ */
+function CardOptions({
+    children,
+    className='',
+    ...otherProps
+}: CardOptionsProps) {
+    return (
+        <OverviewItemActions
+            {...otherProps}
+            className={
+                `${eccgui}-card__options` +
+                (className ? ' ' + className : '')
+            }
+        >
+            {children}
+        </OverviewItemActions>
+    );
+};
+
+export default CardOptions;

package/src/components/Card/CardTitle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import OverviewItemLine, { OverviewItemLineProps } from './../OverviewItem/OverviewItemLine';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface CardTitleProps extends Omit<OverviewItemLineProps, "small" | "large"> {
+    /**
+     * Use only normal font size instead of a large one.
+     */
+    narrowed?: boolean;
+};
+
+/**
+ * Display a card title, can include other markup like `h2`, `h3` and so on to define document structure.
+ */
+function CardTitle({
+    children,
+    className='',
+    narrowed=false,
+    ...otherProps
+}: CardTitleProps) {
+    return (
+        <OverviewItemLine
+            {...otherProps}
+            className={`${eccgui}-card__title ` + className}
+            large={!narrowed}
+        >
+            {children}
+        </OverviewItemLine>
+    );
+};
+
+export default CardTitle;