From 975bf75f18e4b8e5eef872477d418a80f32eaf99 Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 30 Nov 2019 12:24:54 -0800 Subject: [PATCH 1/9] Forgot some files it seems --- src/AlertTemplate.js | 41 ++++++++++++++++++++++++++++++++++++++ src/icons/index.js | 6 ++++++ src/index.js | 47 ++++---------------------------------------- 3 files changed, 51 insertions(+), 43 deletions(-) create mode 100644 src/AlertTemplate.js create mode 100644 src/icons/index.js diff --git a/src/AlertTemplate.js b/src/AlertTemplate.js new file mode 100644 index 0000000..5568e13 --- /dev/null +++ b/src/AlertTemplate.js @@ -0,0 +1,41 @@ +import React from 'react' +import { InfoIcon, SuccessIcon, ErrorIcon, CloseIcon } from './icons' + +const alertStyle = { + backgroundColor: '#151515', + color: 'white', + padding: '10px', + textTransform: 'uppercase', + borderRadius: '3px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + boxShadow: '0px 2px 2px 2px rgba(0, 0, 0, 0.03)', + fontFamily: 'Arial', + width: '300px', + boxSizing: 'border-box' +} + +const buttonStyle = { + marginLeft: '20px', + border: 'none', + backgroundColor: 'transparent', + cursor: 'pointer', + color: '#FFFFFF' +} + +const AlertTemplate = ({ message, options, style, close }) => { + return ( +
+ {options.type === 'info' && } + {options.type === 'success' && } + {options.type === 'error' && } + {message} + +
+ ) +} + +export default AlertTemplate \ No newline at end of file diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 0000000..ddaf3c7 --- /dev/null +++ b/src/icons/index.js @@ -0,0 +1,6 @@ +import InfoIcon from './InfoIcon' +import SuccessIcon from './SuccessIcon' +import ErrorIcon from './ErrorIcon' +import CloseIcon from './CloseIcon' + +export { InfoIcon, SuccessIcon, ErrorIcon, CloseIcon, BaseIcon } \ No newline at end of file diff --git a/src/index.js b/src/index.js index bf5066d..75410e9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,44 +1,5 @@ -import React from 'react' -import InfoIcon from './icons/InfoIcon' -import SuccessIcon from './icons/SuccessIcon' -import ErrorIcon from './icons/ErrorIcon' -import CloseIcon from './icons/CloseIcon' +import * as Icons from './icons' +import AlertTemplate from './AlertTemplate' -const alertStyle = { - backgroundColor: '#151515', - color: 'white', - padding: '10px', - textTransform: 'uppercase', - borderRadius: '3px', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - boxShadow: '0px 2px 2px 2px rgba(0, 0, 0, 0.03)', - fontFamily: 'Arial', - width: '300px', - boxSizing: 'border-box' -} - -const buttonStyle = { - marginLeft: '20px', - border: 'none', - backgroundColor: 'transparent', - cursor: 'pointer', - color: '#FFFFFF' -} - -const AlertTemplate = ({ message, options, style, close }) => { - return ( -
- {options.type === 'info' && } - {options.type === 'success' && } - {options.type === 'error' && } - {message} - -
- ) -} - -export default AlertTemplate +export { Icons } +export default AlertTemplate \ No newline at end of file From fce1748c1660665b2a6d948585f599063dce8927 Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 30 Nov 2019 12:55:01 -0800 Subject: [PATCH 2/9] Expose icons as named exports for consumers of package --- src/icons/index.js | 3 ++- src/index.js | 7 ++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/icons/index.js b/src/icons/index.js index ddaf3c7..6497f5e 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -1,6 +1,7 @@ +import BaseIcon from './BaseIcon' import InfoIcon from './InfoIcon' import SuccessIcon from './SuccessIcon' import ErrorIcon from './ErrorIcon' import CloseIcon from './CloseIcon' -export { InfoIcon, SuccessIcon, ErrorIcon, CloseIcon, BaseIcon } \ No newline at end of file +export { BaseIcon, InfoIcon, SuccessIcon, ErrorIcon, CloseIcon } \ No newline at end of file diff --git a/src/index.js b/src/index.js index 75410e9..d134e51 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,2 @@ -import * as Icons from './icons' -import AlertTemplate from './AlertTemplate' - -export { Icons } -export default AlertTemplate \ No newline at end of file +export * from './icons' +export { default } from './AlertTemplate' \ No newline at end of file From a0bc268655618471c3e6019ed9774abb136a575c Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 14 Dec 2019 13:08:46 -0800 Subject: [PATCH 3/9] Add ability to pass color in as prop to icons. Add ability to pass down icon colors to template, and styles to template --- package.json | 10 +++++----- src/AlertTemplate.js | 22 +++++++++++++++------- src/icons/CloseIcon.js | 4 ++-- src/icons/ErrorIcon.js | 4 ++-- src/icons/InfoIcon.js | 4 ++-- src/icons/SuccessIcon.js | 4 ++-- 6 files changed, 28 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 4bba433..591d1a5 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { - "name": "react-alert-template-basic", - "version": "1.0.0", + "name": "react-alert-template-basic-with-icons", + "version": "1.1.3", "author": "Reinaldo Schiehll ", - "main": "dist/cjs/react-alert-template-basic.js", - "module": "dist/esm/react-alert-template-basic.js", + "main": "dist/cjs/react-alert-template-basic-with-icons.js", + "module": "dist/esm/react-alert-template-basic-with-icons.js", "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/schiehll/react-alert-template-basic.git" + "url": "https://github.com/jeronimomora/react-alert-template-basic.git" }, "keywords": [ "react", diff --git a/src/AlertTemplate.js b/src/AlertTemplate.js index 5568e13..d7cc1a1 100644 --- a/src/AlertTemplate.js +++ b/src/AlertTemplate.js @@ -1,7 +1,7 @@ import React from 'react' import { InfoIcon, SuccessIcon, ErrorIcon, CloseIcon } from './icons' -const alertStyle = { +const defaultAlertStyle = { backgroundColor: '#151515', color: 'white', padding: '10px', @@ -16,7 +16,7 @@ const alertStyle = { boxSizing: 'border-box' } -const buttonStyle = { +const defaultButtonStyle = { marginLeft: '20px', border: 'none', backgroundColor: 'transparent', @@ -24,15 +24,23 @@ const buttonStyle = { color: '#FFFFFF' } -const AlertTemplate = ({ message, options, style, close }) => { +const AlertTemplate = ({ + message, + options, + style, + alertStyle = defaultAlertStyle, + buttonStyle = defaultButtonStyle, + iconColors = {}, + close +}) => { return (
- {options.type === 'info' && } - {options.type === 'success' && } - {options.type === 'error' && } + {options.type === 'info' && } + {options.type === 'success' && } + {options.type === 'error' && } {message}
) diff --git a/src/icons/CloseIcon.js b/src/icons/CloseIcon.js index 101020c..a18a335 100644 --- a/src/icons/CloseIcon.js +++ b/src/icons/CloseIcon.js @@ -1,8 +1,8 @@ import React from 'react' import BaseIcon from './BaseIcon' -const CloseIcon = () => ( - +const CloseIcon = ({ color = '#FFFFFF' }) => ( + diff --git a/src/icons/ErrorIcon.js b/src/icons/ErrorIcon.js index 00f2e4a..2551401 100644 --- a/src/icons/ErrorIcon.js +++ b/src/icons/ErrorIcon.js @@ -1,8 +1,8 @@ import React from 'react' import BaseIcon from './BaseIcon' -const ErrorIcon = () => ( - +const ErrorIcon = ({ color = '#FF0040' }) => ( + diff --git a/src/icons/InfoIcon.js b/src/icons/InfoIcon.js index b1fb0d6..3da21f6 100644 --- a/src/icons/InfoIcon.js +++ b/src/icons/InfoIcon.js @@ -1,8 +1,8 @@ import React from 'react' import BaseIcon from './BaseIcon' -const InfoIcon = () => ( - +const InfoIcon = ({ color = '#2E9AFE' }) => ( + diff --git a/src/icons/SuccessIcon.js b/src/icons/SuccessIcon.js index a210adb..f4901a9 100644 --- a/src/icons/SuccessIcon.js +++ b/src/icons/SuccessIcon.js @@ -1,8 +1,8 @@ import React from 'react' import BaseIcon from './BaseIcon' -const SuccessIcon = () => ( - +const SuccessIcon = ({ color = '#31B404' }) => ( + From 0800c050e73563a521bdeaa7dd64b61c527f7ac6 Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 14 Dec 2019 13:27:49 -0800 Subject: [PATCH 4/9] Change style API back to what it was originally, but rename default styles --- package.json | 2 +- src/AlertTemplate.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 591d1a5..fe0558b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-alert-template-basic-with-icons", - "version": "1.1.3", + "version": "1.2.0", "author": "Reinaldo Schiehll ", "main": "dist/cjs/react-alert-template-basic-with-icons.js", "module": "dist/esm/react-alert-template-basic-with-icons.js", diff --git a/src/AlertTemplate.js b/src/AlertTemplate.js index d7cc1a1..0c7718f 100644 --- a/src/AlertTemplate.js +++ b/src/AlertTemplate.js @@ -28,13 +28,12 @@ const AlertTemplate = ({ message, options, style, - alertStyle = defaultAlertStyle, buttonStyle = defaultButtonStyle, iconColors = {}, close }) => { return ( -
+
{options.type === 'info' && } {options.type === 'success' && } {options.type === 'error' && } From 0e48732a1c6aed74586111c27a43e840e577e081 Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 14 Dec 2019 13:45:54 -0800 Subject: [PATCH 5/9] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fe0558b..2a31cea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-alert-template-basic-with-icons", - "version": "1.2.0", + "version": "1.2.2", "author": "Reinaldo Schiehll ", "main": "dist/cjs/react-alert-template-basic-with-icons.js", "module": "dist/esm/react-alert-template-basic-with-icons.js", From d0744b6623a8c468aae168a1c8d95e7b9588108b Mon Sep 17 00:00:00 2001 From: jeronimomora <25408251+jeronimomora@users.noreply.github.com> Date: Sat, 21 Dec 2019 09:58:26 -0800 Subject: [PATCH 6/9] Update README.md --- README.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 64 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d237cdb..4327743 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,72 @@ -# react-alert-template-basic +# react-alert-template-basic-with-icons > Basic alert template for [react-alert](https://github.com/schiehll/react-alert) -[![version](https://img.shields.io/npm/v/react-alert-template-basic.svg?style=flat-square)](http://npm.im/react-alert-template-basic) +[![version](https://img.shields.io/npm/v/react-alert-template-basic-with-icons.svg?style=flat-square)](http://npm.im/react-alert-template-basic-with-icons) ## Installation ```bash -$ npm install --save react-alert-template-basic +$ npm install --save react-alert-template-basic-with-icons ``` + +## Usage + +You can use this package with `react-alert` by importing AlertTemplate from this package and giving it to the AlertProvider from `react-alert`. Alternatively, you can create a styled alert component, and then give the styled component to the AlertProvider as the template. You can override the default template style, and change the icon colors like so: + +```js +// StyledAlertTemplate.js +import React from 'react'; +import AlertTemplate from 'react-alert-template-basic-with-icons' + +// Template style overrides +const styleOverrides = { + backgroundColor: 'white', + color: 'black', + width: '450px' +} + +export default (props) => ( + +) +``` + +You can also create your own custom alert template and use the exposed icons. You can import the icons like so: + +```js +//MyAlertTemplate.js + +import React from 'react'; +import { InfoIcon, SuccessIcon, ErrorIcon, CloseIcon } from 'react-alert-template-basic-with-icons' + +const MyAlertTemplate = () => {} //Create your template with the icon components here + +export default MyAlertTemplate +``` + +## Options + +You can provide an `iconColors` prop to AlertTemplate in order to change the color of the icons. It takes an object of the following type: + +```js +iconColors?: { + info?: string, + success?: string, + error?: string, + close?: string +} +``` + +The default colors are: + +```js +info: '#2E9AFE' +success: '#31B404' +error: '#FF0040' +close: '#FFFFFF' +``` + From 43e88ca262b911c339e4416b1bae39ecd6d7bba7 Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 21 Dec 2019 10:00:37 -0800 Subject: [PATCH 7/9] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2a31cea..d732deb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-alert-template-basic-with-icons", - "version": "1.2.2", + "version": "1.2.3", "author": "Reinaldo Schiehll ", "main": "dist/cjs/react-alert-template-basic-with-icons.js", "module": "dist/esm/react-alert-template-basic-with-icons.js", From 7e39950e5a20b6d3750c2e93cf3061214317d56b Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 21 Dec 2019 10:09:50 -0800 Subject: [PATCH 8/9] Add keywords and change readme --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index d732deb..2bb52b0 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "toaster", "react-toaster", "react-component", - "react-alert-template" + "react-alert-template", + "react-alert-template-basic", + "react-alert-template-basc-with-icons" ], "scripts": { "build": "node ./scripts/build.js", From 9d4c0dd816ef816f1a4cd769568b0c533d6afaf7 Mon Sep 17 00:00:00 2001 From: Jeronimo Date: Sat, 21 Dec 2019 10:10:19 -0800 Subject: [PATCH 9/9] Bump version and change readme --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4327743..a7ff7cb 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # react-alert-template-basic-with-icons -> Basic alert template for [react-alert](https://github.com/schiehll/react-alert) +> Basic alert template with icons for [react-alert](https://github.com/schiehll/react-alert) [![version](https://img.shields.io/npm/v/react-alert-template-basic-with-icons.svg?style=flat-square)](http://npm.im/react-alert-template-basic-with-icons) diff --git a/package.json b/package.json index 2bb52b0..0d59c3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-alert-template-basic-with-icons", - "version": "1.2.3", + "version": "1.2.4", "author": "Reinaldo Schiehll ", "main": "dist/cjs/react-alert-template-basic-with-icons.js", "module": "dist/esm/react-alert-template-basic-with-icons.js",