@eccenca/gui-elements 23.1.0-rc.4 → 23.2.0-rc.0

package/src/components/Button/Button.tsx

@@ -1,61 +1,76 @@
 import React from "react";
 import {
-  AnchorButton as BlueprintAnchorButton,
-  Button as BlueprintButton,
-  ButtonProps as BlueprintButtonProps,
-  AnchorButtonProps as BlueprintAnchorButtonProps,
-  Intent as BlueprintIntent,
+    AnchorButton as BlueprintAnchorButton,
+    AnchorButtonProps as BlueprintAnchorButtonProps,
+    Button as BlueprintButton,
+    ButtonProps as BlueprintButtonProps,
+    Intent as BlueprintIntent,
 } from "@blueprintjs/core";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
+
+import Badge, { BadgeProps } from "./../Badge/Badge";
 import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {ValidIconName} from "../Icon/canonicalIconNames";
 
-export type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
+export type AnchorOrButtonProps =
+    | Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon">
+    | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
     /**
-    * Always use this when the button triggers an affirmative action, e.g. confirm a process.
-    * The button is displayed with primary color scheme.
-    */
+     * 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.
-    */
+     * 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.
-    */
+     * 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.
-    */
+     * The button is displayed with primary color scheme.
+     */
     hasStatePrimary?: boolean;
     /**
-    * The button is displayed with success (some type of green) color scheme.
-    */
+     * 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.
-    */
+     * 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.
-    */
+     * 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.
-    */
+     * Content displayed in a badge that is attached to the button.
+     * By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
+     * Use `badgeProps` to change that default behaviour.
+     */
+    badge?: BadgeProps["children"];
+    /**
+     * Object with additional properties for the badge.
+     */
+    badgeProps?: Partial<Omit<BadgeProps, "children">>;
+    /**
+     * 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.
-    */
+     * Object with additional properties for the tooltip.
+     */
     tooltipProps?: 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.
-    */
+     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
+     */
     href?: string;
     icon?: ValidIconName | JSX.Element;
     rightIcon?: ValidIconName | JSX.Element;
@@ -66,63 +81,106 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
  * 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,
-  tooltipProps,
-  ...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;
-  }
+export const Button = ({
+    children,
+    className = "",
+    affirmative = false,
+    disruptive = false,
+    elevated = false,
+    hasStatePrimary = false,
+    hasStateSuccess = false,
+    hasStateWarning = false,
+    hasStateDanger = false,
+    icon,
+    rightIcon,
+    tooltip = null,
+    tooltipProps,
+    badge,
+    badgeProps = { size: "small", position: "top-right", maxLength: 2 },
+    ...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: any = restProps.href ? BlueprintAnchorButton : BlueprintButton;
+    const ButtonType: any = 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>
-  );
+    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}
+            {badge && (
+                <Badge
+                    children={badge}
+                    {...constructBadgeProperties({
+                        hasStatePrimary,
+                        hasStateSuccess,
+                        hasStateWarning,
+                        hasStateDanger,
+                        minimal: restProps.minimal,
+                        outlined: restProps.outlined,
+                        badgeProps,
+                    })}
+                />
+            )}
+        </ButtonType>
+    );
 
-  return (tooltip && !restProps.loading) ? (
-    <Tooltip content={tooltip} {...tooltipProps}>
-      <span>{button}</span>
-    </Tooltip>
-  ) : (
-    button
-  );
-}
+    return tooltip && !restProps.loading ? (
+        <Tooltip content={tooltip} {...tooltipProps}>
+            <span>{button}</span>
+        </Tooltip>
+    ) : (
+        button
+    );
+};
+
+interface constructBadgePropertiesProps
+    extends Pick<
+            ButtonProps,
+            "hasStatePrimary" | "hasStateSuccess" | "hasStateWarning" | "hasStateDanger" | "badgeProps"
+        >,
+        Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
+
+const constructBadgeProperties = ({
+    hasStatePrimary,
+    hasStateSuccess,
+    hasStateWarning,
+    hasStateDanger,
+    minimal,
+    outlined,
+    badgeProps = {},
+}: constructBadgePropertiesProps) => {
+    if (badgeProps.intent) return badgeProps;
+    if (hasStatePrimary) badgeProps["intent"] = "accent";
+    if (hasStateSuccess) badgeProps["intent"] = "success";
+    if (hasStateWarning) badgeProps["intent"] = "warning";
+    if (hasStateDanger) badgeProps["intent"] = "danger";
+    if (!badgeProps.tagProps || typeof badgeProps.tagProps.minimal === "undefined") {
+        if (!minimal && !outlined) {
+            badgeProps["tagProps"] = { ...badgeProps.tagProps, minimal: true };
+        }
+    }
+    return badgeProps;
+};
 
 export default Button;

package/src/components/Button/button.scss

@@ -5,6 +5,7 @@ $button-height: $pt-button-height;
 $button-border-width: 1px; // !default;
 $button-padding: ($pt-grid-size * 0.5) $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 * 0.5) ($pt-grid-size * 1.5) !default;
 // $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
@@ -48,42 +49,61 @@ $dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bott
 // $button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
 $button-intents: (
-  "primary": ($eccgui-color-accent, color.scale($eccgui-color-accent, $lightness: -20%), color.scale($eccgui-color-accent, $lightness: -40%)),
-  "success": ($eccgui-color-success-text, color.scale($eccgui-color-success-text, $lightness: -20%), color.scale($eccgui-color-success-text, $lightness: -40%)),
-  "warning": ($eccgui-color-warning-text, color.scale($eccgui-color-warning-text, $lightness: -20%), color.scale($eccgui-color-warning-text, $lightness: -40%)),
-  "danger": ($eccgui-color-danger-text, color.scale($eccgui-color-danger-text, $lightness: -20%), color.scale($eccgui-color-danger-text, $lightness: -40%))
+    "primary": (
+        $eccgui-color-accent,
+        color.scale($eccgui-color-accent, $lightness: -20%),
+        color.scale($eccgui-color-accent, $lightness: -40%),
+    ),
+    "success": (
+        $eccgui-color-success-text,
+        color.scale($eccgui-color-success-text, $lightness: -20%),
+        color.scale($eccgui-color-success-text, $lightness: -40%),
+    ),
+    "warning": (
+        $eccgui-color-warning-text,
+        color.scale($eccgui-color-warning-text, $lightness: -20%),
+        color.scale($eccgui-color-warning-text, $lightness: -40%),
+    ),
+    "danger": (
+        $eccgui-color-danger-text,
+        color.scale($eccgui-color-danger-text, $lightness: -20%),
+        color.scale($eccgui-color-danger-text, $lightness: -40%),
+    ),
 );
 
 @import "~@blueprintjs/core/src/components/button/button";
 
 .#{$ns}-button {
+    position: relative;
+
     .#{$ns}-large {
         min-height: mini-units(6);
     }
+
     // special case override: blueprint do not use configured colors here
     &.#{$ns}-intent-warning {
-      @include pt-button-intent(map.get($button-intents, "warning")...);
+        @include pt-button-intent(map.get($button-intents, "warning")...);
 
-      &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
-        fill: rgba($white, 0.7);
-      }
+        &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
+            fill: rgba($white, 0.7);
+        }
 
-      &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
-        @include pt-button-intent(map.get($button-intents, "warning")...);
-      }
+        &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
+            @include pt-button-intent(map.get($button-intents, "warning")...);
+        }
 
-      &.#{$ns}-minimal,
-      &.#{$ns}-outlined {
-        background: none;
-        box-shadow: none;
-        color: $eccgui-color-warning-text;
-        border-color: $eccgui-color-warning-text;
+        &.#{$ns}-minimal,
+        &.#{$ns}-outlined {
+            color: $eccgui-color-warning-text;
+            background: none;
+            border-color: $eccgui-color-warning-text;
+            box-shadow: none;
 
-        &:disabled,
-        &.#{$ns}-disabled {
-            color: rgba($eccgui-color-warning-text, 0.39);
+            &:disabled,
+            &.#{$ns}-disabled {
+                color: rgba($eccgui-color-warning-text, 0.39);
+            }
         }
-      }
     }
 }
 

package/src/components/Card/Card.tsx

@@ -34,7 +34,7 @@ export interface CardProps extends BlueprintCardProps {
  * Element to separate content sections from each other.
  * Cards can include other cards but should not.
  */
-function Card({
+export const Card = ({
     children,
     className='',
     elevation=1,
@@ -45,7 +45,7 @@ function Card({
     whitespaceAmount="medium",
     interactive,
     ...otherProps
-}: CardProps) {
+}: CardProps) => {
     const scrollIn = !!scrollinOnFocus ? {
         tabIndex: 0,
         onFocus: (e: any) => {

package/src/components/Card/CardActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set an inverse direction of how the elements are aligned.
      * Mainly used for cards used as modals (dialogs).
@@ -13,12 +13,12 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
  * 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 ({
+export const CardActions = ({
     children,
     className='',
     inverseDirection=false,
     ...otherProps
-}: OverviewItemProps) {
+}: CardActionsProps) => {
     return (
         <footer
             {...otherProps}

package/src/components/Card/CardActionsAux.tsx

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

package/src/components/Card/CardContent.tsx

@@ -14,12 +14,12 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-function CardContent({
+export const CardContent = ({
     children,
     className='',
     noFlexHeight,
     ...otherProps
-}: CardContentProps) {
+}: CardContentProps) => {
     return (
         <div
             {...otherProps}

package/src/components/Card/CardHeader.tsx

@@ -5,7 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import CardTitle from "./CardTitle";
 import CardOptions from "./CardOptions";
 
-interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
+export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
     children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
     /**
      * @deprecated
@@ -17,12 +17,12 @@ interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSp
     hasSpacing?: OverviewItemProps["hasSpacing"];
 }
 
-function CardHeader({
+export const CardHeader = ({
     children,
     className = "",
     densityHigh = true,
     ...otherProps
-}: CardHeaderProps) {
+}: CardHeaderProps) => {
     let actions: any[] = [];
     let description: any[] = [];
 

package/src/components/Card/CardOptions.tsx

@@ -2,20 +2,18 @@ import React from 'react';
 import OverviewItemActions, { OverviewItemActionsProps } from './../OverviewItem/OverviewItemActions';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface CardOptionsProps extends Omit<OverviewItemActionsProps, "hiddenInteractions"> {
-
-}
+export 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({
+export const CardOptions = ({
     children,
     className='',
     ...otherProps
-}: CardOptionsProps) {
+}: CardOptionsProps) => {
     return (
         <OverviewItemActions
             {...otherProps}

package/src/components/Card/CardTitle.tsx

@@ -12,12 +12,12 @@ export interface CardTitleProps extends Omit<OverviewItemLineProps, "small" | "l
 /**
  * Display a card title, can include other markup like `h2`, `h3` and so on to define document structure.
  */
-function CardTitle({
+export const CardTitle = ({
     children,
     className='',
     narrowed=false,
     ...otherProps
-}: CardTitleProps) {
+}: CardTitleProps) => {
     return (
         <OverviewItemLine
             {...otherProps}

package/src/components/Card/index.tsx

@@ -1,17 +1,7 @@
-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,
-};
+export * from './Card';
+export * from './CardHeader';
+export * from './CardTitle';
+export * from './CardOptions';
+export * from './CardContent';
+export * from './CardActions';
+export * from './CardActionsAux';

package/src/components/Checkbox/Checkbox.tsx

@@ -5,15 +5,15 @@ import {
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface CheckboxProps extends BlueprintCheckboxProps {
+export interface CheckboxProps extends BlueprintCheckboxProps {
     // currently we do not alter it
 };
 
-function Checkbox({
+export const Checkbox = ({
     children,
     className='',
     ...restProps
-}: CheckboxProps) {
+}: CheckboxProps) => {
     return (
         <BlueprintCheckbox
             {...restProps}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -6,7 +6,7 @@ import Menu from "../Menu/Menu";
 import IconButton from "../Icon/IconButton";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 
-interface ContextMenuProps extends TestableComponent {
+export interface ContextMenuProps extends TestableComponent {
     /**
      * Addional CSS class names.
      */
@@ -45,7 +45,7 @@ interface ContextMenuProps extends TestableComponent {
 /**
  * Element displays menu items after toggler is clicked.
  */
-function ContextMenu({
+export const ContextMenu = ({
     children,
     className = "",
     togglerElement = "item-moremenu",
@@ -57,7 +57,7 @@ function ContextMenu({
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
     ...restProps
-}: ContextMenuProps) {
+}: ContextMenuProps) => {
     return (
         <ContextOverlay
             {...restProps}

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -16,11 +16,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
  * Element displays connected content by interacting with a target element.
  * Full list of available option can be seen at https://blueprintjs.com/docs/#popover2-package/popover2
  */
-function ContextOverlay({
+export const ContextOverlay = ({
     children,
     className='',
     ...restProps
-}: ContextOverlayProps) {
+}: ContextOverlayProps) => {
 
     return (
         <BlueprintPropover

package/src/components/ContextOverlay/index.ts

@@ -0,0 +1,2 @@
+export * from "./ContextOverlay";
+export * from "./ContextMenu";

package/src/components/Dialog/AlertDialog.tsx

@@ -1,12 +1,8 @@
-/*
-    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"> {
+export interface AlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
   /**
    * set to true if alert dialog displays a success message
    */
@@ -21,17 +17,20 @@ export interface IAlertDialogProps extends Omit<SimpleDialogProps, "intent"> {
   danger?: boolean;
 }
 
+// @deprecated
+export type IAlertDialogProps = AlertDialogProps;
+
 /**
  * Special element to display alert notification in modal dialogs.
  * Inherits all properties from `SimpleDialog`, except `intent`.
  */
-function AlertDialog({
+export const AlertDialog = ({
     children,
     success=false,
     warning=false,
     danger=false,
     ...otherProps
-}: IAlertDialogProps) {
+}: AlertDialogProps) => {
     let intentLevel: IntentTypes = IntentStates.INFO;
     if (success) { intentLevel = IntentStates.SUCCESS; }
     if (warning) { intentLevel = IntentStates.WARNING; }