@namelivia/vue-components 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namelivia/vue-components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "scripts": {

package/src/Buttons/RegularButton/RegularButton.cy.js

@@ -2,13 +2,37 @@ import RegularButton from './RegularButton.vue'
 
 describe('<RegularButton />', () => {
 
-  it('should properly render', () => {
+  it('should display text', () => {
       cy.mount(RegularButton, {
           props: {
               text: 'Click me'
           }
       })
+      cy.get('button').should('contain.text', 'Click me')
+  })
+
+  it('clicking the button fires a click event', () => {
+    const onClickSpy = cy.spy().as('onClickSpy')
+    cy.mount(RegularButton, {
+        props: { text: 'Click me', onClick: onClickSpy }
+    })
+    cy.get('button').click()
+    cy.get('@onClickSpy').should('have.been.called')
+  })
+
+  it('when the button is loading, should show the loading text and be disabled', () => {
+    const onClickSpy = cy.spy().as('onClickSpy')
+    cy.mount(RegularButton, {
+        props: {
+          text: 'Click me',
+          loading: true,
+          textWhileLoading: 'Loading...',
+          onClick: onClickSpy
+        }
+    })
+    cy.get('button').should('not.contain.text', 'Click me')
+    cy.get('button').should('contain.text', 'Loading...')
+    cy.get('button').should('be.disabled')
   })
-  //TODO: Add more tests
 
 })

package/src/Buttons/RegularButton/RegularButton.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-button(v-on:click="onClick" class="regular-button")
-  | {{text}}
+button(v-on:click="onClick" :class="cssClass" :disabled="loading")
+  | {{ loading ? textWhileLoading : text }}
 </template>
 
 <script lang="js">
@@ -9,8 +9,24 @@ export default defineComponent({
   name: "RegularButton",
   props: {
     text: String,
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    textWhileLoading: {
+      type: String,
+      default: '...',
+    },
   },
   emits: ['click'],
+  computed: {
+    cssClass: function () {
+      if (this.loading) {
+        return 'regular-button loading';
+      }
+      return 'regular-button'
+    },
+  },
   methods: {
     onClick(evt) {
       this.$emit('click', evt);
@@ -34,5 +50,14 @@ export default defineComponent({
 .regular-button:hover {
   background-color: var(--color-regular-hover);
 }
+
+/* Loading state */
+.loading {
+  background-color: var(--color-regular-disabled);
+  cursor: wait;
+}
+.loading:hover {
+  background-color: var(--color-regular-disabled);
+}
 </style>
 

package/src/Navbar/MobileMenuButton.vue

@@ -45,23 +45,13 @@ export default defineComponent({
   justify-content: center;
   padding: 0.5rem;
   border-radius: var(--border-radius-big);
-  color: var(--color-menu-button);
+  color: var(--color-navbar-text);
   background-color: transparent;
   transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   border: none;
   cursor: pointer;
 }
 
-.menu-button:hover {
-  color: var(--color-menu-button-text-hover);
-  background-color: var(--color-menu-button-hover);
-}
-
-.menu-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-menu-button-shadow-focus);
-}
-
 .menu-icon {
   display: block;
   height: 1.5rem;

package/src/Navbar/MobileNavigationLink.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-a(:href="href" :class="linkClass" aria-current="page")
+a(:href="linkDestination" :class="linkClass" aria-current="page")
   | {{ text }}
 </template>
 <script lang="js">
@@ -24,34 +24,37 @@ export default defineComponent({
       }
       return 'regular-link'
     },
+    linkDestination: function () {
+      return this.current ? '#' : this.href
+    },
   },
 })
 </script>
 <style scoped>
 .current-link {
-  background-color: #111827;
-  color: #ffffff;
+  background-color: var(--color-navbar-current-background);
+  color: var(--color-navbar-text);
   display: block;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   border-radius: 0.375rem;
-  font-size: 1rem;
-  font-weight: 500;
+  font-size: var(--font-size-navbar);
+  text-decoration: none;
+  cursor: default;
 }
 .regular-link {
-  color: #d1d5db;
+  color: var(--color-navbar-text);
   display: block;
   padding: 0.5rem 0.75rem;
   border-radius: 0.375rem;
-  font-size: 1rem;
-  font-weight: 500;
+  font-size: var(--font-size-navbar);
   transition: background-color 0.2s ease, color 0.2s ease;
+  text-decoration: none;
 }
 
 .regular-link:hover {
-  background-color: #374151;
-  color: #ffffff;
+  background-color: var(--color-navbar-link-background);
 }
 </style>

package/src/Navbar/MobileNavigationLinks.vue

@@ -14,6 +14,7 @@ transition(
         :key="link.id"
         :href="link.href"
         :text="link.text"
+        :current="link.current"
       )
 </template>
 <script lang="js">
@@ -44,14 +45,14 @@ export default defineComponent({
 
 .fade-scale-enter-from,
 .fade-scale-leave-to {
-  opacity: 0;
-  transform: scale(0.7);
+  transform: scaleY(0);
+  transform-origin: top;
 }
 
 .fade-scale-enter-to,
 .fade-scale-leave-from {
-  opacity: 1;
-  transform: scale(1);
+  transform: scaleY(1);
+  transform-origin: top;
 }
 #mobile-menu {
   display: block;
@@ -64,6 +65,7 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  background-color: var(--color-navbar-background);
 }
 @media (min-width: 640px) {
   #mobile-menu {

package/src/Navbar/Navbar.stories.js

@@ -8,9 +8,9 @@ export default {
 export const Default = {
   args: {
     links: [
-        { text: 'Home', href: '/' },
-        { text: 'About', href: '/about' },
-        { text: 'Contact', href: '/contact' },
+        { text: 'Home', href: '/home', current: true },
+        { text: 'About', href: '/about', current: false },
+        { text: 'Contact', href: '/contact', current: false },
     ],
     locale: 'en',
     currentUserEmail: 'foo@bar.com',

package/src/Navbar/Navbar.vue

@@ -74,7 +74,6 @@ export default defineComponent({
 </script>
 <style scoped>
 .navbar {
-  background-color: #1f2937;
 }
 
 .navbar-container {
@@ -83,6 +82,7 @@ export default defineComponent({
   margin-right: auto;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
+  background-color: var(--color-navbar-background);
 }
 
 .flex-header {

package/src/Navbar/NavigationLink.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-a(:href="href" :class="linkClass" aria-current="page")
+a(:href="linkDestination" :class="linkClass" aria-current="page")
   | {{ text }}
 </template>
 <script lang="js">
@@ -24,35 +24,39 @@ export default defineComponent({
       }
       return 'regular-link'
     },
+    linkDestination: function () {
+      return this.current ? '#' : this.href
+    },
   },
 })
 </script>
 <style scoped>
 .current-link {
-  background-color: #111827;
-  color: #ffffff;
+  background-color: var(--color-navbar-current-background);
+  color: var(--color-navbar-text);
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.875rem;
+  font-size: var(--font-size-navbar);
+  text-decoration: none;
+  cursor: default;
 }
 
 .regular-link {
-  color: #d1d5db;
+  color: var(--color-navbar-text);
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: var(--font-size-navbar);
   transition: background-color 0.2s ease, color 0.2s ease;
+  text-decoration: none;
 }
 
 .regular-link:hover {
-  background-color: #374151;
-  color: #ffffff;
+  background-color: var(--color-navbar-link-background);
 }
 </style>

package/src/Navbar/NavigationLinks.vue

@@ -6,6 +6,7 @@ div(class="links-container")
       :key="link.id"
       :href="link.href"
       :text="link.text"
+      :current="link.current"
     )
 </template>
 <script lang="js">

package/src/Navbar/RightContent.vue

@@ -42,12 +42,15 @@ export default defineComponent({
   display: flex;
   align-items: center;
   padding-right: 0.5rem;
+  color: var(--color-navbar-text);
+  font-size: var(--font-size-navbar);
 }
 
 .circle-image {
   border-radius: 9999px;
   padding: 0.25rem;
   height: 50px;
+  width: 50px;
 }
 
 @media (min-width: 640px) {

package/styles/index.css

@@ -24,6 +24,7 @@
   --color-regular: hsl(210, 100%, 53%);
   --color-regular-text: hsl(0, 0%, 100%);
   --color-regular-hover: hsl(210, 100%, 46%);
+  --color-regular-disabled: hsl(210, 91%, 70%);
   /* SELECTOR */
   --color-selector-label: hsl(210, 4%, 39%);
   --color-selector-text: hsl(210, 4%, 39%);
@@ -102,4 +103,24 @@
   /* CONTAINER */
   --container-max-width: 1200px;
   --container-marging: 0 auto;
+  /* NAVBAR */
+  --color-navbar-background: hsl(210, 7%, 21%);
+  --color-navbar-text: hsl(0, 0%, 100%);
+  --color-navbar-current-background: hsl(210, 80%, 23%);
+  --color-navbar-link-background: hsl(210, 50%, 23%);
+  --font-size-navbar: 0.875rem;
+}
+
+.one-theme{
+  /* Danger */
+  --color-danger: hsl(43, 84%, 58%);
+  --color-danger-text: hsl(0, 0%, 100%);
+  --color-danger-hover: hsl(43, 84%, 39%);
+}
+
+.another-theme{
+  /* Danger */
+  --color-danger: hsl(102, 84%, 58%);
+  --color-danger-text: hsl(0, 0%, 100%);
+  --color-danger-hover: hsl(102, 84%, 39%);
 }