refactor(aspect-ratio): ts to sfc (oku-ui#497)

* refactor: visually-hidden ts to sfc * Refactor VisuallyHidden.vue component to use useComponentRef * refactor: aspect-ratio * refactor: export AspectRatioProps * refactor: add inheritAttrs option * fix: typo * chore: update snapshots
binaryfire · Jan 14, 2024 · d30d4de · d30d4de
1 parent ce6ffcb
commit d30d4de
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 121 deletions.
diff --git a/packages/vue/src/aspect-ratio/AspectRatio.vue b/packages/vue/src/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+import type { PrimitiveProps } from '@oku-ui/primitive'
+
+export interface AspectRatioProps extends PrimitiveProps {
+  ratio?: number
+}
+</script>
+
+<script setup lang="ts">
+import { defineOptions } from 'vue'
+import { useComponentRef } from '@oku-ui/use-composable'
+import { Primitive } from '@oku-ui/primitive'
+
+defineOptions({
+  name: 'OkuAspectRatio',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<AspectRatioProps>(), {
+  ratio: 1 / 1,
+})
+
+const { componentRef } = useComponentRef<HTMLDivElement | null>()
+</script>
+
+<template>
+  <div
+    :style="{
+      // ensures inner element is contained
+      position: 'relative',
+      // ensures padding bottom trick maths works
+      width: '100%',
+      paddingBottom: `${100 / props.ratio}%`,
+    }"
+    data-oku-aspect-ratio-wrapper=""
+  >
+    <Primitive
+      is="div"
+      v-bind="$attrs"
+      ref="componentRef"
+      :style="{
+        ...$attrs.style as any,
+        // ensures children expand in ratio
+        position: 'absolute',
+        top: '0px',
+        right: '0px',
+        left: '0px',
+        bottom: '0px',
+      }"
+    >
+      <slot />
+    </Primitive>
+  </div>
+</template>
diff --git a/packages/vue/src/aspect-ratio/aspect-ratio.ts b/packages/vue/src/aspect-ratio/aspect-ratio.ts
diff --git a/packages/vue/src/aspect-ratio/index.ts b/packages/vue/src/aspect-ratio/index.ts
@@ -1,7 +1,4 @@
-export { OkuAspectRatio } from './aspect-ratio'
-
-export type {
-  AspectRatioProps,
-  AspectRatioElement,
-  AspectRatioNativeElement,
-} from './props'
+export {
+  default as OkuAspectRatio,
+  type AspectRatioProps,
+} from './AspectRatio.vue'
diff --git a/packages/vue/src/aspect-ratio/props.ts b/packages/vue/src/aspect-ratio/props.ts
diff --git a/packages/vue/src/aspect-ratio/stories/AspectRatio.stories.ts b/packages/vue/src/aspect-ratio/stories/AspectRatio.stories.ts
@@ -24,7 +24,7 @@ export const Styled: Story = {
   args: {
     template: 'Styled',
   },
-  render: (args: any) => ({
+  render: args => ({
     components: { OkuAspectRatio },
     setup() {
       return { args }
@@ -39,7 +39,7 @@ export const CustomRatios: Story = {
   args: {
     template: 'CustomRatios',
   },
-  render: (args: any) => ({
+  render: args => ({
     components: { OkuAspectRatio },
     setup() {
       return { args }
@@ -54,7 +54,7 @@ export const Chromatic: Story = {
   args: {
     template: 'Chromatic',
   },
-  render: (args: any) => ({
+  render: args => ({
     components: { OkuAspectRatio },
     setup() {
       return { args }

diff --git a/packages/vue/src/aspect-ratio/stories/AspectRatioDemo.vue b/packages/vue/src/aspect-ratio/stories/AspectRatioDemo.vue
@@ -12,19 +12,11 @@ export interface IAspectRatioProps {
 </script>
 
 <template>
-  <div>
-    <template v-if="template === 'Styled' || allshow">
-      <Styled />
-    </template>
+  <Styled v-if="template === 'Styled' || allshow" />
 
-    <template v-if="template === 'CustomRatios' || allshow">
-      <CustomRatios />
-    </template>
+  <CustomRatios v-if="template === 'CustomRatios' || allshow" />
 
-    <template v-if="template === 'Chromatic' || allshow">
-      <Chromatic />
-    </template>
-  </div>
+  <Chromatic v-if="template === 'Chromatic' || allshow" />
 </template>
 
 <style>

diff --git a/packages/vue/src/aspect-ratio/tests/__snapshots__/aspect-ratio.test.ts.snap b/packages/vue/src/aspect-ratio/tests/__snapshots__/aspect-ratio.test.ts.snap
@@ -2,53 +2,77 @@
 
 exports[`okuAspectRatio > should render OkuAspectRatio correctly 1`] = `
 "<div style="width: 500px;">
-  <oku-aspect-ratio-stub ratio="0.5" aschild="false"></oku-aspect-ratio-stub>
+  <div style="position: relative; width: 100%; padding-bottom: 200%;" data-oku-aspect-ratio-wrapper="">
+    <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><span>Hello</span></div>
+  </div>
 </div>"
 `;
 
-exports[`okuAspectRatio > should render OkuAspectRatio correctly 2`] = `"<primitivediv-stub aschild="false" style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"></primitivediv-stub>"`;
-
 exports[`okuAspectRatio Stories > chromatic > should render correctly 1`] = `
 "<h1>Default ratio</h1>
 <div style="width: 300px;">
-  <oku-aspect-ratio-stub ratio="1" aschild="false" class="aspect-ratio"></oku-aspect-ratio-stub>
+  <div style="position: relative; width: 100%; padding-bottom: 100%;" data-oku-aspect-ratio-wrapper="">
+    <div class="aspect-ratio" style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;">
+      <p>Default ratio (1/1)</p>
+    </div>
+  </div>
 </div>
 <h1>Custom ratios</h1>
 <div style="display: flex; gap: 20px;">
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="0.5" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 200%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="1" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 100%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="1.7777777777777777" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 56.25%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="2" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 50%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
 </div>"
 `;
 
 exports[`okuAspectRatio Stories > customRatios > should render correctly 1`] = `
 "<div style="display: flex; gap: 20px;">
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="0.5" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 200%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="1" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 100%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="1.7777777777777777" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 56.25%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
   <div style="width: 200px;">
-    <oku-aspect-ratio-stub ratio="2" aschild="false"></oku-aspect-ratio-stub>
+    <div style="position: relative; width: 100%; padding-bottom: 50%;" data-oku-aspect-ratio-wrapper="">
+      <div style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"><img src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&amp;auto=format&amp;fit=crop&amp;w=400&amp;q=80" alt="A house in a forest" style="object-fit: cover; width: 100%; height: 100%;"></div>
+    </div>
   </div>
 </div>"
 `;
 
 exports[`okuAspectRatio Stories > styled > should render correctly 1`] = `
 "<div style="width: 500px;">
-  <oku-aspect-ratio-stub ratio="1" aschild="false" class="aspect-ratio"></oku-aspect-ratio-stub>
+  <div style="position: relative; width: 100%; padding-bottom: 100%;" data-oku-aspect-ratio-wrapper="">
+    <div class="aspect-ratio" style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;">
+      <h1>Default ratio (1/1)</h1>
+    </div>
+  </div>
 </div>"
 `;
diff --git a/packages/vue/src/aspect-ratio/tests/aspect-ratio.test.ts b/packages/vue/src/aspect-ratio/tests/aspect-ratio.test.ts
@@ -1,4 +1,4 @@
-import { enableAutoUnmount, shallowMount } from '@vue/test-utils'
+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'
@@ -17,7 +17,7 @@ describe('okuAspectRatio', () => {
   let wrapper: VueWrapper
 
   beforeEach(() => {
-    wrapper = shallowMount({
+    wrapper = mount({
       components: {
         OkuAspectRatio,
       },
@@ -40,8 +40,6 @@ describe('okuAspectRatio', () => {
 
   it('should render OkuAspectRatio correctly', () => {
     expect(wrapper.html()).toMatchSnapshot()
-
-    expect(shallowMount(OkuAspectRatio).html()).toMatchSnapshot()
   })
 
   /**
@@ -57,7 +55,7 @@ describe('okuAspectRatio Stories', () => {
     let wrapper: VueWrapper<InstanceType<typeof Styled>>
 
     beforeEach(async () => {
-      wrapper = shallowMount(Styled, {
+      wrapper = mount(Styled, {
         attachTo: document.body,
       })
     })
@@ -78,7 +76,7 @@ describe('okuAspectRatio Stories', () => {
     let wrapper: VueWrapper<InstanceType<typeof CustomRatios>>
 
     beforeEach(async () => {
-      wrapper = shallowMount(CustomRatios, {
+      wrapper = mount(CustomRatios, {
         attachTo: document.body,
       })
     })
@@ -99,7 +97,7 @@ describe('okuAspectRatio Stories', () => {
     let wrapper: VueWrapper<InstanceType<typeof Chromatic>>
 
     beforeEach(async () => {
-      wrapper = shallowMount(Chromatic, {
+      wrapper = mount(Chromatic, {
         attachTo: document.body,
       })
     })