Merge pull request #2445 from SpareBank1/develop_fix-card-types

pethel · web-flow · commit 5589e9102f87 · 2024-12-16T11:48:00.000+01:00
Develop fix card types
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^6.0.1",
     "storybook": "^8.2.7",
-    "typescript": "5.4.3"
+    "typescript": "^5.7.2"
   },
   "eslintConfig": {
     "extends": [
diff --git a/packages/ffe-cards-react/src/CardBase.tsx b/packages/ffe-cards-react/src/CardBase.tsx
@@ -1,7 +1,12 @@
 import React, { ElementType, ForwardedRef } from 'react';
 import classNames from 'classnames';
 import { WithCardActionProps, WithCardAction } from './components';
-import { BgColor, BgColorDarkmode, ComponentAsPropParams } from './types';
+import {
+    BgColor,
+    BgColorDarkmode,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from './types';
 import { fixedForwardRef } from './fixedForwardRef';
 
 export type CardBaseProps<As extends ElementType = 'div'> = Omit<
@@ -48,7 +53,7 @@ function CardBaseWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) =>
+            {({ CardAction }: CardActionRenderProps) =>
                 typeof children === 'function'
                     ? children({ CardAction })
                     : children
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx
@@ -5,6 +5,7 @@ import { GroupCardElement } from './GroupCardElement';
 import { GroupCardFooter } from './GroupCardFooter';
 import { Heading2, Paragraph } from '@sb1/ffe-core-react';
 import type { StoryObj, Meta } from '@storybook/react';
+import { CardRenderProps } from '../types';
 
 const meta: Meta<typeof GroupCard> = {
     title: 'Komponenter/Cards/GroupCard',
@@ -27,7 +28,7 @@ export const Standard: Story = {
             <GroupCardElement>Dette er et element i GroupCard</GroupCardElement>
             <GroupCardElement>Dette er et element i GroupCard</GroupCardElement>
             <GroupCardFooter>
-                {({ CardAction }) => (
+                {({ CardAction }: CardRenderProps) => (
                     <CardAction href="https://design.sparebank1.no">
                         Vis mer
                     </CardAction>
@@ -83,7 +84,13 @@ export const WithCardAction: Story = {
                 <Heading2 lookLike={5}>Tittel på gruppe</Heading2>
             </GroupCardTitle>
             <GroupCardElement>
-                {({ CardAction, CardName, Title, Subtext, Text }) => (
+                {({
+                    CardAction,
+                    CardName,
+                    Title,
+                    Subtext,
+                    Text,
+                }: CardRenderProps) => (
                     <>
                         <CardName>Kortnavn</CardName>
                         <Title>
@@ -97,7 +104,7 @@ export const WithCardAction: Story = {
                 )}
             </GroupCardElement>
             <GroupCardElement>
-                {({ CardAction }) => (
+                {({ CardAction }: CardRenderProps) => (
                     <>
                         <Heading2>
                             <CardAction as="button">Knapp</CardAction>
@@ -107,7 +114,7 @@ export const WithCardAction: Story = {
                 )}
             </GroupCardElement>
             <GroupCardElement>
-                {({ CardAction }) => (
+                {({ CardAction }: CardRenderProps) => (
                     <>
                         <Heading2>
                             <CardAction href="https://design.sparebank1.no">
@@ -119,7 +126,7 @@ export const WithCardAction: Story = {
                 )}
             </GroupCardElement>
             <GroupCardFooter>
-                {({ CardAction }) => (
+                {({ CardAction }: CardRenderProps) => (
                     <CardAction href="https://design.sparebank1.no">
                         Vis mer
                     </CardAction>
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCardElement.tsx
@@ -1,7 +1,11 @@
 import React, { ElementType, ForwardedRef } from 'react';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import { fixedForwardRef } from '../fixedForwardRef';
 
 export type GroupCardElementProps<As extends ElementType = 'div'> = Omit<
@@ -39,7 +43,7 @@ function GroupCardElementWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) =>
+            {({ CardAction }: CardActionRenderProps) =>
                 typeof children === 'function'
                     ? children({ Text, Subtext, Title, CardName, CardAction })
                     : children
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCardFooter.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCardFooter.tsx
@@ -1,7 +1,11 @@
 import React, { ElementType, ForwardedRef } from 'react';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import { fixedForwardRef } from '../fixedForwardRef';
 
 export type GroupCardFooterProps<As extends ElementType = 'div'> = Omit<
@@ -30,7 +34,7 @@ function GroupCardFooterWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) =>
+            {({ CardAction }: CardActionRenderProps) =>
                 typeof children === 'function'
                     ? children({ Text, Subtext, Title, CardName, CardAction })
                     : children
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCardTitle.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCardTitle.tsx
@@ -1,7 +1,11 @@
 import React, { ElementType, ForwardedRef } from 'react';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import { fixedForwardRef } from '../fixedForwardRef';
 
 export type GroupCardTitleProps<As extends ElementType = 'div'> = Omit<
@@ -39,7 +43,7 @@ function GroupCardTitleWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) =>
+            {({ CardAction }: CardActionRenderProps) =>
                 typeof children === 'function'
                     ? children({ Text, Subtext, Title, CardName, CardAction })
                     : children
diff --git a/packages/ffe-cards-react/src/IconCard/IconCard.tsx b/packages/ffe-cards-react/src/IconCard/IconCard.tsx
@@ -1,5 +1,9 @@
 import React, { ElementType, ForwardedRef, ReactElement } from 'react';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import classNames from 'classnames';
 import { WithCardAction, Text, Subtext, Title, CardName } from '../components';
 import { fixedForwardRef } from '../fixedForwardRef';
@@ -48,7 +52,7 @@ function IconCardWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) => {
+            {({ CardAction }: CardActionRenderProps) => {
                 const bodyElement = (
                     <div className="ffe-icon-card__body">
                         {typeof children === 'function'
diff --git a/packages/ffe-cards-react/src/IllustrationCard/IllustrationCard.spec.tsx b/packages/ffe-cards-react/src/IllustrationCard/IllustrationCard.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { IllustrationCard } from './IllustrationCard';
 import { render, screen } from '@testing-library/react';
+import { CardRenderProps } from '../types';
 
 const children = <div>Hello world</div>;
 const TEST_ID = 'test-id';
@@ -54,7 +55,7 @@ describe('IllustrationCard', () => {
             <IllustrationCard
                 data-testid={TEST_ID}
                 img={illustration}
-                children={Components => (
+                children={(Components: CardRenderProps) => (
                     <Components.Text>Hello world</Components.Text>
                 )}
             />,
diff --git a/packages/ffe-cards-react/src/IllustrationCard/IllustrationCard.tsx b/packages/ffe-cards-react/src/IllustrationCard/IllustrationCard.tsx
@@ -1,5 +1,9 @@
 import React, { ElementType, ForwardedRef, ReactElement } from 'react';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import classNames from 'classnames';
 import { WithCardAction, Text, Subtext, Title, CardName } from '../components';
 import { fixedForwardRef } from '../fixedForwardRef';
@@ -50,7 +54,7 @@ function IllustrationCardWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) => {
+            {({ CardAction }: CardActionRenderProps) => {
                 const illustrationElement = (
                     <div
                         className={classNames(
diff --git a/packages/ffe-cards-react/src/ImageCard/ImageCard.spec.tsx b/packages/ffe-cards-react/src/ImageCard/ImageCard.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ImageCard } from './ImageCard';
 import { render, screen, within } from '@testing-library/react';
+import { CardRenderProps } from '../types';
 
 const children = <div>Hello world</div>;
 const TEST_ID = 'test-id';
@@ -76,7 +77,7 @@ describe('ImageCard', () => {
                 data-testid={TEST_ID}
                 imageAltText="Image alt text"
                 imageSrc="random/path"
-                children={Components => (
+                children={(Components: CardRenderProps) => (
                     <Components.Text>Hello world</Components.Text>
                 )}
             />,
diff --git a/packages/ffe-cards-react/src/ImageCard/ImageCard.tsx b/packages/ffe-cards-react/src/ImageCard/ImageCard.tsx
@@ -1,5 +1,9 @@
 import React, { ElementType, ForwardedRef } from 'react';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
 import { fixedForwardRef } from '../fixedForwardRef';
@@ -37,7 +41,7 @@ function ImageCardWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) => (
+            {({ CardAction }: CardActionRenderProps) => (
                 <>
                     <div className="ffe-image-card__image-container">
                         <div className="ffe-image-card__image-overlay" />
diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.spec.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { StippledCard } from './StippledCard';
 import { Icon } from '@sb1/ffe-icons-react';
 import { render, screen, within } from '@testing-library/react';
+import { CardRenderProps } from '../types';
 
 const children = <div>Hello world</div>;
 const TEST_ID = 'test-id';
@@ -52,7 +53,7 @@ describe('StippledCard', () => {
                     element: <Icon fileUrl="monitoring" size="md" />,
                     type: 'icon',
                 }}
-                children={Components => (
+                children={(Components: CardRenderProps) => (
                     <Components.Text>Hello world</Components.Text>
                 )}
             />,
diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.tsx
@@ -1,5 +1,9 @@
 import React, { ElementType, ForwardedRef, ReactNode } from 'react';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
 import { fixedForwardRef } from '../fixedForwardRef';
@@ -43,7 +47,7 @@ function StippledCardWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) => (
+            {({ CardAction }: CardActionRenderProps) => (
                 <>
                     {img && (
                         <div
diff --git a/packages/ffe-cards-react/src/TextCard/TextCard.spec.tsx b/packages/ffe-cards-react/src/TextCard/TextCard.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextCard } from './TextCard';
 import { render, screen } from '@testing-library/react';
+import { CardRenderProps } from '../types';
 
 const children = <div>Hello world</div>;
 const TEST_ID = 'test-id';
@@ -16,7 +17,7 @@ describe('TextCard', () => {
         render(
             <TextCard
                 data-testid={TEST_ID}
-                children={Components => (
+                children={(Components: CardRenderProps) => (
                     <Components.Text>Hello world</Components.Text>
                 )}
             />,
diff --git a/packages/ffe-cards-react/src/TextCard/TextCard.tsx b/packages/ffe-cards-react/src/TextCard/TextCard.tsx
@@ -1,5 +1,9 @@
 import React, { ElementType, ForwardedRef } from 'react';
-import { CardRenderProps, ComponentAsPropParams } from '../types';
+import {
+    CardRenderProps,
+    ComponentAsPropParams,
+    CardActionRenderProps,
+} from '../types';
 import classNames from 'classnames';
 import { CardName, Subtext, Text, Title, WithCardAction } from '../components';
 import { fixedForwardRef } from '../fixedForwardRef';
@@ -36,7 +40,7 @@ function TextCardWithForwardRef<As extends ElementType>(
             {...(rest as Record<string, unknown>)}
             ref={ref}
         >
-            {({ CardAction }) =>
+            {({ CardAction }: CardActionRenderProps) =>
                 typeof children === 'function'
                     ? children({ Text, Subtext, Title, CardName, CardAction })
                     : children
diff --git a/packages/ffe-cards-react/src/components/CardAction.stories.tsx b/packages/ffe-cards-react/src/components/CardAction.stories.tsx
@@ -5,6 +5,7 @@ import { CardBase } from '../CardBase';
 import { Heading2, Paragraph } from '@sb1/ffe-core-react';
 import { Icon } from '@sb1/ffe-icons-react';
 import { IconCard } from '../IconCard/IconCard';
+import { CardActionRenderProps, CardRenderProps } from '../types';
 
 const Custom: React.FC<React.ComponentProps<'a'>> = props => (
     <a {...props}>
@@ -39,7 +40,7 @@ export const Standard: Story = {
     },
     render: args => (
         <CardBase shadow={true}>
-            {({ CardAction }) => (
+            {({ CardAction }: CardActionRenderProps) => (
                 <>
                     <Heading2>
                         <CardAction {...args}>Lenke</CardAction>
@@ -58,7 +59,7 @@ export const AsButton: Story = {
     },
     render: args => (
         <CardBase shadow={true}>
-            {({ CardAction }) => (
+            {({ CardAction }: CardActionRenderProps) => (
                 <>
                     <Heading2>
                         <CardAction {...args}>Knapp</CardAction>
@@ -79,7 +80,13 @@ export const WithinTitle: Story = {
         <IconCard
             icon={<Icon fileUrl="icons/open/300/xl/savings.svg" size="xl" />}
         >
-            {({ CardAction, CardName, Title, Subtext, Text }) => (
+            {({
+                CardAction,
+                CardName,
+                Title,
+                Subtext,
+                Text,
+            }: CardRenderProps) => (
                 <>
                     <CardName>Kortnavn</CardName>
                     <Title>
diff --git a/packages/ffe-cards-react/src/components/WithCardAction.spec.tsx b/packages/ffe-cards-react/src/components/WithCardAction.spec.tsx
diff --git a/packages/ffe-cards-react/src/index.ts b/packages/ffe-cards-react/src/index.ts
diff --git a/packages/ffe-cards-react/src/types.ts b/packages/ffe-cards-react/src/types.ts
