diff --git a/README.md b/README.md index fd32434..cdefa42 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,21 @@ -# AuthorIconElement [![](https://data.jsdelivr.com/v1/package/npm/@author.io/element-icon/badge)](https://www.jsdelivr.com/package/npm/@author.io/element-icon?path=dist) [![Build Status](https://travis-ci.org/author-elements/icon.svg?branch=master&style=for-the-badge)](https://travis-ci.org/author-elements/icon) +# AuthorIconElement [![](https://data.jsdelivr.com/v1/package/npm/@author.io/element-media/badge)](https://www.jsdelivr.com/package/npm/@author.io/element-media?path=dist) [![Build Status](https://travis-ci.org/author-elements/media.svg?branch=master&style=for-the-badge)](https://travis-ci.org/author-elements/media) -![Source Size](https://img.shields.io/github/size/author-elements/icon/src/element.js.svg?colorB=%23333333&label=Source&logo=JavaScript&logoColor=%23aaaaaa&style=for-the-badge) ![Deliverable Size](https://img.shields.io/bundlephobia/minzip/@author.io/element-icon.svg?colorB=%23333333&label=Minified-Gzipped&logo=JavaScript&style=for-the-badge) ![npm](https://img.shields.io/npm/v/@author.io/element-icon.svg?colorB=%23333&label=%40author.io%2Felement-icon&logo=npm&style=for-the-badge) +![Source Size](https://img.shields.io/github/size/author-elements/media/src/element.js.svg?colorB=%23333333&label=Source&logo=JavaScript&logoColor=%23aaaaaa&style=for-the-badge) ![Deliverable Size](https://img.shields.io/bundlephobia/minzip/@author.io/element-media.svg?colorB=%23333333&label=Minified-Gzipped&logo=JavaScript&style=for-the-badge) ![npm](https://img.shields.io/npm/v/@author.io/element-media.svg?colorB=%23333&label=%40author.io%2Felement-media&logo=npm&style=for-the-badge) We're using BrowserStack to make sure these components work on the browsers developers care about. - + ## Usage There are 4 versions of this element: -1. *author-icon.min.js* (ES6 Minified for Production) -1. _author-icon.js_ (ES6 Unminified for Debugging) -1. *author-icon.es5.min.js* (ES5 Minified for Production) -1. _author-icon.es5.js_ (ES5 Unminified for Debugging) +1. *author-media.min.js* (ES6 Minified for Production) +1. _author-media.js_ (ES6 Unminified for Debugging) +1. *author-media.es5.min.js* (ES5 Minified for Production) +1. _author-media.es5.js_ (ES5 Unminified for Debugging) Each version has it's own source map, so it's always possible to trace activity back to a specific code block in the source. @@ -27,7 +27,7 @@ You only need to choose one of these files. If you need to support Internet Expl - + ``` @@ -38,9 +38,9 @@ If the [base class](https://github.com/author-elements/base) is not yet installe `npm install @author.io/element-base -S` -Next, install the icon module locally: +Next, install the media module locally: -`npm install @author.io/element-icon -S` +`npm install @author.io/element-media -S` Then include them in your HTML: @@ -48,7 +48,7 @@ Then include them in your HTML: - + diff --git a/karma.conf.es5.js b/karma.conf.es5.js index 73b660c..de7f5d1 100644 --- a/karma.conf.es5.js +++ b/karma.conf.es5.js @@ -1,4 +1,4 @@ -let customize = require('@author.io/karma-customelements')('test/es5', './dist/author-icon.es5.js', 'BrowserStack') +let customize = require('@author.io/karma-customelements')('test/es5', './dist/author-media.es5.js', 'BrowserStack') module.exports = config => { config.set(Object.assign(customize(config), { diff --git a/karma.conf.es6-modules.js b/karma.conf.es6-modules.js index 55a90d4..348dcfc 100644 --- a/karma.conf.es6-modules.js +++ b/karma.conf.es6-modules.js @@ -1,4 +1,4 @@ -const customize = require('@author.io/karma-customelements')('test/es6-modules', './dist/author-icon.js', 'BrowserStack') +const customize = require('@author.io/karma-customelements')('test/es6-modules', './dist/author-media.js', 'BrowserStack') module.exports = config => { config.set(Object.assign(customize(config, true, true), { diff --git a/karma.conf.es6.js b/karma.conf.es6.js index c83486e..17be236 100644 --- a/karma.conf.es6.js +++ b/karma.conf.es6.js @@ -1,4 +1,4 @@ -const customize = require('@author.io/karma-customelements')('test/es6', './dist/author-icon.js', 'BrowserStack') +const customize = require('@author.io/karma-customelements')('test/es6', './dist/author-media.js', 'BrowserStack') module.exports = config => { config.set(Object.assign(customize(config, true, false), { diff --git a/package-lock.json b/package-lock.json index 3f02555..9a048be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@author.io/element-icon", - "version": "1.0.0", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5138,9 +5138,9 @@ } }, "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "dev": true }, "lodash.memoize": { @@ -5987,11 +5987,6 @@ "path-exists": "^3.0.0" } }, - "lodash": { - "version": "4.17.11", - "bundled": true, - "dev": true - }, "lodash.flattendeep": { "version": "4.4.0", "bundled": true, diff --git a/package.json b/package.json index d215270..5c5a7fa 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "@author.io/element-icon", + "name": "@author.io/element-media", "version": "1.1.0", - "description": "author-icon custom element (web component).", - "main": "dist/author-icon.min.js", + "description": "author-media custom element (web component).", + "main": "dist/author-media.min.js", "scripts": { "build": "npm run clean && rollup -c ./rollup.release.config.js", "build-dev": "npm run build && npm run build-showroom", @@ -25,7 +25,7 @@ ], "repository": { "type": "git", - "url": "git+https://github.com/author-elements/icon.git" + "url": "git+https://github.com/author-elements/media.git" }, "keywords": [ "author", @@ -33,7 +33,7 @@ "component", "custom", "element", - "icon", + "media", "chassis", "ngn" ], @@ -53,9 +53,9 @@ ], "license": "MIT", "bugs": { - "url": "https://github.com/author-elements/icon/issues" + "url": "https://github.com/author-elements/media/issues" }, - "homepage": "https://github.com/author-elements/icon#readme", + "homepage": "https://github.com/author-elements/media#readme", "devDependencies": { "@author.io/karma-customelements": "^1.1.11", "@author.io/rollup-plugin-wcbuilder": "^1.1.4", diff --git a/resources/placeholder.svg b/resources/placeholder.svg new file mode 100644 index 0000000..3ee2ee7 --- /dev/null +++ b/resources/placeholder.svg @@ -0,0 +1,8 @@ + + placeholder + + + + + + diff --git a/rollup.release.config.js b/rollup.release.config.js index d60104e..fbb5177 100644 --- a/rollup.release.config.js +++ b/rollup.release.config.js @@ -4,7 +4,7 @@ import {terser} from 'rollup-plugin-terser' import wcbuilder from '@author.io/rollup-plugin-wcbuilder' const input = './src/element.js' -const outfile = 'author-icon.js' +const outfile = 'author-media.js' const outdir = './dist' const format = 'iife' const pkg = require('./package.json') diff --git a/showroom/package.json b/showroom/package.json index dbfc8a4..e9372b3 100644 --- a/showroom/package.json +++ b/showroom/package.json @@ -1,7 +1,7 @@ { - "name": "author-icon-showroom", + "name": "author-media-showroom", "version": "1.0.0", - "description": "Demo for author-icon component", + "description": "Demo for author-media component", "main": "index.js", "scripts": { "build": "node build.js --prod", diff --git a/showroom/src/index.html b/showroom/src/index.html index da2fa5d..8bb332c 100644 --- a/showroom/src/index.html +++ b/showroom/src/index.html @@ -4,7 +4,7 @@ - <author-icon> Demo + <author-media> Demo @@ -13,13 +13,13 @@ - + - +
-

<author-icon> Demo

+

<author-media> Demo