Skip to content

Commit 1512c97

Browse files
thibaudcolasthibaudcolas
committed
Add more test templates
1 parent dc3250b commit 1512c97

File tree

12 files changed

+277
-0
lines changed

12 files changed

+277
-0
lines changed

‎tests/settings.py

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import os
22

3+
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
4+
5+
PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
6+
BASE_DIR = os.path.dirname(PROJECT_DIR)
7+
38
SECRET_KEY = 'foobar'
49

510
DEBUG = True
@@ -17,6 +22,19 @@
1722

1823
STATIC_URL = '/static/'
1924

25+
# This is where Django will put files collected from application directories
26+
# and custom direcotires set in "STATICFILES_DIRS" when
27+
# using "django-admin collectstatic" command.
28+
# https://docs.djangoproject.com/en/stable/ref/settings/#static-root
29+
STATIC_ROOT = os.path.join(BASE_DIR, "static")
30+
31+
# This is where Django will look for static files outside the directories of
32+
# applications which are used by default.
33+
# https://docs.djangoproject.com/en/stable/ref/settings/#staticfiles-dirs
34+
STATICFILES_DIRS = [
35+
os.path.join(PROJECT_DIR, "tests", "static")
36+
]
37+
2038
ROOT_URLCONF = 'tests.urls'
2139

2240
PATTERN_LIBRARY = {

‎tests/static/main.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.icon {
2+
fill: currentColor;
3+
}
4+
.icon--close {
5+
width: 24px;
6+
height: 24px;
7+
}
8+
.icon--cancel {
9+
width: 11px;
10+
height: 12px;
11+
}
12+
.icon--chevron-down {
13+
width: 23px;
14+
height: 14px;
15+
}
16+
.icon--checkmark {
17+
width: 12px;
18+
height: 10px;
19+
}
20+
21+
.accordion__panel {
22+
padding: 20px;
23+
border-top: 1px solid #222222;
24+
}
25+
.accordion__panel:last-child {
26+
border-bottom: 1px solid #222222;
27+
}
28+
.accordion__toggle {
29+
display: flex;
30+
width: 100%;
31+
padding: 15px 0;
32+
align-items: baseline;
33+
justify-content: space-between;
34+
text-align: left;
35+
appearance: none;
36+
background-color: transparent;
37+
background-image: none;
38+
color: inherit;
39+
border: 0;
40+
cursor: pointer;
41+
}
42+
.accordion__title {
43+
margin-bottom: 0;
44+
line-height: 30px;
45+
}
46+
.accordion__title-inner {
47+
display: block;
48+
flex: 1;
49+
}
50+
.accordion__icon {
51+
color: navy;
52+
transform: rotate(360deg);
53+
transition: transform 0.25s ease-out;
54+
margin-left: 10px;
55+
}
56+
.accordion__toggle[aria-pressed="true"] .accordion__icon {
57+
transform: rotate(180deg);
58+
}
59+
.accordion__content {
60+
line-height: 1.25;
61+
max-width: 768px;
62+
padding-bottom: 5px;
63+
}

‎tests/static/main.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const initAccordions = () => {
2+
const accordions = [...document.querySelectorAll("[data-accordion]")];
3+
accordions.forEach((node) => {
4+
const panels = [
5+
...document.querySelectorAll("[data-accordion-panel]", node),
6+
];
7+
8+
panels.forEach((panel, i) => {
9+
const isFirst = i === 0;
10+
11+
const toggle = panel.querySelector("[data-accordion-toggle]");
12+
const content = panel.querySelector("[data-accordion-content]");
13+
14+
if (!toggle || !content) {
15+
return;
16+
}
17+
18+
toggle.addEventListener("click", () => {
19+
const wasOpen = toggle.getAttribute("aria-pressed") === "true";
20+
const isOpen = !wasOpen;
21+
22+
toggle.setAttribute("aria-pressed", isOpen);
23+
toggle.setAttribute("aria-expanded", isOpen);
24+
content.hidden = !isOpen;
25+
});
26+
27+
// All panels are open by default. When JS kicks in, the first panel stays open,
28+
// other panels are closed.
29+
if (isFirst) {
30+
toggle.setAttribute("aria-pressed", true);
31+
toggle.setAttribute("aria-expanded", true);
32+
content.hidden = false;
33+
} else {
34+
toggle.setAttribute("aria-pressed", false);
35+
toggle.setAttribute("aria-expanded", false);
36+
content.hidden = true;
37+
}
38+
});
39+
});
40+
};
41+
42+
document.addEventListener('DOMContentLoaded', () => {
43+
initAccordions();
44+
});

‎tests/templates/patterns/atoms/icons/icon.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<svg class="icon icon--{{ name }}{% if classname %} {{ classname }}{% endif %}" aria-hidden="true" focusable="false">
2+
<use xlink:href="#{{ name }}"></use>
3+
</svg>

‎tests/templates/patterns/atoms/sprites/sprites.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<svg style="display: none;">
2+
<symbol id="close" width="24" height="24" viewBox="0 0 24 24">
3+
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
4+
<path d="M0 0h24v24H0z" fill="none"></path>
5+
</symbol>
6+
7+
<symbol id="cancel" viewBox="0 0 11 12">
8+
<rect transform="rotate(45 5.5 6)" x="5" y="-1" width="1" height="14" rx=".5"/>
9+
<rect transform="rotate(135 5.5 6)" x="5" y="-1" width="1" height="14" rx=".5"/>
10+
</symbol>
11+
12+
<symbol id="chevron-down" viewBox="0 0 23 14">
13+
<path d="M.893 1.5L11.5 12.107 22.107 1.5" stroke="currentColor" stroke-width="2" fill="none" vector-effect="non-scaling-stroke" />
14+
</symbol>
15+
16+
<symbol id="checkmark" viewBox="0 0 12 10">
17+
<path d="M1 4.364l3.536 3.535 6.363-6.363" stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"/>
18+
</symbol>
19+
</svg>

‎tests/templates/patterns/base.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1+
{% load static %}
2+
<!doctype html>
13
<html lang="en-GB">
24
<head>
5+
<meta charset="utf-8" />
36
<title>{% block title %}Fragment{% endblock %}</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
9+
<link rel="stylesheet" href="{% static 'main.css' %}">
410
</head>
511
<body>
12+
{% include "patterns/atoms/sprites/sprites.html" %}
13+
614
{% block content %}{{ pattern_library_rendered_pattern }}{% endblock %}
15+
<script src="{% static 'main.js' %}"></script>
716
</body>
817
</html>

‎tests/templates/patterns/molecules/accordion/accordion.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="accordion" data-accordion>
2+
{% for accordion in accordions %}
3+
<div class="accordion__panel" data-accordion-panel>
4+
<h3 class="accordion__title heading heading--4">
5+
<button class="accordion__toggle" type="button" data-accordion-toggle aria-pressed="true" aria-expanded="true" aria-controls="{{ id_prefix }}-content-{{ forloop.counter }}">
6+
<span class="accordion__title-inner">{{ accordion.title }}</span>
7+
{% include "patterns/atoms/icons/icon.html" with name="chevron-down" classname="accordion__icon" %}
8+
</button>
9+
</h3>
10+
<div id="{{ id_prefix }}-content-{{ forloop.counter }}" class="accordion__content" data-accordion-content>
11+
<p>{{ accordion.description }}</p>
12+
</div>
13+
</div>
14+
{% endfor %}
15+
</div>

‎tests/templates/patterns/molecules/accordion/accordion.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Accordion
2+
3+
The accordion is a good example of a pattern library component.

‎tests/templates/patterns/molecules/accordion/accordion.yaml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
context:
2+
id_prefix: test
3+
accordions:
4+
- title: Title A
5+
description: Description A. Ask for help.
6+
- title: Title B
7+
description: Description B. Ask for help.
8+
- title: Title C
9+
description: Description C. Ask for help.
10+
- title: Title D
11+
description: Description D. Ask for help.

‎tests/templates/patterns/pages/people/person_page.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{% extends 'patterns/base_page.html' %}
2+
3+
{% block content %}
4+
<div class="section section--main">
5+
<div class="intro">
6+
<div class="container">
7+
<h1>{{ page.first_name }} {{ page.last_name }}</h1>
8+
9+
{% if page.job_title %}
10+
<p>{{ page.job_title }}</p>
11+
{% endif %}
12+
13+
{% if page.website %}
14+
<p><a href="{{ page.website }}">{{ page.website }}</a></p>
15+
{% endif %}
16+
17+
{% if page.email %}
18+
<p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
19+
{% endif %}
20+
21+
{% for item in page.social_media_profile.all %}
22+
<p><a href="{{ item.profile_url }}">{{ item.profile_url }}</a></p>
23+
{% endfor %}
24+
25+
{% with phone_numbers=page.phone_numbers.all %}
26+
{% if phone_numbers %}
27+
{% for related_phone_number in phone_numbers %}
28+
<p><a href="tel:{{ related_phone_number.phone_number|cut:" "|urlencode }}">{{ related_phone_number.phone_number }}</a></p>
29+
{% endfor %}
30+
{% endif %}
31+
{% endwith %}
32+
</div>
33+
</div>
34+
35+
<div class="container">
36+
{% if page.introduction %}
37+
<p class="heading--2">{{ page.introduction }}</p>
38+
{% endif %}
39+
</div>
40+
41+
<hr>
42+
43+
{% include "patterns/molecules/accordion/accordion.html" with accordions=page.accordions %}
44+
45+
<hr>
46+
47+
{% with person_type=page.person_types.all %}
48+
{% if person_type %}
49+
<div class="container">
50+
<h2 class="heading--4">Person types</h2>
51+
{% for person_type in person_type %}
52+
<p>{{ person_type }}</p>
53+
{% endfor %}
54+
</div>
55+
{% endif %}
56+
{% endwith %}
57+
</div>
58+
{% endblock %}

0 commit comments

Comments
 (0)