From 8660c2b652033c6fd784ad06686c8b1867eadef2 Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 1 Jun 2020 17:20:10 +0200 Subject: [PATCH 1/4] fix(package): remove cache folder on start --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 743fe022..71515708 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ ], "main": "dist/index.js", "scripts": { - "start": "docz dev", + "start": "rm -rf .docz && docz dev", "build": "rm -rf dist && tsc --project tsconfig-build.json && yarn copy:assets", "test": "jest --detectOpenHandles --watchAll", "document": "docz build", From d4106f82848926b682b38b74a4c9c076d2d09c8b Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 1 Jun 2020 17:48:47 +0200 Subject: [PATCH 2/4] fix(input): remove useState import --- src/components/Input/Input.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Input/Input.mdx b/src/components/Input/Input.mdx index 9edc3bd6..fb42a8ea 100644 --- a/src/components/Input/Input.mdx +++ b/src/components/Input/Input.mdx @@ -4,7 +4,6 @@ menu: Components route: /input --- -import { useState } from 'react'; import { Playground, Props } from 'docz'; import { Input } from '../../index.ts' import styles from './docAssets/docs.module.css'; @@ -66,7 +65,7 @@ A Input can be used to let the user insert text using key strokes. A crucial for {() => { - const [serialCode, setSerialCode] = useState('AAAA-BBBB-CCCC-DDDD'); + const [serialCode, setSerialCode] = React.useState('AAAA-BBBB-CCCC-DDDD'); const formattedSerialCode = ( serialCode .split('-') From 5f53577faa0addbb381cdcb37b561dee50ab1907 Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 1 Jun 2020 18:11:41 +0200 Subject: [PATCH 3/4] fix(icon): remove specifity from svg global styles --- src/index.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 62db793b..8e405d98 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,9 @@ @import './theme.css'; -svg[viewBox='0 0 24 24'][stroke-linejoin='round'][stroke-linecap='round'] { +/* Multiple issues open to set the default svg size */ +/* https://github.com/feathericons/react-feather/pull/62 */ +/* Remove this when a better solution is available */ +svg[viewBox='0 0 24 24'] { width: var(--font-size); height: var(--font-size); } From fd99886cfd55fcb7ba69ecc157d981b6ee596407 Mon Sep 17 00:00:00 2001 From: Robin Wijnant Date: Mon, 1 Jun 2020 18:11:55 +0200 Subject: [PATCH 4/4] feat(alert): add alert component --- src/components/Alert/Alert.mdx | 24 ++++++++++ src/components/Alert/Alert.module.css | 18 ++++++++ src/components/Alert/Alert.test.tsx | 32 +++++++++++++ src/components/Alert/Alert.tsx | 25 +++++++++++ .../Alert/__snapshots__/Alert.test.tsx.snap | 45 +++++++++++++++++++ src/index.ts | 1 + 6 files changed, 145 insertions(+) create mode 100644 src/components/Alert/Alert.mdx create mode 100644 src/components/Alert/Alert.module.css create mode 100644 src/components/Alert/Alert.test.tsx create mode 100644 src/components/Alert/Alert.tsx create mode 100644 src/components/Alert/__snapshots__/Alert.test.tsx.snap diff --git a/src/components/Alert/Alert.mdx b/src/components/Alert/Alert.mdx new file mode 100644 index 00000000..dd95d0ac --- /dev/null +++ b/src/components/Alert/Alert.mdx @@ -0,0 +1,24 @@ +--- +name: Alert +menu: Components +route: /alert +--- + +import { Playground, Props } from 'docz'; +import { Alert } from '../..'; + +# Alert + +Alerts allow you to display error messages relevant to an entire form or application. + +## Examples + +### Basic usage + + + + + +## API + + diff --git a/src/components/Alert/Alert.module.css b/src/components/Alert/Alert.module.css new file mode 100644 index 00000000..742de4cf --- /dev/null +++ b/src/components/Alert/Alert.module.css @@ -0,0 +1,18 @@ +.alert { + padding: 10px 18px; + background-color: var(--color-error-light); + display: flex; + align-items: center; + border-radius: var(--border-radius-small); +} + +.message { + display: inline-block; +} + +svg.icon { + margin-right: 10px; + color: var(--color-error); + height: 16px; + width: 16px; +} diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx new file mode 100644 index 00000000..fa8cde1b --- /dev/null +++ b/src/components/Alert/Alert.test.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import Alert from './Alert'; + +describe('Input', () => { + const defaultProps = { + message: 'Something went wrong.', + }; + + test('default snapshot', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); + }); + + test('the message should be rendered', () => { + const { queryByText } = render(); + const alertElement = queryByText(/Something went wrong./); + expect(alertElement).not.toBe(null); + }); + + test('className prop', () => { + const className = 'center'; + const { getByText } = render(); + const alertElement = getByText(/Something went wrong./).parentElement!; + + const renderedClassNames = alertElement.className.split(' '); + expect(renderedClassNames).toContain(className); + // className in prop should be the last in the row + expect(renderedClassNames.indexOf(className)).toBe(renderedClassNames.length - 1); + }); +}); diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx new file mode 100644 index 00000000..eb6f799a --- /dev/null +++ b/src/components/Alert/Alert.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { AlertCircle } from 'react-feather'; +import classNames from 'classnames'; + +import cssReset from '../../css-reset.module.css'; +import styles from './Alert.module.css'; + +interface Props { + intent?: 'error'; + message: string; + className?: string; +} + +const Alert: React.FC = ({ intent = 'error', message, className }: Props) => { + const mergedClassNames = classNames(cssReset.ventura, styles.alert, className); + + return ( +
+ {intent === 'error' && } + {message} +
+ ); +}; + +export default Alert; diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap new file mode 100644 index 00000000..e09d2363 --- /dev/null +++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Input default snapshot 1`] = ` + +
+ + + + + + + Something went wrong. + +
+ +`; diff --git a/src/index.ts b/src/index.ts index 634f4958..44ae0b74 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,6 @@ import './index.css'; +export { default as Alert } from './components/Alert/Alert'; export { default as Button } from './components/Button/Button'; export { default as Input } from './components/Input/Input'; export { default as Radio } from './components/Radio/Radio';