From f3764ccefa5472a613280d72f2745f2d6ef33a96 Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 7 Aug 2019 14:12:05 +0100 Subject: [PATCH 1/3] 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(); + }); + }); +}); From 6dceb9ce54cb59403177e5ac9044fa0576ff9f7c Mon Sep 17 00:00:00 2001 From: sarah Date: Wed, 7 Aug 2019 14:38:10 +0100 Subject: [PATCH 2/3] feat: Add some basic Card styling. A little brute-forcey right now, but we'll correct that. --- src/components/ui/Card/README.md | 18 ++++++++++++++++-- src/components/ui/Card/index.js | 30 +++++++++++++++++++++++++++--- 2 files changed, 43 insertions(+), 5 deletions(-) diff --git a/src/components/ui/Card/README.md b/src/components/ui/Card/README.md index c58229fd..4a3708ff 100644 --- a/src/components/ui/Card/README.md +++ b/src/components/ui/Card/README.md @@ -1,12 +1,26 @@ 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'; +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. + The Card can either have a title attribute, or you can pass it a heading. Not sure which is the best approach here. diff --git a/src/components/ui/Card/index.js b/src/components/ui/Card/index.js index 59ef8a2e..28e04ab5 100644 --- a/src/components/ui/Card/index.js +++ b/src/components/ui/Card/index.js @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import PropTypes from 'prop-types'; import React, { forwardRef } from 'react'; -import { headingSmall, toUnits } from 'styles'; +import { heading, body, interfaceUI, toUnits } from 'styles'; import { useTheme } from 'themes'; export const Card = (props) => { @@ -14,9 +14,33 @@ export const Card = (props) => {
From 0aec25142cc8a30e31e7be593ed7f7cb227ebd04 Mon Sep 17 00:00:00 2001 From: "Matthew Riley MacPherson (tofumatt)" Date: Thu, 22 Aug 2019 16:48:23 -0400 Subject: [PATCH 3/3] fix: Card tests and README --- src/components/index.js | 1 + src/components/ui/Card/README.md | 45 ++++++++++++++++--- .../ui/Card/__snapshots__/index.test.js.snap | 45 +++++++++++++++++++ src/components/ui/Card/index.js | 17 ++++--- .../Heading/__snapshots__/index.test.js.snap | 6 +-- src/components/ui/Heading/index.js | 12 ++++- .../ui/List/__snapshots__/index.test.js.snap | 2 +- .../ui/Tabs/__snapshots__/Tab.test.js.snap | 2 +- .../ui/Tabs/__snapshots__/index.test.js.snap | 6 +-- 9 files changed, 113 insertions(+), 23 deletions(-) create mode 100644 src/components/ui/Card/__snapshots__/index.test.js.snap 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 index 4a3708ff..d0be4a01 100644 --- a/src/components/ui/Card/README.md +++ b/src/components/ui/Card/README.md @@ -10,7 +10,6 @@ import { Paragraph, Button, Heading, Tags, Icon } from '@octopusthink/nautilus'; The Card can either have a title attribute, or you can pass it a heading. Not sure which is the best approach here. - @@ -22,26 +21,62 @@ 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. - ``` - By default, cards use a landscape orientation, but can also be swapped around. All content is optional. + +```jsx +import { Paragraph } from '@octopusthink/nautilus'; + + + + 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. +```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. + + 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 index 28e04ab5..5eca3b4f 100644 --- a/src/components/ui/Card/index.js +++ b/src/components/ui/Card/index.js @@ -1,8 +1,8 @@ import { css } from '@emotion/core'; -import styled from '@emotion/styled'; import PropTypes from 'prop-types'; -import React, { forwardRef } from 'react'; +import React from 'react'; +import { headingClassNameForLevel } from 'components/ui/Heading'; import { heading, body, interfaceUI, toUnits } from 'styles'; import { useTheme } from 'themes'; @@ -19,13 +19,12 @@ export const Card = (props) => { padding: ${toUnits(theme.spacing.padding.large)}; margin-bottom: ${toUnits(theme.spacing.margin.medium)}; - /* TODO: All headings inside of cards should use the same styling, regardless of level. Let's do this in a more elegant way. */ - h1, - h2, - h3, - h4, - h5, - h6 { + .${headingClassNameForLevel(1)}, + .${headingClassNameForLevel(2)}, + .${headingClassNameForLevel(3)}, + .${headingClassNameForLevel(4)}, + .${headingClassNameForLevel(5)}, + .${headingClassNameForLevel(6)} { ${heading.small(theme)}; color: ${theme.colors.neutral.grey800}; } 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