@bethinkpl/design-system 18.5.0 → 18.7.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1694009089312,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"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":1695643463435,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"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/jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
 		'^design-system/lib/(.*)$': '<rootDir>/lib/$1',
 		'^design-system/styles/(.*)$': '<rootDir>/lib/styles/$1',
 		'^design-system/images/(.*)$': '<rootDir>/lib/images/$1',
+		'^vue-popperjs/dist/vue-popper.css': '<rootDir>/lib/js/tests/emptyModule.ts',
 	},
 	testMatch: ['<rootDir>/lib/js/**/*.spec.ts', '<rootDir>/tools/importers/*.spec.ts'],
 	transform: {

package/lib/images/icons/comments-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64"><g fill="currentColor" clip-path="url(#a)"><path d="M20.823 6c11.394 0 20.789 8.023 20.789 17.875 0 9.953-9.395 17.875-20.79 17.875-1.898 0-3.697-.203-5.496-.61C12.327 43.07 7.93 45 2.433 45c-1 0-1.9-.508-2.2-1.523-.399-.914-.299-1.93.4-2.743.1 0 2.3-2.437 3.899-5.687C1.733 32 .034 28.14.034 23.875.034 14.023 9.329 6 20.823 6Zm-4.398 30.367c1.5.406 2.899.508 4.398.508 8.795 0 15.991-5.79 15.991-13 0-7.11-7.196-13-15.991-13-8.895 0-15.992 5.89-15.992 13 0 3.656 1.7 6.297 3.199 7.82l2.398 2.54-1.599 3.148c-.4.61-.8 1.32-1.2 2.031 1.8-.508 3.5-1.32 5.198-2.437l1.7-1.016 1.898.406Zm27.686-17.265C55.205 19.508 64 27.328 64 36.875c0 4.266-1.799 8.125-4.598 11.172 1.6 3.25 3.798 5.687 3.898 5.687.7.813.8 1.828.4 2.743C63.4 57.492 62.5 58 61.501 58c-5.497 0-9.894-1.93-12.893-3.86-1.799.407-3.598.61-5.397.61-8.196 0-15.292-4.063-18.69-9.953 1.699-.203 3.398-.61 4.897-1.219 2.799 3.86 7.896 6.297 13.793 6.297 1.4 0 2.799-.102 4.298-.508l1.899-.406 1.699 1.016c1.699 1.117 3.398 1.93 5.197 2.437-.4-.71-.8-1.422-1.2-2.031l-1.598-3.149 2.398-2.539c1.5-1.523 3.298-4.164 3.298-7.82 0-6.703-6.396-12.188-14.492-12.898l.1-.102c0-1.625-.3-3.25-.7-4.773Z"/><path d="M19.746 29.73c-.6.61-1.699.61-2.298 0l-3.998-4.062c-.6-.61-.6-1.727 0-2.336.6-.61 1.699-.61 2.299 0l2.898 2.945 7.596-7.82c.6-.61 1.7-.61 2.299 0 .6.61.6 1.727 0 2.336l-8.796 8.938Z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h64v64H0z"/></clipPath></defs></svg>

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

@@ -20,18 +20,23 @@ const StoryTemplate: StoryFn<typeof Dropdown> = (args) => ({
 		return { ...args };
 	},
 	template: `
-			<div style="position: relative">
-			<dropdown :trigger-action="triggerAction" :force-show="forceShow" :same-width="sameWidth" :radius="radius"
-								:placement="placement">
-				<template #reference><span>Dropdown entry point</span></template>
-				<template #default="{ close }">
-					<select-list>
-						<select-list-item label="One" @click.native="close" />
-						<select-list-item label="Two" @click.native="close" />
-					</select-list>
-				</template>
-			</dropdown>
-			</div>`,
+    <div style="position: relative">
+      <dropdown :trigger-action="triggerAction"
+                :force-show="forceShow"
+                :same-width="sameWidth"
+                :radius="radius"
+                :placement="placement"
+                :max-height="maxHeight">
+        <template #reference="{ isOpened }"><span>Dropdown entry point {{ isOpened ? 'opened' : 'closed' }}</span>
+        </template>
+        <template #default="{ close }">
+          <select-list>
+            <select-list-item label="One" @click.native="close" />
+            <select-list-item label="Two" @click.native="close" />
+          </select-list>
+        </template>
+      </dropdown>
+    </div>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -41,6 +46,7 @@ const args = {
 	radius: DROPDOWN_RADIUSES.BOTH,
 	forceShow: false,
 	sameWidth: false,
+	maxHeight: '',
 } as Args;
 
 const argTypes = {
@@ -56,6 +62,10 @@ const argTypes = {
 		control: { type: 'select', options: Object.values(DROPDOWN_PLACEMENTS) },
 		defaultValue: DROPDOWN_PLACEMENTS.BOTTOM_START,
 	},
+	maxHeight: {
+		control: { type: 'text' },
+		defaultValue: '',
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/Dropdown/Dropdown.vue

@@ -9,8 +9,8 @@
 		:trigger="triggerAction"
 		:delay-on-mouse-out="300"
 		@document-click="$emit('document-click')"
-		@hide="$emit('hide')"
-		@show="$emit('show')"
+		@hide="onHide"
+		@show="onShow"
 	>
 		<div
 			class="popper dsDropdown"
@@ -20,11 +20,17 @@
 				'-radiusBottom -radiusTop': radius === DROPDOWN_RADIUSES.BOTH,
 			}"
 		>
-			<slot :close="close" />
+			<div
+				class="dsDropdown__scrollableWrapper"
+				:class="{ '-heightLimited': !!maxHeight }"
+				:style="scrollableWrapperStyles"
+			>
+				<slot :close="close" />
+			</div>
 		</div>
 
 		<template #reference>
-			<slot name="reference" />
+			<slot name="reference" :is-opened="isOpened" />
 		</template>
 	</vue-popper>
 </template>
@@ -42,6 +48,7 @@
 	box-shadow: $shadow-m;
 	max-width: 100%;
 	min-width: 128px;
+	overflow: hidden;
 	padding: 0;
 	text-align: left;
 
@@ -62,6 +69,12 @@
 	&[x-placement^='top'] {
 		margin-bottom: $space-xxxxs;
 	}
+
+	&__scrollableWrapper {
+		&.-heightLimited {
+			overflow-y: auto;
+		}
+	}
 }
 </style>
 
@@ -113,15 +126,25 @@ export default {
 				return Object.values(DROPDOWN_PLACEMENTS).includes(placement);
 			},
 		},
+		maxHeight: {
+			type: String,
+			default: null,
+		},
 	},
 	emits: ['document-click', 'hide', 'show'],
 	data() {
 		return {
 			key: 1,
+			isOpened: false,
 			DROPDOWN_RADIUSES: Object.freeze(DROPDOWN_RADIUSES),
 		};
 	},
 	computed: {
+		scrollableWrapperStyles() {
+			return {
+				...(this.maxHeight && { maxHeight: this.maxHeight }),
+			};
+		},
 		options() {
 			return {
 				modifiers: { preventOverflow: { padding: 0 } },
@@ -153,6 +176,7 @@ export default {
 	},
 	methods: {
 		close() {
+			this.isOpened = false;
 			this.$refs.popper.doClose();
 		},
 		updateKey() {
@@ -160,6 +184,14 @@ export default {
 			// vue-popperjs doesn't support changing props in existing component
 			this.key++;
 		},
+		onHide() {
+			this.isOpened = false;
+			this.$emit('hide');
+		},
+		onShow() {
+			this.isOpened = true;
+			this.$emit('show');
+		},
 	},
 };
 </script>

package/lib/js/components/Icons/Icon/Icon.consts.ts

@@ -1,6 +1,7 @@
 import HeadWithQuestionMark from '../../../../images/icons/head-with-question-mark.svg';
 import Ribbon from '../../../../images/icons/ribbon.svg';
 import SlidersSearch from '../../../../images/icons/sliders-search.svg';
+import CommentsCheck from '../../../../images/icons/comments-check.svg';
 import { FONTAWESOME_ICONS } from '../../../icons/fontawesome';
 import { Value } from '../../../utils/type.utils';
 
@@ -21,6 +22,7 @@ const BETHINK_ICONS = {
 	HEAD_WITH_QUESTION_MARK: HeadWithQuestionMark,
 	RIBBON: Ribbon,
 	SLIDERS_SEARCH: SlidersSearch,
+	COMMENTS_CHECK: CommentsCheck,
 } as const;
 
 export const ICONS = {

package/lib/js/components/Pagination/Pagination.spec.ts

@@ -9,6 +9,19 @@ describe('Pagination', () => {
 				currentPage,
 				itemsTotalAmount,
 			} as any,
+			global: {
+				stubs: {
+					Dropdown: {
+						template: '<div class="dropdown"><slot name="reference" /><slot/></div>',
+					},
+					SelectList: {
+						template: '<div class="select-list"><slot/></div>',
+					},
+					SelectListItem: {
+						template: '<div class="select-list-item"><slot/></div>',
+					},
+				},
+			},
 		});
 	};
 
@@ -98,10 +111,112 @@ describe('Pagination', () => {
 		},
 	])('should calculate correct pagination for %o', ({ props, expected }) => {
 		const component = createComponent(props);
+
 		const elements: Array<string> = [];
 		component.findAll('.ds-pagination__itemWrapper').forEach((element) => {
 			elements.push(element.text().trim());
 		});
 		expect(elements).toEqual(expected);
 	});
+
+	test.each([
+		{
+			props: {
+				currentPage: 3,
+				itemsTotalAmount: 300,
+			},
+			expected: {
+				dropdowns: 1,
+				dropdownItemsCount: 10,
+				dropdownItems: [
+					{ label: '1 (1 - 30)', isSelected: 'false' },
+					{ label: '2 (31 - 60)', isSelected: 'false' },
+					{ label: '3 (61 - 90)', isSelected: 'true' },
+					{ label: '4 (91 - 120)', isSelected: 'false' },
+					{ label: '5 (121 - 150)', isSelected: 'false' },
+					{ label: '6 (151 - 180)', isSelected: 'false' },
+					{ label: '7 (181 - 210)', isSelected: 'false' },
+					{ label: '8 (211 - 240)', isSelected: 'false' },
+					{ label: '9 (241 - 270)', isSelected: 'false' },
+					{ label: '10 (271 - 300)', isSelected: 'false' },
+				],
+			},
+		},
+		{
+			props: {
+				currentPage: 3,
+				itemsTotalAmount: 221,
+			},
+			expected: {
+				dropdowns: 1,
+				dropdownItemsCount: 8,
+				dropdownItems: [
+					{ label: '1 (1 - 30)', isSelected: 'false' },
+					{ label: '2 (31 - 60)', isSelected: 'false' },
+					{ label: '3 (61 - 90)', isSelected: 'true' },
+					{ label: '4 (91 - 120)', isSelected: 'false' },
+					{ label: '5 (121 - 150)', isSelected: 'false' },
+					{ label: '6 (151 - 180)', isSelected: 'false' },
+					{ label: '7 (181 - 210)', isSelected: 'false' },
+					{ label: '8 (211 - 221)', isSelected: 'false' },
+				],
+			},
+		},
+		{
+			props: {
+				currentPage: 6,
+				itemsTotalAmount: 311,
+			},
+			expected: {
+				dropdowns: 2,
+				dropdownItemsCount: 11,
+				dropdownItems: [
+					{ label: '1 (1 - 30)', isSelected: 'false' },
+					{ label: '2 (31 - 60)', isSelected: 'false' },
+					{ label: '3 (61 - 90)', isSelected: 'false' },
+					{ label: '4 (91 - 120)', isSelected: 'false' },
+					{ label: '5 (121 - 150)', isSelected: 'false' },
+					{ label: '6 (151 - 180)', isSelected: 'true' },
+					{ label: '7 (181 - 210)', isSelected: 'false' },
+					{ label: '8 (211 - 240)', isSelected: 'false' },
+					{ label: '9 (241 - 270)', isSelected: 'false' },
+					{ label: '10 (271 - 300)', isSelected: 'false' },
+					{ label: '11 (301 - 311)', isSelected: 'false' },
+				],
+			},
+		},
+	])('should render dropdown for %o', ({ props, expected }) => {
+		const component = createComponent(props);
+
+		expect(component.findAll('.dropdown').length).toBe(expected.dropdowns);
+
+		const dropdown = component.find('.dropdown');
+		expect(dropdown.findAll('.select-list-item').length).toBe(expected.dropdownItemsCount);
+
+		dropdown.findAll('.select-list-item').forEach((item, index) => {
+			expect(item.attributes('label')).toBe(expected.dropdownItems[index].label);
+			expect(item.attributes('is-selected')).toBe(expected.dropdownItems[index].isSelected);
+		});
+	});
+
+	it('should update selected item after page change', async () => {
+		let currentPage = 3;
+		const component = createComponent({
+			currentPage,
+			itemsTotalAmount: 300,
+		});
+
+		const dropdown = component.find('.dropdown');
+		expect(
+			dropdown.findAll('.select-list-item')[currentPage - 1].attributes('is-selected'),
+		).toBe('true');
+
+		await component.setProps({ currentPage: 1 });
+
+		expect(component.findAll('.select-list-item')[0].attributes('is-selected')).toBe('true');
+
+		expect(
+			component.findAll('.select-list-item')[currentPage - 1].attributes('is-selected'),
+		).toBe('false');
+	});
 });

package/lib/js/components/Pagination/Pagination.vue

@@ -27,8 +27,42 @@
 							{{ navigationItem }}
 						</span>
 					</div>
-					<div v-else :key="`ellipsis${index}`" class="ds-pagination__itemWrapper">
-						<span class="ds-pagination__ellipsis">&hellip;</span>
+					<div v-else :key="`ellipsis${index}`">
+						<dropdown
+							:radius="DROPDOWN_RADIUSES.BOTTOM"
+							max-height="250px"
+							:placement="
+								ellipsisAsSecond(index)
+									? DROPDOWN_PLACEMENTS.BOTTOM_START
+									: DROPDOWN_PLACEMENTS.BOTTOM_END
+							"
+						>
+							<template #reference="{ isOpened }">
+								<div class="ds-pagination__itemWrapper -touchable">
+									<span
+										class="ds-pagination__item"
+										:class="{ '-selected': isOpened }"
+										>&hellip;</span
+									>
+								</div>
+							</template>
+
+							<template #default="{ close }">
+								<select-list v-if="navigationItemsForDropdown.length">
+									<select-list-item
+										v-for="(
+											dropdownNavigationItem, dropdownIndex
+										) in navigationItemsForDropdown"
+										:key="dropdownIndex"
+										:label="dropdownNavigationItem.label"
+										:is-selected="currentPage === dropdownNavigationItem.value"
+										@click="
+											onDropdownClick(dropdownNavigationItem.value, close)
+										"
+									/>
+								</select-list>
+							</template>
+						</dropdown>
 					</div>
 				</template>
 			</div>
@@ -164,10 +198,10 @@ $pagination-input-height: 32px;
 	}
 
 	&__text {
-		@include text-m-default-regular;
+		@include label-l-default-regular;
 
 		color: $color-neutral-text;
-		padding: $space-xxxs;
+		padding: $space-xxs $space-xxxs;
 		text-align: center;
 	}
 
@@ -178,7 +212,7 @@ $pagination-input-height: 32px;
 	}
 
 	&__itemWrapper {
-		@include text-m-default-regular;
+		@include label-l-default-regular;
 
 		padding: $space-xxxxs;
 		text-align: center;
@@ -201,10 +235,10 @@ $pagination-input-height: 32px;
 		flex-direction: column;
 		justify-content: center;
 		min-width: $pagination-item-min-width;
-		padding: $space-xxxs;
+		padding: $space-xxs;
 
 		&.-selected {
-			@include text-m-default-bold;
+			@include label-l-default-bold;
 
 			background: $color-neutral-background-medium;
 			color: $color-neutral-text-heavy;
@@ -216,15 +250,6 @@ $pagination-input-height: 32px;
 		}
 	}
 
-	&__ellipsis {
-		align-items: center;
-		color: $color-neutral-text-weak;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		padding: $space-xxxs;
-	}
-
 	&__accessorySlot {
 		align-items: center;
 		display: flex;
@@ -240,13 +265,19 @@ import IconButton from '../Buttons/IconButton/IconButton.vue';
 import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES, ICON_BUTTON_STATES } from '../Buttons/IconButton';
 import { ICONS } from '../Icons/Icon';
 
+import { DROPDOWN_PLACEMENTS, DROPDOWN_RADIUSES } from '../Dropdown/Dropdown.consts';
+import Dropdown from '../Dropdown/Dropdown.vue';
+
+import SelectList from '../SelectList/SelectList.vue';
+import SelectListItem from '../SelectList/SelectListItem/SelectListItem.vue';
+
 const MAX_NAVIGATION_ITEMS = 7;
 const ELLIPSIS_FILL = 'ellipsis';
 const FIRST_PAGE_NUMBER = 1;
 
 export default {
 	name: 'Pagination',
-	components: { IconButton },
+	components: { IconButton, Dropdown, SelectListItem, SelectList },
 	props: {
 		currentPage: {
 			type: Number,
@@ -278,6 +309,8 @@ export default {
 	emits: ['change-page'],
 	data() {
 		return {
+			DROPDOWN_PLACEMENTS: Object.freeze(DROPDOWN_PLACEMENTS),
+			DROPDOWN_RADIUSES: Object.freeze(DROPDOWN_RADIUSES),
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
 			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
 			ICON_BUTTON_STATES: Object.freeze(ICON_BUTTON_STATES),
@@ -333,8 +366,25 @@ export default {
 
 			return navigationItems;
 		},
+		navigationItemsForDropdown() {
+			return this.getRange(FIRST_PAGE_NUMBER, this.lastPage).map((pageNumber: number) => {
+				const startItem = (pageNumber - 1) * this.itemsPerPage;
+				const endItem =
+					pageNumber < this.lastPage
+						? startItem + this.itemsPerPage
+						: this.itemsTotalAmount;
+
+				return {
+					label: `${pageNumber} (${startItem + 1} - ${endItem})`,
+					value: pageNumber,
+				};
+			});
+		},
 	},
 	methods: {
+		ellipsisAsSecond(index: number) {
+			return index === 1;
+		},
 		getRange(start: number, end: number): Array<number> {
 			return Array(end - start + 1)
 				.fill(null)
@@ -355,6 +405,10 @@ export default {
 
 			this.changePage(page);
 		},
+		onDropdownClick(page: number, close: () => void) {
+			this.changePage(page);
+			close();
+		},
 	},
 };
 </script>

package/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts

@@ -3,9 +3,9 @@ import { ICONS } from '../../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
-	SELECT_LIST_ITEM_STATES,
-	SELECT_LIST_ITEM_SIZES,
 	SELECT_LIST_ITEM_SELECTION_MODE,
+	SELECT_LIST_ITEM_SIZES,
+	SELECT_LIST_ITEM_STATES,
 } from './SelectListItem.consts';
 
 export default {
@@ -22,6 +22,8 @@ const StoryTemplate: StoryFn<typeof SelectListItem> = (args) => ({
 			<select-list-item
 					:icon-left="ICONS[iconLeft]"
 					:label="label"
+					:eyebrow-text="eyebrowText"
+					:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
 					:is-selected="isSelected"
 					:selection-mode="selectionMode"
 					:size="size"
@@ -41,6 +43,8 @@ const args = {
 	size: SELECT_LIST_ITEM_SIZES.SMALL,
 	iconLeft: null,
 	label: 'Label',
+	eyebrowText: 'Eyebrow Text',
+	isEyebrowTextUppercase: false,
 	state: SELECT_LIST_ITEM_STATES.DEFAULT,
 	isSelected: false,
 	selectionMode: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -18,7 +18,15 @@
 			:spinning="isLoading"
 		/>
 
-		<span class="selectListItem__text">{{ label }}</span>
+		<span class="selectListItem__textWrapper">
+			<span
+				v-if="eyebrowText"
+				class="selectListItem__eyebrowText"
+				:class="{ '-uppercase': isEyebrowTextUppercase }"
+				>{{ eyebrowText }}</span
+			>
+			<span class="selectListItem__text">{{ label }}</span>
+		</span>
 
 		<ds-icon
 			v-if="isSelected"
@@ -38,6 +46,7 @@
 
 .selectListItem {
 	$self: &;
+	$minHeight: 40px;
 
 	@include label-l-default-regular;
 
@@ -45,6 +54,7 @@
 	color: $color-neutral-text-heavy;
 	cursor: pointer;
 	display: flex;
+	min-height: $minHeight;
 	padding: $space-xs;
 
 	&:focus {
@@ -104,13 +114,32 @@
 		width: $icon-xs;
 	}
 
-	&__text {
+	&__textWrapper {
+		display: flex;
+		flex-direction: column;
 		flex-grow: 1;
+		gap: $space-xxxxxs;
 		overflow: hidden;
-		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
+	&__text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	&__eyebrowText {
+		@include info-s-default-bold;
+
+		color: $color-neutral-text-weak;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&.-uppercase {
+			@include info-s-extensive-bold-uppercase;
+		}
+	}
+
 	&.-disabled {
 		#{$self}__iconLeft {
 			color: $color-neutral-icon-disabled;
@@ -123,6 +152,10 @@
 		#{$self}__text {
 			color: $color-neutral-text-heavy-disabled;
 		}
+
+		#{$self}__eyebrowText {
+			color: $color-neutral-text-weak-disabled;
+		}
 	}
 }
 </style>
@@ -157,6 +190,14 @@ export default {
 			type: String,
 			required: true,
 		},
+		eyebrowText: {
+			type: String,
+			default: '',
+		},
+		isEyebrowTextUppercase: {
+			type: Boolean,
+			default: false,
+		},
 		selectionMode: {
 			type: String,
 			default: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,

package/lib/js/components/Tile/Tile.consts.ts

@@ -1,8 +1,10 @@
 export const TILE_COLORS = {
 	NEUTRAL: 'neutral',
+	NEUTRAL_WEAK: 'neutralWeak',
 	PRIMARY: 'primary',
 	SUCCESS: 'success',
 	FAIL: 'fail',
+	WARNING: 'warning',
 	INFO: 'info',
 } as const;
 

package/lib/js/components/Tile/Tile.vue

@@ -35,6 +35,7 @@
 </template>
 
 <style lang="scss" scoped>
+@import '../../../styles/settings/animations';
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/radiuses';
 @import '../../../styles/settings/colors/tokens';
@@ -56,6 +57,21 @@ $tile-colors: (
 			'icon-interactive': $color-primary-icon-disabled,
 		),
 	),
+	'neutralWeak': (
+		'default': (
+			'background': $color-neutral-background-weak,
+			'background-hover': $color-neutral-background-weak-hovered,
+			'eyebrow-text': $color-neutral-text-weak,
+			'icon': $color-neutral-icon,
+			'icon-interactive': $color-primary-icon,
+		),
+		'disabled': (
+			'background': $color-neutral-background-weak-disabled,
+			'eyebrow-text': $color-neutral-text-weak-disabled,
+			'icon': $color-neutral-icon-disabled,
+			'icon-interactive': $color-primary-icon-disabled,
+		),
+	),
 	'primary': (
 		'default': (
 			'background': $color-primary-background,
@@ -101,6 +117,21 @@ $tile-colors: (
 			'icon-interactive': $color-fail-icon-disabled,
 		),
 	),
+	'warning': (
+		'default': (
+			'background': $color-warning-background,
+			'background-hover': $color-warning-background-hovered,
+			'eyebrow-text': $color-warning-text,
+			'icon': $color-warning-icon,
+			'icon-interactive': $color-warning-icon,
+		),
+		'disabled': (
+			'background': $color-warning-background-disabled,
+			'eyebrow-text': $color-warning-text-disabled,
+			'icon': $color-warning-icon-disabled,
+			'icon-interactive': $color-warning-icon-disabled,
+		),
+	),
 	'info': (
 		'default': (
 			'background': $color-info-background,
@@ -162,6 +193,7 @@ $tile-colors: (
 	flex-direction: row;
 	min-height: 48px;
 	padding: $space-xxs $space-xs;
+	transition: background-color ease-in-out $default-transition-time;
 
 	&.-disabled {
 		@each $color-name, $color-map in $tile-colors {
@@ -258,9 +290,11 @@ export default {
 		tileColor() {
 			return {
 				[TILE_COLORS.NEUTRAL]: '-neutral',
+				[TILE_COLORS.NEUTRAL_WEAK]: '-neutralWeak',
 				[TILE_COLORS.PRIMARY]: '-primary',
 				[TILE_COLORS.SUCCESS]: '-success',
 				[TILE_COLORS.FAIL]: '-fail',
+				[TILE_COLORS.WARNING]: '-warning',
 				[TILE_COLORS.INFO]: '-info',
 			}[this.color];
 		},