@rancher/shell 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/rancher-components/BadgeState/BadgeState.spec.ts

@@ -0,0 +1,12 @@
+import { shallowMount } from '@vue/test-utils';
+import { BadgeState } from './index';
+
+describe('BadgeState.vue', () => {
+  it('renders props.msg when passed', () => {
+    const label = 'Hello, World!';
+
+    const wrapper = shallowMount(BadgeState, { propsData: { label } });
+
+    expect(wrapper.find('span').text()).toMatch(label);
+  });
+});

package/rancher-components/BadgeState/BadgeState.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+interface Badge {
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+/**
+ * Badge state component.
+ * <p>Represents a badge whose label and color is either taken from the value property or
+ * from the label and color properties. The state property takes precedence.</p>
+ */
+export default Vue.extend({
+  props: {
+    /**
+     * A value having the properties `stateBackground` and `stateDisplay`
+     */
+    value: {
+      type:    Object as PropType<Badge>,
+      default: null
+    },
+
+    /**
+     * Badge color. `stateBackground` of the value property takes precedence if supplied
+     */
+    color: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Optional icon to be shown before the label
+     */
+    icon: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Label to display in the badge. `stateDisplay` of the value property takes precedence if supplied
+     */
+    label: {
+      type:    String,
+      default: null
+    }
+  },
+
+  computed: {
+    bg(): string | null {
+      return this.value?.stateBackground || this.color;
+    },
+
+    msg(): string | null {
+      return this.value?.stateDisplay || this.label;
+    }
+  }
+});
+</script>
+
+<template>
+  <span :class="{'badge-state': true, [bg]: true}">
+    <i v-if="icon" class="icon" :class="{[icon]: true, 'mr-5': !!msg}" />{{ msg }}
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  .badge-state {
+    align-items: center;
+    display: inline-flex;
+    padding: 2px 10px;
+    border: 1px solid transparent;
+    border-radius: 20px;
+
+    &.bg-info {
+      border-color: var(--primary);
+    }
+
+    &.bg-error {
+      border-color: var(--error);
+    }
+
+    &.bg-warning {
+      border-color: var(--warning);
+    }
+
+    // Successful states are de-emphasized by using [text-]color instead of background-color
+    &.bg-success {
+      color: var(--success);
+      background: transparent;
+      border-color: var(--success);
+    }
+  }
+</style>
+<style lang="scss">
+  // TODO: #6005
+  // Investigate why this is here.. I don't think that styles for sortable table should belong here
+  .sortable-table TD .badge-state {
+    @include clip;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    max-width: 110px;
+    font-size: .85em;
+    vertical-align: middle;
+  }
+</style>

package/rancher-components/BadgeState/index.ts

@@ -0,0 +1 @@
+export { default as BadgeState } from './BadgeState.vue';

package/rancher-components/Banner/Banner.test.ts

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils';
+import { Banner } from './index';
+
+describe('component: Banner', () => {
+  it('should display text based on label', () => {
+    const label = 'test';
+    const wrapper = mount(Banner, { propsData: { label } });
+
+    const element = wrapper.find('span').element;
+
+    expect(element.textContent).toBe(label);
+  });
+});

package/rancher-components/Banner/Banner.vue

@@ -0,0 +1,163 @@
+<script lang="ts">
+import Vue from 'vue';
+import { nlToBr } from '@shell/utils/string';
+import { stringify } from '@shell/utils/error';
+
+export default Vue.extend({
+  props: {
+    /**
+     * A color class that represents the color of the banner.
+     * @values primary, secondary, success, warning, error, info
+     */
+    color: {
+      type:    String,
+      default: 'secondary'
+    },
+    /**
+     * The label to display as the banner's default content.
+     */
+    label: {
+      type:    [String, Error, Object],
+      default: null
+    },
+    /**
+     * The i18n key for the label to display as the banner's default content.
+     */
+    labelKey: {
+      type:    String,
+      default: null
+    },
+    /**
+     * Toggles the banner's close button.
+     */
+    closable: {
+      type:    Boolean,
+      default: false
+    },
+    /**
+     * Toggles the stacked class for the banner.
+     */
+    stacked: {
+      type:    Boolean,
+      default: false
+    }
+  },
+  computed: {
+    /**
+     * Return message text as label.
+     */
+    messageLabel(): string | void {
+      return !(typeof this.label === 'string') ? stringify(this.label) : undefined;
+    }
+  },
+  methods: { nlToBr }
+});
+</script>
+<template>
+  <div
+    class="banner"
+    :class="{
+      [color]: true,
+      closable,
+      stacked
+    }"
+  >
+    <slot>
+      <t v-if="labelKey" :k="labelKey" :raw="true" />
+      <span v-else-if="messageLabel">{{ messageLabel }}</span>
+      <span v-else v-html="nlToBr(label)" />
+    </slot>
+    <div v-if="closable" class="closer" @click="$emit('close')">
+      <i class="icon icon-2x icon-close closer-icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  $left-border-size: 4px;
+
+  .banner {
+    padding: 10px;
+    margin: 15px 0;
+    width: 100%;
+    transition: all 0.2s ease;
+    position: relative;
+    line-height: 20px;
+
+    &.stacked {
+      padding: 0 10px;
+      margin: 0;
+      transition: none;
+      &:first-child {
+        padding-top: 10px;
+      }
+      &:last-child {
+        padding-bottom: 10px;
+      }
+    }
+
+    &.closable {
+      padding-right: 40px;
+    }
+
+    .closer {
+      display: flex;
+      align-items: center;
+
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 40px;
+      line-height: 42px;
+      text-align: center;
+
+      .closer-icon {
+        font-size: 22px;
+        opacity: 0.7;
+
+        &:hover {
+          opacity: 1;
+          color: var(--link);
+        }
+      }
+    }
+
+    &.primary {
+      background: var(--primary);
+      border-left: solid $left-border-size var(--primary);
+      color: var(--body-text);
+    }
+
+    &.secondary {
+      background: var(--default-banner-bg);
+      border-left: solid $left-border-size var(--default);
+      color: var(--body-text);
+    }
+
+    &.success {
+      background: var(--success-banner-bg);
+      border-left: solid $left-border-size var(--success);
+      color: var(--body-text);
+    }
+
+    &.info {
+      background: var(--info-banner-bg);
+      border-left: solid $left-border-size var(--info);
+      color: var(--body-text);
+    }
+
+    &.warning {
+      background: var(--warning-banner-bg);
+      border-left: solid $left-border-size var(--warning);
+      color: var(--body-text);
+    }
+
+    &.error {
+      background: var(--error-banner-bg);
+      border-left: solid $left-border-size var(--error);
+      color: var(--error);
+    }
+  }
+</style>

package/rancher-components/Banner/index.ts

@@ -0,0 +1 @@
+export { default as Banner } from './Banner.vue';

package/rancher-components/Card/Card.vue

@@ -0,0 +1,150 @@
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name:  'Card',
+  props: {
+    /**
+     * The card's title.
+     */
+    title: {
+      type:    String,
+      default: ''
+    },
+    /**
+     * The text content for the card's body.
+     */
+    content: {
+      type:    String,
+      default: ''
+    },
+    /**
+     * The function to invoke when the default action button is clicked.
+     */
+    buttonAction: {
+      type:    Function,
+      default: (): void => { }
+    },
+    /**
+     * The text for the default action button.
+     */
+    buttonText: {
+      type:    String,
+      default: 'go'
+    },
+    /**
+     * Toggles the card's highlight-border class.
+     */
+    showHighlightBorder: {
+      type:    Boolean,
+      default: true
+    },
+    /**
+     * Toggles the card's Actions section.
+     */
+    showActions: {
+      type:    Boolean,
+      default: true
+    },
+    sticky: {
+      type:    Boolean,
+      default: false,
+    },    
+  }
+});
+</script>
+
+<template>
+  <div class="card-container" :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}">
+    <div class="card-wrap">
+      <div class="card-title">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <hr />
+      <div class="card-body">
+        <slot name="body">
+          {{ content }}
+        </slot>
+      </div>
+      <div v-if="showActions" class="card-actions">
+        <slot name="actions">
+          <button class="btn role-primary" @click="buttonAction">
+            {{ buttonText }}
+          </button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss'>
+ .card-container {
+  &.highlight-border {
+    border-left: 5px solid var(--primary);
+  }
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-basis: 40%;
+  margin: 10px;
+  min-height: 100px;
+  padding: 10px;
+  box-shadow: 0 0 20px var(--shadow);
+  &:not(.top) {
+    align-items: top;
+    flex-direction: row;
+    justify-content: start;
+  }
+  .card-wrap {
+    width: 100%;
+  }
+   & .card-body {
+    color: var(--input-label);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+   }
+   & .card-actions {
+     align-self: end;
+     display: flex;
+     padding-top: 20px;
+   }
+   & .card-title {
+    align-items: center;
+    display: flex;
+    width: 100%;
+     h5 {
+       margin: 0;
+     }
+    .flex-right {
+      margin-left: auto;
+    }
+   }
+
+  // Sticky mode will stick header and footer to top and bottom with content in the middle scrolling
+   &.card-sticky {
+      // display: flex;
+      // flex-direction: column;
+      overflow: hidden;
+
+    .card-wrap {
+      display: flex;
+      flex-direction: column;
+
+      .card-body {
+        justify-content: flex-start;
+        overflow: scroll;
+      }
+
+      > * {
+        flex: 0;
+      }
+
+      .card-body {
+        flex: 1;
+      }
+    }
+   }
+ }
+</style>

package/rancher-components/Card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card.vue';

package/rancher-components/Form/Checkbox/Checkbox.test.ts

@@ -0,0 +1,77 @@
+import { shallowMount } from '@vue/test-utils';
+import { Checkbox } from './index';
+
+describe('Checkbox.vue', () => {
+  it('is unchecked by default', () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+  });
+
+  it('renders a true value', () => {
+    const wrapper = shallowMount(Checkbox, { propsData: { value: true } });
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('updates from false to true when props change', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const cbInput = wrapper.find('input[type="checkbox"]').element as HTMLInputElement;
+
+    expect(cbInput.checked).toBe(false);
+
+    await wrapper.setProps({ value: true });
+
+    expect(cbInput.checked).toBe(true);
+  });
+
+  it('emits an input event with a true value', async () => {
+    const wrapper = shallowMount(Checkbox);
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(true);
+  });
+
+  it('emits an input event with a custom valueWhenTrue', async () => {
+    const valueWhenTrue = 'BIG IF TRUE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.length).toBe(1);
+    expect(wrapper.emitted().input?.[0][0]).toBe(valueWhenTrue);
+  });
+
+  it('updates from valueWhenTrue to falsy', async () => {
+    const valueWhenTrue = 'REAL HUGE IF FALSE';
+    const event = {
+      target: { tagName: 'input', href: null },
+      stopPropagation: () => { },
+      preventDefault: () => { }
+    };
+
+    const wrapper = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+
+    (wrapper.vm as any).clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.[0][0]).toBe(null);
+  })
+});