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

package/src/components/Accordion/AccordionItem.tsx

@@ -1,15 +1,16 @@
 import React from "react";
-import {
-    AccordionItem as CarbonAccordionItem,
-    AccordionItemProps as CarbonAccordionItemProps,
-} from "carbon-components-react";
+import { AccordionItem as CarbonAccordionItem } from "@carbon/react";
 
+// import { AccordionItemProps as CarbonAccordionItemProps } from "@carbon/react/es/components/Accordion/AccordionItem"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type sizeOptions = "none" | "small" | "medium" | "large";
 
+// workaround to get type/interface
+type CarbonAccordionItemProps = React.ComponentProps<typeof CarbonAccordionItem>;
 export interface AccordionItemProps
-    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando"> {
+    extends Omit<CarbonAccordionItemProps, "title" | "iconDescription" | "renderExpando">,
+        Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     /**
      * additional user class name
      */

package/src/components/Accordion/accordion.scss

@@ -1,6 +1,6 @@
 // lib import
 @use "sass:color";
-@use "~@carbon/styles/scss/components/accordion/accordion";
+@use "~@carbon/react/scss/components/accordion/accordion";
 @include accordion.accordion;
 
 // own vars
@@ -77,11 +77,21 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
     }
 }
 
+.#{$prefix}--accordion__wrapper {
+    .#{$prefix}--accordion__item--active > & {
+        padding-block: 0;
+    }
+}
+
 .#{$prefix}--accordion__heading {
     align-items: center;
     min-height: var(--#{$eccgui}-accordion-header-height, mini-units(5));
     color: inherit;
 
+    .#{$prefix}--accordion--end & {
+        padding-right: 0;
+    }
+
     .#{$prefix}--accordion__arrow {
         margin: 0 $eccgui-size-block-whitespace * 0.5 0 0;
 
@@ -110,6 +120,7 @@ $eccgui-size-accordion-separation: $eccgui-size-block-whitespace * 0.5 !default;
 
 .#{$prefix}--accordion__title {
     min-width: 0; // flex layout fix
+    padding-left: 0;
     margin: 0 0 0 $eccgui-size-block-whitespace;
     font-size: inherit;
     line-height: inherit;

package/src/components/Application/ApplicationContent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Content as CarbonContent } from "carbon-components-react";
+import { Content as CarbonContent } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/Application/ApplicationHeader.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import { Header as CarbonHeader, HeaderProps as CarbonHeaderProps } from "carbon-components-react";
+import { Header as CarbonHeader } from "@carbon/react";
 
+// import { HeaderProps as CarbonHeaderProps } from "@carbon/react/es/components/UIShell/Header"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationHeaderProps = CarbonHeaderProps;
+// workaround to get type/interface
+type CarbonHeaderProps = React.ComponentProps<typeof CarbonHeader>;
+export interface ApplicationHeaderProps extends CarbonHeaderProps, React.HTMLAttributes<HTMLElement> {}
 
 export const ApplicationHeader = ({
     children = "",

package/src/components/Application/ApplicationSidebarNavigation.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "carbon-components-react";
+import { SideNav as CarbonSideNav, SideNavProps as CarbonSideNavProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ApplicationSidebarNavigationProps
-    extends Omit<CarbonSideNavProps, "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
+    extends Omit<CarbonSideNavProps, "ref" | "defaultExpanded" | "isPersistent" | "isFixedNav" | "isChildOfHeader">,
         React.HTMLAttributes<HTMLElement> {}
 
 export const ApplicationSidebarNavigation = ({

package/src/components/Application/ApplicationSidebarToggler.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
     HeaderMenuButton as CarbonHeaderMenuButton,
     HeaderMenuButtonProps as CarbonHeaderMenuButtonProps,
-} from "carbon-components-react";
+} from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/Application/ApplicationTitle.tsx

@@ -1,27 +1,12 @@
 import React from "react";
-import { HeaderName as CarbonHeaderName, HeaderNameProps as CarbonHeaderNameProps } from "carbon-components-react";
+import { HeaderName as CarbonHeaderName, HeaderNameProps as CarbonHeaderNameProps } from "@carbon/react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 type SvgDepiction = HTMLElement & SVGElement;
 type ImgDepiction = HTMLElement & HTMLImageElement;
 
-export interface ApplicationTitleProps extends CarbonHeaderNameProps {
-    // from CarbonHeaderNameProps
-    /**
-        addional class name
-    */
-    className?: string;
-    /**
-        prefix the application name by extra string, e.g. company name
-    */
-    prefix?: string;
-    /**
-        home link
-    */
-    href?: string;
-
-    // our extensions
+export type ApplicationTitleProps = CarbonHeaderNameProps<"a"> & {
     /**
         application logo, <img>, <svg> or react element
     */
@@ -42,7 +27,7 @@ export interface ApplicationTitleProps extends CarbonHeaderNameProps {
         native attributes for the anchor HTML element (<a>)
     */
     htmlAProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
-}
+};
 
 export const ApplicationTitle = ({
     children,

package/src/components/Application/ApplicationToolbar.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import {
-    HeaderGlobalBar as CarbonHeaderGlobalBar,
-    HeaderGlobalBarProps as CarbonHeaderGlobalBarProps,
-} from "carbon-components-react";
+import { HeaderGlobalBar as CarbonHeaderGlobalBar } from "@carbon/react";
 
+// import { HeaderGlobalBarProps as CarbonHeaderGlobalBarProps } from "@carbon/react/es/components/UIShell/HeaderGlobalBar"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+// workaround to get type/inteface
+type CarbonHeaderGlobalBarProps = React.ComponentProps<typeof CarbonHeaderGlobalBar>;
 export type ApplicationToolbarProps = CarbonHeaderGlobalBarProps;
 
 export const ApplicationToolbar = ({

package/src/components/Application/ApplicationToolbarAction.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import {
-    HeaderGlobalAction as CarbonHeaderGlobalAction,
-    HeaderGlobalActionProps as CarbonHeaderGlobalActionProps,
-} from "carbon-components-react";
+import { HeaderGlobalAction as CarbonHeaderGlobalAction } from "@carbon/react";
 
+// import { HeaderGlobalActionProps as CarbonHeaderGlobalActionProps } from "@carbon/react/es/components/UIShell/HeaderGlobalAction"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type ApplicationToolbarActionProps = CarbonHeaderGlobalActionProps;
+// workaround to get type/interface
+type CarbonHeaderGlobalActionProps = React.ComponentProps<typeof CarbonHeaderGlobalAction>;
+export interface ApplicationToolbarActionProps
+    extends CarbonHeaderGlobalActionProps,
+        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {}
 
 export const ApplicationToolbarAction = ({
     children,

package/src/components/Application/ApplicationToolbarPanel.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import { HeaderPanel as CarbonHeaderPanel, HeaderPanelProps as CarbonHeaderPanelProps } from "carbon-components-react";
+import { HeaderPanel as CarbonHeaderPanel } from "@carbon/react";
 
+// import { HeaderPanelProps as CarbonHeaderPanelProps } from "@carbon/react/es/components/UIShell/HeaderPanel"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps {
+// workaround to get type/inteface
+type CarbonHeaderPanelProps = React.ComponentProps<typeof CarbonHeaderPanel>;
+export interface ApplicationToolbarPanelProps extends CarbonHeaderPanelProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Event handler getting called when the pointer device leaves the area of the panel menu.
      * Could be used to close it automatically.

package/src/components/Application/_config.scss

@@ -5,7 +5,7 @@
 */
 
 /// should be already imported
-//@import '~@carbon/styles/scss/colors';
+//@import '~@carbon/react/scss/colors';
 
 /*
 //----------------------------------------------------------------------------

package/src/components/Application/_content.scss

@@ -1,6 +1,6 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/content/index";
+@import "~@carbon/react/scss/components/ui-shell/content/index";
 
 // tweack original layout
 

package/src/components/Application/_header.scss

@@ -53,17 +53,25 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default;
 $shell-header-link: $blue-60 !default;
 
 // load library sub component
-@import "~@carbon/styles/scss/components/ui-shell/header/index";
+@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/_sidebar.scss

@@ -1,6 +1,6 @@
 $ui-02: $eccgui-color-workspace-background !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/side-nav/index";
+@import "~@carbon/react/scss/components/ui-shell/side-nav/index";
 
 // tweak original layout
 

package/src/components/Application/_toolbar.scss

@@ -32,7 +32,7 @@ $shell-panel-text-02: $eccgui-color-applicationheader-text !default;
 /// Header panel focus border
 $shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
-@import "~@carbon/styles/scss/components/ui-shell/header-panel/index";
+@import "~@carbon/react/scss/components/ui-shell/header-panel/index";
 
 // tweack original layout
 

package/src/components/Application/application.scss

@@ -2,10 +2,10 @@
 @import "header";
 @import "toolbar";
 
-// @import '~@carbon/styles/scss/components/ui-shell/product-switcher';
-// @import '~@carbon/styles/scss/components/ui-shell/switcher';
+// @import '~@carbon/react/scss/components/ui-shell/product-switcher';
+// @import '~@carbon/react/scss/components/ui-shell/switcher';
 @import "sidebar";
 
-// @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
+// @import '~@carbon/react/scss/components/ui-shell/navigation-menu';
 @import "content";
 @import "dropzone";

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

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import computeScrollIntoView from "compute-scroll-into-view";
+import { compute } from "compute-scroll-into-view";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -96,7 +96,7 @@ export const AutoSuggestionList = ({
     React.useEffect(() => {
         const listIndexNode = refs[currentlyFocusedIndex];
         if (dropdownRef?.current && listIndexNode?.current) {
-            const actions = computeScrollIntoView(listIndexNode.current, {
+            const actions = compute(listIndexNode.current, {
                 boundary: dropdownRef.current,
                 block: "nearest",
                 scrollMode: "if-needed",

package/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LogoReact } from "@carbon/icons-react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Badge, Icon, TestIcon } from "../../../index";
@@ -23,9 +23,9 @@ export default {
             ...helpersArgTypes.exampleIntent,
         },
     },
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;
 
-const TemplateFull: ComponentStory<typeof Badge> = (args) => (
+const TemplateFull: StoryFn<typeof Badge> = (args) => (
     <div style={{ position: "relative", border: "solid 1px", width: "10rem" }}>
         Element area <Badge {...args} />
     </div>

package/src/components/Breadcrumb/stories/BreadcrumbItem.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { BreadcrumbItem } from "./../../../index";
 
@@ -7,9 +7,9 @@ export default {
     title: "Components/Breadcrumbs/Item",
     component: BreadcrumbItem,
     argTypes: {},
-} as ComponentMeta<typeof BreadcrumbItem>;
+} as Meta<typeof BreadcrumbItem>;
 
-const Template: ComponentStory<typeof BreadcrumbItem> = (args) => <BreadcrumbItem {...args} />;
+const Template: StoryFn<typeof BreadcrumbItem> = (args) => <BreadcrumbItem {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
@@ -30,9 +30,9 @@ export default {
             description: "Elements to include into the card container.",
         },
     },
-} as ComponentMeta<typeof Card>;
+} as Meta<typeof Card>;
 
-const TemplateFull: ComponentStory<typeof Card> = (args) => (
+const TemplateFull: StoryFn<typeof Card> = (args) => (
     <Card {...args}>
         <CardHeader {...CardHeaderExample.args} />
         <Divider />
@@ -43,7 +43,7 @@ const TemplateFull: ComponentStory<typeof Card> = (args) => (
 );
 export const FullExample = TemplateFull.bind({});
 
-const TemplateSimple: ComponentStory<typeof Card> = (args) => <Card {...args} />;
+const TemplateSimple: StoryFn<typeof Card> = (args) => <Card {...args} />;
 export const SimpleCard = TemplateSimple.bind({});
 SimpleCard.args = {
     children: [

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Button from "../../Button/Button";
 import { CardActions, CardActionsAux } from "../index";
@@ -19,9 +19,9 @@ export default {
             description: "Elements to include into the actions container.",
         },
     },
-} as ComponentMeta<typeof CardActions>;
+} as Meta<typeof CardActions>;
 
-const Template: ComponentStory<typeof CardActions> = (args) => <CardActions {...args} />;
+const Template: StoryFn<typeof CardActions> = (args) => <CardActions {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import HtmlContentBlock from "../../../components/Typography/HtmlContentBlock";
 import { CardContent } from "../index";
@@ -14,9 +14,9 @@ export default {
             description: "Elements for card content.",
         },
     },
-} as ComponentMeta<typeof CardContent>;
+} as Meta<typeof CardContent>;
 
-const Template: ComponentStory<typeof CardContent> = (args) => <CardContent {...args} />;
+const Template: StoryFn<typeof CardContent> = (args) => <CardContent {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { CardHeader, CardOptions, CardTitle } from "../index";
 
@@ -19,9 +19,9 @@ export default {
             description: "Elements to include into the header.",
         },
     },
-} as ComponentMeta<typeof CardHeader>;
+} as Meta<typeof CardHeader>;
 
-const Template: ComponentStory<typeof CardHeader> = (args) => <CardHeader {...args} />;
+const Template: StoryFn<typeof CardHeader> = (args) => <CardHeader {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {