feat(UsaSkipnav): add default slot content

patrickcate · Feb 2, 2022 · 6bbc099 · 6bbc099
1 parent 1ca165b
commit 6bbc099
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/components/UsaSkipnav/UsaSkipnav.test.js b/src/components/UsaSkipnav/UsaSkipnav.test.js
@@ -8,14 +8,11 @@ describe('UsaSkipnav', () => {
       props: {
         anchor: '#main-content',
       },
-      slots: {
-        default: () => 'Test skip link',
-      },
     })
 
     cy.get('.usa-skipnav')
       .as('skiplink')
-      .should('contain', 'Test skip link')
+      .should('contain', 'Skip to main content')
       .and('have.class', 'usa-skipnav')
       .and('have.attr', 'href')
       .and('contain', '#main-content')
@@ -42,6 +39,19 @@ describe('UsaSkipnav', () => {
       .and('have.css', 'top', '-60.8px')
   })
 
+  it('uses custom slot content', () => {
+    mount(UsaSkipnav, {
+      props: {
+        anchor: '#main-content',
+      },
+      slots: {
+        default: () => 'Test skip link',
+      },
+    })
+
+    cy.get('.usa-skipnav').should('contain', 'Test skip link')
+  })
+
   it('warns in console about invalid anchor prop value', () => {
     cy.stub(window.console, 'warn').as('consoleWarn')
 

diff --git a/src/components/UsaSkipnav/UsaSkipnav.vue b/src/components/UsaSkipnav/UsaSkipnav.vue
@@ -21,5 +21,7 @@ defineProps({
 </script>
 
 <template>
-  <BaseLink :href="anchor" class="usa-skipnav"><slot></slot></BaseLink>
+  <BaseLink :href="anchor" class="usa-skipnav"
+    ><slot>Skip to main content</slot></BaseLink
+  >
 </template>