Merge pull request #447 from bethinkpl/IT-5863_tile_and_datepickers_w…

…ith_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,8 @@ const StoryTemplate: StoryFn<typeof DatePicker> = (args) => {
 				:is-interactive="isInteractive"
 				:placeholder="placeholder"
 				:date="formattedDate"
+				:additional-text="additionalText"
+				:helpMessage="helpMessage"
 				:label="label"
 				:is-label-uppercase="isLabelUppercase"
 				:icon="icon ? ICONS[icon] : null"
@@ -91,19 +93,21 @@ const oneDayMili = 86400000;
 const args = {
 	triggerType: DATE_PICKER_TRIGGER_TYPES.TILE,
 	isInteractive: true,
-	placeholder: 'Wybierz datę',
-	date: '',
+	color: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 	label: 'Date picker',
 	isLabelUppercase: false,
+	placeholder: 'Wybierz datę',
+	date: '',
+	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),
 	icon: 'FA_CALENDAR_DAY',
 	isIconHiddenOnMobile: false,
-	calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
+	additionalText: '',
+	helpMessage: null,
 	errorMessage: null,
+	calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
 	state: DATE_PICKER_STATES.DEFAULT,
-	color: DATE_PICKER_COLORS.NEUTRAL,
-	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),
 } as Args;
 
 const argTypes = {

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>
@@ -48,6 +50,9 @@
 		<span v-if="showErrorMessage" class="ds-datePicker__errorMessage">
 			{{ errorMessage }}
 		</span>
+		<span v-else-if="showHelpMessage" class="ds-datePicker__helpMessage">
+			{{ helpMessage }}
+		</span>
 		<input ref="flatpickrInputRef" class="ds-datePicker__hiddenInput" />
 	</div>
 </template>
@@ -117,6 +122,13 @@
 		color: $color-danger-text;
 		height: $space-xs;
 	}
+
+	&__helpMessage {
+		@include info-s-default-regular;
+
+		color: $color-neutral-text;
+		height: $space-xs;
+	}
 }
 </style>
 
@@ -167,6 +179,14 @@ export default defineComponent({
 			type: Date,
 			default: null,
 		},
+		additionalText: {
+			type: String,
+			default: '',
+		},
+		helpMessage: {
+			type: String,
+			default: null,
+		},
 		label: {
 			type: String,
 			default: '',
@@ -196,7 +216,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 +295,9 @@ export default defineComponent({
 			return localFullDateWithShortMonthName(this.date);
 		},
 		tileIcon() {
+			if (this.additionalText) {
+				return null;
+			}
 			if (!this.icon) {
 				return null;
 			}
@@ -283,6 +306,9 @@ export default defineComponent({
 		showErrorMessage() {
 			return this.errorMessage !== null;
 		},
+		showHelpMessage() {
+			return this.helpMessage !== null;
+		},
 	},
 	async mounted() {
 		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {

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

@@ -6,7 +6,9 @@
 			'-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 === color,
+			'-ds-neutral': DATE_PICKER_COLORS.NEUTRAL === color,
+			'-ds-danger': color === DATE_PICKER_COLORS.DANGER,
 			'-ds-isOpen': isOpen,
 		}"
 	>
@@ -72,6 +74,9 @@
 @import '../../../../styles/settings/radiuses';
 
 @mixin color-scheme(
+	$color-background,
+	$color-background-hovered,
+	$color-background-disabled,
 	$color-eyebrow,
 	$color-date,
 	$color-icon,
@@ -83,6 +88,8 @@
 	$self
 ) {
 	&.-ds-interactive {
+		background-color: $color-background;
+
 		&:hover {
 			#{$self}__icon {
 				color: $color-icon-hovered;
@@ -95,6 +102,8 @@
 	}
 
 	&.-ds-disabled {
+		background-color: $color-background-disabled;
+
 		#{$self}__eyebrow {
 			color: $color-eyebrow-disabled;
 		}
@@ -119,6 +128,7 @@
 			}
 		}
 	}
+
 	#{$self}__eyebrow {
 		color: $color-eyebrow;
 	}
@@ -134,6 +144,16 @@
 	#{$self}__loader {
 		color: $color-icon;
 	}
+
+	&:not(.-ds-loading) {
+		&:not(.-ds-disabled) {
+			&.-ds-interactive {
+				&:hover:not(.-ds-isOpen) {
+					background-color: $color-background-hovered;
+				}
+			}
+		}
+	}
 }
 
 .ds-datePickerBox {
@@ -192,7 +212,6 @@
 
 	&.-ds-loading,
 	&.-ds-interactive {
-		background-color: $color-neutral-background-weak;
 		border-color: $color-neutral-border-weak;
 		border-radius: $radius-s;
 	}
@@ -244,8 +263,28 @@
 	}
 
 	&.-ds-loading,
+	&.-ds-neutralWeak {
+		@include color-scheme(
+			$color-neutral-background-weak,
+			$color-neutral-background-weak-hovered,
+			$color-neutral-background-weak-disabled,
+			$color-neutral-text-weak,
+			$color-neutral-text-heavy,
+			$color-neutral-icon,
+			$color-neutral-icon-hovered,
+			$color-neutral-text-heavy-hovered,
+			$color-neutral-icon-disabled,
+			$color-neutral-text-weak-disabled,
+			$color-neutral-text-heavy-disabled,
+			$self
+		);
+	}
+
 	&.-ds-neutral {
 		@include color-scheme(
+			$color-neutral-background,
+			$color-neutral-background-hovered,
+			$color-neutral-background-disabled,
 			$color-neutral-text-weak,
 			$color-neutral-text-heavy,
 			$color-neutral-icon,
@@ -263,15 +302,14 @@
 			&.-ds-interactive {
 				cursor: pointer;
 				pointer-events: all;
-
-				&:hover:not(.-ds-isOpen) {
-					background-color: $color-neutral-background-weak-hovered;
-				}
 			}
 		}
 
 		&.-ds-warning {
 			@include color-scheme(
+				$color-neutral-background-weak,
+				$color-neutral-background-weak-hovered,
+				$color-neutral-background-weak-disabled,
 				$color-warning-text,
 				$color-warning-text,
 				$color-warning-icon,
@@ -283,6 +321,23 @@
 				$self
 			);
 		}
+
+		&.-ds-danger {
+			@include color-scheme(
+				$color-neutral-background-weak,
+				$color-neutral-background-weak-hovered,
+				$color-neutral-background-weak-disabled,
+				$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 +395,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',
@@ -135,18 +137,18 @@ const oneDayMili = 86400000;
 export const Interactive: Story = {
 	args: {
 		isInteractive: true,
+		color: DATE_PICKER_COLORS.NEUTRAL_WEAK,
 		placeholder: 'Ustaw',
 		startDate: '',
 		endDate: '',
+		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),
 		startIcon: 'FA_CALENDAR_DAY',
 		endIcon: 'FA_CALENDAR_DAY',
 		areIconsHiddenOnMobile: false,
-		calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
 		errorMessage: '',
+		calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
 		state: DATE_PICKER_STATES.DEFAULT,
-		color: DATE_PICKER_COLORS.NEUTRAL,
-		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),
 	} as Args,
 };

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 = () => ({
@@ -24,17 +25,18 @@ export const data = () => ({
 
 export const args = {
 	interactive: true,
+	color: TILE_COLORS.NEUTRAL,
+	hasBorder: false,
 	iconLeft: null,
 	iconRight: null,
 	isIconRightHiddenOnMobile: false,
-	text: 'this is a text text',
 	eyebrowText: 'this is an eyebrowText text',
-	additionalText: '',
-	isEyebrowTextUppercase: false,
-	state: TILE_STATES.DEFAULT,
 	eyebrowEllipsis: true,
+	isEyebrowTextUppercase: false,
+	text: 'this is a text text',
 	textEllipsis: true,
-	color: TILE_COLORS.NEUTRAL,
+	additionalText: '',
+	state: TILE_STATES.DEFAULT,
 } 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,
+	},
 };