From 7905cac643897074a1276e79dc10f35d6a3003c4 Mon Sep 17 00:00:00 2001 From: Shibu Lijack Date: Tue, 18 Feb 2020 17:42:46 +0530 Subject: [PATCH] feat(icon): variant property (#118) * feat(icon): variant property * fix: updated constants * feat: added test case --- .../templates/docs/foundation/nucleus-icon.md | 4 +-- .../components/_nucleus-banner-item.scss | 16 ----------- .../components/nucleus-banner/item.hbs | 4 +-- .../icon/addon/components/nucleus-icon.js | 23 +++++++++++++--- packages/icon/addon/styles/addon.scss | 27 +++++++++++++++++++ .../components/nucleus-icon-test.js | 6 +++++ .../components/_nucleus-inline-banner.scss | 20 -------------- .../components/nucleus-inline-banner.hbs | 2 +- 8 files changed, 57 insertions(+), 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 index 1912fdb0..7b9d27f3 100644 --- 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 index 18660712..5ae3276e 100644 --- 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 index 930cf23f..56c20488 100644 --- 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}} -
- {{nucleus-icon name=bannerIcon size="medium"}} +
+ {{nucleus-icon name=bannerIcon size="medium" variant=item.type}}
{{item.title}} diff --git a/packages/icon/addon/components/nucleus-icon.js b/packages/icon/addon/components/nucleus-icon.js index 6d471573..c7b03373 100644 --- 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 index 20b8ade2..ed74b0de 100644 --- 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 index ae3a4bd2..bad9fb2b 100644 --- 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 index 0733726c..d8e57842 100644 --- 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 index d42a3ef7..7ec2aa64 100644 --- 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}}
- {{nucleus-icon name=_icon size="medium"}} + {{nucleus-icon name=_icon size="medium" variant=type}}
{{title}}