Browse Source

HUE-9485 [frontend] Create a HueButton Vue component

Johan Ahlen 5 years ago
parent
commit
7884515656

+ 25 - 0
desktop/core/src/desktop/js/components/HueButton.test.ts

@@ -0,0 +1,25 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// 'License'); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an 'AS IS' BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { shallowMount } from '@vue/test-utils';
+import HueButton from './HueButton.vue';
+
+describe('HueButton.vue', () => {
+  it('should render', () => {
+    const wrapper = shallowMount(HueButton);
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

+ 33 - 0
desktop/core/src/desktop/js/components/HueButton.vue

@@ -0,0 +1,33 @@
+<!--
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<template>
+  <button class="btn" type="button" @click="$emit('click')"><slot /></button>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+
+  @Component
+  export default class HueButton extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+  // TODO: Scope the button styles.
+</style>

+ 8 - 0
desktop/core/src/desktop/js/components/__snapshots__/HueButton.test.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HueButton.vue should render 1`] = `
+<button
+  class="btn"
+  type="button"
+/>
+`;

+ 8 - 7
desktop/core/src/desktop/js/components/dropdown/Dropdown.vue

@@ -18,12 +18,10 @@
 
 <template>
   <div :class="{ 'dropdown-inline': inline }">
-    <a v-if="inline" href="javascript: void(0);" @click="toggleMenu">
+    <hue-link v-if="inline" @click="toggleMenu">
       {{ text }} <i class="fa fa-caret-down" />
-    </a>
-    <button v-else class="btn" type="button" @click="toggleMenu">
-      {{ text }} <i class="fa fa-caret-down" />
-    </button>
+    </hue-link>
+    <hue-button v-else @click="toggleMenu"> {{ text }} <i class="fa fa-caret-down" /> </hue-button>
     <div :class="{ open: menuOpen }" class="hue-dropdown-container" @click="toggleMenu">
       <div class="hue-dropdown-menu">
         <ul>
@@ -35,11 +33,14 @@
 </template>
 
 <script lang="ts">
+  import HueButton from '../HueButton.vue';
+  import HueLink from '../HueLink.vue';
   import Vue from 'vue';
   import Component from 'vue-class-component';
   import { Prop } from 'vue-property-decorator';
-
-  @Component
+  @Component({
+    components: { HueButton, HueLink }
+  })
   export default class Dropdown extends Vue {
     @Prop({ required: false, default: '' })
     text: string;

+ 6 - 14
desktop/core/src/desktop/js/components/dropdown/__snapshots__/Dropdown.test.ts.snap

@@ -4,16 +4,12 @@ exports[`Dropdown.vue should render dropdown with slots 1`] = `
 <div
   class=""
 >
-  <button
-    class="btn"
-    type="button"
-  >
-    
-     
+  <hue-button-stub>
+      
     <i
       class="fa fa-caret-down"
     />
-  </button>
+  </hue-button-stub>
    
   <div
     class="hue-dropdown-container"
@@ -35,16 +31,12 @@ exports[`Dropdown.vue should render empty dropdown 1`] = `
 <div
   class=""
 >
-  <button
-    class="btn"
-    type="button"
-  >
-    
-     
+  <hue-button-stub>
+      
     <i
       class="fa fa-caret-down"
     />
-  </button>
+  </hue-button-stub>
    
   <div
     class="hue-dropdown-container"