Преглед на файлове

HUE-9485 [frontend] Add a HueIcon component

Johan Ahlen преди 5 години
родител
ревизия
d5e7977c06

+ 29 - 0
desktop/core/src/desktop/js/components/HueIcon.test.ts

@@ -0,0 +1,29 @@
+// 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 HueIcon from './HueIcon.vue';
+
+describe('HueIcon.vue', () => {
+  it('should render', () => {
+    const wrapper = shallowMount(HueIcon, {
+      propsData: {
+        type: 'hi-some-icon'
+      }
+    });
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

+ 62 - 0
desktop/core/src/desktop/js/components/HueIcon.vue

@@ -0,0 +1,62 @@
+<!--
+  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>
+  <svg class="hue-icon">
+    <use :xlink:href="xlinkAttr" />
+  </svg>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
+
+  @Component
+  export default class HueIcon extends Vue {
+    @Prop({ required: true })
+    type!: string;
+
+    get xlinkAttr(): string {
+      return '#' + this.type;
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  button .hue-icon {
+    font-size: 16px;
+  }
+
+  .hue-icon {
+    vertical-align: middle;
+    display: inline-block !important; // d3 conflict
+    width: 1em !important; // d3 conflict
+    height: 1em !important; // d3 conflict
+    fill: currentColor;
+    margin-bottom: 0.2em;
+
+    &.hue-icon-fw {
+      width: 1.28571429em !important; // To match FA
+    }
+
+    &.hue-icon-bigger {
+      height: 1.1em !important;
+    }
+  }
+</style>

+ 11 - 0
desktop/core/src/desktop/js/components/__snapshots__/HueIcon.test.ts.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HueIcon.vue should render 1`] = `
+<svg
+  class="hue-icon"
+>
+  <use
+    xlink:href="#hi-some-icon"
+  />
+</svg>
+`;

+ 1 - 0
desktop/core/src/desktop/js/components/styles/colors.scss

@@ -108,6 +108,7 @@ $hue-trunk:                       $fluid-purple-300;
 
 $hue-action-primary:              $fluid-blue-500;
 $hue-action-primary-hover:        #00609b;
+$hue-action-disabled:             rgba(0,0,0,.26);
 $hue-border-color:                $fluid-gray-300;
 $hue-disabled-color:              $fluid-gray-100;
 $hue-error-color:                 $fluid-red-500;