Added base cards

Author: EranNL

.eslintrc

@@ -23,6 +23,7 @@
         "import/no-dynamic-require": "off",
         "global-require": "off",
         "quotes": ["error", "single", { "allowTemplateLiterals": true }],
-        "@typescript-eslint/indent": ["error", 4]
+        "@typescript-eslint/indent": ["error", 4],
+        "@typescript-eslint/ban-ts-comment": "off"
     }
 }

__tests__/Card.test.tsx

@@ -0,0 +1,57 @@
+import { render } from 'enzyme';
+import React from 'react';
+import Card from '@/components/Card/Card';
+import CardContent from '@/components/Card/Content';
+import CardHeader from '@/components/Card/Header';
+
+describe('Card test', () => {
+    it('should render card', () => {
+        const container = render(
+            <div>
+                <Card />
+            </div>
+        );
+
+        expect(container.find('.card').length).toBe(1);
+    });
+
+    it('should render card header', () => {
+        const container = render(
+            <div>
+                <Card>
+                    <Card.Header title="Foo" />
+                    <CardHeader title="Foo" />
+                    Hello world
+                </Card>
+            </div>
+        );
+
+        expect(container.find('.card .card-header').length).toBe(2);
+    });
+
+    it('should render card header with actions', () => {
+        const container = render(
+            <div>
+                <Card>
+                    <Card.Header title="Foo" actions={[<div key="1" className="foo"/>, null]} />
+                    Hello world
+                </Card>
+            </div>
+        );
+
+        expect(container.find('.card .card-header .card-header-action').length).toBe(1);
+    });
+
+    it('should render card content', () => {
+        const container = render(
+            <div>
+                <Card>
+                    <Card.Content>Content</Card.Content>
+                    <CardContent>Content</CardContent>
+                </Card>
+            </div>
+        );
+
+        expect(container.find('.card .card-content').text()).toBe('ContentContent');
+    });
+});

src/components/Card/Card.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import CardContent from '@/components/Card/Content';
+import { ForwardComponentWithStatics } from '@/components/utils/ForwardComponentWithStatics';
+import CardHeader from '@/components/Card/Header';
+
+export type CardStatics = {
+    Content: typeof CardContent;
+    Header: typeof CardHeader;
+}
+
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
+
+// Static properties are not given yet, when declaring the card const. Therefore, the error saying
+// that Card is missing above CardStatics  properties. These will defined after the card component
+// is defined.
+// @ts-ignore
+const Card: ForwardComponentWithStatics<HTMLDivElement, CardProps, CardStatics> = React.forwardRef((
+    {
+        children,
+        className,
+    },
+    ref
+): React.ReactElement => (
+    <div
+        className={clsx(
+            'card',
+            className
+        )}
+        ref={ref}
+    >
+        {children}
+    </div>
+));
+
+Card.displayName = 'Card';
+Card.propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node
+};
+
+Card.Content = CardContent;
+Card.Header = CardHeader;
+
+export default Card;

src/components/Card/Content.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+
+type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+
+const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'card-content',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+CardContent.displayName = 'CardContent';
+CardContent.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+export default CardContent;

src/components/Card/Header.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    actions?: Array<React.ReactNode> | React.ReactNode | null;
+    title?: string;
+}
+
+const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((
+    {
+        actions,
+        children,
+        className,
+        title
+    },
+    ref
+): React.ReactElement => {
+    actions = React.Children.map<React.ReactNode, React.ReactNode>(
+        actions,
+        (child: React.ReactNode) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    ...child.props,
+                    className: clsx(child.props.className, 'card-header-action')
+                })
+            }
+
+            return undefined;
+        }
+    );
+
+    return (
+        <div
+            ref={ref}
+            className={clsx(
+                'card-header',
+                className
+            )}
+        >
+            {title && (
+                <div
+                    className={clsx(
+                        'card-title'
+                    )}
+                >
+                    {title}
+                </div>
+            )}
+            {actions && (
+                <div className="card-header-actions">
+                    {actions}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+});
+
+CardHeader.displayName = 'CardHeader';
+CardHeader.propTypes = {
+    actions: PropTypes.arrayOf(PropTypes.node),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    title: PropTypes.string
+}
+
+export default CardHeader;

src/components/utils/ForwardComponentWithStatics.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export type StaticsMap = Record<string, React.ReactNode>;
+
+export type ForwardComponentWithStatics<T, P, U extends StaticsMap> =
+    React.ForwardRefExoticComponent<React.PropsWithoutRef<P>
+    & React.RefAttributes<T>>
+    & U;

src/style/base/_variables.scss

@@ -123,3 +123,14 @@ $danger-button-ghost-active-background: mixins.color('red', 75);
     --danger-button-ghost-hover-background: #{$danger-button-ghost-hover-background};
     --danger-button-ghost-active-background: #{$danger-button-ghost-active-background};
 }
+
+/**
+ * 6. Cards
+ */
+$card-padding: 1rem;
+$card-background: #fff;
+
+:root {
+    --card-padding: #{$card-padding};
+    --card-background: #{$card-background};
+}

src/style/components/_card.scss

@@ -0,0 +1,33 @@
+@use "elevation";
+
+.card {
+    @extend .elevated-1;
+    background: var(--card-background);
+    border: solid 1px var(--base-border-color);
+    border-radius: var(--base-border-radius);
+
+    .card-content {
+        padding: var(--card-padding);
+    }
+
+    .card-header {
+        padding: var(--card-padding);
+        display: flex;
+        align-items: center;
+
+        .card-header-actions {
+            margin-left: auto;
+
+            > .card-header-action {
+                margin-left: var(--card-padding);
+            }
+        }
+    }
+
+    .card-title {
+        font: {
+            weight: 600;
+            size: 1.1rem;
+        }
+    }
+}

src/style/components/_elevation.scss

@@ -0,0 +1,7 @@
+@use "../base/mixins";
+
+@for $i from 1 through 5 {
+    .elevated-#{$i} {
+        box-shadow: 0 2px #{$i * 2 + 3}px 0px hsla(hue(mixins.color('gray', 500)), saturation(mixins.color('gray', 500)), lightness(mixins.color('gray', 500)), 0.2);
+    }
+}

src/style/index.scss

@@ -13,3 +13,4 @@
 @use "components/button";
 @use "components/page";
 @use "components/panel";
+@use "components/card";