Implement Section, Loading and emptyState

src/components/EmptyState/WEmptyState.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WEmptyState from './WEmptyState.vue'
+
+describe('WEmptyState', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WEmptyState, {
+      props: {
+        text: 'Empty state'
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

src/components/EmptyState/WEmptyState.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WEmptyState from './WEmptyState.vue'
+
+const meta: any = {
+  title: 'Example/WEmptyState',
+  component: WEmptyState,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof WEmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WEmptyState },
+    setup() {
+      return { args }
+    },
+    template: `<WEmptyState v-bind="args" />`
+  }),
+  args: {
+    text: 'Empty state text'
+  }
+}

src/components/EmptyState/WEmptyState.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="grid gap-md justify-center align-middle">
+    <EmptyStateLogo class="w-max" />
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EmptyStateLogo from '@/assets/svg/empty-state.svg?component'
+defineProps({
+  text: {
+    type: String,
+    required: true
+  }
+})
+</script>

src/components/Footer/WFooter.vue

@@ -44,25 +44,23 @@
           <WitOracleIcon class="w-[140px] h-auto white" name="witnet_dark" />
           <div class="h-max self-center">
             <p class="copyright max-w-100 footer-text">
-              © <span>2018-{{ new Date().getFullYear() }}</span
-              >
-            <slot name="custom-contributors">
-              <span>
-                by <a :href=WITNET_FOUNDATION_URL target="_blank">
-                  Witnet Foundation
-                </a> and individual contributors.
-              </span>
-            </slot>
+              © <span>2018-{{ new Date().getFullYear() }}</span>
+              <slot name="custom-contributors">
+                <span>
+                  by <a :href="WITNET_FOUNDATION_URL" target="_blank"> Witnet Foundation </a> and
+                  individual contributors.
+                </span>
+              </slot>
+            </p>
+            <p class="copyright max-w-100 footer-text">
+              <slot name="custom-license">
+                <span>
+                  Content available under a
+                  <a :href="CREATIVE_COMMONS_URL" target="_blank"> Creative Commons License </a>
+                  .
+                </span>
+              </slot>
             </p>
-            <p class="copyright max-w-100 footer-text"><slot name="custom-license">
-              <span>
-                Content available under a 
-                <a :href=CREATIVE_COMMONS_URL target="_blank">
-                  Creative Commons License
-                </a>
-                .
-              </span>
-            </slot></p>
           </div>
           <!-- <client-only>
             <LanguageSwitcher class="justify-self-end self-center" />
@@ -92,6 +90,6 @@ defineProps({
   adoDescription: {
     type: String,
     default: `Witnet is part of the Alliance of Decentralized Oracles (ADO), a joint effort by leading decentralized oracle solutions to make the life of smart contract developers easier by creating oracle standards. Learn more about the ADO at`
-  },
+  }
 })
 </script>

src/components/LoadingPlaceholder/WLoadingPlaceholder.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WLoadingPlaceholder from './WLoadingPlaceholder.vue'
+
+describe('WLoadingPlaceholder', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WLoadingPlaceholder, {
+      props: {
+        height: '100px',
+        width: '150px',
+        borderRadius: '8%'
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

src/components/LoadingPlaceholder/WLoadingPlaceholder.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WLoadingPlaceholder from './WLoadingPlaceholder.vue'
+
+const meta: any = {
+  title: 'Example/WLoadingPlaceholder',
+  component: WLoadingPlaceholder,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof WLoadingPlaceholder>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WLoadingPlaceholder },
+    setup() {
+      return { args }
+    },
+    template: `<WLoadingPlaceholder v-bind="args" />`
+  }),
+  args: {
+    height: '100px',
+    width: '150px',
+    borderRadius: '8%'
+  }
+}

src/components/LoadingPlaceholder/WLoadingPlaceholder.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="placeholder bg-gray-50 bg-opacity-60 bg-gradient-to-r from-gray-50 shadow-sm shadow-gray-100 bg-[length:200%_200%]"
+  >
+    &nbsp;
+  </div>
+  <span class="sr-only">Loading...</span>
+</template>
+<script setup>
+defineProps({
+  height: {
+    type: String,
+    required: true
+  },
+  width: {
+    type: String,
+    required: true
+  },
+  borderRadius: {
+    type: String,
+    required: true
+  }
+})
+</script>
+<style scoped lang="scss">
+@keyframes bgAnimate {
+  0% {
+    background-position: 50% 0;
+  }
+  100% {
+    background-position: -150% 0;
+  }
+}
+.placeholder {
+  height: v-bind(height);
+  width: v-bind(width);
+  border-radius: v-bind(borderRadius);
+  animation: bgAnimate 1.2s linear infinite;
+}
+</style>

src/components/LoadingPlaceholder/__snapshots__/WLoadingPlaceholder.spec.ts.snap

@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WLoadingPlaceholder > renders properly 1`] = `
+<div
+  data-v-app=""
+>
+
+  <div
+    class="placeholder bg-gray-50 bg-opacity-60 bg-gradient-to-r from-gray-50 shadow-sm shadow-gray-100 bg-[length:200%_200%]"
+    data-v-bd9b9d04=""
+  >
+
+  </div>
+  <span
+    class="sr-only"
+    data-v-bd9b9d04=""
+  >
+    Loading...
+  </span>
+
+</div>
+`;

src/components/Navbar/WNavbar.stories.ts

@@ -40,6 +40,41 @@ export const Navbar: Story = {
         rel: 'buy',
         locale: 'buy'
       },
+      {
+        key: 'build',
+        active: false,
+        to: '/build',
+        rel: 'build',
+        locale: 'build'
+      },
+      {
+        key: 'build',
+        active: false,
+        to: '/build',
+        rel: 'build',
+        locale: 'build'
+      },
+      {
+        key: 'build',
+        active: false,
+        to: '/build',
+        rel: 'build',
+        locale: 'build'
+      },
+      {
+        key: 'build',
+        active: false,
+        to: '/build',
+        rel: 'build',
+        locale: 'build'
+      },
+      {
+        key: 'build',
+        active: false,
+        to: '/build',
+        rel: 'build',
+        locale: 'build'
+      },
       {
         key: 'build',
         active: false,

src/components/Section/WSection.spec.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest'
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import WSection from './WSection.vue'
+
+describe('WSection', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WSection, {
+      props: {
+        frameClasses: 'bg-black-950',
+        contentClasses: 'grid justify-items-center'
+      },
+      slots: {
+        content: h('p', 'Section content')
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

src/components/Section/WSection.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WSection from './WSection.vue'
+
+const meta: any = {
+  title: 'Example/WSection',
+  component: WSection,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof WSection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WSection },
+    setup() {
+      return { args }
+    },
+    template: `<WSection v-bind="args">
+        <template #content>
+          <p class="text-white-50">Section content<p>
+        </template>
+      </WSection>`
+  }),
+  args: {
+    frameClasses: 'bg-black-950',
+    contentClasses: 'grid justify-items-center'
+  }
+}

src/components/Section/__snapshots__/WSection.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WSection > renders properly 1`] = `
+<div
+  class="w-full h-full bg-black-950"
+>
+  <div
+    class="content p-[100px] m-[0_auto] max-w-[1100px] w-full sm:p-[70px_32px] xs:p-[70px_16px] z-50 grid justify-items-center"
+  >
+
+    <p>
+      Section content
+    </p>
+
+  </div>
+</div>
+`;

src/components/Spinner/WSpinner.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WSpinner from './WSpinner.vue'
+
+describe('WSpinner', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WSpinner, {
+      props: {
+        size: '16px'
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

src/components/Spinner/WSpinner.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WSpinner from './WSpinner.vue'
+
+const meta: any = {
+  title: 'Example/WSpinner',
+  component: WSpinner,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof WSpinner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WSpinner },
+    setup() {
+      return { args }
+    },
+    template: `<WSpinner v-bind="args" />`,
+    args: {
+      size: '30px'
+    }
+  })
+}