From 9c8a72fc7e99a9845e2a00d7bb783adb09205d47 Mon Sep 17 00:00:00 2001 From: Roman4437 Date: Mon, 21 Aug 2023 22:48:22 +0200 Subject: [PATCH 1/5] va-skip-link --- .../va-skip-link/VaSkipLink.stories.ts | 60 +++++++++++++++++++ .../components/va-skip-link/VaSkipLink.vue | 47 +++++++++++++++ .../va-skip-link/hooks/usePosition.ts | 18 ++++++ .../ui/src/components/va-skip-link/index.ts | 4 ++ .../va-skip-link/tests/VaSkipLink.spec.ts | 11 ++++ 5 files changed, 140 insertions(+) create mode 100644 packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts create mode 100644 packages/ui/src/components/va-skip-link/VaSkipLink.vue create mode 100644 packages/ui/src/components/va-skip-link/hooks/usePosition.ts create mode 100644 packages/ui/src/components/va-skip-link/index.ts create mode 100644 packages/ui/src/components/va-skip-link/tests/VaSkipLink.spec.ts diff --git a/packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts b/packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts new file mode 100644 index 0000000000..9cb0a05f56 --- /dev/null +++ b/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: ` + + [skip link] + +
+ [not target] +
+
+ [target] +
+ `, +}) + +export const PositionTopLeft = () => ({ + components: { VaSkipLink }, + template: ` + + [top-left] + + `, +}) + +export const PositionTopRight = () => ({ + components: { VaSkipLink }, + template: ` + + [top-right] + + `, +}) + +export const PositionBottomLeft = () => ({ + components: { VaSkipLink }, + template: ` + + [bottom-left] + + `, +}) + +export const PositionBottomRight = () => ({ + components: { VaSkipLink }, + template: ` + + [bottom-right] + + `, +}) diff --git a/packages/ui/src/components/va-skip-link/VaSkipLink.vue b/packages/ui/src/components/va-skip-link/VaSkipLink.vue new file mode 100644 index 0000000000..3996f1c816 --- /dev/null +++ b/packages/ui/src/components/va-skip-link/VaSkipLink.vue @@ -0,0 +1,47 @@ + + + + + \ No newline at end of file diff --git a/packages/ui/src/components/va-skip-link/hooks/usePosition.ts b/packages/ui/src/components/va-skip-link/hooks/usePosition.ts new file mode 100644 index 0000000000..067e0b2def --- /dev/null +++ b/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 } +} diff --git a/packages/ui/src/components/va-skip-link/index.ts b/packages/ui/src/components/va-skip-link/index.ts new file mode 100644 index 0000000000..05da7ebc5b --- /dev/null +++ b/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) diff --git a/packages/ui/src/components/va-skip-link/tests/VaSkipLink.spec.ts b/packages/ui/src/components/va-skip-link/tests/VaSkipLink.spec.ts new file mode 100644 index 0000000000..f273b3c2f9 --- /dev/null +++ b/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() + }) +}) From 5c28f4c5cc8e3184fce4a529251b93722aafcef0 Mon Sep 17 00:00:00 2001 From: Roman4437 Date: Wed, 23 Aug 2023 16:02:27 +0200 Subject: [PATCH 2/5] va-skip-link docs --- packages/docs/page-config/navigationRoutes.ts | 4 ++ .../ui-elements/skip-link/api-description.ts | 11 +++++ .../ui-elements/skip-link/api-options.ts | 5 +++ .../skip-link/examples/Default.vue | 10 +++++ .../ui-elements/skip-link/index.ts | 19 ++++++++ packages/nuxt/src/config/components.ts | 1 + packages/ui/src/components/index.ts | 1 + .../va-skip-link/VaSkipLink.stories.ts | 45 ++++++------------- .../components/va-skip-link/VaSkipLink.vue | 2 +- .../va-skip-link/hooks/usePosition.ts | 14 +++--- .../ui/src/services/vue-plugin/components.ts | 1 + 11 files changed, 74 insertions(+), 39 deletions(-) create mode 100644 packages/docs/page-config/ui-elements/skip-link/api-description.ts create mode 100644 packages/docs/page-config/ui-elements/skip-link/api-options.ts create mode 100644 packages/docs/page-config/ui-elements/skip-link/examples/Default.vue create mode 100644 packages/docs/page-config/ui-elements/skip-link/index.ts diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts index 5c0d2f9dad..6813fe55e2 100644 --- a/packages/docs/page-config/navigationRoutes.ts +++ b/packages/docs/page-config/navigationRoutes.ts @@ -342,6 +342,10 @@ export const navigationRoutes: NavigationRoute[] = [ name: "sidebar-item", displayName: "Sidebar Item", }, + { + name: "skip-link", + displayName: "Skip Link", + }, { name: 'stepper', displayName: 'Stepper', diff --git a/packages/docs/page-config/ui-elements/skip-link/api-description.ts b/packages/docs/page-config/ui-elements/skip-link/api-description.ts new file mode 100644 index 0000000000..2e95f0ac75 --- /dev/null +++ b/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.", + } +}); diff --git a/packages/docs/page-config/ui-elements/skip-link/api-options.ts b/packages/docs/page-config/ui-elements/skip-link/api-options.ts new file mode 100644 index 0000000000..c13af8ebf2 --- /dev/null +++ b/packages/docs/page-config/ui-elements/skip-link/api-options.ts @@ -0,0 +1,5 @@ +export default defineManualApi({ + slots: { + default: {}, + }, +}); diff --git a/packages/docs/page-config/ui-elements/skip-link/examples/Default.vue b/packages/docs/page-config/ui-elements/skip-link/examples/Default.vue new file mode 100644 index 0000000000..94de4214a5 --- /dev/null +++ b/packages/docs/page-config/ui-elements/skip-link/examples/Default.vue @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/skip-link/index.ts b/packages/docs/page-config/ui-elements/skip-link/index.ts new file mode 100644 index 0000000000..b4acea3f40 --- /dev/null +++ b/packages/docs/page-config/ui-elements/skip-link/index.ts @@ -0,0 +1,19 @@ +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("Examples"), + + block.example("Default", { + title: "Basic usage", + description: "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("API"), + block.api("VaSkipLink", apiDescription, apiOptions), + ], +}); diff --git a/packages/nuxt/src/config/components.ts b/packages/nuxt/src/config/components.ts index afbb1b11d8..67f14cb9c3 100644 --- a/packages/nuxt/src/config/components.ts +++ b/packages/nuxt/src/config/components.ts @@ -70,6 +70,7 @@ export default [ 'VaSlider', 'VaSkeleton', 'VaSkeletonGroup', + 'VaSkipLink', 'VaSpacer', 'VaSplit', 'VaSwitch', diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index c247b1e0b0..a581733926 100644 --- a/packages/ui/src/components/index.ts +++ b/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' diff --git a/packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts b/packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts index 9cb0a05f56..8ef6cf406e 100644 --- a/packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts +++ b/packages/ui/src/components/va-skip-link/VaSkipLink.stories.ts @@ -1,3 +1,4 @@ +import { VaRadio } from '../va-radio' import { VaSkipLink } from './' export default { @@ -5,7 +6,7 @@ export default { component: VaSkipLink, } -export const Target = () => ({ +export const Default = () => ({ components: { VaSkipLink }, template: ` @@ -23,38 +24,18 @@ export const Target = () => ({ `, }) -export const PositionTopLeft = () => ({ - components: { VaSkipLink }, - template: ` - - [top-left] - - `, -}) - -export const PositionTopRight = () => ({ - components: { VaSkipLink }, - template: ` - - [top-right] - - `, -}) - -export const PositionBottomLeft = () => ({ - components: { VaSkipLink }, - template: ` - - [bottom-left] - - `, -}) +const OPTIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'] -export const PositionBottomRight = () => ({ - components: { VaSkipLink }, +export const Position = () => ({ + components: { VaSkipLink, VaRadio }, + data: () => ({ options: OPTIONS, value: OPTIONS[3] }), template: ` - - [bottom-right] + + [{{ value }}] + `, -}) +}) \ No newline at end of file diff --git a/packages/ui/src/components/va-skip-link/VaSkipLink.vue b/packages/ui/src/components/va-skip-link/VaSkipLink.vue index 3996f1c816..868bec03c7 100644 --- a/packages/ui/src/components/va-skip-link/VaSkipLink.vue +++ b/packages/ui/src/components/va-skip-link/VaSkipLink.vue @@ -16,7 +16,7 @@ import { usePosition } from './hooks/usePosition' export default defineComponent({ name: 'VaSkipLink', props: { - target: { type: String, default: '' }, + target: { type: String, default: undefined }, position: { type: String as PropType<'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>, default: 'bottom-right', diff --git a/packages/ui/src/components/va-skip-link/hooks/usePosition.ts b/packages/ui/src/components/va-skip-link/hooks/usePosition.ts index 067e0b2def..88001bd736 100644 --- a/packages/ui/src/components/va-skip-link/hooks/usePosition.ts +++ b/packages/ui/src/components/va-skip-link/hooks/usePosition.ts @@ -1,7 +1,11 @@ -export const usePosition = (props: { +import { computed } from "vue" + +interface SkipLinkProps { position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' -}) => { - const getPosition = () => { +} + +export const usePosition = (props: SkipLinkProps) => { + const position = computed(() => { const positionMap = { 'top-right': { top: '1rem', right: '1rem' }, 'top-left': { top: '1rem', left: '1rem' }, @@ -10,9 +14,7 @@ export const usePosition = (props: { } return positionMap[props.position] - } - - const position = getPosition() + }) return { position } } diff --git a/packages/ui/src/services/vue-plugin/components.ts b/packages/ui/src/services/vue-plugin/components.ts index dd9113928a..b97ddd8e62 100644 --- a/packages/ui/src/services/vue-plugin/components.ts +++ b/packages/ui/src/services/vue-plugin/components.ts @@ -65,6 +65,7 @@ export { VaSeparator, VaSkeleton, VaSkeletonGroup, + VaSkipLink, VaSidebar, VaSidebarItem, VaSidebarItemContent, From 327a3198370aaeee526e417e926598cdc95c0cfa Mon Sep 17 00:00:00 2001 From: Roman4437 Date: Sat, 26 Aug 2023 17:07:32 +0200 Subject: [PATCH 3/5] va-skip-link fix --- packages/docs/page-config/navigationRoutes.ts | 3 +++ .../skip-link/examples/Default.vue | 10 -------- .../ui-elements/skip-link/index.ts | 11 +++++---- .../pages/[page-config-category]/[page].vue | 23 +++++++++++++++++++ 4 files changed, 32 insertions(+), 15 deletions(-) delete mode 100644 packages/docs/page-config/ui-elements/skip-link/examples/Default.vue diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts index 6813fe55e2..792cceb004 100644 --- a/packages/docs/page-config/navigationRoutes.ts +++ b/packages/docs/page-config/navigationRoutes.ts @@ -345,6 +345,9 @@ export const navigationRoutes: NavigationRoute[] = [ { name: "skip-link", displayName: "Skip Link", + meta: { + badge: navigationBadge.new('1.7.6'), + } }, { name: 'stepper', diff --git a/packages/docs/page-config/ui-elements/skip-link/examples/Default.vue b/packages/docs/page-config/ui-elements/skip-link/examples/Default.vue deleted file mode 100644 index 94de4214a5..0000000000 --- a/packages/docs/page-config/ui-elements/skip-link/examples/Default.vue +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/skip-link/index.ts b/packages/docs/page-config/ui-elements/skip-link/index.ts index b4acea3f40..5bee984785 100644 --- a/packages/docs/page-config/ui-elements/skip-link/index.ts +++ b/packages/docs/page-config/ui-elements/skip-link/index.ts @@ -6,12 +6,13 @@ export default definePageConfig({ block.title("Skip Link"), block.paragraph("`va-skip-link` skip to the target component."), - block.subtitle("Examples"), + block.subtitle("Basic usage"), - block.example("Default", { - title: "Basic usage", - description: "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.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), diff --git a/packages/docs/pages/[page-config-category]/[page].vue b/packages/docs/pages/[page-config-category]/[page].vue index a7dd4e922a..b3c515f0f2 100644 --- a/packages/docs/pages/[page-config-category]/[page].vue +++ b/packages/docs/pages/[page-config-category]/[page].vue @@ -1,5 +1,13 @@