refactor(visually-hidden): ts to sfc

packages/package-build/visually-hidden/README.md

@@ -1,14 +1,14 @@
 # Visually Hidden
-Visually hidden component for hiding elements from the visual display, but still available to screen readers.
+Hides content from the screen in an accessible way.
 
-<span><a href="https://www.npmjs.com/package/@oku-ui/visually-hidden "><img src="https://img.shields.io/npm/v/@oku-ui/visually-hidden?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/visually-hidden"> <img src="https://img.shields.io/npm/dm/@oku-ui/visually-hidden?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/visually-hidden"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+![@oku-ui/visually-hidden](./../../../.github/assets/og/oku-visually-hidden.jpg)
+
+[![Version](https://img.shields.io/npm/v/@oku-ui/visually-hidden?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/visually-hidden) [![Downloads](https://img.shields.io/npm/dm/@oku-ui/visually-hidden?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/visually-hidden)
 
 ## Installation
 
 ```sh
 $ pnpm add @oku-ui/visually-hidden
 ```
 
-## Usage
-
-soon docs
+[Documentation](https://oku-ui.com/primitives/components/visually-hidden)

packages/vue/src/visually-hidden/VisuallyHidden.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@oku-ui/primitive'
+
+export interface VisuallyHiddenProps extends PrimitiveProps { }
+</script>
+
+<script setup lang="ts">
+import { defineOptions } from 'vue'
+import { useComponentRef } from '@oku-ui/use-composable'
+import { Primitive } from '@oku-ui/primitive'
+
+defineOptions({
+  name: 'OkuVisuallyHidden',
+})
+
+const props = withDefaults(defineProps<VisuallyHiddenProps>(), {
+  is: 'span',
+})
+
+const { componentRef } = useComponentRef<HTMLSpanElement | null>()
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    ref="componentRef"
+    :style="{
+      // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+      position: 'absolute',
+      border: '0px',
+      width: '1px',
+      height: '1px',
+      padding: '0px',
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0px, 0px, 0px, 0px)',
+      whiteSpace: 'nowrap',
+      wordWrap: 'normal',
+      ...$attrs.style as any,
+    }"
+  >
+    <slot />
+  </Primitive>
+</template>

packages/vue/src/visually-hidden/index.ts

@@ -1 +1 @@
-export * from './VisuallyHidden'
+export { default as OkuVisuallyHidden } from './VisuallyHidden.vue'

packages/vue/src/visually-hidden/stories/Basic.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { OkuVisuallyHidden } from '@oku-ui/visually-hidden'
+</script>
+
+<template>
+  <button>
+    <OkuVisuallyHidden>Save the file</OkuVisuallyHidden>
+    <span :aria-hidden="true">💾</span>
+  </button>
+</template>

packages/vue/src/visually-hidden/stories/VisuallyHidden.stories.ts

@@ -1,22 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+
 import type { IVisuallyHiddenProps } from './VisuallyHiddenDemo.vue'
-import OkuVisuallyHiddenComponent from './VisuallyHiddenDemo.vue'
+import OkuVisuallyHidden from './VisuallyHiddenDemo.vue'
 
-interface StoryProps extends IVisuallyHiddenProps {}
+interface StoryProps extends IVisuallyHiddenProps { }
 
 const meta = {
-  title: 'Utilities/VisuallyHidden',
-  component: OkuVisuallyHiddenComponent,
+  title: 'utilities/visuallyHidden',
+  component: OkuVisuallyHidden,
   args: {
-    template: '#1',
-  },
-  argTypes: {
-    template: {
-      control: 'text',
-    },
+    template: 'Basic',
   },
-
-} satisfies Meta<typeof OkuVisuallyHiddenComponent> & {
+} satisfies Meta<typeof OkuVisuallyHidden> & {
   args: StoryProps
 }
 
@@ -25,19 +20,17 @@ type Story = StoryObj<typeof meta> & {
   args: StoryProps
 }
 
-export const Styled: Story = {
+export const Basic: Story = {
   args: {
-    template: '#1',
-    // allshow: true,
+    template: 'Basic',
   },
-
-  render: (args: any) => ({
-    components: { OkuVisuallyHiddenComponent },
+  render: args => ({
+    components: { OkuVisuallyHidden },
     setup() {
       return { args }
     },
     template: `
-      <OkuVisuallyHiddenComponent v-bind="args" />
+      <OkuVisuallyHidden v-bind="args" />
     `,
   }),
 }

packages/vue/src/visually-hidden/stories/VisuallyHiddenDemo.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import type { VisuallyHiddenProps } from '@oku-ui/visually-hidden'
-import { OkuVisuallyHidden } from '@oku-ui/visually-hidden'
+import Basic from './Basic.vue'
 
-export interface IVisuallyHiddenProps extends VisuallyHiddenProps {
-  template?: '#1'
+withDefaults(defineProps<IVisuallyHiddenProps>(), {})
+
+export interface IVisuallyHiddenProps {
+  template?: 'Basic'
   allshow?: boolean
 }
-
-defineProps<IVisuallyHiddenProps>()
 </script>
 
 <template>
-  <button class="bg-gray-200 w-10 h-10">
-    <OkuVisuallyHidden>Save the file</OkuVisuallyHidden>
-    <span aria-hidden>💾</span>
-  </button>
+  <Basic v-if="template === 'Basic' || allshow" />
 </template>

packages/vue/src/visually-hidden/tests/__snapshots__/visually-hidden.test.ts.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`okuVisuallyHidden > should render OkuVisuallyHidden correctly 1`] = `"<span style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"></span>"`;
+
+exports[`okuVisuallyHidden Stories > basic > should render correctly 1`] = `"<button><span style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;">Save the file</span><span aria-hidden="true">💾</span></button>"`;

packages/vue/src/visually-hidden/tests/visually-hidden.test.ts

@@ -1,61 +1,98 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
 import { h } from 'vue'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { axe } from 'vitest-axe'
+
 import { OkuVisuallyHidden } from '../'
 
+import Basic from '../stories/Basic.vue'
+
+enableAutoUnmount(afterEach)
+
 describe('okuVisuallyHidden', () => {
-  it('renders correctly with default props', () => {
-    const wrapper = mount({
+  let wrapper: VueWrapper
+
+  beforeEach(() => {
+    wrapper = mount(OkuVisuallyHidden)
+  })
+
+  it('should render OkuVisuallyHidden correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  /**
+   * @vitest-environment jsdom
+   */
+  it('should have no accessibility violations', async () => {
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
+  it('should render as a span element', () => {
+    wrapper = mount(OkuVisuallyHidden, {
+      attachTo: document.body,
+    })
+
+    expect(wrapper.element.tagName).toBe('SPAN')
+  })
+
+  it('should have the default style', () => {
+    wrapper = mount({
       setup() {
         return () => h(OkuVisuallyHidden)
       },
     })
-    expect(wrapper.exists()).toBe(true)
-    expect(wrapper.element.tagName.toLowerCase()).toBe('span')
 
-    const style = wrapper.element.getAttribute('style')
-    expect(style).toBe(
+    expect(wrapper.attributes('style')).toBe(
       'position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;',
     )
-
-    expect(wrapper.vm.$el).toBeDefined()
-    expect(wrapper.vm.$el.tagName.toLowerCase()).toBe('span')
   })
+})
 
-  it('applies ref correctly', () => {
-    const wrapper = mount({
-      setup() {
-        return () => h(OkuVisuallyHidden)
-      },
+describe('okuVisuallyHidden Stories', () => {
+  describe('basic', () => {
+    let wrapper: VueWrapper<InstanceType<typeof Basic>>
+    const TEXT_CHILD = 'Save the file'
+
+    beforeEach(async () => {
+      wrapper = mount(Basic, {
+        attachTo: document.body,
+      })
     })
 
-    expect(wrapper.vm.$el).toBeDefined()
-    expect(wrapper.vm.$el.tagName.toLowerCase()).toBe('span')
-  })
+    /**
+     * @vitest-environment jsdom
+     */
+    it('should have no accessibility violations', async () => {
+      expect(await axe(wrapper.element)).toHaveNoViolations()
+    })
 
-  it('renders correctly with custom style', () => {
-    const style = {
-      background: 'red',
-      color: 'white',
-    }
+    it('should render correctly', () => {
+      expect(wrapper.html()).toMatchSnapshot()
+    })
 
-    const wrapper = mount({
-      setup() {
-        return () => h(OkuVisuallyHidden)
-      },
-    }, {
-      attrs: {
-        style,
-      },
+    it('should render OkuVisuallyHidden correctly', () => {
+      expect(wrapper.findComponent(OkuVisuallyHidden).exists()).toBe(true)
+    })
+
+    it('should render OkuVisuallyHidden as a span element', () => {
+      expect(wrapper.findComponent(OkuVisuallyHidden).element.tagName).toBe('SPAN')
+    })
+
+    it('should have default style for OkuVisuallyHidden', () => {
+      expect(wrapper.findComponent(OkuVisuallyHidden).attributes('style')).toBe(
+        'position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;',
+      )
+    })
+
+    it('should render text inside OkuVisuallyHidden', () => {
+      expect(wrapper.findComponent(OkuVisuallyHidden).text()).toBe(TEXT_CHILD)
     })
 
-    const inlineStyle = wrapper.element.getAttribute('style')
-    expect(inlineStyle).toContain('position: absolute;')
-    expect(inlineStyle).toContain('border: 0px;')
-    expect(inlineStyle).toContain('overflow: hidden;')
-    expect(inlineStyle).toContain('white-space: nowrap;')
-    expect(inlineStyle).toContain('word-wrap: normal;')
-    expect(inlineStyle).toContain('background: red;')
-    expect(inlineStyle).toContain('color: white;')
+    it('should have correct attributes for the second span', () => {
+      expect(wrapper.findAll('span')[1].exists()).toBe(true)
+      expect(wrapper.findAll('span')[1].element.tagName).toBe('SPAN')
+      expect(wrapper.findAll('span')[1].attributes('aria-hidden')).toBe('true')
+    })
   })
 })