From 7fe0233afa12bf804f3a0a7f9868bb94f235fc19 Mon Sep 17 00:00:00 2001 From: sarah Date: Fri, 19 Jul 2019 01:51:40 +0100 Subject: [PATCH 01/24] feat: Add a barebones Tag component. Closes #53. --- src/components/index.js | 1 + src/components/ui/Tag/README.md | 13 +++++ .../ui/Tag/__snapshots__/index.test.js.snap | 27 +++++++++ src/components/ui/Tag/index.js | 46 +++++++++++++++ src/components/ui/Tag/index.test.js | 56 +++++++++++++++++++ src/styles/typeTokens.js | 4 +- 6 files changed, 145 insertions(+), 2 deletions(-) create mode 100644 src/components/ui/Tag/README.md create mode 100644 src/components/ui/Tag/__snapshots__/index.test.js.snap create mode 100644 src/components/ui/Tag/index.js create mode 100644 src/components/ui/Tag/index.test.js diff --git a/src/components/index.js b/src/components/index.js index f7b9f91a..d0f65c97 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -11,4 +11,5 @@ export { default as List } from './ui/List'; export { default as PageTitle } from './ui/PageTitle'; export { default as Paragraph } from './ui/Paragraph'; export { default as Tabs } from './ui/Tabs'; +export { default as Tag } from './ui/Tag'; export { default as TextField } from './ui/TextField'; diff --git a/src/components/ui/Tag/README.md b/src/components/ui/Tag/README.md new file mode 100644 index 00000000..a9a92009 --- /dev/null +++ b/src/components/ui/Tag/README.md @@ -0,0 +1,13 @@ +`` is used to mark a short span of text within body copy as important. + +```jsx +import { Heading, Paragraph } from '@octopusthink/nautilus'; + + + Wonder Women + Once upon a time there were a whole group of lady-types who lived in a beautiful paradise-land called ... well, I forget but it was really pretty and just chock full of badass ladies. + AmazonSuperheroLadies who lunch + + + +``` diff --git a/src/components/ui/Tag/__snapshots__/index.test.js.snap b/src/components/ui/Tag/__snapshots__/index.test.js.snap new file mode 100644 index 00000000..608395a8 --- /dev/null +++ b/src/components/ui/Tag/__snapshots__/index.test.js.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tag should match styles 1`] = ` +.emotion-0 { + font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif; + font-weight: 700; + font-size: 1.5rem; + line-height: 1.3333333333333333; + -webkit-letter-spacing: 0.05em; + -moz-letter-spacing: 0.05em; + -ms-letter-spacing: 0.05em; + letter-spacing: 0.05em; + text-transform: uppercase; + background: #cd2f83; + color: #f8f9fa; + margin: 0 0.4rem 0.4rem 0; + padding: 0.4rem 0.8rem; +} + +
+ + hello + +
+`; diff --git a/src/components/ui/Tag/index.js b/src/components/ui/Tag/index.js new file mode 100644 index 00000000..ec76ebb5 --- /dev/null +++ b/src/components/ui/Tag/index.js @@ -0,0 +1,46 @@ +import { css } from '@emotion/core'; +import styled from '@emotion/styled'; +import PropTypes from 'prop-types'; +import React, { forwardRef } from 'react'; + +import { Icon } from 'components/ui/Icon'; +import { metadata, toUnits } from 'styles'; + +export const Tag = forwardRef((props, ref) => { + const { children, ...otherProps } = props; + + return ( + + {children} + + ); +}); + +export const styles = (props) => { + const { theme } = props; + + return css` + ${metadata.small(theme)}; + background: ${theme.colors.accent.primary}; + color: ${theme.colors.text.inverse}; + margin: 0 ${toUnits(theme.spacing.padding.xSmall)} + ${toUnits(theme.spacing.padding.xSmall)} 0; + padding: ${toUnits(theme.spacing.padding.xSmall)} + ${toUnits(theme.spacing.padding.small)}; + `; +}; + +Tag.defaultProps = { + children: undefined, +}; + +Tag.propTypes = { + /** @ignore */ + children: PropTypes.node, +}; + +export const { defaultProps, propTypes } = Tag; + +Tag.displayName = 'Tag'; + +export default styled(Tag)(styles); diff --git a/src/components/ui/Tag/index.test.js b/src/components/ui/Tag/index.test.js new file mode 100644 index 00000000..5250ebe6 --- /dev/null +++ b/src/components/ui/Tag/index.test.js @@ -0,0 +1,56 @@ +import React, { createRef } from 'react'; + +import { axe, render } from 'utils/testing'; + +import Tag from '.'; + +describe('Tag', () => { + it('should render a tag', () => { + const { container } = render(Hello); + + expect(container.firstChild.tagName).toEqual('SPAN'); + }); + + it('should output its children', () => { + const { getByTestId } = render( + + + , + ); + + expect(getByTestId('child')).toBeDefined(); + }); + + it('should accept and pass through other props', () => { + const { getByTestId } = render( + + hello + , + ); + + expect(getByTestId('myText').classList).toContain('custom-class'); + }); + + it('should match styles', () => { + const { container } = render(hello); + + expect(container).toMatchSnapshot(); + }); + + it('should forward refs', () => { + const ref = createRef(); + + render(Bold text); + + expect(ref.current).not.toBeNull(); + expect(ref.current.tagName).toEqual('SPAN'); + }); + + describe('accessibility', () => { + it('should pass aXe tests', async () => { + const { container } = render(hello); + + expect(await axe(container.innerHTML)).toHaveNoViolations(); + }); + }); +}); diff --git a/src/styles/typeTokens.js b/src/styles/typeTokens.js index 428e103f..ff3363a6 100644 --- a/src/styles/typeTokens.js +++ b/src/styles/typeTokens.js @@ -137,7 +137,7 @@ const metadataSmall = (theme) => { fontWeight: theme.typography.fontWeights.interfaceUIBold, ...typeAttributes({ theme, - sizeNumber: -0.5, + sizeNumber: -1.5, fontType: FONT_TYPES.interfaceUI, }), ...smallCaps(), @@ -150,7 +150,7 @@ const metadataLarge = (theme) => { fontWeight: theme.typography.fontWeights.interfaceUIBold, ...typeAttributes({ theme, - sizeNumber: 1, + sizeNumber: 0, fontType: FONT_TYPES.interfaceUI, }), ...smallCaps(), From 775e437db1055d0e75d3a67f9af9219ad86f3b9d Mon Sep 17 00:00:00 2001 From: sarah Date: Fri, 19 Jul 2019 01:57:06 +0100 Subject: [PATCH 02/24] fix: Don't attempt to output an Icon if none is specified. --- src/components/ui/Button/index.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/ui/Button/index.js b/src/components/ui/Button/index.js index 15789dd6..ff8b7ffc 100644 --- a/src/components/ui/Button/index.js +++ b/src/components/ui/Button/index.js @@ -72,13 +72,15 @@ export const Button = forwardRef((props, ref) => { ref={ref} {...otherProps} > - + {iconName && ( + + )} {children} ); From 9ba1795e65b08e1849f5cabe01f6a6b27000154d Mon Sep 17 00:00:00 2001 From: sarah Date: Fri, 19 Jul 2019 01:57:32 +0100 Subject: [PATCH 03/24] fix: Use interface font tokens in menu. --- styleguide/components/TableOfContents/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styleguide/components/TableOfContents/index.js b/styleguide/components/TableOfContents/index.js index 89a7901d..5bb8328e 100644 --- a/styleguide/components/TableOfContents/index.js +++ b/styleguide/components/TableOfContents/index.js @@ -3,14 +3,14 @@ import PropTypes from 'prop-types'; import React from 'react'; import theme from 'styleguide/theme'; -import { metadata, toUnits } from 'styles'; +import { interfaceUI, toUnits } from 'styles'; import { Icon } from 'components/ui/Icon'; export function TableOfContents({ children, onSearchTermChange, searchTerm }) { return (