@eccenca/gui-elements 23.7.0 → 23.8.0-rc.1

package/src/components/Accordion/accordion.scss

@@ -1,21 +1,85 @@
 // lib import
+@use "sass:color";
 @use "~@carbon/styles/scss/components/accordion/accordion";
 @include accordion.accordion;
 
 // own vars
 $eccgui-color-accordion-background-elevated: rgba($eccgui-color-accent, 0.1) !default;
 $eccgui-color-accordion-toggler-hover: $menu-item-color-hover !default;
-$eccgui-color-accordion-toggler-elevated-hover: mix(
+$eccgui-color-accordion-toggler-elevated-hover: color.mix(
     $eccgui-color-accordion-background-elevated,
     $eccgui-color-accordion-toggler-hover,
     50%
 ) !default;
+$eccgui-size-accordion-header-baseheight: mini-units(5) !default;
+$eccgui-size-accordion-content-basespace: $eccgui-size-block-whitespace * 0.5 !default;
+$eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
 
 // changes
 
+.#{$prefix}--accordion {
+    --#{$eccgui}-accordion-header-height: #{$eccgui-size-accordion-header-baseheight};
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace};
+    --#{$eccgui}-accordion-separation: 0;
+}
+.#{$eccgui}-accordion__item--condensed,
+.#{$eccgui}-accordion__container--global-headerspace-none,
+.#{$eccgui}-accordion__item--headerspace-none {
+    --#{$eccgui}-accordion-header-height: 0;
+}
+.#{$eccgui}-accordion__item--condensed,
+.#{$eccgui}-accordion__container--global-contentspace-none,
+.#{$eccgui}-accordion__item--contentspace-none {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-block-whitespace * 0.25};
+}
+.#{$eccgui}-accordion__container--global-headerspace-small,
+.#{$eccgui}-accordion__item--headerspace-small {
+    --#{$eccgui}-accordion-header-height: calc(
+        #{$eccgui-size-accordion-header-baseheight} - #{$eccgui-size-block-whitespace * 0.5}
+    );
+}
+.#{$eccgui}-accordion__container--global-contentspace-small,
+.#{$eccgui}-accordion__item--contentspace-small {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace * 0.5};
+}
+.#{$eccgui}-accordion__container--global-headerspace-large,
+.#{$eccgui}-accordion__item--headerspace-large {
+    --#{$eccgui}-accordion-header-height: calc(
+        #{$eccgui-size-accordion-header-baseheight} + #{$eccgui-size-block-whitespace * 0.5}
+    );
+}
+.#{$eccgui}-accordion__container--global-contentspace-large,
+.#{$eccgui}-accordion__item--contentspace-large {
+    --#{$eccgui}-accordion-content-whitespace: #{$eccgui-size-accordion-content-basespace * 1.5};
+}
+
+.#{$eccgui}-accordion__container--global-separationspace-small,
+.#{$eccgui}-accordion__item--separationspace-small {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation * 0.5};
+}
+.#{$eccgui}-accordion__container--global-separationspace-medium,
+.#{$eccgui}-accordion__item--separationspace-medium {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation};
+}
+.#{$eccgui}-accordion__container--global-separationspace-large,
+.#{$eccgui}-accordion__item--separationspace-large {
+    --#{$eccgui}-accordion-separation: #{$eccgui-size-accordion-separation * 1.5};
+}
+
+.#{$eccgui}-accordion__item {
+    &:not(:last-child) {
+        margin-bottom: var(--#{$eccgui}-accordion-separation);
+    }
+
+    [class*="#{$eccgui}-accordion__container--global-separationspace-"] &:not(.#{$eccgui}-accordion__item--noborder),
+    &[class*="#{$eccgui}-accordion__item--separationspace-"]:not(.#{$eccgui}-accordion__item--noborder) {
+        border-bottom: 1px solid var(--#{$prefix}-border-subtle);
+    }
+}
+
 .#{$prefix}--accordion__heading {
     align-items: center;
-    min-height: mini-units(5);
+    min-height: var(--#{$eccgui}-accordion-header-height, mini-units(5));
     color: inherit;
 
     .#{$prefix}--accordion__arrow {
@@ -25,6 +89,23 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
             margin: 0 0 0 $eccgui-size-block-whitespace * 0.5;
         }
     }
+
+    .#{$eccgui}-accordion__item--condensed &,
+    .#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$eccgui}-accordion__item--contentspace-none & {
+        .#{$prefix}--accordion__arrow {
+            margin: 0;
+        }
+
+        .#{$prefix}--accordion__title {
+            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
+        }
+    }
+
+    &:hover::before,
+    &:focus::before {
+        background-color: $eccgui-color-accordion-toggler-hover;
+    }
 }
 
 .#{$prefix}--accordion__title {
@@ -43,15 +124,15 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
     position: fixed;
     left: -5000em;
     display: block;
-    padding: $eccgui-size-block-whitespace * 0.5;
+    padding: 0 $eccgui-size-block-whitespace * 0.5;
     margin: 0 calc(1rem + #{$eccgui-size-block-whitespace * 0.5}) 0 $eccgui-size-block-whitespace * 0.5;
     opacity: 0;
 
     .#{$prefix}--accordion__item--active & {
         position: static;
         left: auto;
-        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace
-            $eccgui-size-block-whitespace * 0.5;
+        padding: calc(0.75 * var(--#{$eccgui}-accordion-content-whitespace)) $eccgui-size-block-whitespace * 0.5
+            calc(1.25 * var(--#{$eccgui}-accordion-content-whitespace)) $eccgui-size-block-whitespace * 0.5;
         opacity: 1;
     }
 
@@ -63,6 +144,23 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
         margin: 0;
     }
 
+    .#{$eccgui}-accordion__item--condensed &,
+    .#{$eccgui}-accordion__container--global-contentspace-none &,
+    .#{$eccgui}-accordion__item--contentspace-none & {
+        padding-right: 0;
+        padding-left: 0;
+    }
+
+    .#{$eccgui}-accordion__item--condensed:not(.#{$eccgui}-accordion__item--fullwidth) &,
+    .#{$prefix}--accordion--start.#{$eccgui}-accordion__container--global-contentspace-none
+        :not(.#{$eccgui}-accordion__item--fullwidth)
+        &,
+    .#{$prefix}--accordion--start
+        .#{$eccgui}-accordion__item--contentspace-none:not(.#{$eccgui}-accordion__item--fullwidth)
+        & {
+        margin-left: calc(1rem + #{$eccgui-size-block-whitespace * 0.25});
+    }
+
     *,
     *::before,
     *::after {
@@ -70,13 +168,6 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
     }
 }
 
-.#{$prefix}--accordion__heading {
-    &:hover::before,
-    &:focus::before {
-        background-color: $eccgui-color-accordion-toggler-hover;
-    }
-}
-
 .#{$eccgui}-accordion__item--elevated {
     background-color: $eccgui-color-accordion-background-elevated;
 
@@ -95,35 +186,3 @@ $eccgui-color-accordion-toggler-elevated-hover: mix(
         border-bottom: none;
     }
 }
-
-.#{$eccgui}-accordion__item--condensed {
-    .#{$prefix}--accordion__heading {
-        min-height: 0;
-        padding: 0;
-        line-height: 1em;
-
-        .#{$prefix}--accordion__arrow {
-            margin: 0;
-
-            .#{$prefix}--accordion--start & {
-                margin: 0;
-            }
-        }
-
-        .#{$prefix}--accordion__title {
-            margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
-
-            .#{$prefix}--accordion--start & {
-                margin: 0 0 0 $eccgui-size-block-whitespace * 0.25;
-            }
-        }
-    }
-
-    .#{$prefix}--accordion__content {
-        padding: $eccgui-size-block-whitespace * 0.25 0;
-
-        .#{$prefix}--accordion__item--active & {
-            padding: $eccgui-size-block-whitespace * 0.25 0;
-        }
-    }
-}

package/src/components/Application/ApplicationContainer.tsx

@@ -3,12 +3,28 @@ import { OverlaysProvider } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationContainerProps = React.HTMLAttributes<HTMLDivElement>;
+import { useDropzoneMonitor } from "./helper";
+
+export interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If set then the `element` is extended automatically by a `monitor-dropzone` data attribute.
+     * This need to match with a `dropzone-for` data attribute on available dropzones for dragged elements.
+     */
+    monitorDropzonesFor?: string[];
+}
+
+export const ApplicationContainer = ({
+    children,
+    className = "",
+    monitorDropzonesFor = [],
+    ...otherDivProps
+}: ApplicationContainerProps) => {
+    const containerRef = React.useRef<any>(null);
+    useDropzoneMonitor(monitorDropzonesFor);
 
-export const ApplicationContainer = ({ children, className = "", ...otherDivProps }: ApplicationContainerProps) => {
     return (
         <OverlaysProvider>
-            <div className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
+            <div ref={containerRef} className={`${eccgui}-application__container ${className}`} {...otherDivProps}>
                 {children}
             </div>
         </OverlaysProvider>

package/src/components/Application/_dropzone.scss

@@ -0,0 +1,36 @@
+[data-dropzone-for] {
+    transition: box-shadow 500ms;
+}
+
+body[data-monitor-dropzone] {
+    & > * {
+        pointer-events: none;
+    }
+    .#{$eccgui}-application__container,
+    .#{$eccgui}-dialog__portal {
+        *:not([data-dropzone-for], .uppy-DragDrop--isDragDropSupported) {
+            pointer-events: none;
+        }
+    }
+}
+
+body[data-monitor-dropzone~="application/reactflow"] [data-dropzone-for~="application/reactflow"],
+body[data-monitor-dropzone~="Files"] [data-dropzone-for~="Files"],
+body[data-monitor-dropzone~="Files"] .uppy-DragDrop--isDragDropSupported {
+    pointer-events: all !important;
+    box-shadow: 0 0 $eccgui-size-inline-whitespace $eccgui-color-accent inset;
+
+    & > * {
+        pointer-events: all;
+        opacity: $eccgui-opacity-regular;
+    }
+}
+
+body[data-monitor-dropzone]:has(.#{$eccgui}-dialog__portal > .#{$ns}-overlay-open) {
+    & > *:not(.#{$eccgui}-dialog__portal) {
+        &,
+        & * {
+            pointer-events: none !important;
+        }
+    }
+}

package/src/components/Application/application.scss

@@ -8,3 +8,4 @@
 
 // @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
 @import "content";
+@import "dropzone";

package/src/components/Application/helper.ts

@@ -19,3 +19,42 @@ export const useApplicationHeaderOverModals = (elevate: boolean, className: stri
         }
     }, [elevate, className]);
 };
+
+/**
+ * Tracks drag operations over the application.
+ * Sets different data attributes to the body element.
+ * They can be used to apply styling rules.
+ */
+export const useDropzoneMonitor = (enabledTypes: string[]) => {
+    React.useEffect(() => {
+        const monitor = window.document.body;
+
+        const addMonitor = (event: DragEvent) => {
+            const types = event.dataTransfer?.types || [];
+            const monitorTypes = [...new Set(types.filter((type) => enabledTypes.includes(type)))];
+            if (monitorTypes.length > 0 && !monitor.dataset.monitorDropzone) {
+                monitor.dataset.monitorDropzone = monitorTypes.join(" ");
+            }
+            event.preventDefault();
+        };
+
+        const removeMonitor = (event: DragEvent) => {
+            if (event.type === "drop" || monitor === event.target) {
+                delete monitor.dataset.monitorDropzone;
+                event.preventDefault();
+            }
+        };
+
+        if (monitor) {
+            monitor.addEventListener("dragover", addMonitor);
+            monitor.addEventListener("dragleave", removeMonitor);
+            monitor.addEventListener("drop", removeMonitor);
+            return () => {
+                monitor.removeEventListener("dragover", addMonitor);
+                monitor.removeEventListener("dragleave", removeMonitor);
+                monitor.removeEventListener("drop", removeMonitor);
+            };
+        }
+        return;
+    }, []);
+};

package/src/components/TextField/TextArea.tsx

@@ -116,7 +116,7 @@ export const TextArea = ({
                     );
                     leftIconElement.addEventListener("click", (_event: MouseEvent) => {
                         textAreaElement.focus();
-                    }); //onclick((_event: MouseEvent) => {textAreaElement.dispatchEvent("click")})
+                    });
                 }
 
                 if (rightElement && wrapperElement) {

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -25,7 +25,12 @@ export default {
                 ),
                 "2 Icon buttons": (
                     <>
-                        <IconButton name={"item-comment"} onClick={() => alert("1 clicked")} text="Button 1" />
+                        <IconButton
+                            name={"item-comment"}
+                            onClick={() => alert("1 clicked")}
+                            text="Button 1"
+                            affirmative
+                        />
                         <IconButton name={"item-edit"} onClick={() => alert("2 clicked")} text="Button 2" />
                     </>
                 ),

package/src/components/TextField/textfield.scss

@@ -184,6 +184,28 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     right: 0;
+    filter: grayscale(1);
+
+    &:hover,
+    .#{$eccgui}-textarea:focus ~ & {
+        filter: none;
+    }
+
+    & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
+        }
+    }
+
+    .#{$ns}-input.#{$ns}-small ~ & > .#{$eccgui}-button--icon {
+        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+        &:last-of-type {
+            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+        }
+    }
 }
 
 .#{$eccgui}-textfield--justifyclearance {

package/src/configuration/_variables.scss

@@ -72,6 +72,7 @@ $eccgui-opacity-regular: 1 !default;
 $eccgui-opacity-narrow: 0.8 !default;
 $eccgui-opacity-muted: 0.61 !default;
 $eccgui-opacity-disabled: 0.39 !default;
+$eccgui-opacity-ghostly: 0.2 !default;
 $eccgui-opacity-invisible: 0 !default;
 
 // -- Configuration stack of z-indexes -----------------------------------------

package/src/extensions/_index.scss

@@ -5,3 +5,5 @@ CodeMirror styles are already included by the base component styles
 because it is used as lib for elements there already. 
 @import "./codemirror/codemirror";
 */
+
+@import "./uppy/fileupload";

package/src/extensions/uppy/_fileupload.scss

@@ -0,0 +1,47 @@
+/**
+ * TODO: we need to create a own FileUpload component based on Uppy to justify its usage.
+ */
+
+$eccgui-size-fileupload-border-width: $button-border-width;
+$eccgui-size-fileupload-border-radius: $button-border-radius;
+$eccgui-color-fileupload-border: rgba($black, $pt-drop-shadow-opacity);
+$eccgui-color-fileupload-background: $eccgui-color-accordion-background-elevated;
+$eccgui-color-fileupload-text: inherit;
+
+.uppy-DragDrop-container {
+    background-color: $eccgui-color-fileupload-background;
+    border: solid $eccgui-size-fileupload-border-width $eccgui-color-fileupload-border;
+    border-radius: $eccgui-size-fileupload-border-radius;
+    transition: box-shadow 500ms;
+
+    * {
+        color: $eccgui-color-fileupload-text;
+    }
+
+    .uppy-DragDrop-inner {
+        padding: $eccgui-size-block-whitespace;
+        line-height: inherit;
+    }
+
+    .uppy-DragDrop-arrow {
+        width: 20px; // normal icon size
+        height: 20px;
+        margin-bottom: $eccgui-size-inline-whitespace;
+    }
+
+    .uppy-DragDrop-label {
+        margin-bottom: $eccgui-size-inline-whitespace;
+        font-size: inherit;
+    }
+}
+
+.uppy-DragDrop--isDraggingOver.uppy-DragDrop--isDragDropSupported {
+    background-color: rgba($eccgui-color-accent, $eccgui-opacity-ghostly);
+    box-shadow: 0 0 $eccgui-size-block-whitespace $eccgui-color-accent inset;
+
+    & > * {
+        color: $eccgui-color-accent-contrast;
+        opacity: $eccgui-opacity-narrow;
+        fill: currentcolor;
+    }
+}

package/src/index.scss

@@ -22,6 +22,9 @@
 // load blueprintjs components
 @import "./includes/blueprintjs/components";
 
+// set more readable variable for prefix
+$prefix-blueprintjs: $ns;
+
 // -- Carbon Elements ----------------------------------------------------------
 
 /*
@@ -41,11 +44,17 @@
 // load carbon components
 @import "./includes/carbon-components/components";
 
+// set more readable variable for prefix
+$prefix-carbon: $prefix;
+
 // == Load basic components styles =============================================
 
 @import "./components";
 @import "./extensions/codemirror/codemirror";
 
+// set more readable variable for prefix
+$prefix-eccgui: $eccgui;
+
 // == load tweaks ==============================================================
 
 @import "./shame";