feat(vwc-circular-progress): added connotation support (#694)

* feat(vwc-circular-progress): added connotation support * fixing the color comparator - adding stroke property for the cured ones * fixing the color comparator - adding stroke property for the cured ones * dep-check @vonage/vvd-design-tokens Co-authored-by: Yuri Guller <[email protected]>
Vonage · Mar 9, 2021 · 09792e3 · 09792e3
1 parent 84bec12
commit 09792e3
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 3 deletions.
diff --git a/components/circular-progress/package.json b/components/circular-progress/package.json
@@ -28,7 +28,9 @@
 	"dependencies": {
 		"@material/mwc-circular-progress": "^0.20.0",
 		"@vonage/vvd-core": "^2.0.4",
+		"@vonage/vvd-foundation": "^2.0.4",
 		"@vonage/vvd-style-coupling": "^2.0.4",
+		"@vonage/vvd-design-tokens": "^2.0.4",
 		"lit-element": "^2.4.0",
 		"tslib": "^2.0.3"
 	},

diff --git a/components/circular-progress/src/vwc-circular-progress.scss b/components/circular-progress/src/vwc-circular-progress.scss
@@ -0,0 +1,14 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+@use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
+@use '@vonage/vvd-foundation/scss/mixins/color-connotation-mixins' with (
+	$connotations: primary cta success alert
+);
+
+@include color-connotation-mixins.connotations-context(
+	':host(#{color-connotation-mixins.$connotation-placeholder})'
+);
+
+:host {
+	--mdc-theme-primary: var(#{color-semantic.$vvd-color-connotation},
+	var(#{scheme-variables.$vvd-color-primary}));
+}
diff --git a/components/circular-progress/src/vwc-circular-progress.ts b/components/circular-progress/src/vwc-circular-progress.ts
@@ -1,18 +1,31 @@
 import '@vonage/vvd-core';
-import { customElement } from 'lit-element';
+import { customElement, property } from 'lit-element';
 import { CircularProgress as MWCCircularProgress } from '@material/mwc-circular-progress';
 import { style as mwcCircularProgressStyle } from '@material/mwc-circular-progress/mwc-circular-progress-css.js';
+import { style as vwcCircularProgressStyle } from './vwc-circular-progress.css';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/vvd-style-coupling.css.js';
+import { Connotation } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
 		'vwc-circular-progress': VWCCircularProgress;
 	}
 }
 
+type CircularProgressConnotation = Extract<
+	Connotation,
+	| Connotation.Primary
+	| Connotation.CTA
+	| Connotation.Success
+	| Connotation.Alert
+	>;
+
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
-MWCCircularProgress.styles = [styleCoupling, mwcCircularProgressStyle];
+MWCCircularProgress.styles = [styleCoupling, mwcCircularProgressStyle, vwcCircularProgressStyle];
 
 @customElement('vwc-circular-progress')
-export class VWCCircularProgress extends MWCCircularProgress {}
+export class VWCCircularProgress extends MWCCircularProgress {
+	@property({ type: String, reflect: true })
+	connotation?: CircularProgressConnotation | null;
+}
diff --git a/components/circular-progress/stories/arg-types.js b/components/circular-progress/stories/arg-types.js
@@ -1,4 +1,12 @@
+import { Connotation } from '@vonage/vvd-foundation/constants';
+
 export const argTypes = {
+	connotation: {
+		control: {
+			type: 'select',
+			options: [Connotation.Primary, Connotation.CTA, Connotation.Success, Connotation.Alert],
+		}
+	},
 	indeterminate: {
 		control: {
 			type: 'inline-radio',

diff --git a/components/circular-progress/test/circular-progress.test.js b/components/circular-progress/test/circular-progress.test.js
@@ -5,6 +5,11 @@ import {
 	textToDomToParent,
 	waitNextTask,
 } from '../../../test/test-helpers';
+import {
+	assertConnotationAttribute,
+	assertConnotationProperty,
+} from '@vonage/vvd-foundation/test/connotation.test.js';
+import { Connotation } from '@vonage/vvd-foundation/constants';
 
 chai.use(chaiDomDiff);
 
@@ -30,4 +35,63 @@ describe('circular progress', () => {
 		await waitNextTask();
 		expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
 	});
+
+	describe('Connotation', () => {
+		const CONNOTATIONS_SUPPORTED = [Connotation.Primary, Connotation.CTA, Connotation.Success, Connotation.Alert];
+
+		it(`should sync linear progress class member 'connotation' and html attribute 'connotation'`, async function () {
+			const [linearProgress] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+			);
+			await waitNextTask();
+
+			const syncMatchFn = connotation => linearProgress.connotation == connotation &&
+				linearProgress.getAttribute('connotation') == connotation;
+
+			let connotationValue = 'cta';
+			linearProgress.connotation = connotationValue;
+			await waitNextTask();
+			const propertyChangesAffectsAttribute = syncMatchFn(connotationValue);
+
+			connotationValue = 'primary';
+			linearProgress.setAttribute('connotation', connotationValue);
+			await waitNextTask();
+			const attributeChangesAffectsProperty = syncMatchFn(connotationValue);
+
+			expect(
+				propertyChangesAffectsAttribute,
+				'Property change did not apply to attribute'
+			).to.equal(true);
+			expect(
+				attributeChangesAffectsProperty,
+				'Attribute change did not apply to property'
+			).to.equal(true);
+		});
+
+		for (const connotation of CONNOTATIONS_SUPPORTED) {
+			it(`should reflect '${connotation}' connotation (attribute) visually`, async () => {
+				const [linearProgress] = addElement(
+					textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+				);
+				await assertConnotationAttribute({
+					element: linearProgress,
+					connotation: connotation,
+					childrenAffected: ['.mdc-circular-progress__determinate-circle', '.mdc-circular-progress__indeterminate-circle-graphic'],
+					stylesAffected: ['stroke'],
+				});
+			});
+
+			it(`should reflect '${connotation}' connotation (property) visually`, async () => {
+				const [linearProgress] = addElement(
+					textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+				);
+				await assertConnotationProperty({
+					element: linearProgress,
+					connotation: connotation,
+					childrenAffected: ['.mdc-circular-progress__determinate-circle', '.mdc-circular-progress__indeterminate-circle-graphic'],
+					stylesAffected: ['stroke'],
+				});
+			});
+		}
+	});
 });
diff --git a/components/circular-progress/tsconfig.json b/components/circular-progress/tsconfig.json
@@ -12,6 +12,9 @@
 		{
 			"path": "../../common/core"
 		},
+		{
+			"path": "../../common/foundation"
+		},
 		{
 			"path": "../../common/style-coupling"
 		}

diff --git a/test/test-helpers.js b/test/test-helpers.js
@@ -140,6 +140,8 @@ function assertComputedStyle(element, expectedStyles, pseudoSelector = null) {
 			case 'borderInlineEndColor':
 			case 'borderBlockStartColor':
 			case 'borderBlockEndColor':
+			case 'fill':
+			case 'stroke':
 				actualValue = computedStyle[styleKey].replaceAll(/\s/g, '');
 				expectedValue = expectedStyles[styleKey].replaceAll(/\s/g, '');
 				break;
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,9 @@ @@
     		{
     			"path": "../../common/core"
     		},
+    		{
+    			"path": "../../common/foundation"
+    		},
     		{
     			"path": "../../common/style-coupling"
     		}
@@ Expand Down @@