[mobile-accordion-element] adds mobile-accordion-element

README.md

@@ -18,13 +18,14 @@ Elements are divided into 3 categories.
 
 ### Interactions
 
-| Package            | Description                                                             | Version |
-| ------------------ | ----------------------------------------------------------------------- | ------- |
-| accordion-element  | Single Accordion element                                                | `0.1.0` |
-| accordion-group    | Accordion group to hold multiple elements                               | `0.1.0` |
-| carousel-element   | A carousel element that wraps the glide.js library for sliding elements | `0.1.1` |
-| slider-element     | CSS only slider element to slide child elements                         | `0.4.3` |
-| transition-classes | An element that applies classes for various stages of a transition      | `0.1.0` |
+| Package                  | Description                                                             | Version |
+| ------------------------ | ----------------------------------------------------------------------- | ------- |
+| accordion-element        | Single Accordion element                                                | `0.1.0` |
+| accordion-group          | Accordion group to hold multiple elements                               | `0.1.0` |
+| carousel-element         | A carousel element that wraps the glide.js library for sliding elements | `0.1.1` |
+| mobile-accordion-element | Desktop accordion element only, falls back to two blocks on mobile      | `0.1.0` |
+| slider-element           | CSS only slider element to slide child elements                         | `0.4.3` |
+| transition-classes       | An element that applies classes for various stages of a transition      | `0.1.0` |
 
 <!-- Please move these up once they are implemented
 | modal-element        |                                                 | TBD  |

packages/interactions/mobile-accordion-element/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+<!--
+   PRs should document their user-visible changes (if any) in the
+   Unreleased section, uncommenting the header as necessary.
+-->
+
+<!-- ## Unreleased -->
+<!-- ### Added -->
+<!-- ### Changed -->
+<!-- ### Removed -->
+<!-- ### Fixed -->
+
+## [0.1.0] - 2020-10-16
+
+### Added
+* initial release
+

packages/interactions/mobile-accordion-element/README.md

@@ -0,0 +1,21 @@
+# MobileAccordionElement
+
+`mobile-accordion-element` enables you to...
+
+## How to use
+
+### Installation
+
+```sh
+npm i --save @webtides/mobile-accordion-element
+```
+
+```js
+import '@webtides/mobile-accordion-element';
+```
+
+### Example
+
+```html
+<mobile-accordion-element></mobile-accordion-element>
+```

packages/interactions/mobile-accordion-element/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@webtides/mobile-accordion-element",
+  "version": "0.1.0",
+  "description": "An element that...",
+  "author": "@webtides",
+  "homepage": "https://github.com/webtides/element-library",
+  "license": "MIT",
+  "type": "module",
+  "main": "src/mobile-accordion-element.js",
+  "module": "src/mobile-accordion-element.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webtides/element-library.git",
+    "directory": "packages/interactions/mobile-accordion-element"
+  },
+  "scripts": {
+    "test": "karma start ../../../karma.conf.js --grep \"packages/interactions/mobile-accordion-element/tests/**/*.test.js\"",
+    "test:watch": "karma start ../../../karma.conf.js --auto-watch=true --single-run=false --grep \"packages/interactions/mobile-accordion-element/tests/**/*.test.js\""
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "mobile-accordion-element"
+  ],
+  "files": [
+    "docs",
+    "src",
+    "stories",
+    "tests",
+    "translations",
+    "*.js"
+  ],
+  "dependencies": {
+    "@webtides/accordion-element": "0.1.0",
+    "@webtides/element-js": "0.3.0"
+  },
+  "devDependencies": {
+    "@open-wc/demoing-storybook": "^1.13.3",
+    "@open-wc/testing": "^2.5.0"
+  }
+}
+
+

packages/interactions/mobile-accordion-element/src/mobile-accordion-element.css

@@ -0,0 +1,4 @@
+mobile-accordion-element {
+    display: block;
+}
+

packages/interactions/mobile-accordion-element/src/mobile-accordion-element.js

@@ -0,0 +1,72 @@
+import { html, defineElement } from '@webtides/element-js';
+import BaseAccordionElement from '@webtides/accordion-element';
+import style from './mobile-accordion-element.css';
+
+export default class MobileAccordionElement extends BaseAccordionElement {
+	renderMobileTemplate = true;
+
+	constructor() {
+        super({ styles: [style] });
+    }
+
+	properties() {
+		return {
+			open: false,
+			maxWidth: 1023,
+		};
+	}
+
+	get mediaQuery() {
+		return `(max-width: ${this.maxWidth}px)`;
+	}
+
+	connected() {
+		const mediaQueryList = window.matchMedia(this.mediaQuery);
+		this.renderMobileTemplate = mediaQueryList.matches;
+
+		mediaQueryList.addEventListener('change', event => {
+			this.renderMobileTemplate = mediaQueryList.matches;
+			this.requestUpdate().then(() => {
+				this.evaluateState();
+			});
+		});
+
+		this.requestUpdate().then(() => {
+			this.evaluateState();
+		});
+	}
+
+	evaluateState() {
+		if (this.renderMobileTemplate) {
+			this.open === true ? this.expand() : this.collapse();
+		}
+	}
+
+	template() {
+		return this.renderMobileTemplate ? this.mobileTemplate() : this.desktopTemplate();
+	}
+
+	mobileTemplate() {
+		return html`
+            <div part="title-wrapper" ref="header" data-toggle>
+                <slot name="header"></slot>
+                ${this.iconsTemplate()}
+            </div>
+            <div part="content-wrapper" class="content-wrapper" ref="content">
+                <slot name="content"></slot>
+            </div>
+        `;
+	}
+
+	desktopTemplate() {
+		return html`
+            <slot name="header"></slot>
+            <slot name="content"></slot>
+        `;
+	}
+}
+
+export function define() {
+	defineElement('mobile-accordion-element', MobileAccordionElement);
+}
+

packages/interactions/mobile-accordion-element/stories/mobile-accordion-element.stories.js

@@ -0,0 +1,20 @@
+import { Story, Meta, html } from '@open-wc/demoing-storybook';
+import { define } from '@webtides/mobile-accordion-element';
+define();
+
+export default {
+	title: 'Interactions/MobileAccordionElement',
+	component: 'mobile-accordion-element',
+};
+
+export const singleComponent = () => html`
+	<mobile-accordion-element class="block">
+		<div slot="header" class="">Resize the screen width to see the effect</div>
+		<ul slot="content" class="">
+			<li>Item 1</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+			<li>Item 4</li>
+		</ul>
+	</mobile-accordion-element>
+`;

packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.feature.test.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-expressions */
+import { fixture, defineCE, assert, oneEvent, nextFrame } from '@open-wc/testing';
+import { define } from '@webtides/mobile-accordion-element';
+define();
+
+describe('Feature | MobileAccordionElement', () => {
+    it('can connect without errors', async () => {
+        const el = await fixture(`<mobile-accordion-element></mobile-accordion-element>`);
+        await nextFrame();
+    });
+});
+

packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.unit.test.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-expressions */
+import { fixture, defineCE, assert, oneEvent, nextFrame } from '@open-wc/testing';
+import MobileAccordionElement from '../src/mobile-accordion-element';
+
+describe('Unit | MobileAccordionElement', () => {
+    it('can be created without errors', async () => {
+        const el = new MobileAccordionElement;
+    });
+});
+