Rc counter badge

pkg/rancher-components/src/components/Pill/RcCounterBadge/RcCounterBadge.test.ts

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import RcCounterBadge from './index';
+import { Type } from '../types';
+
+describe('component: RcCounterBadge', () => {
+  const types: Type[] = ['active', 'inactive'];
+
+  it.each(types)('should apply correct classes for type "%s"', (type) => {
+    const wrapper = mount(RcCounterBadge, { props: { type, count: 1 } });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.classes()).toContain(type);
+  });
+
+  it('should apply the correct class for disabled', () => {
+    const wrapper = mount(RcCounterBadge, {
+      props: {
+        type: 'active', disabled: true, count: 1
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.classes()).toContain('disabled');
+  });
+
+  it('should show the correct count below 1000', () => {
+    const count = 999;
+    const wrapper = mount(RcCounterBadge, {
+      props: {
+        type: 'active', disabled: true, count
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.text()).toBe(count.toString());
+  });
+
+  it('should show the correct count at or above 1000', () => {
+    const count = 1000;
+    const wrapper = mount(RcCounterBadge, {
+      props: {
+        type: 'active', disabled: true, count
+      }
+    });
+
+    const shapeEl = wrapper.find('.rc-counter-badge');
+
+    expect(shapeEl.text()).toBe('999+');
+  });
+});

pkg/rancher-components/src/components/Pill/RcCounterBadge/RcCounterBadge.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import RcTag from '@components/Pill/RcTag/RcTag.vue';
+import { RcCounterBadgeProps } from '@components/Pill/RcCounterBadge/types';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<RcCounterBadgeProps>(), { disabled: false });
+const displayCount = computed(() => props.count < 1000 ? props.count : '999+');
+</script>
+
+<template>
+  <RcTag
+    class="rc-counter-badge"
+    :type="props.type"
+    :disabled="props.disabled"
+  >
+    {{ displayCount }}
+  </RcTag>
+</template>
+
+<style lang="scss" scoped>
+.rc-counter-badge {
+  :deep() {
+    border-radius: 30px;
+  }
+}
+</style>

pkg/rancher-components/src/components/Pill/RcCounterBadge/index.ts

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

pkg/rancher-components/src/components/Pill/RcCounterBadge/types.ts

@@ -0,0 +1,7 @@
+import { Type } from '@components/Pill/types';
+
+export interface RcCounterBadgeProps {
+  count: number;
+  type: Type;
+  disabled?: boolean;
+}

pkg/rancher-components/src/components/Pill/RcTag/RcTag.test.ts

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils';
+import RcTag from './index';
+import { Type } from '../types';
+
+describe('component: RcTag', () => {
+  const types: Type[] = ['active', 'inactive'];
+
+  it.each(types)('should apply correct classes for type "%s"', (type) => {
+    const wrapper = mount(RcTag, { props: { type } });
+
+    const shapeEl = wrapper.find('.rc-tag');
+
+    expect(shapeEl.classes()).toContain(type);
+  });
+
+  it('should apply the correct class for disabled', () => {
+    const wrapper = mount(RcTag, { props: { type: 'active', disabled: true } });
+
+    const shapeEl = wrapper.find('.rc-tag');
+
+    expect(shapeEl.classes()).toContain('disabled');
+  });
+});

pkg/rancher-components/src/components/Pill/RcTag/RcTag.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { RcTagProps } from '@components/Pill/RcTag/types';
+
+const props = withDefaults(defineProps<RcTagProps>(), { disabled: false });
+</script>
+
+<template>
+  <div
+    class="rc-tag"
+    :class="{[props.type]: true, disabled: props.disabled}"
+  >
+    <slot name="default" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.rc-tag {
+    display: inline-flex;
+    padding: 1px 8px;
+    align-items: center;
+    gap: 8px;
+
+    border-radius: 4px;
+    border: 1px solid var(--rc-active-border);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: Lato;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+
+    &.active {
+        border-color: var(--rc-active-border);
+        background: var(--rc-active-background);
+        cursor: pointer;
+
+        &:hover {
+            border-color: var(--rc-primary-hover);
+            background: var(--rc-active-background);
+        }
+
+        &.disabled {
+            border-color: var(--rc-active-border);
+            background: var(--rc-active-disabled-background);
+            color: var(--rc-disabled-text-color);
+
+            cursor: not-allowed;
+        }
+    }
+
+    &.inactive {
+        background: var(--rc-inactive-background);
+        border-color: var(--rc-inactive-border);
+
+        &.disabled {
+            border-color: var(--rc-inactive-disabled-border);
+            color: var(--rc-disabled-text-color);
+        }
+    }
+}
+</style>

pkg/rancher-components/src/components/Pill/RcTag/index.ts

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

pkg/rancher-components/src/components/Pill/RcTag/types.ts

@@ -0,0 +1,6 @@
+import { Type } from '@components/Pill/types';
+
+export interface RcTagProps {
+  type: Type;
+  disabled?: boolean;
+}

pkg/rancher-components/src/components/Pill/types.ts

@@ -1,2 +1,3 @@
 export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
 export type Status = 'info' | 'success' | 'warning' | 'error' | 'unknown' | 'none';
+export type Type = 'active' | 'inactive';

shell/assets/styles/base/_color.scss

@@ -12,6 +12,7 @@
 
 $blue001: #1F67DB;
 $blue002: #DFE6F2;
+$blue003: #297DB4;
 
 $green001: #007032;
 $green002: #DCE7E1;

shell/assets/styles/themes/_light.scss

@@ -647,4 +647,16 @@ BODY, .theme-light {
 
   --rc-none: #{$gray002};
   --rc-none-secondary: #{$gray004};
+
+  --rc-primary-hover: #{$blue003};
+
+  --rc-active-background: #{$gray003};
+  --rc-active-disabled-background: #{$gray001};
+  --rc-active-border: #{$gray002};
+  --rc-inactive-border: #{$gray001};
+  --rc-inactive-background: #{$gray001};
+  --rc-inactive-disabled-border: #{$gray001};
+  --rc-disabled-background: #{$gray001};
+  --rc-disabled-text-color: #{$gray004};
+
 }

storybook/src/stories/Components/Pill/RcCounterBadge.mdx

@@ -0,0 +1,11 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import * as RcCounterBadgeStories from './RcCounterBadge.stories';
+
+<Meta of={RcCounterBadgeStories} />
+
+# RcCounterBadge
+Use the RcCounterBadge component to display/highlight the count of a resource
+
+<Canvas of={RcCounterBadgeStories.Example} layout="centered" />
+
+<Controls of={RcCounterBadgeStories.Example} />

storybook/src/stories/Components/Pill/RcCounterBadge.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import RcCounterBadge from '@components/Pill/RcCounterBadge/RcCounterBadge.vue';
+
+const meta: Meta<typeof RcCounterBadge> = {
+  component: RcCounterBadge,
+  argTypes:  {
+    count: {
+      control:     { type: 'number' },
+      description: 'The count that should display in the badge'
+    },
+    type: {
+      options:     ['active', 'inactive'],
+      control:     { type: 'select' },
+      description: 'Specifies the type of the tag.'
+    },
+    disabled: {
+      control:     { type: 'boolean' },
+      description: 'Specified if the tag is disabled.'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof RcCounterBadge>;
+
+const Default: Story = {
+  render: (args: any) => ({
+    components: { RcCounterBadge },
+    setup() {
+      return { args };
+    },
+    template: '<RcCounterBadge v-bind="args">{{args.default}}</RcCounterBadge>',
+  }),
+};
+
+export const Example: Story = {
+  ...Default,
+  args: {
+    type: 'inactive', disabled: false, count: 1000
+  },
+};

storybook/src/stories/Components/Pill/RcTag.mdx

@@ -0,0 +1,11 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import * as RcTagStories from './RcTag.stories';
+
+<Meta of={RcTagStories} />
+
+# RcTag
+Use the RcTag component to group or visually highlight some text.
+
+<Canvas of={RcTagStories.Example} layout="centered" />
+
+<Controls of={RcTagStories.Example} />

storybook/src/stories/Components/Pill/RcTag.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import RcTag from '@components/Pill/RcTag/RcTag.vue';
+
+const meta: Meta<typeof RcTag> = {
+  component: RcTag,
+  argTypes:  {
+    type: {
+      options:     ['active', 'inactive'],
+      control:     { type: 'select' },
+      description: 'Specifies the type of the tag.'
+    },
+    disabled: {
+      control:     { type: 'boolean' },
+      description: 'Specified if the tag is disabled.'
+    },
+    default: {
+      control: { type: 'text' },
+      name:    'default slot'
+    },
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof RcTag>;
+
+const Default: Story = {
+  render: (args: any) => ({
+    components: { RcTag },
+    setup() {
+      return { args };
+    },
+    template: '<RcTag v-bind="args">{{args.default}}</RcTag>',
+  }),
+};
+
+export const Example: Story = {
+  ...Default,
+  args: {
+    type: 'inactive', disabled: false, default: 'key: value'
+  },
+};