From d2fcf803829fd04e98539d028695a8060b07bc81 Mon Sep 17 00:00:00 2001 From: Patrick Cate Date: Sat, 24 Feb 2024 22:51:56 -0500 Subject: [PATCH 1/5] refactor: move unique id prefix to constant util file This allows it to be used more easily in other components. --- src/utils/constants.js | 1 + src/utils/unique-id.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/utils/constants.js b/src/utils/constants.js index 9be5fcbc..7248e9cd 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -45,3 +45,4 @@ export const DAY_OF_WEEK_ABBREVIATION_LABELS = [ 'S', ] export const YEAR_GROUP = 12 +export const ID_PREFIX = 'vuswds-id-' diff --git a/src/utils/unique-id.js b/src/utils/unique-id.js index 87fb5720..ac568569 100644 --- a/src/utils/unique-id.js +++ b/src/utils/unique-id.js @@ -1,12 +1,12 @@ import { getCurrentInstance } from 'vue' import { kebabCase } from '@/utils/common.js' +import { ID_PREFIX } from '@/utils/constants.js' const idRegistry = {} // Adapted from: // https://github.com/wearebraid/vue-formulate/blob/master/src/Formulate.js export function nextId(componentName = '') { - const idPrefix = 'vuswds-id-' const vm = getCurrentInstance() const route = vm?.appContext?.config?.globalProperties?.$route @@ -17,7 +17,7 @@ export function nextId(componentName = '') { idRegistry[pathPrefix] = 0 } - return `${idPrefix}${pathPrefix}-${kebabCase(componentName)}-${++idRegistry[ + return `${ID_PREFIX}${pathPrefix}-${kebabCase(componentName)}-${++idRegistry[ pathPrefix ]}` } From 6ed0dc87248a5397b1562099b6831c22931cce0c Mon Sep 17 00:00:00 2001 From: Patrick Cate Date: Sat, 24 Feb 2024 23:04:56 -0500 Subject: [PATCH 2/5] fix(useMobileMenu): remove invalid underscores from id and use global id prefix HTML id's should not start with underscores. --- src/components/UsaHeader/UsaHeader.test.js | 4 ++-- src/composables/useMobileMenu.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/UsaHeader/UsaHeader.test.js b/src/components/UsaHeader/UsaHeader.test.js index 2c4a88e8..40c68f7e 100644 --- a/src/components/UsaHeader/UsaHeader.test.js +++ b/src/components/UsaHeader/UsaHeader.test.js @@ -124,12 +124,12 @@ describe('UsaHeader', () => { .should( 'have.attr', 'aria-controls', - '__vuswds-id-global-mobile-header-menu' + 'vuswds-id-global-mobile-header-menu' ) cy.get('nav.usa-nav') .as('nav') - .should('have.id', '__vuswds-id-global-mobile-header-menu') + .should('have.id', 'vuswds-id-global-mobile-header-menu') cy.get('@nav').should('not.have.class', 'is-visible').and('not.be.visible') cy.get('@nav').find('> div.usa-nav__inner').should('not.exist') diff --git a/src/composables/useMobileMenu.js b/src/composables/useMobileMenu.js index 4d0cf9f6..1a0dd029 100644 --- a/src/composables/useMobileMenu.js +++ b/src/composables/useMobileMenu.js @@ -1,9 +1,10 @@ import { ref, readonly } from 'vue' +import { ID_PREFIX } from '@/utils/constants.js' export const isMobileMenuOpen = /*#__PURE__*/ ref(false) -export const menuId = /*#__PURE__*/ ref('__vuswds-id-global-mobile-header-menu') export function useMobileMenu(emit) { + const menuId = ref(`${ID_PREFIX}global-mobile-header-menu`) const mobileMenuOpenClass = 'usa-js-mobile-nav--active' const closeMobileMenu = () => { From 276e96b2524aa7c855c8f11d6037b3b7932841fb Mon Sep 17 00:00:00 2001 From: Patrick Cate Date: Sat, 24 Feb 2024 23:06:11 -0500 Subject: [PATCH 3/5] refactor: emit ref value instead of static boolean --- src/components/UsaNavPrimary/UsaNavPrimary.vue | 1 + src/composables/useMobileMenu.js | 4 ++-- src/composables/useToggle.js | 14 ++++++++------ 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/UsaNavPrimary/UsaNavPrimary.vue b/src/components/UsaNavPrimary/UsaNavPrimary.vue index 853d6396..48e4821d 100644 --- a/src/components/UsaNavPrimary/UsaNavPrimary.vue +++ b/src/components/UsaNavPrimary/UsaNavPrimary.vue @@ -63,6 +63,7 @@ onClickOutside(nav, closeAllItems)