@eccenca/gui-elements 24.0.0-rc.0 → 24.0.0-rc.1

package/CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<MultiSuggestField />`
     -   An optional custom search function property has been added, it defines how to filter elements.
+-   basic Storybook example for `<Application* />` components
 
 ### Changed
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.0-rc.0",
+    "version": "24.0.0-rc.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/components/Application/_header.scss

@@ -55,15 +55,23 @@ $shell-header-link: $blue-60 !default;
 // load library sub component
 @import "~@carbon/react/scss/components/ui-shell/header/index";
 
-// tweack original layout
+// tweak original layout
 
 .#{$prefix}--header {
     height: mini-units(8);
 }
 
-.#{$prefix}--header__action {
+.#{$prefix}--header__action,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only {
     width: mini-units(8);
     height: mini-units(8);
+    padding-block-start: 0;
+    background-color: transparent;
+
+    // $shell-header-icon-02
+    & > svg {
+        fill: $eccgui-color-applicationheader-text;
+    }
 }
 
 .#{$prefix}--header__menu-trigger {
@@ -141,6 +149,7 @@ a.#{$prefix}--header__menu-item:hover {
 
 // $shell-header-bg-03
 .#{$prefix}--header__action:active,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:active,
 .#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:active {
     background-color: $shell-header-bg-03;
@@ -148,12 +157,14 @@ a.#{$prefix}--header__menu-item:active {
 
 // $shell-header-bg-04
 .#{$prefix}--header__action:hover,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:hover,
 .#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
     background-color: $shell-header-bg-04;
 }
 
 // $shell-header-bg-05
-.#{$prefix}--header__action--active {
+.#{$prefix}--header__action--active,
+.#{$prefix}--header__action--active.#{$prefix}--btn--icon-only {
     background-color: $shell-header-bg-05;
     border-right-color: transparent;
     border-bottom-color: $shell-header-bg-05;
@@ -168,7 +179,8 @@ a.#{$prefix}--header__menu-item:active {
 
 // $shell-header-border-01
 .#{$prefix}--header,
-.#{$prefix}--header__action {
+.#{$prefix}--header__action,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only {
     border-bottom: none;
 }
 .#{$prefix}--header__nav {
@@ -179,9 +191,14 @@ a.#{$prefix}--header__menu-item:active {
 
 // $shell-header-focus
 .#{$prefix}--header__action:focus,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:focus,
+.#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
 a.#{$prefix}--header__name:focus,
 a.#{$prefix}--header__menu-item:focus {
-    border-color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
+    border: none;
+    outline: 1px dotted color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
+    outline-offset: -1px;
+    box-shadow: none;
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
     color: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%);
@@ -192,6 +209,7 @@ a.#{$prefix}--header__name,
 a.#{$prefix}--header__name:hover,
 a.#{$prefix}--header__menu-item:hover,
 .#{$prefix}--header__action:active,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only:active,
 a.#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:focus,
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover,
@@ -210,6 +228,10 @@ a.#{$prefix}--header__menu-item {
 .#{$prefix}--header__action:active,
 .#{$prefix}--header__action:focus {
     color: $eccgui-color-applicationheader-text;
+
+    &.#{$prefix}--btn--icon-only {
+        color: $eccgui-color-applicationheader-text;
+    }
 }
 .#{$prefix}--header__menu-trigger > svg,
 a.#{$prefix}--header__menu-item:hover > svg,
@@ -218,11 +240,6 @@ 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/stories/Application.stories.tsx

@@ -0,0 +1,139 @@
+import React, { CSSProperties } from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import {
+    ApplicationContainer,
+    ApplicationContent,
+    ApplicationHeader,
+    ApplicationSidebarNavigation,
+    ApplicationSidebarToggler,
+    ApplicationTitle,
+    ApplicationToolbar,
+    ApplicationToolbarAction,
+    ApplicationToolbarPanel,
+    ApplicationToolbarSection,
+    Badge,
+    Button,
+    Depiction,
+    Icon,
+    WorkspaceHeader,
+} from "../../../index";
+
+interface ApplicationBasicExampleProps {
+    openMainNavigation: boolean;
+    openUserMenu: boolean;
+    countNotifications: number;
+    colorBackgroundHeader?: string;
+}
+
+function ApplicationBasicExample(args: ApplicationBasicExampleProps) {
+    return <></>;
+}
+
+export default {
+    title: "Components/Application",
+    component: ApplicationBasicExample,
+    subcomponents: {
+        ApplicationContainer,
+        ApplicationContent,
+        ApplicationHeader,
+        ApplicationTitle,
+        ApplicationSidebarToggler,
+        ApplicationSidebarNavigation,
+        ApplicationToolbar,
+        ApplicationToolbarSection,
+        ApplicationToolbarAction,
+    },
+    argTypes: {
+        colorBackgroundHeader: {
+            control: { type: "color" },
+        },
+    },
+} as Meta<typeof ApplicationBasicExample>;
+
+const TemplateBasicExample: StoryFn<typeof ApplicationBasicExample> = (args) => (
+    <ApplicationContainer>
+        <ApplicationHeader
+            aria-label={"Application"}
+            style={
+                args.colorBackgroundHeader
+                    ? ({ "--eccgui-appheader-color-background": args.colorBackgroundHeader } as CSSProperties)
+                    : undefined
+            }
+        >
+            <ApplicationTitle
+                isNotDisplayed={!args.openMainNavigation}
+                isApplicationSidebarExpanded={args.openMainNavigation}
+            >
+                ApplicationName
+            </ApplicationTitle>
+            <ApplicationSidebarToggler
+                aria-label={args.openMainNavigation ? "Close navigation" : "Open navigation"}
+                isActive={args.openMainNavigation}
+            />
+            <ApplicationSidebarNavigation isRail={!args.openMainNavigation} expanded={args.openMainNavigation}>
+                <code>Menu</code> with <code>MenuItem</code>s.
+            </ApplicationSidebarNavigation>
+
+            <WorkspaceHeader id={"ApplicationBasicExample"} />
+
+            <ApplicationToolbar>
+                <ApplicationToolbarSection>
+                    <Button>Action</Button>
+                </ApplicationToolbarSection>
+                {args.countNotifications && (
+                    <ApplicationToolbarAction aria-label="Open notifications menu" isActive={false}>
+                        <Depiction
+                            padding="medium"
+                            size="small"
+                            ratio="1:1"
+                            resizing="contain"
+                            image={<Icon name="application-notification" title="Notification menu icon" large />}
+                            badge={
+                                <Badge
+                                    position={"top-right"}
+                                    intent="warning"
+                                    maxLength={2}
+                                    children={args.countNotifications}
+                                />
+                            }
+                        />
+                    </ApplicationToolbarAction>
+                )}
+                {args.openUserMenu ? (
+                    <>
+                        <ApplicationToolbarAction aria-label={"Close user menu"} tooltipAlignment="end" isActive={true}>
+                            <Icon name="navigation-close" title="Close icon" large />
+                        </ApplicationToolbarAction>
+                        <ApplicationToolbarPanel aria-label="User menu" expanded={true}>
+                            <code>Menu</code> with <code>MenuItem</code>s.
+                        </ApplicationToolbarPanel>
+                    </>
+                ) : (
+                    <ApplicationToolbarAction
+                        id={"headerUserMenu"}
+                        aria-label={"Open user menu"}
+                        tooltipAlignment="end"
+                        isActive={false}
+                    >
+                        <Icon name="application-useraccount" title="User menu icon" large />
+                    </ApplicationToolbarAction>
+                )}
+            </ApplicationToolbar>
+        </ApplicationHeader>
+        <ApplicationContent
+            isApplicationSidebarExpanded={args.openMainNavigation}
+            isApplicationSidebarRail={!args.openMainNavigation}
+        >
+            <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        </ApplicationContent>
+    </ApplicationContainer>
+);
+
+export const BasicExample = TemplateBasicExample.bind({});
+BasicExample.args = {
+    openMainNavigation: false,
+    openUserMenu: false,
+    countNotifications: 234,
+};