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

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);
+}

package/src/components/Application/_header.scss

@@ -0,0 +1,237 @@
+/*
+    Currently it does not work to set the carbon vars before the include of
+    the library component because the include reset the vars again to the
+    default values. For this reason we need to overwrite colors again in our
+    own rule patches.
+*/
+
+/// Header bar background
+$shell-header-bg-01: $eccgui-color-applicationheader-background !default;
+
+/// Header menu trigger hover, Header nav link hover
+$shell-header-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+
+/// Header action active background
+$shell-header-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+
+/// Header submenu link hover
+$shell-header-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default; //TODO needs color var gray-90-hover
+
+/// Header nav link active and focus background
+$shell-header-bg-05: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+
+/// Header nav link submenu
+$shell-header-bg-06: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+
+/// Header border bottom
+$shell-header-border-01: transparent !default;
+
+/// Header focus
+$shell-header-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+
+/// Primary text in header, Title text
+$shell-header-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+
+/// Secondary text in header, Menu item nav text
+$shell-header-text-02: $eccgui-color-applicationheader-text !default;
+
+/// Header menu trigger
+$shell-header-icon-01: $eccgui-color-applicationheader-text !default;
+
+/// Header bar icons
+$shell-header-icon-02: $eccgui-color-applicationheader-text !default;
+
+/// Header bar icons
+$shell-header-icon-03: $eccgui-color-applicationheader-text !default;
+
+/// Item link
+$shell-header-link: $carbon--blue-60 !default;
+
+// load library sub component
+@import '~carbon-components/scss/components/ui-shell/header';
+
+// tweack original layout
+
+.#{$prefix}--header {
+    height: mini-units(8);
+}
+
+.#{$prefix}--header__action {
+    width: mini-units(8);
+    height: mini-units(8);
+}
+
+.#{$prefix}--header__menu-trigger {
+    margin-right: 0;
+    flex-shrink: 0;
+}
+
+
+span.#{$prefix}--header__name {
+    @extend a.#{$prefix}--header__name;
+}
+
+.#{$prefix}--header__name {
+    &.#{$eccgui}-application__title--withsidebar {
+        padding-right: $eccgui-size-block-whitespace / 2;
+    }
+}
+
+.#{$eccgui}-application__title--withsidebar {
+    width: mini-units(40 - 8);
+    flex-shrink: 0;
+}
+
+.#{$eccgui}-application__title--content {
+    white-space: nowrap;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.#{$eccgui}-application__title--depiction {
+    display: inline-block;
+    margin-right: $eccgui-size-block-whitespace / 2;
+
+    & > * {
+        display: none;
+    }
+
+    & > img, & > svg {
+        display: inline;
+        padding: 0;
+        margin: mini-units(1.4) 0 mini-units(1.6) 0;
+        max-height: mini-units(5);
+        max-width: mini-units(5);
+        width: auto;
+        height:auto;
+        vertical-align: middle;
+    }
+}
+
+.#{$prefix}--header__nav {
+    // padding-left: mini-units(2);
+}
+
+a.#{$prefix}--header__menu-item {
+    // padding: 0 mini-units(2);
+}
+
+.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu {
+    // width: mini-units(25);
+}
+
+.#{$prefix}--header__menu .#{$prefix}--header__menu-item {
+    height: mini-units(8);
+}
+
+.#{$prefix}--header__menu-arrow {
+    // margin-left: mini-units(1);
+}
+
+// tweak original colors (as long as config does not work properly)
+
+// $shell-header-bg-01
+.#{$prefix}--header,
+.#{$prefix}--skip-to-content:focus {
+    background-color: $eccgui-color-applicationheader-background;
+}
+// $shell-header-bg-02
+a.#{$prefix}--header__menu-item:hover {
+    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+}
+.#{$prefix}--header__menu-trigger:hover {
+    fill: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+}
+
+// $shell-header-bg-03
+.#{$prefix}--header__action:active,
+.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
+.#{$prefix}--header__action:active,
+a.#{$prefix}--header__menu-item:active {
+    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+}
+
+// $shell-header-bg-04
+.#{$prefix}--header__action:hover,
+.#{$prefix}--header__menu-title[aria-expanded='true'] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
+    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+}
+
+// $shell-header-bg-05
+.#{$prefix}--header__action--active {
+    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-bottom-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+}
+
+// $shell-header-bg-06
+.#{$prefix}--header__menu-title[aria-expanded='true'],
+.#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
+    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%);
+}
+
+// $shell-header-border-01
+.#{$prefix}--header,
+.#{$prefix}--header__action {
+    border-bottom: none;
+}
+.#{$prefix}--header__action--active {
+    border-left-color: transparent;
+    border-right-color: transparent;
+}
+.#{$prefix}--header__nav {
+    &::before {
+        background-color: transparent;
+    }
+}
+
+// $shell-header-focus
+.#{$prefix}--header__action:focus ,
+a.#{$prefix}--header__name:focus,
+a.#{$prefix}--header__menu-item:focus {
+    border-color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+}
+.#{$prefix}--header__menu-title[aria-expanded='true'] {
+    color: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%);
+}
+
+// $shell-header-text-01
+a.#{$prefix}--header__name,
+a.#{$prefix}--header__name:hover,
+a.#{$prefix}--header__menu-item:hover,
+.#{$prefix}--header__action:active,
+a.#{$prefix}--header__menu-item:active,
+a.#{$prefix}--header__menu-item:focus,
+.#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover,
+.#{$prefix}--skip-to-content:focus {
+  color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
+}
+
+// $shell-header-text-02
+a.#{$prefix}--header__menu-item {
+  color: $eccgui-color-applicationheader-text;
+}
+
+// $shell-header-icon-01
+.#{$prefix}--header__action,
+.#{$prefix}--header__action:hover,
+.#{$prefix}--header__action:active,
+ .#{$prefix}--header__action:focus {
+    color: $eccgui-color-applicationheader-text;
+}
+.#{$prefix}--header__menu-trigger > svg,
+a.#{$prefix}--header__menu-item:hover > svg,
+a.#{$prefix}--header__menu-item:active > svg,
+a.#{$prefix}--header__menu-item:focus > svg {
+  fill: $eccgui-color-applicationheader-text;
+}
+
+// $shell-header-icon-02
+.#{$prefix}--header__action > svg {
+  fill: $eccgui-color-applicationheader-text;
+}
+
+// $shell-header-icon-03
+.#{$prefix}--header__menu-arrow {
+  fill: $eccgui-color-applicationheader-text;
+}

package/src/components/Application/_sidebar.scss

@@ -0,0 +1,37 @@
+$ui-02: $eccgui-color-workspace-background !default;
+
+@import '~carbon-components/scss/components/ui-shell/side-nav';
+
+// tweack original layout
+
+.#{$prefix}--side-nav--ux {
+    top: mini-units(8);
+    width: mini-units(40);
+    max-width: mini-units(40);
+}
+
+/*
+.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover,
+.#{$prefix}--side-nav--expanded, .#{$prefix}--side-nav--collapsed {
+    width: mini-units(40);
+}
+*/
+
+.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed) {
+    transform: translateX(0);
+    width: mini-units(8);
+
+    &:hover {
+        width: mini-units(40);
+        transition: width $pt-transition-duration ease-in 0.75s;
+    }
+}
+
+.#{$prefix}--side-nav--collapsed {
+    transform: translateX(mini-units(-40));
+}
+
+.#{$prefix}--side-nav__navigation {
+    padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
+    transition: none;
+}

package/src/components/Application/_toolbar.scss

@@ -0,0 +1,75 @@
+/*
+    ATTENTION:
+    Currently it does not work to set the carbon vars before the include of
+    the library component because the include reset the vars again to the
+    default values. For this reason we need to overwrite colors again in our
+    own rule patches.
+*/
+
+/// Header-panel background
+$shell-panel-bg-01: $eccgui-color-applicationheader-background !default;
+
+/// Panel item hover background
+$shell-panel-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+
+/// Panel item focus and active background
+$shell-panel-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+
+/// Panel item link selected background
+$shell-panel-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: 5%) !default;
+
+/// Panel border
+$shell-panel-border: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+
+/// Header panel text
+$shell-panel-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+
+/// Header panel secondary text
+$shell-panel-text-02: $eccgui-color-applicationheader-text !default;
+
+/// Header panel focus border
+$shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+
+@import "~carbon-components/scss/components/ui-shell/header-panel";
+
+// tweack original layout
+
+.#{$prefix}--header-panel {
+    top: mini-units(8);
+}
+
+.#{$prefix}--header-panel--expanded {
+    //width: carbon--mini-units(32);
+}
+
+// tweak original colors
+
+// $shell-panel-bg-01
+.#{$prefix}--header-panel {
+    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    padding: $eccgui-size-block-whitespace;
+}
+
+// $shell-panel-text-01
+.#{$prefix}--header-panel {
+    color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
+}
+
+// $shell-panel-border
+.#{$prefix}--header-panel--expanded {
+    border-left-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-right-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
+}
+
+// add rules for own class identiiers
+
+.#{$eccgui}-application__toolbar {
+    flex-grow: 0;
+    flex-basis: auto;
+}
+
+.#{$eccgui}-application__toolbar__section {
+    padding: 0 mini-units(1);
+    display: flex;
+    align-items: center;
+}

package/src/components/Application/application.scss

@@ -0,0 +1,9 @@
+// @import 'config';
+@import '~carbon-components/scss/components/ui-shell/functions';
+@import 'header';
+@import 'toolbar';
+// @import '~carbon-components/scss/components/ui-shell/product-switcher'; // TODO needs to be depracated and redone to match react
+// @import '~carbon-components/scss/components/ui-shell/switcher';
+@import 'sidebar';
+// @import '~carbon-components/scss/components/ui-shell/navigation-menu';
+@import 'content';