author-elements · dependabot · Mar 30, 2020 · Mar 30, 2020
diff --git 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)
 
 <!-- TODO: Add description -->
 
-![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.
 
-<a href="https://browserstack.com"><img src="https://github.com/author-elements/icon/raw/master/browserstack.png" height="30px"/></a>
+<a href="https://browserstack.com"><img src="https://github.com/author-elements/media/raw/master/browserstack.png" height="30px"/></a>
 
 ## 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
 <html>
   <head>
     <script src="https://cdn.author.io/author-elements/base/1.0.0/author-base.min.js"></script>
-    <script src="https://cdn.author.io/author-elements/icon/x.x.x/author-icon.min.js"></script>
+    <script src="https://cdn.author.io/author-elements/media/x.x.x/author-media.min.js"></script>
   </head>
 </html>
 ```
@@ -38,17 +38,17 @@ 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:
 
 ```html
 <html>
   <head>
     <script src="./node_modules/@author.io/element-base/dist/author-base.min.js"></script>
-    <script src="./node_modules/@author.io/element-icon/dist/author-icon.min.js"></script>
+    <script src="./node_modules/@author.io/element-media/dist/author-media.min.js"></script>
   </head>
 
   <body>

diff --git 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
@@ -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
@@ -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
diff --git 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,15 +25,15 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/author-elements/icon.git"
+    "url": "git+https://github.com/author-elements/media.git"
   },
   "keywords": [
     "author",
     "web",
     "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
diff --git 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
@@ -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
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width" />
 
-    <title>&lt;author-icon&gt; Demo</title>
+    <title>&lt;author-media&gt; Demo</title>
 
     <link rel="stylesheet" href="css/main.css">
     <link rel="stylesheet" href="lib/prismjs/prism.css">
@@ -13,13 +13,13 @@
     <script src="https://cdn.author.io/ngnx/latest/complete.min.js"></script>
 
     <script src="webcomponents/author-base.js"></script>
-    <script src="webcomponents/author-icon.js"></script>
+    <script src="webcomponents/author-media.js"></script>
   </head>
 
-  <body class="author-icon demo" data-theme="default">
+  <body class="author-media demo" data-theme="default">
     <header>
       <div class="width constraint">
-        <h1>&lt;author-icon&gt; Demo</h1>
+        <h1>&lt;author-media&gt; Demo</h1>
         <aside class="links">
           <h2 class="hidden">Navigation</h2>
           <a href="https://author.io" target="_blank">author.io</a>
@@ -29,8 +29,7 @@ <h2 class="hidden">Navigation</h2>
 
     <main>
       <div class="content">
-        <author-icon src="assets/icons/check-circle.svg"></author-icon>
-        <author-icon src="assets/icons/heyyyyy.svg"></author-icon>
+        <author-media type="img" src="assets/heyyyyy.jpg"></author-media>
       </div>
     </main>
   </body>

diff --git a/src/element.js b/src/element.js
@@ -1,4 +1,4 @@
-class AuthorIconElement extends AuthorBaseElement(HTMLElement) {
+class AuthorMediaElement extends AuthorBaseElement(HTMLElement) {
   constructor () {
     super(`{{TEMPLATE-STRING}}`)
 
@@ -18,25 +18,18 @@ class AuthorIconElement extends AuthorBaseElement(HTMLElement) {
       cache: {
         private: true,
         readonly: true,
-        default: window.caches.open('author-icons')
+        default: window.caches.open('author-media')
       },
 
       placeholder: {
         private: true,
         readonly: true,
-        default: `<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <title>Placeholder Icon</title>
-          <desc>Copyright ${new Date().getFullYear()} Author.io</desc>
-          <g>
-            <mask id="mask-2" fill="white">
-              <path d="M0,0 L4.8,0 L4.8,24 L0,24 L0,0 Z M7.68,0 L10.56,0 L10.56,24 L7.68,24 L7.68,0 Z M13.44,0 L16.32,0 L16.32,24 L13.44,24 L13.44,0 Z M19.2,0 L24,0 L24,24 L19.2,24 L19.2,0 Z"></path>
-            </mask>
-            <g mask="url(#mask-2)">
-              <mask id="mask-4" fill="white">
-                <path d="M0,0 L24,0 L24,4.8 L0,4.8 L0,0 Z M0,19.2 L24,19.2 L24,24 L0,24 L0,19.2 Z M0,13.44 L24,13.44 L24,16.32 L0,16.32 L0,13.44 Z M0,7.68 L24,7.68 L24,10.56 L0,10.56 L0,7.68 Z"></path>
-              </mask>
-              <path d="M3.84,0 L20.16,0 C22.2807734,-3.89579761e-16 24,1.71922656 24,3.84 L24,20.16 C24,22.2807734 22.2807734,24 20.16,24 L3.84,24 C1.71922656,24 2.5971984e-16,22.2807734 0,20.16 L0,3.84 C-2.5971984e-16,1.71922656 1.71922656,3.89579761e-16 3.84,0 Z M3.84,1.92 C2.77961328,1.92 1.92,2.77961328 1.92,3.84 L1.92,20.16 C1.92,21.2203867 2.77961328,22.08 3.84,22.08 L20.16,22.08 C21.2203867,22.08 22.08,21.2203867 22.08,20.16 L22.08,3.84 C22.08,2.77961328 21.2203867,1.92 20.16,1.92 L3.84,1.92 Z" fill="#545454" mask="url(#mask-4)"></path>
-            </g>
+        default: `<svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <title>placeholder</title>
+          <g id="placeholder" fill="#F2F2F2" stroke="#D0D0D0" stroke-width="3">
+            <rect id="rectangle" x="1.5" y="1.5" width="297" height="297"></rect>
+            <line x1="2" y1="2" x2="298" y2="298" id="line"></line>
+            <line x1="2" y1="2" x2="298" y2="298" id="line" transform="translate(150.000000, 150.000000) scale(-1, 1) translate(-150.000000, -150.000000) "></line>
           </g>
         </svg>`
       }
@@ -103,6 +96,6 @@ class AuthorIconElement extends AuthorBaseElement(HTMLElement) {
   }
 }
 
-customElements.define('author-icon', AuthorIconElement)
+customElements.define('author-icon', AuthorMediaElement)
 
-export default AuthorIconElement
+export default AuthorMediaElement
diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,5 @@
 :host {
-  display: inline-flex;
+  display: flex;
 }
 
 :host *,