diff --git a/assets/scss/carbon/community-theme.scss b/assets/scss/carbon/community-theme.scss
index 04f8f5df29..c4b2d2c11d 100644
--- a/assets/scss/carbon/community-theme.scss
+++ b/assets/scss/carbon/community-theme.scss
@@ -91,4 +91,14 @@ $logo-size-small: 8rem;
$icon-size: 0.75rem;
$carbon--theme: $carbon--theme--custom;
-@include carbon--theme();
\ No newline at end of file
+@include carbon--theme();
+
+//== Checkbox
+
+.bx--checkbox:focus + .bx--checkbox-label::before {
+ box-shadow: 0 0 0 2px $white, 0 0 0 4px $purple-60;
+}
+
+.bx--checkbox-label::before {
+ border: 1px solid $black-100;
+}
diff --git a/components/advocates/MeetTheAdvocates.vue b/components/advocates/MeetTheAdvocates.vue
index faa7d4ed39..7c1f0c2e1a 100644
--- a/components/advocates/MeetTheAdvocates.vue
+++ b/components/advocates/MeetTheAdvocates.vue
@@ -17,16 +17,24 @@
-
-
+
import Vue from 'vue'
+import { mapState, MapperForStateWithNamespace } from 'vuex'
import { Component, Prop } from 'vue-property-decorator'
import AdvocateCard from '~/components/advocates/AdvocateCard.vue'
import AppMultiSelect from '~/components/ui/AppMultiSelect.vue'
import AppFieldset from '~/components/ui/AppFieldset.vue'
-import AppCheckbox from '~/components/ui/AppCheckbox.vue'
import AppFiltersResultsLayout from '~/components/ui/AppFiltersResultsLayout.vue'
import InfiniteScroll from '~/components/ui/InfiniteScroll.vue'
import AppLink from '~/components/ui/AppLink.vue'
+import { Advocate, ADVOCATES_WORLD_REGION_OPTIONS, State } from '~/store/modules/advocates.ts'
@Component({
components: {
AdvocateCard,
AppMultiSelect,
AppFieldset,
- AppCheckbox,
AppFiltersResultsLayout,
InfiniteScroll,
AppLink
+ },
+
+ computed: {
+ ...mapState('advocates', {
+ regionFilters: (state: State) => state.regionFilters
+ })
}
})
-export default class extends Vue {
- @Prop(Array) advocates!: any
+export default class MeetTheAdvocates extends Vue {
+ @Prop(Array) advocates!: Advocate[]
+
+ /**
+ * Region filters from Vuex store.
+ *
+ * Initialized with mapState.
+ */
+ public regionFilters!: string[]
- filter = {
+ private filter = {
label: 'Locations',
- options: ['Americas', 'Asia Pacific', 'Europe', 'Africa'],
- filterType: 'regionFilters'
+ options: ADVOCATES_WORLD_REGION_OPTIONS
+ }
+
+ isRegionFilterChecked (filterValue: string): boolean {
+ return this.regionFilters.includes(filterValue)
+ }
+
+ updateRegionFilter (option: string, isChecked: boolean): void {
+ const regionFilters = this.regionFilters.filter(oldOption => oldOption !== option)
+
+ if (isChecked) {
+ regionFilters.push(option)
+ }
+
+ this.updateRegionFilters(regionFilters)
+ }
+
+ updateRegionFilters (regionFilters: string[]): void {
+ this.$store.commit('advocates/setRegionFilters', regionFilters)
}
joinSlackLink: string = 'https://ibm.co/joinqiskitslack'
diff --git a/package-lock.json b/package-lock.json
index eb2ea9bb74..f853091040 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2812,6 +2812,12 @@
"integrity": "sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==",
"dev": true
},
+ "@types/lodash": {
+ "version": "4.14.165",
+ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.165.tgz",
+ "integrity": "sha512-tjSSOTHhI5mCHTy/OOXYIhi2Wt1qcbHmuXD1Ha7q70CgI/I71afO4XtLb/cVexki1oVYchpul/TOuu3Arcdxrg==",
+ "dev": true
+ },
"@types/markdown-it": {
"version": "10.0.3",
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-10.0.3.tgz",
diff --git a/package.json b/package.json
index 689d90bcbd..14b5a7eb04 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"@nuxtjs/axios": "^5.12.3",
"carbon-components": "^10.25.0",
"cross-env": "^7.0.3",
+ "lodash": "^4.17.20",
"nuxt": "^2.14.10",
"nuxt-lazy-load": "^1.2.4",
"ts-node": "^9.1.1",
@@ -43,6 +44,7 @@
"@nuxtjs/style-resources": "^1.0.0",
"@types/airtable": "^0.8.1",
"@types/jest": "^26.0.18",
+ "@types/lodash": "^4.14.165",
"@types/markdown-it": "^10.0.3",
"@types/markdown-it-anchor": "^4.0.4",
"@types/markdown-it-link-attributes": "^3.0.0",
diff --git a/pages/advocates/index.vue b/pages/advocates/index.vue
index b56fd20e4d..d38d223780 100644
--- a/pages/advocates/index.vue
+++ b/pages/advocates/index.vue
@@ -7,7 +7,7 @@