@eccenca/gui-elements 23.1.0 → 23.2.0-rc.1

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -7,7 +7,8 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import BreadcrumbItem from "./BreadcrumbItem";
 import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
-type ReducedBreadcrumbsProps = Omit<
+// FIXME: enforce onItemClick later when href value can always be routed correctly
+export interface BreadcrumbListProps extends Omit<
     BlueprintBreadcrumbsProps,
     // we remove some properties that are currently not necessary, required usage should be discussed
     "breadcrumbRenderer" |
@@ -16,10 +17,7 @@ type ReducedBreadcrumbsProps = Omit<
     "minVisibleItems" |
     "overflowListProps" |
     "popoverProps"
->;
-
-// FIXME: enforce onItemClick later when href value can always be routed correctly
-interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
+> {
     /**
         list of breadcrumb items to display
     */
@@ -51,7 +49,7 @@ interface BreadcrumbListProps extends ReducedBreadcrumbsProps {
 /**
  * Navigation path to the currently show resource or view in the application.
  */
-function BreadcrumbList({
+export const BreadcrumbList = ({
     className = "",
     // itemDivider = "/",
     onItemClick,
@@ -59,7 +57,7 @@ function BreadcrumbList({
     ignoreOverflow = false,
     latenOverflow = false,
     ...otherBlueprintBreadcrumbsProps
-}: BreadcrumbListProps) {
+}: BreadcrumbListProps) => {
     const renderBreadcrumb = useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
         const {onClick, ...otherProps} = propsBreadcrumb;
         return (

package/src/components/Breadcrumb/breadcrumb.scss

@@ -11,23 +11,23 @@
     }
 
     & > li::after {
-        background: none;
-        margin: 0;
-        height: auto;
-        width: auto;
         display: inline-block;
-        vertical-align: middle;
-        content: "/";
+        flex-shrink: 0;
+        width: auto;
         width: $eccgui-size-block-whitespace;
+        height: auto;
+        margin: 0;
         text-align: center;
-        flex-shrink: 0;
+        vertical-align: middle;
+        content: "/";
+        background: none;
     }
 
     .#{$ns}-breadcrumbs-collapsed {
         padding: 0;
         margin: 0;
 
-        &:before  {
+        &::before {
             width: $eccgui-size-block-whitespace * 2;
             height: $eccgui-size-block-whitespace;
             background-image: url("~@carbon/icons/svg/32/overflow-menu--horizontal.svg");
@@ -36,6 +36,10 @@
             background-size: cover;
         }
     }
+
+    .#{$eccgui}-overviewitem__line > & {
+        display: flex;
+    }
 }
 
 .#{$eccgui}-breadcrumb__list--latenoverflow {
@@ -45,30 +49,32 @@
     }
 
     .#{$eccgui}-breadcrumb__item > * {
-        text-overflow: ellipsis;
+        display: inline;
         overflow: hidden;
+        text-overflow: ellipsis;
         vertical-align: middle;
-        display: inline;
     }
 }
 
 .#{$eccgui}-breadcrumb__item {
-    font-size: inherit;
+    display: inline-block;
     overflow: hidden;
+    font-size: inherit;
     text-overflow: ellipsis;
-    display: inline-block;
+
+    a {
+        @extend .#{$eccgui}-breadcrumb__item;
+        @extend .#{$ns}-breadcrumb;
+    }
 }
 
 a.#{$eccgui}-breadcrumb__item {
     &:not(.#{$ns}-breadcrumb-current):not(.#{$ns}-disabled) {
         text-decoration: underline;
+
         &:hover,
         &:focus {
             text-decoration: none;
         }
     }
-    a {
-        @extend .#{$eccgui}-breadcrumb__item;
-        @extend .#{$ns}-breadcrumb;
-    }
 }

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from "./BreadcrumbList";
+export * from "./BreadcrumbItem";

package/src/components/Breadcrumb/stories/BreadcrumbList.stories.tsx

@@ -1,27 +1,30 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { BreadcrumbList, BreadcrumbItem } from './../../../index';
+import { Meta, StoryFn } from "@storybook/react";
+
+import { BreadcrumbItem, BreadcrumbList } from "./../../../index";
 
 export default {
     title: "Components/Breadcrumbs/List",
     component: BreadcrumbList,
     subcomponents: { BreadcrumbItem },
-    argTypes: {
-    },
-}  as ComponentMeta<typeof BreadcrumbList>
+    argTypes: {},
+} as Meta<typeof BreadcrumbList>;
 
-const Template: ComponentStory<typeof BreadcrumbList> = (args) => (
-    <BreadcrumbList  {...args} />
-);
+const Template: StoryFn<typeof BreadcrumbList> = (args) => <BreadcrumbList {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    items : [
-        {text: "Root page", href : "#" },
-        {text: "Main click category", onClick: () => alert("Breadcrumb click")},
-        {text: <div>Sub category item</div>, href: "#"},
-        {text: <span>Disabled breadcrumb with a very long title</span>, disabled: true},
-        {text: <a href="#wrong">Wrongly placed link inside link</a>},
-        {text: "Current breadcrumb item", current: true}
+    onItemClick: undefined,
+    items: [
+        { text: "Non-click root page" },
+        { text: "Main click category", onClick: () => alert("Breadcrumb click") },
+        { text: <div>Sub category item</div>, href: "#" },
+        {
+            text: <span>Disabled breadcrumb with a very long title</span>,
+            disabled: true,
+            onClick: () => alert("Test click (should not be triggered)"),
+        },
+        { text: <a href="#wrong">Wrongly placed link inside link</a> },
+        { text: "Current breadcrumb item", current: true, href: "#" },
     ],
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
+
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Button, Icon, Spacing} from "../../../index";
+import { Button, Icon, Spacing } from "../../../index";
 import { helpersArgTypes } from "../../../.storybook/helpers";
 
 export default {
@@ -19,9 +20,7 @@ export default {
     },
 } as ComponentMeta<typeof Button>;
 
-const TemplateFull: ComponentStory<typeof Button> = (args) => (
-    <Button {...args} />
-);
+const TemplateFull: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
@@ -79,7 +78,9 @@ const TemplateContent: ComponentStory<typeof Button> = (args) => (
     <>
         <Button {...args} text="Property label" />
         <Spacing vertical />
-        <Button {...args} text={undefined}>Children label</Button>
+        <Button {...args} text={undefined}>
+            Children label
+        </Button>
     </>
 );
 export const ButtonLabels = TemplateContent.bind({});

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

@@ -1,37 +1,36 @@
 import React from "react";
+
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import {
-  FullExample,
-} from "./Button.stories";
+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 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 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);
-  });
+    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

@@ -1,50 +1,54 @@
 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 Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
+
 import Badge, { BadgeProps } from "./../Badge/Badge";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {ValidIconName} from "../Icon/canonicalIconNames";
+import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 
-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;
     /**
      * Content displayed in a badge that is attached to the button.
@@ -53,20 +57,20 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
      */
     badge?: BadgeProps["children"];
     /**
-    * Object with additional properties for the badge.
-    */
+     * 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.
-    */
+     * 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;
@@ -77,85 +81,85 @@ 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,
-  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;
-  }
+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}
-      {badge && (
-          <Badge
-            children={ badge }
-            {...constructBadgeProperties({
-                hasStatePrimary,
-                hasStateSuccess,
-                hasStateWarning,
-                hasStateDanger,
-                minimal: restProps.minimal,
-                outlined: restProps.outlined,
-                badgeProps
-            })}
-          />
-      )}
-    </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"> {};
+interface constructBadgePropertiesProps
+    extends Pick<
+            ButtonProps,
+            "hasStatePrimary" | "hasStateSuccess" | "hasStateWarning" | "hasStateDanger" | "badgeProps"
+        >,
+        Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
 
 const constructBadgeProperties = ({
     hasStatePrimary,
@@ -164,19 +168,19 @@ const constructBadgeProperties = ({
     hasStateDanger,
     minimal,
     outlined,
-    badgeProps = {}
+    badgeProps = {},
 }: constructBadgePropertiesProps) => {
-    if (!!badgeProps.intent) return badgeProps;
+    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}
+            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,10 +49,26 @@ $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";
@@ -62,30 +79,31 @@ $button-intents: (
     .#{$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);
+            }
         }
-      }
     }
 }