@eccenca/gui-elements 23.0.0-rc.5 → 23.0.0-rc.7

package/src/components/AutocompleteField/stories/AutoCompleteField.stories.tsx

@@ -6,7 +6,7 @@ import {extractSearchWords, matchesAllWords} from "../../Typography/Highlighter"
 import {createNewItemRendererFactory} from "../autoCompleteFieldUtils";
 
 const AutoCompleteFieldStory: ComponentMeta<typeof AutoCompleteField> = {
-    title: "Components/AutoCompleteField",
+    title: "Forms/AutoCompleteField",
     component: AutoCompleteField,
     argTypes: {
     },

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

@@ -1,125 +1,19 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import Button from "./Button";
-import Icon from "../Icon/Icon";
-import Spacing from "../Separation/Spacing";
+import { Button, Icon, Spacing} from "../../../index";
 
 export default {
     title: "Components/Button",
     component: Button,
     argTypes: {
-        active: {
-            description: "Button will display in an active state.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        className: {
-            description: "A space-delimited list of class names.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        disabled: {
-            description: "Whether this action is non-interactive and the button is not usable.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        minimal: {
-            description: "Whether this button should use minimal styles.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        outlined: {
-            description: "Whether this button should use outlined styles.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        text: {
-            description: "Action text. Can be any single React renderable. Can be used as alternative to include `children` elements.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "React.ReactNode" },
-            }
-        },
-        type: {
-            description: "HTML type attribute of button. Note that this prop has no effect on buttons with `href` property set.",
-            control: "text",
-            table: {
-                defaultValue: { summary: "button" },
-                type: { summary: "button | reset | submit" },
-            }
-        },
-        loading: {
-            description: "Button is displayed disabled and contains a spinner instead of its contents.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        fill: {
-            description: "Whether this button should expand to fill its container.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        large: {
-            description: "Whether this button should use large styles.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        small: {
-            description: "Whether this button should use small styles",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
         icon: {
-            description: "Left aligned icon, can be a canonical icon name or an `Icon` element.",
             control: { disable: true, },
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "Icon | string" },
-            }
         },
         rightIcon: {
-            description: "Right aligned icon, can be a canonical icon name or an `Icon` element.",
             control: { disable: true, },
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "Icon | string" },
-            }
         },
         onClick: {
-            description: "Click event handler.",
             action: "clicked",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "(event: MouseEvent<HTMLElement>) => void" },
-            }
         },
     },
 } as ComponentMeta<typeof Button>;

package/src/components/Button/Button.tsx

@@ -13,7 +13,7 @@ import {ValidIconName} from "../Icon/canonicalIconNames";
 
 export type AnchorOrButtonProps = Omit<BlueprintButtonProps, "elementRef" | "icon" | "rightIcon"> | Omit<BlueprintAnchorButtonProps, "elementRef" | "icon" | "rightIcon">;
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+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.
@@ -100,7 +100,7 @@ function Button({
       break;
   }
 
-  let ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
+  let ButtonType: any = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
   const button = (
     <ButtonType

package/src/components/Card/stories/Card.stories.tsx

@@ -8,8 +8,8 @@ import {
     CardTitle,
     CardOptions,
     CardActions,
-} from "../";
-import Divider from "../../Separation/Divider";
+    Divider,
+} from "../../../../index";
 
 import { Default as CardHeaderExample } from "./CardHeader.stories";
 import { Default as CardContentExample } from "./CardContent.stories";
@@ -29,28 +29,9 @@ export default {
     argTypes: {
         elevation: {
             control: { type: "number", min: 0, max: 4 },
-            description: "Intensity of the drop shadow beneath the card. At elevation 0, no drop shadow is applied.",
-            table: {
-                type: { summary: "number: 0 to 5" },
-                defaultValue: { summary: 1 },
-            }
-        },
-        interactive: {
-            control: "boolean",
-            description: "Card responds to user interactions, hovering over the card will increase the card's elevation and change the mouse cursor to a pointer. Is set automatically to `true` if an `onClick` handler is available.",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            }
         },
         onClick: {
             ...helpersArgTypes.handlerOnClick,
-            description: "Callback invoked when the card is clicked.",
-            defaultValue: null,
-            table: {
-                type: { summary: "(e: MouseEvent<HTMLDivElement>) => void" },
-                defaultValue: { summary: undefined },
-            }
         },
         children: {
             control: "none",

package/src/components/Checkbox/Checkbox.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
-import { Checkbox as BlueprintCheckbox } from "@blueprintjs/core";
+import {
+    Checkbox as BlueprintCheckbox,
+    CheckboxProps as BlueprintCheckboxProps
+} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+interface CheckboxProps extends BlueprintCheckboxProps {
+    // currently we do not alter it
+};
+
 function Checkbox({
     children,
     className='',
     ...restProps
-}: any) {
+}: CheckboxProps) {
     return (
         <BlueprintCheckbox
             {...restProps}

package/src/components/Checkbox/Stories/Checkbox.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Checkbox, HtmlContentBlock } from "../../../../index";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+export default {
+    title: "Forms/Checkbox",
+    component:  Checkbox,
+    argTypes: {
+        onChange : {action : 'clicked'}
+    },
+} as ComponentMeta<typeof Checkbox>
+
+const Template:ComponentStory<typeof Checkbox>  = (args) => (
+    <Checkbox  {...args} />
+);
+
+export const SimpleTextLabel = Template.bind({});
+SimpleTextLabel.args = {
+    label : "Checkbox label",
+    inline : true,
+};
+
+export const ElementsAsLabel = Template.bind({});
+ElementsAsLabel.args = {
+    ...SimpleTextLabel.args,
+    label : undefined,
+    inline : false,
+    children: <HtmlContentBlock><LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} /></HtmlContentBlock>
+};

package/src/components/Checkbox/checkbox.scss

@@ -63,3 +63,7 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
         }
     }
 }
+
+.#{$ns}-control-indicator + * {
+    margin-top: -1 * $eccgui-size-typo-text * $eccgui-size-typo-text-lineheight;
+}

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -26,8 +26,8 @@ Default.args = {
     children: [
         <MenuItem key="m0" text={"First option"} />,
         <MenuItem key="m1" text={"Item two"}>
-            <MenuItem key="m0" text={"First sub option"} />
-            <MenuItem key="m1" text={"Sub item two"} />
+            <MenuItem key="m2" text={"First sub option"} />
+            <MenuItem key="m3" text={"Sub item two"} />
         </MenuItem>
     ]
 }

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,72 +1,12 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import Modal from "./../Modal";
-import Card from "../../Card/Card";
+import { Modal, Card } from "./../../../../index";
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
 export default {
     title: "Components/Dialog/Modal",
     component: Modal,
     argTypes: {
-        autoFocus: {
-            description: "Modal acquires application focus when it first opens.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
-        canEscapeKeyClose: {
-            description: "Pressing the `esc` key triggers `onClose` handler.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            }
-        },
-        canOutsideClickClose: {
-            description: "Clicking outside the modal triggers `onClose` handler.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: false },
-            }
-        },
-        enforceFocus: {
-            description: "Prevent focus from leaving modal element. If an element outside the modal is focused then the modal will immediately bring focus back to itself. If you are nesting modal components, either disable this prop on the outermost modal or mark the nested ones `usePortal={false}`.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
-        isOpen: {
-            description: "Toggles the visibility of the overlay and its children, this prop is required because the component is controlled",
-        },
-        onClose: {
-            description: "A callback that is invoked when user interaction causes the modal to close.",
-            table: {
-                type: { summary: "(event: SyntheticEvent<HTMLElement>) => void" },
-                defaultValue: { summary: undefined },
-            }
-        },
-        shouldReturnFocusOnClose: {
-            description: "Return focus to the last active element in the document after modal closes.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
-        usePortal: {
-            description: "Whether the modal should be wrapped in a Portal, which renders its contents in a new element attached to `portalContainer` prop, by default to `document.body`.",
-            control: "boolean",
-            table: {
-                type: { summary: "boolean" },
-                defaultValue: { summary: true },
-            }
-        },
         children: {
             control: "none",
             description: "Elements to include into the modal container."

package/src/components/Dialog/stories/SimpleDialog.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import SimpleDialog from "./../SimpleDialog";
+import { SimpleDialog } from "./../../../../index";
 import storyModal from "./Modal.stories";
 import { Default as CardContentExample } from "./../../Card/stories/CardContent.stories";
 import { Default as CardActionsExample } from "./../../Card/stories/CardActions.stories";

package/src/components/Form/FieldItem.tsx

@@ -14,15 +14,45 @@ import {TestableComponent} from "../interfaces";
 */
 
 export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
+    /**
+     * Set primary state.
+     * This is not routed through automatically.
+     */
     hasStatePrimary?: boolean
+    /**
+     * Set success state.
+     * This is not routed through automatically.
+     */
     hasStateSuccess?: boolean
+    /**
+     * Set warning state.
+     * This is not routed through automatically.
+     */
     hasStateWarning?: boolean
+    /**
+     * Set danger state.
+     * This is not routed through automatically.
+     */
     hasStateDanger?: boolean
-    children: JSX.Element | JSX.Element[] | null
-    className?: string
+    /**
+     * Is disabled.
+     * The included inout element nedd to set disabled directly itself.
+     * This is not routed through automatically.
+     */
     disabled?: boolean
+    /**
+     * Used to set properties for the `Label` element that is used.
+     */
     labelProps?: LabelProps
+    /**
+     * Text for user help.
+     * Is displayed between label and input element.
+     */
     helperText?: string | JSX.Element
+    /**
+     * Feedback notification.
+     * Is displayed below the included input element.
+     */
     messageText?: string
 }
 

package/src/components/Form/Stories/FieldItem.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { FieldItem, TextField } from '../../../../index';
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+export default {
+    title: "Forms/FieldItem",
+    component: FieldItem,
+    argTypes: {
+        children: {
+            control: "none",
+        },
+    }
+} as ComponentMeta<typeof FieldItem>;
+
+const Template: ComponentStory<typeof FieldItem> = (args) => (
+    <FieldItem {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+    children : <TextField />,
+    messageText : <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    helperText: <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
+    labelProps: {
+        text: "Input label"
+    }
+};

package/src/components/Form/Stories/FieldItemRow.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import FieldItem from '../FieldItem'
+import FieldItemRow from "../FieldItemRow";
+import { Default as FieldItemStory } from "./FieldItem.stories";
+
+export default {
+    title: "Forms/FieldItemRow",
+    component: FieldItemRow,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements to include into the Accordion component"
+        },
+    }
+
+} as ComponentMeta<typeof FieldItemRow>;
+
+const Template: ComponentStory<typeof FieldItemRow> = (args) => (
+    <FieldItemRow {...args} />
+);
+export const Default = Template.bind({});
+Default.args = {
+    children : [
+        <>
+            <FieldItem {...FieldItemStory.args}/>
+            <FieldItem {...FieldItemStory.args}/>
+            <FieldItem {...FieldItemStory.args}/>
+        </>
+    ]
+};