va-skip-link

packages/docs/page-config/navigationRoutes.ts

@@ -342,6 +342,13 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "sidebar-item",
         displayName: "Sidebar Item",
       },
+      {
+        name: "skip-link",
+        displayName: "Skip Link",
+        meta: {
+          badge: navigationBadge.new('1.7.6'),
+        }
+      },
       {
         name: 'stepper',
         displayName: 'Stepper',

packages/docs/page-config/ui-elements/skip-link/api-description.ts

@@ -0,0 +1,11 @@
+import { defineApiDescription } from "~/modules/page-config/runtime";
+
+export default defineApiDescription({
+  props: {
+    target: "Selector to the target component.",
+    position: "Position on the page.",
+  },
+  slots: {
+    default: "Skip link content slot.",
+  }
+});

packages/docs/page-config/ui-elements/skip-link/api-options.ts

@@ -0,0 +1,5 @@
+export default defineManualApi({
+  slots: {
+    default: {},
+  },
+});

packages/docs/page-config/ui-elements/skip-link/index.ts

@@ -0,0 +1,20 @@
+import apiOptions from "./api-options";
+import apiDescription from './api-description';
+
+export default definePageConfig({
+  blocks: [
+    block.title("Skip Link"),
+    block.paragraph("`va-skip-link` skip to the target component."),
+
+    block.subtitle("Basic usage"),
+
+    block.paragraph("By default, `va-skip-link` needs a target and position, please keep in mind that the component should be placed as the very first element."),
+
+    block.subtitle("Example"),
+
+    block.paragraph("To test this component - click `Esc`, then press `Tab` and you should be able to see a button that would get you straight to content on `Enter`."),
+
+    block.subtitle("API"),
+    block.api("VaSkipLink", apiDescription, apiOptions),
+  ],
+});

packages/docs/pages/[page-config-category]/[page].vue

@@ -1,5 +1,13 @@
 <template>
   <div class="page-config">
+    <va-skip-link 
+      v-if="$route.path === '/ui-elements/skip-link'"
+      class="skip-link"
+      position="bottom-right"
+      target="#api"
+    >
+      Jump to API
+    </va-skip-link>
     <PageConfig
       v-if="!isLoading && config"
       :page-config="config"
@@ -77,4 +85,19 @@ watchEffect(() => {
     }
   }
 }
+
+.skip-link {
+  padding: 0.5rem;
+  border-radius: 2px;
+  outline: none;
+  color: white;
+  background-color: rgb(72, 72, 198);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
+  &:hover {
+    background-color: rgb(94, 94, 222);
+  }
+}
 </style>

packages/nuxt/src/config/components.ts

@@ -70,6 +70,7 @@ export default [
   'VaSlider',
   'VaSkeleton',
   'VaSkeletonGroup',
+  'VaSkipLink',
   'VaSpacer',
   'VaSplit',
   'VaSwitch',

packages/ui/package.json

@@ -38,7 +38,7 @@
     "push-production": "npm publish --tag=latest",
     "precommit": "lint-staged --concurrent=false && yarn test:unit --run",
     "server:webapp": "npx http-server dist --push-state",
-    "serve:storybook": "storybook dev -p 6006",
+    "serve:storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
     "start:storybook": "serve storybook-static",
     "chromatic": "npx chromatic --build-script-name=build:storybook --project-token=chpt_0b6e7d8b20a17cf"
@@ -188,4 +188,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/index.ts

@@ -64,6 +64,7 @@ export * from './va-rating'
 export * from './va-select'
 export * from './va-separator'
 export * from './va-skeleton'
+export * from './va-skip-link'
 export * from './va-sidebar'
 export * from './va-slider'
 export * from './va-spacer'

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

@@ -0,0 +1,53 @@
+import { within } from '@storybook/testing-library'
+import { VaRadio } from '../va-radio'
+import { VaSkipLink } from './'
+import { expect } from '@storybook/jest'
+
+export default {
+  title: 'VaSkipLink',
+  component: VaSkipLink,
+}
+
+export const Default = () => ({
+  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>
+  `,
+})
+
+const OPTIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+
+export const Position = () => ({
+  components: { VaSkipLink, VaRadio },
+  data: () => ({ options: OPTIONS, value: OPTIONS[3] }),
+  template: `
+    <va-skip-link 
+      target="#target"
+      :position="value"
+    >
+      [{{ value }}]
+    </va-skip-link>
+    <va-radio v-model="value" :options="options"/>
+  `,
+})
+
+Position.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement)
+  const skipLink = canvas.getByRole('link', { name: '[bottom-right]' }) as HTMLElement
+
+  await step('Visible on focus', async () => {
+    skipLink.focus()
+    expect(skipLink.style.opacity).not.toEqual(0)
+  })
+}

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: undefined },
+    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,20 @@
+import { computed } from "vue"
+
+interface SkipLinkProps {
+  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+}
+
+export const usePosition = (props: SkipLinkProps) => {
+  const position = computed(() => {
+    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]
+  })
+
+  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()
+  })
+})

packages/ui/src/services/vue-plugin/components.ts

@@ -65,6 +65,7 @@ export {
   VaSeparator,
   VaSkeleton,
   VaSkeletonGroup,
+  VaSkipLink,
   VaSidebar,
   VaSidebarItem,
   VaSidebarItemContent,