feat(react): add card component

packages/react/lib/Card/index.js

@@ -0,0 +1,24 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { classNames } from '@junipero/core';
+
+const Card = forwardRef(({ className, ...rest }, ref) => {
+  const innerRef = useRef();
+
+  useImperativeHandle(ref, () => ({
+    innerRef,
+    isJunipero: true,
+  }));
+
+  return (
+    <div
+      { ...rest }
+      className={classNames('junipero', 'card', className)}
+      ref={innerRef}
+    />
+  );
+});
+
+Card.displayName = 'Card';
+Card.propTypes = {};
+
+export default Card;

packages/react/lib/Card/index.stories.js

@@ -0,0 +1,7 @@
+import Card from './index';
+
+export default { title: 'react/Card' };
+
+export const basic = () => (
+  <Card>This is a card</Card>
+);

packages/react/lib/Card/index.test.js

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import Card from './index';
+
+describe('<Card />', () => {
+  it('should render', () => {
+    const { container, unmount } = render(<Card />);
+    expect(container).toMatchSnapshot();
+    unmount();
+  });
+});

packages/react/lib/Card/index.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Card /> should render 1`] = `
+<div>
+  <div
+    class="junipero card"
+  />
+</div>
+`;

packages/theme/lib/Card.sass

@@ -0,0 +1,11 @@
+@use "vars" as vars
+
+.junipero.card
+  --background-color: var(--junipero-seashell)
+  --shadow-color: rgba(26, 26, 26, 0.1)
+
+  display: block
+  border-radius: 10px
+  padding: 20px
+  background: var(--background-color)
+  box-shadow: #{vars.$cardShadow}