feat(calendar): add reusable calendar

Co-authored-by: Erik Kroes <erik.kroes@ing.com>
Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com>
Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
Co-authored-by: Thomas Allmer <thomas.allmer@ing.com>

Author: 5 people

packages/calendar/README.md

@@ -0,0 +1,44 @@
+# Calendar
+
+[//]: # (AUTO INSERT HEADER PREPUBLISH)
+
+`lion-calendar` is a reusable and accessible calendar view.
+
+## Features
+
+- fully accessible keyboard navigation (Arrow Keys, PgUp, PgDn, ALT+PgUp, ALT+PgDn)
+- **minDate**: disables all dates before a given date
+- **maxDate**: disables all dates after a given date
+- **disableDates**: disables some dates within an available range
+- **selectedDate**: currently selected date
+- **centralDate**: date that determines the currently visible month and that will be focused when keyboard moves the focus to the month grid
+- **focusedDate**: (getter only) currently focused date (if there is any with real focus)
+- **focusDate(date)**: focus on a certain date
+- **focusSelectedDate()**: focus on the current selected date
+- **focusCentralDate()**: focus on the current central date
+- **firstDayOfWeek**: typically Sunday (default) or Monday
+- **weekdayHeaderNotation**: long/short/narrow for the current locale (e.g. Thursday/Thu/T)
+- **locale**: different locale for the current component only
+
+## How to use
+
+### Installation
+
+```sh
+npm i --save @lion/calendar
+```
+
+```js
+import '@lion/calendar/lion-calendar.js';
+```
+
+### Example
+
+```html
+<lion-calendar
+  .minDate="${new Date()}"
+  .maxDate="${new Date('2019/12/09')}"
+  .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
+>
+</lion-calendar>
+```

packages/calendar/index.js

@@ -0,0 +1 @@
+export { LionCalendar } from './src/LionCalendar.js';

packages/calendar/lion-calendar.js

@@ -0,0 +1,3 @@
+import { LionCalendar } from './src/LionCalendar.js';
+
+customElements.define('lion-calendar', LionCalendar);

packages/calendar/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@lion/calendar",
+  "version": "0.0.0",
+  "description": "Reusable calendar component",
+  "author": "ing-bank",
+  "homepage": "https://github.com/ing-bank/lion/",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ing-bank/lion.git",
+    "directory": "packages/calendar"
+  },
+  "scripts": {
+    "prepublishOnly": "../../scripts/npm-prepublish.js"
+  },
+  "keywords": [
+    "lion",
+    "web-components",
+    "calendar"
+  ],
+  "main": "index.js",
+  "module": "index.js",
+  "files": [
+    "src",
+    "stories",
+    "test",
+    "translations",
+    "*.js"
+  ],
+  "dependencies": {
+    "@lion/core": "^0.1.4",
+    "@lion/localize": "^0.1.7"
+  },
+  "devDependencies": {
+    "@lion/button": "^0.1.7",
+    "@open-wc/demoing-storybook": "^0.2.0",
+    "@open-wc/testing": "^0.11.1",
+    "sinon": "^7.2.2"
+  }
+}