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

Commit

Permalink
feat(checkbox): Green diff with ECL - TWIG-225 (#296)
Browse files Browse the repository at this point in the history
  • Loading branch information
@planctus @papegaill
planctus authored and papegaill committed Jan 27, 2020
1 parent 2089453 commit 889ebd2
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 43 deletions.
130 changes: 95 additions & 35 deletions src/ec/packages/ec-component-checkbox/__snapshots__/checkbox.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ exports[`EC - checkbox Default renders correctly 1`] = `
aria-describedby="checkbox-default-helper"
class="ecl-form-group ecl-form-group--checkbox"
>
<legend
class="ecl-form-label"
id="checkbox-default-label"
>
Select your preferred destinations
<span
class="ecl-form-label__optional"
>
(optional)
</span>
</legend>
<div
class="ecl-checkbox__help ecl-help-block"
id="checkbox-default-helper"
Expand All @@ -15,6 +26,7 @@ exports[`EC - checkbox Default renders correctly 1`] = `
class="ecl-checkbox"
>
<input
checked=""
class="ecl-checkbox__input"
id="checkbox-default-1"
name="checkbox-default"
Expand All @@ -40,12 +52,12 @@ exports[`EC - checkbox Default renders correctly 1`] = `
</span>
Spain
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-1"
>
Help text for option 1
</p>
</div>
</div>
<div
class="ecl-checkbox"
Expand Down Expand Up @@ -76,12 +88,12 @@ exports[`EC - checkbox Default renders correctly 1`] = `
</span>
Belgium
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-2"
>
Help text for option 2
</p>
</div>
</div>
<div
class="ecl-checkbox ecl-checkbox--disabled"
Expand All @@ -99,7 +111,7 @@ exports[`EC - checkbox Default renders correctly 1`] = `
for="checkbox-default-3"
>
<span
class="ecl-checkbox__box"
class="ecl-checkbox__box ecl-checkbox__box--disabled"
>
<svg
aria-hidden="true"
Expand All @@ -113,12 +125,12 @@ exports[`EC - checkbox Default renders correctly 1`] = `
</span>
France (disabled)
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block ecl-help-block--disabled"
id="helper-default-3"
>
Help text for option 3
</p>
</div>
</div>
</fieldset>
`;
Expand All @@ -128,6 +140,17 @@ exports[`EC - checkbox Default renders correctly when required 1`] = `
aria-describedby="checkbox-default-helper"
class="ecl-form-group ecl-form-group--checkbox"
>
<legend
class="ecl-form-label"
id="checkbox-default-label"
>
Select your preferred destinations
<span
class="ecl-form-label__optional"
>
(optional)
</span>
</legend>
<div
class="ecl-checkbox__help ecl-help-block"
id="checkbox-default-helper"
Expand All @@ -138,6 +161,7 @@ exports[`EC - checkbox Default renders correctly when required 1`] = `
class="ecl-checkbox"
>
<input
checked=""
class="ecl-checkbox__input"
id="checkbox-default-1"
name="checkbox-default"
Expand All @@ -164,12 +188,12 @@ exports[`EC - checkbox Default renders correctly when required 1`] = `
</span>
Spain
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-1"
>
Help text for option 1
</p>
</div>
</div>
<div
class="ecl-checkbox"
Expand Down Expand Up @@ -201,12 +225,12 @@ exports[`EC - checkbox Default renders correctly when required 1`] = `
</span>
Belgium
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-2"
>
Help text for option 2
</p>
</div>
</div>
<div
class="ecl-checkbox ecl-checkbox--disabled"
Expand All @@ -225,7 +249,7 @@ exports[`EC - checkbox Default renders correctly when required 1`] = `
for="checkbox-default-3"
>
<span
class="ecl-checkbox__box"
class="ecl-checkbox__box ecl-checkbox__box--disabled"
>
<svg
aria-hidden="true"
Expand All @@ -239,12 +263,12 @@ exports[`EC - checkbox Default renders correctly when required 1`] = `
</span>
France (disabled)
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block ecl-help-block--disabled"
id="helper-default-3"
>
Help text for option 3
</p>
</div>
</div>
</fieldset>
`;
Expand All @@ -256,6 +280,17 @@ exports[`EC - checkbox Default renders correctly with extra attributes 1`] = `
data-test="data-test-value"
data-test-1="data-test-value-1"
>
<legend
class="ecl-form-label"
id="checkbox-default-label"
>
Select your preferred destinations
<span
class="ecl-form-label__optional"
>
(optional)
</span>
</legend>
<div
class="ecl-checkbox__help ecl-help-block"
id="checkbox-default-helper"
Expand All @@ -266,6 +301,7 @@ exports[`EC - checkbox Default renders correctly with extra attributes 1`] = `
class="ecl-checkbox"
>
<input
checked=""
class="ecl-checkbox__input"
id="checkbox-default-1"
name="checkbox-default"
Expand All @@ -291,12 +327,12 @@ exports[`EC - checkbox Default renders correctly with extra attributes 1`] = `
</span>
Spain
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-1"
>
Help text for option 1
</p>
</div>
</div>
<div
class="ecl-checkbox"
Expand Down Expand Up @@ -327,12 +363,12 @@ exports[`EC - checkbox Default renders correctly with extra attributes 1`] = `
</span>
Belgium
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-2"
>
Help text for option 2
</p>
</div>
</div>
<div
class="ecl-checkbox ecl-checkbox--disabled"
Expand All @@ -350,7 +386,7 @@ exports[`EC - checkbox Default renders correctly with extra attributes 1`] = `
for="checkbox-default-3"
>
<span
class="ecl-checkbox__box"
class="ecl-checkbox__box ecl-checkbox__box--disabled"
>
<svg
aria-hidden="true"
Expand All @@ -364,12 +400,12 @@ exports[`EC - checkbox Default renders correctly with extra attributes 1`] = `
</span>
France (disabled)
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block ecl-help-block--disabled"
id="helper-default-3"
>
Help text for option 3
</p>
</div>
</div>
</fieldset>
`;
Expand All @@ -379,6 +415,17 @@ exports[`EC - checkbox Default renders correctly with extra class names 1`] = `
aria-describedby="checkbox-default-helper"
class="ecl-form-group ecl-form-group--checkbox custom-class custom-class--test"
>
<legend
class="ecl-form-label"
id="checkbox-default-label"
>
Select your preferred destinations
<span
class="ecl-form-label__optional"
>
(optional)
</span>
</legend>
<div
class="ecl-checkbox__help ecl-help-block"
id="checkbox-default-helper"
Expand All @@ -389,6 +436,7 @@ exports[`EC - checkbox Default renders correctly with extra class names 1`] = `
class="ecl-checkbox"
>
<input
checked=""
class="ecl-checkbox__input"
id="checkbox-default-1"
name="checkbox-default"
Expand All @@ -414,12 +462,12 @@ exports[`EC - checkbox Default renders correctly with extra class names 1`] = `
</span>
Spain
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-1"
>
Help text for option 1
</p>
</div>
</div>
<div
class="ecl-checkbox"
Expand Down Expand Up @@ -450,12 +498,12 @@ exports[`EC - checkbox Default renders correctly with extra class names 1`] = `
</span>
Belgium
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-default-2"
>
Help text for option 2
</p>
</div>
</div>
<div
class="ecl-checkbox ecl-checkbox--disabled"
Expand All @@ -473,7 +521,7 @@ exports[`EC - checkbox Default renders correctly with extra class names 1`] = `
for="checkbox-default-3"
>
<span
class="ecl-checkbox__box"
class="ecl-checkbox__box ecl-checkbox__box--disabled"
>
<svg
aria-hidden="true"
Expand All @@ -487,12 +535,12 @@ exports[`EC - checkbox Default renders correctly with extra class names 1`] = `
</span>
France (disabled)
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block ecl-help-block--disabled"
id="helper-default-3"
>
Help text for option 3
</p>
</div>
</div>
</fieldset>
`;
Expand All @@ -502,6 +550,17 @@ exports[`EC - checkbox Invalid renders correctly 1`] = `
aria-describedby="checkbox-default-helper"
class="ecl-form-group ecl-form-group--checkbox"
>
<legend
class="ecl-form-label ecl-checkbox__group--invalid"
id="checkbox-default-label"
>
Select your preferred destinations
<span
class="ecl-form-label__optional"
>
(optional)
</span>
</legend>
<div
class="ecl-checkbox__help ecl-help-block"
id="checkbox-default-helper"
Expand All @@ -517,6 +576,7 @@ exports[`EC - checkbox Invalid renders correctly 1`] = `
class="ecl-checkbox ecl-checkbox--invalid"
>
<input
checked=""
class="ecl-checkbox__input"
id="checkbox-invalid-1"
name="checkbox-invalid"
Expand All @@ -542,12 +602,12 @@ exports[`EC - checkbox Invalid renders correctly 1`] = `
</span>
Spain
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-invalid-1"
>
Help text for option 1
</p>
</div>
</div>
<div
class="ecl-checkbox ecl-checkbox--invalid"
Expand Down Expand Up @@ -578,12 +638,12 @@ exports[`EC - checkbox Invalid renders correctly 1`] = `
</span>
Belgium
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block"
id="helper-invalid-2"
>
Help text for option 2
</p>
</div>
</div>
<div
class="ecl-checkbox ecl-checkbox--invalid ecl-checkbox--disabled"
Expand All @@ -601,7 +661,7 @@ exports[`EC - checkbox Invalid renders correctly 1`] = `
for="checkbox-invalid-3"
>
<span
class="ecl-checkbox__box ecl-checkbox__box--invalid"
class="ecl-checkbox__box ecl-checkbox__box--invalid ecl-checkbox__box--disabled"
>
<svg
aria-hidden="true"
Expand All @@ -615,12 +675,12 @@ exports[`EC - checkbox Invalid renders correctly 1`] = `
</span>
France (disabled)
</label>
<p
<div
class="ecl-checkbox__help ecl-help-block ecl-help-block--disabled"
id="helper-invalid-3"
>
Help text for option 3
</p>
</div>
</div>
</fieldset>
`;
Loading

0 comments on commit 889ebd2

Please sign in to comment.