chore: removed accidentally committed directory
This commit is contained in:
Danny Moerkerke
parent
a1f1270671
commit
886151ba85
8 changed files with 0 additions and 455 deletions
|
|
@ -1,3 +0,0 @@
|
||||||
# Lion Drawer Overview
|
|
||||||
|
|
||||||
[=> See Source <=](../../../docs/components/drawer/overview.md)
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
# Lion Drawer Use Cases
|
|
||||||
|
|
||||||
[=> See Source <=](../../../docs/components/drawer/use-cases.md)
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { LionDrawer } from './src/LionDrawer.js';
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import { LionDrawer } from './src/LionDrawer.js';
|
|
||||||
|
|
||||||
customElements.define('lion-drawer', LionDrawer);
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@lion/drawer",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"description": "Drawer that can be expanded to reveal it contents",
|
|
||||||
"license": "MIT",
|
|
||||||
"author": "ing-bank",
|
|
||||||
"homepage": "https://github.com/ing-bank/lion/",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/ing-bank/lion.git",
|
|
||||||
"directory": "packages/drawer"
|
|
||||||
},
|
|
||||||
"type": "module",
|
|
||||||
"exports": {
|
|
||||||
".": "./index.js",
|
|
||||||
"./define": "./lion-drawer.js",
|
|
||||||
"./docs/*": "./docs/*"
|
|
||||||
},
|
|
||||||
"main": "index.js",
|
|
||||||
"module": "index.js",
|
|
||||||
"files": [
|
|
||||||
"*.d.ts",
|
|
||||||
"*.js",
|
|
||||||
"custom-elements.json",
|
|
||||||
"docs",
|
|
||||||
"src",
|
|
||||||
"test",
|
|
||||||
"test-helpers",
|
|
||||||
"translations",
|
|
||||||
"types"
|
|
||||||
],
|
|
||||||
"scripts": {
|
|
||||||
"custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude \"docs/**/*\" \"test-helpers/**/*\"",
|
|
||||||
"debug": "cd ../../ && npm run debug -- --group drawer",
|
|
||||||
"debug:firefox": "cd ../../ && npm run debug:firefox -- --group drawer",
|
|
||||||
"debug:webkit": "cd ../../ && npm run debug:webkit -- --group drawer",
|
|
||||||
"publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../",
|
|
||||||
"prepublishOnly": "npm run publish-docs && npm run custom-elements-manifest",
|
|
||||||
"test": "cd ../../ && npm run test:browser -- --group drawer"
|
|
||||||
},
|
|
||||||
"sideEffects": [
|
|
||||||
"lion-drawer.js",
|
|
||||||
"./docs/styled-drawer-content.js"
|
|
||||||
],
|
|
||||||
"dependencies": {
|
|
||||||
"@lion/collapsible": "^0.9.1",
|
|
||||||
"@lion/core": "^0.24.0"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"drawer",
|
|
||||||
"lion",
|
|
||||||
"web-components"
|
|
||||||
],
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"customElements": "custom-elements.json"
|
|
||||||
}
|
|
||||||
|
|
@ -1,217 +0,0 @@
|
||||||
import { html } from '@lion/core';
|
|
||||||
import { LionCollapsible } from '@lion/collapsible';
|
|
||||||
import { drawerStyle } from './drawerStyle.js';
|
|
||||||
|
|
||||||
const EVENT = {
|
|
||||||
TRANSITION_END: 'transitionend',
|
|
||||||
TRANSITION_START: 'transitionstart',
|
|
||||||
};
|
|
||||||
|
|
||||||
export class LionDrawer extends LionCollapsible {
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
transitioning: {
|
|
||||||
type: Boolean,
|
|
||||||
reflect: true,
|
|
||||||
},
|
|
||||||
opened: {
|
|
||||||
type: Boolean,
|
|
||||||
reflect: true,
|
|
||||||
},
|
|
||||||
position: {
|
|
||||||
type: String,
|
|
||||||
reflect: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
/** @private */
|
|
||||||
this.__toggle = () => {
|
|
||||||
this.opened = !this.opened;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
super.connectedCallback();
|
|
||||||
|
|
||||||
if (!this.hasAttribute('position')) {
|
|
||||||
this.position = 'left';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this._contentNode) {
|
|
||||||
this._contentNode.style.setProperty('display', '');
|
|
||||||
}
|
|
||||||
|
|
||||||
this.__setBoundaries();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update aria labels on state change.
|
|
||||||
* @param {import('@lion/core').PropertyValues } changedProperties
|
|
||||||
*/
|
|
||||||
updated(changedProperties) {
|
|
||||||
if (changedProperties.has('opened')) {
|
|
||||||
this._openedChanged();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styles() {
|
|
||||||
return [drawerStyle];
|
|
||||||
}
|
|
||||||
|
|
||||||
__setBoundaries() {
|
|
||||||
const host = this.shadowRoot?.host;
|
|
||||||
|
|
||||||
if (this.position === 'top') {
|
|
||||||
this.minHeight = host ? getComputedStyle(host).getPropertyValue('--min-height') : '0px';
|
|
||||||
this.maxHeight = host ? getComputedStyle(host).getPropertyValue('--max-height') : '0px';
|
|
||||||
this.minWidth = '0px';
|
|
||||||
this.maxWidth = 'none';
|
|
||||||
} else {
|
|
||||||
this.minWidth = host ? getComputedStyle(host).getPropertyValue('--min-width') : '0px';
|
|
||||||
this.maxWidth = host ? getComputedStyle(host).getPropertyValue('--max-width') : '0px';
|
|
||||||
this.minHeight = 'auto';
|
|
||||||
this.maxHeight = 'fit-content';
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
const prop = this.position === 'top' ? 'width' : 'height';
|
|
||||||
|
|
||||||
if (this.__contentNode) {
|
|
||||||
this.__contentNode.style.setProperty(prop, '');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Setter for position property, available values are 'top', 'left' and 'right'
|
|
||||||
* @param {String} position
|
|
||||||
*/
|
|
||||||
set position(position) {
|
|
||||||
const stale = this.position;
|
|
||||||
this._position = position;
|
|
||||||
this.setAttribute('position', position);
|
|
||||||
|
|
||||||
this.__setBoundaries();
|
|
||||||
this.requestUpdate('position', stale);
|
|
||||||
}
|
|
||||||
|
|
||||||
get position() {
|
|
||||||
return this._position ?? 'left';
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Trigger show animation and wait for transition to be finished.
|
|
||||||
* @param {Object} options - element node and its options
|
|
||||||
* @param {HTMLElement} options.contentNode
|
|
||||||
* @override
|
|
||||||
*/
|
|
||||||
async _showAnimation({ contentNode }) {
|
|
||||||
const min = this.position === 'top' ? this.minHeight : this.minWidth;
|
|
||||||
const max = this.position === 'top' ? this.maxHeight : this.maxWidth;
|
|
||||||
const prop = this.position === 'top' ? 'height' : 'width';
|
|
||||||
|
|
||||||
contentNode.style.setProperty(prop, /** @type {string} */ (min));
|
|
||||||
await new Promise(resolve => requestAnimationFrame(() => resolve(true)));
|
|
||||||
contentNode.style.setProperty(prop, /** @type {string} */ (max));
|
|
||||||
await this._waitForTransition({ contentNode });
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Trigger hide animation and wait for transition to be finished.
|
|
||||||
* @param {Object} options - element node and its options
|
|
||||||
* @param {HTMLElement} options.contentNode
|
|
||||||
* @override
|
|
||||||
*/
|
|
||||||
async _hideAnimation({ contentNode }) {
|
|
||||||
if (
|
|
||||||
((this.position === 'left' || this.position === 'right') &&
|
|
||||||
this._contentWidth === this.minWidth) ||
|
|
||||||
(this.position === 'top' && this._contentHeight === this.minHeight)
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const min = this.position === 'top' ? this.minHeight : this.minWidth;
|
|
||||||
const prop = this.position === 'top' ? 'height' : 'width';
|
|
||||||
|
|
||||||
contentNode.style.setProperty(prop, /** @type {string} */ (min));
|
|
||||||
await this._waitForTransition({ contentNode });
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wait until the transition event is finished.
|
|
||||||
* @param {Object} options - element node and its options
|
|
||||||
* @param {HTMLElement} options.contentNode
|
|
||||||
* @returns {Promise<void>} transition event
|
|
||||||
*/
|
|
||||||
_waitForTransition({ contentNode }) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
const transitionStarted = () => {
|
|
||||||
contentNode.removeEventListener(EVENT.TRANSITION_START, transitionStarted);
|
|
||||||
this.transitioning = true;
|
|
||||||
};
|
|
||||||
contentNode.addEventListener(EVENT.TRANSITION_START, transitionStarted);
|
|
||||||
|
|
||||||
const transitionEnded = () => {
|
|
||||||
contentNode.removeEventListener(EVENT.TRANSITION_END, transitionEnded);
|
|
||||||
this.transitioning = false;
|
|
||||||
resolve();
|
|
||||||
};
|
|
||||||
contentNode.addEventListener(EVENT.TRANSITION_END, transitionEnded);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @protected
|
|
||||||
*/
|
|
||||||
get __contentNode() {
|
|
||||||
return /** @type {HTMLElement} */ (this.shadowRoot?.querySelector('.container'));
|
|
||||||
}
|
|
||||||
|
|
||||||
get _contentWidth() {
|
|
||||||
const size = this.__contentNode?.getBoundingClientRect().width || 0;
|
|
||||||
return `${size}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
get _contentHeight() {
|
|
||||||
const size = this.__contentNode?.getBoundingClientRect().height || 0;
|
|
||||||
return `${size}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
_openedChanged() {
|
|
||||||
this._updateContentSize();
|
|
||||||
if (this._invokerNode) {
|
|
||||||
this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.dispatchEvent(new CustomEvent('opened-changed'));
|
|
||||||
}
|
|
||||||
|
|
||||||
async _updateContentSize() {
|
|
||||||
if (this.__contentNode) {
|
|
||||||
if (this.opened) {
|
|
||||||
await this._showAnimation({ contentNode: this.__contentNode });
|
|
||||||
} else {
|
|
||||||
await this._hideAnimation({ contentNode: this.__contentNode });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return html`
|
|
||||||
<div class="container">
|
|
||||||
<div class="headline-container">
|
|
||||||
<slot name="invoker"></slot>
|
|
||||||
<slot name="headline"></slot>
|
|
||||||
</div>
|
|
||||||
<div class="content-container">
|
|
||||||
<slot name="content"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
import { css } from '@lion/core';
|
|
||||||
|
|
||||||
export const drawerStyle = css`
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
--min-width: 72px;
|
|
||||||
--max-width: 320px;
|
|
||||||
--min-height: auto;
|
|
||||||
--max-height: fit-content;
|
|
||||||
--start-width: var(--min-width);
|
|
||||||
--start-height: 100%;
|
|
||||||
--transition-property: width;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([position='top']) {
|
|
||||||
width: 100%;
|
|
||||||
--min-width: 0px;
|
|
||||||
--max-width: none;
|
|
||||||
--min-height: 50px;
|
|
||||||
--max-height: 200px;
|
|
||||||
--start-width: 100%;
|
|
||||||
--start-height: var(--min-height);
|
|
||||||
--transition-property: height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: var(--start-width);
|
|
||||||
height: var(--start-height);
|
|
||||||
min-width: var(--min-width);
|
|
||||||
max-width: var(--max-width);
|
|
||||||
min-height: var(--min-height);
|
|
||||||
max-height: var(--max-height);
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: var(--transition-property) 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.headline-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([position='right']) .headline-container {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
overflow: hidden;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
::slotted([slot='content']) {
|
|
||||||
width: var(--max-width);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
import { expect, fixture as _fixture } from '@open-wc/testing';
|
|
||||||
import { html } from 'lit/static-html.js';
|
|
||||||
|
|
||||||
import '@lion/drawer/define';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @typedef {import('../src/LionDrawer').LionDrawer} LionDrawer
|
|
||||||
* @typedef {import('@lion/core').TemplateResult} TemplateResult
|
|
||||||
*/
|
|
||||||
const fixture = /** @type {(arg: TemplateResult) => Promise<LionDrawer>} */ (_fixture);
|
|
||||||
|
|
||||||
const template = html`
|
|
||||||
<lion-drawer>
|
|
||||||
<button slot="invoker">Open</button>
|
|
||||||
<p slot="headline">Headline</p>
|
|
||||||
<div slot="content" class="drawer">This is the content of the drawer</div>
|
|
||||||
</lion-drawer>
|
|
||||||
`;
|
|
||||||
|
|
||||||
describe('<lion-drawer>', () => {
|
|
||||||
describe('Drawer', () => {
|
|
||||||
it('sets position to "left" by default', async () => {
|
|
||||||
const drawer = await fixture(template);
|
|
||||||
expect(drawer.position).to.equal('left');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('has [position] attribute which serves as styling hook', async () => {
|
|
||||||
const drawer = await fixture(template);
|
|
||||||
expect(drawer).to.have.attribute('position').equal('left');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('sets the minimum and maximum width when position=left', async () => {
|
|
||||||
const drawer = await fixture(template);
|
|
||||||
const minWidth = getComputedStyle(drawer).getPropertyValue('--min-width');
|
|
||||||
const maxWidth = getComputedStyle(drawer).getPropertyValue('--max-width');
|
|
||||||
|
|
||||||
expect(drawer.minWidth).to.equal(minWidth);
|
|
||||||
expect(drawer.maxWidth).to.equal(maxWidth);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('sets the minimum and maximum width when position=right', async () => {
|
|
||||||
const drawer = await fixture(template);
|
|
||||||
drawer.position = 'right';
|
|
||||||
await drawer.updateComplete;
|
|
||||||
|
|
||||||
const minWidth = getComputedStyle(drawer).getPropertyValue('--min-width');
|
|
||||||
const maxWidth = getComputedStyle(drawer).getPropertyValue('--max-width');
|
|
||||||
|
|
||||||
expect(drawer.minWidth).to.equal(minWidth);
|
|
||||||
expect(drawer.maxWidth).to.equal(maxWidth);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('sets the minimum and maximum height when position=top', async () => {
|
|
||||||
const drawer = await fixture(template);
|
|
||||||
drawer.position = 'top';
|
|
||||||
await drawer.updateComplete;
|
|
||||||
|
|
||||||
const minHeight = getComputedStyle(drawer).getPropertyValue('--min-height');
|
|
||||||
const maxHeight = getComputedStyle(drawer).getPropertyValue('--max-height');
|
|
||||||
|
|
||||||
expect(drawer.minHeight).to.equal(minHeight);
|
|
||||||
expect(drawer.maxHeight).to.equal(maxHeight);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Accessibility', () => {
|
|
||||||
it('[collapsed] is a11y AXE accessible', async () => {
|
|
||||||
const drawer = await fixture(template);
|
|
||||||
await expect(drawer).to.be.accessible();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('[opened] is a11y AXE accessible', async () => {
|
|
||||||
const drawer = await fixture(template);
|
|
||||||
drawer.opened = true;
|
|
||||||
await expect(drawer).to.be.accessible();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Invoker', () => {
|
|
||||||
it('links id of content items to invoker via [aria-controls]', async () => {
|
|
||||||
const drawerElement = await fixture(template);
|
|
||||||
const invoker = drawerElement.querySelector('[slot=invoker]');
|
|
||||||
const content = drawerElement.querySelector('[slot=content]');
|
|
||||||
expect(invoker?.getAttribute('aria-controls')).to.equal(content?.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
|
|
||||||
const drawerElement = await fixture(template);
|
|
||||||
const invoker = drawerElement.querySelector('[slot=invoker]');
|
|
||||||
expect(invoker).to.have.attribute('aria-expanded', 'false');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
|
|
||||||
const drawerElement = await fixture(template);
|
|
||||||
const invoker = drawerElement.querySelector('[slot=invoker]');
|
|
||||||
drawerElement.opened = true;
|
|
||||||
await drawerElement.updateComplete;
|
|
||||||
expect(invoker).to.have.attribute('aria-expanded', 'true');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Contents', () => {
|
|
||||||
it('adds aria-labelledby referring to invoker id', async () => {
|
|
||||||
const drawerElement = await fixture(template);
|
|
||||||
const invoker = drawerElement.querySelector('[slot=invoker]');
|
|
||||||
const content = drawerElement.querySelector('[slot=content]');
|
|
||||||
expect(content).to.have.attribute('aria-labelledby', invoker?.id);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in a new issue