Skip to content

Commit 3833212

Browse files
100stacks100stacks
authored
Merge pull request #665 from BY00565233/SURF-1710
feat(password control): added password control component in left menu
2 parents 08a110c + b0f69fb commit 3833212

File tree

13 files changed

+939
-0
lines changed

13 files changed

+939
-0
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
{ label: 'Navigation', path: 'navigation' },
4545
{ label: 'Pagination', path: 'pagination' },
4646
{ label: 'Panel', path: 'panel' },
47+
{ label: 'Password Input', path: 'password' },
4748
{ label: 'Pill', path: 'pill' },
4849
{ label: 'Popover', path: 'popover' },
4950
{ label: 'Radio', path: 'radio' },
@@ -83,6 +84,7 @@
8384
{ label: '<hx-menu>', path: 'hx-menu' },
8485
{ label: '<hx-menuitem>', path: 'hx-menuitem' },
8586
{ label: '<hx-modal>', path: 'hx-modal' },
87+
{ label: '<hx-password-control>', path: 'hx-password-control' },
8688
{ label: '<hx-pill>', path: 'hx-pill' },
8789
{ label: '<hx-popover>', path: 'hx-popover' },
8890
{ label: '<hx-progress>', path: 'hx-progress' },

‎docs/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@
1313
@import "radio/spec";
1414
@import "textarea/spec";
1515
@import "text-input/spec";
16+
@import "password/spec";

‎docs/components/password/_spec.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import "components/form/mixins/textControl";
2+
3+
.password-spec {
4+
hx-password-control {
5+
// ----- Pristine ---------------
6+
> input[type="password"].mock-focus {
7+
@include hxTextControl($focused: true);
8+
}
9+
10+
// ----- Disabled ---------------
11+
> input[type="password"]:disabled.mock-focus {
12+
@include hxTextControl(disabled, $focused: true);
13+
}
14+
15+
// ----- Changed / Touched ---------------
16+
&[hx-dirty] {
17+
> input[type="password"]:invalid.mock-focus {
18+
@include hxTextControl(invalid, $focused: true);
19+
}
20+
}
21+
22+
// ----- Styled Invalid ---------------
23+
&.hxInvalid > input[type="password"]:enabled.mock-focus {
24+
@include hxTextControl(invalid, $focused: true);
25+
}
26+
}
27+
}

‎docs/components/password/index.html‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
title: Password Input
3+
minver: 0.20.0
4+
also:
5+
components/password/test.html: Testing - Password Input
6+
elements/hx-password-control/index.html: <hx-password-control>
7+
---
8+
{% extends 'component.njk' %}
9+
10+
{% block page_header %}
11+
<p>
12+
The {{page.title}} component provides markup to define
13+
an input control when a user must enter or update the
14+
password.
15+
</p>
16+
{% endblock %}
17+
18+
{% block content %}
19+
<section>
20+
<header>
21+
<h2 id="basic-password-input">Basic Password Input</h2>
22+
{# TODO: add section description #}
23+
</header>
24+
25+
<div class="example" id="vue-passwordInputDemo" v-cloak>
26+
<header>
27+
<form class="beta-hxForm">
28+
<fieldset>
29+
<legend class="beta-hxFieldName">Label Annotation</legend>
30+
<hx-checkbox-control>
31+
<input
32+
id="chkHasAsterisk"
33+
type="checkbox"
34+
v-model="hasAsterisk"
35+
/>
36+
<label for="chkHasAsterisk">
37+
<hx-checkbox></hx-checkbox>
38+
Required
39+
</label>
40+
</hx-checkbox-control>
41+
</fieldset>
42+
43+
<fieldset>
44+
<legend class="beta-hxFieldName">Control Options</legend>
45+
<hx-checkbox-control>
46+
<input
47+
id="chkDisabled"
48+
type="checkbox"
49+
v-model="isDisabled"
50+
/>
51+
<label for="chkDisabled">
52+
<hx-checkbox></hx-checkbox>
53+
Disabled
54+
</label>
55+
<p>
56+
(Invalid styling applied <i>after</i> user interaction.)
57+
</p>
58+
</hx-checkbox-control>
59+
</fieldset>
60+
61+
<fieldset>
62+
<legend class="beta-hxFieldName">Optional Text</legend>
63+
<hx-checkbox-control>
64+
<input
65+
id="chkHasHelpText"
66+
type="checkbox"
67+
v-model="helpTextToDisplay"
68+
/>
69+
<label for="chkHasHelpText">
70+
<hx-checkbox></hx-checkbox>
71+
Help Text
72+
</label>
73+
</hx-checkbox-control>
74+
<hx-checkbox-control>
75+
<input
76+
id="chkHasError"
77+
type="checkbox"
78+
v-model="errorTextToDisplay"
79+
/>
80+
<label for="chkHasError">
81+
<hx-checkbox></hx-checkbox>
82+
Error Text
83+
</label>
84+
</hx-checkbox-control>
85+
86+
<hx-text-control>
87+
<label> Help Text</label>
88+
<input type="text" v-model="helpText" :disabled="!helpTextToDisplay">
89+
</hx-text-control>
90+
91+
<hx-text-control>
92+
<label> Error Text</label>
93+
<input type="text" v-model="errorText" :disabled="!errorTextToDisplay">
94+
</hx-text-control>
95+
</fieldset>
96+
</form>
97+
</header>
98+
99+
<div>
100+
<hx-password-control>
101+
<input
102+
id="pwdInputDemo"
103+
type="password"
104+
v-model = "Password"
105+
:disabled="isDisabled"
106+
:required="isRequired"
107+
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
108+
/>
109+
<label
110+
for="pwdInputDemo"
111+
:class="{ hxOptional: hasOptional, hxRequired: hasAsterisk }"
112+
>
113+
{% raw %}{{label}}{% endraw %}
114+
</label>
115+
<p class="hxHelpText" :hidden="!helpTextToDisplay">
116+
{% raw %}{{helpText}} {% endraw %}
117+
</p>
118+
<p class="hxErrorText" :hidden="!errorTextToDisplay">
119+
<hx-error>
120+
{% raw %}{{errorText}} {% endraw %}
121+
</hx-error>
122+
</p>
123+
</hx-password-control>
124+
</div>
125+
126+
<footer>
127+
<pre><code v-text="snippet"></code></pre>
128+
</footer>
129+
</div>
130+
131+
<footer>
132+
<p class="hxSubBody hxSubdued">
133+
<hx-icon type="exclamation-triangle"></hx-icon>
134+
The <code>&lt;input&gt;</code> element <i>must</i> have the
135+
<code>type="password"</code> attribute, in order for CSS styles
136+
to apply.
137+
</p>
138+
</footer>
139+
</section>
140+
{% endblock %}

‎docs/components/password/password-demo.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-passwordInputDemo')) {
4+
new Vue({
5+
el: '#vue-passwordInputDemo',
6+
data: {
7+
hasAsterisk: false,
8+
hasOptional: false,
9+
hasError : false,
10+
hasHelpText : false,
11+
isDisabled: false,
12+
isRequired: false,
13+
Password: 'Pas$w0rd',
14+
label : 'Password',
15+
errorTextToDisplay: false,
16+
helpTextToDisplay: false,
17+
helpText: 'At least 8 characters with 1 uppercase, 1 lowercase, and 1 number.',
18+
errorText: 'Please enter a valid password',
19+
},
20+
computed: {
21+
attrDisabled: function () {
22+
return (this.isDisabled ? 'disabled' : '');
23+
},
24+
attrRequired: function () {
25+
return (this.isRequired ? 'required' : '');
26+
},
27+
lblClasses: function () {
28+
let classes = [];
29+
30+
if (this.hasAsterisk) {
31+
classes.push('hxRequired');
32+
}
33+
34+
if (this.hasOptional) {
35+
classes.push('hxOptional');
36+
}
37+
38+
let classNames = classes.join(' ');
39+
40+
return (classNames === '' ? '' : `class="${classNames}"`);
41+
},
42+
isHelpTextHidden: function () {
43+
return (this.helpTextToDisplay ? '' : 'hidden');
44+
},
45+
isErrorTextHidden: function () {
46+
return (this.errorTextToDisplay ? '' : 'hidden');
47+
},
48+
snippet: function () {
49+
return Util.snippet(`
50+
<hx-password-control>
51+
<input
52+
id="pwdDemo"
53+
type="password"
54+
${this.attrDisabled}
55+
${this.attrRequired}
56+
/>
57+
<label
58+
for="pwdDemo"
59+
${this.lblClasses}
60+
>
61+
${this.label}
62+
</label>
63+
<p class="hxHelpText" ${this.isHelpTextHidden}>
64+
${this.helpText}
65+
</p>
66+
<p class="hxErrorText" ${this.isErrorTextHidden}>
67+
<hx-error>
68+
${this.errorText}
69+
</hx-error>
70+
</p>
71+
</hx-password-control>
72+
`);
73+
},
74+
},
75+
});
76+
}

0 commit comments

Comments
 (0)