From f6ebb3b8f171945da20f9ad50a0406ede5fd0db2 Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Wed, 3 Jun 2020 09:05:07 -0400
Subject: [PATCH 01/11] fix: call-to-action now has inverted styles

---
 src/assets/styles/components/_call-to-action.scss | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/assets/styles/components/_call-to-action.scss b/src/assets/styles/components/_call-to-action.scss
index c4151c3d..bbb25f12 100644
--- a/src/assets/styles/components/_call-to-action.scss
+++ b/src/assets/styles/components/_call-to-action.scss
@@ -43,9 +43,20 @@
 	--color: var(--blue-500);
 	--outline-color: var(--blue-500);
 	--background-color: var(--off-white);
+	--hover-color: var(--color);
 	--hover-background-color: var(--blue-50);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
+	--active-color: var(--off-white);
+	--active-background-color: var(--parent-background-color);
+	--active-border-color: var(--off-white);
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--active-border-color) inset,
+		0 0 0 calc(1 * var(--border-width)) var(--active-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--active-border-color);
 	--focus-background-color: var(--background-color);
 	--focus-color: var(--blue-500);
+	--focus-border-color: var(--background-color);
+	--focus-box-shadow:
+		0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--focus-border-color);
+	--visited-color: var(--blue-500);
 }

From a9fc25650a7db6cb09e81da6c8a663b8727ac705 Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Wed, 3 Jun 2020 16:53:12 -0400
Subject: [PATCH 02/11] feat: updated accordion and filter list state styles

---
 src/assets/styles/components/_accordion.scss  | 52 +++++++++++++------
 .../styles/components/_filter-sort.scss       | 45 ++++++++++++++--
 src/assets/styles/components/_link-list.scss  | 16 +++---
 3 files changed, 83 insertions(+), 30 deletions(-)

diff --git a/src/assets/styles/components/_accordion.scss b/src/assets/styles/components/_accordion.scss
index 4374ce46..a6cc4bb4 100644
--- a/src/assets/styles/components/_accordion.scss
+++ b/src/assets/styles/components/_accordion.scss
@@ -49,12 +49,20 @@
 	--background-color: transparent;
 	--hover-color: var(--blue-400);
 	--hover-background-color: var(--background-color);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
-	--focus-background-color: var(--blue-500);
+	--outline-color: var(--parent-background-color);
+	--active-color: var(--off-white);
+	--active-background-color: var(--blue-500);
+	--active-border-color: var(--blue-500);
+	--focus-background-color: var(--parent-background-color);
+	--focus-color: var(--blue-500);
+
 	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--outline-color),
-		0 0 0 calc(2 * var(--border-width)) var(--focus-background-color);
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
+
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--active-border-color);
 
 	border: 0;
 	border-top: solid var(--border-width) var(--color);
@@ -78,9 +86,12 @@
 	--background-color: transparent;
 	--outline-color: var(--dark-mint-500);
 	--hover-color: var(--off-white);
-	--active-color: var(--blue-200);
-	--focus-color: var(--dark-mint-500);
-	--focus-background-color: var(--blue-200);
+	--active-color: var(--parent-background-color);
+	--active-background-color: var(--blue-200);
+	--active-border-color: var(--blue-200);
+	--focus-background-color: var(--parent-background-color);
+	--focus-border-color: var(--blue-200);
+	--focus-color: var(--off-white);
 }
 
 .accordion__control svg {
@@ -103,7 +114,12 @@
 }
 
 .accordion__control:active {
-	border-top-color: var(--active-color);
+	border-top-color: var(--active-background-color);
+	margin-left: rem(-16);
+	margin-right: rem(-16);
+	padding-left: rem(16);
+	padding-right: rem(16);
+	width: calc(100% + #{rem(32)});
 
 	svg {
 		color: inherit;
@@ -127,17 +143,12 @@
 }
 
 .accordion__control:focus:hover {
-	border-top-color: transparent;
+	border-top-color: var(--parent-background-color);
 }
 
 .accordion__control:focus:active,
 .accordion__control:focus:hover:active {
-	border-top-color: var(--active-color);
-	margin-left: 0;
-	margin-right: 0;
-	padding-left: 0;
-	padding-right: 0;
-	width: 100%;
+	border-top-color: var(--active-background-color);
 }
 
 .accordion__control[aria-expanded="true"] {
@@ -148,9 +159,10 @@
 	--background-color: var(--expanded-background-color);
 	--active-background-color: var(--expanded-background-color);
 	--color: var(--expanded-color);
+	--focus-color: var(--off-white);
 
 	border-top-color: transparent;
-	box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--expanded-background-color);
+	box-shadow: 0 0 0 calc(4 * var(--border-width)) var(--expanded-background-color);
 	margin-left: rem(-16);
 	margin-right: rem(-16);
 	padding-left: rem(16);
@@ -175,7 +187,13 @@
 	}
 }
 
+.accordion__control[aria-expanded="true"]:active,
+.accordion__control[aria-expanded="true"]:focus {
+	border-top-color: var(--background-color);
+}
+
 .accordion__control[aria-expanded="true"]:focus {
+	--outline-color: var(--active-color);
 	box-shadow: var(--focus-box-shadow);
 }
 
diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss
index 04cb67ba..aafb358d 100644
--- a/src/assets/styles/components/_filter-sort.scss
+++ b/src/assets/styles/components/_filter-sort.scss
@@ -82,10 +82,13 @@
 			--border-width: #{rem(1)};
 			--color: var(--off-white);
 			--hover-color: var(--off-white);
-			--active-color: var(--white);
-			--focus-background-color: var(--blue-600);
-			--focus-box-shadow: none;
-			--focus-color: var(--color);
+			--hover-underline-color: var(--blue-300);
+			--active-color: var(--parent-background-color);
+			--active-background-color: var(--blue-200);
+			--active-border-color: var(--blue-200);
+			--focus-background-color: var(--parent-background-color);
+			--focus-border-color: var(--blue-200);
+			--focus-color: var(--off-white);
 
 			border-top-color: var(--dark-mint-500);
 			height: rem(69);
@@ -95,19 +98,51 @@
 			padding-right: $gutter;
 			width: calc(100% + 2 * #{$gutter});
 
+			--focus-box-shadow:
+				0 0 0 calc(3 * var(--border-width)) var(--focus-background-color) inset,
+				0 0 0 calc(5 * var(--border-width)) var(--focus-border-color) inset;
+
+			--active-box-shadow:
+				0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset,
+				0 0 0 calc(5 * var(--border-width)) var(--active-border-color) inset,
+				0 0 0 calc(7 * var(--border-width)) var(--parent-background-color) inset;
+
 			svg {
 				margin-right: rem(7);
 			}
 
+			&:active,
+			&:focus {
+				border-top-color: var(--parent-background-color);
+			}
+
 			&:hover {
-				border-top-color: var(--dark-mint-500);
+				border-top-color: var(--hover-underline-color);
 
 				svg {
 					color: inherit;
 				}
+
+				&:active,
+				&:focus {
+					border-top-color: var(--parent-background-color);
+				}
 			}
 		}
 
+		.accordion__control[aria-expanded="true"]:active {
+			box-shadow: var(--active-box-shadow);
+		}
+
+		.accordion__control[aria-expanded="true"]:active:focus {
+			border-top-color: var(--parent-background-color);
+			margin-left: (-1 * $gutter);
+			margin-right: 0;
+			padding-left: $gutter;
+			padding-right: $gutter;
+			width: calc(100% + 2 * #{$gutter});
+		}
+
 		.accordion__control[aria-expanded="true"] + .accordion__content {
 			background: var(--blue-600);
 			color: var(--white);
diff --git a/src/assets/styles/components/_link-list.scss b/src/assets/styles/components/_link-list.scss
index 06e36aa6..491d5f4f 100644
--- a/src/assets/styles/components/_link-list.scss
+++ b/src/assets/styles/components/_link-list.scss
@@ -57,25 +57,25 @@
 		border-bottom: solid rem(3) var(--hover-underline-color);
 	}
 
-	a:active,
-	a:active:hover,
-	a:active:focus {
-		background-color: var(--active-background-color);
+	a:focus {
+		background-color: var(--focus-background-color);
 		border-bottom: 0;
-		color: var(--active-color);
 		margin-left: rem(-16);
 		margin-right: rem(-16);
 		padding-left: rem(16);
 		padding-right: rem(16);
-		text-decoration: none;
 	}
 
-	a:focus {
-		background-color: var(--focus-background-color);
+	a:active,
+	a:active:hover,
+	a:active:focus {
+		background-color: var(--active-background-color);
 		border-bottom: 0;
+		color: var(--active-color);
 		margin-left: rem(-16);
 		margin-right: rem(-16);
 		padding-left: rem(16);
 		padding-right: rem(16);
+		text-decoration: none;
 	}
 }

From 4dd726c1e101d7e22e53d08b0f2a2f5bb646f941 Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Mon, 8 Jun 2020 10:00:16 -0400
Subject: [PATCH 03/11] feat: tags now have active style and fixed accordion
 border widths

---
 src/assets/styles/components/_accordion.scss |  6 +++---
 src/assets/styles/components/_tag.scss       | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/assets/styles/components/_accordion.scss b/src/assets/styles/components/_accordion.scss
index a6cc4bb4..3ca8a7e5 100644
--- a/src/assets/styles/components/_accordion.scss
+++ b/src/assets/styles/components/_accordion.scss
@@ -44,7 +44,7 @@
 .accordion__control {
 	@extend %interactive;
 
-	--border-width: #{rem(2)};
+	--border-width: #{rem(1)};
 	--color: var(--blue-500);
 	--background-color: transparent;
 	--hover-color: var(--blue-400);
@@ -65,7 +65,7 @@
 		0 0 0 calc(4 * var(--border-width)) var(--active-border-color);
 
 	border: 0;
-	border-top: solid var(--border-width) var(--color);
+	border-top: solid calc(2 * var(--border-width)) var(--color);
 	display: block;
 	font-family: $font-family-sans;
 	font-size: rem(20);
@@ -106,7 +106,7 @@
 }
 
 .accordion__control:hover {
-	border-top: solid var(--border-width) var(--blue-300);
+	border-top: solid calc(2 * var(--border-width)) var(--blue-300);
 
 	svg {
 		color: var(--blue-300);
diff --git a/src/assets/styles/components/_tag.scss b/src/assets/styles/components/_tag.scss
index d0aa4c30..8e4a091c 100644
--- a/src/assets/styles/components/_tag.scss
+++ b/src/assets/styles/components/_tag.scss
@@ -23,14 +23,18 @@
 	--outline-color: var(--white);
 	--hover-background-color: var(--grey-200);
 	--hover-color: var(--blue-500);
-	--active-background-color: var(--blue-50);
-	--active-color: var(--blue-500);
+	--active-background-color: var(--blue-700);
+	--active-border-color: var(--blue-700);
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--active-border-color);
+	--active-color: var(--white);
 	--focus-background-color: var(--grey-200);
 	--focus-border-color: var(--blue-500);
 	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--blue-500) inset,
+		0 0 0 calc(2 * var(--border-width)) var(--focus-border-color) inset,
 		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
-		0 0 0 calc(4 * var(--border-width)) var(--blue-500);
+		0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
 	--focus-color: var(--blue-500);
 
 	border-radius: rem(15);

From 52b91de94acc3d6267f0c451c1c2565e3e73fe1c Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Mon, 22 Jun 2020 22:45:04 -0400
Subject: [PATCH 04/11] fix: archive checkbox borders and updated filter list
 template

---
 .../styles/components/_filter-sort.scss       |  2 +-
 .../71-filter-list/filter-list.config.js      | 20 ++++++++++++-------
 .../71-filter-list/filter-list.njk            |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss
index aafb358d..a4ab3b59 100644
--- a/src/assets/styles/components/_filter-sort.scss
+++ b/src/assets/styles/components/_filter-sort.scss
@@ -285,7 +285,7 @@
 }
 
 @include breakpoint-down(md) {
-	.filters .form {
+	.filters {
 		--text-border-color-default: var(--grey-500);
 		--text-border-color-disabled: var(--grey-500);
 		--text-border-color-hover: var(--blue-300);
diff --git a/src/components/20-molecules/71-filter-list/filter-list.config.js b/src/components/20-molecules/71-filter-list/filter-list.config.js
index 0f2490f2..f9894df9 100644
--- a/src/components/20-molecules/71-filter-list/filter-list.config.js
+++ b/src/components/20-molecules/71-filter-list/filter-list.config.js
@@ -1,6 +1,10 @@
 const slugify = require( 'slugify' );
 
 const terms = [
+	{label:'Bangladesh'},
+	{label:'Brazil'},
+	{label:'Canada'},
+	{label:'France'},
 	{
 		label: 'Cooperative essentials',
 		children: [
@@ -69,13 +73,15 @@ const terms = [
 
 terms.forEach( term => {
 	const name = slugify( term.label, { lower: true } );
-	term.children = term.children.map( child => {
-		return {
-			value: slugify( child, { lower: true } ),
-			label: child,
-			name
-		};
-	} );
+	if (term.children) {
+		term.children = term.children.map( child => {
+			return {
+				value: slugify( child, { lower: true } ),
+				label: child,
+				name
+			};
+		} );
+	}
 } );
 
 module.exports = {
diff --git a/src/components/20-molecules/71-filter-list/filter-list.njk b/src/components/20-molecules/71-filter-list/filter-list.njk
index cb861e97..d368bcf7 100644
--- a/src/components/20-molecules/71-filter-list/filter-list.njk
+++ b/src/components/20-molecules/71-filter-list/filter-list.njk
@@ -20,7 +20,7 @@
 							<span class="supplementary-label" hidden> (and {{ count }} subtopics)</span>
 							{% render '@checkboxes', {checkboxes: term.children, className: 'input-group__descendant'}, true %}
 						{% else %}
-							<input type="checkbox" name="{{ label | slugify }}[]" id="{{ label | slugify }}-{{ term.label | slugify }}" value="{{ term.label | slugify }}"><label for="{{ label | slugify }}-{{ term.label | slugify }}">{{ term.label }}</label>
+							{% render '@checkbox', {label: term.label, value: term.label | slugify, name: term.label | slugify, standAlone: false}, true %}
 						{% endif %}
 					</li>
 					{% endfor %}

From ce7d92dd5da25dc3b5a35f4b7fe713ded0a607a5 Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Mon, 22 Jun 2020 23:06:53 -0400
Subject: [PATCH 05/11] fix: removed call to action visited style

---
 src/assets/styles/components/_call-to-action.scss | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/assets/styles/components/_call-to-action.scss b/src/assets/styles/components/_call-to-action.scss
index bbb25f12..0675b06f 100644
--- a/src/assets/styles/components/_call-to-action.scss
+++ b/src/assets/styles/components/_call-to-action.scss
@@ -1,9 +1,6 @@
 .cta {
 	@extend %interactive;
-
-	--visited-color: var(--off-white);
-	--visited-background-color: var(--blue-600);
-
+	
 	border-radius: rem(3);
 	display: block;
 	font-family: $font-family-sans;
@@ -24,11 +21,6 @@
 		margin-left: 0.25em;
 	}
 
-	&:visited {
-		background-color: var(--visited-background);
-		color: var(--visited-color);
-	}
-
 	&:hover,
 	&:active,
 	&:focus {
@@ -58,5 +50,4 @@
 	--focus-box-shadow:
 		0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
 		0 0 0 calc(3 * var(--border-width)) var(--focus-border-color);
-	--visited-color: var(--blue-500);
 }

From 22884d8d62bed60967ced7903f9a368e9a482f79 Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Tue, 23 Jun 2020 16:22:11 -0400
Subject: [PATCH 06/11] fix: form style applying to archive layout, font-weight
 values

---
 src/assets/styles/components/_filter-sort.scss   | 4 ++++
 src/components/30-layouts/40-archive/archive.njk | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss
index a4ab3b59..2c4c2b51 100644
--- a/src/assets/styles/components/_filter-sort.scss
+++ b/src/assets/styles/components/_filter-sort.scss
@@ -33,6 +33,10 @@
 }
 
 .filters {
+	label {
+		font-weight: $font-weight-normal;
+	}
+
 	@include breakpoint-down(md) {
 		display: none;
 
diff --git a/src/components/30-layouts/40-archive/archive.njk b/src/components/30-layouts/40-archive/archive.njk
index dc7178bd..d2ab239c 100644
--- a/src/components/30-layouts/40-archive/archive.njk
+++ b/src/components/30-layouts/40-archive/archive.njk
@@ -6,7 +6,7 @@
 </div>
 <div class="filter-wrapper">
 	{% render '@button--borderless', {standAlone: true, id: 'show-filters'}, true %}
-	<form class="filters" action="/">
+	<form class="form filters" action="/">
 		{% render '@button--borderless', {standAlone: true, id: 'hide-filters', label: 'Close', iconPosition: 'end', icon: 'close'}, true %}
 		<h2 class="h1 screen-reader-text" tabindex="-1">Filters</h2>
 		<div class="accordion accordion--filter-list">

From 94925cbfd56926ca155a43d3345fdfc4a3d19b1c Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Wed, 24 Jun 2020 10:42:36 -0400
Subject: [PATCH 07/11] fix: checkbox IDs properly set using values from
 template configuration

---
 .../40-checkboxes/checkboxes.config.js        |   3 +
 .../custom-checkboxes.config.js               |  18 ++--
 .../_checkbox/_checkbox--unwrapped.njk        |   2 +-
 .../100-form-elements/_checkbox/_checkbox.njk |   4 +-
 .../30-layouts/40-archive/archive.config.js   | 102 +++++++++---------
 5 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
index f793a6f5..ce7a40f0 100644
--- a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
+++ b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
@@ -6,15 +6,18 @@ module.exports = {
 		checkboxes: [
 			{
 				name: 'checkboxes',
+				value: 'Initially unchecked value',
 				label: 'Initially unchecked',
 			},
 			{
 				name: 'checkboxes',
+				value: 'Initially checked value',
 				label: 'Initially checked',
 				checked: true,
 			},
 			{
 				name: 'checkboxes',
+				value: 'Disabled checkbox value',
 				label: 'Disabled checkbox',
 				disabled: true,
 			}
diff --git a/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js b/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js
index 871122ba..0cc8dd01 100644
--- a/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js
+++ b/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js
@@ -8,25 +8,25 @@ module.exports = {
 			{
 				label: 'Parent item 1 (initially unchecked)',
 				children: [
-					{ label: 'Sub item 1' },
-					{ label: 'Sub item 2' },
-					{ label: 'Sub item 3' }
+					{ label: 'Sub item 1', value: 'sub item 1 value' },
+					{ label: 'Sub item 2', value: 'sub item 2 value' },
+					{ label: 'Sub item 3', value: 'sub item 3 value' }
 				]
 			},
 			{
 				label: 'Parent item 2 (initially mixed)',
 				children: [
-					{ label: 'Sub item 4', checked: true },
-					{ label: 'Sub item 5'},
-					{ label: 'Sub item 6', checked: true }
+					{ label: 'Sub item 4', checked: true, value: 'sub item 4 value' },
+					{ label: 'Sub item 5', value: 'sub item 5 value'},
+					{ label: 'Sub item 6', checked: true, value: 'sub item 6 value' }
 				]
 			},
 			{
 				label: 'Parent item 3 (initially all checked)',
 				children: [
-					{ label: 'Sub item 7', checked: true },
-					{ label: 'Sub item 8', checked: true },
-					{ label: 'Sub item 9', checked: true }
+					{ label: 'Sub item 7', checked: true, value: 'sub item 7 value' },
+					{ label: 'Sub item 8', checked: true, value: 'sub item 8 value' },
+					{ label: 'Sub item 9', checked: true, value: 'sub item 9 value' }
 				]
 			}
 		]
diff --git a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk
index dea341c4..16fa6275 100644
--- a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk
+++ b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk
@@ -1 +1 @@
-<input {% if className %}class="{{ className }}"{% endif %} id="{{ value if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} /><label for="{{ value if value else label | slugify }}">{{ label }}</label>
+<input {% if className %}class="{{ className }}"{% endif %} id="{{ value | slugify if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value | slugify if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} /><label for="{{ value | slugify if value else label | slugify }}">{{ label }}</label>
diff --git a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk
index d6d8ce88..1188082a 100644
--- a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk
+++ b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk
@@ -1,3 +1,3 @@
-<label for="{{ value if value else label | slugify }}">
-	<input {% if className %}class="{{ className }}"{% endif %} id="{{ value if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} />{{ label }}
+<label for="{{ value | slugify if value else label | slugify }}">
+	<input {% if className %}class="{{ className }}"{% endif %} id="{{ value | slugify if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} />{{ label }}
 </label>
diff --git a/src/components/30-layouts/40-archive/archive.config.js b/src/components/30-layouts/40-archive/archive.config.js
index 1ed2b0dc..e517ee66 100644
--- a/src/components/30-layouts/40-archive/archive.config.js
+++ b/src/components/30-layouts/40-archive/archive.config.js
@@ -126,23 +126,23 @@ module.exports = {
 					{
 						label: 'Build a co-op',
 						children: [
-							'Write bylaws',
-							'Build a business model',
-							'Establish a governance structure',
-							'Incorporate a co-op',
-							'Build a marketing plan',
-							'Pick a co-op type',
-							'Make decisions collaboratively'
+							{label:'Write bylaws', value:'build a co-op value 1'},
+							{label:'Build a business model', value:'build a co-op value 2'},
+							{label:'Establish a governance structure', value:'build a co-op value 3'},
+							{label:'Incorporate a co-op', value:'build a co-op value 4'},
+							{label:'Build a marketing plan', value:'build a co-op value 5'},
+							{label:'Pick a co-op type', value:'build a co-op value 6'},
+							{label:'Make decisions collaboratively', value:'build a co-op value 7'}
 						]
 					},
 					{
 						label: 'Build a platform or protocol',
 						children: [
-							'Understand the design process',
-							'Design for privacy',
-							'Design for inclusion',
-							'Build accessible digital tools',
-							'Build open source software'
+							{label:'Understand the design process', value:'build a platform value 1'},
+							{label:'Design for privacy', value:'build a platform value 2'},
+							{label:'Design for inclusion', value:'build a platform value 3'},
+							{label:'Build accessible digital tools', value:'build a platform value 4'},
+							{label:'Build open source software', value:'build a platform value 5'}
 						]
 					},
 					{
@@ -159,65 +159,65 @@ module.exports = {
 					{
 						label: 'Cooperative essentials',
 						children: [
-							'Governance',
-							'Ownership',
-							'Cooperative best practices',
-							'Diversity and inclusion',
-							'Bylaws',
+							{label:'Governance', value:'essentials value 1'},
+							{label:'Ownership', value:'essentials value 2'},
+							{label:'Cooperative best practices', value:'essentials value 3'},
+							{label:'Diversity and inclusion', value:'essentials value 4'},
+							{label:'Bylaws', value:'essentials value 5'},
 						]
 					},
 					{
 						label: 'Business operations',
 						children: [
-							'Human resources',
-							'Marketing',
-							'Social media',
-							'Incorporation',
-							'Business model',
-							'Income, benefits, and compensation'
+							{label:'Human resources', value:'operations value 1'},
+							{label:'Marketing', value:'operations value 2'},
+							{label:'Social media', value:'operations value 3'},
+							{label:'Incorporation', value:'operations value 4'},
+							{label:'Business model', value:'operations value 5'},
+							{label:'Income, benefits, and compensation', value:'operations value 6'}
 						]
 					},
 					{
 						label: 'Technology & Platforms',
 						children: [
-							'Software development',
-							'Platforms',
-							'Design',
-							'Free software',
-							'Data',
-							'Algorithms',
-							'Automation',
-							'Blockchain',
-							'Search engines'
+							{label:'Software development', value:'tech value 1'},
+							{label:'Platforms', value:'tech value 2'},
+							{label:'Design', value:'tech value 3'},
+							{label:'Free software', value:'tech value 4'},
+							{label:'Data', value:'tech value 5'},
+							{label:'Algorithms', value:'tech value 6'},
+							{label:'Automation', value:'tech value 7'},
+							{label:'Blockchain', value:'tech value 8'},
+							{label:'Search engines', value:'tech value 9'}
 						]
 					},
 					{
 						label: 'Law & Policy',
 						children: [
-							'Anti-trust',
-							'Labor law',
-							'Policy',
-							'Co-op law'
+							{label:'Anti-trust', value:'law value 1'},
+							{label:'Labor law', value:'law value 2'},
+							{label:'Policy', value:'law value 3'},
+							{label:'Co-op law', value:'law value 4'}
 						]
 					},
 					{
 						label: 'Fair labour',
 						children: [
-							'Unions',
-							'Workplace safety',
-							'Social security',
+							{label:'Unions', value:'labour value 1'},
+							{label:'Workplace safety', value:'labour value 2'},
+							{label:'Social security', value:'labour value 3'},
 						]
 					},
 					{
 						label: 'Platform co-op theory',
 						children: [
-							'Platform cooperativism',
-							'Platform capitalism',
-							'Gig economy',
-							'Sharing economy',
-							'Solidarity economy',
-							'Information economy',
-							'Peer-to-peer'
+							{label:'Platform cooperativism', value:'theory value 1'},
+							{label:'Platform capitalism', value:'theory value 2'},
+							{label:'Gig economy', value:'theory value 3'},
+							{label:'Sharing economy', value:'theory value 4'},
+							{label:'Solidarity economy', value:'theory value 5'},
+							{label:'Information economy', value:'theory value 6'},
+							{label:'Peer-to-peer', value:'theory value 7'}
 						]
 					},
 				]
@@ -326,11 +326,11 @@ module.exports = {
 					{
 						label:'Technology',
 						children: [
-							'Electronics and computer manufacturing',
-							'Software and hardware enginereeing',
-							'Web service providers',
-							'Data processing',
-							'Misc technology'
+							{label:'Electronics and computer manufacturing', value:'sector tech value 1'},
+							{label:'Software and hardware enginereeing', value:'sector tech value 2'},
+							{label:'Web service providers', value:'sector tech value 3'},
+							{label:'Data processing', value:'sector tech value 4'},
+							{label:'Misc technology', value:'sector tech value 5'}
 						]
 					},
 					{

From 7cee0dd22b206e256c020b89bfd706eb69d21e31 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Wed, 24 Jun 2020 09:57:30 -0600
Subject: [PATCH 08/11] Revert "fix: checkbox IDs properly set using values
 from template configuration"

94925cbfd56926ca155a43d3345fdfc4a3d19b1c
---
 .../40-checkboxes/checkboxes.config.js        |   3 -
 .../custom-checkboxes.config.js               |  18 ++--
 .../_checkbox/_checkbox--unwrapped.njk        |   2 +-
 .../100-form-elements/_checkbox/_checkbox.njk |   4 +-
 .../30-layouts/40-archive/archive.config.js   | 102 +++++++++---------
 5 files changed, 63 insertions(+), 66 deletions(-)

diff --git a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
index ce7a40f0..f793a6f5 100644
--- a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
+++ b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
@@ -6,18 +6,15 @@ module.exports = {
 		checkboxes: [
 			{
 				name: 'checkboxes',
-				value: 'Initially unchecked value',
 				label: 'Initially unchecked',
 			},
 			{
 				name: 'checkboxes',
-				value: 'Initially checked value',
 				label: 'Initially checked',
 				checked: true,
 			},
 			{
 				name: 'checkboxes',
-				value: 'Disabled checkbox value',
 				label: 'Disabled checkbox',
 				disabled: true,
 			}
diff --git a/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js b/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js
index 0cc8dd01..871122ba 100644
--- a/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js
+++ b/src/components/10-atoms/100-form-elements/41-custom-checkboxes/custom-checkboxes.config.js
@@ -8,25 +8,25 @@ module.exports = {
 			{
 				label: 'Parent item 1 (initially unchecked)',
 				children: [
-					{ label: 'Sub item 1', value: 'sub item 1 value' },
-					{ label: 'Sub item 2', value: 'sub item 2 value' },
-					{ label: 'Sub item 3', value: 'sub item 3 value' }
+					{ label: 'Sub item 1' },
+					{ label: 'Sub item 2' },
+					{ label: 'Sub item 3' }
 				]
 			},
 			{
 				label: 'Parent item 2 (initially mixed)',
 				children: [
-					{ label: 'Sub item 4', checked: true, value: 'sub item 4 value' },
-					{ label: 'Sub item 5', value: 'sub item 5 value'},
-					{ label: 'Sub item 6', checked: true, value: 'sub item 6 value' }
+					{ label: 'Sub item 4', checked: true },
+					{ label: 'Sub item 5'},
+					{ label: 'Sub item 6', checked: true }
 				]
 			},
 			{
 				label: 'Parent item 3 (initially all checked)',
 				children: [
-					{ label: 'Sub item 7', checked: true, value: 'sub item 7 value' },
-					{ label: 'Sub item 8', checked: true, value: 'sub item 8 value' },
-					{ label: 'Sub item 9', checked: true, value: 'sub item 9 value' }
+					{ label: 'Sub item 7', checked: true },
+					{ label: 'Sub item 8', checked: true },
+					{ label: 'Sub item 9', checked: true }
 				]
 			}
 		]
diff --git a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk
index 16fa6275..dea341c4 100644
--- a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk
+++ b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox--unwrapped.njk
@@ -1 +1 @@
-<input {% if className %}class="{{ className }}"{% endif %} id="{{ value | slugify if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value | slugify if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} /><label for="{{ value | slugify if value else label | slugify }}">{{ label }}</label>
+<input {% if className %}class="{{ className }}"{% endif %} id="{{ value if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} /><label for="{{ value if value else label | slugify }}">{{ label }}</label>
diff --git a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk
index 1188082a..d6d8ce88 100644
--- a/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk
+++ b/src/components/10-atoms/100-form-elements/_checkbox/_checkbox.njk
@@ -1,3 +1,3 @@
-<label for="{{ value | slugify if value else label | slugify }}">
-	<input {% if className %}class="{{ className }}"{% endif %} id="{{ value | slugify if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} />{{ label }}
+<label for="{{ value if value else label | slugify }}">
+	<input {% if className %}class="{{ className }}"{% endif %} id="{{ value if value else label | slugify }}" type="checkbox" name="{{ name }}" value="{{ value if value else label | slugify }}"{{ ' checked' if checked }}{{ ' disabled' if disabled }} />{{ label }}
 </label>
diff --git a/src/components/30-layouts/40-archive/archive.config.js b/src/components/30-layouts/40-archive/archive.config.js
index e517ee66..1ed2b0dc 100644
--- a/src/components/30-layouts/40-archive/archive.config.js
+++ b/src/components/30-layouts/40-archive/archive.config.js
@@ -126,23 +126,23 @@ module.exports = {
 					{
 						label: 'Build a co-op',
 						children: [
-							{label:'Write bylaws', value:'build a co-op value 1'},
-							{label:'Build a business model', value:'build a co-op value 2'},
-							{label:'Establish a governance structure', value:'build a co-op value 3'},
-							{label:'Incorporate a co-op', value:'build a co-op value 4'},
-							{label:'Build a marketing plan', value:'build a co-op value 5'},
-							{label:'Pick a co-op type', value:'build a co-op value 6'},
-							{label:'Make decisions collaboratively', value:'build a co-op value 7'}
+							'Write bylaws',
+							'Build a business model',
+							'Establish a governance structure',
+							'Incorporate a co-op',
+							'Build a marketing plan',
+							'Pick a co-op type',
+							'Make decisions collaboratively'
 						]
 					},
 					{
 						label: 'Build a platform or protocol',
 						children: [
-							{label:'Understand the design process', value:'build a platform value 1'},
-							{label:'Design for privacy', value:'build a platform value 2'},
-							{label:'Design for inclusion', value:'build a platform value 3'},
-							{label:'Build accessible digital tools', value:'build a platform value 4'},
-							{label:'Build open source software', value:'build a platform value 5'}
+							'Understand the design process',
+							'Design for privacy',
+							'Design for inclusion',
+							'Build accessible digital tools',
+							'Build open source software'
 						]
 					},
 					{
@@ -159,65 +159,65 @@ module.exports = {
 					{
 						label: 'Cooperative essentials',
 						children: [
-							{label:'Governance', value:'essentials value 1'},
-							{label:'Ownership', value:'essentials value 2'},
-							{label:'Cooperative best practices', value:'essentials value 3'},
-							{label:'Diversity and inclusion', value:'essentials value 4'},
-							{label:'Bylaws', value:'essentials value 5'},
+							'Governance',
+							'Ownership',
+							'Cooperative best practices',
+							'Diversity and inclusion',
+							'Bylaws',
 						]
 					},
 					{
 						label: 'Business operations',
 						children: [
-							{label:'Human resources', value:'operations value 1'},
-							{label:'Marketing', value:'operations value 2'},
-							{label:'Social media', value:'operations value 3'},
-							{label:'Incorporation', value:'operations value 4'},
-							{label:'Business model', value:'operations value 5'},
-							{label:'Income, benefits, and compensation', value:'operations value 6'}
+							'Human resources',
+							'Marketing',
+							'Social media',
+							'Incorporation',
+							'Business model',
+							'Income, benefits, and compensation'
 						]
 					},
 					{
 						label: 'Technology & Platforms',
 						children: [
-							{label:'Software development', value:'tech value 1'},
-							{label:'Platforms', value:'tech value 2'},
-							{label:'Design', value:'tech value 3'},
-							{label:'Free software', value:'tech value 4'},
-							{label:'Data', value:'tech value 5'},
-							{label:'Algorithms', value:'tech value 6'},
-							{label:'Automation', value:'tech value 7'},
-							{label:'Blockchain', value:'tech value 8'},
-							{label:'Search engines', value:'tech value 9'}
+							'Software development',
+							'Platforms',
+							'Design',
+							'Free software',
+							'Data',
+							'Algorithms',
+							'Automation',
+							'Blockchain',
+							'Search engines'
 						]
 					},
 					{
 						label: 'Law & Policy',
 						children: [
-							{label:'Anti-trust', value:'law value 1'},
-							{label:'Labor law', value:'law value 2'},
-							{label:'Policy', value:'law value 3'},
-							{label:'Co-op law', value:'law value 4'}
+							'Anti-trust',
+							'Labor law',
+							'Policy',
+							'Co-op law'
 						]
 					},
 					{
 						label: 'Fair labour',
 						children: [
-							{label:'Unions', value:'labour value 1'},
-							{label:'Workplace safety', value:'labour value 2'},
-							{label:'Social security', value:'labour value 3'},
+							'Unions',
+							'Workplace safety',
+							'Social security',
 						]
 					},
 					{
 						label: 'Platform co-op theory',
 						children: [
-							{label:'Platform cooperativism', value:'theory value 1'},
-							{label:'Platform capitalism', value:'theory value 2'},
-							{label:'Gig economy', value:'theory value 3'},
-							{label:'Sharing economy', value:'theory value 4'},
-							{label:'Solidarity economy', value:'theory value 5'},
-							{label:'Information economy', value:'theory value 6'},
-							{label:'Peer-to-peer', value:'theory value 7'}
+							'Platform cooperativism',
+							'Platform capitalism',
+							'Gig economy',
+							'Sharing economy',
+							'Solidarity economy',
+							'Information economy',
+							'Peer-to-peer'
 						]
 					},
 				]
@@ -326,11 +326,11 @@ module.exports = {
 					{
 						label:'Technology',
 						children: [
-							{label:'Electronics and computer manufacturing', value:'sector tech value 1'},
-							{label:'Software and hardware enginereeing', value:'sector tech value 2'},
-							{label:'Web service providers', value:'sector tech value 3'},
-							{label:'Data processing', value:'sector tech value 4'},
-							{label:'Misc technology', value:'sector tech value 5'}
+							'Electronics and computer manufacturing',
+							'Software and hardware enginereeing',
+							'Web service providers',
+							'Data processing',
+							'Misc technology'
 						]
 					},
 					{

From 31e6cf6450264085a269e86781ba8033fcd2c2c2 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Wed, 24 Jun 2020 10:00:39 -0600
Subject: [PATCH 09/11] fix: don't merge values from base checkbox in
 checkboxes

---
 .../10-atoms/100-form-elements/40-checkboxes/checkboxes.njk     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
index dd4c7046..dcf56072 100644
--- a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
+++ b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
@@ -1,7 +1,7 @@
 <ul class="input-group checkbox{{ ' ' + className if className }}">
 	{% for checkbox in checkboxes %}
 	<li>
-		{% render '@' + component, checkbox, true %}
+		{% render '@' + component, checkbox %}
 	</li>
 	{% endfor %}
 </ul>

From f2830eb1562cc725efec9f983ff709bbf49757ac Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Wed, 24 Jun 2020 10:28:50 -0600
Subject: [PATCH 10/11] fix: pass proper data to filters on Archive

---
 .../30-layouts/40-archive/archive.config.js   | 102 +++++++++---------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/src/components/30-layouts/40-archive/archive.config.js b/src/components/30-layouts/40-archive/archive.config.js
index 1ed2b0dc..6ad28228 100644
--- a/src/components/30-layouts/40-archive/archive.config.js
+++ b/src/components/30-layouts/40-archive/archive.config.js
@@ -126,23 +126,23 @@ module.exports = {
 					{
 						label: 'Build a co-op',
 						children: [
-							'Write bylaws',
-							'Build a business model',
-							'Establish a governance structure',
-							'Incorporate a co-op',
-							'Build a marketing plan',
-							'Pick a co-op type',
-							'Make decisions collaboratively'
+							{label: 'Write bylaws'},
+							{label: 'Build a business model'},
+							{label: 'Establish a governance structure'},
+							{label: 'Incorporate a co-op'},
+							{label: 'Build a marketing plan'},
+							{label: 'Pick a co-op type'},
+							{label: 'Make decisions collaboratively'}
 						]
 					},
 					{
 						label: 'Build a platform or protocol',
 						children: [
-							'Understand the design process',
-							'Design for privacy',
-							'Design for inclusion',
-							'Build accessible digital tools',
-							'Build open source software'
+							{label: 'Understand the design process'},
+							{label: 'Design for privacy'},
+							{label: 'Design for inclusion'},
+							{label: 'Build accessible digital tools'},
+							{label: 'Build open source software'}
 						]
 					},
 					{
@@ -159,65 +159,65 @@ module.exports = {
 					{
 						label: 'Cooperative essentials',
 						children: [
-							'Governance',
-							'Ownership',
-							'Cooperative best practices',
-							'Diversity and inclusion',
-							'Bylaws',
+							{label: 'Governance'},
+							{label: 'Ownership'},
+							{label: 'Cooperative best practices'},
+							{label: 'Diversity and inclusion'},
+							{label: 'Bylaws'},
 						]
 					},
 					{
 						label: 'Business operations',
 						children: [
-							'Human resources',
-							'Marketing',
-							'Social media',
-							'Incorporation',
-							'Business model',
-							'Income, benefits, and compensation'
+							{label: 'Human resources'},
+							{label: 'Marketing'},
+							{label: 'Social media'},
+							{label: 'Incorporation'},
+							{label: 'Business model'},
+							{label: 'Income, benefits, and compensation'}
 						]
 					},
 					{
 						label: 'Technology & Platforms',
 						children: [
-							'Software development',
-							'Platforms',
-							'Design',
-							'Free software',
-							'Data',
-							'Algorithms',
-							'Automation',
-							'Blockchain',
-							'Search engines'
+							{label:'Software development'},
+							{label:'Platforms'},
+							{label:'Design'},
+							{label:'Free software'},
+							{label:'Data'},
+							{label:'Algorithms'},
+							{label:'Automation'},
+							{label:'Blockchain'},
+							{label:'Search engines'}
 						]
 					},
 					{
 						label: 'Law & Policy',
 						children: [
-							'Anti-trust',
-							'Labor law',
-							'Policy',
-							'Co-op law'
+							{label: 'Anti-trust'},
+							{label: 'Labor law'},
+							{label: 'Policy'},
+							{label: 'Co-op law'}
 						]
 					},
 					{
 						label: 'Fair labour',
 						children: [
-							'Unions',
-							'Workplace safety',
-							'Social security',
+							{label: 'Unions'},
+							{label: 'Workplace safety'},
+							{label: 'Social security'},
 						]
 					},
 					{
 						label: 'Platform co-op theory',
 						children: [
-							'Platform cooperativism',
-							'Platform capitalism',
-							'Gig economy',
-							'Sharing economy',
-							'Solidarity economy',
-							'Information economy',
-							'Peer-to-peer'
+							{label: 'Platform cooperativism'},
+							{label: 'Platform capitalism'},
+							{label: 'Gig economy'},
+							{label: 'Sharing economy'},
+							{label: 'Solidarity economy'},
+							{label: 'Information economy'},
+							{label: 'Peer-to-peer'}
 						]
 					},
 				]
@@ -326,11 +326,11 @@ module.exports = {
 					{
 						label:'Technology',
 						children: [
-							'Electronics and computer manufacturing',
-							'Software and hardware enginereeing',
-							'Web service providers',
-							'Data processing',
-							'Misc technology'
+							{label: 'Electronics and computer manufacturing'},
+							{label: 'Software and hardware enginereeing'},
+							{label: 'Web service providers'},
+							{label: 'Data processing'},
+							{label: 'Misc technology'}
 						]
 					},
 					{

From d2374c829c8a5928837a070e78452818ad163fb2 Mon Sep 17 00:00:00 2001
From: Jonathan Hung <jhung@ocadu.ca>
Date: Wed, 24 Jun 2020 15:36:27 -0400
Subject: [PATCH 11/11] fix: filter list styling now properly overrides form
 styles

---
 src/assets/styles/components/_filter-sort.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss
index 2c4c2b51..bf732194 100644
--- a/src/assets/styles/components/_filter-sort.scss
+++ b/src/assets/styles/components/_filter-sort.scss
@@ -289,7 +289,8 @@
 }
 
 @include breakpoint-down(md) {
-	.filters {
+	.filters,
+	.filters .form {
 		--text-border-color-default: var(--grey-500);
 		--text-border-color-disabled: var(--grey-500);
 		--text-border-color-hover: var(--blue-300);