Skip to content

Commit 9c41b76

Browse files
ianmeighianmeigh
committed
Add template and styling
1 parent 7604c32 commit 9c41b76

File tree

7 files changed

+235
-13
lines changed

7 files changed

+235
-13
lines changed

‎tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button--close.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{% extends "atoms/icon_buttons/icon_button.html" %}

‎tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<button class="icon-button{% if modifier %} icon-button--{{ modifier }}{% endif %}{% if inverse %} icon-button--inverse{% endif %}{% if hidden %} hidden{% endif %}" {% if modifier and name %}data-{{ name }}-{{ modifier }}{% endif %}{% if data %} {{ data }}{% endif %}{% if aria %} {{ aria }}{% endif %}>
2+
<span class="u-sr-only">
3+
{% if modifier %}{{ modifier }}{% endif %}
4+
</span>
5+
{% if modifier == 'next' %}
6+
<span class="rotate">{% include "patterns/atoms/icons/icon.html" with name="chevron" %}</span>
7+
{% elif modifier == 'previous' %}
8+
<span class="rotate rotate--left">{% include "patterns/atoms/icons/icon.html" with name="chevron" %}</span>
9+
{% elif modifier == 'down' %}
10+
<span>{% include "patterns/atoms/icons/icon.html" with name="chevron" %}</span>
11+
{% elif modifier %}
12+
<span>{% include "patterns/atoms/icons/icon.html" with name=modifier %}</span>
13+
{% endif %}
14+
</button>

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,35 @@ <h2 class="heading heading--two-b call-to-action__heading">{{ value.text }}</h2>
1111
{% endif %}
1212
</div>
1313
{% if value.button_text and value.button_link %}
14-
<a href="{{ value.get_button_link }}" class="call-to-action__button button">
15-
{{ value.button_text }}
16-
{% if value.get_button_link_block.block_type == "document_link" %}
17-
({{ value.get_button_file_size|filesizeformat }})
18-
{% endif %}
19-
</a>
14+
{% if value.get_button_link_block.block_type == "pipedrive_link" %}
15+
<button class="call-to-action__button button" data-micromodal-trigger="pipedrive-embed-modal">Open Modal</button>
16+
{% else %}
17+
<a href="{{ value.get_button_link }}" class="call-to-action__button button">
18+
{{ value.button_text }}
19+
{% if value.get_button_link_block.block_type == "document_link" %}
20+
({{ value.get_button_file_size|filesizeformat }})
21+
{% endif %}
22+
</a>
23+
{% endif %}
2024
{% endif %}
2125
</div>
2226
</div>
27+
28+
<!-- Modal content -->
29+
<div class="modal" id="pipedrive-embed-modal" aria-hidden="true">
30+
<div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
31+
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
32+
<header class="modal__header">
33+
<h2 class="modal__heading heading heading--two" id="modal-title">Title</h2>
34+
<div class="modal__close">
35+
{% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
36+
</div>
37+
</header>
38+
<main class="modal__content" id="filters-content">
39+
Content
40+
</main>
41+
<footer class="modal__footer">
42+
<button class="modal__btn" data-micromodal-close>Close</button>
43+
</footer>
44+
</div>
45+
</div>

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,39 @@ <h2 class="heading heading--two-b contact-cta__heading">{{ cta.value.text }}</h2
3030

3131
{# CTA button #}
3232
{% if cta.value.button_text and cta.value.button_link %}
33-
<a href="{{ cta.value.get_button_link }}" class="contact-cta__button button">
34-
{{ cta.value.button_text }}
35-
{% if cta.value.get_button_link_block.block_type == "document_link" %}
36-
({{ cta.value.get_button_file_size|filesizeformat }})
37-
{% endif %}
38-
</a>
33+
{% if cta.value.get_button_link_block.block_type == "pipedrive_link" %}
34+
<button class="contact-cta__button button" data-micromodal-trigger="pipedrive-embed-modal">{{ cta.value.button_text }}</button>
35+
{% else %}
36+
<a href="{{ cta.value.get_button_link }}" class="contact-cta__button button">
37+
{{ cta.value.button_text }}
38+
{% if cta.value.get_button_link_block.block_type == "document_link" %}
39+
({{ cta.value.get_button_file_size|filesizeformat }})
40+
{% endif %}
41+
</a>
42+
{% endif %}
43+
{% endif %}
44+
</div>
45+
{% if cta.value.get_button_link_block.block_type == "pipedrive_link" %}
46+
<!-- Modal content -->
47+
<div class="modal" id="pipedrive-embed-modal" aria-hidden="true">
48+
<div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
49+
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
50+
<header class="modal__header">
51+
<h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
52+
<div class="modal__close">
53+
{% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
54+
</div>
55+
</header>
56+
<main class="modal__content" id="filters-content">
57+
<iframe
58+
src="{{ cta.value.button_link.0 }}"
59+
width="100%"
60+
height="650px"
61+
frameborder="0"
62+
title="Pipedrive Webform">
63+
</iframe>
64+
</main>
65+
</div>
66+
</div>
3967
{% endif %}
4068
{% endwith %}
41-
</div>

‎tbx/static_src/sass/components/_modal.scss

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
@use 'config' as *;
2+
3+
.modal {
4+
$root: &;
5+
@include z-index(modal);
6+
display: none;
7+
justify-content: center;
8+
align-items: center;
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
right: 0;
13+
bottom: 0;
14+
width: 100%;
15+
max-height: 100dvh;
16+
17+
&--full {
18+
#{$root}__container {
19+
max-width: 100%;
20+
width: 100%;
21+
height: 100dvh;
22+
}
23+
}
24+
25+
&.is-open {
26+
display: flex;
27+
}
28+
29+
&__overlay {
30+
position: fixed;
31+
top: 0;
32+
left: 0;
33+
right: 0;
34+
bottom: 0;
35+
// background-color: var(--color--background--overlay);
36+
background: rgba(55, 55, 55, 0.6);
37+
backdrop-filter: blur(10px);
38+
}
39+
40+
&__container {
41+
@include z-index(modal-controls);
42+
// @include hcm-border();
43+
// position: relative;
44+
background-color: var(--color--background);
45+
padding: $grid;
46+
width: 100%;
47+
max-height: 100dvh;
48+
overflow-y: auto;
49+
// margin: $grid-l;
50+
border: 1px solid var(--color--border--highlight);
51+
52+
@include media-query(medium) {
53+
width: 50vw;
54+
min-width: 459px;
55+
padding: $grid-m;
56+
}
57+
58+
@include media-query(large) {
59+
max-width: 758px;
60+
padding: $grid-l;
61+
}
62+
}
63+
64+
&__header {
65+
display: flex;
66+
justify-content: space-between;
67+
align-items: center;
68+
margin-bottom: $grid-l;
69+
}
70+
71+
&__title {
72+
margin-top: 0;
73+
margin-bottom: 0;
74+
}
75+
76+
&__close {
77+
@include z-index(modal-controls);
78+
position: relative;
79+
background: transparent;
80+
border: 0;
81+
}
82+
83+
&__container,
84+
&__overlay {
85+
will-change: transform;
86+
}
87+
88+
&[aria-hidden='false'] {
89+
#{$root}__overlay {
90+
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
91+
}
92+
93+
#{$root}__container {
94+
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1),
95+
mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
96+
}
97+
}
98+
99+
&[aria-hidden='true'] {
100+
#{$root}__overlay {
101+
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
102+
}
103+
104+
#{$root}__container {
105+
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
106+
}
107+
}
108+
}
109+
110+
@keyframes mmfadeIn {
111+
from {
112+
opacity: 0;
113+
}
114+
115+
to {
116+
opacity: 1;
117+
}
118+
}
119+
120+
@keyframes mmfadeOut {
121+
from {
122+
opacity: 1;
123+
}
124+
125+
to {
126+
opacity: 0;
127+
}
128+
}
129+
130+
@keyframes mmslideIn {
131+
from {
132+
transform: translateY(15%);
133+
}
134+
135+
to {
136+
transform: translateY(0);
137+
}
138+
}
139+
140+
@keyframes mmslideOut {
141+
from {
142+
transform: translateY(0);
143+
}
144+
145+
to {
146+
transform: translateY(-10%);
147+
}
148+
}

‎tbx/static_src/sass/config/_variables.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ $color--black: #000;
6363
--color--streamfield-background: #{$color--mid-grey};
6464
--color--decoration: #{$color--grey-50};
6565
--color--border: #{color.adjust($color--grey-50, $alpha: -0.5)};
66+
--color--border--highlight: #{$color--coral};
6667
--color--light-border: #{$color--mid-grey};
6768
--color--overlay: #{color.adjust($color--black, $alpha: -0.6)};
6869
--color--background--overlay: #{color.adjust($color--eclipse, $alpha: -1)};
@@ -370,6 +371,13 @@ $grid: 30px;
370371
$grid-gutters: $grid;
371372
$grid-gutters-large: 80px;
372373
$grid-gutters-x-large: 120px;
374+
$grid-xs: ($grid / 4); // 5px
375+
$grid-s: ($grid / 2); // 10px
376+
$grid-s-m: ($grid * 0.75); // 15px
377+
$grid-m: ($grid * 1.5); // 30px
378+
$grid-l: ($grid * 2); // 40px
379+
$grid-xl: ($grid * 3); // 60px
380+
$grid-xxl: ($grid * 4); // 80px
373381

374382
// Vertical spacing
375383
// Any changes here will also need to be made in tailwind.config.js

‎tbx/static_src/sass/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
@use 'components/logo';
4646
@use 'components/mailchimp';
4747
@use 'components/markdown-block';
48+
@use 'components/modal';
4849
@use 'components/mode-switcher';
4950
@use 'components/motif-heading';
5051
@use 'components/stats-group';

0 commit comments

Comments
 (0)