Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Moved cases to variants

Browse Source
This commit is contained in:
reverend 2020-08-01 00:09:34 +02:00
parent 8048aea9df
commit 0ffb2d5bc6
2 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/01_Atoms/input/input.config.json
View File

@ -1,7 +1,28 @@
{ {
"context": { "context": {
"label": "Enter your value here", "label": "Enter your value here",
"placeholder": "A sample value", "placeholder": "A sample value"
"message": "Please fill in anything valuable" },
} "variants": [
{
"name": "With message",
"context":{
"message": "Please fill in anything valuable"
}
},
{
"name": "disabled",
"context": {
"modifier": "--disabled",
"disabled": true
}
},
{
"name": "error",
"context": {
"modifier": "--error",
"message": "This field is required"
}
}
]
} }

33
components/01_Atoms/input/input.hbs
View File

@ -1,28 +1,11 @@
<h3>Regular with message</h3> <div class="LP-Input LP-Input{{modifier}}">
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">{{label}}</label> <label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/> <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
<span class="LP-Input__Message">{{message}}</span> {{#if disabled}}
</div> disabled="disabled"
<h3>Regular without message</h3> {{/if}}
<div class="LP-Input"> />
<label for="input123" class="LP-Input__Label">{{label}}</label> {{#if message}}
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
</div>
<h3>Regular without placeholder</h3>
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder=""/>
<span class="LP-Input__Message">{{message}}</span>
</div>
<h3>Disabled</h3>
<div class="LP-Input LP-Input--disabled">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}" disabled="disabled"/>
</div>
<h3>Error</h3>
<div class="LP-Input LP-Input--error">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
<span class="LP-Input__Message">{{message}}</span> <span class="LP-Input__Message">{{message}}</span>
{{/if}}
</div> </div>