feat(accordion): add meta

__snapshots__/expansion panel.md

@@ -6,14 +6,17 @@
 <button
   aria-controls="content"
   class="expansion-panel-header"
+  id="expansion-panel"
 >
   <mwc-ripple>
   </mwc-ripple>
   <span class="leading-icon">
     <slot name="icon">
     </slot>
   </span>
-  click me
+  <span class="header-text">
+    click me
+  </span>
   <span class="trailing-icon">
     <slot name="trailingIcon">
       <vwc-icon
@@ -30,8 +33,10 @@
   </span>
 </button>
 <div
+  aria-labelledby="expansion-panel"
   class="expansion-panel-body"
   id="content"
+  role="region"
 >
   <slot>
   </slot>
@@ -45,14 +50,17 @@
 <button
   aria-controls="content"
   class="expansion-panel-header"
+  id="expansion-panel"
 >
   <mwc-ripple>
   </mwc-ripple>
   <span class="leading-icon">
     <slot name="icon">
     </slot>
   </span>
-  click me
+  <span class="header-text">
+    click me
+  </span>
   <span class="trailing-icon">
     <slot name="trailingIcon">
       <vwc-icon
@@ -69,8 +77,10 @@
   </span>
 </button>
 <div
+  aria-labelledby="expansion-panel"
   class="expansion-panel-body"
   id="content"
+  role="region"
 >
   <slot>
   </slot>

components/expansion-panel/src/vwc-expansion-panel.scss

@@ -29,12 +29,20 @@
 .expansion-panel-header {
 	@include typography.typography-cat-shorthand('subtitle-2');
 	position: relative;
-	display: flex;
+	display: grid;
 	align-items: center;
 	padding: 16px;
 	border: 0 none;
 	background: transparent;
 	cursor: pointer;
+	grid-template-areas: '. caption . .' 'leading header meta trailing';
+	grid-template-columns: auto 1fr auto auto;
+	grid-template-rows: auto auto;
+	text-align: left;
+
+	&.with-meta {
+		grid-template-columns: auto 1fr 0.35fr auto;
+	}
 
 	.leading-icon,
 	.trailing-icon {
@@ -44,8 +52,38 @@
 			#{icon-variables.$icon-size-variable-name}: var(#{expansion-panel-variables.$expansion-panel-icon-size-variable-name}, 20px);
 		}
 	}
+	.header-text {
+		/* stylelint-disable property-no-vendor-prefix */
+		/* stylelint-disable value-no-vendor-prefix */
+		display: -webkit-box;
+		overflow: hidden;
+		-webkit-box-orient: vertical;
+		grid-area: header;
+		-webkit-line-clamp: 2;
+		/* stylelint-enable property-no-vendor-prefix */
+		/* stylelint-enable value-no-vendor-prefix */
+		margin-inline-end: auto;
+	}
+
+	.caption {
+		@include typography.typography-cat-shorthand('body-2');
+		color: var(--vvd-color-neutral-80);
+		grid-area: caption;
+	}
+
+	.meta {
+		@include typography.typography-cat-shorthand('body-2-bold');
+		overflow: hidden;
+		flex-shrink: 0;
+		color: var(--vvd-color-neutral-70);
+		grid-area: meta;
+		margin-inline-start: 1rem;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
 	.leading-icon {
+		grid-area: leading;
 		/* stylelint-disable selector-no-qualifying-type */
 		vwc-icon,
 		slot[name="icon"i]::slotted(vwc-icon) {
@@ -55,8 +93,7 @@
 	}
 
 	.trailing-icon {
-		margin-inline-start: auto;
-
+		grid-area: trailing;
 		/* stylelint-disable selector-no-qualifying-type */
 		vwc-icon,
 		slot[name="trailingIcon"i]::slotted(vwc-icon) {
@@ -88,4 +125,13 @@
 	.expansion-panel-header {
 		@include typography.typography-cat-shorthand('body-2-bold');
 	}
+	.caption {
+		@include typography.typography-cat-shorthand('caption');
+	}
+	.meta {
+		@include typography.typography-cat-shorthand('caption-bold');
+	}
+	vwc-icon {
+		--vvd-expansion-panel-icon-size: 16px;
+	}
 }

components/expansion-panel/src/vwc-expansion-panel.ts

@@ -1,6 +1,7 @@
 import '@vonage/vvd-core';
 import '@vonage/vwc-icon';
 import '@material/mwc-ripple/mwc-ripple.js';
+import { classMap } from 'lit-html/directives/class-map.js';
 import {
 	customElement,
 	eventOptions,
@@ -13,6 +14,7 @@ import type { Ripple } from '@material/mwc-ripple';
 import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';
 import { VWCExpansionPanelBase } from './vwc-expansion-panel-base.js';
 import { style } from './vwc-expansion-panel.css.js';
+import {nothing} from 'lit-html';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -45,6 +47,12 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
 	@property({ type: String, reflect: true })
 		indicatorIconSet: IndicatorIconSets[number] = 'chevron';
 
+	@property({ type: String, reflect: true })
+		caption = '';
+
+	@property({ type: String, reflect: true })
+		metaData = '';
+
 	@property({ type: Boolean, reflect: true })
 		dense = false;
 
@@ -73,9 +81,21 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
 		return !this.noRipple ? html`<mwc-ripple></mwc-ripple>` : '';
 	}
 
+	private renderCaption(): TemplateResult | unknown {
+		return this.caption ? html`<span class="caption">${this.caption}</span>` : nothing;
+	}
+
+	private renderMetaData(): TemplateResult | unknown {
+		return this.metaData ? html`<span class="meta">${this.metaData}</span>` : nothing;
+	}
+
 	protected override render(): TemplateResult {
+		const classes = {
+			'with-meta': this.metaData,
+		};
+
 		return html`
-			<button class="expansion-panel-header"
+			<button class="expansion-panel-header ${classMap(classes)}" id="expansion-panel"
 				@mousedown="${this.handleRippleActivate}"
 				@mouseenter="${this.handleRippleMouseEnter}"
 				@mouseleave="${this.handleRippleMouseLeave}"
@@ -95,14 +115,15 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
 						${this.renderIconOrToggle()}
 					</slot>
 				</span>
-				${this.heading || this.header}
+				${this.renderCaption()}<span class="header-text">${this.heading || this.header}</span>
+				${this.renderMetaData()}
 				<span class="trailing-icon">
 					<slot name="trailingIcon">
 						${!this.leadingToggle ? this.renderToggle() : ''}
 					</slot>
 				</span>
 			</button>
-			<div id="content" class="expansion-panel-body">
+			<div id="content" class="expansion-panel-body" role="region" aria-labelledby="expansion-panel">
 				<slot></slot>
 			</div>`;
 	}

components/expansion-panel/stories/arg-types.js

@@ -4,6 +4,16 @@ export const argTypes = {
 			type: 'text'
 		}
 	},
+	caption: {
+		control: {
+			type: 'text'
+		}
+	},
+	metaData: {
+		control: {
+			type: 'text'
+		}
+	},
 	indicatorIconSet: {
 		control: {
 			type: 'select',

components/expansion-panel/stories/expansion-panel.stories.js

@@ -72,6 +72,12 @@ Dense.args = { header: 'Campaign Details', dense: '' };
 export const LeadingToggle = Template.bind({});
 LeadingToggle.args = { header: 'Campaign Details', leadingToggle: '' };
 
+export const Caption = Template.bind({});
+Caption.args = { header: 'Campaign Details with caption', caption: 'item number' };
+
+export const MetaData = Template.bind({});
+MetaData.args = { header: 'Campaign Details', metaData: 'meta-data', icon: "chat-solid" };
+
 export const Icon = Template.bind({});
 Icon.args = { header: 'Campaign Details', icon: 'chat-solid' };
 

components/expansion-panel/test/expansion-panel.test.js

@@ -80,6 +80,35 @@ describe('expansion panel', () => {
 		expect(headerEl.textContent.trim()).to.equal(headerText);
 	});
 
+	it('should have caption text when caption is set', async () => {
+		const captionText = 'Item caption';
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} caption="${captionText}"></${COMPONENT_NAME}>`)
+		);
+		await waitNextTask();
+		const caption = actualElement.shadowRoot.querySelector('.expansion-panel-header');
+		expect(caption.textContent.trim()).to.equal(captionText);
+	});
+
+	it('should have meat text when meta is set', async () => {
+		const metaText = 'meta-data';
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} metaData="${metaText}"></${COMPONENT_NAME}>`)
+		);
+		await waitNextTask();
+		const meta = actualElement.shadowRoot.querySelector('.expansion-panel-header');
+		expect(meta.textContent.trim()).to.equal(metaText);
+	});
+
+	it('expansion-panel-header should have meta class when meta is set', async () => {
+		const metaText = 'meta-data';
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME} metaData="${metaText}"></${COMPONENT_NAME}>`)
+		);
+		await waitNextTask();
+		expect(actualElement.shadowRoot.querySelector('.meta'));
+	});
+
 	describe('toggle icons', () => {
 		let actualElement;
 		beforeEach(async () => {

ui-tests/tests/vwc-accordion/index.js

@@ -8,17 +8,31 @@ export async function createElementVariations(wrapper) {
 	accordionElementWrapper.innerHTML =
 		`
 		  <vwc-expansion-panel header="Campaign Details"></vwc-expansion-panel>
-
 		  <vwc-expansion-panel header="Campaign Details" indicatorIconSet="binary"></vwc-expansion-panel>
 		  <vwc-expansion-panel header="Campaign Details" icon="chat-solid"></vwc-expansion-panel>
 		  <vwc-expansion-panel header="Campaign Details" leadingToggle></vwc-expansion-panel>
-		  <vwc-expansion-panel header="Campaign Details" dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" caption="caption"></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data"></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data" caption="caption" icon="chat-solid"></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data" caption="caption" leadingToggle></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data" caption="caption" indicatorIconSet="binary"></vwc-expansion-panel>
+			<hr>
+			<p>dense</p>
+			<vwc-expansion-panel header="Campaign Details" dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="Campaign Details" indicatorIconSet="binary" dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="Campaign Details" icon="chat-solid" dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="Campaign Details" leadingToggle dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" caption="caption" dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data" dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data" caption="caption" icon="chat-solid" dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data" caption="caption" leadingToggle dense></vwc-expansion-panel>
+		  <vwc-expansion-panel header="I'm an accordion header" metaData="meta-data" caption="caption" indicatorIconSet="binary" dense></vwc-expansion-panel>
 
 		  <vwc-expansion-panel open header="Campaign Details">
 				A campaign describes a specific use case and details of the messages you will be sending through it.
 				Such as: sample messages, subscriber opt-in/out, and the associated numbers you will be sending with these messages.
 			</vwc-expansion-panel>
-
+<hr>
 			<vwc-accordion>
 				<vwc-expansion-panel open header="Item 1">lorem ipsum dolor amet</vwc-expansion-panel>
 				<vwc-expansion-panel header="Item 2">lorem ipsum dolor amet</vwc-expansion-panel>