Skip to content

Commit ba0bffb

Browse files
cornaecornae
committed
Separate components for more form components
1 parent 3d66229 commit ba0bffb

24 files changed

+704
-666
lines changed

‎form-component.html

+43-665
Large diffs are not rendered by default.

‎form-field-auto-save-attributes

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% if include.action %}
2+
data-pat-inject="url: {{ include.action }}"
3+
{% endif %}

‎form-field-auto-save-classes

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% if include.action %}
2+
pat-autosubmit pat-inject pat-subform
3+
{% endif %}

‎form-field-auto-suggest.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<label
2+
{% include patterns/form-field-auto-save-attributes %}
3+
class="
4+
{% include patterns/form-field-auto-save-classes %}
5+
{% if item.depends %}pat-depends{% endif %}"
6+
{% if item.depends %}data-pat-depends="{{ item.depends }}; transition: slide"{% endif %}>
7+
8+
{% include patterns/i18n id=item.label %}{% include patterns/form-required.html %}
9+
10+
<input
11+
{% if item.required == true %}required="required"{% endif %}
12+
{% if item.state == 'disabled' %}disabled{% endif %}
13+
{% if item.step %}step="{{ item.step }}"{% endif %}
14+
class="pat-autosuggest {% if item.class %}{{ item.class }}{% endif %} {% if item.autofocus %}pat-autofocus{% endif %}"
15+
type="text"
16+
name="{{ item.name }}"
17+
id="{{ item.id }}"
18+
placeholder="{% include patterns/i18n id=item.placeholder %}"
19+
value="{{ item.value }}"
20+
data-pat-autosuggest='{% if item.classes %}selection-classes: {{ item.classes }}; {% endif %}{% if item.value-json %}prefill-json: {{ item.value-json }}; {% endif %}{% if item.value %}{{ item.value }}{% endif %} allow-new-words: false; ajax-search-index: text; ajax-url: {{ item.url }}; {% if item.max_select %}max-selection-size: {{ item.max-select }};{% endif %} '/>
21+
22+
{% if item.help %}
23+
{% include patterns/form-help.html
24+
content=item.help more=item.help_more %}
25+
{% endif %}
26+
27+
{% include patterns/form-has-changes.html %}
28+
29+
</label>

‎form-field-button-bar.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<fieldset
2+
class="{% if item.depends %}pat-depends{% endif %} group button-bar {{ item.class }}"
3+
{% if item.depends %}data-pat-depends="{{ item.depends }}"{% endif %}>
4+
<legend>{% include patterns/i18n id=item.label %}</legend>
5+
{% for subitem in item.items %}
6+
{% if subitem.type == 'link' %}
7+
<a
8+
class="pat-button pat-inject"
9+
href="{{ subitem.url }}">{{ site.data[ui_data_path].ui[subitem.label][site.data.config.lang] }}</a>
10+
{% elsif subitem.type == 'modal' %}
11+
<a
12+
class="pat-button pat-modal"
13+
data-pat-modal="class: {{ subitem.class }}"
14+
href="{{ subitem.url }}">{% include patterns/i18n id=subitem.label %}</a>
15+
{% else %}
16+
<button
17+
type="{{ subitem.type }}"
18+
{% if subitem.state == 'disabled' %}disabled{% endif %}
19+
class="pat-button {{ subitem.class }}">{{ site.data[ui_data_path].ui[subitem.label][site.data.config.lang] }}</button>
20+
{% endif %}
21+
{% endfor %}
22+
</fieldset>

‎form-field-checklist.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<fieldset
2+
{% include patterns/form-field-auto-save-attributes %}
3+
class="
4+
{% include patterns/form-field-auto-save-classes %}
5+
pat-checklist
6+
group
7+
{{ item.variation }}
8+
{% if item.depends %}pat-depends{% endif %}"
9+
{% if item.depends %}data-pat-depends="{{ item.depends }}; transition: slide"{% endif %}>
10+
<legend>{% include patterns/i18n id=item.label %} </legend>
11+
{% if item.variation == 'checkbox' %}
12+
{% for subitem in item.items %}
13+
<label
14+
class="{% if subitem.state == 'disabled' %} disabled{% endif %}
15+
{% if subitem.depends %}pat-depends{% endif %}"
16+
{% if subitem.depends %}data-pat-depends="{{ subitem.depends }}"{% endif %}>
17+
<input
18+
name="{{ subitem.name }}"
19+
type="checkbox"
20+
{% if subitem.selected %} checked{% endif %}
21+
{% if subitem.state == 'disabled' %} disabled{% endif %} />
22+
{% if subitem.byline %}
23+
<strong
24+
class="label-fragment-title">{{ subitem.label }}</strong>
25+
<p
26+
class="label-fragment-description">
27+
{{ subitem.byline }}
28+
</p>
29+
{% else %}
30+
{% include patterns/i18n id=subitem.label %}
31+
{% endif %}
32+
</label>
33+
<br />
34+
{% endfor %}
35+
{% else %}
36+
{% for subitem in item.items %}
37+
<label
38+
{% if subitem.depends %}class="pat-depends"{% endif %}
39+
{% if subitem.depends %}data-pat-depends="{{ subitem.depends }}"{% endif %}>
40+
<input
41+
name="{{ item.name }}"
42+
value="{{ subitem.value }}"
43+
{% if subitem.selected %} checked{% endif %}
44+
type="radio"> {% include patterns/i18n id=subitem.label %} {% if subitem.input %}<input
45+
type="{{subitem.input}}"
46+
name="{{ subitem.name }}-text" />{% endif %}
47+
</label>
48+
<br />
49+
{% endfor %}
50+
{% endif %}
51+
52+
{% if item.help %}
53+
{% include patterns/form-help.html
54+
content=item.help more=item.help_more %}
55+
{% endif %}
56+
57+
{% include patterns/form-message.html message=item.message %}
58+
59+
{% include patterns/form-has-changes.html %}
60+
61+
</fieldset>

‎form-field-colour.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<label
2+
{% include patterns/form-field-auto-save-attributes %}
3+
class="
4+
{% include patterns/form-field-auto-save-classes %}
5+
{% if item.depends %}pat-depends{% endif %}"
6+
{% if item.depends %}data-pat-depends="{{ item.depends }}; transition: slide"{% endif %}>
7+
{{ site.data[ui_data_path].ui[item.label][site.data.config.lang] }}
8+
<p
9+
class="colour-chooser-launcher">
10+
<a
11+
class="pat-button pat-modal executed"
12+
id="{{ item.id }}"
13+
data-pat-modal="class: medium panel"
14+
{% unless item.value contains 'Default' %}
15+
style="background-color: {{ item.value | replace:' ','' | lowercase }}"
16+
{% endunless %}
17+
href="/feedback/header-colour-chooser#document-content">{{ item.value }}</a>
18+
</p>
19+
</label>

‎form-field-currency.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<label
2+
{% include patterns/form-field-auto-save-attributes %}
3+
class="
4+
{% include patterns/form-field-auto-save-classes %}
5+
{% if item.depends %}pat-depends{% endif %}"
6+
{% if item.id %}id="{{ item.id }}"{% endif %}
7+
{% if item.depends %}data-pat-depends="{{ item.depends }}; transition: slide"{% endif %}>
8+
{% include patterns/i18n id=item.label %}{% include patterns/form-required.html %}
9+
10+
<span class="composed currency-field">
11+
<abbr title="Euro" class="currency">{{item.symbol}}</abbr>
12+
<input
13+
{% if item.required == true %}required="required"{% endif %}
14+
{% if item.state == 'disabled' %}disabled{% endif %}
15+
{% if item.step %}step="{{ item.step }}"{% endif %}
16+
{% if item.min %}min="{{ item.min }}"{% endif %}
17+
{% if item.max %}max="{{ item.max }}"{% endif %}
18+
type="number"
19+
size="{{ item.chars }}"
20+
name="{{ item.name }}"
21+
id="{{ item.id }}"
22+
placeholder="{{ site.data[ui_data_path].ui[item.placeholder][site.data.config.lang] }}"
23+
value="{{ site.data[ui_data_path].ui[item.value][site.data.config.lang] }}" />
24+
</span>
25+
26+
{% if item.help %}
27+
{% include patterns/form-help.html
28+
content=item.help more=item.help_more %}
29+
{% endif %}
30+
31+
{% include patterns/form-has-changes.html %}
32+
33+
</label>
34+
{% include patterns/form-message.html message=item.message %}

‎form-field-date.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<label
2+
{% include patterns/form-field-auto-save-attributes %}
3+
class="
4+
{% include patterns/form-field-auto-save-classes %}
5+
{% if item.depends %}pat-depends{% endif %}"
6+
{% if item.depends %}data-pat-depends="{{ item.depends }}; transition: slide"{% endif %}>
7+
{% include patterns/i18n id=item.label %}{% include patterns/form-required.html %}
8+
9+
<input name="{{ item.name }}"
10+
type="date"
11+
size="{{ item.chars }}"
12+
placeholder="{{ site.data[ui_data_path].ui[item.placeholder][site.data.config.lang] }}"
13+
class="pat-date-picker"
14+
value="{{ item.value }}" />
15+
16+
{% if item.help %}
17+
{% include patterns/form-help.html
18+
content=item.help more=item.help_more %}
19+
{% endif %}
20+
21+
{% include patterns/form-has-changes.html %}
22+
23+
</label>

‎form-field-discussion.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% assign field_id = include.id %}
2+
{% assign field_action = include.action %}
3+
4+
<fieldset
5+
{% include patterns/form-field-auto-save-attributes %}
6+
class="
7+
{% include patterns/form-field-auto-save-classes %}
8+
group">
9+
<legend>{{ site.data[ui_data_path].ui[item.label][site.data.config.lang] }}</legend>
10+
{% include
11+
patterns/comment-trail.html
12+
action=item.action
13+
id=item.id %}
14+
{% if item.help %}
15+
{% include patterns/form-help.html
16+
content=item.help more=item.help_more %}
17+
{% endif %}
18+
</fieldset>

‎form-field-email.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<label
2+
{% include patterns/form-field-auto-save-attributes %}
3+
class="
4+
{% include patterns/form-field-auto-save-classes %}
5+
{% if item.depends %}pat-depends{% endif %}"
6+
{% if item.depends %}data-pat-depends="{{ item.depends }}; transition: slide"{% endif %}>
7+
{% include patterns/i18n id=item.label %}{% include patterns/form-required.html %}
8+
9+
<input
10+
type="email"
11+
name="{{ item.name }}"
12+
size="{{ item.chars }}"
13+
value="{{ item.value }}" />
14+
15+
{% if item.help %}
16+
{% include patterns/form-help.html
17+
content=item.help more=item.help_more %}
18+
{% endif %}
19+
20+
{% include patterns/form-has-changes.html %}
21+
{% include patterns/form-message.html message=item.message %}
22+
</label>

‎form-field-file.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<fieldset
2+
{% include patterns/form-field-auto-save-attributes %}
3+
class="
4+
{% include patterns/form-field-auto-save-classes %}
5+
group">
6+
<legend>
7+
{{ site.data[ui_data_path].ui[item.label][site.data.config.lang] }}
8+
</legend>
9+
<input
10+
name="{{ item.name }}"
11+
type="file"
12+
accept="{{item.accept}}" />
13+
{% include patterns/form-has-changes.html %}
14+
</fieldset>
15+
<br />
16+
{% if item.help %}
17+
{% include patterns/form-help.html
18+
content=item.help more=item.help_more %}
19+
{% endif %}

0 commit comments

Comments
 (0)