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
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": {
"label": "Enter your value here",
"placeholder": "A sample value",
"message": "Please fill in anything valuable"
}
"placeholder": "A sample value"
},
"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">
<div class="LP-Input LP-Input{{modifier}}">
<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>
</div>
<h3>Regular without message</h3>
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">{{label}}</label>
<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}}"/>
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
{{#if disabled}}
disabled="disabled"
{{/if}}
/>
{{#if message}}
<span class="LP-Input__Message">{{message}}</span>
{{/if}}
</div>