PD-309: Card Component

.gitignore

@@ -14,3 +14,6 @@ storybook/public/
 
 # JUnit report files
 reports
+
+# Yarn Error Log
+yarn-error.log

packages/card/README.md

@@ -0,0 +1,50 @@
+# Card
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/card.svg)
+
+## Example
+
+```Javascript
+import Card from '@leafygreen-ui/card';
+
+<Card
+  as='div'
+  className='card-styles'
+>
+  This is my card component
+</Card>
+```
+
+**Output HTML**
+
+```HTML
+ <div class="leafygreen-ui-1xf4bcx">This is a card component</div>
+```
+
+## Properties
+
+### className
+
+**Type:** `string`
+
+**Default:** `''`
+
+Adds a className to the class attribute.
+
+### children
+
+**Type:** `node`
+
+**Default:** `null`
+
+The children of the rendered `Card` component.
+
+### as
+
+**Type:** `HTML Tag` or `React Element`
+
+**Default:** `section`
+
+Determines the root element. For example, `Link` or `a` tags can be supplied to replace `div` from being the DOM element that wraps the component.
+
+#### Any other properties will be spread on the input element.

packages/card/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@leafygreen-ui/card",
+  "version": "0.9.0",
+  "description": "leafyGreen UI Kit Card",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "../../node_modules/.bin/webpack --config ../../webpack.config.js",
+    "ts:emit": "tsc --project ./tsconfig.json"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/lib": "^3.0.0", 
+    "@leafygreen-ui/palette": "^1.0.0"
+  },
+  "gitHead": "53385cfed5ecf3101d098d26dedc6a40b27c402a"
+}

packages/card/src/Card.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import Card from './Card';
+
+afterAll(cleanup);
+
+describe('packages/Card', () => {
+  const className = 'card-className';
+  const children = 'this is my card component';
+  const cardId = 'cardID';
+
+  const { getByTestId } = render(
+    <Card data-testid={cardId} className={className}>
+      {children}
+    </Card>,
+  );
+
+  const renderedCard = getByTestId(cardId);
+
+  test(`renders "${className}" in the cards's classList`, () => {
+    expect(renderedCard.classList.contains(className)).toBe(true);
+  });
+
+  test(`renders "${children}" as the cards's textContent`, () => {
+    expect(renderedCard.textContent).toBe(children);
+  });
+
+  test(`renders inside of a section tag by default`, () => {
+    expect(renderedCard.tagName.toLowerCase()).toBe('section');
+  });
+
+  test(`renders component inside of a React Element/HTML tag based on as prop`, () => {
+    const newCardId = 'newCardID';
+    const { getByTestId } = render(
+      <Card data-testid={newCardId} as="section">
+        Card!
+      </Card>,
+    );
+    const cardComponent = getByTestId(newCardId);
+
+    expect(cardComponent.tagName.toLowerCase()).toBe('section');
+  });
+});

packages/card/src/Card.story.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { css } from '@leafygreen-ui/emotion';
+import Card from './Card';
+
+const containerStyle = css`
+  padding: 10px;
+  height: 70px;
+  width: 140px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+`;
+
+storiesOf('Card', module).add('Default', () => (
+  <Card as="div" className={containerStyle}>
+    This is a card component
+  </Card>
+));

packages/card/src/Card.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { uiColors } from '@leafygreen-ui/palette';
+
+const containerStyle = css`
+  background-color: white;
+  border: 1px solid ${uiColors.gray.light2};
+  border-radius: 4px;
+  box-shadow: 0px 4px 10px -4px ${uiColors.gray.light1};
+  transition: border 300ms ease-in-out, box-shadow 300ms ease-in-out;
+
+  &:hover {
+    border: 1px solid ${uiColors.gray.light2};
+    box-shadow: 0px 3px 6px -2px ${uiColors.gray.base};
+  }
+`;
+
+interface CardProps {
+  children: React.ReactNode;
+  as?: React.ElementType<any>;
+  className?: string;
+}
+
+function Card({ children, as = 'section', className, ...rest }: CardProps) {
+  const Root = as;
+
+  return (
+    <Root {...rest} className={cx(containerStyle, className)}>
+      {children}
+    </Root>
+  );
+}
+
+Card.displayName = 'Card';
+
+Card.propTypes = {
+  children: PropTypes.node,
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  className: PropTypes.string,
+};
+
+export default Card;

packages/card/src/index.ts

@@ -0,0 +1,2 @@
+import Card from './Card';
+export default Card;

packages/card/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../package.tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "dist"
+  },
+  "include": ["src/**/*"]
+}