feat: add icon color option (#77)

caroso1222 · Jul 13, 2020 · b129d2b · b129d2b
1 parent 8811594
commit b129d2b
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -183,6 +183,7 @@ Param | Type | Details
 className | `string` | Custom class name to be set in the icon element
 tagName | `string` | HTML5 tag used to render the icon
 text | `string` | Inner text rendered within the icon (useful when using [ligature icons](https://css-tricks.com/ligature-icons/))
+color | `string` | Icon color. It must be a valid CSS color value. Defaults to background color.
 
 ## Examples
 

diff --git a/cypress/integration/notyf_spec.js b/cypress/integration/notyf_spec.js
@@ -333,6 +333,9 @@ context('Notyf', () => {
       cy.get('.notyf__ripple').then(([elem]) => {
         expect(elem.style.backgroundColor).to.equal(backgroundColor);
       });
+      cy.get('.notyf__icon--success').then(([elem]) => {
+        expect(elem.style.color).to.equal(backgroundColor);
+      });
     });
 
     it('should render the toast with custom background', () => {
@@ -349,11 +352,18 @@ context('Notyf', () => {
       const className = 'foo-bar-icon';
       const tagName = 'span';
       const text = 'baz';
-      const icon = { className, tagName, text };
+      const color = 'white';
+      const icon = { className, tagName, text, color };
       const config = { icon };
       typeCode(config);
       cy.get('#success-btn').click();
-      cy.get('.notyf__icon').find(tagName).should('have.class', className).should('have.text', text);
+      cy.get('.notyf__icon')
+        .find(tagName)
+        .should('have.class', className)
+        .should('have.text', text)
+        .then(([elem]) => {
+          expect(elem.style.color).to.equal(color);
+        });
     });
 
     it('should allow the notification to be dismissed manually', () => {

diff --git a/demo/index.html b/demo/index.html
@@ -7,6 +7,7 @@
         <link href="../dist/notyf.min.css" rel="stylesheet">
         <link href="styles/style.css" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     </head>
     <body>
       <button id="init-btn" type="button">Init</button>

diff --git a/src/notyf.options.ts b/src/notyf.options.ts
@@ -17,6 +17,7 @@ export interface INotyfIcon {
   className: string;
   tagName: keyof ElementTagNameMap;
   text: string;
+  color: string;
 }
 
 export interface INotyfNotificationOptions {

diff --git a/src/notyf.scss b/src/notyf.scss
@@ -139,7 +139,7 @@ $toast-padding: 15px;
     max-width: 300px;
     transform: translateY(25%);
     box-sizing: border-box;
-    flex: none;
+    flex-shrink: 0;
 
     &--disappear{
       transform: translateY(0);

diff --git a/src/notyf.view.ts b/src/notyf.view.ts
@@ -147,8 +147,9 @@ export class NotyfView {
         className: iconOpts.className,
         text: iconOpts.text,
       });
-      if (color) {
-        icon.style.color = color;
+      const iconColor = iconOpts.color ?? color;
+      if (iconColor) {
+        icon.style.color = iconColor;
       }
       iconContainer.appendChild(icon);
       wrapper.appendChild(iconContainer);