@bethinkpl/design-system 18.9.3 → 19.0.1

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1708002388355,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.21"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1709738701008,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.21"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/js/components/{Badges/BadgeScore → BadgeScore}/BadgeScore.stories.ts

@@ -1,6 +1,6 @@
 import BadgeScore from './BadgeScore.vue';
 import { BADGE_SCORE_COLORS, BADGE_SCORE_SIZES } from './BadgeScore.consts';
-import { ICONS } from '../../Icons/Icon';
+import { ICONS } from '../Icons/Icon';
 
 import { Meta, StoryFn } from '@storybook/vue3';
 

package/lib/js/components/{Badges/BadgeScore → BadgeScore}/BadgeScore.vue

@@ -20,9 +20,9 @@
 </template>
 
 <style scoped lang="scss">
-@import '../../../../styles/settings/spacings';
-@import '../../../../styles/settings/colors/tokens';
-@import '../../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/typography/tokens';
 
 $badge-score-min-width: 66px;
 $badge-score-small-min-width: 56px;
@@ -159,7 +159,7 @@ $badge-score-colors: (
 
 <script lang="ts">
 import { BADGE_SCORE_COLORS, BADGE_SCORE_SIZES } from './BadgeScore.consts';
-import WnlIcon, { ICONS, ICON_SIZES } from '../../Icons/Icon';
+import WnlIcon, { ICONS, ICON_SIZES } from '../Icons/Icon';
 import { toRaw } from 'vue';
 
 export default {

package/lib/js/components/{Pill/Pill.consts.ts → Chip/Chip.consts.ts}

@@ -1,9 +1,9 @@
-export const PILL_SIZES = {
+export const CHIP_SIZES = {
 	X_SMALL: 'x-small',
 	SMALL: 'small',
 } as const;
 
-export const PILL_COLORS = {
+export const CHIP_COLORS = {
 	PRIMARY: 'primary',
 	PRIMARY_STRONG: 'primaryStrong',
 	NEUTRAL: 'neutral',
@@ -14,7 +14,12 @@ export const PILL_COLORS = {
 	INFO: 'info',
 } as const;
 
-export const PILL_STATES = {
+export const CHIP_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 } as const;
+
+export const CHIP_RADIUSES = {
+	CAPSULE: 'capsule',
+	ROUNDED: 'rounded',
+} as const;

package/lib/js/components/{Pill/Pill.spec.ts → Chip/Chip.spec.ts}

@@ -1,31 +1,32 @@
 import { shallowMount } from '@vue/test-utils';
 
-import Pill from './Pill.vue';
+import Chip from './Chip.vue';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { ICONS } from '../Icons/Icon';
-import { PILL_COLORS, PILL_SIZES } from './Pill.consts';
+import { CHIP_COLORS, CHIP_SIZES } from './Chip.consts';
+import Icon from '../Icons/Icon';
 
 interface createComponentOptions {
 	label?: string;
 	leftIcon?: IconDefinition | null;
-	hasDelete?: boolean;
+	isRemovable?: boolean;
 	size?: string;
 	color?: string;
 }
 
-describe('Pill', () => {
+describe('Chip', () => {
 	const createComponent = ({
 		label = 'random label',
 		leftIcon = null,
-		hasDelete = false,
-		size = PILL_SIZES.SMALL,
-		color = PILL_COLORS.NEUTRAL,
+		isRemovable = false,
+		size = CHIP_SIZES.SMALL,
+		color = CHIP_COLORS.NEUTRAL,
 	}: createComponentOptions = {}) => {
-		return shallowMount(Pill, {
+		return shallowMount(Chip, {
 			props: {
 				label,
 				leftIcon,
-				hasDelete,
+				isRemovable,
 				size,
 				color,
 			} as any,
@@ -48,56 +49,56 @@ describe('Pill', () => {
 	it("doesn't render leftIcon by default", () => {
 		const component = createComponent({ leftIcon: null });
 
-		expect(component.find('.pill__leftIcon').exists()).toBe(false);
+		expect(component.find('.chip__leftIcon').exists()).toBe(false);
 	});
 
 	it('renders leftIcon', () => {
 		const component = createComponent({ leftIcon: Object.freeze(ICONS.FA_TAG) });
 
-		expect(component.find('.pill__leftIcon').exists()).toBe(true);
-		expect(component.findComponent<typeof Pill>('.pill__leftIcon').props().icon).toEqual(
+		expect(component.find('.chip__leftIcon').exists()).toBe(true);
+		expect(component.find('.chip__leftIcon').findComponent(Icon).props().icon).toEqual(
 			ICONS.FA_TAG,
 		);
 	});
 
 	it("doesn't render leftIcon by default", () => {
-		const component = createComponent({ hasDelete: false });
+		const component = createComponent({ isRemovable: false });
 
-		expect(component.find('.pill__delete').exists()).toBe(false);
+		expect(component.find('.chip__remove').exists()).toBe(false);
 	});
 
-	it('renders delete', () => {
-		const component = createComponent({ hasDelete: true });
+	it('renders remove', () => {
+		const component = createComponent({ isRemovable: true });
 
-		const deleteButton = component.findComponent<typeof Pill>('.pill__delete');
-		expect(deleteButton.exists()).toBe(true);
-		expect(deleteButton.props().icon).toBe(ICONS.FA_XMARK);
+		const removeButton = component.findComponent<typeof Chip>('.chip__remove');
+		expect(removeButton.exists()).toBe(true);
+		expect(removeButton.props().icon).toBe(ICONS.FA_XMARK);
 
-		deleteButton.trigger('click');
-		expect(component.emitted('delete')?.length).toBe(1);
+		removeButton.trigger('click');
+		expect(component.emitted('remove')?.length).toBe(1);
 	});
 
 	it("doesn' contain x-small class by default", () => {
-		const component = createComponent({ size: PILL_SIZES.SMALL });
+		const component = createComponent({ size: CHIP_SIZES.SMALL });
 
 		expect(component.classes()).not.toContain('-x-small');
 	});
 
 	it('has size class when x-small', () => {
-		const component = createComponent({ size: PILL_SIZES.X_SMALL });
+		const component = createComponent({ size: CHIP_SIZES.X_SMALL });
 
 		expect(component.classes()).toContain('-x-small');
 	});
 
 	test.each([
-		[PILL_COLORS.PRIMARY, '-color-primary'],
-		[PILL_COLORS.PRIMARY_STRONG, '-color-primaryStrong'],
-		[PILL_COLORS.NEUTRAL, '-color-neutral'],
-		[PILL_COLORS.FAIL, '-color-fail'],
-		[PILL_COLORS.SUCCESS, '-color-success'],
-		[PILL_COLORS.INFO, '-color-info'],
-		[PILL_COLORS.WARNING, '-color-warning'],
-		[PILL_COLORS.INVERTED, '-color-inverted'],
+		[CHIP_COLORS.PRIMARY, '-color-primary'],
+		[CHIP_COLORS.PRIMARY_STRONG, '-color-primaryStrong'],
+		[CHIP_COLORS.NEUTRAL, '-color-neutral'],
+		[CHIP_COLORS.FAIL, '-color-fail'],
+		[CHIP_COLORS.SUCCESS, '-color-success'],
+		[CHIP_COLORS.INFO, '-color-info'],
+		[CHIP_COLORS.WARNING, '-color-warning'],
+		[CHIP_COLORS.INVERTED, '-color-inverted'],
 	])(
 		'correct class for color: %s prop, expectedClass: %s',
 		(color: string, expectedClass: string) => {
@@ -124,10 +125,10 @@ describe('Pill', () => {
 		},
 	);
 
-	it("doesn't render delete when size x-small", () => {
-		const component = createComponent({ hasDelete: true, size: PILL_SIZES.X_SMALL });
+	it("doesn't render remove when size x-small", () => {
+		const component = createComponent({ isRemovable: true, size: CHIP_SIZES.X_SMALL });
 
-		const deleteButton = component.find('.pill__delete');
-		expect(deleteButton.exists()).toBe(false);
+		const removeButton = component.find('.chip__remove');
+		expect(removeButton.exists()).toBe(false);
 	});
 });

package/lib/js/components/Chip/Chip.stories.ts

@@ -0,0 +1,99 @@
+import Chip from './Chip.vue';
+import { CHIP_COLORS, CHIP_RADIUSES, CHIP_SIZES, CHIP_STATES } from './Chip.consts';
+import { ICONS } from '../Icons/Icon';
+import LogoBadge from './logo-badge.svg';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/Chip',
+	component: Chip,
+} as Meta<typeof Chip>;
+
+const StoryTemplate: StoryFn<typeof Chip> = (args) => ({
+	components: { Chip, LogoBadge },
+	setup() {
+		return { ...args };
+	},
+	template:
+		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" />',
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+});
+const StoryTemplateWithAccessory: StoryFn<typeof Chip> = (args) => ({
+	components: { Chip, LogoBadge },
+	setup() {
+		return { ...args };
+	},
+	template:
+		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius">' +
+		'<template #accessory><logo-badge :style="svgStyle" /></template>' +
+		'</chip>',
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+	computed: {
+		svgStyle() {
+			if (this.size === CHIP_SIZES.SMALL) {
+				return { width: '12px', height: '12px' };
+			}
+
+			return { width: '8px', height: '8px' };
+		},
+	},
+});
+
+export const Interactive = StoryTemplate.bind({});
+export const InteractiveWithAccessory = StoryTemplateWithAccessory.bind({});
+const args = {
+	label: 'Chip z labelem',
+	isLabelUppercase: false,
+	leftIcon: null,
+	radius: CHIP_RADIUSES.CAPSULE,
+	size: CHIP_SIZES.SMALL,
+	color: CHIP_COLORS.NEUTRAL,
+	colorHex: '',
+	isRemovable: false,
+} as Args;
+const argTypes = {
+	leftIcon: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+	},
+	size: {
+		control: { type: 'select', options: Object.values(CHIP_SIZES) },
+	},
+	color: {
+		control: { type: 'select', options: Object.values(CHIP_COLORS) },
+	},
+	state: {
+		control: { type: 'select', options: Object.values(CHIP_STATES) },
+		defaultValue: CHIP_STATES.DEFAULT,
+	},
+	radius: {
+		control: { type: 'select', options: Object.values(CHIP_RADIUSES) },
+		defaultValue: CHIP_RADIUSES.CAPSULE,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=3690%3A69072',
+	},
+};
+InteractiveWithAccessory.argTypes = argTypes;
+InteractiveWithAccessory.args = args;
+
+InteractiveWithAccessory.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=3690%3A69072',
+	},
+};

package/lib/js/components/{Pill/Pill.vue → Chip/Chip.vue}

@@ -1,26 +1,31 @@
 <template>
 	<div
-		class="pill"
+		class="chip"
 		:class="{
-			'-x-small': size === PILL_SIZES.X_SMALL,
+			'-x-small': size === CHIP_SIZES.X_SMALL,
 			[colorClassName]: true,
-			'-disabled': state === PILL_STATES.DISABLED,
+			'-disabled': state === CHIP_STATES.DISABLED,
+			'-uppercase': isLabelUppercase,
+			'-rounded': radius === CHIP_RADIUSES.ROUNDED,
 		}"
 		:title="label"
+		:style="{ backgroundColor: colorHex }"
 	>
-		<icon
-			v-if="leftIcon"
-			class="pill__leftIcon"
-			:icon="leftIcon"
-			:size="size === PILL_SIZES.X_SMALL ? ICON_SIZES.XXX_SMALL : ICON_SIZES.XX_SMALL"
-		/>
-		<span class="pill__label">{{ label }}</span>
+		<span v-if="$slots.accessory || leftIcon" class="chip__leftIcon">
+			<slot name="accessory">
+				<icon
+					:icon="leftIcon"
+					:size="size === CHIP_SIZES.X_SMALL ? ICON_SIZES.XXX_SMALL : ICON_SIZES.XX_SMALL"
+				/>
+			</slot>
+		</span>
+		<span class="chip__label">{{ label }}</span>
 		<icon-button
-			v-if="size !== PILL_SIZES.X_SMALL && hasDelete"
-			class="pill__delete"
+			v-if="size !== CHIP_SIZES.X_SMALL && isRemovable"
+			class="chip__remove"
 			:touchable="false"
 			:state="
-				state === PILL_STATES.DISABLED
+				state === CHIP_STATES.DISABLED
 					? ICON_BUTTON_STATES.DISABLED
 					: ICON_BUTTON_STATES.DEFAULT
 			"
@@ -28,18 +33,19 @@
 			:size="ICON_BUTTON_SIZES.XX_SMALL"
 			:icon="ICONS.FA_XMARK"
 			:elevation="BUTTON_ELEVATIONS.X_SMALL"
-			@click="$emit('delete')"
+			@click="$emit('remove')"
 		/>
 	</div>
 </template>
 
 <style lang="scss" scoped>
 @import '../../../styles/settings/spacings';
+@import '../../../styles/settings/radiuses';
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/typography/tokens';
 
-$pill-min-height: 16px;
-$pill-colors: (
+$chip-min-height: 16px;
+$chip-colors: (
 	'neutral': (
 		'label': $color-neutral-text-strong,
 		'icon': $color-neutral-icon,
@@ -120,17 +126,26 @@ $pill-colors: (
 			'background': $color-default-background,
 		),
 	),
+	'invertedHex': (
+		'label': $color-inverted-text,
+		'icon': $color-inverted-icon,
+		'disabled': (
+			'label': $color-inverted-text-disabled,
+			'icon': $color-inverted-icon-disabled,
+		),
+	),
 );
 
-.pill {
+.chip {
 	$self: &;
 
-	@each $color-name, $color-map in $pill-colors {
+	@each $color-name, $color-map in $chip-colors {
 		&.-color-#{$color-name} {
 			background-color: map-get($color-map, 'background');
 
 			#{$self}__leftIcon {
 				color: map-get($color-map, 'icon');
+				fill: map-get($color-map, 'icon');
 			}
 
 			#{$self}__label {
@@ -142,6 +157,7 @@ $pill-colors: (
 
 				#{$self}__leftIcon {
 					color: map-get(map-get($color-map, 'disabled'), 'icon');
+					fill: map-get($color-map, 'icon');
 				}
 
 				#{$self}__label {
@@ -152,7 +168,7 @@ $pill-colors: (
 	}
 
 	align-items: center;
-	border-radius: 100px;
+	border-radius: $radius-xl;
 	display: inline-flex;
 	padding: $space-xxxxxs $space-xxxxxs $space-xxxxxs $space-xxs;
 
@@ -160,6 +176,16 @@ $pill-colors: (
 		pointer-events: none;
 	}
 
+	&.-rounded {
+		border-radius: $radius-s;
+	}
+
+	&.-uppercase {
+		#{$self}__label {
+			@include label-s-default-bold-uppercase;
+		}
+	}
+
 	&__label {
 		@include label-s-default-bold;
 
@@ -170,11 +196,12 @@ $pill-colors: (
 	}
 
 	&__leftIcon {
+		display: flex;
 		margin-right: $space-xxxxs;
 	}
 
 	&.-x-small {
-		min-height: $pill-min-height;
+		min-height: $chip-min-height;
 		padding-left: $space-xxxs;
 
 		#{$self}__leftIcon {
@@ -186,12 +213,22 @@ $pill-colors: (
 
 			margin: 0 $space-xxxxs 0 0;
 		}
+
+		&.-uppercase {
+			#{$self}__label {
+				@include label-xs-default-bold-uppercase;
+			}
+		}
+
+		&.-rounded {
+			border-radius: $radius-xs;
+		}
 	}
 }
 </style>
 
 <script lang="ts">
-import { PILL_COLORS, PILL_SIZES, PILL_STATES } from './Pill.consts';
+import { CHIP_COLORS, CHIP_RADIUSES, CHIP_SIZES, CHIP_STATES } from './Chip.consts';
 import IconButton, {
 	ICON_BUTTON_COLORS,
 	ICON_BUTTON_SIZES,
@@ -202,25 +239,29 @@ import { BUTTON_ELEVATIONS } from '../Buttons/Button';
 import { Value } from '../../utils/type.utils';
 import { toRaw } from 'vue';
 
-const PILL_ICON_BUTTONS_COLOR_MAP = {
-	[PILL_COLORS.INVERTED]: ICON_BUTTON_COLORS.PRIMARY,
-	[PILL_COLORS.NEUTRAL]: ICON_BUTTON_COLORS.NEUTRAL,
-	[PILL_COLORS.PRIMARY]: ICON_BUTTON_COLORS.PRIMARY,
-	[PILL_COLORS.PRIMARY_STRONG]: ICON_BUTTON_COLORS.PRIMARY,
-	[PILL_COLORS.FAIL]: ICON_BUTTON_COLORS.FAIL,
-	[PILL_COLORS.WARNING]: ICON_BUTTON_COLORS.WARNING,
-	[PILL_COLORS.SUCCESS]: ICON_BUTTON_COLORS.SUCCESS,
-	[PILL_COLORS.INFO]: ICON_BUTTON_COLORS.INFO,
+const CHIP_ICON_BUTTONS_COLOR_MAP = {
+	[CHIP_COLORS.INVERTED]: ICON_BUTTON_COLORS.PRIMARY,
+	[CHIP_COLORS.NEUTRAL]: ICON_BUTTON_COLORS.NEUTRAL,
+	[CHIP_COLORS.PRIMARY]: ICON_BUTTON_COLORS.PRIMARY,
+	[CHIP_COLORS.PRIMARY_STRONG]: ICON_BUTTON_COLORS.PRIMARY,
+	[CHIP_COLORS.FAIL]: ICON_BUTTON_COLORS.FAIL,
+	[CHIP_COLORS.WARNING]: ICON_BUTTON_COLORS.WARNING,
+	[CHIP_COLORS.SUCCESS]: ICON_BUTTON_COLORS.SUCCESS,
+	[CHIP_COLORS.INFO]: ICON_BUTTON_COLORS.INFO,
 };
 
 export default {
-	name: 'Pill',
+	name: 'Chip',
 	components: { Icon, IconButton },
 	props: {
 		label: {
 			type: String,
 			required: true,
 		},
+		isLabelUppercase: {
+			type: Boolean,
+			default: false,
+		},
 		leftIcon: {
 			type: Object,
 			default: null,
@@ -228,33 +269,44 @@ export default {
 				return Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
+		radius: {
+			type: String,
+			default: CHIP_RADIUSES.CAPSULE,
+			validator(value: Value<typeof CHIP_RADIUSES>) {
+				return Object.values(CHIP_RADIUSES).includes(value);
+			},
+		},
 		size: {
 			type: String,
-			default: PILL_SIZES.SMALL,
+			default: CHIP_SIZES.SMALL,
 			validator(size) {
-				return Object.values(PILL_SIZES).includes(size);
+				return Object.values(CHIP_SIZES).includes(size);
 			},
 		},
 		color: {
 			type: String,
-			default: PILL_COLORS.NEUTRAL,
+			default: CHIP_COLORS.NEUTRAL,
 			validator(color) {
-				return Object.values(PILL_COLORS).includes(color);
+				return Object.values(CHIP_COLORS).includes(color);
 			},
 		},
+		colorHex: {
+			type: String,
+			default: null,
+		},
 		state: {
 			type: String,
-			default: PILL_STATES.DEFAULT,
-			validator(value: Value<typeof PILL_STATES>) {
-				return Object.values(PILL_STATES).includes(value);
+			default: CHIP_STATES.DEFAULT,
+			validator(value: Value<typeof CHIP_STATES>) {
+				return Object.values(CHIP_STATES).includes(value);
 			},
 		},
-		hasDelete: {
+		isRemovable: {
 			type: Boolean,
 			default: false,
 		},
 	},
-	emits: ['delete'],
+	emits: ['remove'],
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -262,17 +314,30 @@ export default {
 			ICON_BUTTON_STATES: Object.freeze(ICON_BUTTON_STATES),
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
 			ICON_SIZES: Object.freeze(ICON_SIZES),
-			PILL_SIZES: Object.freeze(PILL_SIZES),
-			PILL_STATES: Object.freeze(PILL_STATES),
+			CHIP_SIZES: Object.freeze(CHIP_SIZES),
+			CHIP_STATES: Object.freeze(CHIP_STATES),
+			CHIP_RADIUSES: Object.freeze(CHIP_RADIUSES),
 		};
 	},
 	computed: {
 		colorClassName(): string {
+			if (this.colorHex) {
+				return `-color-invertedHex`;
+			}
 			return `-color-${this.color}`;
 		},
-
+		customStyle() {
+			const styles: { backgroundColor?: string } = {};
+			if (this.colorHex) {
+				styles.backgroundColor = this.colorHex;
+			}
+			return styles;
+		},
 		iconButtonColor(): string {
-			return PILL_ICON_BUTTONS_COLOR_MAP[this.color] || ICON_BUTTON_COLORS.PRIMARY;
+			if (this.colorHex) {
+				return ICON_BUTTON_COLORS.NEUTRAL;
+			}
+			return CHIP_ICON_BUTTONS_COLOR_MAP[this.color] || ICON_BUTTON_COLORS.PRIMARY;
 		},
 	},
 };

package/lib/js/components/Chip/index.ts

@@ -0,0 +1,4 @@
+import Chip from './Chip.vue';
+
+export default Chip;
+export * from './Chip.consts';

package/lib/js/components/Chip/logo-badge.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" ><path  fill-rule="evenodd" d="M13.47 3.952 3.951 13.47a3.702 3.702 0 0 0 5.235 5.234l9.517-9.517a3.701 3.701 0 1 0-5.235-5.235zM2.207 20.449a6.17 6.17 0 0 0 8.724 0l9.518-9.518a6.17 6.17 0 1 0-8.724-8.724l-9.518 9.518a6.17 6.17 0 0 0 0 8.724z" clip-rule="evenodd"/><path d="M2.207 20.45a6.17 6.17 0 0 0 8.724 0l5.405-5.406L7.612 6.32l-5.405 5.405a6.17 6.17 0 0 0 0 8.724z"/></svg>

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts

@@ -28,7 +28,7 @@ const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
 			:is-interactive-eyebrow="isInteractiveEyebrow"
 			:is-second-level="isSecondLevel"
 			:left-icon="ICONS[leftIcon]"
-			:pill-label="pillLabel"
+			:chip-label="chipLabel"
 			:title-color="titleColor"
 			:title-ellipsis="titleEllipsis"
 			:title="title"
@@ -42,7 +42,7 @@ const args = {} as Args;
 const argTypes = {
 	title: { control: { type: 'text' }, defaultValue: 'Header Title' },
 	eyebrowText: { control: { type: 'text' }, defaultValue: 'eyebrow' },
-	pillLabel: { control: { type: 'text' }, defaultValue: 'pill' },
+	chipLabel: { control: { type: 'text' }, defaultValue: 'chip' },
 	hasDivider: { control: { type: 'boolean' }, defaultValue: false },
 	isClosable: { control: { type: 'boolean' }, defaultValue: true },
 	isSecondLevel: { control: { type: 'boolean' }, defaultValue: false },

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue

@@ -35,7 +35,7 @@
 						:title="titleEllipsis ? title : undefined"
 						>{{ title }}</span
 					>
-					<pill v-if="pillLabel" :label="pillLabel" />
+					<chip v-if="chipLabel" :label="chipLabel" />
 				</div>
 			</div>
 			<icon-button
@@ -141,7 +141,7 @@ import { PropType } from 'vue';
 import Button from '../../Buttons/Button/Button.vue';
 import Divider from '../../Divider/Divider.vue';
 import IconButton from '../../Buttons/IconButton/IconButton.vue';
-import Pill from '../../Pill/Pill.vue';
+import Chip from '../../Chip/Chip.vue';
 import Icon from '../../Icons/Icon/Icon.vue';
 import { BUTTON_TYPES } from '../../Buttons/Button';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
@@ -156,7 +156,7 @@ export default {
 		Divider,
 		Icon,
 		IconButton,
-		Pill,
+		Chip,
 	},
 	props: {
 		title: {
@@ -167,7 +167,7 @@ export default {
 			type: String,
 			default: null,
 		},
-		pillLabel: {
+		chipLabel: {
 			type: String,
 			default: null,
 		},