feat(ffe-cards-react): rewrite in ts

BREAKING CHANGE: different props

element -> as

packages/ffe-cards-react/package.json

@@ -18,8 +18,8 @@
         "url": "ssh://[email protected]:SpareBank1/designsystem.git"
     },
     "scripts": {
-        "build": "ffe-buildtool babel",
-        "watch": "ffe-buildtool babel-watch",
+        "build": "ffe-buildtool tsc",
+        "watch": "ffe-buildtool tsc-watch",
         "lint": "eslint src",
         "lint:fix": "eslint src --fix",
         "test": "ffe-buildtool jest",

packages/ffe-cards-react/src/CardBase.spec.js → packages/ffe-cards-react/src/CardBase.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CardBase from './CardBase';
+import { CardBase } from './CardBase';
 import { render, screen, within } from '@testing-library/react';
 
 describe('CardBase', () => {
@@ -15,8 +15,19 @@ describe('CardBase', () => {
     });
 
     it('should render my custom element and custom class', () => {
-        render(<CardBase element="article" className="my-custom-class" />);
+        render(<CardBase as="article" className="my-custom-class" />);
         const article = screen.getByRole('article');
         expect(article.classList.contains('my-custom-class')).toBeTruthy();
     });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLAnchorElement>();
+        render(
+            <CardBase href="#" ref={ref}>
+                <div>Hello world</div>
+            </CardBase>,
+        );
+        const link = screen.getByRole('link');
+        expect(link).toBe(ref.current);
+    });
 });

packages/ffe-cards-react/src/CardBase.tsx

@@ -0,0 +1,24 @@
+import React, { ElementType, ForwardedRef } from 'react';
+import { fixedForwardRef } from './fixedForwardRef';
+import { ComponentAsPropParams } from './types';
+import classNames from 'classnames';
+
+export type CardBaseProps<As extends ElementType = 'a'> =
+    ComponentAsPropParams<As>;
+
+function CardBaseWithForwardRef<As extends ElementType>(
+    props: CardBaseProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const { as: Comp = 'a', className, ...rest } = props;
+
+    return (
+        <Comp
+            className={classNames('ffe-card-base', className)}
+            {...rest}
+            ref={ref}
+        />
+    );
+}
+
+export const CardBase = fixedForwardRef(CardBaseWithForwardRef);

packages/ffe-cards-react/src/IconCard/IconCard.spec.js → packages/ffe-cards-react/src/IconCard/IconCard.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import IconCard from './IconCard';
+import { IconCard } from './IconCard';
 import { Icon } from '@sb1/ffe-icons-react';
 import { render, screen } from '@testing-library/react';
 
@@ -40,8 +40,8 @@ describe('IconCard', () => {
         );
         const link = screen.getByRole('link');
         const icon = link.querySelector('.ffe-icons');
-        expect(icon.classList.contains('ffe-icon-card__icon')).toBe(true);
-        expect(icon.classList.contains('my-custom-class')).toBe(true);
+        expect(icon?.classList.contains('ffe-icon-card__icon')).toBe(true);
+        expect(icon?.classList.contains('my-custom-class')).toBe(true);
     });
 
     it('should add modifying classes when modifiers are given', () => {
@@ -73,8 +73,8 @@ describe('IconCard', () => {
         );
         const link = screen.getByRole('link');
         const p = link.querySelector('p');
-        expect(p.classList.contains('ffe-card-body__text')).toBeTruthy();
-        expect(p.textContent).toEqual('Hello world');
+        expect(p?.classList.contains('ffe-card-body__text')).toBeTruthy();
+        expect(p?.textContent).toEqual('Hello world');
     });
 
     it('should render my custom class', () => {
@@ -91,4 +91,19 @@ describe('IconCard', () => {
         expect(link.classList.contains('ffe-icon-card')).toBeTruthy();
         expect(link.classList.contains('my-custom-class')).toBeTruthy();
     });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLAnchorElement>();
+        render(
+            <IconCard
+                href="#"
+                icon={<Icon fileUrl={savingsIconXlarge} size="xl" />}
+                ref={ref}
+            >
+                {children}
+            </IconCard>,
+        );
+        const link = screen.getByRole('link');
+        expect(link).toBe(ref.current);
+    });
 });

packages/ffe-cards-react/src/IconCard/IconCard.tsx

@@ -0,0 +1,59 @@
+import React, { ElementType, ForwardedRef, ReactElement } from 'react';
+import { fixedForwardRef } from '../fixedForwardRef';
+import { ComponentAsPropParams, CardRenderProps } from '../types';
+import classNames from 'classnames';
+import { Text, Subtext, Title, CardName } from '../components';
+
+export type IconCardProps<As extends ElementType = 'a'> = Omit<
+    ComponentAsPropParams<As>,
+    'children'
+> & {
+    /** Element of icon */
+    icon: ReactElement;
+    /** Smaller icon and less space */
+    condensed?: boolean;
+    children:
+        | React.ReactNode
+        | ((cardRenderProps: CardRenderProps) => React.ReactNode);
+};
+
+function IconCardWithForwardRef<As extends ElementType>(
+    props: IconCardProps<As>,
+    ref: ForwardedRef<any>,
+) {
+    const {
+        as: Comp = 'a',
+        className,
+        condensed,
+        icon,
+        children,
+        ...rest
+    } = props;
+
+    return (
+        <Comp
+            className={classNames(
+                'ffe-icon-card',
+                { 'ffe-icon-card--condensed': condensed },
+                className,
+            )}
+            {...rest}
+            ref={ref}
+        >
+            {React.cloneElement(icon, {
+                ...icon.props,
+                className: classNames(
+                    'ffe-icon-card__icon',
+                    icon.props.className,
+                ),
+            })}
+            <div className="ffe-icon-card__body">
+                {typeof children === 'function'
+                    ? children({ Text, Subtext, Title, CardName })
+                    : children}
+            </div>
+        </Comp>
+    );
+}
+
+export const IconCard = fixedForwardRef(IconCardWithForwardRef);

packages/ffe-cards-react/src/ImageCard/ImageCard.spec.js → packages/ffe-cards-react/src/ImageCard/ImageCard.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ImageCard from './ImageCard';
+import { ImageCard } from './ImageCard';
 import { render, screen, within } from '@testing-library/react';
 
 const children = <div>Hello world</div>;
@@ -35,9 +35,9 @@ describe('ImageCard', () => {
         const link = screen.getByRole('link');
         const imageEl = link.querySelector('.ffe-image-card__image-container');
         expect(
-            imageEl.querySelector('.ffe-image-card__image-overlay'),
+            imageEl?.querySelector('.ffe-image-card__image-overlay'),
         ).toBeTruthy();
-        expect(imageEl.querySelector('.ffe-image-card__image')).toBeTruthy();
+        expect(imageEl?.querySelector('.ffe-image-card__image')).toBeTruthy();
     });
 
     it('should set alt text on image correctly', () => {
@@ -66,7 +66,7 @@ describe('ImageCard', () => {
         );
         const link = screen.getByRole('link');
         const body = link.querySelector('.ffe-image-card__body');
-        expect(body.textContent).toBe('Hello world');
+        expect(body?.textContent).toBe('Hello world');
     });
 
     it('should render children as a function', () => {
@@ -82,8 +82,8 @@ describe('ImageCard', () => {
         );
         const link = screen.getByRole('link');
         const p = link.querySelector('p');
-        expect(p.classList.contains('ffe-card-body__text')).toBeTruthy();
-        expect(p.textContent).toEqual('Hello world');
+        expect(p?.classList.contains('ffe-card-body__text')).toBeTruthy();
+        expect(p?.textContent).toEqual('Hello world');
     });
 
     it('should render my custom class', () => {
@@ -101,4 +101,20 @@ describe('ImageCard', () => {
         expect(link.classList.contains('ffe-image-card')).toBeTruthy();
         expect(link.classList.contains('my-custom-class')).toBeTruthy();
     });
+
+    it('should set ref', () => {
+        const ref = React.createRef<HTMLAnchorElement>();
+        render(
+            <ImageCard
+                href="#"
+                imageAltText="Image alt text"
+                imageSrc="random/path"
+                ref={ref}
+            >
+                {children}
+            </ImageCard>,
+        );
+        const link = screen.getByRole('link');
+        expect(link).toBe(ref.current);
+    });
 });