@1024pix/pix-ui 13.4.4 → 13.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/addon/components/pix-input-password.hbs +8 -1
- package/addon/components/pix-input.hbs +14 -2
- package/app/stories/form.stories.js +1 -1
- package/app/stories/pix-input-password.stories.js +17 -0
- package/app/stories/pix-input-password.stories.mdx +14 -7
- package/app/stories/pix-input.stories.js +19 -1
- package/app/stories/pix-input.stories.mdx +11 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
<div class="pix-input-password">
|
|
2
2
|
{{#if this.label}}
|
|
3
|
-
<label for={{this.id}} class="pix-input__label">
|
|
3
|
+
<label for={{this.id}} class="pix-input__label">
|
|
4
|
+
{{#if @requiredLabel}}
|
|
5
|
+
<abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
|
|
6
|
+
{{/if}}
|
|
7
|
+
{{this.label}}
|
|
8
|
+
</label>
|
|
4
9
|
{{/if}}
|
|
5
10
|
{{#if @information}}
|
|
6
11
|
<label for={{this.id}} class="pix-input__information">{{@information}}</label>
|
|
@@ -20,6 +25,8 @@
|
|
|
20
25
|
type={{if this.isPasswordVisible "text" "password"}}
|
|
21
26
|
value={{@value}}
|
|
22
27
|
aria-label={{this.ariaLabel}}
|
|
28
|
+
aria-required="{{if @requiredLabel true false}}"
|
|
29
|
+
required={{if @requiredLabel true false}}
|
|
23
30
|
...attributes
|
|
24
31
|
/>
|
|
25
32
|
|
|
@@ -1,13 +1,25 @@
|
|
|
1
1
|
<div class="pix-input">
|
|
2
2
|
{{#if @label}}
|
|
3
|
-
<label for={{this.id}} class="pix-input__label">
|
|
3
|
+
<label for={{this.id}} class="pix-input__label">
|
|
4
|
+
{{#if @requiredLabel}}
|
|
5
|
+
<abbr title={{@requiredLabel}} class="mandatory-mark" aria-hidden="true">*</abbr>
|
|
6
|
+
{{/if}}
|
|
7
|
+
{{@label}}
|
|
8
|
+
</label>
|
|
4
9
|
{{/if}}
|
|
5
10
|
{{#if @information}}
|
|
6
11
|
<label for={{this.id}} class="pix-input__information">{{@information}}</label>
|
|
7
12
|
{{/if}}
|
|
8
13
|
|
|
9
14
|
<div class="pix-input__container">
|
|
10
|
-
<input
|
|
15
|
+
<input
|
|
16
|
+
id={{this.id}}
|
|
17
|
+
class={{this.className}}
|
|
18
|
+
value={{@value}}
|
|
19
|
+
aria-required="{{if @requiredLabel true false}}"
|
|
20
|
+
required={{if @requiredLabel true false}}
|
|
21
|
+
...attributes
|
|
22
|
+
/>
|
|
11
23
|
|
|
12
24
|
{{#if @errorMessage}}
|
|
13
25
|
<FaIcon @icon="times" class="pix-input__error-icon" />
|
|
@@ -5,7 +5,7 @@ export const form = (args) => {
|
|
|
5
5
|
return {
|
|
6
6
|
template: hbs`
|
|
7
7
|
<form>
|
|
8
|
-
<PixInput @id='firstName' @label='Prénom' @errorMessage={{genericErrorMessage}} />
|
|
8
|
+
<PixInput @id='firstName' @label='Prénom' @errorMessage={{genericErrorMessage}} @requiredLabel='champ obligatoire'/>
|
|
9
9
|
<br>
|
|
10
10
|
<PixInputPassword @id='password' @label='Mot de passe' @errorMessage={{genericErrorMessage}} />
|
|
11
11
|
<br>
|
|
@@ -10,6 +10,7 @@ export const Template = (args) => {
|
|
|
10
10
|
@information={{information}}
|
|
11
11
|
@errorMessage={{errorMessage}}
|
|
12
12
|
@prefix={{prefix}}
|
|
13
|
+
@requiredLabel={{requiredLabel}}
|
|
13
14
|
/>
|
|
14
15
|
`,
|
|
15
16
|
context: args,
|
|
@@ -43,6 +44,13 @@ withPrefix.args = {
|
|
|
43
44
|
prefix: 'C -',
|
|
44
45
|
};
|
|
45
46
|
|
|
47
|
+
export const withRequiredLabel = Template.bind({});
|
|
48
|
+
withRequiredLabel.args = {
|
|
49
|
+
id: 'password',
|
|
50
|
+
label: 'Mot de passe',
|
|
51
|
+
requiredLabel: 'Champ obligatoire',
|
|
52
|
+
};
|
|
53
|
+
|
|
46
54
|
export const argTypes = {
|
|
47
55
|
id: {
|
|
48
56
|
name: 'id',
|
|
@@ -86,4 +94,13 @@ export const argTypes = {
|
|
|
86
94
|
type: { name: 'string', required: false },
|
|
87
95
|
defaultValue: null,
|
|
88
96
|
},
|
|
97
|
+
requiredLabel: {
|
|
98
|
+
name: 'requiredLabel',
|
|
99
|
+
description:
|
|
100
|
+
'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
|
|
101
|
+
type: { name: 'string', required: false },
|
|
102
|
+
table: {
|
|
103
|
+
type: { summary: 'string' },
|
|
104
|
+
},
|
|
105
|
+
},
|
|
89
106
|
};
|
|
@@ -41,7 +41,7 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
|
|
|
41
41
|
## With error message
|
|
42
42
|
|
|
43
43
|
<Canvas>
|
|
44
|
-
<Story story={stories.withErrorMessage} height={
|
|
44
|
+
<Story story={stories.withErrorMessage} height={100} />
|
|
45
45
|
</Canvas>
|
|
46
46
|
|
|
47
47
|
## With prefix
|
|
@@ -50,16 +50,23 @@ Si vous utilisez le `PixInputPassword` sans label alors il faut renseigner le pa
|
|
|
50
50
|
<Story story={stories.withPrefix} height={100} />
|
|
51
51
|
</Canvas>
|
|
52
52
|
|
|
53
|
+
## With required label
|
|
54
|
+
|
|
55
|
+
<Canvas>
|
|
56
|
+
<Story story={stories.withRequiredLabel} height={100} />
|
|
57
|
+
</Canvas>
|
|
58
|
+
|
|
53
59
|
## Usage
|
|
54
60
|
|
|
55
61
|
```html
|
|
56
62
|
<PixInputPassword
|
|
57
|
-
@id='
|
|
58
|
-
@label='
|
|
59
|
-
@information='
|
|
60
|
-
@value='
|
|
61
|
-
@errorMessage='
|
|
62
|
-
@prefix='
|
|
63
|
+
@id='password'
|
|
64
|
+
@label='Mot de passe'
|
|
65
|
+
@information='8 caractères dont une majuscule...'
|
|
66
|
+
@value='pix123'
|
|
67
|
+
@errorMessage='Le mot de passe est erroné'
|
|
68
|
+
@prefix='C-'
|
|
69
|
+
@requiredLabel='Champ obligatoire'
|
|
63
70
|
/>
|
|
64
71
|
```
|
|
65
72
|
|
|
@@ -10,7 +10,9 @@ export const Template = (args) => {
|
|
|
10
10
|
@errorMessage={{errorMessage}}
|
|
11
11
|
@icon={{icon}}
|
|
12
12
|
@isIconLeft={{isIconLeft}}
|
|
13
|
-
placeholder='Jeanne, Pierre ...'
|
|
13
|
+
placeholder='Jeanne, Pierre ...'
|
|
14
|
+
@requiredLabel={{requiredLabel}}
|
|
15
|
+
/>
|
|
14
16
|
`,
|
|
15
17
|
context: args,
|
|
16
18
|
};
|
|
@@ -43,6 +45,13 @@ withIcon.args = {
|
|
|
43
45
|
icon: 'eye',
|
|
44
46
|
};
|
|
45
47
|
|
|
48
|
+
export const withRequiredLabel = Template.bind({});
|
|
49
|
+
withRequiredLabel.args = {
|
|
50
|
+
id: 'firstName',
|
|
51
|
+
label: 'Prénom',
|
|
52
|
+
requiredLabel: 'Champ obligatoire',
|
|
53
|
+
};
|
|
54
|
+
|
|
46
55
|
export const argTypes = {
|
|
47
56
|
id: {
|
|
48
57
|
name: 'id',
|
|
@@ -91,4 +100,13 @@ export const argTypes = {
|
|
|
91
100
|
defaultValue: { summary: 'false' },
|
|
92
101
|
},
|
|
93
102
|
},
|
|
103
|
+
requiredLabel: {
|
|
104
|
+
name: 'requiredLabel',
|
|
105
|
+
description:
|
|
106
|
+
'Label indiquant que le champ est requis, le paramètre @label devient obligatoire avec ce paramètre.',
|
|
107
|
+
type: { name: 'string', required: false },
|
|
108
|
+
table: {
|
|
109
|
+
type: { summary: 'string' },
|
|
110
|
+
},
|
|
111
|
+
},
|
|
94
112
|
};
|
|
@@ -39,6 +39,12 @@ Le PixInput permet de créer un champ de texte.
|
|
|
39
39
|
<Story story={stories.withIcon} height={130} />
|
|
40
40
|
</Canvas>
|
|
41
41
|
|
|
42
|
+
## With required label
|
|
43
|
+
|
|
44
|
+
<Canvas>
|
|
45
|
+
<Story story={stories.withRequiredLabel} height={130} />
|
|
46
|
+
</Canvas>
|
|
47
|
+
|
|
42
48
|
## Usage
|
|
43
49
|
|
|
44
50
|
```html
|
|
@@ -46,9 +52,11 @@ Le PixInput permet de créer un champ de texte.
|
|
|
46
52
|
@id='firstName'
|
|
47
53
|
@label='Prénom'
|
|
48
54
|
@information='Complément du label'
|
|
49
|
-
@errorMessage=
|
|
50
|
-
@icon=
|
|
51
|
-
@isIconLeft={{false}}
|
|
55
|
+
@errorMessage='Un message d`erreur'
|
|
56
|
+
@icon='eye'
|
|
57
|
+
@isIconLeft={{false}}
|
|
58
|
+
@requiredLabel='Champ obligatoire'
|
|
59
|
+
/>
|
|
52
60
|
```
|
|
53
61
|
|
|
54
62
|
## Arguments
|