diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-material')
13 files changed, 598 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-material/.bower.json b/catapult/third_party/polymer/components/paper-material/.bower.json new file mode 100644 index 00000000..ffeeced7 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/.bower.json @@ -0,0 +1,44 @@ +{ + "name": "paper-material", + "version": "1.0.7", + "description": "A material design container that looks like a lifted sheet of paper", + "private": true, + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "web-component", + "polymer", + "paper", + "container" + ], + "main": "paper-material.html", + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-material" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-material", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "paper-styles": "polymerelements/paper-styles#^1.0.0" + }, + "devDependencies": { + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "web-component-tester": "^4.0.0", + "test-fixture": "polymerelements/test-fixture#^1.0.0", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0" + }, + "_release": "1.0.7", + "_resolution": { + "type": "version", + "tag": "v1.0.7", + "commit": "a125df4f0720b375593b0f2e0174373620f24cde" + }, + "_source": "https://github.com/PolymerElements/paper-material.git", + "_target": "^1.0.5", + "_originalSource": "PolymerElements/paper-material" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/paper-material/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/paper-material/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..43d220da --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/paper-material/CONTRIBUTING.md#filing-issues --> +### Description +<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. --> + +### Expected outcome + +<!-- Example: The page stays the same color. --> + +### Actual outcome + +<!-- Example: The page turns pink. --> + +### Live Demo +<!-- Example: https://jsbin.com/cagaye/edit?html,output --> + +### Steps to reproduce + +<!-- Example +1. Put a `paper-foo` element in the page. +2. Open the page in a web browser. +3. Click the `paper-foo` element. +--> + +### Browsers Affected +<!-- Check all that apply --> +- [ ] Chrome +- [ ] Firefox +- [ ] Safari 9 +- [ ] Safari 8 +- [ ] Safari 7 +- [ ] Edge +- [ ] IE 11 +- [ ] IE 10 diff --git a/catapult/third_party/polymer/components/paper-material/.gitignore b/catapult/third_party/polymer/components/paper-material/.gitignore new file mode 100644 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/paper-material/.travis.yml b/catapult/third_party/polymer/components/paper-material/.travis.yml new file mode 100644 index 00000000..7205a984 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/.travis.yml @@ -0,0 +1,24 @@ +language: node_js +sudo: required +before_script: + - npm install -g bower polylint web-component-tester + - bower install + - polylint +env: + global: + - secure: >- + R8lCIZgsXsGs5DyUoTfZn0SyVglnf0RKyMQhr11/EtOlhAYA2LmGr9W0EpxsJ/+jyobIcmPMQ/MEpqcE4ZfkJNb3mwKYPfEcbD6zlQ/uDK7JX64r5ErPxynMn7cEUbhPkbmX0Kp5i7NK39cR9STth9gHN66Bfoq1Eoju0GFZ0no= + - secure: >- + KgR0+L67emjn9JkzZoyHkuY24OzRdX5NmHaKiOI2mpKF3XqTSzVRCLdlw1yL9D7apRAhrxFRqv0+Y0kJb44KZWUYl2kckZI85psSMx42Oj6SXgLwa+SNZ8FA/BIetSEYPtmXZTvcPlZwEWqulkagfYN3nw8ugo5Vno75piPtcLs= +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +script: + - xvfb-run wct + - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi' +dist: trusty diff --git a/catapult/third_party/polymer/components/paper-material/CONTRIBUTING.md b/catapult/third_party/polymer/components/paper-material/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/CONTRIBUTING.md @@ -0,0 +1,77 @@ +<!-- +This file is autogenerated based on +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md + +If you edit that file, it will get updated everywhere else. +If you edit this file, your changes will get overridden :) + +You can however override the jsbin link with one that's customized to this +specific element: + +jsbin=https://jsbin.com/cagaye/edit?html,output +--> + +# Polymer Elements +## Guide for Contributors + +Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: + +### Filing Issues + +**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: + + 1. **Who will use the feature?** _“As someone filling out a form…”_ + 2. **When will they use the feature?** _“When I enter an invalid value…”_ + 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ + +**If you are filing an issue to report a bug**, please provide: + + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: + + ```markdown + The `paper-foo` element causes the page to turn pink when clicked. + + ## Expected outcome + + The page stays the same color. + + ## Actual outcome + + The page turns pink. + + ## Steps to reproduce + + 1. Put a `paper-foo` element in the page. + 2. Open the page in a web browser. + 3. Click the `paper-foo` element. + ``` + + 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). + + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. + +### Submitting Pull Requests + +**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. + +When submitting pull requests, please provide: + + 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: + + ```markdown + (For a single issue) + Fixes #20 + + (For multiple issues) + Fixes #32, fixes #40 + ``` + + 2. **A succinct description of the design** used to fix any related issues. For example: + + ```markdown + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. + ``` + + 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. + +If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! diff --git a/catapult/third_party/polymer/components/paper-material/README.md b/catapult/third_party/polymer/components/paper-material/README.md new file mode 100644 index 00000000..d1ad7387 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/README.md @@ -0,0 +1,35 @@ + +<!--- + +This README is automatically generated from the comments in these files: +paper-material.html + +Edit those files, and our readme bot will duplicate them over here! +Edit this file, and the bot will squash your changes :) + +The bot does some handling of markdown. Please file a bug if it does the wrong +thing! https://github.com/PolymerLabs/tedium/issues + +--> + +[](https://travis-ci.org/PolymerElements/paper-material) + +_[Demo and API docs](https://elements.polymer-project.org/elements/paper-material)_ + + +##<paper-material> + +Material design: [Cards](https://www.google.com/design/spec/components/cards.html) + +`paper-material` is a container that renders two shadows on top of each other to +create the effect of a lifted piece of paper. + +Example: + +```html +<paper-material elevation="1"> + ... content ... +</paper-material> +``` + + diff --git a/catapult/third_party/polymer/components/paper-material/bower.json b/catapult/third_party/polymer/components/paper-material/bower.json new file mode 100644 index 00000000..2abf2f9f --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/bower.json @@ -0,0 +1,35 @@ +{ + "name": "paper-material", + "version": "1.0.7", + "description": "A material design container that looks like a lifted sheet of paper", + "private": true, + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "web-component", + "polymer", + "paper", + "container" + ], + "main": "paper-material.html", + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-material" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-material", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "paper-styles": "polymerelements/paper-styles#^1.0.0" + }, + "devDependencies": { + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "web-component-tester": "^4.0.0", + "test-fixture": "polymerelements/test-fixture#^1.0.0", + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0" + } +} diff --git a/catapult/third_party/polymer/components/paper-material/demo/index.html b/catapult/third_party/polymer/components/paper-material/demo/index.html new file mode 100644 index 00000000..c0b6d394 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/demo/index.html @@ -0,0 +1,84 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> +<head> + <title>paper-material demo</title> + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../paper-material.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + paper-material { + display: inline-block; + background: white; + box-sizing: border-box; + margin: 8px; + padding: 16px; + border-radius: 2px; + } + </style> +</head> +<body unresolved> + <div class="vertical-section-container centered"> + <h3>Paper-materials can have different elevations</h3> + <demo-snippet class="centered-demo"> + <template> + <paper-material elevation="0">0</paper-material> + <paper-material elevation="1">1</paper-material> + <paper-material elevation="2">2</paper-material> + <paper-material elevation="3">3</paper-material> + <paper-material elevation="4">4</paper-material> + <paper-material elevation="5">5</paper-material> + </template> + </demo-snippet> + + <h3>Changes in elevation can be animated</h3> + <demo-snippet class="centered-demo"> + <template> + <style> + #a1, #a2 { cursor: pointer; } + </style> + Tap each of these boxes! + <div> + <paper-material elevation="0" animated id="a1">animated</paper-material> + <paper-material elevation="3" id="a2">not animated</paper-material> + </div> + <script> + document.addEventListener('WebComponentsReady', function() { + a1.addEventListener('click', _onTap); + a2.addEventListener('click', _onTap); + }); + function _onTap(e) { + var target = e.target; + if (!target.down) { + target.elevation += 1; + if (target.elevation === 5) { + target.down = true; + } + } else { + target.elevation -= 1; + if (target.elevation === 0) { + target.down = false; + } + } + }; + </script> + </template> + </demo-snippet> + </div> +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-material/index.html b/catapult/third_party/polymer/components/paper-material/index.html new file mode 100644 index 00000000..7209e6d0 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/index.html @@ -0,0 +1,30 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> +<head> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + + <title>paper-material</title> + + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../polymer/polymer.html"> + <link rel="import" href="../iron-component-page/iron-component-page.html"> + +</head> +<body> + + <iron-component-page></iron-component-page> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-material/paper-material-shared-styles.html b/catapult/third_party/polymer/components/paper-material/paper-material-shared-styles.html new file mode 100644 index 00000000..b795f4f4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/paper-material-shared-styles.html @@ -0,0 +1,42 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<link rel="import" href="../paper-styles/shadow.html"> + +<dom-module id="paper-material-shared-styles"> + <template> + <style> + :host { + display: block; + position: relative; + } + + :host([elevation="1"]) { + @apply(--shadow-elevation-2dp); + } + + :host([elevation="2"]) { + @apply(--shadow-elevation-4dp); + } + + :host([elevation="3"]) { + @apply(--shadow-elevation-6dp); + } + + :host([elevation="4"]) { + @apply(--shadow-elevation-8dp); + } + + :host([elevation="5"]) { + @apply(--shadow-elevation-16dp); + } + </style> + </template> +</dom-module> diff --git a/catapult/third_party/polymer/components/paper-material/paper-material.html b/catapult/third_party/polymer/components/paper-material/paper-material.html new file mode 100644 index 00000000..29b34370 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/paper-material.html @@ -0,0 +1,81 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<link rel="import" href="../polymer/polymer.html"> +<link rel="import" href="../paper-styles/shadow.html"> +<link rel="import" href="paper-material-shared-styles.html"> + +<!-- +Material design: [Cards](https://www.google.com/design/spec/components/cards.html) + +`paper-material` is a container that renders two shadows on top of each other to +create the effect of a lifted piece of paper. + +Example: + + <paper-material elevation="1"> + ... content ... + </paper-material> + +@group Paper Elements +@demo demo/index.html +--> + +<dom-module id="paper-material"> + <template> + <style include="paper-material-shared-styles"></style> + <style> + :host([animated]) { + @apply(--shadow-transition); + } + :host { + @apply(--paper-material); + } + </style> + + <content></content> + </template> +</dom-module> +<script> + Polymer({ + is: 'paper-material', + + properties: { + /** + * The z-depth of this element, from 0-5. Setting to 0 will remove the + * shadow, and each increasing number greater than 0 will be "deeper" + * than the last. + * + * @attribute elevation + * @type number + * @default 1 + */ + elevation: { + type: Number, + reflectToAttribute: true, + value: 1 + }, + + /** + * Set this to true to animate the shadow when setting a new + * `elevation` value. + * + * @attribute animated + * @type boolean + * @default false + */ + animated: { + type: Boolean, + reflectToAttribute: true, + value: false + } + } + }); +</script> diff --git a/catapult/third_party/polymer/components/paper-material/test/index.html b/catapult/third_party/polymer/components/paper-material/test/index.html new file mode 100644 index 00000000..08fda477 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/test/index.html @@ -0,0 +1,24 @@ +<!DOCTYPE html><!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--><html><head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + <title>paper-material tests</title> + <script src="../../web-component-tester/browser.js"></script> +</head> +<body> + <script> + WCT.loadSuites([ + 'paper-material.html', + 'paper-material.html?dom=shadow' + ]); + </script> + + +</body></html> diff --git a/catapult/third_party/polymer/components/paper-material/test/paper-material.html b/catapult/third_party/polymer/components/paper-material/test/paper-material.html new file mode 100644 index 00000000..7949c112 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/test/paper-material.html @@ -0,0 +1,88 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> +<head> + <meta charset="UTF-8"> + <title>paper-material basic tests</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> + + <script src="../../webcomponentsjs/webcomponents.js"></script> + <script src="../../web-component-tester/browser.js"></script> + <link href="../paper-material.html" rel="import"> + +</head> +<body> + <test-fixture id="TrivialCard"> + <template> + <paper-material elevation="1"></paper-material> + </template> + </test-fixture> + + <test-fixture id="ProgressiveElevations"> + <template> + <paper-material elevation="1"></paper-material> + <paper-material elevation="2"></paper-material> + <paper-material elevation="3"></paper-material> + <paper-material elevation="4"></paper-material> + <paper-material elevation="5"></paper-material> + </template> + </test-fixture> + + <script> + suite('<paper-material>', function() { + suite('with a non-zero elevation attribute', function() { + var style; + var card; + + setup(function() { + card = fixture('TrivialCard'); + style = window.getComputedStyle(card); + }); + + test('has a shadow', function() { + expect(style.boxShadow).to.be.ok; + expect(style.boxShadow).to.not.be.eql('none'); + }); + + test('loses shadow with elevation value 0', function() { + card.elevation = 0; + expect(style.boxShadow).to.be.eql('none'); + }); + }); + + suite('progressively increasing values of elevation', function() { + var cards; + + setup(function() { + cards = fixture('ProgressiveElevations'); + }); + + test('yield progressively "deeper" cards', function() { + var lastStyle; + var style; + + expect(cards.length).to.be.eql(5); + + cards.forEach(function (card) { + style = window.getComputedStyle(card); + + expect(style.boxShadow).to.be.ok; + expect(style.boxShadow).to.not.be.eql('none'); + expect(style.boxShadow).to.not.be.eql(lastStyle && lastStyle.boxShadow); + + lastStyle = style; + }); + }); + }); + }); + </script> +</body> +</html> |