feat(list): list expansion panel (#518)

* feat(list): list expansion panel expansion panel to support expand & collapse list items * consumer vs component implementation * encapsulated list expansion panel * a better story * initial passing test * dep-check fix * extract expansion panel base class * fix correct deps * functional story * higher coverage * 90%+ coverage * vwc-icon reference * style update * removed list items typography handling * expand micro interaction * list readme update Co-authored-by: Yuri Guller <gullerya@gmail.com>
Vonage · Dec 27, 2020 · dce3f50 · dce3f50
1 parent 737d246
commit dce3f50
Show file tree

Hide file tree

Showing 18 changed files with 632 additions and 123 deletions.
diff --git a/__snapshots__/list expansion panel.md b/__snapshots__/list expansion panel.md
@@ -0,0 +1,14 @@
+# `list expansion panel`
+
+#### `should have the expected custom element's internal contents`
+
+```html
+<slot name="header">
+</slot>
+<div class="body">
+ <slot>
+ </slot>
+</div>
+
+```
+
diff --git a/components/expansion-panel/package.json b/components/expansion-panel/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "@vonage/vwc-expansion-panel",
+ "version": "0.17.2-pre.1",
+ "description": "> TODO: description",
+ "author": "yinonov <yinon@hotmail.com>",
+ "homepage": "https://github.com/Vonage/vivid/tree/master/components/expansion-panel#readme",
+ "license": "ISC",
+ "main": "vwc-expansion-panel.js",
+ "module": "vwc-expansion-panel.js",
+ "files": [
+ "src",
+ "*.js",
+ "*.ts",
+ "*.map"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/vonage/vivid.git",
+ "directory": "components/expansion-panel"
+ },
+ "scripts": {
+ "test": "echo \"Error: run tests from root\" && exit 1"
+ },
+ "bugs": {
+ "url": "https://github.com/Vonage/vivid/issues"
+ },
+ "dependencies": {
+ "@material/mwc-base": "^0.20.0",
+ "lit-element": "^2.4.0",
+ "tslib": "^2.0.3"
+ }
+}
diff --git a/components/expansion-panel/src/vwc-expansion-panel-base.ts b/components/expansion-panel/src/vwc-expansion-panel-base.ts
@@ -0,0 +1,57 @@
+import { LitElement, property } from 'lit-element';
+import { observer } from '@material/mwc-base/observer';
+
+export abstract class VWCExpansionPanelBase extends LitElement {
+ @property({ type: Boolean, reflect: true })
+ @observer(function (
+ this: VWCExpansionPanelBase,
+ isOpen: boolean,
+ wasOpen: boolean
+ ) {
+ if (isOpen) {
+ this.show();
+ // wasOpen helps with first render (when it is `undefined`) perf
+ } else if (wasOpen !== undefined) {
+ this.close();
+ }
+
+ this.openChanged(isOpen);
+ })
+ open = false;
+
+ /**
+ * Invoked when the element open state is updated.
+ *
+ * Expressions inside this method will trigger upon open state change
+ *
+ * @param _isOpen Boolean of open state
+ */ protected openChanged(
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ _isOpen: boolean
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ ): void {}
+
+ close(): void {
+ this.open = false;
+ this.notifyClose();
+ }
+
+ show(): void {
+ this.open = true;
+ this.notifyOpen();
+ }
+
+ notifyClose(): void {
+ const init: CustomEventInit = { bubbles: true, composed: true };
+ const ev = new CustomEvent('closed', init);
+ this.open = false;
+ this.dispatchEvent(ev);
+ }
+
+ notifyOpen(): void {
+ const init: CustomEventInit = { bubbles: true, composed: true };
+ const ev = new CustomEvent('opened', init);
+ this.open = true;
+ this.dispatchEvent(ev);
+ }
+}
diff --git a/components/expansion-panel/tsconfig.json b/components/expansion-panel/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "composite": true,
+ "rootDir": "src",
+ "outDir": ".",
+ "tsBuildInfoFile": ".tsbuildinfo"
+ },
+ "include": ["src/*.ts"],
+ "exclude": ["src/test/*.ts"],
+ "references": []
+}
diff --git a/components/list/package.json b/components/list/package.json
@@ -26,6 +26,8 @@
  "dependencies": {
  "@material/mwc-list": "^0.20.0",
  "@vonage/vvd-core": "^0.17.2",
+ "@vonage/vwc-icon": "^0.17.2",
+ "@vonage/vwc-expansion-panel": "^0.17.2-pre.1",
  "@vonage/vvd-style-coupling": "^0.17.2",
  "lit-element": "^2.4.0",
  "tslib": "^2.0.3"

diff --git a/components/list/readme.md b/components/list/readme.md
@@ -1,74 +1,154 @@
+This component is an extension of [<mwc-check-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
+
+## Properties
+
+| Property | Modifiers | Type |
+| ------------------ | --------- | ------------------------- |
+| `activated` | | `boolean` |
+| `disabled` | | `boolean` |
+| `graphic` | | `GraphicType` |
+| `group` | | `string \| null` |
+| `hasMeta` | | `boolean` |
+| `left` | | `boolean` |
+| `multipleGraphics` | | `boolean` |
+| `noninteractive` | | `boolean` |
+| `ripple` | | `Promise<Ripple \| null>` |
+| `selected` | | `boolean` |
+| `tabindex` | | `number` |
+| `text` | readonly | `string` |
+| `twoline` | | `boolean` |
+| `value` | | `string` |
+
+## Events
+
+| Event | Type |
+| -------------------- | ----------------------- |
+| `list-item-rendered` | |
+| `request-selected` | `RequestSelectedDetail` |
+
+# vwc-list-expansion-panel
+
+This component support expand-collapse list
+
+## Properties
+
+| Property | Type |
+| -------------------- | ------------------------------------ |
+| `headerListItemIcon` | `VWCIcon \| undefined` |
+| `headerNodes` | `HTMLElement[] \| null \| undefined` |
+| `open` | `boolean` |
+
+## Methods
+
+| Method | Type | Description |
+| ------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `close` | `(): void` | |
+| `notifyClose` | `(): void` | |
+| `notifyOpen` | `(): void` | |
+| `openChanged` | `(isOpen: boolean): void` | Invoked when the element open state is updated.<br /><br />Expressions inside this method will trigger upon open state change<br /><br />**\_isOpen**: Boolean of open state |
+| `show` | `(): void` | |
+
 # vwc-list-item
 
 This component is an extension of [<mwc-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
 
 ## Properties
 
-| Property | Modifiers | Type |
-|---------------------------|-----------|-------------------------------------------|
-| `activated` | | `boolean` |
-| `disabled` | | `boolean` |
-| `floatingLabelFoundation` | | `MDCFloatingLabelFoundation \| undefined` |
-| `graphic` | | `GraphicType` |
-| `group` | | `string \| null` |
-| `hasMeta` | | `boolean` |
-| `lineRippleFoundation` | | `MDCLineRippleFoundation \| undefined` |
-| `multipleGraphics` | | `boolean` |
-| `noninteractive` | | `boolean` |
-| `ripple` | | `Promise<Ripple \| null>` |
-| `selected` | | `boolean` |
-| `tabindex` | | `number` |
-| `text` | readonly | `string` |
-| `twoline` | | `boolean` |
-| `value` | | `string` |
+| Property | Modifiers | Type |
+| ------------------ | --------- | ------------------------- |
+| `activated` | | `boolean` |
+| `disabled` | | `boolean` |
+| `graphic` | | `GraphicType` |
+| `group` | | `string \| null` |
+| `hasMeta` | | `boolean` |
+| `multipleGraphics` | | `boolean` |
+| `noninteractive` | | `boolean` |
+| `ripple` | | `Promise<Ripple \| null>` |
+| `selected` | | `boolean` |
+| `tabindex` | | `number` |
+| `text` | readonly | `string` |
+| `twoline` | | `boolean` |
+| `value` | | `string` |
 
 ## Events
 
-| Event | Description |
-|----------------------|-------------------------|
+| Event | Type  |
+| -------------------- | ----------------------- |
 | `list-item-rendered` | |
-| `request-selected` | {RequestSelectedDetail} |
-
+| `request-selected` | `RequestSelectedDetail` |
 
 # vwc-list
 
 This component is an extension of [<mwc-list>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
 
 ## Properties
 
-| Property | Modifiers | Type |
-|---------------------------|-----------|------------------------------------------------|
-| `activatable` | | `boolean` |
-| `floatingLabelFoundation` | | `MDCFloatingLabelFoundation \| undefined` |
-| `index` | readonly | `MWCListIndex` |
-| `innerAriaLabel` | | `string \| null` |
-| `innerRole` | | `string \| null` |
-| `itemRoles` | | `string \| null` |
-| `items` | readonly | `ListItemBase[]` |
-| `layout` | | `(updateItems?: boolean \| undefined) => void` |
-| `lineRippleFoundation` | | `MDCLineRippleFoundation \| undefined` |
-| `multi` | | `boolean` |
-| `noninteractive` | | `boolean` |
-| `rootTabbable` | | `boolean` |
-| `selected` | readonly | `ListItemBase \| ListItemBase[] \| null` |
-| `wrapFocus` | | `boolean` |
+| Property | Modifiers | Type |
+| ----------------- | --------- | ----------------------------------------------------------- |
+| `activatable` | | `boolean` |
+| `debouncedLayout` | | `(updateItems?: boolean \| undefined) => void \| undefined` |
+| `emptyMessage` | | `string \| undefined` |
+| `index` | readonly | `MWCListIndex` |
+| `innerAriaLabel` | | `string \| null` |
+| `innerRole` | | `string \| null` |
+| `itemRoles` | | `string \| null` |
+| `items` | readonly | `ListItemBase[]` |
+| `itemsReady` | | `Promise<never[]>` |
+| `layout` | | `object` |
+| `multi` | | `boolean` |
+| `noninteractive` | | `boolean` |
+| `rootTabbable` | | `boolean` |
+| `selected` | readonly | `ListItemBase \| ListItemBase[] \| null` |
+| `wrapFocus` | | `boolean` |
 
 ## Methods
 
-| Method | Type |
-|-----------------------|--------------------------------------------------|
-| `blur` | `(): void` |
-| `focus` | `(): void` |
-| `focusItemAtIndex` | `(index: number): void` |
-| `getFocusedItemIndex` | `(): number` |
-| `layout` | `(updateItems?: boolean \| undefined): void` |
-| `select` | `(index: MWCListIndex): void` |
+| Method | Type |
+| --------------------- | ----------------------------------------------------- |
+| `blur` | `(): void` |
+| `click` | `(): void` |
+| `focus` | `(): void` |
+| `focusItemAtIndex` | `(index: number): void` |
+| `getFocusedItemIndex` | `(): number` |
+| `layout` | `(updateItems?: boolean \| undefined): void` |
+| `renderPlaceholder` | `(): TemplateResult \| null` |
+| `select` | `(index: MWCListIndex): void` |
 | `toggle` | `(index: number, force?: boolean \| undefined): void` |
 
 ## Events
 
-| Event | Description |
-|-----------------|------------------|
-| `action` | {ActionDetail} |
+| Event | Type  |
+| --------------- | ---------------- |
+| `action` | `ActionDetail` |
 | `items-updated` | |
-| `selected` | {SelectedDetail} |
+| `selected` | `SelectedDetail` |
+
+# vwc-radio-list-item
+
+This component is an extension of [<mwc-radio-list-item>](https://github.com/material-components/material-components-web-components/tree/master/packages/list)
+
+## Properties
+
+| Property | Modifiers | Type |
+| ------------------ | --------- | ------------------------- |
+| `activated` | | `boolean` |
+| `disabled` | | `boolean` |
+| `graphic` | | `GraphicType` |
+| `group` | | `string \| null` |
+| `hasMeta` | | `boolean` |
+| `left` | | `boolean` |
+| `multipleGraphics` | | `boolean` |
+| `noninteractive` | | `boolean` |
+| `ripple` | | `Promise<Ripple \| null>` |
+| `selected` | | `boolean` |
+| `tabindex` | | `number` |
+| `text` | readonly | `string` |
+| `twoline` | | `boolean` |
+| `value` | | `string` |
+
+## Events
+
+| Event | Type |
+| -------------------- | ----------------------- |
+| `list-item-rendered` | |
+| `request-selected` | `RequestSelectedDetail` |
diff --git a/components/list/src/vwc-check-list-item.scss b/components/list/src/vwc-check-list-item.scss
@@ -1,11 +1,11 @@
-@use '@vonage/vvd-typography/scss/typography' as typography;
+// @use '@vonage/vvd-typography/scss/typography' as typography;
 
-:host{
- @include typography.typography-cat-shorthand('body-2');
-}
+// :host{
+//  @include typography.typography-cat-shorthand('body-2');
+// }
 
 :host(:not([left])) > .mdc-list-item__meta {
  // TODO: add list-coupling variables (like --mdc-list-item-meta-size)
  width: 22px;
  height: 22px;
-}
+}
diff --git a/components/list/src/vwc-list-expansion-panel.scss b/components/list/src/vwc-list-expansion-panel.scss
@@ -0,0 +1,41 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables';
+
+$indent: 44px;
+
+.body {
+ margin-inline-start: $indent;
+ position: relative;
+ &::before {
+ content: '';
+ block-size: 100%;
+ border-inline-start: 1px solid
+ var(#{scheme-variables.$vvd-color-contrast-faint});
+ position: absolute;
+ left: $indent / -2;
+ }
+ :host(:not([open])) & {
+ display: none;
+ }
+
+ @media (prefers-reduced-motion: no-preference) {
+ :host([open]) & {
+ animation: fade-in-left 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+ }
+ }
+}
+
+/**
+ * ----------------------------------------
+ * animation fade-in-left
+ * ----------------------------------------
+ */
+@keyframes fade-in-left {
+ 0% {
+ transform: translateX(-10px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}