From d58601aa59c4372a609fc47759aec199488d023b Mon Sep 17 00:00:00 2001 From: "Yiming Tan(Michael)" Date: Sun, 28 Oct 2018 15:21:01 +1100 Subject: [PATCH] Add Alert component export Alert component --- src/Alert/Alert.js | 24 ++ src/Alert/Alert.mdx | 46 ++++ src/Alert/__tests__/Alert.test.js | 23 ++ .../__snapshots__/Alert.test.js.snap | 216 ++++++++++++++++++ src/Alert/index.js | 2 + src/Alert/styled.js | 15 ++ .../__snapshots__/Checkbox.test.js.snap | 60 ++++- .../__snapshots__/Radio.test.js.snap | 60 ++++- src/index.js | 1 + src/themes/themes.mdx | 2 + 10 files changed, 429 insertions(+), 20 deletions(-) create mode 100644 src/Alert/Alert.js create mode 100644 src/Alert/Alert.mdx create mode 100644 src/Alert/__tests__/Alert.test.js create mode 100644 src/Alert/__tests__/__snapshots__/Alert.test.js.snap create mode 100644 src/Alert/index.js create mode 100644 src/Alert/styled.js diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js new file mode 100644 index 000000000..810151a3f --- /dev/null +++ b/src/Alert/Alert.js @@ -0,0 +1,24 @@ +// @flow +import React, { type Node } from 'react'; + +import type { Palette } from '../types'; +import _Alert from './styled'; + +type Props = { + className?: string, + children: Node, + palette?: Palette +}; + +const Alert = ({ className, children, palette, ...props }: Props) => ( + <_Alert className={className} palette={palette} {...props}> + {children} + +); + +Alert.defaultProps = { + className: null, + palette: 'default' +}; + +export default Alert; diff --git a/src/Alert/Alert.mdx b/src/Alert/Alert.mdx new file mode 100644 index 000000000..e10341d1f --- /dev/null +++ b/src/Alert/Alert.mdx @@ -0,0 +1,46 @@ +--- +name: Alert +route: /components/alert +menu: Components +--- + +import { Playground, PropsTable } from 'docz'; +import Alert from '../Alert'; +import Spinner from './index'; + +# Alerts + +## Import + +`import { Alert } from 'fannypack'` + +## Basic Usage + + + Alert message + + +## Colors + + + Default + Primary + Secondary + Success + Warning + Danger + + +## Props + + + +## Theming + +### Schema + +```jsx +{ + base: string | Object +} +``` diff --git a/src/Alert/__tests__/Alert.test.js b/src/Alert/__tests__/Alert.test.js new file mode 100644 index 000000000..60704b876 --- /dev/null +++ b/src/Alert/__tests__/Alert.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import render from '../../_utils/tests/render'; +import Alert from '../Alert'; +import 'jest-styled-components'; + +it('renders correctly', () => { + const { container } = render(Alert); + expect(container.firstChild).toMatchSnapshot(); +}); + +it('renders correctly with a custom element', () => { + const { container } = render( + + + + ); + expect(container.firstChild).toMatchSnapshot(); +}); + +it('renders correctly when a palette prop is set', () => { + const { container } = render(Alert); + expect(container.firstChild).toMatchSnapshot(); +}); diff --git a/src/Alert/__tests__/__snapshots__/Alert.test.js.snap b/src/Alert/__tests__/__snapshots__/Alert.test.js.snap new file mode 100644 index 000000000..755731014 --- /dev/null +++ b/src/Alert/__tests__/__snapshots__/Alert.test.js.snap @@ -0,0 +1,216 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +.c1 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: inherit; +} + +.c3 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: #fcfcfc; +} + +.c0 { + box-sizing: border-box; + font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + margin: 0; + padding: 0; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + color: #435a6f; +} + +.c0 *, +.c0 *::before, +.c0 *::after { + box-sizing: inherit; +} + +.c0 *:focus { + outline: 2px solid #586ccf; + outline-offset: 2px; +} + +.c2 { + background-color: #fcfcfc; + border: 1px solid #435a6f; + border-radius: 4px; + color: #435a6f; + padding: 1rem; +} + +
+
+ Alert +
+
+`; + +exports[`renders correctly when a palette prop is set 1`] = ` +.c1 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: inherit; +} + +.c3 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: #112ebb; +} + +.c0 { + box-sizing: border-box; + font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + margin: 0; + padding: 0; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + color: #435a6f; +} + +.c0 *, +.c0 *::before, +.c0 *::after { + box-sizing: inherit; +} + +.c0 *:focus { + outline: 2px solid #586ccf; + outline-offset: 2px; +} + +.c2 { + background-color: #112ebb; + border: 1px solid #112ebb; + border-radius: 4px; + color: white; + padding: 1rem; +} + +
+
+ Alert +
+
+`; + +exports[`renders correctly with a custom element 1`] = ` +.c1 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: inherit; +} + +.c3 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: #fcfcfc; +} + +.c0 { + box-sizing: border-box; + font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + margin: 0; + padding: 0; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + color: #435a6f; +} + +.c0 *, +.c0 *::before, +.c0 *::after { + box-sizing: inherit; +} + +.c0 *:focus { + outline: 2px solid #586ccf; + outline-offset: 2px; +} + +.c2 { + background-color: #fcfcfc; + border: 1px solid #435a6f; + border-radius: 4px; + color: #435a6f; + padding: 1rem; +} + +
+
+ +
+
+`; diff --git a/src/Alert/index.js b/src/Alert/index.js new file mode 100644 index 000000000..fcc5dc3c0 --- /dev/null +++ b/src/Alert/index.js @@ -0,0 +1,2 @@ +export { default as Alert } from './Alert'; +export { default } from './Alert'; diff --git a/src/Alert/styled.js b/src/Alert/styled.js new file mode 100644 index 000000000..cda3422be --- /dev/null +++ b/src/Alert/styled.js @@ -0,0 +1,15 @@ +import styled from 'reakit/styled'; +import { palette, theme } from 'styled-tools'; +import { Box } from '../primitives'; + +export default styled(Box)` + background-color: ${props => palette(props.palette)(props)}; + border: 1px solid ${props => (props.palette === 'default' ? palette('text')(props) : palette(props.palette)(props))}; + border-radius: 4px; + color: ${props => palette(`${props.palette}Inverted`)(props)}; + padding: 1rem; + + & { + ${theme('Alert.base')}; + } +`; diff --git a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap index 303ca1659..2385e8058 100644 --- a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +++ b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -152,7 +152,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -174,6 +174,10 @@ samp.c8 { width: 6px; } +.c4[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -362,7 +366,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -384,6 +388,10 @@ samp.c8 { width: 6px; } +.c4[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -568,7 +576,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -590,6 +598,10 @@ samp.c8 { width: 6px; } +.c10[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -610,7 +622,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -636,6 +648,10 @@ samp.c8 { width: 6px; } +.c4[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -819,7 +835,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -841,6 +857,10 @@ samp.c8 { width: 6px; } +.c10[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -861,7 +881,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -887,6 +907,10 @@ samp.c8 { width: 6px; } +.c4[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -1070,7 +1094,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1092,6 +1116,10 @@ samp.c8 { width: 6px; } +.c10[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -1112,7 +1140,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1138,6 +1166,10 @@ samp.c8 { width: 6px; } +.c4[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -1321,7 +1353,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1343,6 +1375,10 @@ samp.c8 { width: 6px; } +.c10[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -1363,7 +1399,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1389,6 +1425,10 @@ samp.c8 { width: 6px; } +.c4[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; diff --git a/src/Radio/__tests__/__snapshots__/Radio.test.js.snap b/src/Radio/__tests__/__snapshots__/Radio.test.js.snap index 551a0e9d5..04e74d1f8 100644 --- a/src/Radio/__tests__/__snapshots__/Radio.test.js.snap +++ b/src/Radio/__tests__/__snapshots__/Radio.test.js.snap @@ -152,7 +152,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -170,6 +170,10 @@ samp.c8 { width: 8px; } +.c4[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -358,7 +362,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -376,6 +380,10 @@ samp.c8 { width: 8px; } +.c4[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -560,7 +568,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -578,6 +586,10 @@ samp.c8 { width: 8px; } +.c10[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -598,7 +610,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -620,6 +632,10 @@ samp.c8 { width: 8px; } +.c4[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -803,7 +819,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -821,6 +837,10 @@ samp.c8 { width: 8px; } +.c10[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -841,7 +861,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -863,6 +883,10 @@ samp.c8 { width: 8px; } +.c4[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -1046,7 +1070,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1064,6 +1088,10 @@ samp.c8 { width: 8px; } +.c10[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -1084,7 +1112,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1106,6 +1134,10 @@ samp.c8 { width: 8px; } +.c4[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; @@ -1289,7 +1321,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c10:checked + .c6 { +.c10:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1307,6 +1339,10 @@ samp.c8 { width: 8px; } +.c10[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -1327,7 +1363,7 @@ samp.c8 { box-shadow: #586ccf 0px 0px 0px 1px !important; } -.c4:checked + .c6 { +.c4:not([disabled]):checked + .c6 { border-color: #586ccf; } @@ -1349,6 +1385,10 @@ samp.c8 { width: 8px; } +.c4[disabled]:checked + .c6::before { + background: #9a9a9a; +} + .c2 { display: -webkit-box; display: -webkit-flex; diff --git a/src/index.js b/src/index.js index 64c00ab91..d791879b3 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ export { styled, css } from './styled'; export { defaultTheme } from './themes'; export { ThemeProvider } from './ThemeProvider'; +export { Alert } from './Alert'; export { Blockquote } from './Blockquote'; export { Button } from './Button'; export { Buttons } from './Buttons'; diff --git a/src/themes/themes.mdx b/src/themes/themes.mdx index a87725ddd..2bfe2aaea 100644 --- a/src/themes/themes.mdx +++ b/src/themes/themes.mdx @@ -161,6 +161,7 @@ const App = () => ( fontSizes: FontSizeThemeConfig // Components + Alert: AlertThemeConfig, Blockquote: BlockquoteThemeConfig, Button: ButtonThemeConfig, Code: CodeThemeConfig, @@ -191,6 +192,7 @@ Core: Components: +- [AlertThemeConfig] (/components/alert#theming) - [BlockquoteThemeConfig](/typography/blockquote#theming) - [ButtonThemeConfig](/elements/button#theming) - [CodeThemeConfig](/typography/code#theming)