Skip to content

Commit a457c49

Browse files
tm-kntm-kn
committed
Update from samaritans.org 79d067fe
1 parent f9ee148 commit a457c49

39 files changed

+685
-96
lines changed

‎project_styleguide/templates/patterns/molecules/callout-form/callout-form.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="callout-form">
2+
<div class="callout-form__icon-wrapper">
3+
{% include "patterns/atoms/svg/colour-icons/icon-color-arrows.html" with classes="icon callout-form__icon" %}
4+
</div>
5+
<h2 class="callout-form__heading">
6+
{{ heading }}
7+
</h2>
8+
<p class="callout-form__content">
9+
{{ content }}
10+
</p>
11+
</div>

‎project_styleguide/templates/patterns/molecules/callout-form/callout-form.yaml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
context:
2+
heading: 'Why we need this'
3+
content: 'We have agreed with callers on support plans that we will interact with them in a structured way in recognition of their support needs. We need to understand how the caller and Samaritans are interacting so that we can keep their plan up to date.'

‎project_styleguide/templates/patterns/molecules/forms/form_field.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
<div class="
99
form-item
10+
{{ className }}
1011
{% if field_type %}form-item--{{ field_type }}{% endif %}
1112
{% if widget_type %}form-item--{{ widget_type }}{% endif %}
1213
{% if field.errors %}form-item--errors js-form-error{% endif %}

‎project_styleguide/templates/patterns/molecules/volunteer_applications/dashboard-footer/dashboard-footer.html

+29-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,32 @@
1-
<section class="dashboard-footer">
1+
{% load i18n helper_tags %}
2+
{# hide_email option hides the questions and concerns for first pages of the form #}
3+
4+
{% privacy_statement_url as default_privacy_statement_url %}
5+
6+
<footer class="dashboard-footer">
27
<div class="dashboard-footer__wrapper">
3-
<h2 class="dashboard-footer__heading">Any questions?</h2>
4-
<div class="dashboard-footer__content">
5-
<div class="dashboard-footer__icon">
6-
{% include "patterns/atoms/svg/icons/icon-color-envelope-closed.html" with aria_hide=True %}
7-
</div>
8-
<div class="dashboard-footer__information">
9-
<p class="dashboard-footer__text">If you have any questions or concerns about any part of becoming a Samaritan, please get in touch.</p>
10-
<p><a class="dashboard-footer__link" href="mailto:{{ get_in_touch_email }}">Get in touch</a></p>
11-
</div>
8+
<div class="dashboard-footer__left">
9+
{% if not hide_email%}
10+
<h2 class="dashboard-footer__heading">Any questions?</h2>
11+
<div class="dashboard-footer__content">
12+
<div class="dashboard-footer__icon">
13+
{% include "patterns/atoms/svg/icons/icon-color-envelope-closed.html" with aria_hide=True %}
14+
</div>
15+
<div class="dashboard-footer__information">
16+
<p class="dashboard-footer__text">If you have any questions or concerns about any part of becoming a Samaritan, please get in touch.</p>
17+
<p><a class="dashboard-footer__link" href="mailto:{{ get_in_touch_email }}">Get in touch</a></p>
18+
</div>
19+
</div>
20+
{% endif %}
21+
</div>
22+
<div class="dashboard-footer__right">
23+
{% if default_privacy_statement_url %}
24+
<p>
25+
<a target="__blank" rel="noopener noreferrer" class="dashboard-footer__link" href="{{ default_privacy_statement_url }}">
26+
{% trans "Privacy Statement" %}
27+
</a>
28+
</p>
29+
{% endif %}
1230
</div>
1331
</div>
14-
</section>
32+
</footer>

‎project_styleguide/templates/patterns/molecules/volunteer_applications/gdpr/gdpr_marketing_form_fields.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ <h2>{% trans "Stay in touch" %}</h2>
1313
<div class="js-select-all-checkbox-toggle">
1414
<div class="form-item-wrapper form-item-wrapper--group" id="donate__contact-prefs">
1515
{% render_form_field form.prefs_updates %}
16-
{% render_form_field form.prefs_fundraising %}
1716
{% render_form_field form.prefs_volunteering %}
1817
</div>
1918
<p><a class="donate__marketing-select-all js-select-all" id="donate__select-all-contact-prefs"
@@ -27,8 +26,8 @@ <h3>{% trans "How would you like to hear from us?" %}</h3>
2726

2827
<div class="form-item-wrapper form-item-wrapper--radio-select-inline">
2928
{% render_form_field form.prefs_phone %}
30-
{% render_form_field form.prefs_email %}
3129
{% render_form_field form.prefs_sms %}
30+
{% render_form_field form.prefs_email %}
3231
</div>
3332

3433
<small class="donate__marketing-meta donate__marketing-meta--small">

‎project_styleguide/templates/patterns/organisms/volunteering-branch-finder/volunteering-branch-finder.html

+15-2
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,29 @@ <h2 hidden data-branches-results-heading>{% trans 'Your nearest Samaritans locat
2828
<div class="branch-list">
2929
{% for object in object_list %}
3030
<form class="card card--with-button is-hidden" method="post" data-branch data-branch-id="{{ object.branch_id }}">
31-
<div class="card__inner">
31+
<div class="card__inner volunteer-branch-services">
3232
{% csrf_token %}
3333
<h3 class="card__heading">{{ object.title }}</h3>
3434
<p class="card__copy">{{ object.street_address_1 }}, {{ object.city }} {{ object.postcode }}</p>
3535
{% if object.wheelchair_accessible %}
36-
<p class="card__copy card__copy--meta">Wheelchair accessible</p>
36+
<p class="card__copy card__copy--meta">{% trans 'Wheelchair accessible' %}</p>
37+
{% endif %}
38+
{% if object.accessible_toilets %}
39+
<p class="card__copy card__copy--meta">{% trans 'Accessible toilets' %}</p>
3740
{% endif %}
3841
{% if object.accessibility_notes %}
3942
<p class="card__copy card__copy--meta">{{ object.accessibility_notes }}</p>
4043
{% endif %}
44+
{% with activities=object.branch_activities.all %}
45+
{% if activities %}
46+
<h4 class="volunteer-branch-services__heading">{% trans 'Services at this branch' %}</h4>
47+
<ul class="tags">
48+
{% for activity in activities %}
49+
<li class="tags__tag">{{ activity.activity_type.title }}</li>
50+
{% endfor %}
51+
</ul>
52+
{% endif %}
53+
{% endwith %}
4154
<input type="hidden" name="branch_id" value="{{ object.branch_id }}" />
4255
</div>
4356

‎project_styleguide/templates/patterns/pages/volunteer_applications/background_check.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ <h1>{% trans 'Start a background check' %}</h1>
3131
{% include "patterns/molecules/accordion/accordion-item.html" with index=0 heading="What's involved in a background check?" description="Samaritans actively promotes equality of opportunity for all and welcomes applications from a wide range of applicants.<br/><br/>Samaritans recognises the contribution that people with criminal records make as employees and volunteers and welcomes applications from those with a criminal record. A criminal record will not normally prevent an applicant from being appointed as a volunteer. <br/><br/>We will judge each case on its merits and not discriminate unfairly against any applicant on the basis of a conviction or criminal record information disclosed to us." classes="accordion--hide-tablet-landscape" %}
3232
</div>
3333

34-
<form method="post" data-js-disable-button-after-submit>
34+
<form method="post" data-js-disable-button-after-submit novalidate>
3535
<div class="form__container">
3636
{% csrf_token %}
3737
{% render_form_field form.dbs_update_service %}

‎project_styleguide/templates/patterns/pages/volunteer_applications/contact_details.html

+90-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{% extends "patterns/pages/volunteer_applications/layouts/volunteer-full-width/volunteer_full_width.html" %}
2-
{% load wagtailcore_tags static form_tags i18n loqate_tags %}
2+
{% load wagtailcore_tags static form_tags i18n loqate_tags helper_tags %}
33

44
{% block title %}
55
{% include "patterns/atoms/volunteer-page-title/page-title.html" %}
@@ -20,7 +20,7 @@ <h1>{% include "patterns/atoms/volunteer-page-title/page-title.html" %}</h1>
2020
<div class="content">
2121
<div class="content__inner content__inner--overlap-top">
2222
{% include "patterns/molecules/volunteer_applications/progress-indicator/progress-indicator.html" with current_step=1 %}
23-
<form method="post" data-js-disable-button-after-submit>
23+
<form method="post" data-js-disable-button-after-submit novalidate>
2424
<div class="form__container">
2525
{% csrf_token %}
2626

@@ -33,12 +33,65 @@ <h1>{% include "patterns/atoms/volunteer-page-title/page-title.html" %}</h1>
3333
</div>
3434
{% endif %}
3535

36-
<h2>{% trans 'Full name' %}</h2>
36+
<h2>{% trans 'Legal name' %}</h2>
37+
<div class="form-item__tooltip-wrapper form-item__tooltip-wrapper--spaced">
38+
{% blocktrans %}
39+
Please use your legal name, as shown on your passport or driving license
40+
{% endblocktrans %}
41+
</div>
42+
<div class="form__callout-wrapper">
43+
<div class="form__callout">
44+
{% blocktranslate asvar legal_name_heading %}
45+
Why we need your legal name
46+
{% endblocktranslate %}
47+
{% blocktranslate asvar legal_name_explanation %}
48+
To safeguard our volunteers and callers we
49+
have to keep accurate records of who our
50+
volunteers are, and we use legal names for
51+
criminal record checks, where they are
52+
required.
53+
{% endblocktranslate %}
54+
{% include "patterns/molecules/callout-form/callout-form.html" with heading=legal_name_heading content=legal_name_explanation %}
55+
</div>
56+
</div>
57+
3758
{% render_form_field form.first_name %}
59+
{% render_form_field form.middle_names %}
3860
{% render_form_field form.last_name %}
3961

62+
<div class="js-form-field-expand">
63+
<button type="button" class="button-link form-item__expand js-form-field-expand-opener">
64+
If you prefer to be known by another name let us know {% include "patterns/atoms/svg/icons/icon-chevron.html" with classes="form-item__expand-icon" aria_hide="true" %}
65+
</button>
66+
<div class="js-form-field-expand-opened form-item__expanded" aria-expanded="false">
67+
<h2>{% trans 'What should we call you?' %}</h2>
68+
<p>{% trans 'For example, when we contact you by phone or email' %}</p>
69+
{% render_form_field form.known_as %}
70+
</div>
71+
</div>
72+
73+
<h2>{% trans 'Date of birth' %}</h2>
74+
<div class="form__callout-wrapper">
75+
<div class="form__callout">
76+
{% blocktranslate asvar dob_heading %}
77+
Why we need your date of birth
78+
{% endblocktranslate %}
79+
{% blocktranslate asvar dob_explanation %}
80+
Samaritans Central Office and your branch may
81+
use your date of birth to confirm your identity
82+
and to process your criminal record check (if
83+
needed for your role). Your date of birth
84+
should match official documents like your
85+
passport or driving licence and may be
86+
verified against these.
87+
{% endblocktranslate %}
88+
{% include "patterns/molecules/callout-form/callout-form.html" with heading=dob_heading content=dob_explanation %}
89+
</div>
90+
</div>
91+
{% render_form_field form.date_of_birth %}
92+
4093
<h2>{% trans 'Contact details' %}</h2>
41-
{% render_form_field form.mobile_number %}
94+
{% render_form_field form.contact_number %}
4295
{% render_form_field form.email_address %}
4396

4497
<h2>{% trans 'Your address' %}</h2>
@@ -48,8 +101,28 @@ <h2>{% trans 'Your address' %}</h2>
48101
{% render_form_field form.postcode %}
49102
{% render_form_field form.country %}
50103

51-
<div class="form__section form__section--full-width">
52-
{% include "patterns/molecules/volunteer_applications/gdpr/gdpr_marketing_form_fields.html" %}
104+
<h2>{% trans "Terms and Conditions" %}</h2>
105+
106+
<div class="form__callout-wrapper form__callout-wrapper--clear">
107+
{# id matches up with aria-describedby attributed on the checkbox - see forms.py #}
108+
<div class="form__callout" id="tcs-and-cs-explanation">
109+
{% blocktranslate asvar legal_name_heading %}
110+
Reading our terms and conditions
111+
{% endblocktranslate %}
112+
{% blocktranslate asvar legal_name_explanation %}
113+
As a volunteer with us you will get access to
114+
systems and information that are sensitive and
115+
confidential. To protect you we need you to
116+
read and acknowledge our terms and conditions.
117+
<br><br>
118+
The link will open in a new tab. The checkbox
119+
to confirm you have read them will become
120+
active once you have opened them.
121+
{% endblocktranslate %}
122+
{% include "patterns/molecules/callout-form/callout-form.html" with heading=legal_name_heading content=legal_name_explanation|safe %}
123+
</div>
124+
125+
{% render_form_field form.terms_and_conditions className="js-terms" %}
53126
</div>
54127

55128
<h2>{% trans 'How we&apos;ll use your details' %}</h2>
@@ -62,12 +135,13 @@ <h2>{% trans 'How we&apos;ll use your details' %}</h2>
62135
benefit.
63136
{% endblocktrans %}
64137
</p>
138+
65139
<p>
66-
{% slugurl 'privacy-statement' as privacy_statement_url %}
140+
{% privacy_statement_url as privacy_statement_url %}
67141
{% blocktrans with privacy_statement_url=privacy_statement_url %}
68142
We have branches across the United Kingdom, the Republic of
69143
Ireland, the Channel Islands and the Isle of Man, some of which
70-
are regsitered as independent charities. To find out more about
144+
are registered as independent charities. To find out more about
71145
how we handle and protect your personal information, see our
72146
<a
73147
target="__blank"
@@ -76,10 +150,17 @@ <h2>{% trans 'How we&apos;ll use your details' %}</h2>
76150
>
77151
privacy statement
78152
</a>.{% endblocktrans %}
153+
79154
</p>
80155

81-
{% include "patterns/atoms/buttons/button--button.html" with classes='form__submit button' label="Submit" %}
82156
</div>
157+
158+
<div class="form__section form__section--full-width">
159+
{% include "patterns/molecules/volunteer_applications/gdpr/gdpr_marketing_form_fields.html" %}
160+
</div>
161+
162+
{% include "patterns/atoms/buttons/button--button.html" with classes='form__submit button' label="Submit" %}
163+
83164
</form>
84165
</div>
85166
</div>

‎project_styleguide/templates/patterns/pages/volunteer_applications/emergency_contact.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ <h1>{% trans 'Your emergency contact' %}</h1>
3333
</div>
3434
{% endif %}
3535

36-
<form method="post" data-js-disable-button-after-submit>
36+
<form method="post" data-js-disable-button-after-submit novalidate>
3737
<div class="form__container">
3838
{% csrf_token %}
3939
{% render_form_field form.first_name %}

‎project_styleguide/templates/patterns/pages/volunteer_applications/equal_opportunities.html

+34-13
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ <h1>{% include "patterns/atoms/volunteer-page-title/page-title.html" %}</h1>
1717

1818
{% include "patterns/molecules/volunteer_applications/selected-branch/selected-branch.html" with branch_name=selected_branch.title link_text="Change branch" link_url=branch_selection_url %}
1919

20-
<form method="post" data-js-disable-button-after-submit>
20+
<form method="post" data-js-disable-button-after-submit novalidate>
2121
<div class="form__container">
2222
{% csrf_token %}
2323

@@ -45,24 +45,45 @@ <h2 class="form__heading">{% trans 'Do you have any accessibility needs for the
4545
<h2>{% trans 'Equal opportunities' %}</h2>
4646
<p>
4747
{% blocktrans %}
48-
We are committed to increasing diversity among our volunteers.
49-
If you&apos;d like to tell us about your background and
50-
identity then we&apos;ll use this information to track how
51-
we&apos;re doing.
48+
As part of our equity, diversity and inclusion
49+
commitment to be representative of the societies we
50+
serve, we'd like to capture some equal opportunities
51+
information. This information will be used to track
52+
how we're doing and will be held safely and
53+
confidentially.
5254
{% endblocktrans %}
5355
</p>
5456
<p>
55-
{% blocktrans %}
56-
<strong>This is entirely optional and has
57-
no effect on your application.</strong>
58-
{% endblocktrans %}
57+
<strong>
58+
{% blocktrans %}
59+
This section is entirely optional and will have no effect on your application.
60+
{% endblocktrans %}
61+
</strong>
5962
</p>
60-
{% render_form_field form.age_range %}
61-
<div class="form-item form-item--gender-reveal" data-gender-reveal>
62-
{% render_form_field form.gender %}
63+
{% render_form_field form.gender %}
64+
<div data-self-describe-section="gender_self_describe">
6365
{% render_form_field form.gender_self_describe %}
6466
</div>
65-
{% render_form_field form.ethnic_group %}
67+
{% render_form_field form.trans %}
68+
69+
{% render_form_field form.sexual_orientation %}
70+
<div data-self-describe-section="sexual_orientation_self_describe">
71+
{% render_form_field form.sexual_orientation_self_describe %}
72+
</div>
73+
74+
{% render_form_field form.disability %}
75+
76+
{% render_form_field form.speak_welsh %}
77+
78+
{% render_form_field form.ethnicity %}
79+
<div data-self-describe-section="ethnicity_self_describe">
80+
{% render_form_field form.ethnicity_self_describe %}
81+
</div>
82+
83+
{% render_form_field form.religion_and_belief %}
84+
<div data-self-describe-section="religion_and_belief_self_describe">
85+
{% render_form_field form.religion_and_belief_self_describe %}
86+
</div>
6687

6788
{% include "patterns/atoms/buttons/button--button.html" with classes="form__submit button" label="Submit" data_attr="data-long-wait" %}
6889

0 commit comments

Comments
 (0)