├── .gitignore ├── .flowconfig ├── src ├── index.js ├── constants │ └── index.js └── components │ ├── Banner │ └── Banner.js │ └── Button │ ├── __test__ │ └── Button.test.js │ └── Button.js ├── .npmignore ├── .editorconfig ├── .storybook └── config.js ├── flow-typed └── npm │ ├── flow-bin_v0.x.x.js │ ├── babel-jest_vx.x.x.js │ ├── babel-preset-flow_vx.x.x.js │ ├── babel-preset-react_vx.x.x.js │ ├── babel-preset-es2015_vx.x.x.js │ ├── babel-preset-stage-0_vx.x.x.js │ ├── rollup-plugin-flow_vx.x.x.js │ ├── rollup-plugin-uglify_vx.x.x.js │ ├── babel-plugin-external-helpers_vx.x.x.js │ ├── rollup_vx.x.x.js │ ├── rollup-watch_vx.x.x.js │ ├── rollup-plugin-node-resolve_vx.x.x.js │ ├── rollup-plugin-babel_vx.x.x.js │ ├── eslint-plugin-jest_vx.x.x.js │ ├── eslint-config-airbnb_vx.x.x.js │ ├── babel-eslint_vx.x.x.js │ ├── rollup-plugin-commonjs_vx.x.x.js │ ├── babel-preset-env_vx.x.x.js │ ├── babel-cli_vx.x.x.js │ ├── uglify-es_vx.x.x.js │ ├── enzyme_v2.3.x.js │ ├── flow-typed_vx.x.x.js │ ├── eslint-plugin-import_vx.x.x.js │ ├── eslint-plugin-flowtype_vx.x.x.js │ ├── jest_v20.x.x.js │ ├── eslint-plugin-react_vx.x.x.js │ └── eslint-plugin-jsx-a11y_vx.x.x.js ├── circle.yml ├── .babelrc ├── stories └── banner.js ├── .eslintrc.json ├── rollup.dev.js ├── LICENSE ├── rollup.prod.js ├── README.md ├── package.json └── CODE_OF_CONDUCT.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .eslintcache 4 | *.log 5 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/styled-components/.* 3 | 4 | [include] 5 | 6 | [libs] 7 | 8 | [options] 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { Button } from './components/Button/Button'; 2 | export { Banner } from './components/Banner/Banner'; 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | flow-typed 3 | yarn.lock 4 | rollup.dev.js 5 | rollup.prod.js 6 | .eslintrc.json 7 | .flowconfig 8 | stories 9 | .storybook 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | indent_size = 4 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | 9 | [*.yml] 10 | indent_style = space 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | function loadStories() { 4 | // require('../stories/button.js'); 5 | require('../stories/banner.js'); 6 | } 7 | 8 | configure(loadStories, module); 9 | -------------------------------------------------------------------------------- /flow-typed/npm/flow-bin_v0.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583 2 | // flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x 3 | 4 | declare module "flow-bin" { 5 | declare module.exports: string; 6 | } 7 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | 2 | machine: 3 | timezone: 4 | America/Chicago 5 | 6 | node: 7 | version: 7.7.0 8 | 9 | dependencies: 10 | cache_directories: 11 | - ~/.cache/yarn 12 | 13 | pre: 14 | - echo "//registry.npmjs.org/:_authToken=$AUTH_TOKEN" >> ~/.npmrc 15 | 16 | override: 17 | - yarn 18 | 19 | test: 20 | override: 21 | - yarn run quality 22 | - yarn run build 23 | 24 | deployment: 25 | release: 26 | tag: /v[0-9]+(\.[0-9]+)*/ 27 | commands: 28 | - yarn run build 29 | - npm publish 30 | -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | // Colors 2 | export const seaSerpent = '#54c1de'; 3 | export const white = '#ffffff'; 4 | export const tealBlue = '#367b8e'; 5 | export const maximumBlue = '#4aa9c4'; 6 | export const queenPink = '#e7d5dd'; 7 | export const rocketMetallic = '#8b7981'; 8 | export const teaGreen = '#ceffc8'; 9 | export const camouflageGreen = '#718c6e'; 10 | export const cornSkin = '#fcf8d9'; 11 | export const nikel = '#737163'; 12 | 13 | // Fonts 14 | export const smallFont = '0.8em'; 15 | export const mediumFont = '1em'; 16 | export const bigFont = '1.2em'; 17 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "node_modules/**" 4 | ], 5 | "env": { 6 | "test": { 7 | "presets": [ 8 | "react", 9 | "flow", 10 | "es2015", 11 | "stage-0" 12 | ] 13 | }, 14 | "development": { 15 | "presets": [ 16 | "react", 17 | "flow", 18 | ["es2015", { "modules": false }], 19 | "stage-0" 20 | ] 21 | }, 22 | "production": { 23 | "presets": [ 24 | "react", 25 | "flow", 26 | ["es2015", { "modules": false }], 27 | "stage-0" 28 | ], 29 | "plugins": [ 30 | "transform-react-jsx" 31 | ] 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /stories/banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { Banner } from '../dist/index'; 4 | 5 | const Wrapper = ({ children }) => ( 6 |
11 | {children} 12 |
13 | ); 14 | 15 | storiesOf('Banner', module) 16 | .add('Success Banner', () => ( 17 | 18 | Success banner 19 | 20 | )) 21 | .add('Warning Banner', () => ( 22 | 23 | Warning banner 24 | 25 | )) 26 | .add('Error Banner', () => ( 27 | 28 | Error banner 29 | 30 | )); 31 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": [ 4 | "airbnb", 5 | "plugin:flowtype/recommended" 6 | ], 7 | "plugins": [ 8 | "react", 9 | "flowtype", 10 | "jsx-a11y", 11 | "import", 12 | "jest" 13 | ], 14 | "rules": { 15 | "indent": ["error", "tab"], 16 | "no-tabs": "off", 17 | "react/jsx-filename-extension": "off", 18 | "react/jsx-indent": ["error", "tab"], 19 | "react/jsx-indent-props": ["error", "tab"], 20 | "react/prop-types": "warn", 21 | "react/require-default-props": "off", 22 | "import/prefer-default-export": "off", 23 | "comma-dangle": "off", 24 | "import/no-extraneous-dependencies": "off", 25 | "import/no-unresolved": ["error", { 26 | "ignore": ["^react$"] 27 | }], 28 | "import/extensions": "off" 29 | }, 30 | "env": { 31 | "jest/globals": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-jest_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: c5f56507f22abc799fee64c0abfe30c0 2 | // flow-typed version: <>/babel-jest_v^20.0.3/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-jest' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-jest' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-jest/build/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-jest/build/index.js' { 31 | declare module.exports: $Exports<'babel-jest/build/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-flow_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: ecc5c7711455066a3b2cda7e62a4361a 2 | // flow-typed version: <>/babel-preset-flow_v^6.23.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-flow' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-flow' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-flow/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-preset-flow/lib/index.js' { 31 | declare module.exports: $Exports<'babel-preset-flow/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-react_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 751f0876db59dedb43ce42d65c6d65c2 2 | // flow-typed version: <>/babel-preset-react_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-react' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-react' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-react/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-preset-react/lib/index.js' { 31 | declare module.exports: $Exports<'babel-preset-react/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-es2015_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 61e55149effe794ae5a90da469a75e3b 2 | // flow-typed version: <>/babel-preset-es2015_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-es2015' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-es2015' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-es2015/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-preset-es2015/lib/index.js' { 31 | declare module.exports: $Exports<'babel-preset-es2015/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-stage-0_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: d7786fcaca18758f7bdd3d94ced55329 2 | // flow-typed version: <>/babel-preset-stage-0_v^6.24.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-stage-0' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-stage-0' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-stage-0/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-preset-stage-0/lib/index.js' { 31 | declare module.exports: $Exports<'babel-preset-stage-0/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/rollup-plugin-flow_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: fe8fad027e732270b73179c53f7fb217 2 | // flow-typed version: <>/rollup-plugin-flow_v^1.1.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'rollup-plugin-flow' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'rollup-plugin-flow' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'rollup-plugin-flow/index' { 29 | declare module.exports: $Exports<'rollup-plugin-flow'>; 30 | } 31 | declare module 'rollup-plugin-flow/index.js' { 32 | declare module.exports: $Exports<'rollup-plugin-flow'>; 33 | } 34 | -------------------------------------------------------------------------------- /rollup.dev.js: -------------------------------------------------------------------------------- 1 | const resolve = require('rollup-plugin-node-resolve'); 2 | const commonjs = require('rollup-plugin-commonjs'); 3 | const babel = require('rollup-plugin-babel'); 4 | const flow = require('rollup-plugin-flow'); 5 | const pkg = require('./package.json'); 6 | 7 | const plugins = [ 8 | resolve(), 9 | commonjs(), 10 | babel({ 11 | exclude: 'node_modules/**', 12 | plugins: ['external-helpers'] 13 | }), 14 | flow() 15 | ]; 16 | 17 | const config = { 18 | banner: `/* react-med-lib version ${pkg.version} */`, 19 | footer: '/* Join our community! https://meetup.com/React-Medellin */', 20 | entry: 'src/index.js', 21 | moduleName: 'ReactMedLib', 22 | targets: [ 23 | { 24 | dest: pkg.main, 25 | format: 'umd', 26 | sourceMap: true 27 | }, 28 | { 29 | dest: pkg.module, 30 | format: 'es', 31 | sourceMap: true 32 | } 33 | ], 34 | external: [ 35 | 'react', 36 | 'styled-components' 37 | ], 38 | globals: { 39 | react: 'React', 40 | 'styled-components': 'styled-components' 41 | }, 42 | plugins 43 | }; 44 | 45 | module.exports = config; 46 | -------------------------------------------------------------------------------- /flow-typed/npm/rollup-plugin-uglify_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 7ca970698b5cb1b1cd45b2130a266f11 2 | // flow-typed version: <>/rollup-plugin-uglify_v^2.0.1/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'rollup-plugin-uglify' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'rollup-plugin-uglify' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'rollup-plugin-uglify/index' { 29 | declare module.exports: $Exports<'rollup-plugin-uglify'>; 30 | } 31 | declare module 'rollup-plugin-uglify/index.js' { 32 | declare module.exports: $Exports<'rollup-plugin-uglify'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-external-helpers_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 304dbfbfb1ef504584b81e4e68eb7eb0 2 | // flow-typed version: <>/babel-plugin-external-helpers_v^6.22.0/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-external-helpers' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-external-helpers' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-external-helpers/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-external-helpers/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-external-helpers/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 React Medellin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /flow-typed/npm/rollup_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: fa42b13b0e6ea2523886387434afacf1 2 | // flow-typed version: <>/rollup_v^0.41.6/flow_v0.47.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'rollup' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'rollup' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'rollup/dist/rollup.browser' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'rollup/dist/rollup.es' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'rollup/dist/rollup' { 34 | declare module.exports: any; 35 | } 36 | 37 | // Filename aliases 38 | declare module 'rollup/dist/rollup.browser.js' { 39 | declare module.exports: $Exports<'rollup/dist/rollup.browser'>; 40 | } 41 | declare module 'rollup/dist/rollup.es.js' { 42 | declare module.exports: $Exports<'rollup/dist/rollup.es'>; 43 | } 44 | declare module 'rollup/dist/rollup.js' { 45 | declare module.exports: $Exports<'rollup/dist/rollup'>; 46 | } 47 | -------------------------------------------------------------------------------- /rollup.prod.js: -------------------------------------------------------------------------------- 1 | const resolve = require('rollup-plugin-node-resolve'); 2 | const commonjs = require('rollup-plugin-commonjs'); 3 | const babel = require('rollup-plugin-babel'); 4 | const uglify = require('rollup-plugin-uglify'); 5 | const flow = require('rollup-plugin-flow'); 6 | const replace = require('rollup-plugin-replace'); 7 | const { minify } = require('uglify-es'); 8 | const pkg = require('./package.json'); 9 | 10 | const plugins = [ 11 | resolve(), 12 | babel({ 13 | exclude: 'node_modules/**', 14 | plugins: ['external-helpers'] 15 | }), 16 | flow(), 17 | replace({ 18 | 'process.env.NODE_ENV': JSON.stringify('production') 19 | }), 20 | commonjs(), 21 | // Since we're using ES modules we need this _hack_ 22 | // https://github.com/TrySound/rollup-plugin-uglify#warning 23 | uglify({}, minify) 24 | ]; 25 | 26 | const config = { 27 | banner: `/* react-med-lib version ${pkg.version} */`, 28 | footer: '/* Join our community! https://meetup.com/React-Medellin */', 29 | entry: 'src/index.js', 30 | moduleName: 'ReactMedLib', 31 | targets: [ 32 | { 33 | dest: pkg.main, 34 | format: 'umd', 35 | sourceMap: true 36 | }, 37 | { 38 | dest: pkg.module, 39 | format: 'es', 40 | sourceMap: true 41 | } 42 | ], 43 | external: [ 44 | 'react', 45 | 'styled-components' 46 | ], 47 | globals: { 48 | react: 'React', 49 | 'styled-components': 'styled-components' 50 | }, 51 | plugins 52 | }; 53 | 54 | module.exports = config; 55 | -------------------------------------------------------------------------------- /src/components/Banner/Banner.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React from 'react'; 4 | // $FlowFixMe: We're waiting on this PR to add flow here. https://github.com/styled-components/styled-components/issues/843 5 | import styled from 'styled-components'; 6 | import { 7 | queenPink, 8 | rocketMetallic, 9 | camouflageGreen, 10 | teaGreen, 11 | mediumFont, 12 | cornSkin, 13 | nikel 14 | } from '../../constants'; 15 | 16 | // Base Banner Styles 17 | const BannerStyles = styled.div` 18 | border-width: 1px; 19 | border-radius: .1em; 20 | padding: 1.5em 3em; 21 | font-size: ${mediumFont}; 22 | text-align: center; 23 | `; 24 | 25 | // Success Banner Styles 26 | const SuccessBanner = BannerStyles.extend` 27 | background: ${teaGreen}; 28 | color: ${camouflageGreen}; 29 | border: 1px solid ${camouflageGreen}; 30 | `; 31 | 32 | // Error Banner Styles 33 | const ErrorBanner = BannerStyles.extend` 34 | background: ${queenPink}; 35 | color: ${rocketMetallic}; 36 | border: 1px solid ${rocketMetallic}; 37 | `; 38 | 39 | // Warning Banner 40 | const WarningBanner = BannerStyles.extend` 41 | background: ${cornSkin}; 42 | color: ${nikel}; 43 | border: 1px solid ${nikel}; 44 | `; 45 | 46 | const bannerType = { 47 | success: SuccessBanner, 48 | warning: WarningBanner, 49 | error: ErrorBanner, 50 | default: SuccessBanner 51 | }; 52 | 53 | 54 | type Props = { 55 | type?: string; 56 | children: React$Element<*>; 57 | }; 58 | 59 | export const Banner = (props: Props) => { 60 | const { type = 'default' } = props; 61 | const BannerType = bannerType[type] || bannerType.default; 62 | 63 | return ( 64 | {props.children} 65 | ); 66 | }; 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Medellín Components Library 2 | ![Build Status](https://circleci.com/gh/react-medellin/components.svg?style=shield&circle-token=:circle-token) 3 | 4 | # What is @react-medellin/components 5 | A set of reusable React components that everyone can use. This project was created mainly to teach how to create a reusable component library to atendees to React Medellín Meetup ([Feel curious? Join us!](https://meetup.com/React-Medellin)) 6 | 7 | # Installation 8 | Firs of all, this library has two peer dependencies: React and [Styled Components](https://github.com/styled-components/styled-components) so you must have those two first installed for this library to work properly. 9 | 10 | In case you're still reading (yes!) you can install this library by typing `npm install --save @react-medellin/components` or if you're using yarn you can do `yarn add @react-medellin/components` 11 | 12 | # Usage 13 | Right now we have 2 components in the library, a `