[select-field] adds a select-field to the form fields

packages/forms/select-field/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-09-25
+
+### Added
+* initial release
+

packages/forms/select-field/README.md

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

packages/forms/select-field/package.json

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

packages/forms/select-field/src/select-field.css

@@ -0,0 +1,4 @@
+select-field {
+    display: block;
+}
+

packages/forms/select-field/src/select-field.js

@@ -0,0 +1,52 @@
+import { defineElement, html } from '@webtides/element-js';
+import FormField from '@webtides/form-field';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import style from './select-field.css';
+
+export default class SelectField extends FormField {
+    constructor() {
+        super({ styles: [style] });
+    }
+
+    properties() {
+        return {
+			...super.properties(),
+			options: [], // ['string1', 'string2'] or [{value: 'value', label: 'label'}, ...]
+		};
+    }
+
+	fieldTemplate() {
+		return html`
+            <select
+                ref="input"
+                id="input-${this.name}"
+                name="${this.name}"
+                value="${this.value}"
+                ?required="${this.required}"
+                ?disabled="${this.disabled}"
+                aria-describedby="${this.name}-help"
+            >
+                ${this.options.map(option => {
+			return html`
+                        <option
+                            value=${ifDefined(option.value ?? undefined)}
+                            ?selected=${option.selected && !!option.selected}
+                        >
+                            ${option.label ?? option}
+                        </option>
+                    `;
+		})}
+            </select>
+            ${this.dropdownIndicatorTemplate()}
+        `;
+	}
+
+	dropdownIndicatorTemplate() {
+		return html` <div class="icon">&or;</div> `;
+	}
+}
+
+export function define() {
+	defineElement('select-field', SelectField);
+}
+

packages/forms/select-field/stories/select-field.stories.js

@@ -0,0 +1,27 @@
+import { Story, Meta, html } from '@open-wc/demoing-storybook';
+import { define } from '@webtides/select-field';
+define();
+
+export default {
+    title: 'Form Fields/SelectField',
+    component: 'select-field',
+};
+
+export const stringOptions = () => html`
+	<select-field
+		name="country"
+		options='["Germany", "Canada", "US and A"]'
+		label="Country"
+		help-message="We would like to know where you are from"
+	></select-field>
+`;
+
+export const objectOptions = () => html`
+	<select-field
+		name="country"
+		options='[{"value":"DE", "label":"Germany"}, {"value":"CA", "label":"Canada"}, {"value":"USA", "label":"US and A"}]'
+		label="Country"
+		help-message="We would like to know where you are from"
+	></select-field>
+`;
+

packages/forms/select-field/tests/select-field.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/select-field';
+define();
+
+describe('Feature | SelectField', () => {
+    it('can connect without errors', async () => {
+        const el = await fixture(`<select-field></select-field>`);
+        await nextFrame();
+    });
+});
+

packages/forms/select-field/tests/select-field.unit.test.js

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