va-skip-link

packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts

@@ -0,0 +1,60 @@
+import { VaSkipLink } from './'
+
+export default {
+  title: 'VaSkipLink',
+  component: VaSkipLink,
+}
+
+export const Target = () => ({
+  components: { VaSkipLink },
+  template: `
+    <va-skip-link target="#target">
+      [skip link]
+    </va-skip-link>
+    <div :style="{ height: '100dvh' }">
+      [not target]
+    </div>
+    <div 
+      id="target" 
+      :style="{ height: '100dvh' }"
+    >
+      [target]
+    </div>
+  `,
+})
+
+export const PositionTopLeft = () => ({
+  components: { VaSkipLink },
+  template: `
+    <va-skip-link position="top-left">
+      [top-left]
+    </va-skip-link>
+  `,
+})
+
+export const PositionTopRight = () => ({
+  components: { VaSkipLink },
+  template: `
+    <va-skip-link position="top-right">
+      [top-right]
+    </va-skip-link>
+  `,
+})
+
+export const PositionBottomLeft = () => ({
+  components: { VaSkipLink },
+  template: `
+    <va-skip-link position="bottom-left">
+      [bottom-left]
+    </va-skip-link>
+  `,
+})
+
+export const PositionBottomRight = () => ({
+  components: { VaSkipLink },
+  template: `
+    <va-skip-link position="bottom-right">
+      [bottom-right]
+    </va-skip-link>
+  `,
+})

packages/ui/src/components/va-skip-link/VaSkipLink.vue

@@ -0,0 +1,47 @@
+<template>
+  <a
+    class="va-skip-link"
+    role="link"
+    :href="target"
+    :style="position"
+  >
+    <slot />
+</a>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue'
+import { usePosition } from './hooks/usePosition'
+
+export default defineComponent({
+  name: 'VaSkipLink',
+  props: {
+    target: { type: String, default: '' },
+    position: {
+      type: String as PropType<'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>,
+      default: 'bottom-right',
+      validator: (v: string) => ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes(v),
+    },
+  },
+
+  setup (props) {
+    const { position } = usePosition(props)
+
+    return { position }
+  },
+})
+</script>
+
+<style lang="scss">
+.va-skip-link {
+  display: flex;
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+
+  &:focus {
+    opacity: 1;
+    pointer-events: inherit;
+  }
+}
+</style>

packages/ui/src/components/va-skip-link/hooks/usePosition.ts

@@ -0,0 +1,18 @@
+export const usePosition = (props: {
+  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+}) => {
+  const getPosition = () => {
+    const positionMap = {
+      'top-right': { top: '1rem', right: '1rem' },
+      'top-left': { top: '1rem', left: '1rem' },
+      'bottom-right': { bottom: '1rem', right: '1rem' },
+      'bottom-left': { bottom: '1rem', left: '1rem' },
+    }
+
+    return positionMap[props.position]
+  }
+
+  const position = getPosition()
+
+  return { position }
+}

packages/ui/src/components/va-skip-link/index.ts

@@ -0,0 +1,4 @@
+import withConfigTransport from '../../services/config-transport/withConfigTransport'
+import _VaSkipLink from './VaSkipLink.vue'
+
+export const VaSkipLink = withConfigTransport(_VaSkipLink)

packages/ui/src/components/va-skip-link/tests/VaSkipLink.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mountWithGlobalConfig } from '../../../utils/unit-test-utils'
+
+import VaSkipLink from '../VaSkipLink.vue'
+
+describe('VaSkipLink', () => {
+  it('should render without an error', () => {
+    const wrapper = mountWithGlobalConfig(VaSkipLink)
+    expect(wrapper.exists()).toBeTruthy()
+  })
+})