Skip to content

Commit

Permalink
Merge pull request #111 from Tangerine-Community/add-support-for-warn…
Browse files Browse the repository at this point in the history 
…ings-and-discrepancies

Add support for warnings and discrepancies
  • Loading branch information
@rjcorwin
rjcorwin authored Dec 31, 2019
2 parents ea7e748 + 3a98a86 commit 5a6ccfb
Show file tree
Hide file tree
Showing 15 changed files with 1,063 additions and 16 deletions.
420 changes: 420 additions & 0 deletions demo/all-inputs-flagged.html
View file

Large diffs are not rendered by default.

36 changes: 36 additions & 0 deletions input/tangy-checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export class TangyCheckbox extends PolymerElement {
</label>
</paper-checkbox>
<div id="error-text"></div>
<div id="warn-text"></div>
<div id="discrepancy-text"></div>
</div>
</div>
`
Expand Down Expand Up @@ -72,6 +74,18 @@ export class TangyCheckbox extends PolymerElement {
observer: 'onInvalidChange',
reflectToAttribute: true
},
hasWarning: {
type: Boolean,
value: false,
observer: 'onWarnChange',
reflectToAttribute: true
},
hasDiscrepancy: {
type: Boolean,
value: false,
observer: 'onDiscrepancyChange',
reflectToAttribute: true
},
incomplete: {
type: Boolean,
value: true,
Expand All @@ -92,6 +106,16 @@ export class TangyCheckbox extends PolymerElement {
type: String,
value: '',
reflectToAttribute: true
},
warnText: {
type: String,
value: '',
reflectToAttribute: true
},
discrepancyText: {
type: String,
value: '',
reflectToAttribute: true
}
}
}
Expand Down Expand Up @@ -144,6 +168,18 @@ export class TangyCheckbox extends PolymerElement {
: ''
}

onDiscrepancyChange(value) {
this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
: ''
}

onWarnChange(value) {
this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
: ''
}

onDisabledChange (value) {
if (value === false) {
this.$.checkbox.removeAttribute('disabled')
Expand Down
36 changes: 36 additions & 0 deletions input/tangy-checkboxes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ class TangyCheckboxes extends PolymerElement {
<label id="hint-text" class="hint-text"></label>
<div id="checkboxes"></div>
<label id="error-text" class="error-text"></label>
<div id="warn-text"></div>
<div id="discrepancy-text"></div>
</div>
</div>
Expand Down Expand Up @@ -120,12 +122,34 @@ class TangyCheckboxes extends PolymerElement {
observer: 'onInvalidChange',
reflectToAttribute: true
},
hasWarning: {
type: Boolean,
value: false,
observer: 'onWarnChange',
reflectToAttribute: true
},
hasDiscrepancy: {
type: Boolean,
value: false,
observer: 'onDiscrepancyChange',
reflectToAttribute: true
},
errorText: {
type: String,
value: '',
observer: 'reflect',
reflectToAttribute: true
},
warnText: {
type: String,
value: '',
reflectToAttribute: true
},
discrepancyText: {
type: String,
value: '',
reflectToAttribute: true
},
questionNumber: {
type: String,
value: '',
Expand Down Expand Up @@ -211,5 +235,17 @@ class TangyCheckboxes extends PolymerElement {
: ''
}

onDiscrepancyChange(value) {
this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
: ''
}

onWarnChange(value) {
this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
: ''
}

}
window.customElements.define(TangyCheckboxes.is, TangyCheckboxes);
36 changes: 36 additions & 0 deletions input/tangy-consent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ class TangyConsent extends PolymerElement {
</div>
</paper-card>
<div id="error-text"></div>
<div id="warn-text"></div>
<div id="discrepancy-text"></div>
</div>
</div>
`;
Expand Down Expand Up @@ -120,6 +122,18 @@ class TangyConsent extends PolymerElement {
observer: 'onInvalidChange',
reflectToAttribute: true
},
hasWarning: {
type: Boolean,
value: false,
observer: 'onWarnChange',
reflectToAttribute: true
},
hasDiscrepancy: {
type: Boolean,
value: false,
observer: 'onDiscrepancyChange',
reflectToAttribute: true
},
hintText: {
type: String,
value: '',
Expand All @@ -130,6 +144,16 @@ class TangyConsent extends PolymerElement {
type: String,
value: '',
reflectToAttribute: true
},
warnText: {
type: String,
value: '',
reflectToAttribute: true
},
discrepancyText: {
type: String,
value: '',
reflectToAttribute: true
}
};
}
Expand Down Expand Up @@ -164,6 +188,18 @@ class TangyConsent extends PolymerElement {
: ''
}

onDiscrepancyChange(value) {
this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
: ''
}

onWarnChange(value) {
this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
: ''
}

clickedConsentYes() {
this.value = 'yes'
}
Expand Down
36 changes: 36 additions & 0 deletions input/tangy-gps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,8 @@ class TangyGps extends PolymerElement {
</div>
<label class="hint-text"></label>
<div id="error-text"></div>
<div id="warn-text"></div>
<div id="discrepancy-text"></div>
</div>
</div>
`;
Expand Down Expand Up @@ -205,6 +207,18 @@ class TangyGps extends PolymerElement {
observer: 'onInvalidChange',
reflectToAttribute: true
},
hasWarning: {
type: Boolean,
value: false,
observer: 'onWarnChange',
reflectToAttribute: true
},
hasDiscrepancy: {
type: Boolean,
value: false,
observer: 'onDiscrepancyChange',
reflectToAttribute: true
},
hintText: {
type: String,
value: '',
Expand All @@ -215,6 +229,16 @@ class TangyGps extends PolymerElement {
type: String,
value: '',
reflectToAttribute: true
},
warnText: {
type: String,
value: '',
reflectToAttribute: true
},
discrepancyText: {
type: String,
value: '',
reflectToAttribute: true
}
};
}
Expand Down Expand Up @@ -251,6 +275,18 @@ class TangyGps extends PolymerElement {
? `<iron-icon icon="error"></iron-icon> <div> ${ this.hasAttribute('error-text') ? this.getAttribute('error-text') : ''} </div>`
: ''
}

onDiscrepancyChange(value) {
this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
: ''
}

onWarnChange(value) {
this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
: ''
}

getGeolocationPosition() {
const options = {
Expand Down
46 changes: 43 additions & 3 deletions input/tangy-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ export class TangyInput extends PolymerElement {
<div id="container"></div>
</div>
</div>
<div id="error-text"></div>
<div id="warn-text"></div>
<div id="discrepancy-text"></div>
`
}

Expand Down Expand Up @@ -104,6 +106,18 @@ export class TangyInput extends PolymerElement {
observer: 'onInvalidChange',
reflectToAttribute: true
},
hasWarning: {
type: Boolean,
value: false,
observer: 'onWarnChange',
reflectToAttribute: true
},
hasDiscrepancy: {
type: Boolean,
value: false,
observer: 'onDiscrepancyChange',
reflectToAttribute: true
},
incomplete: {
type: Boolean,
value: true,
Expand Down Expand Up @@ -150,6 +164,16 @@ export class TangyInput extends PolymerElement {
type: String,
observer: 'reflect',
value: ''
},
warnText: {
type: String,
value: '',
reflectToAttribute: true
},
discrepancyText: {
type: String,
value: '',
reflectToAttribute: true
}
}
}
Expand All @@ -169,8 +193,6 @@ export class TangyInput extends PolymerElement {
? `<paper-input id="input"></paper-input>`
: `<paper-textarea id="input"></paper-textarea>`
}
<div id="error-text"></div>
`
// Listen for user changes.
this.shadowRoot.querySelector('#input').addEventListener('value-changed', (event) => {
Expand Down Expand Up @@ -249,6 +271,24 @@ export class TangyInput extends PolymerElement {
: ''
}
}

onDiscrepancyChange(value) {
if (this.shadowRoot.querySelector('#discrepancy-text')) {
this.shadowRoot.querySelector('#discrepancy-text').innerHTML = this.hasDiscrepancy
? `<iron-icon icon="flag"></iron-icon> <div> ${ this.hasAttribute('discrepancy-text') ? this.getAttribute('discrepancy-text') : ''} </div>`
: ''
}
}

onWarnChange(value) {
if (this.shadowRoot.querySelector('#warn-text')) {
this.shadowRoot.querySelector('#warn-text').innerHTML = this.hasWarning
? `<iron-icon icon="warning"></iron-icon> <div> ${ this.hasAttribute('warn-text') ? this.getAttribute('warn-text') : ''} </div>`
: ''
}
}



validate() {
if (this.hasAttribute('disabled') || this.hasAttribute('hidden')) {
Expand Down
Loading

0 comments on commit 5a6ccfb

Please sign in to comment.