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

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Pagination } from "../../../../index";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+export default {
+    title: "Components/Pagination",
+    component: Pagination,
+    argTypes: {
+    }
+} as ComponentMeta<typeof Pagination>
+
+const PaginationExample = (args) => (
+    <Pagination {...args}/>
+);
+
+export const Default : ComponentStory<typeof Pagination> = PaginationExample.bind({});
+Default.args = {
+    pageSizes:[10,20,50,100],
+    totalItems : 60,
+    backwardText:"Previous page",
+    forwardText : "Next page",
+};
+
+export const ExtendedPagesizeSelection : ComponentStory<typeof Pagination> = PaginationExample.bind({});
+ExtendedPagesizeSelection.args = {
+    ...Default.args,
+    pageSizes:[
+       {text: "10", value : "10"},
+       {text: "20", value : "25"},
+       {text: "50", value : "50"},
+       {text : 'Large page with 100 items' , value : "100"}
+    ],
+};

package/src/components/Pagination/pagination.scss

@@ -35,13 +35,13 @@ span.#{$prefix}--pagination__text {
 }
 
 .#{$eccgui}-pagination--hidepageselect {
-    .#{$prefix}--pagination__right > *:not(button) {
+    .#{$prefix}--pagination__right > *:not(.#{$prefix}--pagination__control-buttons) {
         display: none;
     }
 }
 
 .#{$eccgui}-pagination--hidenavigation {
-    .#{$prefix}--pagination__right > button {
+    .#{$prefix}--pagination__right > .#{$prefix}--pagination__control-buttons {
         display: none;
     }
 }

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { ProgressBar } from "../../../../index";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+export default {
+    title: "Components/ProgressBar",
+    component: ProgressBar,
+    argTypes: {
+    }
+
+} as ComponentMeta<typeof ProgressBar>
+
+const ProgressBarExample : ComponentStory<typeof ProgressBar> = (args) => (
+    <ProgressBar {...args}></ProgressBar>
+);
+
+export const Default  = ProgressBarExample.bind({});
+Default.args = {
+    value : 0.61,
+    stripes: false,
+    animate : false
+};
+
+export const IndeterminateBar  = ProgressBarExample.bind({});
+IndeterminateBar.args = {
+};

package/src/components/RadioButton/RadioButton.tsx

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

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { RadioButton, HtmlContentBlock } from "../../../../index";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+export default {
+    title: "Forms/RadioButton",
+    component: RadioButton,
+    argTypes: {
+        onChange : {action : 'clicked'},
+    }
+} as ComponentMeta<typeof RadioButton>
+
+const Template:ComponentStory<typeof RadioButton>  = (args) => (
+    <RadioButton  {...args} />
+);
+
+export const SimpleTextLabel = Template.bind({});
+SimpleTextLabel.args = {
+    label : "Radio button 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/Select/Select.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from "../../index";
 
 export default {
-  title: "Components/Select",
+  title: "Forms/Select",
   component: Select,
   argTypes: {
   },

package/src/components/Separation/Spacing.tsx

@@ -1,15 +1,28 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-
-interface IProps {
+export interface SpacingProps {
+    /**
+     * Set the amount of white space that separates two elements.
+     */
     size?: "tiny" | "small" | "medium" | "large"
+    /**
+     * If set then is a ruler displayed in the middle of the spacing area.
+     * The direction of the ruler is used from the spacing.
+     */
     hasDivider?: boolean
+    /**
+     * If set then the spacing separates two elements on the horizontal axis.
+     * The spacing area then is created on a vertical axis.
+     */
     vertical?: boolean
 }
 
-/** Adds horizontal or vertical space between neighbouring elements. */
-function Spacing({ size = "medium", hasDivider = false, vertical = false }: IProps) {
+/**
+ * Adds horizontal or vertical space between neighbouring elements.
+ * It also can add a visual ruler inside.
+ */
+function Spacing({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div

package/src/components/Separation/Stories/Spacing.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import Button from '../../Button/Button'
+import Spacing from '../Spacing'
+export default {
+    title: "Components/Separation/Spacing",
+    component: Spacing,
+    argTypes: {
+        size: { control: 'radio'},
+    }
+} as ComponentMeta<typeof Spacing>
+
+// buttons used for only showing space with elements
+const SpacingExample: ComponentStory<typeof Spacing> = (args) => (
+    <>
+     <Button children="Example element"/>
+     <Spacing {...args}/>
+     <Button children="Another element"/>
+    </>
+);
+
+export const Default  = SpacingExample.bind({});
+Default.args = {
+    size: "medium",
+};

package/src/components/Spinner/Spinner.tsx

@@ -13,33 +13,65 @@ export type SpinnerStroke = "thin" | "medium" | "bold"
 type Intent = "inherit" | "primary" | "success" | "warning" | "danger"
 
 /** A spinner that is either displayed globally or locally. */
-export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<BlueprintSpinnerProps, "size">> {
-    // intent value or a valid css color definition
+export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size"> {
+    /**
+     * intent value or a valid css color definition
+     */
     color?: Intent | string
+    /**
+     * Additional CSS class names.
+     */
     className?: string
-    description?: string
+    /**
+     * Position where and how the spinner is displayed:
+     * * `local`: the spinner is displayed as centered overlay to the neareast parent with relative (or equivalent) positioning
+     * * `inline`: the spinner is displayed as inline element
+     * * `global`: the spinner is displayed including backdrop centered over the full viewport
+     */
     position?: SpinnerPosition
+    /**
+     * The size of the spinner.
+     * The default size relates to the `position`.
+     */
     size?: SpinnerSize
+    /**
+     * The stroke width that is used to visualize the spinner.
+     * The default size relates to the `position`.
+     * There are only rare cases to set this property,
+     */
     stroke?: SpinnerStroke
-    // Delay when to show the spinner in ms, default: 0
+    /**
+     * Delay when to show the spinner in ms.
+     */
     delay?: number
     /**
      * Includes a backdrop behind the spinner that narrows visibility of the area behind the spinner.
      * This option only works with "local" spinners, for "inline" spinners there is no backdrop, "global" spinners always have backdrops.
-     * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or soe equivalent CSS rule.
+     * The backdrop and the spinner are located over the nearest parent element that is styled by `position: relative` or some other CSS rule with an equivalent outcome.
      */
     showLocalBackdrop?: boolean
+    /**
+     * Use this property to alter the display of the backdrop used for the global spinner
+     */
+    overlayProps?: BlueprintOverlayProps;
+    /**
+     * Label displayed next to the spinner (planned).
+     * You can set it to document the purpose of the spinner.
+     * It is currently not supported and not displayed.
+     */
+    description?: string
 }
 
 function Spinner({
     className = "",
     color = "inherit",
-    description = "Loading indicator", // currently unsupported (FIXME)
     position = "local",
     size,
     stroke,
     showLocalBackdrop = false,
     delay = 0,
+    overlayProps,
+    description = "Loading indicator", // currently unsupported (FIXME):
     ...otherProps
 }: SpinnerProps) {
     const [showSpinner, setShowSpinner] = useState<boolean>(!delay || delay <= 0);
@@ -104,7 +136,7 @@ function Spinner({
 
     return position === "global" ? (
         <BlueprintOverlay
-            {...otherProps}
+            {...overlayProps}
             className={`${eccgui}-spinner__overlay`}
             backdropClassName={`${eccgui}-spinner__backdrop`}
             canOutsideClickClose={false}

package/src/components/Spinner/Stories/spinner.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import Spinner from "../Spinner";
+export default {
+    title: "Components/Spinner",
+    component: Spinner,
+    argTypes: {
+        color: { control: 'radio', options: ["inherit", "primary", "success", "warning", "danger"]},
+        position: { control: 'radio', options: ["local", "inline", "global"]},
+        size: { control: 'radio', options: ["tiny", "small", "medium", "large", "xlarge", "inherit"]},
+        stroke: { control: 'radio', options: ["thin", "medium", "bold"]},
+    }
+} as ComponentMeta<typeof Spinner>
+
+const SpinnerExample: ComponentStory<typeof Spinner> = (args) => (
+    <div style={{height: "300px", minHeight: "20vw", position: "relative"}}>
+        <Spinner {...args}/>
+    </div>
+);
+
+export const Default = SpinnerExample.bind({});
+Default.args = {
+    color: "inherit",
+    position: "local",
+    showLocalBackdrop: false,
+};

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import Switch from '../Switch'
+
+export default {
+    title: "Forms/Switch",
+    component: Switch,
+    argTypes: {
+    },
+} as ComponentMeta<typeof Switch>
+
+const Template: ComponentStory<typeof Switch> = (args) => (
+    <Switch {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    label : "Switch label",
+    inline : true,
+}
+
+export const WithStateLabel = Template.bind({});
+WithStateLabel.args = {
+    ...Default.args,
+    innerLabel : 'Off',
+    innerLabelChecked : "On"
+}

package/src/components/Switch/Switch.tsx

@@ -1,12 +1,18 @@
 import React, {memo, SyntheticEvent} from 'react';
-import { Switch as BlueprintSwitch, SwitchProps } from "@blueprintjs/core";
+import {
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface Props extends Omit<SwitchProps, "onChange"> {
+export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
+    /**
+     * Event handler for changed state.
+     */
     onChange?: (value: boolean) => any
 }
 
-function Switch({onChange, ...otherProps}: Props) {
+function Switch({onChange, ...otherProps}: SwitchProps) {
     const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
         const checked = !!(e as any).target?.checked
         onChange && onChange(checked);

package/src/components/Tabs/stories/Tab.stories.tsx

@@ -1,42 +1,11 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Tabs } from "./../../../../";
-import { TabDummyForStorybook } from "./../Tab";
+import { Tabs, Tab as TabDummyForStorybook } from "./../../../../";
 
 export default {
     title: "Components/Tabs",
     component: TabDummyForStorybook,
     argTypes: {
-        id: {
-            description: "Unique identifier used to control which tab is selected.",
-            control: "text",
-            table: {
-                type: { summary: "string" },
-            }
-        },
-        className: {
-            description: "A space-delimited list of class names.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        disabled: {
-            description: "Whether this action is non-interactive and the button is not usable. This option must be repeated currently also in the `TabTitle` element.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        panel: {
-            description: "Panel content, rendered by the parent Tabs when this tab is active.",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "JSX.Element" },
-            }
-        },
         backgroundColor: {
             control: "color",
         },

package/src/components/Tabs/stories/Tabs.stories.tsx

@@ -1,26 +1,11 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Tabs, Tab, TabTitle } from "./../../../";
+import { Tabs, TabTitle } from "./../../../";
 
 export default {
     title: "Components/Tabs",
     component: Tabs,
     argTypes: {
-        id: {
-            description: "Unique identifier used to control which tab is selected.",
-            control: "text",
-            table: {
-                type: { summary: "string" },
-            }
-        },
-        className: {
-            description: "A space-delimited list of class names.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
         /*
         NOTE: we currently cannot support this because Blueprint set then !important
         styles prevent tab background colors.
@@ -34,29 +19,6 @@ export default {
             }
         },
         */
-        defaultSelectedTabId: {
-            description: "Initial selected tab `id`, for uncontrolled usage.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        selectedTabId: {
-            description: "Selected tab id, for controlled usage. Providing this prop will put the component in controlled mode and the `onChange` handler must be set.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        onChange: {
-            description: "A callback function that is invoked when a tab in the tab list is clicked.",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "(newTabId: TabId, prevTabId: TabId | undefined, event: MouseEvent<HTMLElement>) => void" },
-            }
-        },
     },
 } as ComponentMeta<typeof Tabs>;
 

package/src/components/Tag/Tag.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import Tag from "./Tag";
+import { Tag } from "./../../../index";
 import { helpersArgTypes } from "../../../.storybook/helpers";
 
 export default {
@@ -9,22 +8,15 @@ export default {
     component: Tag,
     argTypes: {
         icon: {
-            description: "Icon element to render before the children.",
             ...helpersArgTypes.exampleIcon,
         },
         backgroundColor: {
             control: "color",
         },
-        minimal: {
-            description: "Whether this tag should use minimal (lighter) styles. **Important:** We use this internally as default, so you need to set it explicitely to `false` if necessary.",
-            control: "boolean",
-        },
         onClick: {
-            description: "Callback invoked when the tag is clicked.",
             ...helpersArgTypes.handlerOnClick,
         },
         onRemove: {
-            description: "Click handler for remove button. The remove button will only be rendered if this prop is defined.",
             ...helpersArgTypes.handlerOnClick,
         },
         emphasized: { control: "none" },

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

@@ -1,39 +1,24 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import CustomTextArea from "./../TextArea";
-
+import { TextArea as CustomTextArea} from "./../../../../index";
 type TextAreaType = typeof CustomTextArea;
 
 export default {
-  title: "Components/TextArea",
-  component: CustomTextArea,
-  argTypes: {
-    small: {
-      description: "Whether the text area should appear with small styling.",
-      control: "boolean",
-    },
-    large: {
-      description: "Whether the text area should appear with large styling",
-      control: "boolean",
-    },
-    growVertically: {
-      description:
-        "Whether the text area should automatically grow vertically to accommodate content.",
-      control: "boolean",
+    title: "Forms/TextArea",
+    component: CustomTextArea,
+    argTypes: {
     },
-  },
 } as ComponentMeta<TextAreaType>;
 
 const Template: ComponentStory<TextAreaType> = (args) => (
-  <CustomTextArea {...args}></CustomTextArea>
+    <CustomTextArea {...args}></CustomTextArea>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  hasStatePrimary: false,
-  hasStateSuccess: false,
-  hasStateWarning: false,
-  hasStateDanger: false,
-  rows: 5,
+    hasStatePrimary: false,
+    hasStateSuccess: false,
+    hasStateWarning: false,
+    hasStateDanger: false,
+    rows: 5,
 };

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

@@ -1,88 +1,17 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import TextField from "./../TextField";
+import { TextField } from "./../../../../index";
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
 export default {
-    title: "Components/TextField",
+    title: "Forms/TextField",
     component: TextField,
     argTypes: {
-        className: {
-            description: "A space-delimited list of class names.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        value: {
-            description: "Form value of the input, for controlled usage.",
-            control: "text",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "string" },
-            }
-        },
-        type: {
-            description: "HTML `input` type attribute.",
-            control: "text",
-            table: {
-                defaultValue: { summary: "text" },
-                type: { summary: "string" },
-            }
-        },
-        placeholder: {
-            description: "Placeholder text in the absence of any value.",
-            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" },
-            }
-        },
         leftIcon: {
             ...helpersArgTypes.exampleIcon,
-            description: "Left aligned icon, can be a canonical icon name or an `Icon` element.",
         },
         rightElement: {
             ...helpersArgTypes.exampleIcon,
-            description: "Right aligned element, mainly provided for user-interaction elements, e.g. minimal buttons, spinners, or tags.",
-            //control: { disable: true, },
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "JSX.Element" },
-            }
-        },
-        onChange: {
-            description: "Change event handler. Use `event.target.value` for new value.",
-            table: {
-                defaultValue: { summary: undefined },
-                type: { summary: "React.FormEventHandler<HTMLElement>" },
-            }
-        },
-        large: {
-            description: "Whether this input should use large styles.",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
-        },
-        small: {
-            description: "Whether this input should use small styles",
-            control: "boolean",
-            table: {
-                defaultValue: { summary: false },
-                type: { summary: "boolean" },
-            }
         },
     },
 } as ComponentMeta<typeof TextField>;

package/src/components/Typography/typography.scss

@@ -160,9 +160,8 @@ li {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         margin-left: $eccgui-size-block-whitespace * 2;
-        &:not(:last-child) {
-            margin-bottom: $eccgui-size-block-whitespace * 0.5;
-        }
+        margin-top: $eccgui-size-block-whitespace * 0.25;
+        margin-bottom: $eccgui-size-block-whitespace * 0.25;
     }
 }
 
@@ -170,6 +169,7 @@ blockquote {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
         margin: $eccgui-size-block-whitespace * 2;
+        font-style: italic;
 
         &:last-child {
             margin-bottom: 0;