feat(vwc-icon): connotation support (#957)

* feat(vwc-icon): connotation support * focus on color rather than fill * story fix * feature scoped connotation * uneeded variable * chore(workspace): decoupled from ts modules Co-authored-by: Tal Weinfeld <tal.weinfeld@vonage.com> Co-authored-by: tveinfeld <67224311+tveinfeld@users.noreply.github.com>
Vonage · Jul 19, 2021 · c7bbfac · c7bbfac
1 parent 6b299f4
commit c7bbfac
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 46 deletions.
diff --git a/common/foundation/scss/mixins/color-connotation/_color-connotation-decorative.mixin.scss b/common/foundation/scss/mixins/color-connotation/_color-connotation-decorative.mixin.scss
@@ -12,6 +12,8 @@ $_connotations-definition: (
 $connotations-decorative-set: predefined-connotations.$connotations-decorative-set !default;
 $selector: variables.$selector !default;
 
+$connotation-variable: #{variables.$vvd-color-connotation} !default;
+
 @mixin connotations-decorative {
  @each $name, $value in functions.pick-map($connotations-decorative-set, $_connotations-definition) {
  $compound: '[connotation="#{$name}" i]';
@@ -23,7 +25,7 @@ $selector: variables.$selector !default;
  );
 
  #{$local-selector} {
- #{variables.$vvd-color-connotation}: $value;
+ #{$connotation-variable}: $value;
  }
  }
 }
diff --git a/common/foundation/scss/mixins/color-connotation/_color-connotation-main.mixin.scss b/common/foundation/scss/mixins/color-connotation/_color-connotation-main.mixin.scss
@@ -19,6 +19,9 @@ $_connotations-definition: (
 $connotations-set: predefined-connotations.$connotations-set !default;
 $selector: variables.$selector !default;
 
+$connotation-variable: #{variables.$vvd-color-connotation} !default;
+$on-connotation-variable: #{variables.$vvd-on-color-connotation} !default;
+
 // selector can be altered by relevance
 @mixin connotations-main {
  @each $name in functions.pick-list($connotations-set, $_connotations-definition) {
@@ -51,6 +54,6 @@ $selector: variables.$selector !default;
 }
 
 @mixin connotation-main-variables($name) {
- #{variables.$vvd-color-connotation}: var(--vvd-color-#{$name});
- #{variables.$vvd-color-on-connotation}: var(--vvd-color-on-#{$name});
+ #{$connotation-variable}: var(--vvd-color-#{$name});
+ #{$on-connotation-variable}: var(--vvd-color-on-#{$name});
 }
diff --git a/common/foundation/scss/mixins/color-connotation/_color-connotation-shades.mixin.scss b/common/foundation/scss/mixins/color-connotation/_color-connotation-shades.mixin.scss
@@ -17,6 +17,8 @@ $_connotations-definition: (
 $connotations-set: predefined-connotations.$connotations-set !default;
 $selector: variables.$selector !default;
 
+$connotation-variable: #{variables.$vvd-color-connotation} !default;
+
 @mixin connotations-shades {
  @each $c_name, $value in functions.pick-map($connotations-set, $_connotations-definition) {
  $compound: '[connotation="#{$c_name}" i]';
@@ -29,7 +31,7 @@ $selector: variables.$selector !default;
 
  #{$local-selector} {
  @each $s_name, $s_value in $value {
- #{variables.$vvd-color-connotation}-#{$s_name}: var(--vvd-color-#{$s_value});
+ #{$connotation-variable}-#{$s_name}: var(--vvd-color-#{$s_value});
  }
  }
  }

diff --git a/common/foundation/scss/mixins/color-connotation/_index.scss b/common/foundation/scss/mixins/color-connotation/_index.scss
@@ -2,22 +2,30 @@
 @use 'variables';
 
 $selector: variables.$selector !default;
+
 $connotations-set: predefined-connotations.$connotations-set !default;
 $connotations-decorative-set: predefined-connotations.$connotations-decorative-set !default;
 
+$connotation-variable: variables.$vvd-color-connotation !default;
+$on-connotation-variable: variables.$vvd-color-on-connotation !default;
+
 @forward 'color-connotation-main.mixin' show connotations-main, connotations-main-default with (
  $connotations-set: $connotations-set,
- $selector: $selector
+ $selector: $selector,
+ $connotation-variable: $connotation-variable,
+ $on-connotation-variable: $on-connotation-variable
 );
 
 @forward 'color-connotation-shades.mixin' show connotations-shades with (
  $connotations-set: $connotations-set,
- $selector: $selector
+ $selector: $selector,
+ $connotation-variable: $connotation-variable,
 );
 
 @forward 'color-connotation-decorative.mixin' show connotations-decorative with (
  $connotations-decorative-set: $connotations-decorative-set,
- $selector: $selector
+ $selector: $selector,
+ $connotation-variable: $connotation-variable,
 );
 
 @forward 'variables' show $vvd-color-connotation, $vvd-color-on-connotation;
diff --git a/components/button/src/vwc-button.scss b/components/button/src/vwc-button.scss
@@ -1,7 +1,7 @@
 
 @forward './vwc-button-coupling';
 @use './vwc-button-variables' as button-variables;
-@use '@vonage/vwc-icon/src/vwc-icon-variables' as icon-variables;
+@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (

diff --git a/components/expansion-panel/src/vwc-expansion-panel.scss b/components/expansion-panel/src/vwc-expansion-panel.scss
@@ -1,5 +1,5 @@
 @use './vwc-expansion-panel-variables' as expansion-panel-variables;
-@use '@vonage/vwc-icon/src/vwc-icon-variables' as icon-variables;
+@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @use '@vonage/vvd-typography/scss/typography';
 

diff --git a/components/icon-button/src/vwc-icon-button.scss b/components/icon-button/src/vwc-icon-button.scss
@@ -4,7 +4,7 @@ $icon-button-icon-size-variable-name: --vvd-icon-button-icon-size;
 
 @use 'sass:map';
 @use './vwc-icon-button-variables' as icon-button-variables;
-@use '@vonage/vwc-icon/src/vwc-icon-variables' as icon-variables;
+@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
 @use '@vonage/vvd-foundation/scss/mixins/shape-mixins' as shape-mixins with (

diff --git a/components/icon/package.json b/components/icon/package.json
@@ -20,7 +20,7 @@
  "scripts": {
  "test": "echo \"Error: run tests from root\" && exit 1",
  "build:typescript": "tsc -b",
- "build:styles": "umbrella-style-modules",
+ "build:styles": "umbrella-style-modules --path=\"./src\"",
  "build": "yarn run build:styles && yarn run build:typescript"
  },
  "bugs": {
@@ -39,4 +39,4 @@
  "@vonage/vvd-umbrella": "2.14.0",
  "tslib": "^2.3.0"
  }
-}
+}
diff --git a/components/icon/src/partials/_vwc-icon-connotation.scss b/components/icon/src/partials/_vwc-icon-connotation.scss
@@ -0,0 +1,14 @@
+$icon-color: --vvd-icon-color;
+// $icon-color-on-connotation: --vvd-icon-color-on-connotation;
+
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation' as color-connotation with (
+ $connotations-set: primary cta announcement success alert info,
+ $connotation-variable: #{$icon-color},
+ // $on-connotation-variable: #{$icon-color-on-connotation}
+);
+
+@include color-connotation.connotations-main;
+
+:host {
+ color: var(#{$icon-color}, currentColor);
+}
diff --git a/components/icon/src/_vwc-icon-variables.scss → ...con/src/partials/_vwc-icon-variables.scss b/components/icon/src/_vwc-icon-variables.scss → ...con/src/partials/_vwc-icon-variables.scss
diff --git a/components/icon/src/vwc-icon.scss b/components/icon/src/vwc-icon.scss
@@ -1,4 +1,6 @@
-@use './vwc-icon-variables' as icon-variables;
+@use 'partials/vwc-icon-variables' as icon-variables;
+@forward 'partials/vwc-icon-connotation';
+
 
 :host([size='small']) {
  #{icon-variables.$icon-size-variable-name}: 16px;

diff --git a/components/icon/src/vwc-icon.ts b/components/icon/src/vwc-icon.ts
@@ -1,4 +1,4 @@
-import { IconSize } from '@vonage/vvd-foundation/constants';
+import { IconSize, Connotation } from '@vonage/vvd-foundation/constants';
 import '@vonage/vvd-core';
 import {
  LitElement,
@@ -38,12 +38,25 @@ const resolveIcon = memoizeWith(identity as () => string, (iconId = '') => (icon
 
 const setSvgAttribute = (name: string, value: string) => (svgText = '') => svgText.replace(/<svg[^>]*>/, tagText => tagText.replace(/<svg[^>]+/, attributesText => attributesText.split(' ').concat([name, value].filter(Boolean).join('=')).join(' ')));
 
+type IconConnotation = Extract<
+ Connotation,
+ | Connotation.Primary
+ | Connotation.CTA
+ | Connotation.Announcement
+ | Connotation.Success
+ | Connotation.Alert
+ | Connotation.Info
+ >;
+
 @customElement('vwc-icon')
 export class VWCIcon extends LitElement {
  static get styles(): CSSResult {
  return style;
  }
 
+ @property({ type: String, reflect: true })
+ connotation?: IconConnotation;
+
  @property({
  attribute: true,
  type: String,

diff --git a/components/icon/stories/arg-types.js b/components/icon/stories/arg-types.js
@@ -1,17 +1,23 @@
-// import { Size } from '@vonage/vvd-foundation/constants';
-
+const ICON_CONNOTATIONS = ['primary', 'cta', 'announcement', 'success', 'alert', 'warning', 'info'];
+const ICON_SIZES = ['small', 'medium', 'large'];
 
 export const argTypes = {
+ connotation: {
+ control: {
+ type: 'select',
+ options: [undefined, ...ICON_CONNOTATIONS],
+ }
+ },
  size: {
  control: {
  type: 'select',
- options: ['small', 'medium', 'large'],
+ options: ICON_SIZES,
  }
  },
  inline: {
  control: {
  type: 'inline-radio',
- options: { 'true': '', 'false': undefined }
+ options: { true: '', false: undefined }
  }
  },
-}
+};
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
@@ -10,35 +10,18 @@ export default {
  argTypes
 };
 
-const SizesTemplate = args => html`
- <style>
- dd {
- margin:0;
- }
- </style>
-
- <dl>
- <dt>Small</dt>
- <dd>
- <vwc-icon size="small" ...=${spread(args)}></vwc-icon>
- </dd>
- <dt>Medium</dt>
- <dd>
- <vwc-icon size="medium" ...=${spread(args)}></vwc-icon>
- </dd>
- <dt>Large</dt>
- <dd>
- <vwc-icon size="large" ...=${spread(args)}></vwc-icon>
- </dd>
- </dl>
+const Template = args => html`
+ <vwc-icon ...=${spread(args)}></vwc-icon>
 `;
 
 const InlineTemplate = args => html`
  <p>I <vwc-icon ...=${spread(args)}></vwc-icon> VIVID!</p>
 `;
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = { type: 'profile-line' };
+export const Basic = Template.bind({});
+Basic.args = { type: 'profile-line' };
 
 export const Inline = InlineTemplate.bind({});
-Inline.args = { size: 'medium', inline: '', type: 'heart', style: 'color: red' };
+Inline.args = {
+ size: 'medium', inline: '', type: 'heart', style: 'color: red'
+};
diff --git a/components/tab-bar/src/vwc-tab.scss b/components/tab-bar/src/vwc-tab.scss
@@ -2,7 +2,7 @@
 $tab-icon-size-variable-name: --vvd-tab-icon-size;
 /*************/
 
-@use '@vonage/vwc-icon/src/vwc-icon-variables' as icon-variables;
+@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
 @forward './vwc-tab-coupling';
 

diff --git a/components/textfield/src/vwc-textfield-action.scss b/components/textfield/src/vwc-textfield-action.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'vwc-textfield-variables' as textfield-variables;
 @use '@vonage/vwc-icon-button/src/vwc-icon-button-variables' as icon-button-variables;
-@use '@vonage/vwc-icon/src/vwc-icon-variables' as icon-variables;
+@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
 
 
 

diff --git a/components/textfield/src/vwc-textfield.scss b/components/textfield/src/vwc-textfield.scss
@@ -3,7 +3,7 @@
 @forward './vwc-textfield-input';
 @forward './vwc-textfield-action';
 @use './vwc-textfield-variables' as textfield-variables;
-@use '@vonage/vwc-icon/src/vwc-icon-variables' as icon-variables;
+@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 @use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
 @use '@vonage/vvd-foundation/scss/mixins/shape-mixins' as shape-mixins with (