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

package/src/components/Accordion/accordion.scss

@@ -0,0 +1,96 @@
+// lib import
+@import "~carbon-components/scss/components/accordion/accordion";
+
+// changes
+
+
+.#{$prefix}--accordion__heading {
+    min-height: mini-units(5);
+    align-items: center;
+    color: inherit;
+
+    .#{$prefix}--accordion__arrow {
+        margin: 0 $eccgui-size-block-whitespace / 2 0 0;
+
+        .#{$prefix}--accordion--start & {
+            margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+        }
+    }
+}
+
+.#{$prefix}--accordion__title {
+    min-width: 0; // flex layout fix
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0 0 0 $eccgui-size-block-whitespace;
+
+    .#{$prefix}--accordion--start & {
+        margin: 0 0 0 $eccgui-size-block-whitespace / 2;
+    }
+}
+
+.#{$prefix}--accordion__content {
+    padding: $eccgui-size-block-whitespace / 2;
+    margin: 0 calc(1rem + #{$eccgui-size-block-whitespace / 2}) 0 $eccgui-size-block-whitespace / 2;
+
+    .#{$prefix}--accordion__item--active & {
+        padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace / 2;
+    }
+
+    .#{$prefix}--accordion--start & {
+        margin: 0 $eccgui-size-block-whitespace / 2 0 calc(1rem + #{$eccgui-size-block-whitespace / 2});
+    }
+
+    .#{$eccgui}-accordion__item--fullwidth & {
+        margin: 0;
+    }
+
+    *, *::before, *::after {
+        box-sizing: revert;
+    }
+}
+
+.#{$eccgui}-accordion__item--elevated {
+    background-color: $data-table-zebra-color; //rgba($ui-03, alpha($ui-03) * $eccgui-opacity-muted);
+}
+
+.#{$eccgui}-accordion__item--noborder {
+    border-top: none;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.#{$eccgui}-accordion__item--condensed {
+    .#{$prefix}--accordion__heading {
+        min-height: 0;
+        line-height: 1em;
+        padding: 0;
+
+        .#{$prefix}--accordion__arrow {
+            margin: 0;
+
+            .#{$prefix}--accordion--start & {
+                margin: 0;
+            }
+        }
+
+        .#{$prefix}--accordion__title {
+            margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+
+            .#{$prefix}--accordion--start & {
+                margin: 0 0 0 $eccgui-size-block-whitespace / 4;
+            }
+        }
+    }
+
+    .#{$prefix}--accordion__content {
+        padding: $eccgui-size-block-whitespace / 4 0;
+
+        .#{$prefix}--accordion__item--active & {
+            padding: $eccgui-size-block-whitespace / 4 0;
+        }
+    }
+}

package/src/components/Application/ApplicationContainer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface ApplicationContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+
+function ApplicationContainer({
+    children,
+    className = "",
+    ...otherProps
+}: ApplicationContainerProps) {
+
+    return (
+        <div className={`${eccgui}-application__container ${className}`} {...otherProps}>
+            { children }
+        </div>
+    )
+}
+
+export default ApplicationContainer;

package/src/components/Application/ApplicationContent.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Content as CarbonContent } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface IApplicationContentProps {
+    // original properties from Carbon
+    children: React.ReactNode;
+    /**
+        addional class name
+    */
+    className?: string;
+
+    // our extensions
+    /**
+        is the sidebar navigation currently displayed or not
+    */
+    isApplicationSidebarExpanded?: boolean;
+    /**
+        is the rail version of the sidebar used or not
+    */
+    isApplicationSidebarRail?: boolean;
+    /**
+        native attributes for the <main> HTML element
+    */
+    htmlMainProps?: React.HTMLAttributes<HTMLElement>;
+}
+
+function ApplicationContent({
+    children,
+    isApplicationSidebarExpanded = false,
+    isApplicationSidebarRail = false,
+    htmlMainProps,
+    /*
+        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
+        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
+        a combined process of dynamic keys and template mappings in typescript
+    */
+    ...otherPropsShouldOnlyBeUsedForDataAttributes
+}: IApplicationContentProps) {
+
+    let addSidebarMargin = "";
+    if (isApplicationSidebarExpanded) { addSidebarMargin = `${eccgui}-application__content--withsidebar`; }
+    if (isApplicationSidebarRail) { addSidebarMargin = `${eccgui}-application__content--railsidebar`; }
+
+    return (
+        <CarbonContent
+            {...otherPropsShouldOnlyBeUsedForDataAttributes}
+            {...htmlMainProps}
+            className={`${eccgui}-application__content ${addSidebarMargin}`}
+            tagName={"main"}
+        >
+            { children }
+        </CarbonContent>
+    )
+}
+
+export default ApplicationContent;

package/src/components/Application/ApplicationHeader.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { Header as CarbonHeader } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationHeader({ children, ...restProps }: any) {
+    return (
+        <CarbonHeader {...restProps} className={`${eccgui}-application__header`}>
+            { children }
+        </CarbonHeader>
+    )
+}
+
+export default ApplicationHeader;

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { SideNav as CarbonSideNav } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface IApplicationSidebarNavigationProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    expanded?: boolean;
+    isRail?: boolean;
+    // do not allow these properties
+    defaultExpanded?: never;
+    isPersistent?: never;
+    isFixedNav?: never;
+    isChildOfHeader?: never;
+}
+
+function ApplicationSidebarNavigation({
+    children,
+    className,
+    ...otherProps
+}: IApplicationSidebarNavigationProps) {
+
+    const additionalClassName = className ? className : "";
+
+    return (
+        <CarbonSideNav
+            className={`${eccgui}-application__menu__sidebar ${additionalClassName}`}
+            {...otherProps}
+            aria-label={"sidebar"}
+            defaultExpanded={false}
+            isPersistent={false}
+            isFixedNav={true}
+            isChildOfHeader={true}
+        >
+            {children}
+        </CarbonSideNav>
+    )
+}
+
+export default ApplicationSidebarNavigation;

package/src/components/Application/ApplicationSidebarToggler.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { HeaderMenuButton as CarbonHeaderMenuButton } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationSidebarToggler({ ...restProps }: any) {
+    return (
+        <CarbonHeaderMenuButton
+            className={`${eccgui}-application__menu__toggler`}
+            {...restProps}
+            isCollapsible={true}
+        />
+    )
+}
+
+export default ApplicationSidebarToggler;

package/src/components/Application/ApplicationTitle.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { HeaderName as CarbonHeaderName } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type SvgDepiction = HTMLElement & SVGElement;
+type ImgDepiction = HTMLElement & HTMLImageElement;
+
+interface IApplicationTitleProps {
+    // original properties from Carbon
+    children: React.ReactNode;
+    /**
+        addional class name
+    */
+    className?: string;
+    /**
+        prefix the application name by extra string, e.g. company name
+    */
+    prefix?: string;
+    /**
+        home link
+    */
+    href?: string;
+
+    // our extensions
+    /**
+        application logo, <img>, <svg> or react element
+    */
+    depiction?: ImgDepiction | SvgDepiction | React.ReactNode;
+    /**
+        is the application title visually displayed or not
+    */
+    isNotDisplayed?: boolean;
+    /**
+        if displayed, is the width aligned with displayed sidebar navigation
+    */
+    isAlignedWithSidebar?: boolean;
+    /**
+        is the sidebar navigation currently displayed or not
+    */
+    isApplicationSidebarExpanded: boolean;
+    /**
+        native attributes for the anchor HTML element (<a>)
+    */
+    htmlAProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+
+function ApplicationTitle({
+    children,
+    className = "",
+    prefix = "",
+    href,
+    depiction,
+    isNotDisplayed = false,
+    isAlignedWithSidebar=false,
+    isApplicationSidebarExpanded,
+    htmlAProps,
+    /*
+        TODO: type definitions do not include data attributes because of their infinite number of possible names, so we
+        need to solve this by filtering out all other props, or create a stack of allowed data attributes or using
+        a combined process of dynamic keys and template mappings in typescript
+    */
+    ...otherPropsShouldOnlyBeUsedForDataAttributes
+}: IApplicationTitleProps) {
+
+    const classApplication = `${eccgui}-application__title`;
+    const classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "bx--visually-hidden" : "";
+    const classAlignedSidebar = isAlignedWithSidebar || isApplicationSidebarExpanded ? `${eccgui}-application__title--withsidebar` : "";
+
+    return (
+        <CarbonHeaderName
+            {...otherPropsShouldOnlyBeUsedForDataAttributes}
+            {...htmlAProps}
+            className={`${classApplication} ${classAlignedSidebar} ${classNotDisplayed} ${className}`}
+            href={href}
+            prefix=""
+        >
+            <span className={`${eccgui}-application__title--content`}>
+                {!!depiction && (
+                        <>
+                            <span className={`${eccgui}-application__title--depiction`}>{depiction}</span>
+                        </>
+                )}
+                {!!prefix && (
+                        <>
+                            <span className="bx--header__name--prefix">{prefix}</span>
+                            &nbsp;
+                        </>
+                )}
+                { children }
+            </span>
+        </CarbonHeaderName>
+    )
+}
+
+export default ApplicationTitle;

package/src/components/Application/ApplicationToolbar.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { HeaderGlobalBar as CarbonHeaderGlobalBar } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationToolbar({ children, className = '', ...restProps }: any) {
+    return (
+        <CarbonHeaderGlobalBar
+            {...restProps}
+            className={`${eccgui}-application__toolbar ` + className}
+        >
+            { children }
+        </CarbonHeaderGlobalBar>
+    )
+}
+
+export default ApplicationToolbar;

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { HeaderGlobalAction as CarbonHeaderGlobalAction } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationToolbarAction({ children, className = '', ...restProps }: any) {
+    return (
+        <CarbonHeaderGlobalAction
+            {...restProps}
+            className={`${eccgui}-application__toolbar__action ` + className}
+        >
+            { children }
+        </CarbonHeaderGlobalAction>
+    )
+}
+
+export default ApplicationToolbarAction;

package/src/components/Application/ApplicationToolbarPanel.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+// import PropTypes from 'prop-types';
+import { HeaderPanel as CarbonHeaderPanel } from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationToolbarPanel({ children, className = '', ...restProps }: any) {
+    return (
+        <CarbonHeaderPanel
+            {...restProps}
+            className={`${eccgui}-application__toolbar__panel ` + className}
+        >
+            { children }
+        </CarbonHeaderPanel>
+    )
+}
+
+export default ApplicationToolbarPanel;

package/src/components/Application/ApplicationToolbarSection.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function ApplicationToolbarSection({ children, className = '', ...restProps }: any) {
+    return (
+        <div
+            {...restProps}
+            className={`${eccgui}-application__toolbar__section ` + className}
+        >
+            { children }
+        </div>
+    )
+}
+
+export default ApplicationToolbarSection;

package/src/components/Application/_config.scss

@@ -0,0 +1,40 @@
+/*
+    color configuration for Carbon Elements ui-shell
+    TODO: remove file when module finished, configuration var should be placed
+    on head of style sheet for the sub component.
+*/
+
+/// should be already imported
+//@import '~carbon-components/scss/globals/scss/colors';
+
+/*
+//----------------------------------------------------------------------------
+// Side nav tokens
+//----------------------------------------------------------------------------
+/// Side-nav panel background
+$shell-side-nav-bg-01: $carbon--white-0 !default;
+
+/// Selected category background
+$shell-side-nav-bg-02: $carbon--gray-80 !default;
+
+/// Selected L2 nested item
+$shell-side-nav-bg-03: $ibm-color__gray-70 !default;
+
+/// Side nav item hover background
+$shell-side-nav-bg-04: #e5e5e5 !default;
+
+/// Side nav menu item hover background
+$shell-side-nav-bg-05: #dcdcdc !default;
+
+/// Primary text in side-nav
+$shell-side-nav-text-01: $ibm-color__gray-70 !default;
+
+/// Secondary text in side nav
+$shell-side-nav-text-02: $ibm-color__gray-30 !default;
+
+/// Side-nav icon color
+$shell-side-nav-icon-01: $ibm-color__gray-70 !default;
+
+/// Item highlight bar
+$shell-side-nav-accent-01: $ibm-color__blue-60 !default;
+*/

package/src/components/Application/_content.scss

@@ -0,0 +1,27 @@
+$ui-02: $eccgui-color-workspace-background !default;
+
+@import "~carbon-components/scss/components/ui-shell/content";
+
+// tweack original layout
+
+.#{$prefix}--content {
+    padding: $eccgui-size-block-whitespace;
+    min-height: 100vh;
+    transform: none; // prevent problems with fixed positions of children, @see https://www.darrenlester.com/blog/why-fixed-position-element-not-relative-to-viewport
+}
+
+.#{$prefix}--header ~ .#{$prefix}--content {
+    margin-top: 0;
+    padding-top: calc(#{mini-units(8)} + #{$eccgui-size-block-whitespace});
+    min-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace});
+    box-sizing: content-box;
+}
+
+.#{$prefix}--side-nav ~ .#{$prefix}--content,
+.#{$eccgui}-application__content--withsidebar {
+    margin-left: mini-units(40);
+}
+
+.#{$eccgui}-application__content--railsidebar {
+    margin-left: mini-units(8);
+}