refactor: create refParity composable

packages/portal/src/components/landing/LandingContentCardGroup.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    :ref="refName"
+    ref="landingContentCardGroup"
     class="landing-content-card-group"
-    :class="[variant, parityClasses]"
+    :class="[variant, `landing-content-card-group-${parity}`]"
     data-qa="landing content card group"
   >
     <b-container>
@@ -15,7 +15,8 @@
 </template>
 
 <script>
-  import parityMixin from '@/mixins/parity.js';
+  import { ref } from 'vue';
+  import useRefParity from '@/composables/refParity.js';
   import ContentCardSection from '../content/ContentCardSection';
 
   export default {
@@ -25,8 +26,6 @@
       ContentCardSection
     },
 
-    mixins: [parityMixin],
-
     props: {
       /**
        * Section with content card group contents
@@ -52,16 +51,20 @@
       }
     },
 
+    setup(props) {
+      const landingContentCardGroup = ref(null);
+      if (props.variant === 'ds4ch') {
+        const { parity } = useRefParity('landing-content-card-group', landingContentCardGroup);
+        return { parity, landingContentCardGroup };
+      } else {
+        return { parity: null, landingContentCardGroup };
+      }
+    },
+
     data() {
       return {
-        refName: 'landingContentCardGroup'
+        refName: ''
       };
-    },
-
-    mounted() {
-      if (this.variant === 'ds4ch') {
-        this.$nextTick(() => this.markParity('landing-content-card-group', this.refName));
-      }
     }
   };
 </script>

packages/portal/src/components/landing/LandingImageCard.vue

@@ -2,7 +2,7 @@
   <div
     ref="imagecard"
     class="image-card d-lg-flex justify-content-center"
-    :class="[variant, cardClasses, parityClasses]"
+    :class="[variant, cardClasses, `image-card-${parity}`]"
   >
     <div
       v-if="cardImageWithAttribution && cardImageWithAttribution.image"
@@ -53,7 +53,8 @@
 </template>
 
 <script>
-  import parityMixin from '@/mixins/parity.js';
+  import { ref } from 'vue';
+  import useRefParity from '@/composables/refParity.js';
   import parseMarkdownHtmlMixin from '@/mixins/parseMarkdownHtml';
 
   const SRCSET_PRESETS = {
@@ -102,7 +103,6 @@
     },
 
     mixins: [
-      parityMixin,
       parseMarkdownHtmlMixin
     ],
 
@@ -131,6 +131,12 @@
       }
     },
 
+    setup() {
+      const imagecard = ref(null);
+      const { parity } = useRefParity('image-card', imagecard);
+      return { parity, imagecard };
+    },
+
     data() {
       return {
         cardClasses: this.card?.profile?.background ? `bg-color-${this.card.profile.background}` : '',
@@ -139,10 +145,6 @@
         sizesPresets: this.variant === 'ds4ch' ? SIZES_PRESETS_DS4CH : SIZES_PRESETS,
         srcSetPresets: this.variant === 'ds4ch' ? SRCSET_PRESETS_DS4CH : SRCSET_PRESETS
       };
-    },
-
-    mounted() {
-      this.$nextTick(() => this.markParity('image-card', 'imagecard'));
     }
   };
   </script>

packages/portal/src/composables/refParity.js

@@ -0,0 +1,23 @@
+import { onMounted, readonly, ref, nextTick } from 'vue';
+
+/**
+ * Identifies whether the supplied elementRef is an odd or even occurence of
+ * the supplied className in the DOM, and stores that in the returned ref
+ * `parity` as "odd" or "even".
+ */
+export default function useRefParity(className, elementRef) {
+  const parity = ref(null);
+
+  onMounted(() => {
+    nextTick(() => {
+      const elements = Array.from(document.getElementsByClassName(className));
+      const index = elements.indexOf(elementRef.value);
+      const num = index + 1;
+      parity.value = ((num % 2) === 1) ? 'odd' : 'even';
+    });
+  });
+
+  return {
+    parity: readonly(parity)
+  };
+}

packages/portal/tests/unit/mixins/parity.spec.js → packages/portal/tests/unit/composables/parityRef.spec.js

@@ -1,19 +1,33 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { ref } from 'vue';
+import { createLocalVue, mount } from '@vue/test-utils';
 
-import mixin from '@/mixins/parity';
+import useRefParity from '@/composables/refParity.js';
 
-const component = {
+const consumerComponent = {
+  template: `
+    <span class="target" :class="\`target-\${parity}\`" ref="target" />
+  `,
+  setup() {
+    const target = ref(null);
+    const { parity } = useRefParity('target', target);
+    return { parity, target };
+  }
+};
+
+const parentComponent = {
   template: `
     <div>
-      <span id="target1" class="target" :class="parityClasses" ref="target1" />
-      <span id="target2" class="target" :class="parityClasses" ref="target2" />
-      <span id="target3" class="target" :class="parityClasses" ref="target3" />
+      <consumerComponent id="target1" />
+      <consumerComponent id="target2" />
+      <consumerComponent id="target3" />
     </div>
   `,
-  mixins: [mixin]
+  components: {
+    consumerComponent
+  }
 };
 
-const factory = () => shallowMount(component, {
+const factory = () => mount(parentComponent, {
   attachTo: document.body,
   localVue: createLocalVue()
 });
@@ -24,9 +38,6 @@ describe('mixins/parity', () => {
       it('adds parity classes to indicate odd/even', async() => {
         const wrapper = factory();
 
-        wrapper.vm.markParity('target', 'target1');
-        wrapper.vm.markParity('target', 'target2');
-        wrapper.vm.markParity('target', 'target3');
         await new Promise(process.nextTick);
 
         expect(wrapper.find('#target1').classes().includes('target-odd')).toBe(true);