fix(accordion): add headline to wrap panel button (#1231)

* Update the expansion panel with dynamic h3 * Lint fix * Make it work with bundlers * fix css * Update tests * unsafeHTML works * ui tests * es lint * fix un updated from server test file * update readme and story args * Update components/expansion-panel/readme.md Co-authored-by: yinon <yinon@hotmail.com> * Update components/expansion-panel/src/vwc-expansion-panel.ts * Update components/expansion-panel/stories/arg-types.js Co-authored-by: yinon <yinon@hotmail.com> * file formatting * fix test heading-level name * update readme * update readme * update name to headingLevel * update story * update teat nameing * Update components/expansion-panel/readme.md Co-authored-by: yonatankra <yonatan.kra@vonage.com> Co-authored-by: yinonov <yinon@hotmail.com>
Vonage · Feb 15, 2022 · f05114d · f05114d
1 parent 7dd862d
commit f05114d
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 105 deletions.
diff --git a/__snapshots__/expansion panel.md b/__snapshots__/expansion panel.md
@@ -3,32 +3,34 @@
 #### `should have internal contents`
 
 ```html
-<button
-  aria-controls="content"
-  class="expansion-panel-header"
->
-  <mwc-ripple>
-  </mwc-ripple>
-  <span class="leading-icon">
-    <slot name="icon">
-    </slot>
-  </span>
-  click me
-  <span class="trailing-icon">
-    <slot name="trailingIcon">
-      <vwc-icon
-        class="toggle-open"
-        type="chevron-down-solid"
-      >
-      </vwc-icon>
-      <vwc-icon
-        class="toggle-close"
-        type="chevron-up-solid"
-      >
-      </vwc-icon>
-    </slot>
-  </span>
-</button>
+<h3 class="expansion-panel-header">
+  <button
+    aria-controls="content"
+    class="expansion-panel-button"
+  >
+    <mwc-ripple>
+    </mwc-ripple>
+    <span class="leading-icon">
+      <slot name="icon">
+      </slot>
+    </span>
+    click me
+    <span class="trailing-icon">
+      <slot name="trailingIcon">
+        <vwc-icon
+          class="toggle-open"
+          type="chevron-down-solid"
+        >
+        </vwc-icon>
+        <vwc-icon
+          class="toggle-close"
+          type="chevron-up-solid"
+        >
+        </vwc-icon>
+      </slot>
+    </span>
+  </button>
+</h3>
 <div
   class="expansion-panel-body"
   id="content"
@@ -42,32 +44,34 @@
 #### `should have internal contents (deprecated 'header')`
 
 ```html
-<button
-  aria-controls="content"
-  class="expansion-panel-header"
->
-  <mwc-ripple>
-  </mwc-ripple>
-  <span class="leading-icon">
-    <slot name="icon">
-    </slot>
-  </span>
-  click me
-  <span class="trailing-icon">
-    <slot name="trailingIcon">
-      <vwc-icon
-        class="toggle-open"
-        type="chevron-down-solid"
-      >
-      </vwc-icon>
-      <vwc-icon
-        class="toggle-close"
-        type="chevron-up-solid"
-      >
-      </vwc-icon>
-    </slot>
-  </span>
-</button>
+<h3 class="expansion-panel-header">
+  <button
+    aria-controls="content"
+    class="expansion-panel-button"
+  >
+    <mwc-ripple>
+    </mwc-ripple>
+    <span class="leading-icon">
+      <slot name="icon">
+      </slot>
+    </span>
+    click me
+    <span class="trailing-icon">
+      <slot name="trailingIcon">
+        <vwc-icon
+          class="toggle-open"
+          type="chevron-down-solid"
+        >
+        </vwc-icon>
+        <vwc-icon
+          class="toggle-close"
+          type="chevron-up-solid"
+        >
+        </vwc-icon>
+      </slot>
+    </span>
+  </button>
+</h3>
 <div
   class="expansion-panel-body"
   id="content"

diff --git a/components/expansion-panel/readme.md b/components/expansion-panel/readme.md
@@ -2,17 +2,18 @@
 
 ## Properties
 
-| Property           | Attribute          | Type              | Default   | Description                                                                                |
-| ------------------ | ------------------ | ----------------- | --------- | ------------------------------------------------------------------------------------------ |
-| `dense`            | `dense`            | `boolean`         | false     |                                                                                            |
-| `header`           | `header`           | `string`          | ""        | The heading text of the expanded panel. *deprecated* please use _heading_ property instead |
-| `heading`          | `heading`          | `string`          | ""        | The heading text of the expanded panel                                                     |
-| `icon`             | `icon`             | `string`          | ""        |                                                                                            |
-| `indicatorIconSet` | `indicatorIconSet` | `string`          | "chevron" |                                                                                            |
-| `leadingToggle`    | `leadingToggle`    | `boolean`         | false     |                                                                                            |
-| `noRipple`         | `noRipple`         | `boolean`         | false     |                                                                                            |
-| `open`             | `open`             | `boolean`         | false     |                                                                                            |
-| `ripple`           |                    | `Promise<Ripple>` |           |                                                                                            |
+| Property           | Attribute          | Type              | Default   | Description                                                                                                                                      |
+|--------------------|--------------------| ----------------- |-----------|--------------------------------------------------------------------------------------------------------------------------------------------------|
+| `dense`            | `dense`            | `boolean`         | false     |                                                                                                                                                  |
+| `header`           | `header`           | `string`          | ""        | The heading text of the expanded panel. *deprecated* please use _heading_ property instead                                                       |
+| `heading`          | `heading`          | `string`          | ""        | The heading text of the expanded panel                                                                                                           |
+| `icon`             | `icon`             | `string`          | ""        |                                                                                                                                                  |
+| `indicatorIconSet` | `indicatorIconSet` | `string`          | "chevron" |                                                                                                                                                  |
+| `leadingToggle`    | `leadingToggle`    | `boolean`         | false     |                                                                                                                                                  |
+| `noRipple`         | `noRipple`         | `boolean`         | false     |                                                                                                                                                  |
+| `open`             | `open`             | `boolean`         | false     |                                                                                                                                                  |
+| `ripple`           |                    | `Promise<Ripple>` |           |                                                                                                                                                  |
+| `headingLevel`    | `heading-level`                | `string` | "3"       | The expansion panel `heading-level` defaults to `3` (meaning the button is wrapped with a `H3` tag) but need to be in accordance to the page's hierarchy |
 
 ## Methods
 

diff --git a/components/expansion-panel/src/vwc-expansion-panel.scss b/components/expansion-panel/src/vwc-expansion-panel.scss
@@ -27,9 +27,15 @@
 }
 
 .expansion-panel-header {
+	padding: 0;
+	margin: 0;
+}
+
+.expansion-panel-button {
 	@include typography.typography-cat-shorthand('subtitle-2');
 	position: relative;
 	display: flex;
+	width: 100%;
 	align-items: center;
 	padding: 16px;
 	border: 0 none;
@@ -85,7 +91,7 @@
 }
 
 :host([dense]) {
-	.expansion-panel-header {
+	.expansion-panel-button {
 		@include typography.typography-cat-shorthand('body-2-bold');
 	}
 }
diff --git a/components/expansion-panel/src/vwc-expansion-panel.ts b/components/expansion-panel/src/vwc-expansion-panel.ts
@@ -9,10 +9,10 @@ import {
 	queryAsync,
 	TemplateResult
 } from 'lit-element';
-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 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';
 
 declare global {
 	interface HTMLElementTagNameMap {
@@ -23,71 +23,79 @@ declare global {
 const iconSets = ['chevron', 'binary'];
 export type IndicatorIconSets = typeof iconSets;
 
+const VALID_HEADER_VALUES = [2, 3, 4, 5, 6];
+
+function isValidHeaderValue(headerValue: string | number) {
+	return VALID_HEADER_VALUES.includes(Number(headerValue));
+}
+
 @customElement('vwc-expansion-panel')
 export class VWCExpansionPanel extends VWCExpansionPanelBase {
+	safeHtml = html;
 	static override styles = style;
 
 	/**
 	 * @deprecated use "heading" instead
 	 */
-	@property({ type: String, reflect: true })
+	@property({type: String, reflect: true})
 		header = '';
 
 	/**
 	 * The heading of the expanded panel
 	 */
-	@property({ type: String, reflect: true })
+	@property({type: String, reflect: true})
 		heading = '';
 
-	@property({ type: String, reflect: true })
+	@property({type: String, reflect: true})
 		icon = '';
 
-	@property({ type: String, reflect: true })
+	@property({type: String, reflect: true})
 		indicatorIconSet: IndicatorIconSets[number] = 'chevron';
 
-	@property({ type: Boolean, reflect: true })
+	@property({type: Boolean, reflect: true})
 		dense = false;
 
-	@property({ type: Boolean, reflect: true })
+	@property({type: Boolean, reflect: true})
 		leadingToggle = false;
 
-	@property({ type: Boolean, reflect: true })
+	@property({type: Boolean, reflect: true})
 		noRipple = false;
-
 	@queryAsync('mwc-ripple') ripple!: Promise<Ripple>;
-
 	protected rippleHandlers = new RippleHandlers(() => {
 		return this.ripple;
 	});
-
-	protected toggleOpen(): void {
-		this.open = !this.open;
-	}
+	@property({type: String, reflect: true, attribute: 'heading-level'})
+	private headingLevel = '3';
 
 	override openChanged(isOpen: boolean): void {
 		super.openChanged(isOpen);
 		this.toggleAttribute('open', isOpen);
 	}
 
+	protected toggleOpen(): void {
+		this.open = !this.open;
+	}
+
 	protected renderRipple(): TemplateResult | string {
-		return !this.noRipple ? html`<mwc-ripple></mwc-ripple>` : '';
+		return !this.noRipple ? html`
+			<mwc-ripple></mwc-ripple>` : '';
 	}
 
-	protected override render(): TemplateResult {
+	protected renderHeaderButton(): TemplateResult {
 		return html`
-			<button class="expansion-panel-header"
-				@mousedown="${this.handleRippleActivate}"
-				@mouseenter="${this.handleRippleMouseEnter}"
-				@mouseleave="${this.handleRippleMouseLeave}"
-				@touchstart="${() => {
+			<button class="expansion-panel-button"
+							@mousedown="${this.handleRippleActivate}"
+							@mouseenter="${this.handleRippleMouseEnter}"
+							@mouseleave="${this.handleRippleMouseLeave}"
+							@touchstart="${() => {
 		this.toggleOpen();
 		this.handleRippleActivate;
 	}}"
-				@touchend="${this.handleRippleDeactivate}"
-				@touchcancel="${this.handleRippleDeactivate}"
-				@click=${() => this.toggleOpen()}
-				?aria-expanded=${this.open}
-				aria-controls="content"
+							@touchend="${this.handleRippleDeactivate}"
+							@touchcancel="${this.handleRippleDeactivate}"
+							@click=${() => this.toggleOpen()}
+							?aria-expanded=${this.open}
+							aria-controls="content"
 			>
 				${this.renderRipple()}
 				<span class="leading-icon">
@@ -102,6 +110,17 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
 					</slot>
 				</span>
 			</button>
+		`;
+	}
+
+	protected renderPanelHeader(): TemplateResult | string {
+		if (!isValidHeaderValue(this.headingLevel)) this.headingLevel = '3';
+		return eval(`this.safeHtml\`<h${this.headingLevel} class="expansion-panel-header">\${this.renderHeaderButton()}</h${this.headingLevel}>\``);
+	}
+
+	protected override render(): TemplateResult {
+		return html`
+			${this.renderPanelHeader()}
 			<div id="content" class="expansion-panel-body">
 				<slot></slot>
 			</div>`;
@@ -111,7 +130,8 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
 		if (this.leadingToggle) {
 			return this.renderToggle();
 		} else if (this.icon) {
-			return html`<vwc-icon type="${this.icon}" size="medium"></vwc-icon>`;
+			return html`
+				<vwc-icon type="${this.icon}" size="medium"></vwc-icon>`;
 		} else {
 			return '';
 		}
@@ -132,7 +152,7 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
 		`;
 	}
 
-	@eventOptions({ passive: true })
+	@eventOptions({passive: true})
 	private handleRippleActivate(evt?: Event) {
 		const onUp = () => {
 			window.removeEventListener('mouseup', onUp);

diff --git a/components/expansion-panel/stories/arg-types.js b/components/expansion-panel/stories/arg-types.js
@@ -4,6 +4,12 @@ export const argTypes = {
 			type: 'text'
 		}
 	},
+	headingLevel: {
+		control: {
+			type: 'select',
+			options: ['2', '3', '4', '5', '6'],
+		}
+	},
 	indicatorIconSet: {
 		control: {
 			type: 'select',

diff --git a/components/expansion-panel/stories/expansion-panel.stories.js b/components/expansion-panel/stories/expansion-panel.stories.js
@@ -39,6 +39,7 @@ const OutlinedTemplate = args => html`
 	<style>
 		vwc-expansion-panel {
 			width: 500px;
+			padding: 0.5rem;
 		}
 		form {
 			display: grid;