@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

package/src/components/Card/CardContent.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -14,19 +15,14 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = ({
-    children,
-    className='',
-    noFlexHeight,
-    ...otherProps
-}: CardContentProps) => {
+export const CardContent = ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps) => {
     return (
         <div
             {...otherProps}
             className={
                 `${eccgui}-card__content` +
                 (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
-                (!!className ? ` ${className}` : "")
+                (className ? ` ${className}` : "")
             }
         >
             {children}

package/src/components/Card/CardOptions.tsx

@@ -1,27 +1,19 @@
-import React from 'react';
-import OverviewItemActions, { OverviewItemActionsProps } from './../OverviewItem/OverviewItemActions';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface CardOptionsProps extends Omit<OverviewItemActionsProps, "hiddenInteractions"> {};
+import OverviewItemActions, { OverviewItemActionsProps } from "./../OverviewItem/OverviewItemActions";
+
+export type CardOptionsProps = Omit<OverviewItemActionsProps, "hiddenInteractions">;
 
 /**
  * Container for elements that allow user-interaction, e.g. buttons or context menus.
  * Can contain multiple of them.
  * Is displayed right-aligned in the `CardHeader`.
  */
-export const CardOptions = ({
-    children,
-    className='',
-    ...otherProps
-}: CardOptionsProps) => {
+export const CardOptions = ({ children, className = "", ...otherProps }: CardOptionsProps) => {
     return (
-        <OverviewItemActions
-            {...otherProps}
-            className={
-                `${eccgui}-card__options` +
-                (className ? ' ' + className : '')
-            }
-        >
+        <OverviewItemActions {...otherProps} className={`${eccgui}-card__options` + (className ? " " + className : "")}>
             {children}
         </OverviewItemActions>
     );

package/src/components/Card/CardTitle.tsx

@@ -1,29 +1,22 @@
-import React from 'react';
-import OverviewItemLine, { OverviewItemLineProps } from './../OverviewItem/OverviewItemLine';
+import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+import OverviewItemLine, { OverviewItemLineProps } from "./../OverviewItem/OverviewItemLine";
+
 export interface CardTitleProps extends Omit<OverviewItemLineProps, "small" | "large"> {
     /**
      * Use only normal font size instead of a large one.
      */
     narrowed?: boolean;
-};
+}
 
 /**
  * Display a card title, can include other markup like `h2`, `h3` and so on to define document structure.
  */
-export const CardTitle = ({
-    children,
-    className='',
-    narrowed=false,
-    ...otherProps
-}: CardTitleProps) => {
+export const CardTitle = ({ children, className = "", narrowed = false, ...otherProps }: CardTitleProps) => {
     return (
-        <OverviewItemLine
-            {...otherProps}
-            className={`${eccgui}-card__title ` + className}
-            large={!narrowed}
-        >
+        <OverviewItemLine {...otherProps} className={`${eccgui}-card__title ` + className} large={!narrowed}>
             {children}
         </OverviewItemLine>
     );

package/src/components/Card/card.scss

@@ -1,5 +1,6 @@
 $card-padding: 0 !default;
 $card-background-color: $white !default;
+
 //$dark-card-background-color: $dark-gray4 !default;
 
 $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
@@ -9,8 +10,8 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 .#{$eccgui}-card {
     display: flex;
     flex-flow: column nowrap;
-    justify-content: flex-start;
     align-items: stretch;
+    justify-content: flex-start;
 
     &.#{$eccgui}-intent--primary {
         background-color: mix($eccgui-color-primary, $card-background-color, 5%);
@@ -49,21 +50,24 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__header {
-    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing;
     box-sizing: content-box;
     flex-grow: 0;
     flex-shrink: 0;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5
+        $eccgui-size-card-spacing;
 
     .#{$eccgui}-card--whitespace-none > header > & {
-        padding: 0
+        padding: 0;
     }
 
     .#{$eccgui}-card--whitespace-small > header > & {
-        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5;
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.25
+            $eccgui-size-card-spacing * 0.5;
     }
 
     .#{$eccgui}-card--whitespace-large > header > & {
-        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing * 2;
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing *
+            2;
     }
 }
 
@@ -102,17 +106,18 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         flex-shrink: 1;
 
         .#{$ns}-button-text {
-            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 }
 
 .#{$eccgui}-card__content {
-    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing;
     flex-grow: 1;
     flex-shrink: 1;
+    padding: $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing $eccgui-size-card-spacing
+        $eccgui-size-card-spacing;
     overflow: auto;
 
     .#{$eccgui}-card--whitespace-none > & {
@@ -120,11 +125,13 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     }
 
     .#{$eccgui}-card--whitespace-small > & {
-        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5;
+        padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing * 0.5 $eccgui-size-card-spacing * 0.5
+            $eccgui-size-card-spacing * 0.5;
     }
 
     .#{$eccgui}-card--whitespace-large > & {
-        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2;
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing * 2 $eccgui-size-card-spacing * 2
+            $eccgui-size-card-spacing * 2;
     }
 
     .#{$eccgui}-separation__divider-horizontal + &,
@@ -151,12 +158,12 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__actions {
-    padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing;
-    flex-grow: 0;
-    flex-shrink: 0;
     display: flex;
     flex-flow: row wrap;
+    flex-grow: 0;
+    flex-shrink: 0;
     align-items: center;
+    padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing;
 
     .#{$eccgui}-card--whitespace-none > & {
         padding: 0;
@@ -178,6 +185,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         &:not(:first-child) {
             margin-left: $eccgui-size-card-spacing * 0.25;
         }
+
         &:not(:last-child) {
             margin-right: $eccgui-size-card-spacing * 0.25;
         }
@@ -187,6 +195,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         &:not(:first-child) {
             margin-right: $eccgui-size-card-spacing * 0.25;
         }
+
         &:not(:last-child) {
             margin-left: $eccgui-size-card-spacing * 0.25;
         }
@@ -211,12 +220,12 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 }
 
 .#{$eccgui}-card__actions__aux {
-    order: 1000;
-    flex-grow: 1;
     display: flex;
     flex-flow: row wrap;
-    justify-content: flex-end;
+    flex-grow: 1;
     align-items: center;
+    justify-content: flex-end;
+    order: 1000;
     margin: 0;
 
     & > * {
@@ -227,6 +236,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         &:not(:first-child) {
             margin-left: $eccgui-size-card-spacing * 0.25;
         }
+
         &:not(:last-child) {
             margin-right: $eccgui-size-card-spacing * 0.25;
         }
@@ -236,6 +246,7 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
         &:not(:first-child) {
             margin-right: $eccgui-size-card-spacing * 0.25;
         }
+
         &:not(:last-child) {
             margin-left: $eccgui-size-card-spacing * 0.25;
         }

package/src/components/Card/index.tsx

@@ -1,7 +1,7 @@
-export * from './Card';
-export * from './CardHeader';
-export * from './CardTitle';
-export * from './CardOptions';
-export * from './CardContent';
-export * from './CardActions';
-export * from './CardActionsAux';
+export * from "./Card";
+export * from "./CardHeader";
+export * from "./CardTitle";
+export * from "./CardOptions";
+export * from "./CardContent";
+export * from "./CardActions";
+export * from "./CardActionsAux";

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

@@ -1,20 +1,12 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-    CardHeader,
-    Card,
-    CardContent,
-    CardTitle,
-    CardOptions,
-    CardActions,
-    Divider,
-} from "../../../../index";
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
 
-import { Default as CardHeaderExample } from "./CardHeader.stories";
-import { Default as CardContentExample } from "./CardContent.stories";
 import { Default as CardActionsExample } from "./CardActions.stories";
-import { helpersArgTypes } from "../../../../.storybook/helpers";
+import { Default as CardContentExample } from "./CardContent.stories";
+import { Default as CardHeaderExample } from "./CardHeader.stories";
 
 export default {
     title: "Components/Card",
@@ -35,8 +27,8 @@ export default {
         },
         children: {
             control: "none",
-            description: "Elements to include into the card container."
-        }
+            description: "Elements to include into the card container.",
+        },
     },
 } as ComponentMeta<typeof Card>;
 
@@ -51,13 +43,15 @@ const TemplateFull: ComponentStory<typeof Card> = (args) => (
 );
 export const FullExample = TemplateFull.bind({});
 
-const TemplateSimple: ComponentStory<typeof Card> = (args) => (
-    <Card {...args} />
-);
+const TemplateSimple: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 export const SimpleCard = TemplateSimple.bind({});
 SimpleCard.args = {
     children: [
-        <CardHeader key="1"><CardTitle>Simple card</CardTitle></CardHeader>,
-        <CardContent key="2">A card do not always need dividers between its components, and also action buttons are not mandatory</CardContent>
-    ]
-}
+        <CardHeader key="1">
+            <CardTitle>Simple card</CardTitle>
+        </CardHeader>,
+        <CardContent key="2">
+            A card do not always need dividers between its components, and also action buttons are not mandatory
+        </CardContent>,
+    ],
+};

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

@@ -1,41 +1,37 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import {
-  CardActions,
-  CardActionsAux,
-} from "../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import Button from "../../Button/Button";
+import { CardActions, CardActionsAux } from "../index";
 
-import { Default as CardTitleExample } from "./CardTitle.stories";
 import { Default as CardOptionsExample } from "./CardOptions.stories";
+import { Default as CardTitleExample } from "./CardTitle.stories";
 
 export default {
-  title: "Components/Card/CardActions",
-  component: CardActions,
-  subcomponents: {
-    CardActionsAux,
-  },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements to include into the actions container."
-      }
-  },
+    title: "Components/Card/CardActions",
+    component: CardActions,
+    subcomponents: {
+        CardActionsAux,
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements to include into the actions container.",
+        },
+    },
 } as ComponentMeta<typeof CardActions>;
 
-const Template: ComponentStory<typeof CardActions> = (args) => (
-    <CardActions {...args} />
-);
+const Template: ComponentStory<typeof CardActions> = (args) => <CardActions {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     children: [
-        <Button affirmative key={"1"}>Main action</Button>,
+        <Button affirmative key={"1"}>
+            Main action
+        </Button>,
         <Button key={"2"}>Cancel</Button>,
         <CardActionsAux key={"3"}>
             <Button outlined>Other action</Button>
-        </CardActionsAux>
+        </CardActionsAux>,
     ],
-}
+};

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

@@ -1,28 +1,28 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
-import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-  CardContent,
-} from "../index";
+import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
+import { CardContent } from "../index";
 
 export default {
-  title: "Components/Card/CardContent",
-  component: CardContent,
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements for card content."
-      }
-  },
+    title: "Components/Card/CardContent",
+    component: CardContent,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements for card content.",
+        },
+    },
 } as ComponentMeta<typeof CardContent>;
 
-const Template: ComponentStory<typeof CardContent> = (args) => (
-    <CardContent {...args} />
-);
+const Template: ComponentStory<typeof CardContent> = (args) => <CardContent {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <HtmlContentBlock><LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} /></HtmlContentBlock>,
-}
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+};

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

@@ -1,38 +1,29 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-  CardHeader,
-  CardTitle,
-  CardOptions,
-} from "../index";
+import { CardHeader, CardOptions, CardTitle } from "../index";
 
-import { Default as CardTitleExample } from "./CardTitle.stories";
 import { Default as CardOptionsExample } from "./CardOptions.stories";
+import { Default as CardTitleExample } from "./CardTitle.stories";
 
 export default {
-  title: "Components/Card/CardHeader",
-  component: CardHeader,
-  subcomponents: {
-    CardTitle,
-    CardOptions,
-  },
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements to include into the header."
-      }
-  },
+    title: "Components/Card/CardHeader",
+    component: CardHeader,
+    subcomponents: {
+        CardTitle,
+        CardOptions,
+    },
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements to include into the header.",
+        },
+    },
 } as ComponentMeta<typeof CardHeader>;
 
-const Template: ComponentStory<typeof CardHeader> = (args) => (
-    <CardHeader {...args} />
-);
+const Template: ComponentStory<typeof CardHeader> = (args) => <CardHeader {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: [
-        <CardTitle {...CardTitleExample.args} key="1" />,
-        <CardOptions {...CardOptionsExample.args} key="2" />
-    ],
-}
+    children: [<CardTitle {...CardTitleExample.args} key="1" />, <CardOptions {...CardOptionsExample.args} key="2" />],
+};

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

@@ -1,27 +1,23 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import IconButton from "../../Icon/IconButton";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-  CardOptions,
-} from "../index";
+import IconButton from "../../Icon/IconButton";
+import { CardOptions } from "../index";
 
 export default {
-  title: "Components/Card/CardOptions",
-  component: CardOptions,
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements for user-interaction."
-      }
-  },
+    title: "Components/Card/CardOptions",
+    component: CardOptions,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements for user-interaction.",
+        },
+    },
 } as ComponentMeta<typeof CardOptions>;
 
-const Template: ComponentStory<typeof CardOptions> = (args) => (
-    <CardOptions {...args} />
-);
+const Template: ComponentStory<typeof CardOptions> = (args) => <CardOptions {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    children: <IconButton name="item-question" onClick={() => alert("Some action is triggered")} />
-}
+    children: <IconButton name="item-question" onClick={() => alert("Some action is triggered")} />,
+};

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

@@ -1,27 +1,23 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import {
-  CardTitle,
-} from "../index";
+import { CardTitle } from "../index";
 
 export default {
-  title: "Components/Card/CardTitle",
-  component: CardTitle,
-  argTypes: {
-      children: {
-          control: "none",
-          description: "Elements for card title."
-      }
-  },
+    title: "Components/Card/CardTitle",
+    component: CardTitle,
+    argTypes: {
+        children: {
+            control: "none",
+            description: "Elements for card title.",
+        },
+    },
 } as ComponentMeta<typeof CardTitle>;
 
-const Template: ComponentStory<typeof CardTitle> = (args) => (
-    <CardTitle {...args} />
-);
+const Template: ComponentStory<typeof CardTitle> = (args) => <CardTitle {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     narrowed: false,
     children: <h2>Card title</h2>,
-}
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -1,24 +1,13 @@
-import React from 'react';
-import {
-    Checkbox as BlueprintCheckbox,
-    CheckboxProps as BlueprintCheckboxProps
-} from "@blueprintjs/core";
+import React from "react";
+import { Checkbox as BlueprintCheckbox, CheckboxProps as BlueprintCheckboxProps } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface CheckboxProps extends BlueprintCheckboxProps {
-    // currently we do not alter it
-};
+export type CheckboxProps = BlueprintCheckboxProps;
 
-export const Checkbox = ({
-    children,
-    className='',
-    ...restProps
-}: CheckboxProps) => {
+export const Checkbox = ({ children, className = "", ...restProps }: CheckboxProps) => {
     return (
-        <BlueprintCheckbox
-            {...restProps}
-            className={`${eccgui}-checkbox ` + className}
-        >
+        <BlueprintCheckbox {...restProps} className={`${eccgui}-checkbox ` + className}>
             {children}
         </BlueprintCheckbox>
     );

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

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