Skip to content

Commit 3ce2dfc

Browse files
unknownunknown
unknown
authored and
unknown
committed
Initial commit
0 parents  commit 3ce2dfc

File tree

9 files changed

+356
-0
lines changed

9 files changed

+356
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# gold-postcode-input
2+
3+
`gold-postcode-input` is a Material Design field for entering a valid Australian postcode.
4+
Example:
5+
6+
```html
7+
<gold-postcode-input></gold-postcode-input>
8+
```

‎bower.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "gold-postcode-input",
3+
"version": "0.1.0",
4+
"authors": [
5+
"David Howell <david@dynamicmethods.com.au>"
6+
],
7+
"description": "An input field for an Australian postcode.",
8+
"keywords": [
9+
"web-component",
10+
"web-components",
11+
"polymer",
12+
"gold",
13+
"input"
14+
],
15+
"main": "gold-postcode-input.html",
16+
"private": true,
17+
"repository": {
18+
"type": "git",
19+
"url": "git://github.com/dynmeth/gold-postcode-input.git"
20+
},
21+
"license": "http://polymer.github.io/LICENSE.txt",
22+
"homepage": "https://github.com/davidh/gold-postcode-input/",
23+
"ignore": [
24+
"/.*",
25+
"/test/",
26+
"/demo/"
27+
],
28+
"dependencies": {
29+
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
30+
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
31+
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
32+
"paper-input": "PolymerElements/paper-input#^1.0.0",
33+
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
34+
"polymer": "Polymer/polymer#^1.0.0",
35+
"iron-input": "PolymerElements/iron-input#~1.0.1"
36+
},
37+
"devDependencies": {
38+
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
39+
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
40+
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
41+
"web-component-tester": "*",
42+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
43+
}
44+
}

‎demo/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 David Howell. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
-->
7+
<html>
8+
<head>
9+
10+
<meta charset="utf-8">
11+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
13+
14+
<title>gold-postcode-input demo</title>
15+
16+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17+
<link rel="import" href="../gold-postcode-input.html">
18+
19+
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
20+
<link rel="import" href="../../paper-styles/demo-pages.html">
21+
</head>
22+
<style>
23+
gold-postcode-input {
24+
width: 200px;
25+
margin-left: auto;
26+
margin-right: auto;
27+
}
28+
</style>
29+
<body>
30+
31+
<div class="vertical-section-container centered">
32+
<h4>Standard</h4>
33+
<div class="vertical-section">
34+
<gold-postcode-input></gold-postcode-input>
35+
<gold-postcode-input label="Auto-validating" auto-validate></gold-postcode-input>
36+
</div>
37+
38+
<h4>Pre-validated</h4>
39+
<div class="vertical-section">
40+
<gold-postcode-input auto-validate value="0001"></gold-postcode-input>
41+
<gold-postcode-input auto-validate value="5000"></gold-postcode-input>
42+
<gold-postcode-input auto-validate value="123"></gold-postcode-input>
43+
</div>
44+
45+
<h4>Custom error message</h4>
46+
<div class="vertical-section">
47+
<gold-postcode-input required auto-validate error-message="Please enter a valid Australian postcode" label="posty postcode"></gold-postcode-input>
48+
</div>
49+
</div>
50+
</body>

‎gold-postcode-input.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!--
2+
@license
3+
Copyright (c) 2015 David Howell. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5+
-->
6+
<link rel="import" href="../polymer/polymer.html">
7+
<link rel="import" href="../paper-input/paper-input-behavior.html">
8+
<link rel="import" href="../paper-input/paper-input-container.html">
9+
<link rel="import" href="../paper-input/paper-input-error.html">
10+
<link rel="import" href="../iron-input/iron-input.html">
11+
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
12+
<link rel="import" href="postcode-validator.html">
13+
14+
<!--
15+
`gold-postcode-input` is a single-line text field with Material Design styling
16+
for entering an Australian postcode.
17+
18+
<gold-postcode-input></gold-postcode-input>
19+
20+
It may include an optional label, which by default is "Postcode".
21+
22+
<gold-postcode-input label="Mailing postcode"></gold-postcode-input>
23+
24+
### Validation
25+
26+
The input supports Australian 4-digit numeric postal codes with the following state based specific ranges.
27+
ACT: 0200-0299 and 2600-2639. NSW: 1000-1999, 2000-2599 and 2640-2914. NT: 0900-0999 and 0800-0899.
28+
QLD: 9000-9999 and 4000-4999. SA: 5000-5999. TAS: 7800-7999 and 7000-7499. VIC: 8000-8999 and 3000-3999.
29+
WA: 6800-6999 and 6000-6799.
30+
31+
The input can be automatically validated as the user is typing by using
32+
the `auto-validate` and `required` attributes. For manual validation, the
33+
element also has a `validate()` method, which returns the validity of the
34+
input as well sets any appropriate error messages and styles.
35+
36+
See `Polymer.PaperInputBehavior` for more API docs.
37+
38+
### Styling
39+
40+
See `Polymer.PaperInputContainer` for a list of custom properties used to
41+
style this element.
42+
43+
@group Gold Elements
44+
@hero hero.svg
45+
@demo demo/index.html
46+
@class gold-postcode-input
47+
-->
48+
49+
<dom-module id="gold-postcode-input">
50+
<style>
51+
:host {
52+
display: block;
53+
}
54+
</style>
55+
56+
<template>
57+
58+
<paper-input-container id="container"
59+
auto-validate="[[autoValidate]]"
60+
attr-for-value="bind-value">
61+
62+
<label hidden$="[[!label]]">[[label]]</label>
63+
64+
<postcode-validator></postcode-validator>
65+
66+
<input is="iron-input" id="input"
67+
aria-labelledby$="[[_ariaLabelledBy]]"
68+
aria-describedby$="[[_ariaDescribedBy]]"
69+
required$="[[required]]"
70+
validator="postcode-validator"
71+
type="tel"
72+
maxlength="10"
73+
bind-value="{{value}}"
74+
autocomplete="postal-code"
75+
name$="[[name]]">
76+
77+
<template is="dom-if" if="[[errorMessage]]">
78+
<paper-input-error id="error">[[errorMessage]]</paper-input-error>
79+
</template>
80+
81+
</paper-input-container>
82+
</template>
83+
84+
</dom-module>
85+
86+
<script>
87+
(function() {
88+
Polymer({
89+
90+
is: 'gold-postcode-input',
91+
92+
behaviors: [
93+
Polymer.PaperInputBehavior,
94+
Polymer.IronFormElementBehavior
95+
],
96+
97+
properties: {
98+
/**
99+
* The label for this input.
100+
*/
101+
label: {
102+
type: String,
103+
value: "Postcode"
104+
}
105+
}
106+
107+
})
108+
109+
})();
110+
111+
</script>

‎index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 David Howell. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
-->
7+
<html>
8+
<head>
9+
10+
<meta charset="utf-8">
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12+
13+
<title>gold-postcode-input</title>
14+
15+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
16+
<link rel="import" href="../iron-component-page/iron-component-page.html">
17+
18+
</head>
19+
<body>
20+
21+
<iron-component-page></iron-component-page>
22+
23+
</body>
24+
</html>

‎postcode-validator.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!--
2+
@license
3+
Copyright (c) 2015 David Howell. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5+
-->
6+
7+
<link rel="import" href="../polymer/polymer.html">
8+
<link rel="import" href="../iron-validator-behavior/iron-validator-behavior.html">
9+
10+
<script>
11+
Polymer({
12+
is: 'postcode-validator',
13+
behaviors: [
14+
Polymer.IronValidatorBehavior
15+
],
16+
validate: function(value) {
17+
// A valid zipcode is 5 digits or 5 digits, a dash, and 4 more digits.
18+
var re = /^(0[289][0-9]{2})|([1345689][0-9]{3})|(2[0-8][0-9]{2})|(290[0-9])|(291[0-4])|(7[0-4][0-9]{2})|(7[8-9][0-9]{2})$/;
19+
return re.test(value);
20+
}
21+
});
22+
</script>

‎test/basic.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8+
Code distributed by Google as part of the polymer project is also
9+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10+
-->
11+
<html>
12+
<head>
13+
14+
<title>gold-zip-input tests</title>
15+
16+
<meta charset="utf-8">
17+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
18+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
19+
20+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21+
22+
<script src="../../web-component-tester/browser.js"></script>
23+
<script src="../../test-fixture/test-fixture-mocha.js"></script>
24+
25+
<script src="../../iron-test-helpers/test-helpers.js"></script>
26+
27+
<link rel="import" href="../../test-fixture/test-fixture.html">
28+
<link rel="import" href="../gold-zip-input.html">
29+
30+
</head>
31+
<body>
32+
33+
<test-fixture id="basic">
34+
<template>
35+
<gold-postcode-input auto-validate required error-message="error"></gold-postcode-input>
36+
</template>
37+
</test-fixture>
38+
39+
<script>
40+
suite('basic', function() {
41+
test('invalid input is not ok', function() {
42+
var input = fixture('basic');
43+
input.value='0001';
44+
forceXIfStamp(input);
45+
var container = Polymer.dom(input.root).querySelector('paper-input-container');
46+
assert.ok(container, 'paper-input-container exists');
47+
assert.isTrue(container.invalid);
48+
});
49+
test('full postcodes are ok', function() {
50+
var input = fixture('basic');
51+
input.value='5000';
52+
forceXIfStamp(input);
53+
var container = Polymer.dom(input.root).querySelector('paper-input-container');
54+
assert.ok(container, 'paper-input-container exists');
55+
assert.isFalse(container.invalid);
56+
});
57+
test('empty required input shows error', function() {
58+
var input = fixture('basic');
59+
forceXIfStamp(input);
60+
var error = Polymer.dom(input.root).querySelector('paper-input-error');
61+
assert.ok(error, 'paper-input-error exists');
62+
assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
63+
});
64+
});
65+
suite('a11y', function() {
66+
test('has aria-labelledby', function() {
67+
var input = fixture('basic');
68+
assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
69+
assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
70+
});
71+
});
72+
</script>
73+
74+
</body>
75+
</html>

‎test/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright (c) 2015 David Howell. All rights reserved.
5+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6+
-->
7+
<html>
8+
<head>
9+
<meta charset="UTF-8">
10+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
11+
<title>gold-postcode-input tests</title>
12+
<script src="../../web-component-tester/browser.js"></script>
13+
</head>
14+
<body>
15+
<script>
16+
WCT.loadSuites([
17+
'basic.html'
18+
]);
19+
</script>
20+
</body>
21+
</html>

0 commit comments

Comments
 (0)