From 1a85feaaf64fc5e7d6c81fe6b113270cb7d95e29 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Tue, 27 Aug 2024 17:18:23 +0200 Subject: [PATCH] feat: implement footer component --- .github/workflows/ci.yaml | 2 +- index.d.ts | 3 +- pnpm-lock.yaml | 90 +++++ src/assets/logo.svg | 1 - src/assets/svg/ado.svg | 6 + src/assets/{ => svg}/close-nav.svg | 0 src/assets/{ => svg}/hamburguer.svg | 0 src/assets/{ => svg}/navigation-cursor.svg | 0 src/assets/svg/witnet-logo-dark.svg | 11 + src/components/Footer/WFooter.spec.ts | 80 +++++ src/components/Footer/WFooter.stories.ts | 104 ++++++ src/components/Footer/WFooter.ts | 8 + src/components/Footer/WFooter.vue | 97 ++++++ .../Footer/__snapshots__/WFooter.spec.ts.snap | 319 ++++++++++++++++++ src/components/Navbar/WNavbar.spec.ts | 12 +- src/components/Navbar/WNavbar.stories.ts | 8 +- src/components/Navbar/WNavbar.ts | 8 +- src/components/Navbar/WNavbar.vue | 33 +- src/components/Section/WSection.vue | 22 ++ src/components/index.ts | 2 + src/index.ts | 5 +- tsconfig.json | 2 +- 22 files changed, 770 insertions(+), 43 deletions(-) delete mode 100644 src/assets/logo.svg create mode 100644 src/assets/svg/ado.svg rename src/assets/{ => svg}/close-nav.svg (100%) rename src/assets/{ => svg}/hamburguer.svg (100%) rename src/assets/{ => svg}/navigation-cursor.svg (100%) create mode 100644 src/assets/svg/witnet-logo-dark.svg create mode 100644 src/components/Footer/WFooter.spec.ts create mode 100644 src/components/Footer/WFooter.stories.ts create mode 100644 src/components/Footer/WFooter.ts create mode 100644 src/components/Footer/WFooter.vue create mode 100644 src/components/Footer/__snapshots__/WFooter.spec.ts.snap create mode 100644 src/components/Section/WSection.vue diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 1d00902..b91c481 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -41,7 +41,7 @@ jobs: run: pnpm lint - name: Run formatter - run: pnpm format + run: pnpm format - name: Run unit tests run: pnpm test:unit diff --git a/index.d.ts b/index.d.ts index a94412a..c4712d5 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,4 +1,5 @@ declare module '*.svg?component' { const value: string; export default value; -} \ No newline at end of file +} +declare module '*.vue'; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7cef8e0..1a78e55 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@vitejs/plugin-vue-jsx': + specifier: ^4.0.1 + version: 4.0.1(vite@5.4.2(@types/node@20.16.1)(sass@1.77.8))(vue@3.4.38(typescript@5.4.5)) gsap: specifier: ^3.12.5 version: 3.12.5 @@ -183,6 +186,10 @@ packages: resolution: {integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==} engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.22.15': + resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} + engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.24.7': resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==} engines: {node: '>=6.9.0'} @@ -1457,6 +1464,13 @@ packages: '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} + '@vitejs/plugin-vue-jsx@4.0.1': + resolution: {integrity: sha512-7mg9HFGnFHMEwCdB6AY83cVK4A6sCqnrjFYF4WIlebYAQVVJ/sC/CiTruVdrRlhrFoeZ8rlMxY9wYpPTIRhhAg==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: ^5.0.0 + vue: ^3.0.0 + '@vitejs/plugin-vue@5.1.2': resolution: {integrity: sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==} engines: {node: ^18.0.0 || >=20.0.0} @@ -1488,6 +1502,22 @@ packages: '@volar/typescript@2.4.0': resolution: {integrity: sha512-9zx3lQWgHmVd+JRRAHUSRiEhe4TlzL7U7e6ulWXOxHH/WNYxzKwCvZD7WYWEZFdw4dHfTD9vUR0yPQO6GilCaQ==} + '@vue/babel-helper-vue-transform-on@1.2.2': + resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==} + + '@vue/babel-plugin-jsx@1.2.2': + resolution: {integrity: sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==} + peerDependencies: + '@babel/core': ^7.0.0-0 + peerDependenciesMeta: + '@babel/core': + optional: true + + '@vue/babel-plugin-resolve-type@1.2.2': + resolution: {integrity: sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==} + peerDependencies: + '@babel/core': ^7.0.0-0 + '@vue/compiler-core@3.4.38': resolution: {integrity: sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==} @@ -1755,6 +1785,10 @@ packages: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} + camelcase@6.3.0: + resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} + engines: {node: '>=10'} + caniuse-lite@1.0.30001653: resolution: {integrity: sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==} @@ -2459,6 +2493,10 @@ packages: resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} engines: {node: '>=18'} + html-tags@3.3.1: + resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} + engines: {node: '>=8'} + http-errors@2.0.0: resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==} engines: {node: '>= 0.8'} @@ -3607,6 +3645,9 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + svg-tags@1.0.0: + resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} + svgo@3.3.2: resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==} engines: {node: '>=14.0.0'} @@ -4180,6 +4221,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/helper-module-imports@7.22.15': + dependencies: + '@babel/types': 7.25.4 + '@babel/helper-module-imports@7.24.7': dependencies: '@babel/traverse': 7.25.4 @@ -5674,6 +5719,16 @@ snapshots: '@ungap/structured-clone@1.2.0': {} + '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.2(@types/node@20.16.1)(sass@1.77.8))(vue@3.4.38(typescript@5.4.5))': + dependencies: + '@babel/core': 7.25.2 + '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.25.2) + '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.25.2) + vite: 5.4.2(@types/node@20.16.1)(sass@1.77.8) + vue: 3.4.38(typescript@5.4.5) + transitivePeerDependencies: + - supports-color + '@vitejs/plugin-vue@5.1.2(vite@5.4.2(@types/node@20.16.1)(sass@1.77.8))(vue@3.4.38(typescript@5.4.5))': dependencies: vite: 5.4.2(@types/node@20.16.1)(sass@1.77.8) @@ -5720,6 +5775,35 @@ snapshots: path-browserify: 1.0.1 vscode-uri: 3.0.8 + '@vue/babel-helper-vue-transform-on@1.2.2': {} + + '@vue/babel-plugin-jsx@1.2.2(@babel/core@7.25.2)': + dependencies: + '@babel/helper-module-imports': 7.22.15 + '@babel/helper-plugin-utils': 7.24.8 + '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2) + '@babel/template': 7.25.0 + '@babel/traverse': 7.25.4 + '@babel/types': 7.25.4 + '@vue/babel-helper-vue-transform-on': 1.2.2 + '@vue/babel-plugin-resolve-type': 1.2.2(@babel/core@7.25.2) + camelcase: 6.3.0 + html-tags: 3.3.1 + svg-tags: 1.0.0 + optionalDependencies: + '@babel/core': 7.25.2 + transitivePeerDependencies: + - supports-color + + '@vue/babel-plugin-resolve-type@1.2.2(@babel/core@7.25.2)': + dependencies: + '@babel/code-frame': 7.24.7 + '@babel/core': 7.25.2 + '@babel/helper-module-imports': 7.22.15 + '@babel/helper-plugin-utils': 7.24.8 + '@babel/parser': 7.25.4 + '@vue/compiler-sfc': 3.4.38 + '@vue/compiler-core@3.4.38': dependencies: '@babel/parser': 7.25.4 @@ -6031,6 +6115,8 @@ snapshots: camelcase-css@2.0.1: {} + camelcase@6.3.0: {} + caniuse-lite@1.0.30001653: {} chai@4.5.0: @@ -6808,6 +6894,8 @@ snapshots: dependencies: whatwg-encoding: 3.1.1 + html-tags@3.3.1: {} + http-errors@2.0.0: dependencies: depd: 2.0.0 @@ -7979,6 +8067,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + svg-tags@1.0.0: {} + svgo@3.3.2: dependencies: '@trysound/sax': 0.2.0 diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/svg/ado.svg b/src/assets/svg/ado.svg new file mode 100644 index 0000000..516dc8e --- /dev/null +++ b/src/assets/svg/ado.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/close-nav.svg b/src/assets/svg/close-nav.svg similarity index 100% rename from src/assets/close-nav.svg rename to src/assets/svg/close-nav.svg diff --git a/src/assets/hamburguer.svg b/src/assets/svg/hamburguer.svg similarity index 100% rename from src/assets/hamburguer.svg rename to src/assets/svg/hamburguer.svg diff --git a/src/assets/navigation-cursor.svg b/src/assets/svg/navigation-cursor.svg similarity index 100% rename from src/assets/navigation-cursor.svg rename to src/assets/svg/navigation-cursor.svg diff --git a/src/assets/svg/witnet-logo-dark.svg b/src/assets/svg/witnet-logo-dark.svg new file mode 100644 index 0000000..51326ce --- /dev/null +++ b/src/assets/svg/witnet-logo-dark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Footer/WFooter.spec.ts b/src/components/Footer/WFooter.spec.ts new file mode 100644 index 0000000..3985327 --- /dev/null +++ b/src/components/Footer/WFooter.spec.ts @@ -0,0 +1,80 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import WFooter from './WFooter.vue' + +describe('WFooter', () => { + it('renders properly', () => { + const wrapper = mount(WFooter, { + props: { + footerSections: [ + { + title: 'Developers', + links: [ + { + url: '#reference', + label: 'reference' + }, + { + url: '#randomness', + label: 'randomness' + }, + { + url: '#randomness', + label: 'randomness' + }, + { + url: '#supported_chains', + label: 'supported_chains' + }, + { + url: '#solidity_sdk', + label: 'solidity_sdk' + } + ] + }, + { + title: 'Ecosystem', + links: [ + { + url: '#block_explorer', + label: 'block_explorer' + }, + { + url: '#data_feeds_explorer', + label: 'data_feeds_explorer' + }, + { + url: '#sheikah', + label: 'sheikah' + }, + { + url: '#my_wit_wallet', + label: 'my_wit_wallet' + } + ] + }, + { + title: 'Learn', + links: [ + { + url: '#whitepaper', + label: 'whitepaper' + }, + { + url: '#medium', + label: 'medium' + }, + { + url: '#tutorials', + label: 'tutorials' + } + ] + } + ] + } + }) + + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/components/Footer/WFooter.stories.ts b/src/components/Footer/WFooter.stories.ts new file mode 100644 index 0000000..27cae96 --- /dev/null +++ b/src/components/Footer/WFooter.stories.ts @@ -0,0 +1,104 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +// import { fn } from '@storybook/test'; +import WFooter from './WFooter.vue' + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta: any = { + title: 'Example/WFooter', + component: WFooter, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + argTypes: { + // type: { control: 'select', options: ['primary', 'secondary', 'arrow', 'dark'] } + }, + args: { + // type: 'primary' + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + // onClick: fn(), + } +} satisfies Meta + +export default meta +type Story = StoryObj +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/api/csf + * to learn how to use render functions. + */ + +export const Footer: Story = { + render: (args: any) => ({ + components: { WFooter }, + setup() { + return { args } + }, + template: `` + }), + args: { + footerSections: [ + { + title: 'Developers', + links: [ + { + url: '#reference', + label: 'reference' + }, + { + url: '#randomness', + label: 'randomness' + }, + { + url: '#randomness', + label: 'randomness' + }, + { + url: '#supported_chains', + label: 'supported_chains' + }, + { + url: '#solidity_sdk', + label: 'solidity_sdk' + } + ] + }, + { + title: 'Ecosystem', + links: [ + { + url: '#block_explorer', + label: 'block_explorer' + }, + { + url: '#data_feeds_explorer', + label: 'data_feeds_explorer' + }, + { + url: '#sheikah', + label: 'sheikah' + }, + { + url: '#my_wit_wallet', + label: 'my_wit_wallet' + } + ] + }, + { + title: 'Learn', + links: [ + { + url: '#whitepaper', + label: 'whitepaper' + }, + { + url: '#medium', + label: 'medium' + }, + { + url: '#tutorials', + label: 'tutorials' + } + ] + } + ] + } +} diff --git a/src/components/Footer/WFooter.ts b/src/components/Footer/WFooter.ts new file mode 100644 index 0000000..c899459 --- /dev/null +++ b/src/components/Footer/WFooter.ts @@ -0,0 +1,8 @@ +export type FooterSection = { + title: string + links: FooterLink[] +} +export type FooterLink = { + url: string + label: string +} diff --git a/src/components/Footer/WFooter.vue b/src/components/Footer/WFooter.vue new file mode 100644 index 0000000..3b3a9a0 --- /dev/null +++ b/src/components/Footer/WFooter.vue @@ -0,0 +1,97 @@ + + + diff --git a/src/components/Footer/__snapshots__/WFooter.spec.ts.snap b/src/components/Footer/__snapshots__/WFooter.spec.ts.snap new file mode 100644 index 0000000..0fea02c --- /dev/null +++ b/src/components/Footer/__snapshots__/WFooter.spec.ts.snap @@ -0,0 +1,319 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`WFooter > renders properly 1`] = ` +
+
+ +
+
+
+ +
+

+ Developers +

+ +
+
+

+ Ecosystem +

+ +
+
+

+ Learn +

+ +
+ +
+
+ + + + + +

+ 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 + + theado.org + +

+
+
+
+ + + + +
+

+ © + + 2018-2024 + + + + by + + Witnet Foundation + + and individual contributors. + + +

+

+ + + Content available under a + + Creative Commons License + + . + + +

+
+ +
+
+ +
+
+`; diff --git a/src/components/Navbar/WNavbar.spec.ts b/src/components/Navbar/WNavbar.spec.ts index 1f59f4e..27db8af 100644 --- a/src/components/Navbar/WNavbar.spec.ts +++ b/src/components/Navbar/WNavbar.spec.ts @@ -12,22 +12,22 @@ describe('WNavbar', () => { active: false, to: '/stake', rel: 'stake', - locale: 'Stake', + locale: 'Stake' }, { key: 'buy', active: false, to: '/buy', rel: 'buy', - locale: 'Buy', + locale: 'Buy' }, { key: 'build', active: true, to: '/build', rel: 'build', - locale: 'Build', - }, + locale: 'Build' + } ], redirectionActive: false } @@ -42,8 +42,8 @@ describe('WNavbar', () => { expect(wrapper.html()).toContain(' { - console.log(wrapper.html()) - expect(wrapper.html()).toContain(`
  • + expect(wrapper.html()) + .toContain(`
  • /Build diff --git a/src/components/Navbar/WNavbar.stories.ts b/src/components/Navbar/WNavbar.stories.ts index bdb3438..51dcca6 100644 --- a/src/components/Navbar/WNavbar.stories.ts +++ b/src/components/Navbar/WNavbar.stories.ts @@ -45,22 +45,22 @@ export const Navbar: Story = { active: false, to: '/stake', rel: 'stake', - locale: 'stake', + locale: 'stake' }, { key: 'buy', active: false, to: '/buy', rel: 'buy', - locale: 'buy', + locale: 'buy' }, { key: 'build', active: false, to: '/build', rel: 'build', - locale: 'build', - }, + locale: 'build' + } ], redirectionActive: false } diff --git a/src/components/Navbar/WNavbar.ts b/src/components/Navbar/WNavbar.ts index 1e7ea6d..104641b 100644 --- a/src/components/Navbar/WNavbar.ts +++ b/src/components/Navbar/WNavbar.ts @@ -1,8 +1,2 @@ export type NavLinks = Array -export type NavLink = { key: string - active: boolean - to: string - rel: string - locale: string -} - +export type NavLink = { key: string; active: boolean; to: string; rel: string; locale: string } diff --git a/src/components/Navbar/WNavbar.vue b/src/components/Navbar/WNavbar.vue index 2469c1d..6772370 100644 --- a/src/components/Navbar/WNavbar.vue +++ b/src/components/Navbar/WNavbar.vue @@ -9,12 +9,7 @@
    -
  • +
  • - /{{ link.locale }} + /{{ link.locale }}