From f5cae602e3eb38ee9e5e1a1dbbb02895d5ce8276 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Tue, 2 Jun 2020 12:06:34 -0600
Subject: [PATCH] fix: improve filter list

---
 .../styles/components/_filter-sort.scss       |  12 +-
 .../styles/components/inputs/_checkbox.scss   |   1 +
 .../71-filter-list/filter-list.config.js      | 147 ++++++++++--------
 3 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss
index 63fa2ddc..04cb67ba 100644
--- a/src/assets/styles/components/_filter-sort.scss
+++ b/src/assets/styles/components/_filter-sort.scss
@@ -60,6 +60,11 @@
 }
 
 .accordion--filter-list {
+	.accordion__content > .input-group li ul {
+		margin-top: rem(12);
+		padding-left: rem(30);
+	}
+
 	@include breakpoint-down(md) {
 		.accordion__heading {
 			--border-width: #{rem(1)};
@@ -122,7 +127,7 @@
 			margin-right: ($gutter * -1);
 			margin-top: rem(12);
 			padding-bottom: rem(6);
-			padding-left: rem(70);
+			padding-left: rem(40);
 			padding-top: rem(6);
 			width: calc(100% + #{($gutter * 2)});
 		}
@@ -148,11 +153,6 @@
 		top: rem(9);
 	}
 
-	.accordion__content > .input-group li ul {
-		margin-top: rem(12);
-		padding-left: rem(30);
-	}
-
 	.accordion__content > .input-group li [aria-expanded="false"] + ul {
 		display: none;
 	}
diff --git a/src/assets/styles/components/inputs/_checkbox.scss b/src/assets/styles/components/inputs/_checkbox.scss
index 8db5404a..f10fddad 100644
--- a/src/assets/styles/components/inputs/_checkbox.scss
+++ b/src/assets/styles/components/inputs/_checkbox.scss
@@ -18,6 +18,7 @@ input[type="checkbox"] {
 .checkbox label,
 input[type="checkbox"] + label,
 [role="checkbox"] {
+	cursor: default;
 	font-weight: $font-weight-normal;
 }
 
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 3885c908..0f2490f2 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,74 +1,89 @@
+const slugify = require( 'slugify' );
+
+const terms = [
+	{
+		label: 'Cooperative essentials',
+		children: [
+			'Governance',
+			'Ownership',
+			'Cooperative best practices',
+			'Diversity and inclusion',
+			'Bylaws',
+		]
+	},
+	{
+		label: 'Business operations',
+		children: [
+			'Human resources',
+			'Marketing',
+			'Social media',
+			'Incorporation',
+			'Business model',
+			'Income, benefits, and compensation'
+		]
+	},
+	{
+		label: 'Technology & Platforms',
+		children: [
+			'Software development',
+			'Platforms',
+			'Design',
+			'Free software',
+			'Data',
+			'Algorithms',
+			'Automation',
+			'Blockchain',
+			'Search engines'
+		]
+	},
+	{
+		label: 'Law & Policy',
+		children: [
+			'Anti-trust',
+			'Labor law',
+			'Policy',
+			'Co-op law'
+		]
+	},
+	{
+		label: 'Fair labour',
+		children: [
+			'Unions',
+			'Workplace safety',
+			'Social security',
+		]
+	},
+	{
+		label: 'Platform co-op theory',
+		children: [
+			'Platform cooperativism',
+			'Platform capitalism',
+			'Gig economy',
+			'Sharing economy',
+			'Solidarity economy',
+			'Information economy',
+			'Peer-to-peer'
+		]
+	},
+];
+
+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
+		};
+	} );
+} );
+
 module.exports = {
 	name: 'Filter List',
 	status: 'wip',
 	context: {
 		label: 'Topics',
-		terms: [
-			{
-				label: 'Cooperative essentials',
-				children: [
-					'Governance',
-					'Ownership',
-					'Cooperative best practices',
-					'Diversity and inclusion',
-					'Bylaws',
-				]
-			},
-			{
-				label: 'Business operations',
-				children: [
-					'Human resources',
-					'Marketing',
-					'Social media',
-					'Incorporation',
-					'Business model',
-					'Income, benefits, and compensation'
-				]
-			},
-			{
-				label: 'Technology & Platforms',
-				children: [
-					'Software development',
-					'Platforms',
-					'Design',
-					'Free software',
-					'Data',
-					'Algorithms',
-					'Automation',
-					'Blockchain',
-					'Search engines'
-				]
-			},
-			{
-				label: 'Law & Policy',
-				children: [
-					'Anti-trust',
-					'Labor law',
-					'Policy',
-					'Co-op law'
-				]
-			},
-			{
-				label: 'Fair labour',
-				children: [
-					'Unions',
-					'Workplace safety',
-					'Social security',
-				]
-			},
-			{
-				label: 'Platform co-op theory',
-				children: [
-					'Platform cooperativism',
-					'Platform capitalism',
-					'Gig economy',
-					'Sharing economy',
-					'Solidarity economy',
-					'Information economy',
-					'Peer-to-peer'
-				]
-			},
-		],
+		terms,
 		standAlone: false,
 	}
 };