@1024pix/pix-ui 45.1.5 → 45.2.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/addon/components/pix-input.hbs +12 -10
- package/addon/components/pix-textarea.hbs +12 -10
- package/app/stories/pix-input.mdx +4 -0
- package/app/stories/pix-input.stories.js +23 -0
- package/app/stories/pix-textarea.mdx +3 -0
- package/app/stories/pix-textarea.stories.js +22 -0
- package/package.json +1 -1
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
<div class="pix-input {{if @inlineLabel ' pix-input--inline'}}">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
{{#if (has-block "label")}}
|
|
3
|
+
<PixLabel
|
|
4
|
+
@for={{this.id}}
|
|
5
|
+
@requiredLabel={{@requiredLabel}}
|
|
6
|
+
@subLabel={{@subLabel}}
|
|
7
|
+
@size={{@size}}
|
|
8
|
+
@screenReaderOnly={{@screenReaderOnly}}
|
|
9
|
+
@inlineLabel={{@inlineLabel}}
|
|
10
|
+
>
|
|
11
|
+
{{yield to="label"}}
|
|
12
|
+
</PixLabel>
|
|
13
|
+
{{/if}}
|
|
12
14
|
<div>
|
|
13
15
|
<div class="pix-input__container">
|
|
14
16
|
<input
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
<div class="pix-textarea {{if @inlineLabel ' pix-textarea--inline'}}">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
{{#if (has-block "label")}}
|
|
3
|
+
<PixLabel
|
|
4
|
+
@for={{this.id}}
|
|
5
|
+
@requiredLabel={{@requiredLabel}}
|
|
6
|
+
@subLabel={{@subLabel}}
|
|
7
|
+
@size={{@size}}
|
|
8
|
+
@screenReaderOnly={{@screenReaderOnly}}
|
|
9
|
+
@inlineLabel={{@inlineLabel}}
|
|
10
|
+
>
|
|
11
|
+
{{yield to="label"}}
|
|
12
|
+
</PixLabel>
|
|
13
|
+
{{/if}}
|
|
12
14
|
|
|
13
15
|
<div>
|
|
14
16
|
<textarea
|
|
@@ -72,6 +72,10 @@ En readonly, l'input n'est pas modifiable, mais il est toujours focusable et est
|
|
|
72
72
|
|
|
73
73
|
<Story of={ComponentStories.withRequiredLabel} height={100} />
|
|
74
74
|
|
|
75
|
+
## Without label
|
|
76
|
+
|
|
77
|
+
<Story of={ComponentStories.withoutLabel} height={100} />
|
|
78
|
+
|
|
75
79
|
## Usage
|
|
76
80
|
|
|
77
81
|
```html
|
|
@@ -102,6 +102,24 @@ const Template = (args) => {
|
|
|
102
102
|
};
|
|
103
103
|
};
|
|
104
104
|
|
|
105
|
+
const TemplateWithoutLabel = (args) => {
|
|
106
|
+
return {
|
|
107
|
+
template: hbs`<PixInput
|
|
108
|
+
@id={{this.id}}
|
|
109
|
+
@errorMessage={{this.errorMessage}}
|
|
110
|
+
placeholder='Jeanne, Pierre ...'
|
|
111
|
+
@validationStatus={{this.validationStatus}}
|
|
112
|
+
@size={{this.size}}
|
|
113
|
+
disabled={{this.disabled}}
|
|
114
|
+
readonly={{this.readonly}}
|
|
115
|
+
@subLabel={{this.subLabel}}
|
|
116
|
+
@inlineLabel={{this.inlineLabel}}
|
|
117
|
+
@requiredLabel={{this.requiredLabel}}
|
|
118
|
+
/>`,
|
|
119
|
+
context: args,
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
|
|
105
123
|
export const Default = Template.bind({});
|
|
106
124
|
Default.args = {
|
|
107
125
|
id: 'first-name',
|
|
@@ -150,3 +168,8 @@ withRequiredLabel.args = {
|
|
|
150
168
|
label: 'Prénom',
|
|
151
169
|
requiredLabel: 'Champ obligatoire',
|
|
152
170
|
};
|
|
171
|
+
|
|
172
|
+
export const withoutLabel = TemplateWithoutLabel.bind({});
|
|
173
|
+
withoutLabel.args = {
|
|
174
|
+
id: 'first-name',
|
|
175
|
+
};
|
|
@@ -90,8 +90,30 @@ const Template = (args) => {
|
|
|
90
90
|
};
|
|
91
91
|
};
|
|
92
92
|
|
|
93
|
+
const TemplateWithoutlabel = (args) => {
|
|
94
|
+
return {
|
|
95
|
+
template: hbs`<PixTextarea
|
|
96
|
+
@id={{this.id}}
|
|
97
|
+
@value={{this.value}}
|
|
98
|
+
@maxlength={{this.maxlength}}
|
|
99
|
+
@errorMessage={{this.errorMessage}}
|
|
100
|
+
@size={{this.size}}
|
|
101
|
+
@subLabel={{this.subLabel}}
|
|
102
|
+
@requiredLabel={{this.requiredLabel}}
|
|
103
|
+
@inlineLabel={{this.inlineLabel}}
|
|
104
|
+
/>`,
|
|
105
|
+
context: args,
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
|
|
93
109
|
export const textarea = Template.bind({});
|
|
94
110
|
textarea.args = {
|
|
95
111
|
id: 'textarea',
|
|
96
112
|
value: 'Contenu du textarea',
|
|
97
113
|
};
|
|
114
|
+
|
|
115
|
+
export const textareaWithoutLabel = TemplateWithoutlabel.bind({});
|
|
116
|
+
textarea.args = {
|
|
117
|
+
id: 'textarea-without-label',
|
|
118
|
+
value: 'Contenu du textarea',
|
|
119
|
+
};
|