@rancher/shell 0.3.17 → 0.3.18

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

@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils';
+import { Banner } from './index';
+import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
+
+describe('component: Banner', () => {
+  it('should display text based on label', () => {
+    const label = 'test';
+    const wrapper = mount(
+      Banner,
+      {
+        directives: { cleanHtmlDirective },
+        propsData:  { label }
+      });
+
+    const element = wrapper.find('span').element;
+
+    expect(element.textContent).toBe(label);
+  });
+
+  it('should display an icon', () => {
+    const icon = 'my-icon';
+    const wrapper = mount(Banner, { propsData: { icon } });
+
+    const element = wrapper.find(`.${ icon }`).element;
+
+    expect(element.classList).toContain(icon);
+  });
+
+  it('should not display an icon', () => {
+    const wrapper = mount(Banner);
+
+    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+
+    expect(element).not.toBeDefined();
+  });
+
+  it('should emit close event', () => {
+    const wrapper = mount(Banner, { propsData: { closable: true } });
+    const element = wrapper.find(`[data-testid="banner-close"]`).element;
+
+    element.click();
+
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('should add the right color', () => {
+    const color = 'red';
+    const wrapper = mount(Banner, { propsData: { color } });
+
+    const element = wrapper.element;
+
+    expect(element.classList).toContain(color);
+  });
+
+  it('should stack the banner messages', () => {
+    const stacked = true;
+    const wrapper = mount(Banner, { propsData: { stacked } });
+
+    const element = wrapper.find(`[data-testid="banner-content"]`).element;
+
+    expect(element.classList).toContain('stacked');
+  });
+});

package/rancher-components/components/Banner/Banner.vue

@@ -0,0 +1,244 @@
+<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
+    },
+    /**
+     * Add icon for the banner
+     */
+    icon: {
+      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,
+    }"
+  >
+    <div
+      v-if="icon"
+      class="banner__icon"
+      data-testid="banner-icon"
+    >
+      <i
+        class="icon icon-2x"
+        :class="icon"
+      />
+    </div>
+    <div
+      class="banner__content"
+      data-testid="banner-content"
+      :class="{
+        closable,
+        stacked,
+        icon
+      }"
+    >
+      <slot>
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+          :raw="true"
+        />
+        <span v-else-if="messageLabel">{{ messageLabel }}</span>
+        <span
+          v-else
+          v-clean-html="nlToBr(label)"
+        />
+      </slot>
+      <div
+        v-if="closable"
+        class="banner__content__closer"
+        @click="$emit('close')"
+      >
+        <i
+          data-testid="banner-close"
+          class="icon icon-close closer-icon"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$left-border-size: 4px;
+$icon-size: 24px;
+
+.banner {
+  display: flex;
+  margin: 15px 0;
+  position: relative;
+  width: 100%;
+  color: var(--body-text);
+
+  &__icon {
+    width: $icon-size * 2;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: content-box;
+
+    .primary & {
+      background: var(--primary);
+    }
+
+    .secondary & {
+      background: var(--default);
+    }
+
+    .success & {
+      background: var(--success);
+    }
+
+    .info & {
+      background: var(--info);
+    }
+
+    .warning & {
+      background: var(--warning);
+    }
+
+    .error & {
+      background: var(--error);
+      color: var(--primary-text);
+    }
+  }
+
+  &__content {
+    padding: 10px;
+    transition: all 0.2s ease;
+    line-height: 20px;
+    width: 100%;
+    border-left: solid $left-border-size transparent;
+    display: flex;
+    gap: 3px;
+
+    .primary & {
+      background: var(--primary);
+      border-color: var(--primary);
+    }
+
+    .secondary & {
+      background: var(--default-banner-bg);
+      border-color: var(--default);
+    }
+
+    .success & {
+      background: var(--success-banner-bg);
+      border-color: var(--success);
+    }
+
+    .info & {
+      background: var(--info-banner-bg);
+      border-color: var(--info);
+    }
+
+    .warning & {
+      background: var(--warning-banner-bg);
+      border-color: var(--warning);
+    }
+
+    .error & {
+      background: var(--error-banner-bg);
+      border-color: var(--error);
+      color: var(--error);
+    }
+
+    &.stacked {
+      padding: 0 10px;
+      margin: 0;
+      transition: none;
+      &:first-child {
+        padding-top: 10px;
+      }
+      &:last-child {
+        padding-bottom: 10px;
+      }
+    }
+
+    &.closable {
+      padding-right: $icon-size * 2;
+    }
+
+    &__closer {
+      display: flex;
+      align-items: center;
+
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: $icon-size;
+      line-height: $icon-size;
+      text-align: center;
+
+      .closer-icon {
+        opacity: 0.7;
+
+        &:hover {
+          opacity: 1;
+          color: var(--link);
+        }
+      }
+    }
+
+    &.icon {
+      border-left: none;
+    }
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import { Card } from './index';
+
+describe('component: Card', () => {
+  const title = 'Card title';
+  const body = 'Card body';
+
+  it('should have a card title', () => {
+    const wrapper = mount(Card, {
+      propsData: { title },
+      slots:     { title: '<div>Card title</div>' }
+    });
+
+    const element = wrapper.find('[data-testid="card-title-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(title);
+  });
+
+  it('should have a card body', () => {
+    const wrapper = mount(Card, {
+      propsData: { body },
+      slots:     { body: '<div>Card body</div>' }
+    });
+    const element = wrapper.find('[data-testid="card-body-slot"]');
+
+    expect(element.exists()).toBe(true);
+    expect(element.text()).toBe(body);
+  });
+
+  it('should display the default card actions', () => {
+    const wrapper = mount(Card);
+    const element = wrapper.find('[data-testid="card-actions-slot"]');
+
+    expect(element.exists()).toBe(true);
+  });
+});

package/rancher-components/components/Card/Card.vue

@@ -0,0 +1,167 @@
+<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}"
+    data-testid="card"
+  >
+    <div class="card-wrap">
+      <div
+        class="card-title"
+        data-testid="card-title-slot"
+      >
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <hr>
+      <div
+        class="card-body"
+        data-testid="card-body-slot"
+      >
+        <slot name="body">
+          {{ content }}
+        </slot>
+      </div>
+      <div
+        v-if="showActions"
+        class="card-actions"
+        data-testid="card-actions-slot"
+      >
+        <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/components/Card/index.ts

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

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

@@ -0,0 +1,68 @@
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import { Checkbox } from './index';
+
+describe('checkbox.vue', () => {
+  const event = {
+    target:          { tagName: 'input', href: null },
+    stopPropagation: () => { },
+    preventDefault:  () => { }
+  } as unknown as MouseEvent;
+
+  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: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox);
+
+    wrapper.vm.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 wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: false, valueWhenTrue } });
+
+    wrapper.vm.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 wrapper: Wrapper<InstanceType<typeof Checkbox>> = shallowMount(Checkbox, { propsData: { value: valueWhenTrue, valueWhenTrue } });
+
+    wrapper.vm.clicked(event);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted().input?.[0][0]).toBeNull();
+  });
+});