f

witnet · Aug 28, 2024 · 5f1879f · 5f1879f
1 parent ba3b630
commit 5f1879f
Show file tree

Hide file tree

Showing 28 changed files with 15,242 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@vueuse/core": "^11.0.3",
     "gsap": "^3.12.5",
     "postcss-cli": "^11.0.0",
     "sass": "^1.77.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/IconRounded/WIconRounded.spec.ts b/src/components/IconRounded/WIconRounded.spec.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import WIconRounded from './WIconRounded.vue'
+
+describe('WIconRounded', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WIconRounded, {
+      slots: {
+        default: `
+          <WIconRounded v-bind="args">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="email">
+              <g data-name="Layer 2">
+              <path
+                  fill="#ccc"
+                  d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm0 2-6.5 4.47a1 1 0 0 1-1 0L5 6z"
+                  data-name="email"
+                ></path>
+              </g>
+            </svg>
+          </WIconRounded>
+        `
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('renders the slot', () => {
+    const wrapper = mount(WIconRounded, {
+      slots: {
+        default: `
+          <WIconRounded v-bind="args">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="email">
+              <g data-name="Layer 2">
+              <path
+                  fill="#ccc"
+                  d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm0 2-6.5 4.47a1 1 0 0 1-1 0L5 6z"
+                  data-name="email"
+                ></path>
+              </g>
+            </svg>
+          </WIconRounded>
+        `
+      }
+    })
+
+    expect(wrapper.html().replaceAll(' ', '').replaceAll('\n', '')).toContain(
+      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="email">
+          <g data-name="Layer 2">
+          <path
+              fill="#ccc"
+              d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm0 2-6.5 4.47a1 1 0 0 1-1 0L5 6z"
+              data-name="email"
+            ></path>
+          </g>
+        </svg>
+        `
+        .replaceAll(' ', '')
+        .replaceAll('\n', '')
+    )
+  })
+})
diff --git a/src/components/IconRounded/WIconRounded.stories.ts b/src/components/IconRounded/WIconRounded.stories.ts
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WIconRounded from './WIconRounded.vue'
+
+const meta = {
+  title: 'Example/WIconRounded',
+  component: WIconRounded,
+  tags: ['autodocs']
+} satisfies Meta<typeof WIconRounded>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { WIconRounded },
+    template: `
+      <WIconRounded>
+        <svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M18.54 0C19.896 0 21 1.104 21 2.472V24L18.42 21.72L16.968 20.376L15.432 18.948L16.068 21.168H2.46C1.104 21.168 0 20.064 0 18.696V2.472C0 1.104 1.104 0 2.46 0L18.54 0ZM13.908 15.672C16.56 15.588 17.58 13.848 17.58 13.848C17.58 9.984 15.852 6.852 15.852 6.852C14.124 5.556 12.48 5.592 12.48 5.592L12.312 5.784C14.352 6.408 15.3 7.308 15.3 7.308C14.052 6.624 12.828 6.288 11.688 6.156C10.824 6.06 9.996 6.084 9.264 6.18L9.06 6.204C8.64 6.24 7.62 6.396 6.336 6.96C5.892 7.164 5.628 7.308 5.628 7.308C5.628 7.308 6.624 6.36 8.784 5.736L8.664 5.592C8.664 5.592 7.02 5.556 5.292 6.852C5.292 6.852 3.564 9.984 3.564 13.848C3.564 13.848 4.572 15.588 7.224 15.672C7.224 15.672 7.668 15.132 8.028 14.676C6.504 14.22 5.928 13.26 5.928 13.26L6.264 13.464L6.312 13.5L6.359 13.527L6.373 13.533L6.42 13.56C6.72 13.728 7.02 13.86 7.296 13.968C7.788 14.16 8.376 14.352 9.06 14.484C9.96 14.652 11.016 14.712 12.168 14.496C12.732 14.4 13.308 14.232 13.908 13.98C14.328 13.824 14.796 13.596 15.288 13.272C15.288 13.272 14.688 14.256 13.116 14.7C13.476 15.156 13.908 15.672 13.908 15.672ZM8.328 10.068C7.644 10.068 7.104 10.668 7.104 11.4C7.104 12.132 7.656 12.732 8.328 12.732C9.012 12.732 9.552 12.132 9.552 11.4C9.564 10.668 9.012 10.068 8.328 10.068ZM12.708 10.068C12.024 10.068 11.484 10.668 11.484 11.4C11.484 12.132 12.036 12.732 12.708 12.732C13.392 12.732 13.932 12.132 13.932 11.4C13.932 10.668 13.392 10.068 12.708 10.068Z"
+            fill="#ccc"
+            class="social-icon"
+          />
+        </svg>
+      </WIconRounded>
+    `
+  }),
+  args: {}
+}
diff --git a/src/components/IconRounded/WIconRounded.vue b/src/components/IconRounded/WIconRounded.vue
@@ -0,0 +1,13 @@
+<template>
+  <div
+    class="border border-black-950 w-min rounded-full p-md bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors"
+  >
+    <slot classs=""></slot>
+  </div>
+</template>
+
+<style>
+path {
+  @apply fill-black-950;
+}
+</style>
diff --git a/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap
@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WIconRounded > renders properly 1`] = `
+<div
+  class="border border-black-950 w-min rounded-full p-md bg-wit-blue-500 hover:bg-wit-blue-300 transition-colors"
+>
+  
+  <wiconrounded>
+    <svg
+      id="email"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        data-name="Layer 2"
+      >
+        <path
+          d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm0 2-6.5 4.47a1 1 0 0 1-1 0L5 6z"
+          data-name="email"
+          fill="#ccc"
+        />
+      </g>
+    </svg>
+  </wiconrounded>
+  
+</div>
+`;
diff --git a/src/components/IconText/WIconText.spec.ts b/src/components/IconText/WIconText.spec.ts
@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import WIconText from './WIconText.vue'
+import WIconRounded from '../IconRounded/WIconRounded.vue'
+
+describe.only('WIconText', () => {
+  it('renders properly NOT ROUNDED BOTTOM', () => {
+    const wrapper = mount(WIconText, {
+      props: {
+        link: '#',
+        position: 'bottom',
+        text: 'Text',
+        bold: false,
+        rounded: false
+      },
+      slots: {
+        default: `
+          <svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M18.54 0C19.896 0 21 1.104 21 2.472V24L18.42 21.72L16.968 20.376L15.432 18.948L16.068 21.168H2.46C1.104 21.168 0 20.064 0 18.696V2.472C0 1.104 1.104 0 2.46 0L18.54 0ZM13.908 15.672C16.56 15.588 17.58 13.848 17.58 13.848C17.58 9.984 15.852 6.852 15.852 6.852C14.124 5.556 12.48 5.592 12.48 5.592L12.312 5.784C14.352 6.408 15.3 7.308 15.3 7.308C14.052 6.624 12.828 6.288 11.688 6.156C10.824 6.06 9.996 6.084 9.264 6.18L9.06 6.204C8.64 6.24 7.62 6.396 6.336 6.96C5.892 7.164 5.628 7.308 5.628 7.308C5.628 7.308 6.624 6.36 8.784 5.736L8.664 5.592C8.664 5.592 7.02 5.556 5.292 6.852C5.292 6.852 3.564 9.984 3.564 13.848C3.564 13.848 4.572 15.588 7.224 15.672C7.224 15.672 7.668 15.132 8.028 14.676C6.504 14.22 5.928 13.26 5.928 13.26L6.264 13.464L6.312 13.5L6.359 13.527L6.373 13.533L6.42 13.56C6.72 13.728 7.02 13.86 7.296 13.968C7.788 14.16 8.376 14.352 9.06 14.484C9.96 14.652 11.016 14.712 12.168 14.496C12.732 14.4 13.308 14.232 13.908 13.98C14.328 13.824 14.796 13.596 15.288 13.272C15.288 13.272 14.688 14.256 13.116 14.7C13.476 15.156 13.908 15.672 13.908 15.672ZM8.328 10.068C7.644 10.068 7.104 10.668 7.104 11.4C7.104 12.132 7.656 12.732 8.328 12.732C9.012 12.732 9.552 12.132 9.552 11.4C9.564 10.668 9.012 10.068 8.328 10.068ZM12.708 10.068C12.024 10.068 11.484 10.668 11.484 11.4C11.484 12.132 12.036 12.732 12.708 12.732C13.392 12.732 13.932 12.132 13.932 11.4C13.932 10.668 13.392 10.068 12.708 10.068Z"
+              fill="#ccc"
+              class="social-icon"
+            />
+          </svg>
+        `
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('renders properly ROUNDED RIGHT', () => {
+    const wrapper = mount(WIconText, {
+      props: {
+        link: '#',
+        position: 'right',
+        text: 'Text',
+        bold: true,
+        rounded: true
+      },
+      slots: {
+        default: `
+          <svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M18.54 0C19.896 0 21 1.104 21 2.472V24L18.42 21.72L16.968 20.376L15.432 18.948L16.068 21.168H2.46C1.104 21.168 0 20.064 0 18.696V2.472C0 1.104 1.104 0 2.46 0L18.54 0ZM13.908 15.672C16.56 15.588 17.58 13.848 17.58 13.848C17.58 9.984 15.852 6.852 15.852 6.852C14.124 5.556 12.48 5.592 12.48 5.592L12.312 5.784C14.352 6.408 15.3 7.308 15.3 7.308C14.052 6.624 12.828 6.288 11.688 6.156C10.824 6.06 9.996 6.084 9.264 6.18L9.06 6.204C8.64 6.24 7.62 6.396 6.336 6.96C5.892 7.164 5.628 7.308 5.628 7.308C5.628 7.308 6.624 6.36 8.784 5.736L8.664 5.592C8.664 5.592 7.02 5.556 5.292 6.852C5.292 6.852 3.564 9.984 3.564 13.848C3.564 13.848 4.572 15.588 7.224 15.672C7.224 15.672 7.668 15.132 8.028 14.676C6.504 14.22 5.928 13.26 5.928 13.26L6.264 13.464L6.312 13.5L6.359 13.527L6.373 13.533L6.42 13.56C6.72 13.728 7.02 13.86 7.296 13.968C7.788 14.16 8.376 14.352 9.06 14.484C9.96 14.652 11.016 14.712 12.168 14.496C12.732 14.4 13.308 14.232 13.908 13.98C14.328 13.824 14.796 13.596 15.288 13.272C15.288 13.272 14.688 14.256 13.116 14.7C13.476 15.156 13.908 15.672 13.908 15.672ZM8.328 10.068C7.644 10.068 7.104 10.668 7.104 11.4C7.104 12.132 7.656 12.732 8.328 12.732C9.012 12.732 9.552 12.132 9.552 11.4C9.564 10.668 9.012 10.068 8.328 10.068ZM12.708 10.068C12.024 10.068 11.484 10.668 11.484 11.4C11.484 12.132 12.036 12.732 12.708 12.732C13.392 12.732 13.932 12.132 13.932 11.4C13.932 10.668 13.392 10.068 12.708 10.068Z"
+              fill="#ccc"
+              class="social-icon"
+            />
+          </svg>
+        `
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
+  it('renders a WIconRounded component when prop ROUNDED is TRUE', () => {
+    const wrapper = mount(WIconText, {
+      props: {
+        rounded: true,
+        link: '#',
+        position: 'bottom',
+        text: 'Text'
+      },
+      slots: {
+        default: `
+          <svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M18.54 0C19.896 0 21 1.104 21 2.472V24L18.42 21.72L16.968 20.376L15.432 18.948L16.068 21.168H2.46C1.104 21.168 0 20.064 0 18.696V2.472C0 1.104 1.104 0 2.46 0L18.54 0ZM13.908 15.672C16.56 15.588 17.58 13.848 17.58 13.848C17.58 9.984 15.852 6.852 15.852 6.852C14.124 5.556 12.48 5.592 12.48 5.592L12.312 5.784C14.352 6.408 15.3 7.308 15.3 7.308C14.052 6.624 12.828 6.288 11.688 6.156C10.824 6.06 9.996 6.084 9.264 6.18L9.06 6.204C8.64 6.24 7.62 6.396 6.336 6.96C5.892 7.164 5.628 7.308 5.628 7.308C5.628 7.308 6.624 6.36 8.784 5.736L8.664 5.592C8.664 5.592 7.02 5.556 5.292 6.852C5.292 6.852 3.564 9.984 3.564 13.848C3.564 13.848 4.572 15.588 7.224 15.672C7.224 15.672 7.668 15.132 8.028 14.676C6.504 14.22 5.928 13.26 5.928 13.26L6.264 13.464L6.312 13.5L6.359 13.527L6.373 13.533L6.42 13.56C6.72 13.728 7.02 13.86 7.296 13.968C7.788 14.16 8.376 14.352 9.06 14.484C9.96 14.652 11.016 14.712 12.168 14.496C12.732 14.4 13.308 14.232 13.908 13.98C14.328 13.824 14.796 13.596 15.288 13.272C15.288 13.272 14.688 14.256 13.116 14.7C13.476 15.156 13.908 15.672 13.908 15.672ZM8.328 10.068C7.644 10.068 7.104 10.668 7.104 11.4C7.104 12.132 7.656 12.732 8.328 12.732C9.012 12.732 9.552 12.132 9.552 11.4C9.564 10.668 9.012 10.068 8.328 10.068ZM12.708 10.068C12.024 10.068 11.484 10.668 11.484 11.4C11.484 12.132 12.036 12.732 12.708 12.732C13.392 12.732 13.932 12.132 13.932 11.4C13.932 10.668 13.392 10.068 12.708 10.068Z"
+              fill="#ccc"
+              class="social-icon"
+            />
+          </svg>
+        `
+      }
+    })
+
+    expect(wrapper.findComponent(WIconRounded)).toBeTruthy()
+  })
+})