style(list-item): add connotation support for activated list items

components/list/src/vwc-list-item.scss

@@ -2,6 +2,9 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @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/color-connotation' as color-connotation with (
+	$connotations-set: primary cta
+);
 @use '@vonage/vvd-foundation/scss/mixins/shape-mixins' with (
 	$variable-name: --vvd-list-item-shape
 );
@@ -10,6 +13,9 @@ $vvd-list-item-block-size: --vvd-list-item-block-size;
 $vvd-list-item-side-padding: --vvd-list-item-side-padding;
 $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 
+@include color-connotation.connotations-main;
+@include color-connotation.connotations-main-default(primary);
+
 :host {
 	--mdc-list-side-padding: var(#{$vvd-list-item-side-padding});
 	--mdc-list-item-graphic-margin: var(#{$vvd-list-item-graphic-margin});
@@ -25,14 +31,44 @@ $vvd-list-item-graphic-margin: --vvd-list-item-graphic-margin;
 	@include typography.typography-cat-shorthand('body-2');
 	@include vvd-formfield.coupling;
 
+	position: relative;
 	height: var(#{$vvd-list-item-block-size});
-
 	border-radius: var(--vvd-list-item-shape);
+
 	#{$vvd-list-item-block-size}: 40px;
 	#{$vvd-list-item-side-padding}: 24px;
 	#{$vvd-list-item-graphic-margin}: 16px;
 }
 
+:host([activated]) {
+	--mdc-theme-text-icon-on-background: var(
+		#{color-connotation.$vvd-color-on-connotation}
+	);
+	--mdc-theme-text-hint-on-background: var(
+		#{color-connotation.$vvd-color-on-connotation}
+	);
+	--mdc-ripple-color: var(#{color-connotation.$vvd-color-on-connotation});
+
+	@include typography.typography-cat-shorthand('body-2-bold');
+	z-index: 0;
+	color: var(#{color-connotation.$vvd-color-on-connotation});
+
+	mwc-ripple,
+	.fake-activated-ripple {
+		z-index: -1;
+	}
+
+	.fake-activated-ripple {
+		--mdc-ripple-activated-opacity: 1;
+		--mdc-ripple-color: var(#{color-connotation.$vvd-color-connotation});
+	}
+
+	mwc-ripple {
+		--mdc-ripple-activated-opacity: 0;
+		background-color: var(#{color-connotation.$vvd-color-connotation});
+	}
+}
+
 :host([graphic='icon']:not([twoline])) {
 	height: var(#{$vvd-list-item-block-size}); // override mwc fixed height
 }

components/list/src/vwc-list-item.ts

@@ -3,7 +3,7 @@ import { ListItem as MWCListItem } from '@material/mwc-list/mwc-list-item';
 import { style as vwcListItemStyle } from './vwc-list-item.css.js';
 import { style as mwcListItemStyle } from '@material/mwc-list/mwc-list-item-css.js';
 import { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css';
-import { Shape } from '@vonage/vvd-foundation/constants';
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -15,13 +15,22 @@ declare global {
 // @ts-ignore
 MWCListItem.styles = [styleCoupling, mwcListItemStyle, vwcListItemStyle];
 
+type ListItemConnotation = Extract<
+Connotation,
+| Connotation.Primary
+| Connotation.CTA
+>;
+
 type ListItemShape = Extract<Shape, Shape.Rounded>;
 
 /**
  * This component is an extension of [<mwc-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
  */
 @customElement('vwc-list-item')
 export class VWCListItem extends MWCListItem {
+	@property({ type: String, reflect: true })
+	connotation?: ListItemConnotation;
+
 	@property({ type: String, reflect: true })
 	shape?: ListItemShape;
 }

components/list/stories/arg-types-list-item.js

@@ -1,6 +1,14 @@
-import { Shape } from '@vonage/vvd-foundation/constants';
-	
+import { Connotation, Shape } from '@vonage/vvd-foundation/constants';
+
 export const argTypes = {
+	connotation: {
+		control: {
+			type: 'select',
+			options: Object.values(Connotation).filter(c => [
+				Connotation.Primary, Connotation.CTA
+			].includes(c)),
+		}
+	},
 	shape: {
 		control: {
 			type: 'select',
@@ -10,44 +18,44 @@ export const argTypes = {
 	twoline: {
 		control: {
 			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
+			options: { true: '', false: undefined }
 		}
 	},
 	disabled: {
 		control: {
 			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
+			options: { true: '', false: undefined }
 		}
 	},
 	activated: {
 		control: {
 			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
+			options: { true: '', false: undefined }
 		}
 	},
 	selected: {
 		control: {
 			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
+			options: { true: '', false: undefined }
 		}
 	},
 	multipleGraphics: {
 		control: {
 			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
+			options: { true: '', false: undefined }
 		}
 	},
 	hasMeta: {
 		control: {
 			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
+			options: { true: '', false: undefined }
 		}
 	},
 	noninteractive: {
 		control: {
 			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
+			options: { true: '', false: undefined }
 		}
 	},
 	ripple: { table: { disable: true } }
-}
+};

components/list/stories/list-basic.stories.js

@@ -27,15 +27,14 @@ export const Basic = args => html`
 		}
 	</style>
 
-<h4>Main</h4>
-<div class="box">
-	${renderList(args)}
-</div>
-<h4>Alternate</h4>
-<div class="box vvd-scheme-alternate">
-	${renderList(args)}
-</div>
-
+	<h4>Main</h4>
+	<div class="box">
+		${renderList(args)}
+	</div>
+	<h4>Alternate</h4>
+	<div class="box vvd-scheme-alternate">
+		${renderList(args)}
+	</div>
 `;
 
 export const metaIcon = args => html`

components/list/stories/list-item.stories.js

@@ -8,7 +8,7 @@ export default {
 	title: 'Components/List (list item)',
 	component: 'vwc-list-item',
 	argTypes
-}
+};
 
 const Template = args => html`
 	<style>
@@ -38,9 +38,20 @@ const Template = args => html`
 		</vwc-list-item>
 	</vwc-list>`;
 
+
+export const Basic = Template.bind({});
+
 export const Shape = Template.bind({});
 Shape.args = { shape: 'rounded' };
 
+export const Connotation = Template.bind({});
+Connotation.args = {
+	connotation: 'cta',
+	activated: '',
+	shape: 'rounded',
+	graphic: 'icon'
+};
+
 export const TwoLine = Template.bind({});
 TwoLine.args = { twoline: '', hasMeta: '' };
 
@@ -51,4 +62,30 @@ export const MetaIcon = Template.bind({});
 MetaIcon.args = { hasMeta: '' };
 
 export const Icon = Template.bind({});
-Icon.args = { graphic: 'icon' };
+Icon.args = { graphic: 'icon' };
+
+const ActivatedTemplate = args => html`
+	<style>
+	vwc-list {
+		width: 240px;
+	}
+	</style>
+
+	<vwc-list>
+		<vwc-list-item graphic="icon">
+			Item A
+			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
+		</vwc-list-item>
+		<vwc-list-item ...=${spread(args)}>
+			Item B
+			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
+		</vwc-list-item>
+		<vwc-list-item graphic="icon">
+			Item C
+			<vwc-icon slot="graphic" type="chat" size="small"></vwc-icon>
+		</vwc-list-item>
+	</vwc-list>`;
+
+
+export const Activated = ActivatedTemplate.bind({});
+Activated.args = { activated: '' };

components/list/test/list-item.test.js

@@ -84,6 +84,28 @@ describe('list item', () => {
 		});
 	});
 
+	describe('connotation', () => {
+		let listItem,
+			ripple;
+		beforeEach(async () => {
+			[listItem] = addElement(
+				textToDomToParent(`<vwc-list-item activated>Item 1</vwc-list-item>`)
+			);
+			await waitNextTask();
+			ripple = listItem.shadowRoot.querySelector('.fake-activated-ripple');
+		});
+
+		it('should proxy primary connotation to activated list-item by default', async () => {
+			assertComputedStyle(ripple, { backgroundColor: 'rgb(0,0,0)' }, ':before');
+		});
+
+		it('should proxy cta connotation to activated list-item when connotation set to cta', async () => {
+			listItem.connotation = 'cta';
+			await waitNextTask();
+			assertComputedStyle(ripple, { backgroundColor: 'rgb(153,65,255)' }, ':before');
+		});
+	});
+
 	describe('shape', () => {
 		let actualElement;
 		beforeEach(async () => {