component changes for pending task feature (#270)

Author: just-at-uber

client/components/button-fill.vue

@@ -20,13 +20,24 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+const COLOR_TYPE_DEFAULT = 'primary';
+const COLOR_TYPES = ['primary', 'secondary', 'tertiary'];
+const SIZE_TYPE_DEFAULT = 'medium';
+const SIZE_TYPES = ['small', 'medium', 'large'];
+const TAG_TYPE_DEFAULT = 'button';
+const TAG_LINK_TYPES = ['a', 'router-link'];
+
 export default {
   name: 'button-fill',
   props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
     color: {
       type: String,
-      default: 'primary',
-      validator: value => ['primary', 'secondary', 'tertiary'].includes(value),
+      default: COLOR_TYPE_DEFAULT,
+      validator: value => COLOR_TYPES.includes(value),
     },
     disabled: {
       type: Boolean,
@@ -40,15 +51,33 @@ export default {
     label: {
       type: String,
     },
+    size: {
+      type: String,
+      default: SIZE_TYPE_DEFAULT,
+      validator: value => SIZE_TYPES.includes(value),
+    },
     tag: {
       type: String,
-      default: 'button',
+      default: TAG_TYPE_DEFAULT,
     },
     to: {
-      type: Object,
+      type: [String, Object],
+    },
+    uppercase: {
+      type: Boolean,
+      default: false,
     },
   },
   computed: {
+    computedTag() {
+      const { disabled, tag } = this;
+
+      if (disabled && TAG_LINK_TYPES.includes(tag)) {
+        return 'button';
+      }
+
+      return tag;
+    },
     disabledLabelText() {
       return this.disabled ? this.disabledLabel : '';
     },
@@ -68,12 +97,15 @@ export default {
     :aria-disabled="disabled"
     class="button-fill"
     :class="{
-      disabled: disabled,
+      active,
       [color]: color,
+      disabled,
+      [size]: size,
+      uppercase,
     }"
     :disabled="disabled"
     :href="href"
-    :is="tag"
+    :is="computedTag"
     :to="to"
     :title="disabledLabelText"
     @click="onClick"
@@ -85,32 +117,51 @@ export default {
 <style lang="stylus">
 .button-fill {
   border: none;
+  color: #fff !important;
   cursor: pointer;
   display: inline-block;
-  font-size: 14px;
   font-weight: 600;
-  padding: 13px 21px;
   transition: all 400ms ease;
-  color: #fff !important;
   white-space: nowrap;
 
+  &:focus {
+    outline: none;
+  }
+
   &.disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
+  // color
   &.primary {
     background-color: #11939a;
 
-    &:hover {
+    &.active {
+      background-color: #0e767b;
+    }
+
+    &:focus, &:hover {
+      background-color: #10858b;
+    }
+
+    &:active {
       background-color: #0e767b;
     }
   }
 
   &.secondary {
     background-color: #ca3b27;
 
-    &:hover {
+    &.active {
+      background-color: #a22f1f;
+    }
+
+    &:focus, &:hover {
+      background-color: #b63523;
+    }
+
+    &:active {
       background-color: #a22f1f;
     }
   }
@@ -119,9 +170,38 @@ export default {
     background-color: transparent;
     color: #11939a !important;
 
-    &:hover {
+    &.active {
       color: #0e767b  !important;
     }
+
+    &:focus, &:hover {
+      color: #10858b !important;
+    }
+
+    &:active {
+      color: #0e767b  !important;
+    }
+  }
+
+  // size
+  &.small {
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+
+  &.medium {
+    font-size: 14px;
+    padding: 13px 21px;
+  }
+
+  &.large {
+    font-size: 26px;
+    padding: 26px 42px;
+  }
+
+  // uppercase
+  &.uppercase {
+    text-transform: uppercase;
   }
 }
 </style>

client/components/button-group.vue

@@ -0,0 +1,81 @@
+<script>
+// Copyright (c) 2021 Uber Technologies Inc.
+//
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import ButtonFill from './button-fill';
+
+export default {
+  name: 'button-group',
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    label: {
+      type: String,
+    },
+    uppercase: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    'button-fill': ButtonFill,
+  },
+  methods: {
+    onClick(item) {
+      if (this.value !== item) {
+        this.$emit('change', item);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="button-group">
+    <span class="label" v-if="label">
+      {{ label }}
+    </span>
+    <button-fill
+      :active="item === value"
+      :key="item"
+      :label="item"
+      :uppercase="uppercase"
+      v-for="item in items"
+      @click="() => onClick(item)"
+    />
+  </div>
+</template>
+
+<style lang="stylus">
+.button-group {
+  display: inline-block;
+
+  .label {
+    margin-right: 10px;
+  }
+}
+</style>

client/components/index.js

@@ -21,6 +21,7 @@
 
 export { default as BarLoader } from './bar-loader';
 export { default as ButtonFill } from './button-fill';
+export { default as ButtonGroup } from './button-group';
 export { default as ButtonIcon } from './button-icon';
 export { default as Copy } from './copy';
 export { default as DataViewer } from './data-viewer';

client/components/navigation-link.vue

@@ -22,7 +22,31 @@
 
 export default {
   name: 'navigation-link',
-  props: ['exact', 'icon', 'id', 'label', 'to'],
+  props: {
+    exact: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    notificationCount: {
+      type: Number,
+      default: 0,
+    },
+    to: {
+      type: [String, Object],
+    },
+  },
 };
 </script>
 
@@ -34,26 +58,43 @@ export default {
     :id="id"
     :to="to"
   >
-    {{ label }}
+    <span>{{ label }}</span>
+    <span class="notification" v-if="notificationCount">{{
+      notificationCount
+    }}</span>
   </router-link>
 </template>
 
 <style lang="stylus">
 a.navigation-link {
+  border-bottom: 4px solid transparent;
   display: inline-block;
-  padding: 11px 18px;
-  transition: all 400ms ease;
   font-weight: 500;
+  padding: 11px 18px;
   text-transform: uppercase;
-  border-bottom: 4px solid transparent;
+  transition: all 400ms ease;
 
   &:before {
     font-family: 'uber-icons';
     margin-right: 5px;
   }
 
+  &:focus, &:hover {
+    border-bottom-color: #0e767b;
+    outline: none;
+  }
+
   &.router-link-active {
     border-bottom-color: #11939a;
   }
+
+  & > .notification {
+    background-color: #11939a;
+    border-radius: 7px;
+    color: black;
+    font-size: 12px;
+    margin-left: 5px;
+    padding: 0 6px;
+  }
 }
 </style>

client/components/no-results.vue

@@ -22,15 +22,28 @@
 
 export default {
   name: 'no-results',
-  props: ['results'],
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    message: {
+      type: String,
+      default: 'No Results',
+    },
+    results: {
+      type: Array,
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="no-results-container" v-if="results && !results.length">
-    <div class="no-results">
-      No Results
-    </div>
+  <div
+    class="no-results-container"
+    v-if="!isLoading && results && !results.length"
+  >
+    <div class="no-results">{{ message }}</div>
   </div>
 </template>