Skip to content
This repository has been archived by the owner on May 2, 2023. It is now read-only.

Commit

Permalink
fix(text-area): update on the component - TWIG-49 (#148)
Browse files Browse the repository at this point in the history
  • Loading branch information
papegaill authored and planctus committed Sep 19, 2019
1 parent 508833d commit 4382b05
Show file tree
Hide file tree
Showing 6 changed files with 240 additions and 105 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,17 @@ exports[`EC - Text area Default renders correctly 1`] = `
>
Label
</label>
<textarea
class="ecl-text-area"
id="example-id"
name="example-name"
placeholder="Placeholder"
rows="4"
/>
<div
class="ecl-help-block"
>
Help message
</div>
<textarea
class="ecl-text-area ecl-text-area--m"
id="example-id"
name="example-name"
rows="4"
/>
</div>
`;

Expand All @@ -35,20 +34,19 @@ exports[`EC - Text area Default renders correctly with a default value 1`] = `
>
Label
</label>
<div
class="ecl-help-block"
>
Help message
</div>
<textarea
class="ecl-text-area"
class="ecl-text-area ecl-text-area--m"
id="example-id"
name="example-name"
placeholder="Placeholder"
rows="4"
>
Hello world!
</textarea>
<div
class="ecl-help-block"
>
Help message
</div>
</div>
`;

Expand All @@ -62,20 +60,19 @@ exports[`EC - Text area Default renders correctly with extra attributes 1`] = `
>
Label
</label>
<div
class="ecl-help-block"
>
Help message
</div>
<textarea
class="ecl-text-area"
class="ecl-text-area ecl-text-area--m"
data-test="data-test-value"
data-test-1="data-test-value-1"
id="example-id"
name="example-name"
placeholder="Placeholder"
rows="4"
/>
<div
class="ecl-help-block"
>
Help message
</div>
</div>
`;

Expand All @@ -89,18 +86,41 @@ exports[`EC - Text area Default renders correctly with extra class names 1`] = `
>
Label
</label>
<div
class="ecl-help-block"
>
Help message
</div>
<textarea
class="ecl-text-area custom-class custom-class--test"
class="ecl-text-area ecl-text-area--m custom-class custom-class--test"
id="example-id"
name="example-name"
placeholder="Placeholder"
rows="4"
/>
</div>
`;

exports[`EC - Text area Default renders correctly with extra group class names 1`] = `
<div
class="ecl-form-group ecl-form-group--text-area custom-group-class custom-group-class--test"
>
<label
class="ecl-form-label"
for="example-id"
>
Label
</label>
<div
class="ecl-help-block"
>
Help message
</div>
<textarea
class="ecl-text-area ecl-text-area--m"
id="example-id"
name="example-name"
rows="4"
/>
</div>
`;

Expand All @@ -109,24 +129,23 @@ exports[`EC - Text area Disabled renders correctly 1`] = `
class="ecl-form-group ecl-form-group--text-area"
>
<label
class="ecl-form-label"
class="ecl-form-label ecl-form-label--disabled"
for="example-id"
>
Label
</label>
<div
class="ecl-help-block ecl-help-block--disabled"
>
Help message
</div>
<textarea
class="ecl-text-area"
class="ecl-text-area ecl-text-area--m"
disabled=""
id="example-id"
name=""
placeholder="Placeholder"
rows="4"
/>
<div
class="ecl-help-block"
>
Help message
</div>
</div>
`;

Expand All @@ -135,26 +154,25 @@ exports[`EC - Text area Disabled renders correctly with extra attributes 1`] = `
class="ecl-form-group ecl-form-group--text-area"
>
<label
class="ecl-form-label"
class="ecl-form-label ecl-form-label--disabled"
for="example-id"
>
Label
</label>
<div
class="ecl-help-block ecl-help-block--disabled"
>
Help message
</div>
<textarea
class="ecl-text-area"
class="ecl-text-area ecl-text-area--m"
data-test="data-test-value"
data-test-1="data-test-value-1"
disabled=""
id="example-id"
name=""
placeholder="Placeholder"
rows="4"
/>
<div
class="ecl-help-block"
>
Help message
</div>
</div>
`;

Expand All @@ -163,24 +181,48 @@ exports[`EC - Text area Disabled renders correctly with extra class names 1`] =
class="ecl-form-group ecl-form-group--text-area"
>
<label
class="ecl-form-label"
class="ecl-form-label ecl-form-label--disabled"
for="example-id"
>
Label
</label>
<div
class="ecl-help-block ecl-help-block--disabled"
>
Help message
</div>
<textarea
class="ecl-text-area custom-class custom-class--test"
class="ecl-text-area ecl-text-area--m custom-class custom-class--test"
disabled=""
id="example-id"
name=""
placeholder="Placeholder"
rows="4"
/>
</div>
`;

exports[`EC - Text area Disabled renders correctly with extra group class names 1`] = `
<div
class="ecl-form-group ecl-form-group--text-area custom-group-class custom-group-class--test"
>
<label
class="ecl-form-label ecl-form-label--disabled"
for="example-id"
>
Label
</label>
<div
class="ecl-help-block"
class="ecl-help-block ecl-help-block--disabled"
>
Help message
</div>
<textarea
class="ecl-text-area ecl-text-area--m"
disabled=""
id="example-id"
name=""
rows="4"
/>
</div>
`;

Expand All @@ -194,23 +236,22 @@ exports[`EC - Text area With error renders correctly 1`] = `
>
Label
</label>
<textarea
class="ecl-text-area ecl-text-area--invalid"
id="example-id"
name="example-name"
placeholder="Placeholder"
rows="4"
/>
<div
class="ecl-feedback-message"
class="ecl-help-block"
>
Error message
Help message
</div>
<div
class="ecl-help-block"
class="ecl-feedback-message"
>
Help message
Error message
</div>
<textarea
class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"
id="example-id"
name="example-name"
rows="4"
/>
</div>
`;

Expand All @@ -224,25 +265,24 @@ exports[`EC - Text area With error renders correctly with extra attributes 1`] =
>
Label
</label>
<div
class="ecl-help-block"
>
Help message
</div>
<div
class="ecl-feedback-message"
>
Error message
</div>
<textarea
class="ecl-text-area ecl-text-area--invalid"
class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"
data-test="data-test-value"
data-test-1="data-test-value-1"
id="example-id"
name="example-name"
placeholder="Placeholder"
rows="4"
/>
<div
class="ecl-feedback-message"
>
Error message
</div>
<div
class="ecl-help-block"
>
Help message
</div>
</div>
`;

Expand All @@ -256,22 +296,50 @@ exports[`EC - Text area With error renders correctly with extra class names 1`]
>
Label
</label>
<div
class="ecl-help-block"
>
Help message
</div>
<div
class="ecl-feedback-message"
>
Error message
</div>
<textarea
class="ecl-text-area ecl-text-area--invalid custom-class custom-class--test"
class="ecl-text-area ecl-text-area--invalid ecl-text-area--m custom-class custom-class--test"
id="example-id"
name="example-name"
placeholder="Placeholder"
rows="4"
/>
<div
class="ecl-feedback-message"
</div>
`;

exports[`EC - Text area With error renders correctly with extra group class names 1`] = `
<div
class="ecl-form-group ecl-form-group--text-area custom-group-class custom-group-class--test"
>
<label
class="ecl-form-label ecl-form-label--invalid"
for="example-id"
>
Error message
</div>
Label
</label>
<div
class="ecl-help-block"
>
Help message
</div>
<div
class="ecl-feedback-message"
>
Error message
</div>
<textarea
class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"
id="example-id"
name="example-name"
rows="4"
/>
</div>
`;
8 changes: 6 additions & 2 deletions src/ec/packages/ec-component-text-area/docs/text-area.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ npm install --save @ecl-twig/ec-component-text-area
- "invalid" (boolean) (default: false)
- "name" (string) (default: '')
- "default_value" (string) (default: '')
- "hide_label" (boolean) (default: '')
- "placeholder" (string) (default: '')
- "rows" (int) (default: 4)
- "width" (string) (default: '') Input width size (s, m or l)
- "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the text-area group
- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the text area
- "extra_attributes" (optional) (array) (default: []) Extra attributes for text area
- "name" (string) Attribute name, eg. 'data-test'
Expand All @@ -27,6 +27,8 @@ npm install --save @ecl-twig/ec-component-text-area

- "helper_text"
- "invalid_text"
- "required_text"
- "optional_text"
- "label"

### Example:
Expand All @@ -42,6 +44,8 @@ npm install --save @ecl-twig/ec-component-text-area
name: 'comment',
default_value: 'Hello world!',
rows: 4,
width: 'm',
extra_group_classes: 'my-extra-group-class-1 my-extra-group-class-2',
extra_classes: 'my-extra-class-1 my-extra-class-2',
extra_attributes: [
{ name: 'data-test-1', value: 'data-test-value-1' },
Expand Down
Loading

0 comments on commit 4382b05

Please sign in to comment.