Skip to content

Commit

Permalink
New: Style Stepper (#2)
Browse files Browse the repository at this point in the history 
* Docs: adding variants install instructions

* New: mtz-wizard logic for handling steps

* New: adding a basic wizard-step implementation

* Update: adding form support to mtz-wizard-step

* Update bower.json

* New: stepper and first round of tests for mtz-step

* Update: adding in unit tests for wizard and stepper

* Fix: fixing tests in firefox

* New: step-errors-behavior addition

* Docs: remove @param that is no longer relevantj

* Update: preventing next/previous from wrapping

* Apply styling to stepper

* Add style hooks

* Add tests

* Fix: tap to click

* Update bower.json

* Update mtz-wizard-stepper.html
  • Loading branch information
@stramel
stramel authored Jul 21, 2017
1 parent 5223e11 commit 6e2957e
Show file tree
Hide file tree
Showing 8 changed files with 450 additions and 67 deletions.
13 changes: 11 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@
"dependencies": {
"polymer": "Polymer/polymer#^1.9 || ^2.0",
"iron-form": "PolymerElements/iron-form#^2.0",
"iron-pages": "PolymerElements/iron-pages#^2.0"
"iron-icon": "PolymerElements/iron-icon#^1.0 || ^2.0",
"iron-icons": "PolymerElements/iron-icons#^1.0 || ^2.0",
"iron-pages": "PolymerElements/iron-pages#^1.0 || ^2.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0 || ^2.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0 || ^2.0",
Expand All @@ -17,12 +20,18 @@
"variants": {
"1.x": {
"dependencies": {
"polymer": "Polymer/polymer#^1.9.0"
"polymer": "Polymer/polymer#^1.9.0",
"iron-form": "PolymerElements/iron-form#^2.0.0",
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"paper-input": "PolymerElements/paper-input#^2.0.0",
"web-component-tester": "Polymer/web-component-tester#^5.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"resolutions": {
Expand Down
70 changes: 43 additions & 27 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,59 @@

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../mtz-wizard.html">
<link rel="import" href="../mtz-wizard-stepper.html">
<link rel="import" href="../mtz-wizard-step.html">
<link rel="import" href="../../iron-form/iron-form.html">

<style is="custom-style" include="demo-pages-shared-styles">
</style>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
mtz-wizard-stepper {
font-family: 'Roboto', sans-serif;
}
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<div class="vertical-section-container">
<h3>Basic mtz-wizard demo</h3>
<demo-snippet>
<template>
<demo-el></demo-el>
<dom-module id="demo-el">
<template>
<button on-tap="toggleActive">
<button on-click="toggleActive">
Toggle Active
</button>
<button on-tap="toggleStep">
<button on-click="toggleStep">
Toggle Step
</button>
<mtz-wizard-stepper
steps="[[steps]]"
selected="{{selected}}"
i18n="[[i18n]]"
></mtz-wizard-stepper>
<mtz-wizard active="[[active]]" steps="{{steps}}" selected="{{selected}}" id="wizard">
<mtz-wizard-step name="step-0" label="Select campaign settings">
step with no form
</mtz-wizard-step>
<template is="dom-if" if="[[!hideStep]]" restamp>
<mtz-wizard-step name="step-0" label="Step 0">
Conditional step with no form
<mtz-wizard-step name="step-1" label="Create ad group" optional>
<h4>Optional step with a form</h4>
<iron-form wizard-form>
<form is="iron-form">
<label>
Age:
<input required type="number" name="firstName" />
</label>
</form>
</iron-form>
</mtz-wizard-step>
</template>
<mtz-wizard-step required name="step-1" label="Name">
<mtz-wizard-step name="step-2" label="Create ad" required>
<h4>Required step with a form</h4>
<iron-form wizard-form>
<form is="iron-form">
Expand All @@ -58,31 +76,20 @@ <h4>Required step with a form</h4>
</form>
</iron-form>
</mtz-wizard-step>
<div class="wizard-step" name="step-2" label="step-2-key">
Div treated as a step
<div class="wizard-step" name="step-3" label="step-3-key">
Conditional Div treated as a step
</div>
<mtz-wizard-step name="step-3" label="Step 3">
<h4>Optional step with a form</h4>
<iron-form wizard-form>
<form is="iron-form">
<label>
Age:
<input required type="number" name="firstName" />
</label>
</form>
</iron-form>
</mtz-wizard-step>
<div name="ignored-step">
should never be visible
</div>
</mtz-wizard>
<button on-tap="nextStep">
Next Step
</button>
<button on-tap="prevStep">
<button on-click="prevStep">
Previous Step
</button>
<button on-tap="validate">
<button on-click="nextStep">
Next Step
</button>
<button on-click="validate">
Validate Steps
</button>
</template>
Expand All @@ -100,7 +107,16 @@ <h4>Optional step with a form</h4>
value: false
},
selected: String,
steps: Array
steps: Array,
i18n: {
type: Object,
value() {
return {
'OPTIONAL': 'Optional',
'step-3-key': 'Preview'
};
}
}
},
nextStep() {
this.$.wizard.next();
Expand Down
22 changes: 20 additions & 2 deletions mtz-wizard-step-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,24 @@
notify: true,
value: false
},
/* TODO: Add optional flows */
/* A step that is not required in the flow */
optional: {
type: Boolean,
value: false
},
/* TODO: Add setting of completed flag */
/* Step was finished used for flow control and display */
completed: {
type: Boolean,
value: false
},
/* TODO: Add editable/non-editable functionality */
/* Determines if the step is able to be revisited for modifications */
editable: {
type: Boolean,
value: false
},
/* Used by the stepper to give a pretty name */
label: String,
/* Used to map the UI and API together for validation and data interfacing */
Expand Down Expand Up @@ -107,8 +125,8 @@
* @return {Boolean}
*/
validate() {
const validForm = (this.form && this.form.validate()) || !this.form;
const valid = (this.required && validForm) || !this.required;
const validForm = !this.form || this.form.validate();
const valid = !this.required || validForm;
this._setInvalid(!valid);
return valid;
},
Expand Down
22 changes: 19 additions & 3 deletions mtz-wizard-stepper-behavior.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@
type: String,
notify: true
},
/* The currently selected step index */
selectedIndex: {
type: Number,
notify: true
},
/* i18n text lookup */
i18n: {
type: Object,
value() {
return {};
}
},
/**
* Generated from the steps property and used to create the stepper’s visualization.
* @type {Array<{key: String, label: String, invalid: Boolean, active: Boolean}>}
Expand Down Expand Up @@ -61,9 +73,9 @@
* @param {String} key
* @return {String}
*/
localize(key) {
localize(key = '') {
// TODO: add the localize behavior that Polymer provides
return key;
return this.get(key, this.i18n) || key;
},
/**
* Moves to the step that was clicked on by updating the selected property with the step’s key.
Expand All @@ -72,6 +84,7 @@
*/
selectStep({model: {index}}) {
this.selected = this.__steps[index].key;
this.selectedIndex = index;
},
/**
* Takes in the array of HTMLElement steps from wizard and creates an Object array to use for generating the stepper
Expand Down Expand Up @@ -102,7 +115,10 @@
label: this.__serializeElementProperty(step, 'label', String) || '',
dirty: this.__serializeElementProperty(step, 'dirty', Boolean),
invalid: this.__serializeElementProperty(step, 'invalid', Boolean),
active: this.__serializeElementProperty(step, this.selectedAttribute, Boolean)
active: this.__serializeElementProperty(step, this.selectedAttribute, Boolean),
optional: this.__serializeElementProperty(step, 'optional', Boolean),
completed: this.__serializeElementProperty(step, 'completed', Boolean),
editable: this.__serializeElementProperty(step, 'editable', Boolean)
};
return data;
}));
Expand Down
Loading

0 comments on commit 6e2957e

Please sign in to comment.