IT-6115 tile has border color prop

lib/js/components/DatePickers/DatePicker/DatePicker.vue

@@ -25,6 +25,7 @@
 				:interactive="isInteractive"
 				:additional-text="additionalText"
 				:color="color as TileColors"
+				:border-color="borderColor"
 				:state="state as TileStates"
 				:icon-right="tileIcon"
 				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
@@ -139,7 +140,7 @@
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
 
-import DsTile from '../../Tile';
+import DsTile, { TILE_BORDER_COLORS } from '../../Tile';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import DatePickerBox from '../DatePickerBox';
 
@@ -286,6 +287,22 @@ export default defineComponent({
 		};
 	},
 	computed: {
+		borderColor() {
+			return {
+				[DATE_PICKER_COLORS.NEUTRAL]: this.isInteractive
+					? TILE_BORDER_COLORS.PRIMARY
+					: TILE_BORDER_COLORS.NEUTRAL_WEAK,
+				[DATE_PICKER_COLORS.NEUTRAL_WEAK]: this.isInteractive
+					? TILE_BORDER_COLORS.PRIMARY
+					: TILE_BORDER_COLORS.NEUTRAL_WEAK,
+				[DATE_PICKER_COLORS.DANGER]: this.isInteractive
+					? TILE_BORDER_COLORS.DANGER
+					: TILE_BORDER_COLORS.DANGER_WEAK,
+				[DATE_PICKER_COLORS.WARNING]: this.isInteractive
+					? TILE_BORDER_COLORS.WARNING
+					: TILE_BORDER_COLORS.WARNING_WEAK,
+			}[this.color];
+		},
 		eyebrowText() {
 			if (!this.date) {
 				return '';

lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue

@@ -12,7 +12,7 @@
 			:state="state"
 			:eyebrow-ellipsis="eyebrowEllipsis"
 			:text-ellipsis="textEllipsis"
-			:has-border="hasBorder"
+			:border-color="borderColor"
 		/>
 	</div>
 </template>

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

@@ -20,3 +20,22 @@ export const TILE_STATES = {
 } as const;
 
 export type TileStates = Value<typeof TILE_STATES>;
+
+export const TILE_BORDER_COLORS = {
+	NEUTRAL: 'neutral',
+	NEUTRAL_WEAK: 'neutralWeak',
+	PRIMARY: 'primary',
+	PRIMARY_WEAK: 'primaryWeak',
+	SUCCESS: 'success',
+	SUCCESS_WEAK: 'successWeak',
+	FAIL: 'fail',
+	FAIL_WEAK: 'failWeak',
+	DANGER: 'danger',
+	DANGER_WEAK: 'dangerWeak',
+	WARNING: 'warning',
+	WARNING_WEAK: 'warningWeak',
+	INFO: 'info',
+	INFO_WEAK: 'infoWeak',
+} as const;
+
+export type TileBorderColors = Value<typeof TILE_BORDER_COLORS>;

lib/js/components/Tile/Tile.sb.shared.ts

@@ -1,8 +1,10 @@
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { TILE_BORDER_COLORS, TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { Args, ArgTypes } from '@storybook/vue3';
+import DsBanner, { BANNER_COLORS } from '../Banner';
 
 export const template = (componentTag: string) => `
+<div style="display: flex; row-gap: 16px; flex-direction: column">
 		<${componentTag}
 			:additional-text="additionalText"
 			:color="color"
@@ -16,17 +18,46 @@ export const template = (componentTag: string) => `
 			:state="state"
 			:text-ellipsis="textEllipsis"
 			:text="text"
-			:has-border="hasBorder"
-		/>`;
+			:border-color="borderColor"
+		/>
+		<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja koloru komponentu z kolorem bordera jest niezgodna z design systemem!" v-if="borderColor && !allowedColorsToBorderColorsMap[color].includes(borderColor)" />
+</div>
+`;
 
 export const data = () => ({
 	ICONS: Object.freeze(ICONS),
+	BANNER_COLORS: Object.freeze(BANNER_COLORS),
+	allowedColorsToBorderColorsMap: {
+		[TILE_COLORS.NEUTRAL]: [
+			TILE_BORDER_COLORS.NEUTRAL,
+			TILE_BORDER_COLORS.NEUTRAL_WEAK,
+			TILE_BORDER_COLORS.PRIMARY,
+			TILE_BORDER_COLORS.PRIMARY_WEAK,
+		],
+		[TILE_COLORS.NEUTRAL_WEAK]: [
+			TILE_BORDER_COLORS.NEUTRAL,
+			TILE_BORDER_COLORS.NEUTRAL_WEAK,
+			TILE_BORDER_COLORS.PRIMARY,
+			TILE_BORDER_COLORS.PRIMARY_WEAK,
+		],
+		[TILE_COLORS.PRIMARY]: [TILE_BORDER_COLORS.PRIMARY, TILE_BORDER_COLORS.PRIMARY_WEAK],
+		[TILE_COLORS.SUCCESS]: [TILE_BORDER_COLORS.SUCCESS, TILE_BORDER_COLORS.SUCCESS_WEAK],
+		[TILE_COLORS.FAIL]: [TILE_BORDER_COLORS.FAIL, TILE_BORDER_COLORS.FAIL_WEAK],
+		[TILE_COLORS.DANGER]: [TILE_BORDER_COLORS.DANGER, TILE_BORDER_COLORS.DANGER_WEAK],
+		[TILE_COLORS.WARNING]: [TILE_BORDER_COLORS.WARNING, TILE_BORDER_COLORS.WARNING_WEAK],
+		[TILE_COLORS.INFO]: [TILE_BORDER_COLORS.INFO, TILE_BORDER_COLORS.INFO_WEAK],
+	},
 });
 
+export const components = {
+	DsBanner,
+};
+
 export const args = {
 	interactive: true,
 	color: TILE_COLORS.NEUTRAL,
-	hasBorder: false,
+	borderColor: null,
+	isBorderWeak: false,
 	iconLeft: null,
 	iconRight: null,
 	isIconRightHiddenOnMobile: false,
@@ -52,6 +83,10 @@ export const argTypes = {
 		control: 'select',
 		options: [...Object.values(TILE_COLORS)],
 	},
+	borderColor: {
+		control: 'select',
+		options: [null, ...Object.values(TILE_BORDER_COLORS)],
+	},
 	state: {
 		control: 'select',
 		options: [...Object.values(TILE_STATES)],

lib/js/components/Tile/Tile.shared.ts

@@ -1,6 +1,6 @@
 import { PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES, TileColors, TileStates } from './Tile.consts';
+import { TILE_COLORS, TILE_STATES, TileBorderColors, TileColors, TileStates } from './Tile.consts';
 import { Value } from '../../utils/type.utils';
 
 export const props = {
@@ -64,8 +64,8 @@ export const props = {
 		type: Boolean,
 		default: true,
 	},
-	hasBorder: {
-		type: Boolean,
-		default: false,
+	borderColor: {
+		type: String as PropType<TileBorderColors>,
+		default: null,
 	},
 };

lib/js/components/Tile/Tile.stories.ts

@@ -4,7 +4,7 @@ import Tile from './Tile.vue';
 import { TILE_STATES } from './Tile.consts';
 
 import type { Args, Meta, StoryObj } from '@storybook/vue3';
-import { args, argTypes, data, template } from './Tile.sb.shared';
+import { args, argTypes, components, data, template } from './Tile.sb.shared';
 import type { ComponentProps } from 'vue-component-type-helpers';
 import { withActions } from '@storybook/addon-actions/decorator';
 
@@ -15,7 +15,7 @@ const meta: Meta<TileProps> = {
 	component: Tile,
 	decorators: [withActions],
 	render: (args) => ({
-		components: { Tile },
+		components: { ...components, Tile },
 		setup() {
 			return args;
 		},