feat(icon): variant property (#118)

* feat(icon): variant property * fix: updated constants * feat: added test case
freshworks · Feb 18, 2020 · 7905cac · 7905cac
1 parent e950af4
commit 7905cac
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 45 deletions.
diff --git a/packages/@nucleus/tests/dummy/app/templates/docs/foundation/nucleus-icon.md b/packages/@nucleus/tests/dummy/app/templates/docs/foundation/nucleus-icon.md
@@ -9,8 +9,8 @@ yarn add @freshworks/icon
 {{#docs-demo as |demo|}}
   {{#demo.example name='nucleus-icon-eg.hbs'}}
     {{nucleus-icon name="nucleus-circle-check" size="small"}}
-    {{nucleus-icon name="nucleus-circle-cross" size="medium"}}
-    {{nucleus-icon name="nucleus-circle-help" size="large"}}
+    {{nucleus-icon name="nucleus-circle-cross" size="medium" variant="danger"}}
+    {{nucleus-icon name="nucleus-circle-help" size="large" variant="success"}}
   {{/demo.example}}
   {{demo.snippet 'nucleus-icon-eg.hbs'}}
 {{/docs-demo}}

diff --git a/packages/banner/addon/styles/components/_nucleus-banner-item.scss b/packages/banner/addon/styles/components/_nucleus-banner-item.scss
@@ -3,22 +3,6 @@
     position: relative;
     top: 2px;
     margin-right: 4px;
-
-    &.warning {
-      color: $text-warning;
-    }
-
-    &.danger {
-      color: $text-danger;
-    }
-
-    &.info {
-      color: $text-info;
-    }
-
-    &.success {
-      color: $text-success;
-    }
   }
 
   &__link {

diff --git a/packages/banner/addon/templates/components/nucleus-banner/item.hbs b/packages/banner/addon/templates/components/nucleus-banner/item.hbs
@@ -2,8 +2,8 @@
 {{#if item.componentName}}
   {{component item.componentName props=item.componentProps}}
 {{else}}
-  <div class="nucleus-banner-item__icon {{item.type}}">
-    {{nucleus-icon name=bannerIcon size="medium"}}
+  <div class="nucleus-banner-item__icon">
+    {{nucleus-icon name=bannerIcon size="medium" variant=item.type}}
   </div>
   <div class="nucleus-banner-item__content">
     {{item.title}}

diff --git a/packages/icon/addon/components/nucleus-icon.js b/packages/icon/addon/components/nucleus-icon.js
@@ -8,6 +8,9 @@ import { computed } from '@ember/object';
 import Component from '@ember/component';
 import layout from "../templates/components/nucleus-icon";
 
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_VARIANT = 'primary';
+
 /**
   __Usage:__
   [Refer component page](/docs/components/nucleus-icon)
@@ -40,7 +43,18 @@ class NucleusIcon extends Component {
   * @public
   */
   @defaultProp
-  size = 'medium';
+  size = DEFAULT_SIZE;
+
+  /**
+  * Variant
+  *
+  * @field variant
+  * @type string
+  * @default null
+  * @public
+  */
+  @defaultProp
+  variant = DEFAULT_VARIANT;
 
   /**
   * Custom class
@@ -59,11 +73,12 @@ class NucleusIcon extends Component {
   * @computed _disabled
   * @private
   */
-  @computed('size', 'customClass')
+  @computed('size', 'variant', 'customClass')
   get _classNames() {
     let customClass = this.get('customClass');
-    let size = this.get('size') ? this.get('size') : 'medium';
-    let classNames = `nucleus-icon nucleus-icon--${size}`;
+    let size = this.get('size');
+    let variant = this.get('variant');
+    let classNames = `nucleus-icon nucleus-icon--${size} nucleus-icon--${variant}`;
     return customClass ? `${classNames} ${customClass}` : classNames;
   }
 }

diff --git a/packages/icon/addon/styles/addon.scss b/packages/icon/addon/styles/addon.scss
@@ -1,3 +1,6 @@
+// Globals
+@import "nucleus/variables";
+
 .nucleus-icon {
   width: 12px;
   height: 12px;
@@ -21,4 +24,28 @@
     width: 16px;
     height: 16px;
   }
+
+  &--primary {
+    fill: $text-default;
+  }
+
+  &--secondary {
+    fill: $text-secondary;
+  }
+
+  &--danger {
+    fill: $text-danger;
+  }
+
+  &--warning {
+    fill: $text-warning;
+  }
+
+  &--success {
+    fill: $text-success;
+  }
+
+  &--info {
+    fill: $text-info;
+  }
 }
diff --git a/packages/icon/tests/integration/components/nucleus-icon-test.js b/packages/icon/tests/integration/components/nucleus-icon-test.js
@@ -26,6 +26,12 @@ module('Integration | Component | nucleus-icon', function(hooks) {
     assert.dom('svg').hasClass('nucleus-icon--mini', 'icon has correct size class');
   });
 
+  test('it has correct variant', async function(assert) {
+    await render(hbs`{{nucleus-icon name="nucleus-cross" variant="danger"}}`);
+
+    assert.dom('svg').hasClass('nucleus-icon--danger', 'icon has correct variant class');
+  });
+
   test('it passes a11y tests', async function(assert) {
     await render(hbs`{{nucleus-icon name="nucleus-cross"}}`);
 

diff --git a/packages/inline-banner/addon/styles/components/_nucleus-inline-banner.scss b/packages/inline-banner/addon/styles/components/_nucleus-inline-banner.scss
@@ -31,11 +31,6 @@
     background-color: $bg-warning;
     border: 1px solid $border-warning-color;
 
-    .nucleus-inline-banner__icon {
-      background-color: $bg-warning;
-      color: $text-warning;
-    }
-
     .nucleus-inline-banner__content {
       color: $text-default;
       border-left-color: $border-warning-color;
@@ -46,11 +41,6 @@
     background-color: $bg-danger;
     border: 1px solid $border-danger-color;
 
-    .nucleus-inline-banner__icon {
-      background-color: $bg-danger;
-      color: $text-danger;
-    }
-
     .nucleus-inline-banner__content {
       color: $text-default;
       border-left-color: $border-danger-color;
@@ -61,11 +51,6 @@
     background-color: $bg-info;
     border: 1px solid $border-info-color;
 
-    .nucleus-inline-banner__icon {
-      background-color: $bg-info;
-      color: $text-info;
-    }
-
     .nucleus-inline-banner__content {
       color: $text-default;
       border-left-color: $border-info-color;
@@ -76,11 +61,6 @@
     background-color: $bg-success;
     border: 1px solid $border-success-color;
 
-    .nucleus-inline-banner__icon {
-      background-color: $bg-success;
-      color: $text-success;
-    }
-
     .nucleus-inline-banner__content {
       color: $text-default;
       border-left-color: $border-success-color;

diff --git a/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs b/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs
@@ -6,7 +6,7 @@
   }}
 {{else}}
   <div class="nucleus-inline-banner__icon">
-    {{nucleus-icon name=_icon size="medium"}}
+    {{nucleus-icon name=_icon size="medium" variant=type}}
   </div>
   <div class="nucleus-inline-banner__content">
     <div data-test-id="nucleus-inline-banner-title">{{title}}</div>