@rancher/shell 2.0.0 → 2.0.2-rc.1

package/rancher-components/components/BadgeState/BadgeState.vue

@@ -1,111 +0,0 @@
-<script lang="ts">
-import { PropType, defineComponent } 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 defineComponent({
-  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', bg]">
-    <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/components/BadgeState/index.ts

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

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

@@ -1,59 +0,0 @@
-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);
-  });
-
-  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

@@ -1,244 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { nlToBr } from '@shell/utils/string';
-import { stringify } from '@shell/utils/error';
-
-export default defineComponent({
-  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

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

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

@@ -1,37 +0,0 @@
-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

@@ -1,167 +0,0 @@
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-export default defineComponent({
-  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 as PropType<(event: MouseEvent) => void>,
-      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: auto;
-      }
-
-      > * {
-        flex: 0;
-      }
-
-      .card-body {
-        flex: 1;
-      }
-    }
-   }
- }
-</style>

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

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

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

@@ -1,68 +0,0 @@
-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();
-  });
-});