IT-5863 tile and datepickers with boarders

lib/js/components/DatePickers/DatePicker/DatePicker.consts.ts

@@ -1,8 +1,10 @@
 import { Value } from '../../../utils/type.utils';
 
 export const DATE_PICKER_COLORS = {
+	NEUTRAL_WEAK: 'neutralWeak',
 	NEUTRAL: 'neutral',
 	WARNING: 'warning',
+	DANGER: 'danger',
 };
 
 export type DatePickerColors = Value<typeof DATE_PICKER_COLORS>;

lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts

@@ -67,6 +67,7 @@ const StoryTemplate: StoryFn<typeof DatePicker> = (args) => {
 				:is-interactive="isInteractive"
 				:placeholder="placeholder"
 				:date="formattedDate"
+				:additional-text="additionalText"
 				:label="label"
 				:is-label-uppercase="isLabelUppercase"
 				:icon="icon ? ICONS[icon] : null"
@@ -93,14 +94,15 @@ const args = {
 	isInteractive: true,
 	placeholder: 'Wybierz datę',
 	date: '',
+	additionalText: '',
 	label: 'Date picker',
 	isLabelUppercase: false,
 	icon: 'FA_CALENDAR_DAY',
 	isIconHiddenOnMobile: false,
 	calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
 	errorMessage: null,
 	state: DATE_PICKER_STATES.DEFAULT,
-	color: DATE_PICKER_COLORS.NEUTRAL,
+	color: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 	disableDates: [new Date(now + oneDayMili * 2).toISOString().slice(0, 10)],
 	minDate: new Date(now).toISOString().slice(0, 10),
 	maxDate: new Date(now + oneDayMili * 30).toISOString().slice(0, 10),

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

@@ -23,11 +23,13 @@
 				class="ds-datePicker__tile"
 				:text="text"
 				:interactive="isInteractive"
+				:additional-text="additionalText"
 				:color="color as TileColors"
 				:state="state as TileStates"
 				:icon-right="tileIcon"
 				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
 				:eyebrow-text="eyebrowText"
+				has-border
 				@click="toggle"
 			/>
 		</template>
@@ -167,6 +169,10 @@ export default defineComponent({
 			type: Date,
 			default: null,
 		},
+		additionalText: {
+			type: String,
+			default: '',
+		},
 		label: {
 			type: String,
 			default: '',
@@ -196,7 +202,7 @@ export default defineComponent({
 		},
 		color: {
 			type: String as PropType<DatePickerColors>,
-			default: DATE_PICKER_COLORS.NEUTRAL,
+			default: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 		},
 		calendarPosition: {
 			type: String as PropType<DatePickerCalendarPositions>,
@@ -275,6 +281,9 @@ export default defineComponent({
 			return localFullDateWithShortMonthName(this.date);
 		},
 		tileIcon() {
+			if (this.additionalText) {
+				return null;
+			}
 			if (!this.icon) {
 				return null;
 			}

lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue

@@ -6,7 +6,11 @@
 			'-ds-loading': state === DATE_PICKER_STATES.LOADING,
 			'-ds-interactive': isInteractive,
 			'-ds-warning': color === DATE_PICKER_COLORS.WARNING,
-			'-ds-neutral': color === DATE_PICKER_COLORS.NEUTRAL,
+			'-ds-neutralWeak': [
+				DATE_PICKER_COLORS.NEUTRAL_WEAK,
+				DATE_PICKER_COLORS.NEUTRAL,
+			].includes(color),
+			'-ds-danger': color === DATE_PICKER_COLORS.DANGER,
 			'-ds-isOpen': isOpen,
 		}"
 	>
@@ -244,7 +248,7 @@
 	}
 
 	&.-ds-loading,
-	&.-ds-neutral {
+	&.-ds-neutralWeak {
 		@include color-scheme(
 			$color-neutral-text-weak,
 			$color-neutral-text-heavy,
@@ -283,6 +287,20 @@
 				$self
 			);
 		}
+
+		&.-ds-danger {
+			@include color-scheme(
+				$color-danger-text,
+				$color-danger-text,
+				$color-danger-icon,
+				$color-danger-icon-hovered,
+				$color-danger-text-hovered,
+				$color-danger-icon-disabled,
+				$color-danger-text-disabled,
+				$color-danger-text-disabled,
+				$self
+			);
+		}
 	}
 }
 </style>
@@ -340,7 +358,7 @@ export default defineComponent({
 		},
 		color: {
 			type: String as PropType<DatePickerColors>,
-			default: DATE_PICKER_COLORS.NEUTRAL,
+			default: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 		},
 		startDateEyebrowText: {
 			type: String,

lib/js/components/DatePickers/DateRangePicker/DateRangePicker.stories.ts

@@ -112,7 +112,9 @@ const meta: Meta<DateRangePickerProps> = {
 		},
 		color: {
 			control: 'select',
-			options: Object.values(DATE_PICKER_COLORS),
+			options: Object.values(DATE_PICKER_COLORS).filter(
+				(color) => color !== DATE_PICKER_COLORS.NEUTRAL,
+			),
 		},
 		disableDates: {
 			control: 'object',
@@ -144,7 +146,7 @@ export const Interactive: Story = {
 		calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
 		errorMessage: '',
 		state: DATE_PICKER_STATES.DEFAULT,
-		color: DATE_PICKER_COLORS.NEUTRAL,
+		color: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 		disableDates: [new Date(now + oneDayMili * 2).toISOString().slice(0, 10)],
 		minDate: new Date(now).toISOString().slice(0, 10),
 		maxDate: new Date(now + oneDayMili * 30).toISOString().slice(0, 10),

lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue

@@ -120,7 +120,7 @@ export default defineComponent({
 		},
 		color: {
 			type: String as PropType<DatePickerColors>,
-			default: DATE_PICKER_COLORS.NEUTRAL,
+			default: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 		},
 		disableDates: {
 			type: Array as PropType<Array<Date>>,

lib/js/components/Drawer/DrawerTile/DrawerTile.vue

@@ -25,8 +25,6 @@ export default defineComponent({
 	},
 	// Only allow props that are supported by Tile
 	props,
-	// TODO fix me when touching this file
-	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['click'],
+	emits: { click: () => true },
 });
 </script>

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

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

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

@@ -6,6 +6,7 @@ export const TILE_COLORS = {
 	PRIMARY: 'primary',
 	SUCCESS: 'success',
 	FAIL: 'fail',
+	DANGER: 'danger',
 	WARNING: 'warning',
 	INFO: 'info',
 } as const;

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

@@ -16,6 +16,7 @@ export const template = (componentTag: string) => `
 			:state="state"
 			:text-ellipsis="textEllipsis"
 			:text="text"
+			:has-border="hasBorder"
 		/>`;
 
 export const data = () => ({
@@ -35,6 +36,7 @@ export const args = {
 	eyebrowEllipsis: true,
 	textEllipsis: true,
 	color: TILE_COLORS.NEUTRAL,
+	hasBorder: false,
 } as Args;
 
 export const argTypes = {

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

@@ -64,4 +64,8 @@ export const props = {
 		type: Boolean,
 		default: true,
 	},
+	hasBorder: {
+		type: Boolean,
+		default: false,
+	},
 };