feat(ffe-grid-react): rewrite to ts

packages/ffe-grid-react/README.md

@@ -10,11 +10,6 @@ npm install --save @sb1/ffe-grid-react
 
 Full documentation on grid usage is available at https://design.sparebank1.no/komponenter/grid/.
 
-## TypeScript definition files
-
-This component supports TypeScript - please update `index.d.ts` if you change any
-of the external methods or properties in this component.
-
 ## DevTool: Grid overlay
 
 For å lettere inspisere hvordan innholdet legger seg i kolonner, eller for å se hvordan gridden vil kunne passe inn på en eksisterende webside eksporteres det et separat util som vil lage en full-skjerm overlay med kolonner på en eksisterende side. Fra denne modulen eksporteres bare en funksjon som lager en fixed positioned div og det er opp til applikasjonen hvordan man ønsker å bruke den.

packages/ffe-grid-react/package.json

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

packages/ffe-grid-react/src/Grid.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Grid, GridProps } from './Grid';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultProps = {
+    children: <p>blah</p>,
+};
+
+const TEST_ID = 'test-id';
+
+const renderGrid = (props?: Partial<GridProps>) =>
+    render(<Grid {...defaultProps} {...props} data-testid={TEST_ID} />);
+
+describe('<Grid/>', () => {
+    it('renders with default class and element', () => {
+        renderGrid();
+        const grid = screen.getByTestId(TEST_ID);
+        expect(grid.tagName).toBe('DIV');
+        expect(grid.classList.contains('ffe-grid')).toBeTruthy();
+    });
+
+    it('renders with custom class', () => {
+        renderGrid({ className: 'custom-class' });
+        const grid = screen.getByTestId(TEST_ID);
+        expect(grid.classList.contains('ffe-grid')).toBeTruthy();
+        expect(grid.classList.contains('custom-class')).toBeTruthy();
+    });
+
+    it('renders provided children node', () => {
+        renderGrid();
+        const grid = screen.getByTestId(TEST_ID);
+
+        expect(grid.innerHTML).toBe('<p>blah</p>');
+    });
+
+    it('sets the gap modifier', () => {
+        renderGrid({ gap: 'xs' });
+
+        const grid = screen.getByTestId(TEST_ID);
+        expect(grid.classList.contains('ffe-grid')).toBeTruthy();
+        expect(grid.classList.contains('ffe-grid--gap-xs')).toBeTruthy();
+    });
+
+    it('preserves other attributes that are passed to it', async () => {
+        const user = userEvent.setup();
+
+        const handler = jest.fn();
+        renderGrid({ onClick: handler });
+        const grid = screen.getByTestId(TEST_ID);
+        await user.click(grid);
+
+        expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('can render a custom root element', () => {
+        renderGrid({ as: 'section' });
+        const grid = screen.getByTestId(TEST_ID);
+        expect(grid.tagName).toBe('SECTION');
+    });
+});

packages/ffe-grid-react/src/Grid.tsx

@@ -0,0 +1,28 @@
+import React, { ElementType } from 'react';
+import classNames from 'classnames';
+import { ComponentWithoutRefAsPropParams } from './types';
+
+export type GridProps<As extends ElementType = any> =
+    ComponentWithoutRefAsPropParams<As> & {
+        /** Specify the internal gutter of the grid */
+        gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    };
+
+export const Grid: React.FC<GridProps> = ({
+    children,
+    className,
+    gap,
+    as: Comp = 'div',
+    ...rest
+}) => {
+    return (
+        <Comp
+            className={classNames(className, 'ffe-grid', {
+                [`ffe-grid--gap-${gap}`]: gap,
+            })}
+            {...rest}
+        >
+            {children}
+        </Comp>
+    );
+};