fix: checkbox IDs properly set using values from template configuration

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,
 			}

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' }
 				]
 			}
 		]

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>

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>

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'}
 						]
 					},
 					{