diff --git a/src/components/index.js b/src/components/index.js index 1a7007bb..ef2280e8 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,6 +4,7 @@ export { default as Emphasis } from './inline/Emphasis'; export { default as Strong } from './inline/Strong'; export { default as Button } from './ui/Button'; +export { default as Card } from './ui/Card'; export { default as Heading } from './ui/Heading'; export { default as Icon } from './ui/Icon'; export { default as Link } from './ui/Link'; diff --git a/src/components/ui/Card/README.md b/src/components/ui/Card/README.md new file mode 100644 index 00000000..d0be4a01 --- /dev/null +++ b/src/components/ui/Card/README.md @@ -0,0 +1,82 @@ +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, Icon } 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. + + + + + + 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. + + + + 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. + + +``` + +```jsx +import { Paragraph } from '@octopusthink/nautilus'; + + + + By default, cards use a landscape orientation, but can also be swapped around. + All content is optional. + + +``` + +```jsx +import { Paragraph } from '@octopusthink/nautilus'; + + + + Dis convallis taciti molestie cum etiam mollis facilisis ligula ultricies, accumsan mattis phasellus malesuada in sollicitudin pulvinar quis, turpis pretium purus mi enim suspendisse nisl dolor. Egestas diam mollis bibendum integer est volutpat, quisque posuere cras eu. Eros enim maecenas tellus semper torquent platea pulvinar vulputate fermentum laoreet consequat vel purus, vitae rhoncus est sollicitudin lacus pretium id montes blandit phasellus nullam cras. + + +``` + +```jsx +import { Paragraph, Button, Heading, Tags, Icon } from '@octopusthink/nautilus'; + + + {/* + + + 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/__snapshots__/index.test.js.snap b/src/components/ui/Card/__snapshots__/index.test.js.snap new file mode 100644 index 00000000..2b36e23c --- /dev/null +++ b/src/components/ui/Card/__snapshots__/index.test.js.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card should output card CSS 1`] = ` +.emotion-0 { + background: white; + border: 1px solid #f8f9fa; + box-shadow: 0px 4px 8px rgba(0,0,0,0.125); + padding: 2.4rem; + margin-bottom: 3.2rem; +} + +.emotion-0 .Nautilus-Heading-1, +.emotion-0 .Nautilus-Heading-2, +.emotion-0 .Nautilus-Heading-3, +.emotion-0 .Nautilus-Heading-4, +.emotion-0 .Nautilus-Heading-5, +.emotion-0 .Nautilus-Heading-6 { + font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif; + font-weight: 600; + font-size: 2.7rem; + line-height: 1.3333333333333333; + color: #666c76; +} + +.emotion-0 p { + font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif; + font-weight: 400; + font-size: 1.7rem; + line-height: 1.6470588235294117; +} + +.emotion-0 button { + font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif; + font-weight: 500; + font-size: 1.7rem; + line-height: 1.411764705882353; + padding: 0.8rem 1.2rem; +} + +
+ My Blog Posts +
+`; diff --git a/src/components/ui/Card/index.js b/src/components/ui/Card/index.js new file mode 100644 index 00000000..5eca3b4f --- /dev/null +++ b/src/components/ui/Card/index.js @@ -0,0 +1,62 @@ +import { css } from '@emotion/core'; +import PropTypes from 'prop-types'; +import React from 'react'; + +import { headingClassNameForLevel } from 'components/ui/Heading'; +import { heading, body, interfaceUI, 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(); + }); + }); +}); diff --git a/src/components/ui/Heading/__snapshots__/index.test.js.snap b/src/components/ui/Heading/__snapshots__/index.test.js.snap index 3339a17e..09b3a042 100644 --- a/src/components/ui/Heading/__snapshots__/index.test.js.snap +++ b/src/components/ui/Heading/__snapshots__/index.test.js.snap @@ -16,7 +16,7 @@ dl + .emotion-0 { }

Big heading

@@ -38,7 +38,7 @@ dl + .emotion-0 { }

So-so heading

@@ -60,7 +60,7 @@ dl + .emotion-0 { }

Tiny heading

diff --git a/src/components/ui/Heading/index.js b/src/components/ui/Heading/index.js index 13e94503..785a1a8b 100644 --- a/src/components/ui/Heading/index.js +++ b/src/components/ui/Heading/index.js @@ -1,4 +1,5 @@ import { css } from '@emotion/core'; +import classnames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; @@ -11,15 +12,21 @@ const LARGE = 2; const MEDIUM = 3; const SMALL = 4; +const ComponentClassName = 'Nautilus-Heading'; const HeadingLevels = [LARGE, MEDIUM, SMALL]; +export const headingClassNameForLevel = (level) => { + return `${ComponentClassName}-${level}`; +}; + export const Heading = (props) => { const theme = useTheme(); - const { children, level, ...otherProps } = props; + const { children, className, level, ...otherProps } = props; const HeadingElement = `h${level}`; return ( { }; Heading.defaultProps = { + className: undefined, children: undefined, level: 2, }; Heading.propTypes = { + /** @ignore */ + className: PropTypes.string, /** @ignore */ children: PropTypes.node, /** Semantic hierarchy level of the `` element in the markup (ex: `

`). The more semantically important the level, the larger the heading will appear visually; an `

` will be visually styled as "large" while an `

` will be visually small. */ diff --git a/src/components/ui/List/__snapshots__/index.test.js.snap b/src/components/ui/List/__snapshots__/index.test.js.snap index e6f95492..759ef7f9 100644 --- a/src/components/ui/List/__snapshots__/index.test.js.snap +++ b/src/components/ui/List/__snapshots__/index.test.js.snap @@ -37,7 +37,7 @@ dl + .emotion-0 {

diff --git a/src/components/ui/Tabs/__snapshots__/Tab.test.js.snap b/src/components/ui/Tabs/__snapshots__/Tab.test.js.snap index 553dc795..a9685576 100644 --- a/src/components/ui/Tabs/__snapshots__/Tab.test.js.snap +++ b/src/components/ui/Tabs/__snapshots__/Tab.test.js.snap @@ -40,7 +40,7 @@ dl + .emotion-0 { tabindex="-1" >

About

diff --git a/src/components/ui/Tabs/__snapshots__/index.test.js.snap b/src/components/ui/Tabs/__snapshots__/index.test.js.snap index 49b35802..411580ff 100644 --- a/src/components/ui/Tabs/__snapshots__/index.test.js.snap +++ b/src/components/ui/Tabs/__snapshots__/index.test.js.snap @@ -174,7 +174,7 @@ dl + .emotion-4 { tabindex="-1" >

About

@@ -193,7 +193,7 @@ dl + .emotion-4 { tabindex="-1" >

History

@@ -212,7 +212,7 @@ dl + .emotion-4 { tabindex="-1" >

Other