feat: adds badge component

rotki · Sep 18, 2023 · 202059a · 202059a
1 parent 16e7656
commit 202059a
Show file tree

Hide file tree

Showing 14 changed files with 1,323 additions and 3 deletions.
diff --git a/example/cypress/e2e/overlays/badge.cy.ts b/example/cypress/e2e/overlays/badge.cy.ts
@@ -0,0 +1,29 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('Badge', () => {
+  beforeEach(() => {
+    cy.visit('/badges');
+  });
+
+  it('checks for and trigger badge', () => {
+    cy.contains('h2[data-cy=badges]', 'Badges');
+
+    cy.get('div[data-cy=badge-0]').as('defaultBadge');
+    cy.get('@defaultBadge').find('div[role=status]').should('exist');
+
+    cy.get('@defaultBadge').find('> button').click();
+    cy.get('@defaultBadge').find('div[role=status]').should('not.exist');
+    cy.get('@defaultBadge').find('> button').click();
+    cy.get('@defaultBadge').find('div[role=status]').should('exist');
+  });
+
+  it('checks for and trigger dot badge', () => {
+    cy.get('div[data-cy=badge-84]').as('dotBadge');
+    cy.get('@dotBadge').find('div[role=status]').should('exist');
+
+    cy.get('@dotBadge').find('> button').click();
+    cy.get('@dotBadge').find('div[role=status]').should('not.exist');
+    cy.get('@dotBadge').find('> button').click();
+    cy.get('@dotBadge').find('div[role=status]').should('exist');
+  });
+});
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -23,6 +23,7 @@ const navigation = ref([
       { to: { name: 'data-tables' }, title: 'Data Tables' },
       { to: { name: 'cards' }, title: 'Cards' },
       { to: { name: 'tabs' }, title: 'Tabs' },
+      { to: { name: 'badges' }, title: 'Badges' },
     ],
   },
 ]);

diff --git a/example/src/main.ts b/example/src/main.ts
@@ -18,6 +18,7 @@ import {
   RiInformationLine,
   RiMacbookLine,
   RiMoonLine,
+  RiStarFill,
   RiSunLine,
   RuiPlugin,
 } from '@rotki/ui-library-compat';
@@ -29,6 +30,7 @@ Vue.use(PiniaVuePlugin);
 Vue.use(RuiPlugin, {
   icons: [
     RiMoonLine,
+    RiStarFill,
     RiSunLine,
     RiMacbookLine,
     RiArrowLeftLine,

diff --git a/example/src/router/index.ts b/example/src/router/index.ts
@@ -95,6 +95,11 @@ const router = new VueRouter({
       name: 'tabs',
       component: () => import('@/views/TabView.vue'),
     },
+    {
+      path: '/badges',
+      name: 'badges',
+      component: () => import('@/views/BadgeView.vue'),
+    },
   ],
 });