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

package/src/components/Card/card.scss

@@ -0,0 +1,138 @@
+$card-padding: 0 !default;
+$card-background-color: $white !default;
+//$dark-card-background-color: $dark-gray4 !default;
+
+$eccgui-size-card-spacing: $eccgui-size-typo-base !default;
+
+@import "~@blueprintjs/core/src/components/card/card";
+
+.#{$eccgui}-card {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    align-items: stretch;
+
+    &.#{$eccgui}-intent--primary {
+        background-color: mix($eccgui-color-primary, $card-background-color, 5%);
+    }
+    &.#{$eccgui}-intent--accent {
+        background-color: mix($eccgui-color-accent, $card-background-color, 10%);
+    }
+    &.#{$eccgui}-intent--success {
+        background-color: $eccgui-color-success-background;
+    }
+    &.#{$eccgui}-intent--info {
+        background-color: $eccgui-color-info-background;
+    }
+    &.#{$eccgui}-intent--warning {
+        background-color: $eccgui-color-warning-background;
+    }
+    &.#{$eccgui}-intent--danger {
+        background-color: $eccgui-color-danger-background;
+    }
+
+    &.#{$ns}-interactive:hover {
+        background-color: $button-background-color-hover;
+    }
+}
+
+.#{$eccgui}-card--elevated {
+    background-color: $button-background-color-active;
+}
+
+.#{$eccgui}-card--fullheight {
+    @extend .#{$eccgui}-grid__row--fullheight;
+}
+
+.#{$eccgui}-card__header {
+    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing/2 $eccgui-size-card-spacing;
+    box-sizing: content-box;
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.#{$eccgui}-card__title {
+    font-weight: normal;
+
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+    }
+    &.#{$eccgui}-intent--success {
+        color: $eccgui-color-success-text;
+    }
+    &.#{$eccgui}-intent--info {
+        color: $eccgui-color-info-text;
+    }
+    &.#{$eccgui}-intent--warning {
+        color: $eccgui-color-warning-text;
+    }
+    &.#{$eccgui}-intent--danger {
+        color: $eccgui-color-danger-text;
+    }
+
+    & > * {
+        font-weight: inherit;
+    }
+}
+
+.#{$eccgui}-card__content {
+    padding: $eccgui-size-card-spacing/2 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: auto;
+
+    .#{$eccgui}-separation__divider-horizontal + &,
+    &:first-child {
+        padding-top: $eccgui-size-card-spacing;
+    }
+}
+
+.#{$eccgui}-card__actions {
+    padding: $eccgui-size-card-spacing/4;
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+
+    & > * {
+        margin: $eccgui-size-card-spacing/4;
+    }
+
+    &.#{$eccgui}-intent--success > .#{$eccgui}-button:first-child {
+        @extend .#{$ns}-intent-success;
+    }
+    &.#{$eccgui}-intent--info > .#{$eccgui}-button:first-child {
+        @extend .#{$ns}-intent-primary;
+    }
+    &.#{$eccgui}-intent--warning > .#{$eccgui}-button:first-child {
+        @extend .#{$ns}-intent-warning;
+    }
+    &.#{$eccgui}-intent--danger > .#{$eccgui}-button:first-child {
+        @extend .#{$ns}-intent-danger;
+    }
+}
+
+.#{$eccgui}-card__actions--inversedirection {
+    flex-direction: row-reverse;
+}
+
+.#{$eccgui}-card__actions__aux {
+    order: 1000;
+    flex-grow: 1;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-end;
+    align-items: center;
+
+    & > * {
+        margin: $eccgui-size-card-spacing/4;
+    }
+
+    .#{$eccgui}-card__actions--inversedirection > & {
+        justify-content: flex-start;
+    }
+}

package/src/components/Card/index.tsx

@@ -0,0 +1,17 @@
+import Card from './Card';
+import CardHeader from './CardHeader';
+import CardTitle from './CardTitle';
+import CardOptions from './CardOptions';
+import CardContent from './CardContent';
+import CardActions from './CardActions';
+import CardActionsAux from './CardActionsAux';
+
+export {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardOptions,
+    CardContent,
+    CardActions,
+    CardActionsAux,
+};

package/src/components/Card/stories/Card.stories.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+    CardHeader,
+    Card,
+    CardContent,
+    CardTitle,
+    CardOptions,
+    CardActions,
+} from "../";
+import Divider from "../../Separation/Divider";
+
+import { Default as CardHeaderExample } from "./CardHeader.stories";
+import { Default as CardContentExample } from "./CardContent.stories";
+import { Default as CardActionsExample } from "./CardActions.stories";
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
+export default {
+    title: "Components/Card",
+    component: Card,
+    subcomponents: {
+        CardHeader,
+        CardTitle,
+        CardOptions,
+        CardContent,
+        CardActions,
+    },
+    argTypes: {
+        elevation: {
+            control: { type: "number", min: 0, max: 4 },
+            description: "Intensity of the drop shadow beneath the card. At elevation 0, no drop shadow is applied.",
+            table: {
+                type: { summary: "number: 0 to 5" },
+                defaultValue: { summary: 1 },
+            }
+        },
+        interactive: {
+            control: "boolean",
+            description: "Card responds to user interactions, hovering over the card will increase the card's elevation and change the mouse cursor to a pointer. Is set automatically to `true` if an `onClick` handler is available.",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            }
+        },
+        onClick: {
+            ...helpersArgTypes.handlerOnClick,
+            description: "Callback invoked when the card is clicked.",
+            defaultValue: null,
+            table: {
+                type: { summary: "(e: MouseEvent<HTMLDivElement>) => void" },
+                defaultValue: { summary: undefined },
+            }
+        },
+        children: {
+            control: "none",
+            description: "Elements to include into the card container."
+        }
+    },
+} as ComponentMeta<typeof Card>;
+
+const TemplateFull: ComponentStory<typeof Card> = (args) => (
+    <Card {...args}>
+        <CardHeader {...CardHeaderExample.args} />
+        <Divider />
+        <CardContent {...CardContentExample.args} />
+        <Divider />
+        <CardActions {...CardActionsExample.args} />
+    </Card>
+);
+export const FullExample = TemplateFull.bind({});
+
+const TemplateSimple: ComponentStory<typeof Card> = (args) => (
+    <Card {...args} />
+);
+export const SimpleCard = TemplateSimple.bind({});
+SimpleCard.args = {
+    children: [
+        <CardHeader key="1"><CardTitle>Simple card</CardTitle></CardHeader>,
+        <CardContent key="2">A card do not always need dividers between its components, and also action buttons are not mandatory</CardContent>
+    ]
+}

package/src/components/Card/stories/CardActions.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+  CardActions,
+  CardActionsAux,
+} from "../index";
+
+import Button from "../../Button/Button";
+
+import { Default as CardTitleExample } from "./CardTitle.stories";
+import { Default as CardOptionsExample } from "./CardOptions.stories";
+
+export default {
+  title: "Components/Card/CardActions",
+  component: CardActions,
+  subcomponents: {
+    CardActionsAux,
+  },
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Elements to include into the actions container."
+      }
+  },
+} as ComponentMeta<typeof CardActions>;
+
+const Template: ComponentStory<typeof CardActions> = (args) => (
+    <CardActions {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <Button affirmative key={"1"}>Main action</Button>,
+        <Button key={"2"}>Cancel</Button>,
+        <CardActionsAux key={"3"}>
+            <Button outlined>Other action</Button>
+        </CardActionsAux>
+    ],
+}

package/src/components/Card/stories/CardContent.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+
+import {
+  CardContent,
+} from "../index";
+
+export default {
+  title: "Components/Card/CardContent",
+  component: CardContent,
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Elements for card content."
+      }
+  },
+} as ComponentMeta<typeof CardContent>;
+
+const Template: ComponentStory<typeof CardContent> = (args) => (
+    <CardContent {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <HtmlContentBlock><LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} /></HtmlContentBlock>,
+}

package/src/components/Card/stories/CardHeader.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+  CardHeader,
+  CardTitle,
+  CardOptions,
+} from "../index";
+
+import { Default as CardTitleExample } from "./CardTitle.stories";
+import { Default as CardOptionsExample } from "./CardOptions.stories";
+
+export default {
+  title: "Components/Card/CardHeader",
+  component: CardHeader,
+  subcomponents: {
+    CardTitle,
+    CardOptions,
+  },
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Elements to include into the header."
+      }
+  },
+} as ComponentMeta<typeof CardHeader>;
+
+const Template: ComponentStory<typeof CardHeader> = (args) => (
+    <CardHeader {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: [
+        <CardTitle {...CardTitleExample.args} key="1" />,
+        <CardOptions {...CardOptionsExample.args} key="2" />
+    ],
+}

package/src/components/Card/stories/CardOptions.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import IconButton from "../../Icon/IconButton";
+
+import {
+  CardOptions,
+} from "../index";
+
+export default {
+  title: "Components/Card/CardOptions",
+  component: CardOptions,
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Elements for user-interaction."
+      }
+  },
+} as ComponentMeta<typeof CardOptions>;
+
+const Template: ComponentStory<typeof CardOptions> = (args) => (
+    <CardOptions {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    children: <IconButton name="item-question" onClick={() => alert("Some action is triggered")} />
+}

package/src/components/Card/stories/CardTitle.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import {
+  CardTitle,
+} from "../index";
+
+export default {
+  title: "Components/Card/CardTitle",
+  component: CardTitle,
+  argTypes: {
+      children: {
+          control: "none",
+          description: "Elements for card title."
+      }
+  },
+} as ComponentMeta<typeof CardTitle>;
+
+const Template: ComponentStory<typeof CardTitle> = (args) => (
+    <CardTitle {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    narrowed: false,
+    children: <h2>Card title</h2>,
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Checkbox as BlueprintCheckbox } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Checkbox({
+    children,
+    className='',
+    ...restProps
+}: any) {
+    return (
+        <BlueprintCheckbox
+            {...restProps}
+            className={`${eccgui}-checkbox ` + className}
+        >
+            {children}
+        </BlueprintCheckbox>
+    );
+};
+
+export default Checkbox;

package/src/components/Checkbox/checkbox.scss

@@ -0,0 +1,61 @@
+// our vars
+$eccgui-color-checkbox: $eccgui-color-workspace-text !default;
+$eccgui-color-checkbox-background: transparent !default;
+$eccgui-color-checkbox-checked: $eccgui-color-accent !default;
+$eccgui-color-checkbox-checked-background: transparent !default;
+// library vars
+$control-background-color: $eccgui-color-checkbox-background !default;
+$control-background-color-hover: $eccgui-color-checkbox-background !default;
+$control-background-color-active: $eccgui-color-checkbox-background !default;
+// $dark-control-background-color: $dark-button-background-color !default;
+// $dark-control-background-color-hover: $dark-button-background-color-hover !default;
+// $dark-control-background-color-active: $dark-button-background-color-active !default;
+$control-checked-background-color: $eccgui-color-checkbox-checked-background !default;
+$control-checked-background-color-hover: $eccgui-color-checkbox-checked-background !default;
+$control-checked-background-color-active: $eccgui-color-checkbox-checked-background !default;
+$control-indicator-size: 16px; // !default;
+$control-indicator-size-large: 20px !default;
+$control-indicator-spacing: $eccgui-size-inline-whitespace !default;
+// $switch-background-color: rgba($gray4, 0.5) !default;
+// $switch-background-color-hover: rgba($gray2, 0.5) !default;
+// $switch-background-color-active: rgba($gray1, 0.5) !default;
+// $switch-background-color-disabled: $button-background-color-disabled !default;
+$switch-checked-background-color: $eccgui-color-accent !default;
+$switch-checked-background-color-hover: rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
+$switch-checked-background-color-active: $switch-checked-background-color-hover !default;
+$switch-checked-background-color-disabled: rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
+
+@import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
+
+.#{$ns}-control {
+    &.#{$ns}-checkbox {
+        input ~ .#{$ns}-control-indicator,
+        input:checked ~ .#{$ns}-control-indicator,
+        input:indeterminate ~ .#{$ns}-control-indicator {
+            box-shadow: none;
+        }
+
+        input:disabled ~ .#{$ns}-control-indicator,
+        input:disabled:checked ~ .#{$ns}-control-indicator,
+        {
+            background-color: $eccgui-color-checkbox-background;
+            opacity: 1;
+
+            &::before {
+                opacity: 0.25;
+            }
+        }
+
+        input ~ .#{$ns}-control-indicator::before {
+            // TODO: set set icon line colors here we need a custom js inject like blueprint uses
+            color: $eccgui-color-checkbox-checked;
+            background-image: url("~@carbon/icons/svg/32/checkbox.svg");
+        }
+        input:checked ~ .#{$ns}-control-indicator::before {
+            background-image: url("~@carbon/icons/svg/32/checkbox--checked.svg");
+        }
+        input:indeterminate ~ .#{$ns}-control-indicator::before {
+            background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg");
+        }
+    }
+}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import ContextOverlay from "./ContextOverlay";
+import Menu from "../Menu/Menu";
+import IconButton from "../Icon/IconButton";
+
+function ContextMenu({
+    children,
+    className = "",
+    togglerElement = "item-moremenu",
+    togglerText = "Show more options",
+    togglerLarge = false,
+    /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
+              so by default we use the title attribute instead of Tooltip. */
+    tooltipAsTitle = true,
+    ...restProps
+}: any) {
+    return (
+        <ContextOverlay {...restProps} className={`${eccgui}-contextmenu ` + className}>
+            {typeof togglerElement === "string" ? (
+                <IconButton
+                    tooltipAsTitle={tooltipAsTitle}
+                    name={togglerElement}
+                    text={togglerText}
+                    large={togglerLarge}
+                    data-test-id={restProps["data-test-id"]}
+                />
+            ) : (
+                { togglerElement }
+            )}
+            <Menu>{children}</Menu>
+        </ContextOverlay>
+    );
+}
+
+export default ContextMenu;

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Popover as BlueprintPropover, Position as BlueprintPosition } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+/*
+
+    @see https://blueprintjs.com/docs/#core/components/popover for list of
+    properties
+
+*/
+
+function ContextOverlay({
+    children,
+    className='',
+    ...restProps
+}: any) {
+
+    return (
+        <BlueprintPropover
+            position={BlueprintPosition.BOTTOM}
+            {...restProps}
+            className={`${eccgui}-contextoverlay ` + className}
+        >
+            {children}
+        </BlueprintPropover>
+    )
+}
+
+export default ContextOverlay;

package/src/components/ContextOverlay/contextoverlay.scss

@@ -0,0 +1,15 @@
+/*
+$popover-background-color: $white !default;
+$dark-popover-background-color: $dark-gray4 !default;
+*/
+
+@import "~@blueprintjs/core/src/components/popover/popover";
+
+.#{$ns}-popover-wrapper {
+    max-width: 100%;
+}
+
+.#{$ns}-popover-target {
+    cursor: pointer;
+    max-width: 100%;
+}

package/src/components/Dialog/AlertDialog.tsx

@@ -0,0 +1,52 @@
+/*
+    provides a simple interface for alert dialogs
+*/
+
+import React from 'react';
+import {Definitions as IntentStates, IntentTypes} from "../../common/Intent";
+import SimpleDialog, { SimpleDialogProps } from './SimpleDialog';
+
+export interface IAlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
+  /**
+   * set to true if alert dialog displays a success message
+   */
+  success?: boolean;
+  /**
+   *  set to true if alert dialog displays a warning
+   */
+  warning?: boolean;
+  /**
+   * set to true if alert dialog displays a strong message about errors or disruptive actions
+   */
+  danger?: boolean;
+}
+
+/**
+ * Special element to display alert notification in modal dialogs.
+ * Inherits all properties from `SimpleDialog`, except `intent`.
+ */
+function AlertDialog({
+    children,
+    success=false,
+    warning=false,
+    danger=false,
+    ...otherProps
+}: IAlertDialogProps) {
+    let intentLevel: IntentTypes = IntentStates.INFO;
+    if (success) { intentLevel = IntentStates.SUCCESS; }
+    if (warning) { intentLevel = IntentStates.WARNING; }
+    if (danger) { intentLevel = IntentStates.DANGER; }
+
+    return (
+        <SimpleDialog
+            size="tiny"
+            preventSimpleClosing={true}
+            intent={intentLevel}
+            {...otherProps}
+        >
+            {children}
+        </SimpleDialog>
+    );
+};
+
+export default AlertDialog;