From f3764ccefa5472a613280d72f2745f2d6ef33a96 Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 7 Aug 2019 14:12:05 +0100 Subject: [PATCH] feat: Add a barebones Card component. Closes #67. --- src/components/ui/Card/README.md | 33 +++++++++++++++++++++++ src/components/ui/Card/index.js | 39 ++++++++++++++++++++++++++++ src/components/ui/Card/index.test.js | 37 ++++++++++++++++++++++++++ 3 files changed, 109 insertions(+) create mode 100644 src/components/ui/Card/README.md create mode 100644 src/components/ui/Card/index.js create mode 100644 src/components/ui/Card/index.test.js diff --git a/src/components/ui/Card/README.md b/src/components/ui/Card/README.md new file mode 100644 index 00000000..c58229fd --- /dev/null +++ b/src/components/ui/Card/README.md @@ -0,0 +1,33 @@ +A card is used to represent a descrete and self-contained piece of data, typically as part of a feed or series of related datum. + +```jsx +import { Paragraph, Button, Heading, Tags } from '@octopusthink/nautilus'; + + + + Cards should always have a title + The Card can either have a title attribute, or you can pass it a heading. Not sure which is the best approach here. + + + +``` + By default, cards use a landscape orientation, but can also be swapped around. All content is optional. + + + An experimental project designed to vastly simplify and streamline the WordPress site building process for small business owners, by using technology to automate visual design decisions. + + + + + + Fish & Chips & Vinegar + Places I like to visit + + + By default, cards use a landscape orientation, but can also be swapped around. All content is optional. + + + + + + diff --git a/src/components/ui/Card/index.js b/src/components/ui/Card/index.js new file mode 100644 index 00000000..59ef8a2e --- /dev/null +++ b/src/components/ui/Card/index.js @@ -0,0 +1,39 @@ +import { css } from '@emotion/core'; +import styled from '@emotion/styled'; +import PropTypes from 'prop-types'; +import React, { forwardRef } from 'react'; + +import { headingSmall, toUnits } from 'styles'; +import { useTheme } from 'themes'; + +export const Card = (props) => { + const { children, ...otherProps } = props; + const theme = useTheme(); + + return ( +
+ {children} +
+ ); +}; + +Card.defaultProps = { + children: undefined, +}; + +Card.propTypes = { + /** @ignore */ + children: PropTypes.node, +}; + +export const { defaultProps, propTypes } = Card; + +export default Card; diff --git a/src/components/ui/Card/index.test.js b/src/components/ui/Card/index.test.js new file mode 100644 index 00000000..84843738 --- /dev/null +++ b/src/components/ui/Card/index.test.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { axe, render } from 'utils/testing'; + +import Card from '.'; + +describe('Card', () => { + it('should render a
', () => { + const { container } = render(My Account); + + expect(container.firstChild.tagName).toEqual('DIV'); + }); + + it('should output its children', () => { + const { getByTestId } = render( + +
+ , + ); + + expect(getByTestId('child')).toBeDefined(); + }); + + it('should output card CSS', () => { + const { container } = render(My Blog Posts); + + expect(container.firstChild).toMatchSnapshot(); + }); + + describe('accessibility', () => { + it('should pass aXe tests', async () => { + const { container } = render(My Blog Posts); + + expect(await axe(container.innerHTML)).toHaveNoViolations(); + }); + }); +});