web/: enable more vue eslint rules

Fixes two things:

All button tags must have type field specified, otherwise it defaults to
submit, which is mostly not correct for our site.

Disallows unused refs.

Change-Id: I28bb44aab9c153f83fec16fc4023a453444c3926
This commit is contained in:
Egon Elbre 2021-08-12 16:04:46 +03:00
parent 92c53afb84
commit e43af5eb3d
31 changed files with 253 additions and 147 deletions

View File

@ -33,5 +33,11 @@ module.exports = {
"vue/max-attributes-per-line": ["off"],
"vue/singleline-html-element-content-newline": ["off"],
"vue/block-lang": ["error", {"script": {"lang": "ts"}}],
"vue/html-button-has-type": ["error"],
"vue/no-unused-properties": ["warn"],
"vue/no-unused-refs": ["warn"],
"vue/no-useless-v-bind": ["warn"],
},
}

View File

@ -33,7 +33,7 @@
"compression-webpack-plugin": "6.0.0",
"core-js": "3.6.5",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"eslint-plugin-vue": "7.16.0",
"jest-fetch-mock": "3.0.0",
"sass": "1.37.0",
"sass-loader": "8.0.0",
@ -10723,29 +10723,45 @@
}
},
"node_modules/eslint-plugin-vue": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
"integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.16.0.tgz",
"integrity": "sha512-0E2dVvVC7I2Xm1HXyx+ZwPj9CNX4NJjs4K4r+GVsHWyt5Pew3JLD4fI7A91b2jeL0TXE7LlszrwLSTJU9eqehw==",
"dev": true,
"dependencies": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^5.6.0",
"vue-eslint-parser": "^7.0.0"
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
},
"engines": {
"node": ">=8.10"
},
"peerDependencies": {
"eslint": "^5.0.0 || ^6.0.0"
"eslint": "^6.2.0 || ^7.0.0"
}
},
"node_modules/eslint-plugin-vue/node_modules/semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"node_modules/eslint-plugin-vue/node_modules/eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dev": true,
"bin": {
"semver": "bin/semver"
"dependencies": {
"eslint-visitor-keys": "^1.1.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
}
},
"node_modules/eslint-plugin-vue/node_modules/eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/eslint-scope": {
@ -36202,20 +36218,30 @@
}
},
"eslint-plugin-vue": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
"integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.16.0.tgz",
"integrity": "sha512-0E2dVvVC7I2Xm1HXyx+ZwPj9CNX4NJjs4K4r+GVsHWyt5Pew3JLD4fI7A91b2jeL0TXE7LlszrwLSTJU9eqehw==",
"dev": true,
"requires": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^5.6.0",
"vue-eslint-parser": "^7.0.0"
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
},
"dependencies": {
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dev": true,
"requires": {
"eslint-visitor-keys": "^1.1.0"
}
},
"eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true
}
}

View File

@ -37,7 +37,7 @@
"compression-webpack-plugin": "6.0.0",
"core-js": "3.6.5",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"eslint-plugin-vue": "7.16.0",
"jest-fetch-mock": "3.0.0",
"sass": "1.37.0",
"sass-loader": "8.0.0",

View File

@ -15,6 +15,7 @@
<button
name="Show Bandwidth Chart"
class="chart-container__title-area__chart-choice-item"
type="button"
:class="{ 'active': (!isEgressChartShown && !isIngressChartShown) }"
@click.stop="openBandwidthChart"
>
@ -23,6 +24,7 @@
<button
name="Show Egress Chart"
class="chart-container__title-area__chart-choice-item"
type="button"
:class="{ 'active': isEgressChartShown }"
@click.stop="openEgressChart"
>
@ -31,6 +33,7 @@
<button
name="Show Ingress Chart"
class="chart-container__title-area__chart-choice-item"
type="button"
:class="{ 'active': isIngressChartShown }"
@click.stop="openIngressChart"
>

View File

@ -10,11 +10,11 @@ exports[`BandwidthPage renders correctly 1`] = `
<div class="chart-container bandwidth-chart">
<div class="chart-container__title-area">
<p class="chart-container__title-area__title">Bandwidth Used This Month</p>
<div class="chart-container__title-area__buttons-area"><button name="Show Bandwidth Chart" class="chart-container__title-area__chart-choice-item active">
<div class="chart-container__title-area__buttons-area"><button name="Show Bandwidth Chart" type="button" class="chart-container__title-area__chart-choice-item active">
Bandwidth
</button> <button name="Show Egress Chart" class="chart-container__title-area__chart-choice-item">
</button> <button name="Show Egress Chart" type="button" class="chart-container__title-area__chart-choice-item">
Egress
</button> <button name="Show Ingress Chart" class="chart-container__title-area__chart-choice-item">
</button> <button name="Show Ingress Chart" type="button" class="chart-container__title-area__chart-choice-item">
Ingress
</button></div>
</div>
@ -50,11 +50,11 @@ exports[`BandwidthPage renders correctly with egress chart 1`] = `
<div class="chart-container bandwidth-chart">
<div class="chart-container__title-area">
<p class="chart-container__title-area__title">Bandwidth Used This Month</p>
<div class="chart-container__title-area__buttons-area"><button name="Show Bandwidth Chart" class="chart-container__title-area__chart-choice-item">
<div class="chart-container__title-area__buttons-area"><button name="Show Bandwidth Chart" type="button" class="chart-container__title-area__chart-choice-item">
Bandwidth
</button> <button name="Show Egress Chart" class="chart-container__title-area__chart-choice-item active">
</button> <button name="Show Egress Chart" type="button" class="chart-container__title-area__chart-choice-item active">
Egress
</button> <button name="Show Ingress Chart" class="chart-container__title-area__chart-choice-item">
</button> <button name="Show Ingress Chart" type="button" class="chart-container__title-area__chart-choice-item">
Ingress
</button></div>
</div>
@ -90,11 +90,11 @@ exports[`BandwidthPage renders correctly with ingress chart 1`] = `
<div class="chart-container bandwidth-chart">
<div class="chart-container__title-area">
<p class="chart-container__title-area__title">Bandwidth Used This Month</p>
<div class="chart-container__title-area__buttons-area"><button name="Show Bandwidth Chart" class="chart-container__title-area__chart-choice-item">
<div class="chart-container__title-area__buttons-area"><button name="Show Bandwidth Chart" type="button" class="chart-container__title-area__chart-choice-item">
Bandwidth
</button> <button name="Show Egress Chart" class="chart-container__title-area__chart-choice-item">
</button> <button name="Show Egress Chart" type="button" class="chart-container__title-area__chart-choice-item">
Egress
</button> <button name="Show Ingress Chart" class="chart-container__title-area__chart-choice-item active">
</button> <button name="Show Ingress Chart" type="button" class="chart-container__title-area__chart-choice-item active">
Ingress
</button></div>
</div>

View File

@ -37,5 +37,11 @@ module.exports = {
"vue/singleline-html-element-content-newline": ["off"],
"vue/no-v-html": ["off"], // needs a dedicated fix
"vue/block-lang": ["error", {"script": {"lang": "ts"}}],
"vue/html-button-has-type": ["error"],
"vue/no-unused-properties": ["warn"],
"vue/no-unused-refs": ["warn"],
"vue/no-useless-v-bind": ["warn"],
},
}

View File

@ -52,7 +52,7 @@
"babel-eslint": "10.1.0",
"compression-webpack-plugin": "6.0.0",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"eslint-plugin-vue": "7.16.0",
"jest-fetch-mock": "3.0.3",
"sass": "1.37.0",
"sass-loader": "10.0.2",
@ -11803,29 +11803,45 @@
}
},
"node_modules/eslint-plugin-vue": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
"integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.16.0.tgz",
"integrity": "sha512-0E2dVvVC7I2Xm1HXyx+ZwPj9CNX4NJjs4K4r+GVsHWyt5Pew3JLD4fI7A91b2jeL0TXE7LlszrwLSTJU9eqehw==",
"dev": true,
"dependencies": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^5.6.0",
"vue-eslint-parser": "^7.0.0"
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
},
"engines": {
"node": ">=8.10"
},
"peerDependencies": {
"eslint": "^5.0.0 || ^6.0.0"
"eslint": "^6.2.0 || ^7.0.0"
}
},
"node_modules/eslint-plugin-vue/node_modules/semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"node_modules/eslint-plugin-vue/node_modules/eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dev": true,
"bin": {
"semver": "bin/semver"
"dependencies": {
"eslint-visitor-keys": "^1.1.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
}
},
"node_modules/eslint-plugin-vue/node_modules/eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/eslint-scope": {
@ -39507,20 +39523,30 @@
}
},
"eslint-plugin-vue": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
"integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.16.0.tgz",
"integrity": "sha512-0E2dVvVC7I2Xm1HXyx+ZwPj9CNX4NJjs4K4r+GVsHWyt5Pew3JLD4fI7A91b2jeL0TXE7LlszrwLSTJU9eqehw==",
"dev": true,
"requires": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^5.6.0",
"vue-eslint-parser": "^7.0.0"
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
},
"dependencies": {
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dev": true,
"requires": {
"eslint-visitor-keys": "^1.1.0"
}
},
"eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true
}
}

View File

@ -56,7 +56,7 @@
"babel-eslint": "10.1.0",
"compression-webpack-plugin": "6.0.0",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"eslint-plugin-vue": "7.16.0",
"jest-fetch-mock": "3.0.3",
"sass": "1.37.0",
"sass-loader": "10.0.2",

View File

@ -10,7 +10,6 @@
<h2 class="change-password-popup__form-container__main-label-text">Change Password</h2>
</div>
<HeaderlessInput
ref="oldPasswordInput"
class="full-input"
label="Old Password"
placeholder="Enter Old Password"
@ -21,7 +20,6 @@
/>
<div class="password-input">
<HeaderlessInput
ref="newPasswordInput"
class="full-input"
label="New Password"
placeholder="Enter New Password"
@ -38,7 +36,6 @@
/>
</div>
<HeaderlessInput
ref="confirmPasswordInput"
class="full-input"
label="Confirm Password"
placeholder="Confirm Password"

View File

@ -12,7 +12,6 @@
<h2 class="edit-profile-popup__form-container__main-label-text">Edit Profile</h2>
</div>
<HeaderedInput
ref="fullNameInput"
class="full-input"
label="Full Name"
placeholder="Enter Full Name"

View File

@ -34,7 +34,6 @@
/>
<AddStorjForm
v-if="isAddingStorjState"
ref="addStorj"
:is-loading="isLoading"
@toggleIsLoading="toggleIsLoading"
@cancel="onCancel"

View File

@ -10,7 +10,7 @@
<p class="bucket-item__date">{{ formattedDate }}</p>
<div v-click-outside="closeDropdown" class="bucket-item__functional" @click.stop="openDropdown(dropdownKey)">
<DotsIcon />
<div v-if="isDropdownOpen" ref="dropdown" class="bucket-item__functional__dropdown">
<div v-if="isDropdownOpen" class="bucket-item__functional__dropdown">
<div class="bucket-item__functional__dropdown__item" @click.stop="onDeleteClick">
<DeleteIcon />
<p class="bucket-item__functional__dropdown__item__label">Delete</p>

View File

@ -37,5 +37,11 @@ module.exports = {
"vue/singleline-html-element-content-newline": ["off"],
"vue/no-v-html": ["off"], // needs a dedicated fix
"vue/block-lang": ["error", {"script": {"lang": "ts"}}],
"vue/html-button-has-type": ["error"],
"vue/no-unused-properties": ["warn"],
"vue/no-unused-refs": ["warn"],
"vue/no-useless-v-bind": ["warn"],
},
}

View File

@ -35,7 +35,7 @@
"compression-webpack-plugin": "6.0.0",
"core-js": "3.6.5",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"eslint-plugin-vue": "7.16.0",
"jest-fetch-mock": "3.0.0",
"sass": "1.37.0",
"sass-loader": "8.0.0",
@ -10731,29 +10731,45 @@
}
},
"node_modules/eslint-plugin-vue": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
"integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.16.0.tgz",
"integrity": "sha512-0E2dVvVC7I2Xm1HXyx+ZwPj9CNX4NJjs4K4r+GVsHWyt5Pew3JLD4fI7A91b2jeL0TXE7LlszrwLSTJU9eqehw==",
"dev": true,
"dependencies": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^5.6.0",
"vue-eslint-parser": "^7.0.0"
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
},
"engines": {
"node": ">=8.10"
},
"peerDependencies": {
"eslint": "^5.0.0 || ^6.0.0"
"eslint": "^6.2.0 || ^7.0.0"
}
},
"node_modules/eslint-plugin-vue/node_modules/semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"node_modules/eslint-plugin-vue/node_modules/eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dev": true,
"bin": {
"semver": "bin/semver"
"dependencies": {
"eslint-visitor-keys": "^1.1.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/mysticatea"
}
},
"node_modules/eslint-plugin-vue/node_modules/eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true,
"engines": {
"node": ">=4"
}
},
"node_modules/eslint-scope": {
@ -36216,20 +36232,30 @@
}
},
"eslint-plugin-vue": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
"integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.16.0.tgz",
"integrity": "sha512-0E2dVvVC7I2Xm1HXyx+ZwPj9CNX4NJjs4K4r+GVsHWyt5Pew3JLD4fI7A91b2jeL0TXE7LlszrwLSTJU9eqehw==",
"dev": true,
"requires": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^5.6.0",
"vue-eslint-parser": "^7.0.0"
"semver": "^6.3.0",
"vue-eslint-parser": "^7.10.0"
},
"dependencies": {
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"eslint-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
"dev": true,
"requires": {
"eslint-visitor-keys": "^1.1.0"
}
},
"eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true
}
}

View File

@ -23,9 +23,9 @@
"devDependencies": {
"@babel/core": "7.14.8",
"@babel/plugin-proposal-object-rest-spread": "7.8.3",
"@types/segment-analytics": "0.0.32",
"@typescript-eslint/eslint-plugin": "4.28.5",
"@typescript-eslint/parser": "4.28.5",
"@types/segment-analytics": "0.0.32",
"@vue/cli-plugin-babel": "4.1.1",
"@vue/cli-plugin-eslint": "4.5.13",
"@vue/cli-plugin-typescript": "4.5.13",
@ -38,7 +38,7 @@
"compression-webpack-plugin": "6.0.0",
"core-js": "3.6.5",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"eslint-plugin-vue": "7.16.0",
"jest-fetch-mock": "3.0.0",
"sass": "1.37.0",
"sass-loader": "8.0.0",

View File

@ -81,6 +81,7 @@
<button
name="Show Egress Chart"
class="chart-container__title-area__chart-choice-item"
type="button"
:class="{ 'egress-chart-shown': isEgressChartShown }"
@click.stop="toggleEgressChartShowing"
>
@ -89,6 +90,7 @@
<button
name="Show Ingress Chart"
class="chart-container__title-area__chart-choice-item"
type="button"
:class="{ 'ingress-chart-shown': isIngressChartShown }"
@click.stop="toggleIngressChartShowing"
>

View File

@ -5,7 +5,7 @@
<div class="header">
<div class="header__content-holder">
<div class="header__content-holder__logo-area">
<button name="Logo Button" @click.prevent="onHeaderLogoClick">
<button name="Logo Button" type="button" @click.prevent="onHeaderLogoClick">
<StorjIcon
class="header__content-holder__logo"
alt="storj logo"
@ -15,7 +15,7 @@
alt="storj logo"
class="header__content-holder__logo--small"
/>
<button name="Refresh" class="header__content-holder__logo-area__refresh-button" @click.prevent="onRefresh">
<button name="Refresh" type="button" class="header__content-holder__logo-area__refresh-button" @click.prevent="onRefresh">
<RefreshIcon alt="refresh image" />
</button>
</div>
@ -25,7 +25,7 @@
<p class="header__content-holder__right-area__node-id-container__id">{{ nodeId }}</p>
<CopyIcon />
</div>
<button name="Settings" aria-pressed="false" class="options-button" @click.prevent.stop="openOptionsDropdown">
<button name="Settings" aria-pressed="false" class="options-button" type="button" @click.prevent.stop="openOptionsDropdown">
<SettingsIcon />
</button>
<OptionsDropdown
@ -33,7 +33,7 @@
class="options-dropdown"
@closeDropdown="closeOptionsDropdown"
/>
<button name="Notifications" aria-pressed="false" class="header__content-holder__right-area__bell-area" @click.stop.prevent="toggleNotificationsPopup">
<button name="Notifications" aria-pressed="false" class="header__content-holder__right-area__bell-area" type="button" @click.stop.prevent="toggleNotificationsPopup">
<BellIcon />
<span
v-if="hasNewNotifications"

View File

@ -6,6 +6,7 @@
v-if="satellites"
name="Choose your satellite"
class="satellite-selection-toggle-container"
type="button"
@click.stop="toggleDropDown"
>
<p

View File

@ -5,7 +5,7 @@
<div v-click-outside="closePopup" class="satellite-selection-choice-container">
<div class="satellite-selection-overflow-container">
<div class="satellite-selection-choice-container__all-satellites">
<button name="Choose All satellite" class="satellite-selection-overflow-container__satellite-choice" @click.stop="onAllSatellitesClick">
<button name="Choose All satellite" class="satellite-selection-overflow-container__satellite-choice" type="button" @click.stop="onAllSatellitesClick">
<p class="satellite-selection-overflow-container__satellite-choice__name" :class="{selected: !selectedSatellite}">All Satellites</p>
</button>
</div>

View File

@ -5,6 +5,7 @@
<button
:name="`Choose ${satellite.url} satellite`"
class="satellite-choice"
type="button"
@click.stop="onSatelliteClick"
>
<DisqualificationIcon
@ -33,6 +34,7 @@
v-if="isNameShown"
name="Show Satellite ID"
class="satellite-choice__right-area__button"
type="button"
@click.stop.prevent="toggleSatelliteView"
>
<EyeIcon />
@ -43,6 +45,7 @@
v-clipboard:copy="satellite.id"
name="Copy Satellite ID"
class="satellite-choice__right-area__button copy-button"
type="button"
@click.stop="() => {}"
>
<CopyIcon />
@ -50,6 +53,7 @@
<button
name="Show Satellite Name"
class="satellite-choice__right-area__button"
type="button"
@click.stop.prevent="toggleSatelliteView"
>
<EyeIcon />

View File

@ -9,6 +9,7 @@
<button
name="Select Current Period"
class="estimation-container__header__selection-area__item"
type="button"
:class="{ active: isCurrentPeriod }"
@click.stop="selectCurrentPeriod"
>

View File

@ -5,6 +5,7 @@
<button
name="Show Period Date Picker"
class="period-container"
type="button"
:class="{ disabled: false }"
@click.stop="openPeriodDropdown"
>

View File

@ -9,6 +9,7 @@
<button
name="Select All Stats"
class="held-history-container__header__selection-area__item"
type="button"
:class="{ active: isAllStatsShown }"
@click="showAllStats"
>
@ -19,6 +20,7 @@
<button
name="Select Monthly Breakdown"
class="held-history-container__header__selection-area__item"
type="button"
:class="{ active: !isAllStatsShown }"
@click="showMonthlyBreakdown"
>

View File

@ -5,15 +5,15 @@
<div class="payout-period-calendar">
<div class="payout-period-calendar__header">
<div class="payout-period-calendar__header__year-selection">
<button name="Decrement year" class="payout-period-calendar__header__year-selection__prev" @click.prevent="decrementYear">
<button name="Decrement year" class="payout-period-calendar__header__year-selection__prev" type="button" @click.prevent="decrementYear">
<GrayArrowLeftIcon />
</button>
<p class="payout-period-calendar__header__year-selection__year">{{ displayedYear }}</p>
<button name="Increment year" class="payout-period-calendar__header__year-selection__next" @click.prevent="incrementYear">
<button name="Increment year" class="payout-period-calendar__header__year-selection__next" type="button" @click.prevent="incrementYear">
<GrayArrowLeftIcon />
</button>
</div>
<button name="Select All Time" class="payout-period-calendar__header__all-time" @click.prevent="selectAllTime">All time</button>
<button name="Select All Time" class="payout-period-calendar__header__all-time" type="button" @click.prevent="selectAllTime">All time</button>
</div>
<div class="payout-period-calendar__months-area">
<button
@ -21,6 +21,7 @@
:key="item.name"
:name="`Select year ${item.year} month ${item.name}`"
class="month-item"
type="button"
:class="{ selected: item.selected, disabled: !item.active }"
@click.prevent="checkMonth(item)"
>
@ -29,7 +30,7 @@
</div>
<div class="payout-period-calendar__footer-area">
<p class="payout-period-calendar__footer-area__period">{{ period }}</p>
<button name="Submit" class="payout-period-calendar__footer-area__ok-button" @click.prevent="submit">OK</button>
<button name="Submit" class="payout-period-calendar__footer-area__ok-button" type="submit" @click.prevent="submit">OK</button>
</div>
</div>
</template>

View File

@ -13,6 +13,7 @@
<button
name="Mark all notifications as read"
class="notifications-container__header__button"
type="button"
:class="{ disabled: isMarkAllAsReadButtonDisabled }"
@click="markAllAsRead"
>
@ -37,7 +38,6 @@
</div>
<VPagination
v-if="totalPageCount > 1"
ref="pagination"
class="pagination-area"
:total-page-count="totalPageCount"
:on-page-click-callback="onPageClick"

View File

@ -1,13 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SatelliteSelectionDropdownItem renders correctly 1`] = `
<button name="Choose name satellite" class="satellite-choice">
<button name="Choose name satellite" type="button" class="satellite-choice">
<!---->
<!---->
<p class="satellite-choice__name with-id-button">
name
</p>
<div class="satellite-choice__right-area"><button name="Show Satellite ID" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
<div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
<path d="M9 3.375C5.25 3.375 2.0475 5.7075 0.75 9C2.0475 12.2925 5.25 14.625 9 14.625C12.75 14.625 15.9525 12.2925 17.25 9C15.9525 5.7075 12.75 3.375 9 3.375ZM9 12.75C6.93 12.75 5.25 11.07 5.25 9C5.25 6.93 6.93 5.25 9 5.25C11.07 5.25 12.75 6.93 12.75 9C12.75 11.07 11.07 12.75 9 12.75ZM9 6.75C7.755 6.75 6.75 7.755 6.75 9C6.75 10.245 7.755 11.25 9 11.25C10.245 11.25 11.25 10.245 11.25 9C11.25 7.755 10.245 6.75 9 6.75Z" fill="#9CABBE"></path>
</svg>
<p class="satellite-choice__right-area__button__text">ID</p>
@ -16,14 +16,14 @@ exports[`SatelliteSelectionDropdownItem renders correctly 1`] = `
`;
exports[`SatelliteSelectionDropdownItem renders correctly if disqualified 1`] = `
<button name="Choose name satellite" class="satellite-choice"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image" class="satellite-choice__image">
<button name="Choose name satellite" type="button" class="satellite-choice"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image" class="satellite-choice__image">
<path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"></path>
</svg>
<!---->
<p class="satellite-choice__name disqualified with-id-button">
name
</p>
<div class="satellite-choice__right-area"><button name="Show Satellite ID" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
<div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
<path d="M9 3.375C5.25 3.375 2.0475 5.7075 0.75 9C2.0475 12.2925 5.25 14.625 9 14.625C12.75 14.625 15.9525 12.2925 17.25 9C15.9525 5.7075 12.75 3.375 9 3.375ZM9 12.75C6.93 12.75 5.25 11.07 5.25 9C5.25 6.93 6.93 5.25 9 5.25C11.07 5.25 12.75 6.93 12.75 9C12.75 11.07 11.07 12.75 9 12.75ZM9 6.75C7.755 6.75 6.75 7.755 6.75 9C6.75 10.245 7.755 11.25 9 11.25C10.245 11.25 11.25 10.245 11.25 9C11.25 7.755 10.245 6.75 9 6.75Z" fill="#9CABBE"></path>
</svg>
<p class="satellite-choice__right-area__button__text">ID</p>
@ -32,14 +32,14 @@ exports[`SatelliteSelectionDropdownItem renders correctly if disqualified 1`] =
`;
exports[`SatelliteSelectionDropdownItem renders correctly if suspended 1`] = `
<button name="Choose name satellite" class="satellite-choice">
<button name="Choose name satellite" type="button" class="satellite-choice">
<!----> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="suspended image" class="satellite-choice__image">
<path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"></path>
</svg>
<p class="satellite-choice__name suspended with-id-button">
name
</p>
<div class="satellite-choice__right-area"><button name="Show Satellite ID" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
<div class="satellite-choice__right-area"><button name="Show Satellite ID" type="button" class="satellite-choice__right-area__button"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg">
<path d="M9 3.375C5.25 3.375 2.0475 5.7075 0.75 9C2.0475 12.2925 5.25 14.625 9 14.625C12.75 14.625 15.9525 12.2925 17.25 9C15.9525 5.7075 12.75 3.375 9 3.375ZM9 12.75C6.93 12.75 5.25 11.07 5.25 9C5.25 6.93 6.93 5.25 9 5.25C11.07 5.25 12.75 6.93 12.75 9C12.75 11.07 11.07 12.75 9 12.75ZM9 6.75C7.755 6.75 6.75 7.755 6.75 9C6.75 10.245 7.755 11.25 9 11.25C10.245 11.25 11.25 10.245 11.25 9C11.25 7.755 10.245 6.75 9 6.75Z" fill="#9CABBE"></path>
</svg>
<p class="satellite-choice__right-area__button__text">ID</p>

View File

@ -8,7 +8,7 @@ exports[`NotificationsArea renders correctly with no notifications 1`] = `
<backarrowicon-stub></backarrowicon-stub>
</router-link>
<p class="notifications-container__header__text">Notifications</p>
</div> <button name="Mark all notifications as read" class="notifications-container__header__button disabled">
</div> <button name="Mark all notifications as read" type="button" class="notifications-container__header__button disabled">
<p class="notifications-container__header__button__label">Mark all as read</p>
</button>
</div>
@ -27,7 +27,7 @@ exports[`NotificationsArea renders correctly with notifications 1`] = `
<backarrowicon-stub></backarrowicon-stub>
</router-link>
<p class="notifications-container__header__text">Notifications</p>
</div> <button name="Mark all notifications as read" class="notifications-container__header__button">
</div> <button name="Mark all notifications as read" type="button" class="notifications-container__header__button">
<p class="notifications-container__header__button__label">Mark all as read</p>
</button>
</div>

View File

@ -4,7 +4,7 @@ exports[`EstimationArea renders correctly with actual values and current period
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Feb 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item active">
<div class="estimation-container__header__selection-area"><button name="Select Current Period" type="button" class="estimation-container__header__selection-area__item active">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
</p>
@ -142,7 +142,7 @@ exports[`EstimationArea renders correctly with actual values and current period
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Feb 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item active">
<div class="estimation-container__header__selection-area"><button name="Select Current Period" type="button" class="estimation-container__header__selection-area__item active">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
</p>
@ -288,7 +288,7 @@ exports[`EstimationArea renders correctly with actual values and historical peri
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
<div class="estimation-container__header__selection-area"><button name="Select Current Period" type="button" class="estimation-container__header__selection-area__item">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
</p>
@ -443,7 +443,7 @@ exports[`EstimationArea renders correctly with actual values and historical peri
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
<div class="estimation-container__header__selection-area"><button name="Select Current Period" type="button" class="estimation-container__header__selection-area__item">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
</p>
@ -468,7 +468,7 @@ exports[`EstimationArea renders correctly with actual values and previous period
<div class="estimation-container">
<div class="estimation-container__header">
<p class="estimation-container__header__title">Info &amp; Estimation, <span class="estimation-container__header__period">Jan 2020</span></p>
<div class="estimation-container__header__selection-area"><button name="Select Current Period" class="estimation-container__header__selection-area__item">
<div class="estimation-container__header__selection-area"><button name="Select Current Period" type="button" class="estimation-container__header__selection-area__item">
<p class="estimation-container__header__selection-area__item__label long-text">
Current Period
</p>

View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EstimationPeriodDropdown renders correctly 1`] = `
<button name="Show Period Date Picker" class="period-container">
<button name="Show Period Date Picker" type="button" class="period-container">
<p class="period-container__label long-text">Custom Date Range</p>
<p class="period-container__label short-text">Custom Range</p>
<blackarrowexpand-stub></blackarrowexpand-stub>

View File

@ -4,11 +4,11 @@ exports[`HeldHistoryArea changes state correctly 1`] = `
<section class="held-history-container">
<div class="held-history-container__header">
<p class="held-history-container__header__title">Held Amount History</p>
<div class="held-history-container__header__selection-area"><button name="Select All Stats" class="held-history-container__header__selection-area__item">
<div class="held-history-container__header__selection-area"><button name="Select All Stats" type="button" class="held-history-container__header__selection-area__item">
<p class="held-history-container__header__selection-area__item__label">
All Stats
</p>
</button> <button name="Select Monthly Breakdown" class="held-history-container__header__selection-area__item active">
</button> <button name="Select Monthly Breakdown" type="button" class="held-history-container__header__selection-area__item active">
<p class="held-history-container__header__selection-area__item__label">
Monthly Breakdown
</p>
@ -23,11 +23,11 @@ exports[`HeldHistoryArea changes state correctly 2`] = `
<section class="held-history-container">
<div class="held-history-container__header">
<p class="held-history-container__header__title">Held Amount History</p>
<div class="held-history-container__header__selection-area"><button name="Select All Stats" class="held-history-container__header__selection-area__item active">
<div class="held-history-container__header__selection-area"><button name="Select All Stats" type="button" class="held-history-container__header__selection-area__item active">
<p class="held-history-container__header__selection-area__item__label">
All Stats
</p>
</button> <button name="Select Monthly Breakdown" class="held-history-container__header__selection-area__item">
</button> <button name="Select Monthly Breakdown" type="button" class="held-history-container__header__selection-area__item">
<p class="held-history-container__header__selection-area__item__label">
Monthly Breakdown
</p>
@ -42,11 +42,11 @@ exports[`HeldHistoryArea renders correctly 1`] = `
<section class="held-history-container">
<div class="held-history-container__header">
<p class="held-history-container__header__title">Held Amount History</p>
<div class="held-history-container__header__selection-area"><button name="Select All Stats" class="held-history-container__header__selection-area__item active">
<div class="held-history-container__header__selection-area"><button name="Select All Stats" type="button" class="held-history-container__header__selection-area__item active">
<p class="held-history-container__header__selection-area__item__label">
All Stats
</p>
</button> <button name="Select Monthly Breakdown" class="held-history-container__header__selection-area__item">
</button> <button name="Select Monthly Breakdown" type="button" class="held-history-container__header__selection-area__item">
<p class="held-history-container__header__selection-area__item__label">
Monthly Breakdown
</p>

View File

@ -3,41 +3,41 @@
exports[`PayoutPeriodCalendar renders correctly 1`] = `
<div class="payout-period-calendar">
<div class="payout-period-calendar__header">
<div class="payout-period-calendar__header__year-selection"><button name="Decrement year" class="payout-period-calendar__header__year-selection__prev">
<div class="payout-period-calendar__header__year-selection"><button name="Decrement year" type="button" class="payout-period-calendar__header__year-selection__prev">
<grayarrowlefticon-stub></grayarrowlefticon-stub>
</button>
<p class="payout-period-calendar__header__year-selection__year">2020</p> <button name="Increment year" class="payout-period-calendar__header__year-selection__next">
<p class="payout-period-calendar__header__year-selection__year">2020</p> <button name="Increment year" type="button" class="payout-period-calendar__header__year-selection__next">
<grayarrowlefticon-stub></grayarrowlefticon-stub>
</button>
</div> <button name="Select All Time" class="payout-period-calendar__header__all-time">All time</button>
</div> <button name="Select All Time" type="button" class="payout-period-calendar__header__all-time">All time</button>
</div>
<div class="payout-period-calendar__months-area"><button name="Select year 2020 month Jan" class="month-item">
<div class="payout-period-calendar__months-area"><button name="Select year 2020 month Jan" type="button" class="month-item">
<p class="month-item__label">Jan</p>
</button><button name="Select year 2020 month Feb" class="month-item">
</button><button name="Select year 2020 month Feb" type="button" class="month-item">
<p class="month-item__label">Feb</p>
</button><button name="Select year 2020 month Mar" class="month-item disabled">
</button><button name="Select year 2020 month Mar" type="button" class="month-item disabled">
<p class="month-item__label">Mar</p>
</button><button name="Select year 2020 month Apr" class="month-item disabled">
</button><button name="Select year 2020 month Apr" type="button" class="month-item disabled">
<p class="month-item__label">Apr</p>
</button><button name="Select year 2020 month May" class="month-item disabled">
</button><button name="Select year 2020 month May" type="button" class="month-item disabled">
<p class="month-item__label">May</p>
</button><button name="Select year 2020 month Jun" class="month-item disabled">
</button><button name="Select year 2020 month Jun" type="button" class="month-item disabled">
<p class="month-item__label">Jun</p>
</button><button name="Select year 2020 month Jul" class="month-item disabled">
</button><button name="Select year 2020 month Jul" type="button" class="month-item disabled">
<p class="month-item__label">Jul</p>
</button><button name="Select year 2020 month Aug" class="month-item disabled">
</button><button name="Select year 2020 month Aug" type="button" class="month-item disabled">
<p class="month-item__label">Aug</p>
</button><button name="Select year 2020 month Sep" class="month-item disabled">
</button><button name="Select year 2020 month Sep" type="button" class="month-item disabled">
<p class="month-item__label">Sep</p>
</button><button name="Select year 2020 month Oct" class="month-item disabled">
</button><button name="Select year 2020 month Oct" type="button" class="month-item disabled">
<p class="month-item__label">Oct</p>
</button><button name="Select year 2020 month Nov" class="month-item disabled">
</button><button name="Select year 2020 month Nov" type="button" class="month-item disabled">
<p class="month-item__label">Nov</p>
</button><button name="Select year 2020 month Dec" class="month-item disabled">
</button><button name="Select year 2020 month Dec" type="button" class="month-item disabled">
<p class="month-item__label">Dec</p>
</button></div>
<div class="payout-period-calendar__footer-area">
<p class="payout-period-calendar__footer-area__period"></p> <button name="Submit" class="payout-period-calendar__footer-area__ok-button">OK</button>
<p class="payout-period-calendar__footer-area__period"></p> <button name="Submit" type="submit" class="payout-period-calendar__footer-area__ok-button">OK</button>
</div>
</div>
`;
@ -45,41 +45,41 @@ exports[`PayoutPeriodCalendar renders correctly 1`] = `
exports[`PayoutPeriodCalendar renders correctly 2`] = `
<div class="payout-period-calendar">
<div class="payout-period-calendar__header">
<div class="payout-period-calendar__header__year-selection"><button name="Decrement year" class="payout-period-calendar__header__year-selection__prev">
<div class="payout-period-calendar__header__year-selection"><button name="Decrement year" type="button" class="payout-period-calendar__header__year-selection__prev">
<grayarrowlefticon-stub></grayarrowlefticon-stub>
</button>
<p class="payout-period-calendar__header__year-selection__year">2019</p> <button name="Increment year" class="payout-period-calendar__header__year-selection__next">
<p class="payout-period-calendar__header__year-selection__year">2019</p> <button name="Increment year" type="button" class="payout-period-calendar__header__year-selection__next">
<grayarrowlefticon-stub></grayarrowlefticon-stub>
</button>
</div> <button name="Select All Time" class="payout-period-calendar__header__all-time">All time</button>
</div> <button name="Select All Time" type="button" class="payout-period-calendar__header__all-time">All time</button>
</div>
<div class="payout-period-calendar__months-area"><button name="Select year 2019 month Jan" class="month-item disabled">
<div class="payout-period-calendar__months-area"><button name="Select year 2019 month Jan" type="button" class="month-item disabled">
<p class="month-item__label">Jan</p>
</button><button name="Select year 2019 month Feb" class="month-item disabled">
</button><button name="Select year 2019 month Feb" type="button" class="month-item disabled">
<p class="month-item__label">Feb</p>
</button><button name="Select year 2019 month Mar" class="month-item disabled">
</button><button name="Select year 2019 month Mar" type="button" class="month-item disabled">
<p class="month-item__label">Mar</p>
</button><button name="Select year 2019 month Apr" class="month-item disabled">
</button><button name="Select year 2019 month Apr" type="button" class="month-item disabled">
<p class="month-item__label">Apr</p>
</button><button name="Select year 2019 month May" class="month-item disabled">
</button><button name="Select year 2019 month May" type="button" class="month-item disabled">
<p class="month-item__label">May</p>
</button><button name="Select year 2019 month Jun" class="month-item disabled">
</button><button name="Select year 2019 month Jun" type="button" class="month-item disabled">
<p class="month-item__label">Jun</p>
</button><button name="Select year 2019 month Jul" class="month-item disabled">
</button><button name="Select year 2019 month Jul" type="button" class="month-item disabled">
<p class="month-item__label">Jul</p>
</button><button name="Select year 2019 month Aug" class="month-item disabled">
</button><button name="Select year 2019 month Aug" type="button" class="month-item disabled">
<p class="month-item__label">Aug</p>
</button><button name="Select year 2019 month Sep" class="month-item disabled">
</button><button name="Select year 2019 month Sep" type="button" class="month-item disabled">
<p class="month-item__label">Sep</p>
</button><button name="Select year 2019 month Oct" class="month-item disabled">
</button><button name="Select year 2019 month Oct" type="button" class="month-item disabled">
<p class="month-item__label">Oct</p>
</button><button name="Select year 2019 month Nov" class="month-item disabled">
</button><button name="Select year 2019 month Nov" type="button" class="month-item disabled">
<p class="month-item__label">Nov</p>
</button><button name="Select year 2019 month Dec" class="month-item">
</button><button name="Select year 2019 month Dec" type="button" class="month-item">
<p class="month-item__label">Dec</p>
</button></div>
<div class="payout-period-calendar__footer-area">
<p class="payout-period-calendar__footer-area__period"></p> <button name="Submit" class="payout-period-calendar__footer-area__ok-button">OK</button>
<p class="payout-period-calendar__footer-area__period"></p> <button name="Submit" type="submit" class="payout-period-calendar__footer-area__ok-button">OK</button>
</div>
</div>
`;