diff --git a/package.json b/package.json index 60ff85d..a4b9b0f 100644 --- a/package.json +++ b/package.json @@ -67,9 +67,9 @@ "typescript": "~5.4.0", "vite": "^5.4.2", "vitest": "^1.6.0", - "vue-tsc": "2.0.21" + "vue-tsc": "2.1.4" }, "peerDependencies": { - "vue": "^3.4.38" + "vue": "3.4.38" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b9b40c..28ebf69 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,7 +21,7 @@ importers: specifier: ^5.1.0 version: 5.1.0(vue@3.4.38(typescript@5.4.5)) vue: - specifier: ^3.4.38 + specifier: 3.4.38 version: 3.4.38(typescript@5.4.5) devDependencies: '@chromatic-com/storybook': @@ -118,8 +118,8 @@ importers: specifier: ^1.6.0 version: 1.6.0(@types/node@20.16.2)(jsdom@24.1.3)(sass@1.77.8) vue-tsc: - specifier: 2.0.21 - version: 2.0.21(typescript@5.4.5) + specifier: 2.1.4 + version: 2.1.4(typescript@5.4.5) packages: @@ -1479,21 +1479,12 @@ packages: '@vitest/utils@1.6.0': resolution: {integrity: sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==} - '@volar/language-core@2.3.4': - resolution: {integrity: sha512-wXBhY11qG6pCDAqDnbBRFIDSIwbqkWI7no+lj5+L7IlA7HRIjRP7YQLGzT0LF4lS6eHkMSsclXqy9DwYJasZTQ==} - '@volar/language-core@2.4.1': resolution: {integrity: sha512-9AKhC7Qn2mQYxj7Dz3bVxeOk7gGJladhWixUYKef/o0o7Bm4an+A3XvmcTHVqZ8stE6lBVH++g050tBtJ4TZPQ==} - '@volar/source-map@2.3.4': - resolution: {integrity: sha512-C+t63nwcblqLIVTYXaVi/+gC8NukDaDIQI72J3R7aXGvtgaVB16c+J8Iz7/VfOy7kjYv7lf5GhBny6ACw9fTGQ==} - '@volar/source-map@2.4.1': resolution: {integrity: sha512-Xq6ep3OZg9xUqN90jEgB9ztX5SsTz1yiV8wiQbcYNjWkek+Ie3dc8l7AVt3EhDm9mSIR58oWczHkzM2H6HIsmQ==} - '@volar/typescript@2.3.4': - resolution: {integrity: sha512-acCvt7dZECyKcvO5geNybmrqOsu9u8n5XP1rfiYsOLYGPxvHRav9BVmEdRyZ3vvY6mNyQ1wLL5Hday4IShe17w==} - '@volar/typescript@2.4.1': resolution: {integrity: sha512-UoRzC0PXcwajFQTu8XxKSYNsWNBtVja6Y9gC8eLv7kYm+UEKJCcZ8g7dialsOYA0HKs3Vpg57MeCsawFLC6m9Q==} @@ -1529,16 +1520,16 @@ packages: typescript: optional: true - '@vue/language-core@2.0.21': - resolution: {integrity: sha512-vjs6KwnCK++kIXT+eI63BGpJHfHNVJcUCr3RnvJsccT3vbJnZV5IhHR2puEkoOkIbDdp0Gqi1wEnv3hEd3WsxQ==} + '@vue/language-core@2.1.2': + resolution: {integrity: sha512-tt2J7C+l0J/T5PaLhJ0jvCCi0JNwu3e8azWTYxW3jmAW5B/dac0g5UxmI7l59CQgCGFotqUqI3tXjfZgoWNtog==} peerDependencies: typescript: '*' peerDependenciesMeta: typescript: optional: true - '@vue/language-core@2.1.2': - resolution: {integrity: sha512-tt2J7C+l0J/T5PaLhJ0jvCCi0JNwu3e8azWTYxW3jmAW5B/dac0g5UxmI7l59CQgCGFotqUqI3tXjfZgoWNtog==} + '@vue/language-core@2.1.4': + resolution: {integrity: sha512-i8pfAgNjTNjabBX1xRsuV6aRw2E8bdQXwd5H8m3cUkTVJju3QN5nfdoXET0uK+yXsuloNJPzo6PXFujRRPNmMA==} peerDependencies: typescript: '*' peerDependenciesMeta: @@ -3942,6 +3933,9 @@ packages: vue-component-type-helpers@2.1.2: resolution: {integrity: sha512-URuxnrOhO9lUG4LOAapGWBaa/WOLDzzyAbL+uKZqT7RS+PFy0cdXI2mUSh7GaMts6vtHaeVbGk7trd0FPJi65Q==} + vue-component-type-helpers@2.1.4: + resolution: {integrity: sha512-aVqB3KxwpM76cYRkpnezl1J62E/1omzHQfx1yuz7zcbxmzmP/PeSgI20NEmkdeGnjZPVzm0V9fB4ZyRu5BBj4A==} + vue-docgen-api@4.79.2: resolution: {integrity: sha512-n9ENAcs+40awPZMsas7STqjkZiVlIjxIKgiJr5rSohDP0/JCrD9VtlzNojafsA1MChm/hz2h3PDtUedx3lbgfA==} peerDependencies: @@ -3958,14 +3952,11 @@ packages: peerDependencies: vue: '>=2' - vue-template-compiler@2.7.16: - resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==} - - vue-tsc@2.0.21: - resolution: {integrity: sha512-E6x1p1HaHES6Doy8pqtm7kQern79zRtIewkf9fiv7Y43Zo4AFDS5hKi+iHi2RwEhqRmuiwliB1LCEFEGwvxQnw==} + vue-tsc@2.1.4: + resolution: {integrity: sha512-XTzMXQcsixAvNbpou/9qngEsZawaiJRZH3Ja+lfgRfv2A1TJv9vnZ/Kyv7XxPqv/TaZVFSnjGpM87VbWIg6yQg==} hasBin: true peerDependencies: - typescript: '*' + typescript: '>=5.0.0' vue@3.4.38: resolution: {integrity: sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==} @@ -5443,7 +5434,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.4.38(typescript@5.4.5) - vue-component-type-helpers: 2.1.2 + vue-component-type-helpers: 2.1.4 '@testing-library/dom@10.1.0': dependencies: @@ -5728,24 +5719,12 @@ snapshots: loupe: 2.3.7 pretty-format: 29.7.0 - '@volar/language-core@2.3.4': - dependencies: - '@volar/source-map': 2.3.4 - '@volar/language-core@2.4.1': dependencies: '@volar/source-map': 2.4.1 - '@volar/source-map@2.3.4': {} - '@volar/source-map@2.4.1': {} - '@volar/typescript@2.3.4': - dependencies: - '@volar/language-core': 2.3.4 - path-browserify: 1.0.1 - vscode-uri: 3.0.8 - '@volar/typescript@2.4.1': dependencies: '@volar/language-core': 2.4.1 @@ -5808,19 +5787,20 @@ snapshots: transitivePeerDependencies: - supports-color - '@vue/language-core@2.0.21(typescript@5.4.5)': + '@vue/language-core@2.1.2(typescript@5.4.5)': dependencies: - '@volar/language-core': 2.3.4 + '@volar/language-core': 2.4.1 '@vue/compiler-dom': 3.4.38 + '@vue/compiler-vue2': 2.7.16 '@vue/shared': 3.4.38 computeds: 0.0.1 minimatch: 9.0.5 + muggle-string: 0.4.1 path-browserify: 1.0.1 - vue-template-compiler: 2.7.16 optionalDependencies: typescript: 5.4.5 - '@vue/language-core@2.1.2(typescript@5.4.5)': + '@vue/language-core@2.1.4(typescript@5.4.5)': dependencies: '@volar/language-core': 2.4.1 '@vue/compiler-dom': 3.4.38 @@ -8339,6 +8319,8 @@ snapshots: vue-component-type-helpers@2.1.2: {} + vue-component-type-helpers@2.1.4: {} + vue-docgen-api@4.79.2(vue@3.4.38(typescript@5.4.5)): dependencies: '@babel/parser': 7.25.6 @@ -8372,15 +8354,10 @@ snapshots: dependencies: vue: 3.4.38(typescript@5.4.5) - vue-template-compiler@2.7.16: + vue-tsc@2.1.4(typescript@5.4.5): dependencies: - de-indent: 1.0.2 - he: 1.2.0 - - vue-tsc@2.0.21(typescript@5.4.5): - dependencies: - '@volar/typescript': 2.3.4 - '@vue/language-core': 2.0.21(typescript@5.4.5) + '@volar/typescript': 2.4.1 + '@vue/language-core': 2.1.4(typescript@5.4.5) semver: 7.6.3 typescript: 5.4.5 diff --git a/src/assets/svg/ado.svg b/src/assets/svg/ado.svg index 516dc8e..c602b19 100644 --- a/src/assets/svg/ado.svg +++ b/src/assets/svg/ado.svg @@ -1,6 +1,14 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/assets/svg/apple.svg b/src/assets/svg/apple.svg new file mode 100644 index 0000000..a7044cd --- /dev/null +++ b/src/assets/svg/apple.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/bitmart.svg b/src/assets/svg/bitmart.svg new file mode 100644 index 0000000..e283026 --- /dev/null +++ b/src/assets/svg/bitmart.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/changelly.svg b/src/assets/svg/changelly.svg new file mode 100644 index 0000000..cc59c88 --- /dev/null +++ b/src/assets/svg/changelly.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/close-nav.svg b/src/assets/svg/close-nav.svg index a3570a4..7eb66d5 100644 --- a/src/assets/svg/close-nav.svg +++ b/src/assets/svg/close-nav.svg @@ -1,3 +1,6 @@ - - - + + + \ No newline at end of file diff --git a/src/assets/svg/discord.svg b/src/assets/svg/discord.svg new file mode 100644 index 0000000..66949b2 --- /dev/null +++ b/src/assets/svg/discord.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/docker.svg b/src/assets/svg/docker.svg new file mode 100644 index 0000000..a32e2bc --- /dev/null +++ b/src/assets/svg/docker.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/empty-state.svg b/src/assets/svg/empty-state.svg index e62cc5f..8115910 100644 --- a/src/assets/svg/empty-state.svg +++ b/src/assets/svg/empty-state.svg @@ -1,82 +1,242 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/gate.svg b/src/assets/svg/gate.svg new file mode 100644 index 0000000..96a5590 --- /dev/null +++ b/src/assets/svg/gate.svg @@ -0,0 +1,14 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/github.svg b/src/assets/svg/github.svg new file mode 100644 index 0000000..853e7d0 --- /dev/null +++ b/src/assets/svg/github.svg @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/hamburguer.svg b/src/assets/svg/hamburguer.svg index 2193928..5192a17 100644 --- a/src/assets/svg/hamburguer.svg +++ b/src/assets/svg/hamburguer.svg @@ -1,5 +1,5 @@ - - - - + + + + \ No newline at end of file diff --git a/src/assets/svg/letsexchange.svg b/src/assets/svg/letsexchange.svg new file mode 100644 index 0000000..7236f74 --- /dev/null +++ b/src/assets/svg/letsexchange.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/linux.svg b/src/assets/svg/linux.svg new file mode 100644 index 0000000..ffecfc0 --- /dev/null +++ b/src/assets/svg/linux.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/mexc.svg b/src/assets/svg/mexc.svg new file mode 100644 index 0000000..f5ceb85 --- /dev/null +++ b/src/assets/svg/mexc.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/my-wit-wallet.svg b/src/assets/svg/my-wit-wallet.svg new file mode 100644 index 0000000..b7002d1 --- /dev/null +++ b/src/assets/svg/my-wit-wallet.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/navigation-cursor.svg b/src/assets/svg/navigation-cursor.svg index 6f32367..b28c069 100644 --- a/src/assets/svg/navigation-cursor.svg +++ b/src/assets/svg/navigation-cursor.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/src/assets/svg/raspberry.svg b/src/assets/svg/raspberry.svg new file mode 100644 index 0000000..0225a56 --- /dev/null +++ b/src/assets/svg/raspberry.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/rightArrow.svg b/src/assets/svg/rightArrow.svg new file mode 100644 index 0000000..40c36d7 --- /dev/null +++ b/src/assets/svg/rightArrow.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/sheikah.svg b/src/assets/svg/sheikah.svg new file mode 100644 index 0000000..ce3084a --- /dev/null +++ b/src/assets/svg/sheikah.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/simpleswap.svg b/src/assets/svg/simpleswap.svg new file mode 100644 index 0000000..a80e463 --- /dev/null +++ b/src/assets/svg/simpleswap.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/telegram.svg b/src/assets/svg/telegram.svg new file mode 100644 index 0000000..89aaa75 --- /dev/null +++ b/src/assets/svg/telegram.svg @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/windows.svg b/src/assets/svg/windows.svg new file mode 100644 index 0000000..fce467b --- /dev/null +++ b/src/assets/svg/windows.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/svg/witnet-logo-dark.svg b/src/assets/svg/witnet-logo-dark.svg index 51326ce..26acdb4 100644 --- a/src/assets/svg/witnet-logo-dark.svg +++ b/src/assets/svg/witnet-logo-dark.svg @@ -8,4 +8,4 @@ - + \ No newline at end of file diff --git a/src/assets/svg/x.svg b/src/assets/svg/x.svg new file mode 100644 index 0000000..76ae303 --- /dev/null +++ b/src/assets/svg/x.svg @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/components/Button/AnimatedArrow.vue b/src/components/Button/AnimatedArrow.vue index 4c89f0d..583c208 100644 --- a/src/components/Button/AnimatedArrow.vue +++ b/src/components/Button/AnimatedArrow.vue @@ -1,6 +1,6 @@ @@ -8,15 +8,19 @@ import { gsap } from 'gsap' import { computed, ref, watch } from 'vue' -import IconRightArrow from '../icons/IconRightArrow.vue' +import WIcon from '../icon/WIcon.vue' +import { IconName } from '../icon/WIcon' -// import ArrowRightIcon from '@/assets/svg/arrow_right.svg?component' const arrow = ref(null) const props = defineProps({ hover: { type: Boolean, default: false + }, + color: { + type: String, + default: '#fff' } }) diff --git a/src/components/IconRounded/WIconRounded.spec.ts b/src/components/IconRounded/WIconRounded.spec.ts new file mode 100644 index 0000000..f2e9dfe --- /dev/null +++ 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: ` + + + + + + + + ` + } + }) + + expect(wrapper.element).toMatchSnapshot() + }) + + it('renders the slot', () => { + const wrapper = mount(WIconRounded, { + slots: { + default: ` + + + + + + + + ` + } + }) + + expect(wrapper.html().replaceAll(' ', '').replaceAll('\n', '')).toContain( + ` + + + + + ` + .replaceAll(' ', '') + .replaceAll('\n', '') + ) + }) +}) diff --git a/src/components/IconRounded/WIconRounded.stories.ts b/src/components/IconRounded/WIconRounded.stories.ts new file mode 100644 index 0000000..11fe8bf --- /dev/null +++ b/src/components/IconRounded/WIconRounded.stories.ts @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import WIconRounded from './WIconRounded.vue' + +const meta = { + title: 'Example/WIconRounded', + component: WIconRounded, + tags: ['autodocs'] +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: (args) => ({ + components: { WIconRounded }, + template: ` + + + + + + `, + setup() { + return { args } + } + }), + args: { + size: 70 + } +} diff --git a/src/components/IconRounded/WIconRounded.vue b/src/components/IconRounded/WIconRounded.vue new file mode 100644 index 0000000..75d58fd --- /dev/null +++ b/src/components/IconRounded/WIconRounded.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap new file mode 100644 index 0000000..811a4fc --- /dev/null +++ b/src/components/IconRounded/__snapshots__/WIconRounded.spec.ts.snap @@ -0,0 +1,28 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`WIconRounded > renders properly 1`] = ` +
+ + + + + + + + + +
+`; diff --git a/src/components/IconText/WIconText.spec.ts b/src/components/IconText/WIconText.spec.ts new file mode 100644 index 0000000..d1dfc35 --- /dev/null +++ b/src/components/IconText/WIconText.spec.ts @@ -0,0 +1,88 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import WIconText from './WIconText.vue' +import WIconRounded from '../IconRounded/WIconRounded.vue' +import { IconTextPosition } from './WIconText' + +describe('WIconText', () => { + it('renders properly NOT ROUNDED BOTTOM', () => { + const wrapper = mount(WIconText, { + props: { + link: '#', + position: IconTextPosition.Bottom, + text: 'Text', + bold: false, + rounded: false + }, + slots: { + default: ` + + + + ` + } + }) + + expect(wrapper.element).toMatchSnapshot() + }) + + it('renders properly ROUNDED RIGHT', () => { + const wrapper = mount(WIconText, { + props: { + link: '#', + position: IconTextPosition.Right, + text: 'Text', + bold: true, + rounded: true + }, + slots: { + default: ` + + + + ` + } + }) + + expect(wrapper.element).toMatchSnapshot() + }) + + it('renders a WIconRounded component when prop ROUNDED is TRUE', () => { + const wrapper = mount(WIconText, { + props: { + rounded: true, + link: '#', + position: IconTextPosition.Bottom, + text: 'Text' + }, + slots: { + default: ` + + + + ` + } + }) + + expect(wrapper.findComponent(WIconRounded)).toBeTruthy() + }) +}) diff --git a/src/components/IconText/WIconText.stories.ts b/src/components/IconText/WIconText.stories.ts new file mode 100644 index 0000000..dec8fbe --- /dev/null +++ b/src/components/IconText/WIconText.stories.ts @@ -0,0 +1,76 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import WIconText from './WIconText.vue' +import { IconTextPosition } from './WIconText' + +const meta = { + title: 'Example/WIconText', + component: WIconText, + tags: ['autodocs'], + argTypes: { + bold: { + control: 'boolean' + }, + rounded: { + control: 'boolean', + default: false + }, + text: { control: 'text' }, + position: { control: 'select', options: ['right', 'bottom'] } + }, + args: {} +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Bottom: Story = { + render: (args) => ({ + components: { WIconText }, + setup() { + return { args } + }, + template: ` + + + + + ` + }), + args: { + link: '#', + position: IconTextPosition.Bottom, + text: 'Text' + } +} + +export const Right: Story = { + render: (args) => ({ + components: { WIconText }, + setup() { + return { args } + }, + template: ` + + + + + ` + }), + args: { + link: '#', + position: IconTextPosition.Right, + text: 'Text', + rounded: true, + bold: true + } +} diff --git a/src/components/IconText/WIconText.ts b/src/components/IconText/WIconText.ts new file mode 100644 index 0000000..f09c341 --- /dev/null +++ b/src/components/IconText/WIconText.ts @@ -0,0 +1,6 @@ +export enum IconTextPosition { + Right = 'right', + Bottom = 'bottom' +} + +export const iconTextPositions = Object.values(IconTextPosition) diff --git a/src/components/IconText/WIconText.vue b/src/components/IconText/WIconText.vue new file mode 100644 index 0000000..e5e8fae --- /dev/null +++ b/src/components/IconText/WIconText.vue @@ -0,0 +1,56 @@ + + + diff --git a/src/components/IconText/__snapshots__/WIconText.spec.ts.snap b/src/components/IconText/__snapshots__/WIconText.spec.ts.snap new file mode 100644 index 0000000..3e05f39 --- /dev/null +++ b/src/components/IconText/__snapshots__/WIconText.spec.ts.snap @@ -0,0 +1,72 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`WIconText > renders properly NOT ROUNDED BOTTOM 1`] = ` + + + + + + +

+ Text +

+ +`; + +exports[`WIconText > renders properly ROUNDED RIGHT 1`] = ` + +
+ + + + + + + +
+

+ Text +

+ +`; diff --git a/src/components/Link/WLink.stories.ts b/src/components/Link/WLink.stories.ts index fe3bc28..1b15d95 100644 --- a/src/components/Link/WLink.stories.ts +++ b/src/components/Link/WLink.stories.ts @@ -18,7 +18,7 @@ export const Default: Story = { setup() { return { args } }, - template: `Link` + template: `Link` }), args: { label: 'Link', @@ -32,26 +32,12 @@ export const Underline: Story = { setup() { return { args } }, - template: `Link` + template: `Link` }), args: { label: 'Link', underline: true, - href: '#' - } -} - -export const Hover: Story = { - render: (args) => ({ - components: { WLink }, - setup() { - return { args } - }, - template: `Link` - }), - args: { - label: 'Link', - hover: true, - href: '#' + href: '#', + hover: false } } diff --git a/src/components/Link/WLink.vue b/src/components/Link/WLink.vue index 2527a7e..091d398 100644 --- a/src/components/Link/WLink.vue +++ b/src/components/Link/WLink.vue @@ -16,7 +16,7 @@ const props = defineProps({ }, hover: { type: Boolean, - default: false + default: true }, label: { type: String, diff --git a/src/components/Navbar/WNavbar.stories.ts b/src/components/Navbar/WNavbar.stories.ts index 35ce20e..0d1f67a 100644 --- a/src/components/Navbar/WNavbar.stories.ts +++ b/src/components/Navbar/WNavbar.stories.ts @@ -40,41 +40,6 @@ 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, diff --git a/src/components/SocialsBar/IconExternalLink.vue b/src/components/SocialsBar/IconExternalLink.vue new file mode 100644 index 0000000..ad35bb5 --- /dev/null +++ b/src/components/SocialsBar/IconExternalLink.vue @@ -0,0 +1,24 @@ + + + + diff --git a/src/components/SocialsBar/WSocialsBar.spec.ts b/src/components/SocialsBar/WSocialsBar.spec.ts new file mode 100644 index 0000000..371d242 --- /dev/null +++ b/src/components/SocialsBar/WSocialsBar.spec.ts @@ -0,0 +1,12 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import WSocialsBar from './WSocialsBar.vue' + +describe('SocialsBar', () => { + it('renders properly', () => { + const wrapper = mount(WSocialsBar) + + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/components/SocialsBar/WSocialsBar.stories.ts b/src/components/SocialsBar/WSocialsBar.stories.ts new file mode 100644 index 0000000..47447e5 --- /dev/null +++ b/src/components/SocialsBar/WSocialsBar.stories.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import WSocialsBar from './WSocialsBar.vue' + +const meta = { + title: 'Example/WSocialsBar', + component: WSocialsBar, + tags: ['autodocs'], + argTypes: {}, + args: {} +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: (args) => ({ + components: { WSocialsBar }, + setup() { + return { args } + }, + template: `` + }), + args: {} +} diff --git a/src/components/SocialsBar/WSocialsBar.ts b/src/components/SocialsBar/WSocialsBar.ts new file mode 100644 index 0000000..9e0b4e7 --- /dev/null +++ b/src/components/SocialsBar/WSocialsBar.ts @@ -0,0 +1,6 @@ +export const SOCIAL_URLS: Record = { + discord: 'https://discord.gg/witnet', + github: 'https://github.com/witnet', + telegram: 'https://t.me/witnetio', + x: 'https://twitter.com/witnet_io' +} diff --git a/src/components/SocialsBar/WSocialsBar.vue b/src/components/SocialsBar/WSocialsBar.vue new file mode 100644 index 0000000..a92f66d --- /dev/null +++ b/src/components/SocialsBar/WSocialsBar.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/components/SocialsBar/__snapshots__/WSocialsBar.spec.ts.snap b/src/components/SocialsBar/__snapshots__/WSocialsBar.spec.ts.snap new file mode 100644 index 0000000..d9ecd51 --- /dev/null +++ b/src/components/SocialsBar/__snapshots__/WSocialsBar.spec.ts.snap @@ -0,0 +1,125 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`SocialsBar > renders properly 1`] = ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Enjoy Smart, Neutral, +

+

+ and Secure Data +

+
+
+`; diff --git a/src/components/icon/WIcon.spec.ts b/src/components/icon/WIcon.spec.ts new file mode 100644 index 0000000..bee3e1e --- /dev/null +++ b/src/components/icon/WIcon.spec.ts @@ -0,0 +1,18 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' + +import WIcon from './WIcon.vue' +import { IconName } from './WIcon' + +describe('WIcon', () => { + it('renders the specified svg', () => { + const wrapper = mount(WIcon, { + props: { + name: IconName.Github + } + }) + + expect(wrapper.element).toMatchSnapshot() + }) +}) diff --git a/src/components/icon/WIcon.stories.ts b/src/components/icon/WIcon.stories.ts new file mode 100644 index 0000000..218f9d6 --- /dev/null +++ b/src/components/icon/WIcon.stories.ts @@ -0,0 +1,327 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import WIcon from './WIcon.vue' + +const meta: any = { + title: 'Example/WIcon', + component: WIcon, + tags: ['autodocs'], + argTypes: { + name: { + control: 'select', + options: [ + 'ado', + 'apple', + 'bitmart', + 'changelly', + 'close-nav', + 'discord', + 'docker', + 'empty-state', + 'gate', + 'github', + 'hamburguer', + 'letsexchange', + 'linux', + 'mexc', + 'my-wit-wallet', + 'navitagion-cursor', + 'raspberry', + 'right-arrow', + 'sheikah', + 'simpleswap', + 'telegram', + 'windows', + 'x' + ] + } + }, + args: {} +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Ado: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'ado', + color: 'black' + } +} +export const Apple: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'apple', + color: 'black' + } +} +export const Bitmart: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'bitmart' + } +} +export const Changelly: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'changelly' + } +} +export const CloseNav: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'close-nav' + } +} +export const Discord: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'discord' + } +} +export const Docker: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'docker', + color: 'black' + } +} +export const EmptyState: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'empty-state' + } +} +export const Gate: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'gate' + } +} +export const Github: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'github' + } +} +export const Hamburguer: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'hamburguer' + } +} +export const Letsexchange: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'letsexchange' + } +} +export const Linux: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'linux', + color: 'black' + } +} +export const Mexc: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'mexc' + } +} +export const MyWitWallet: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'my-wit-wallet' + } +} +export const NavitagionCursor: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'navitagion-cursor' + } +} +export const Raspberry: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'raspberry', + color: 'black' + } +} +export const RightArrow: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'right-arrow' + } +} +export const Sheikah: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'sheikah' + } +} +export const Simpleswap: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'simpleswap' + } +} +export const Telegram: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'telegram' + } +} + +export const Windows: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'windows', + color: 'black' + } +} + +export const X: Story = { + render: (args: any) => ({ + components: { WIcon }, + setup() { + return { args } + }, + template: `` + }), + args: { + name: 'x' + } +} diff --git a/src/components/icon/WIcon.ts b/src/components/icon/WIcon.ts new file mode 100644 index 0000000..9dea833 --- /dev/null +++ b/src/components/icon/WIcon.ts @@ -0,0 +1,27 @@ +export enum IconName { + Ado = 'ado', + Apple = 'apple', + Bitmart = 'bitmart', + Changelly = 'changelly', + closeNav = 'close-nav', + Discord = 'discord', + Docker = 'docker', + EmptyState = 'empty-state', + Gate = 'gate', + Github = 'github', + Hamburguer = 'hamburguer', + Letsexchange = 'letsexchange', + Linux = 'linux', + Mexc = 'mexc', + MyWitWallet = 'my-wit-wallet', + NavitagionCursor = 'navitagion-cursor', + Raspberry = 'raspberry', + RightArrow = 'right-arrow', + Sheikah = 'sheikah', + Simpleswap = 'simpleswap', + Telegram = 'telegram', + Windows = 'windows', + X = 'x' +} + +export const iconNames = Object.values(IconName) diff --git a/src/components/icon/WIcon.vue b/src/components/icon/WIcon.vue new file mode 100644 index 0000000..c720495 --- /dev/null +++ b/src/components/icon/WIcon.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/components/icon/__snapshots__/WIcon.spec.ts.snap b/src/components/icon/__snapshots__/WIcon.spec.ts.snap new file mode 100644 index 0000000..798b50e --- /dev/null +++ b/src/components/icon/__snapshots__/WIcon.spec.ts.snap @@ -0,0 +1,21 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`WIcon > renders the specified svg 1`] = ` + + + +`; diff --git a/src/components/icons/IconRightArrow.vue b/src/components/icons/IconRightArrow.vue deleted file mode 100644 index 4f42f89..0000000 --- a/src/components/icons/IconRightArrow.vue +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/src/components/pagination/WPagination.spec.ts b/src/components/pagination/WPagination.spec.ts new file mode 100644 index 0000000..85eedba --- /dev/null +++ b/src/components/pagination/WPagination.spec.ts @@ -0,0 +1,60 @@ +import { describe, it, expect } from 'vitest' + +import { mount } from '@vue/test-utils' +import WPagination from './WPagination.vue' + +describe('WPagination', () => { + it('renders properly without divider', () => { + const wrapper = mount(WPagination, { props: { total: 100, pageSize: 5, page: 1 } }) + + expect(wrapper.element).toMatchSnapshot() + }) + + it('renders properly with divider', () => { + const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 4 } }) + + expect(wrapper.element).toMatchSnapshot() + }) + + it('click on page changes current page', async () => { + const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 1 } }) + + const buttons = wrapper.findAll('button') + + expect(buttons[2].element.textContent).toBe('2') + + await buttons[2].trigger('click') + + const selected = wrapper.find('.bg-wit-blue-500') + + expect(selected.text()).toBe('2') + }) + + it('click on previous changes current page', async () => { + const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 2 } }) + + const buttons = wrapper.findAll('button') + + expect(buttons[0].element.textContent).toBe('Previous') + + await buttons[0].trigger('click') + + const selected = wrapper.find('.bg-wit-blue-500') + + expect(selected.text()).toBe('1') + }) + + it('click on next changes current page', async () => { + const wrapper = mount(WPagination, { props: { total: 10, pageSize: 5, page: 1 } }) + + const buttons = wrapper.findAll('button') + + expect(buttons[3].element.textContent).toBe('Next') + + await buttons[3].trigger('click') + + const selected = wrapper.find('.bg-wit-blue-500') + + expect(selected.text()).toBe('2') + }) +}) diff --git a/src/components/pagination/WPagination.stories.ts b/src/components/pagination/WPagination.stories.ts new file mode 100644 index 0000000..fa56525 --- /dev/null +++ b/src/components/pagination/WPagination.stories.ts @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/vue3' +import WPagination from './WPagination.vue' + +const meta = { + title: 'Example/WPagination', + component: WPagination, + tags: ['autodocs'], + argTypes: {}, + args: {} +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: (args) => ({ + components: { WPagination }, + setup() { + return { args } + }, + template: `` + }), + args: { + total: 100, + pageSize: 5, + page: 1, + } +} diff --git a/src/components/pagination/WPagination.vue b/src/components/pagination/WPagination.vue new file mode 100644 index 0000000..26bacdf --- /dev/null +++ b/src/components/pagination/WPagination.vue @@ -0,0 +1,192 @@ + + + diff --git a/src/components/pagination/__snapshots__/WPagination.spec.ts.snap b/src/components/pagination/__snapshots__/WPagination.spec.ts.snap new file mode 100644 index 0000000..dd21ba5 --- /dev/null +++ b/src/components/pagination/__snapshots__/WPagination.spec.ts.snap @@ -0,0 +1,186 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`WPagination > renders properly with divider 1`] = ` + +`; + +exports[`WPagination > renders properly without divider 1`] = ` + +`; diff --git a/src/index.ts b/src/index.ts index b1bea05..1142a92 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,22 +1,63 @@ import './assets/main.css' import WButton from './components/Button/WButton.vue' +export { buttonTypes } from './components/Button/WButton' + import WEmptyState from './components/EmptyState/WEmptyState.vue' + import WFooter from './components/Footer/WFooter.vue' + +import WIcon from './components/icon/WIcon.vue' +export { IconName, iconNames } from './components/icon/WIcon' + +import WIconRounded from './components/IconRounded/WIconRounded.vue' + +import WIconText from './components/IconText/WIconText.vue' +export { iconTextPositions } from './components/IconText/WIconText' + import WLink from './components/Link/WLink.vue' + import WLoadingPlaceholder from './components/LoadingPlaceholder/WLoadingPlaceholder.vue' + import WNavbar from './components/Navbar/WNavbar.vue' + +import WPagination from './components/pagination/WPagination.vue' + import WSection from './components/Section/WSection.vue' + import WSpinner from './components/Spinner/WSpinner.vue' -export { WButton, WEmptyState, WFooter, WLink, WLoadingPlaceholder, WNavbar, WSection, WSpinner } +import WSocialsBar from './components/SocialsBar/WSocialsBar.vue' +export { SOCIAL_URLS } from './components/SocialsBar/WSocialsBar' + +export { + WButton, + WEmptyState, + WFooter, + WIcon, + WIconRounded, + WIconText, + WLink, + WLoadingPlaceholder, + WNavbar, + WPagination, + WSection, + WSocialsBar, + WSpinner +} + export type WButton = typeof WButton export type WEmptyState = typeof WEmptyState export type WFooter = typeof WFooter +export type WIcon = typeof WIcon +export type WIconRounded = typeof WIconRounded +export type WIconText = typeof WIconText export type WLink = typeof WLink export type WLoadingPlaceholder = typeof WLoadingPlaceholder export type WNavbar = typeof WNavbar +export type WPagination = typeof WPagination export type WSection = typeof WSection +export type WSocialsBar = typeof WSocialsBar export type WSpinner = typeof WSpinner import type { App } from 'vue' @@ -26,10 +67,15 @@ const WComponents = { app.component('WButton', WButton) app.component('WEmptyState', WEmptyState) app.component('WFooter', WFooter) + app.component('WIcon', WIcon) + app.component('WIconRounded', WIconRounded) + app.component('WIconText', WIconText) app.component('WLink', WLink) app.component('WLoadingPlaceholder', WLoadingPlaceholder) app.component('WNavbar', WNavbar) + app.component('WPagination', WPagination) app.component('WSection', WSection) + app.component('WSocialsBar', WSocialsBar) app.component('WSpinner', WSpinner) } } diff --git a/vite.config.ts b/vite.config.ts index 61d27a7..7c2c7b3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -41,13 +41,5 @@ export default defineConfig({ } } } - }, - // css: { - // postcss: './postcss.config.js', - // preprocessorOptions: { - // css: { - // additionalData: '@import "@/assets/style.css";', // Globally load main.css - // } - // } - // } + } })