<div class="store-pickup-modal">
<div class="store-pickup-modal__search">
<div class="input store-pickup-modal__search-field">
<label class="
label
input__label
" for="search">
Search
</label>
<input class="input__field " id="search" name="search" type="text" placeholder="Search with postcode or city name...">
</div>
<button class="button store-pickup-modal__search-button" type="submit">
Search
</button>
</div>
<div class="paragraph store-pickup-modal__paragraph">
<p>
Please provide postcode or city name to find nearest pickup locations.
</p>
</div>
<table class="table store-pickup-modal__table margin-0" tabindex="0" role="table">
<caption class="table__caption">
This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
</caption>
<thead>
<tr role="row">
<th class="" scope="col" role="columnheader">
Location Details
</th>
<th class="" scope="col" role="columnheader">
Action
</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="" data-th="Location Details" role="gridcell">
<div class="paragraph ">
<p>
Good Wood Store<br>119 Timberbrook Lane<br>Denver, Colorado 80216<br>United States<br><a href="tel:970-355-8188">970-355-8188</a>
</p>
</div>
</td>
<td class="" data-th="Action" role="gridcell">
<button type="button" class="button">Ship Here</button>
</td>
</tr>
<tr role="row">
<td class="" data-th="Location Details" role="gridcell">
<div class="paragraph ">
<p>
Good Wood Store 2<br>120 Timberbrook Lane<br>Denver, Colorado 80216<br>United States<br><a href="tel:970-355-8188">970-355-8188</a>
</p>
</div>
</td>
<td class="" data-th="Action" role="gridcell">
<button type="button" class="button">Ship Here</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="store-pickup-modal">
<div class="store-pickup-modal__search">
{{ render '@input' search.input }}
{{ render '@button' search.button }}
</div>
{{ render '@paragraph' description }}
{{ render '@table' storesTable }}
</div>
{
"search": {
"input": {
"attributes": "",
"class": "store-pickup-modal__search-field",
"label": {
"attributes": "",
"text": "Search",
"hidden": false
},
"field": {
"attributes": "",
"class": "",
"id": "search",
"name": "search",
"placeholder": "Search with postcode or city name...",
"type": "text"
}
},
"button": {
"tag": "button",
"class": "store-pickup-modal__search-button",
"attributes": "type=\"submit\"",
"text": "Search"
}
},
"description": {
"tag": "p",
"class": "store-pickup-modal__paragraph",
"text": "Please provide postcode or city name to find nearest pickup locations."
},
"storesTable": {
"captionText": "This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside",
"class": "store-pickup-modal__table margin-0",
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Location Details"
},
{
"childTag": "th",
"childTagAttributes": "scope=\"col\" role=\"columnheader\"",
"content": "Action"
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Location Details\" role=\"gridcell\"",
"contentComponent": "paragraph",
"contentContext": {
"tag": "p",
"class": "",
"text": "Good Wood Store<br>119 Timberbrook Lane<br>Denver, Colorado 80216<br>United States<br><a href=\"tel:970-355-8188\">970-355-8188</a>"
}
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action\" role=\"gridcell\"",
"content": "<button type=\"button\" class=\"button\">Ship Here</button>"
}
]
},
{
"rowTag": "tr",
"rowTagAttributes": "role=\"row\"",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Location Details\" role=\"gridcell\"",
"contentComponent": "paragraph",
"contentContext": {
"tag": "p",
"class": "",
"text": "Good Wood Store 2<br>120 Timberbrook Lane<br>Denver, Colorado 80216<br>United States<br><a href=\"tel:970-355-8188\">970-355-8188</a>"
}
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Action\" role=\"gridcell\"",
"content": "<button type=\"button\" class=\"button\">Ship Here</button>"
}
]
}
]
}
]
}
}
$store-pickup-modal__search-field-flex : 1 0 auto !default;
$store-pickup-modal__search-button-margin-bottom : $spacer--medium !default;
$store-pickup-modal__search-button-height : 48px !default;
$store-pickup-modal__table-cell-first-border-right: 0 !default;
$store-pickup-modal__table-cell-last-text-align : right !default;
@import 'store-pickup-modal-variables';
.store-pickup-modal {
&__search {
display: flex;
flex-direction: column;
@include mq($screen-m) {
flex-direction: row;
align-items: flex-end;
}
}
&__search-field {
flex: $store-pickup-modal__search-field-flex;
}
&__search-button {
margin-bottom: $store-pickup-modal__search-button-margin-bottom;
height: $store-pickup-modal__search-button-height;
}
&__paragraph {
margin-bottom: $spacer--large;
}
&__table {
th,
td {
&:first-child {
@include mq($screen-m) {
border-right: $store-pickup-modal__table-cell-first-border-right;
}
}
&:last-child {
@include mq($screen-m) {
text-align: $store-pickup-modal__table-cell-last-text-align;
}
}
}
}
}
No notes defined.