feat: Initial implementation

cfware · Oct 30, 2020 · 0b2789f · 0b2789f
commit 0b2789f
Show file tree

Hide file tree

Showing 40 changed files with 2,579 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+	"env": {
+		"browser": true
+	}
+}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,22 @@
+name: Tests
+on: [push, pull_request]
+
+env:
+  CI: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: 14
+    - run: npm install
+    - name: Lint
+      run: npm run -s pretest
+    - name: Tests
+      run: npm run -s tests-only
+    - name: Coverage
+      run: npm run -s posttest
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+*.tgz
+coverage
+node_modules
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,9 @@
+*.tgz
+coverage
+nyc.config.js
+.eslintrc.json
+.github
+pkgs
+fixtures
+test.js
+tap-snapshots
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+package-lock=false
+access=public
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 CFWare, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+# @cfware/tabs [![NPM Version][npm-image]][npm-url]
+
+Basic page tabs element
+
+## Usage
+
+Import to your application:
+```js
+import '@cfware/tabs';
+```
+
+Create a tabs element:
+```html
+<cfware-tabs>
+	<div slot="title">Title 1</div>
+	<div slot="contents">Tab 1 Contents</div>
+	<div slot="title">Title 2</div>
+	<div slot="contents">Tab 2 Contents</div>
+</cfware-tabs>
+```
+
+[npm-image]: https://img.shields.io/npm/v/@cfware/tabs.svg
+[npm-url]: https://npmjs.org/package/@cfware/tabs
diff --git a/fixtures/tabs-preset.html b/fixtures/tabs-preset.html
@@ -0,0 +1,41 @@
+<html>
+	<head>
+		<title>&lt;cfware-tabs&gt; test</title>
+		<style>
+			html, body {
+				display: inline-block!important;
+				margin: 0;
+				width: -moz-fit-content;
+			}
+
+			#test {
+				height: 300px;
+				width: 600px;
+				display: grid;
+			}
+		</style>
+		<script type="module" src="tabs.js"></script>
+		<script type="module" src="/node_modules/@cfware-app/icon/icons.js"></script>
+	</head>
+	<body>
+		<div id="test">
+			<cfware-tabs selected-index="1">
+				<div slot="title" id="tab1"><cfware-icon icon="&#xF007;"></cfware-icon></div>
+				<div slot="contents">
+					<cfware-icon icon="&#xF007;"></cfware-icon>
+					<cfware-icon icon="&#xF007;"></cfware-icon>
+				</div>
+				<div slot="title" id="tab2"><cfware-icon icon="&#xF093;"></cfware-icon></div>
+				<div slot="contents">
+					<cfware-icon icon="&#xF093;"></cfware-icon>
+					<cfware-icon icon="&#xF093;"></cfware-icon>
+				</div>
+				<div slot="title" id="tab3"><cfware-icon icon="&#xF2ED;"></cfware-icon></div>
+				<div slot="contents">
+					<cfware-icon icon="&#xF2ED;"></cfware-icon>
+					<cfware-icon icon="&#xF2ED;"></cfware-icon>
+				</div>
+			</cfware-tabs>
+		</div>
+	</body>
+</html>
diff --git a/fixtures/tabs.html b/fixtures/tabs.html
@@ -0,0 +1,41 @@
+<html>
+	<head>
+		<title>&lt;cfware-tabs&gt; test</title>
+		<style>
+			html, body {
+				display: inline-block!important;
+				margin: 0;
+				width: -moz-fit-content;
+			}
+
+			#test {
+				height: 300px;
+				width: 600px;
+				display: grid;
+			}
+		</style>
+		<script type="module" src="tabs.js"></script>
+		<script type="module" src="/node_modules/@cfware-app/icon/icons.js"></script>
+	</head>
+	<body>
+		<div id="test">
+			<cfware-tabs>
+				<div slot="title" id="tab1"><cfware-icon icon="&#xF007;"></cfware-icon></div>
+				<div slot="contents">
+					<cfware-icon icon="&#xF007;"></cfware-icon>
+					<cfware-icon icon="&#xF007;"></cfware-icon>
+				</div>
+				<div slot="title" id="tab2"><cfware-icon icon="&#xF093;"></cfware-icon></div>
+				<div slot="contents">
+					<cfware-icon icon="&#xF093;"></cfware-icon>
+					<cfware-icon icon="&#xF093;"></cfware-icon>
+				</div>
+				<div slot="title" id="tab3"><cfware-icon icon="&#xF2ED;"></cfware-icon></div>
+				<div slot="contents">
+					<cfware-icon icon="&#xF2ED;"></cfware-icon>
+					<cfware-icon icon="&#xF2ED;"></cfware-icon>
+				</div>
+			</cfware-tabs>
+		</div>
+	</body>
+</html>
diff --git a/nyc.config.js b/nyc.config.js
@@ -0,0 +1,3 @@
+import config from '@cfware/nyc';
+
+export default config.exclude('pkgs/**');
diff --git a/package.json b/package.json
@@ -0,0 +1,45 @@
+{
+	"name": "@cfware/tabs",
+	"version": "0.1.0",
+	"description": "Basic page tabs element",
+	"main": "tabs.js",
+	"exports": "./tabs.js",
+	"type": "module",
+	"scripts": {
+		"pretest": "cfware-lint .",
+		"tests-only": "nyc -s node --experimental-loader @istanbuljs/esm-loader-hook test.js",
+		"test": "npm run -s tests-only",
+		"posttest": "nyc report --check-coverage"
+	},
+	"engines": {
+		"node": ">=14.0.0"
+	},
+	"author": "Corey Farrell",
+	"license": "MIT",
+	"keywords": [
+		"custom-elements",
+		"tabs",
+		"html"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/cfware/tabs.git"
+	},
+	"bugs": {
+		"url": "https://github.com/cfware/tabs/issues"
+	},
+	"homepage": "https://github.com/cfware/tabs#readme",
+	"dependencies": {
+		"@cfware/shadow-element": "^0.15.1"
+	},
+	"devDependencies": {
+		"@cfware-app/icon": "file:pkgs/icon",
+		"@cfware/fastify-test-helper": "^0.7.0",
+		"@cfware/lint": "^2.0.4",
+		"@cfware/nyc": "^0.7.0",
+		"@cfware/tap-selenium-manager": "^1.1.0",
+		"@istanbuljs/esm-loader-hook": "^0.1.2",
+		"libtap": "^0.3.0",
+		"nyc": "^15.1.0"
+	}
+}
diff --git a/pkgs/icon/.npmrc b/pkgs/icon/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/pkgs/icon/fontawesome-free/LICENSE.txt b/pkgs/icon/fontawesome-free/LICENSE.txt
@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**
diff --git a/pkgs/icon/fontawesome-free/package.json b/pkgs/icon/fontawesome-free/package.json
@@ -0,0 +1,61 @@
+{
+  "_integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==",
+  "author": {
+    "name": "Dave Gandy",
+    "email": "dave@fontawesome.com",
+    "url": "http://twitter.com/davegandy"
+  },
+  "bugs": {
+    "url": "http://github.com/FortAwesome/Font-Awesome/issues"
+  },
+  "bundleDependencies": false,
+  "contributors": [
+    {
+      "name": "Brian Talbot",
+      "url": "http://twitter.com/talbs"
+    },
+    {
+      "name": "Travis Chase",
+      "url": "http://twitter.com/supercodepoet"
+    },
+    {
+      "name": "Rob Madole",
+      "url": "http://twitter.com/robmadole"
+    },
+    {
+      "name": "Geremia Taglialatela",
+      "url": "http://twitter.com/gtagliala"
+    },
+    {
+      "name": "Mike Wilkerson",
+      "url": "http://twitter.com/mw77"
+    }
+  ],
+  "dependencies": {},
+  "deprecated": false,
+  "description": "The iconic font, CSS, and SVG framework",
+  "engines": {
+    "node": ">=6"
+  },
+  "homepage": "https://fontawesome.com",
+  "keywords": [
+    "font",
+    "awesome",
+    "fontawesome",
+    "icon",
+    "svg",
+    "bootstrap"
+  ],
+  "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+  "main": "js/fontawesome.js",
+  "name": "@fortawesome/fontawesome-free",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FortAwesome/Font-Awesome.git"
+  },
+  "scripts": {
+    "postinstall": "node attribution.js"
+  },
+  "style": "css/fontawesome.css",
+  "version": "5.15.1"
+}
diff --git a/pkgs/icon/icon-chars.js b/pkgs/icon/icon-chars.js
@@ -0,0 +1,21 @@
+export const iconChars = {
+	ban: '\uF05E',
+	'caret-down': '\uF0D7',
+	'caret-right': '\uF0DA',
+	download: '\uF019',
+	edit: '\uF044',
+	envelope: '\uF0E0',
+	'exclamation-triangle': '\uF071',
+	'id-card': '\uF2C2',
+	list: '\uF03A',
+	lock: '\uF023',
+	microphone: '\uF130',
+	'phone-alt': '\uF879',
+	plus: '\uF067',
+	'question-circle': '\uF059',
+	'sign-out-alt': '\uF2F5',
+	times: '\uF00D',
+	'trash-alt': '\uF2ED',
+	upload: '\uF093',
+	user: '\uF007'
+};
diff --git a/pkgs/icon/icons.js b/pkgs/icon/icons.js
@@ -0,0 +1,36 @@
+import ShadowElement, {html, template, htmlNode, define, stringProperties} from '@cfware/shadow-element';
+
+document.head.append(htmlNode`
+	<style>
+		@font-face {
+			font-family: 'CFWare Icons';
+			font-style: normal;
+			font-weight: 900;
+			font-display: auto;
+			src: url("data:font/woff2;base64,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") format("woff2");
+		}
+	</style>
+`);
+
+class CFWareIcon extends ShadowElement {
+	get [template]() {
+		return html`
+			<style>
+				:host {
+					display: inline;
+					font-family: 'CFWare Icons';
+					font-weight: 900;
+					user-select: none;
+					cursor: default;
+				}
+			</style>
+			${this.icon}
+		`;
+	}
+}
+
+CFWareIcon[define]('cfware-icon', {
+	[stringProperties]: {
+		icon: ''
+	}
+});