feat(Card): Add Card component to storybook (#676)

* feat(Card): Add Card component to storybook

* feat(Card): Add Card documentation to storybook

* test(Card): Add test for Card component

* test(DatePicker): Update snapshot

src/Card/Body/index.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+/**
+ * Body
+ *
+ * This component is in charge of display
+ * the body of Card component
+ *
+ * @return {jsx}
+ */
+const Body = styled.div`
+  flex: 1 1 0;
+  overflow-y: auto;
+`;
+
+export default Body;

src/Card/Footer/index.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { transparentize } from 'polished';
+
+/**
+ * Footer
+ *
+ * This component is in charge of display
+ * the footer of Card component
+ *
+ *
+ * @return {jsx}
+ */
+const Footer = styled.div`
+  box-shadow: 0 -1px 2px 0 ${({ theme: { palette } }) => transparentize(0.96, palette.black)};
+  border-top: solid 1px ${({ theme: { palette } }) => palette.veryLightBlue};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 4.9rem;
+  padding: 0 2rem;
+`;
+
+export default Footer;

src/Card/Header/index.js

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+
+/**
+ * Header
+ *
+ * This component is in charge of display
+ * the header of Card component
+ *
+ * @param {boolean} small - change header size
+ *
+ * @return {jsx}
+ */
+const Header = styled.div`
+  border-bottom: solid 1px ${({ theme: { palette } }) => palette.veryLightBlue};
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  height: 7.4rem;
+  padding: 0 3rem;
+
+  ${({ small }) =>
+    small &&
+    css`
+      height: 6rem;
+      padding: 0 2rem;
+    `}
+`;
+
+/**
+ * PropTypes Validation
+ */
+const { bool } = PropTypes;
+Header.propTypes = {
+  small: bool,
+};
+
+/**
+ * Default props
+ */
+Header.defaultProps = {
+  small: false,
+};
+
+export default Header;

src/Card/README.md

@@ -0,0 +1,43 @@
+# Card
+
+### Usage
+
+```jsx
+import { Card } from '@tillersystems/stardust';
+```
+
+<!-- STORY -->
+
+### Card properties
+
+- `width` - define the width of the card, that can be any size units (ex: "100px", "10rem", "100%" ...)
+- `height` - define the height of the card, that can be any size units (ex: "100px", "10rem", "100%" ...)
+
+| propName | propType | defaultValue | isRequired |
+| -------- | :------: | :----------: | :--------: |
+| `width`  | `string` |    `auto`    |     -      |
+| `height` | `string` |    `auto`    |     -      |
+
+### Card.Header properties
+
+- `small` - change header size
+
+| propName | propType  | defaultValue | isRequired |
+| -------- | :-------: | :----------: | :--------: |
+| `small`  | `boolean` |   `false`    |     -      |
+
+### Example
+
+```jsx
+import { Card } from '@tillersystems/stardust';
+
+render() {
+  return (
+    <Card height="350px" width="350px">
+      {isHeader && <Card.Header small>Header</Card.Header>}
+      <Card.Body>Hey, this is my content!</Card.Body>
+      {isFooter && <Card.Footer>Footer</Card.Footer>}
+    </Card>
+  )
+}
+```

src/Card/__stories__/Card.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+import Card from '..';
+import CardReadme from '../README.md';
+
+storiesOf('Card', module)
+  .addDecorator(withKnobs)
+  .addParameters({
+    readme: {
+      // Show readme before story
+      content: CardReadme,
+    },
+  })
+  .add('with properties', () => {
+    const hasHeader = boolean('With Header', true, 'Layout');
+    const hasFooter = boolean('With Footer', true, 'Layout');
+    const isSmallHeader = boolean('Is header small', true, 'Layout');
+    return (
+      <div>
+        <Card height="350px" width="350px">
+          {hasHeader && <Card.Header small={isSmallHeader}>Header</Card.Header>}
+          <Card.Body>Hey, this is my content!</Card.Body>
+          {hasFooter && <Card.Footer>Footer</Card.Footer>}
+        </Card>
+      </div>
+    );
+  });

src/Card/__test__/Card.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import Card from '..';
+
+describe('Card', () => {
+  test('should render without a problem', () => {
+    const { container } = render(<Card />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('should have a body content', () => {
+    const bodyText = 'Hey, this is my content!';
+
+    const { getByText } = render(
+      <Card>
+        <Card.Body>{bodyText}</Card.Body>
+      </Card>,
+    );
+
+    const bodyNode = getByText(bodyText);
+
+    expect(bodyNode).toBeInTheDocument();
+  });
+
+  test('should have a header content', () => {
+    const headerText = 'Header';
+
+    const { getByText } = render(
+      <Card>
+        <Card.Header>{headerText}</Card.Header>
+        <Card.Body>Hey, this is my content!</Card.Body>
+      </Card>,
+    );
+
+    const headerNode = getByText(headerText);
+
+    expect(headerNode).toBeInTheDocument();
+  });
+
+  test('should have a footer content', () => {
+    const footerText = 'Footer';
+
+    const { getByText } = render(
+      <Card>
+        <Card.Header>Header</Card.Header>
+        <Card.Body>Hey, this is my content!</Card.Body>
+        <Card.Footer>{footerText}</Card.Footer>
+      </Card>,
+    );
+
+    const footerNode = getByText(footerText);
+
+    expect(footerNode).toBeInTheDocument();
+  });
+
+  test('should have a small header', () => {
+    const headerText = 'Header';
+
+    const { getByText } = render(
+      <Card>
+        <Card.Header small>{headerText}</Card.Header>
+        <Card.Body>Hey, this is my content!</Card.Body>
+      </Card>,
+    );
+
+    const headerNode = getByText(headerText);
+
+    expect(headerNode).toHaveStyleRule('padding', '0 2rem');
+  });
+});

src/Card/__test__/__snapshots__/Card.test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card should render without a problem 1`] = `
+.c0 {
+  width: auto;
+  height: auto;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04);
+  border: solid 1px hsl(220,27%,94%);
+  background-color: hsl(0,100%,100%);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+<div
+  class="c0"
+  height="auto"
+  width="auto"
+/>
+`;

src/Card/index.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { transparentize } from 'polished';
+
+import Header from './Header';
+import Body from './Body';
+import Footer from './Footer';
+
+/**
+ * Card
+ *
+ * This component is in charge of display
+ * the Card component
+ *
+ * @param {string} [width=auto] - define the width of the card, that can be any size units (ex: "100px", "10rem", "100%" ...)
+ * @param {string} [height=auto] - define the height of the card, that can be any size units (ex: "100px", "10rem", "100%" ...)
+ *
+ * @return {jsx}
+ */
+const Card = styled.div`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  border-radius: 4px;
+  box-shadow: 0 1px 3px 0 ${({ theme: { palette } }) => transparentize(0.96, palette.black)};
+  border: solid 1px ${({ theme: { palette } }) => palette.veryLightBlue};
+  background-color: ${({ theme: { palette } }) => palette.white};
+
+  display: flex;
+  flex-direction: column;
+
+  overflow: hidden;
+`;
+
+Card.Header = Header;
+Card.Body = Body;
+Card.Footer = Footer;
+
+/**
+ * PropTypes Validation
+ */
+const { string } = PropTypes;
+Card.propTypes = {
+  height: string,
+  width: string,
+};
+
+/**
+ * Default props
+ */
+Card.defaultProps = {
+  height: 'auto',
+  width: 'auto',
+};
+
+export default Card;