@rancher/shell 1.2.0 → 1.2.2

package/rancher-components/components/Accordion/Accordion.vue

@@ -1,86 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
-
-export default defineComponent({
-  props: {
-    title: {
-      type:    String,
-      default: ''
-    },
-
-    titleKey: {
-      type:    String,
-      default: null
-    },
-
-    openInitially: {
-      type:    Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return { isOpen: this.openInitially };
-  },
-
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
-
-  methods: {
-    toggle() {
-      this.isOpen = !this.isOpen;
-    }
-  }
-});
-</script>
-
-<template>
-  <div class="accordion-container">
-    <div
-      class="accordion-header"
-      data-testid="accordion-header"
-      @click="toggle"
-    >
-      <i
-        class="icon text-primary"
-        :class="{'icon-chevron-down':isOpen, 'icon-chevron-up':!isOpen}"
-        data-testid="accordion-chevron"
-      />
-      <slot name="header">
-        <h4
-          data-testid="accordion-title-slot-content"
-          class="mb-0"
-        >
-          {{ titleKey ? t(titleKey) : title }}
-        </h4>
-      </slot>
-    </div>
-    <div
-      v-show="isOpen"
-      class="accordion-body"
-      data-testid="accordion-body"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.accordion-container {
-  border: 1px solid var(--border)
-}
-.accordion-header {
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  &>*{
-    padding: 5px 0px 5px 0px;
-  }
-  I {
-    margin: 0px 10px 0px 10px;
-  }
-}
-.accordion-body {
-  padding: 10px;
-}
-</style>

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

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

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

@@ -1,12 +0,0 @@
-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/components/BadgeState/BadgeState.vue

@@ -1,111 +0,0 @@
-<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/components/BadgeState/index.ts

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

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

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

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

@@ -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);
-  });
-});