@bethinkpl/design-system 26.16.0 → 27.0.0

package/lib/js/components/Banner/Banner.vue

@@ -1,25 +1,49 @@
 <template>
 	<div class="ds-banner">
-		<div class="ds-banner__inner" :class="[colorClass, layoutClass]">
+		<div
+			class="ds-banner__inner"
+			:class="[
+				colorClass,
+				sizeClass,
+				{
+					'-ds-titleInColor': titleInColor,
+				},
+			]"
+		>
 			<div class="ds-banner__content">
 				<div class="ds-banner__header">
 					<div
-						v-if="icon"
-						class="ds-banner__iconContainer"
+						v-if="icon && size === BANNER_SIZES.MEDIUM"
+						class="ds-banner__iconWrapper"
 						:class="{ '-ds-hideOnMobile': isIconHiddenOnMobile }"
 					>
-						<!-- TODO: https://bethink.atlassian.net/browse/IT-3589 change to a-illustration in the future -->
-						<ds-icon class="ds-banner__icon" :class="[colorClass]" :icon="icon" />
+						<feature-icon
+							:icon="icon"
+							:color="iconColor"
+							:size="FEATURE_ICON_SIZES.SMALL"
+						/>
 					</div>
 
 					<div class="ds-banner__textWrapper">
 						<div class="ds-banner__titleWrapper">
-							<div class="ds-banner__title" v-text="title" />
+							<div class="ds-banner__title">
+								<div
+									v-if="icon && size === BANNER_SIZES.SMALL"
+									class="ds-banner__iconWrapperSmall"
+								>
+									<feature-icon
+										:icon="icon"
+										:color="iconColor"
+										:size="FEATURE_ICON_SIZES.X_SMALL"
+									/>
+								</div>
+								{{ title }}
+							</div>
 							<div v-if="$slots.defaultText" class="ds-banner__defaultText">
 								<slot name="defaultText" />
 							</div>
 						</div>
-						<div class="ds-banner__rightWrapper">
+						<div v-if="buttonText || $slots.rightSlot" class="ds-banner__rightWrapper">
 							<div v-if="buttonText" class="ds-banner__buttonWrapper">
 								<ds-button
 									class="ds-banner__ctaButton"
@@ -86,64 +110,78 @@
 	width: 100%;
 
 	&__inner {
+		--ds-banner-title-color: #{$color-neutral-text-strong};
+
 		border-radius: $radius-m;
 		border-style: solid;
 		border-width: 1px;
 		display: flex;
 		flex-direction: column;
+		gap: $space-xs;
 		padding: $space-xs;
 
 		@container (width > 500px) {
-			&.-ds-horizontal {
-				#{$self}__iconContainer {
-					padding: $space-2xs 0;
-				}
-
-				#{$self}__header {
-					padding: 0 $space-2xs;
-				}
-
-				#{$self}__expander {
-					padding: $space-xs $space-4xs $space-xs 0;
-				}
-
-				#{$self}__textWrapper {
-					flex-direction: row;
-				}
-
-				#{$self}__rightWrapper {
-					padding: $space-5xs 0 $space-5xs $space-s;
-				}
-
-				#{$self}__buttonWrapper {
-					padding: $space-xs 0;
-				}
-
-				#{$self}__rightSlot {
-					flex-grow: initial;
-					padding: $space-xs 0 $space-xs 0;
-				}
+			#{$self}__header {
+				padding: 0 $space-2xs 0 $space-4xs;
+			}
+
+			#{$self}__textWrapper {
+				flex-direction: row;
+				gap: $space-s;
+			}
+
+			#{$self}__rightWrapper {
+				padding: 0;
+			}
+
+			#{$self}__rightSlot,
+			#{$self}__buttonWrapper {
+				padding: $space-xs 0;
+			}
+
+			#{$self}__close {
+				padding-left: $space-2xs;
+			}
+
+			#{$self}__expandedContainer {
+				padding: 0;
 			}
 		}
 
 		&.-ds-warning {
 			background-color: $color-warning-background;
 			border-color: $color-warning-border-weak;
+
+			&.-ds-titleInColor {
+				--ds-banner-title-color: #{$color-warning-text};
+			}
 		}
 
 		&.-ds-success {
 			background-color: $color-success-background;
 			border-color: $color-success-border-weak;
+
+			&.-ds-titleInColor {
+				--ds-banner-title-color: #{$color-success-text};
+			}
 		}
 
 		&.-ds-info {
 			background-color: $color-info-background;
 			border-color: $color-info-border-weak;
+
+			&.-ds-titleInColor {
+				--ds-banner-title-color: #{$color-info-text};
+			}
 		}
 
 		&.-ds-fail {
 			background-color: $color-fail-background;
 			border-color: $color-fail-border-weak;
+
+			&.-ds-titleInColor {
+				--ds-banner-title-color: #{$color-fail-text};
+			}
 		}
 
 		&.-ds-neutral {
@@ -159,6 +197,25 @@
 		&.-ds-danger {
 			background-color: $color-danger-background;
 			border-color: $color-danger-border-weak;
+
+			&.-ds-titleInColor {
+				--ds-banner-title-color: #{$color-danger-text};
+			}
+		}
+
+		&.-ds-small {
+			#{$self}__header {
+				padding: 0;
+			}
+
+			#{$self}__rightSlot,
+			#{$self}__buttonWrapper {
+				padding: 0;
+			}
+
+			#{$self}__expander {
+				padding: 0 0 0 $space-2xs;
+			}
 		}
 	}
 
@@ -167,22 +224,27 @@
 	}
 
 	&__header {
+		align-items: flex-start;
 		display: flex;
-		justify-content: space-between;
+		flex: 1;
 		padding: 0 $space-4xs;
-		width: 100%;
 	}
 
 	&__title {
 		@include heading-s-default-bold;
 
-		color: $color-neutral-text-strong;
+		align-items: center;
+		color: var(--ds-banner-title-color);
+		display: flex;
+		gap: $space-3xs;
+	}
+
+	&__iconWrapperSmall {
+		align-self: stretch;
 	}
 
 	&__defaultText {
 		@include text-m-default-regular;
-
-		margin-top: $space-4xs;
 	}
 
 	&__textWrapper {
@@ -196,6 +258,7 @@
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
+		gap: $space-5xs;
 		justify-content: center;
 		padding: $space-4xs 0;
 	}
@@ -204,25 +267,17 @@
 		display: flex;
 		flex-shrink: 0;
 		flex-wrap: nowrap;
-		padding: 0;
+		gap: $space-3xs;
+		padding: $space-4xs 0 0;
 	}
 
+	&__rightSlot,
 	&__buttonWrapper {
-		padding: $space-xs 0;
+		padding: $space-2xs 0 $space-3xs 0;
 	}
 
-	&__rightSlot {
-		flex-grow: 1;
-		padding: $space-2xs 0 0 0;
-
-		&:nth-child(2) {
-			margin-left: $space-4xs;
-		}
-	}
-
-	&__iconContainer {
-		margin-right: $space-s;
-		padding: $space-4xs 0;
+	&__iconWrapper {
+		padding: $space-2xs $space-xs $space-2xs 0;
 
 		&.-ds-hideOnMobile {
 			display: none;
@@ -233,59 +288,17 @@
 		}
 	}
 
-	&__icon {
-		border-radius: 100px;
-		padding: $space-2xs;
-
-		&.-ds-neutral {
-			background-color: $color-neutral-background-medium;
-			color: $color-neutral-icon;
-		}
-
-		&.-ds-default {
-			background-color: $color-neutral-background-medium;
-			color: $color-neutral-icon;
-		}
-
-		&.-ds-warning {
-			background-color: $color-warning-background-medium;
-			color: $color-warning-icon;
-		}
-
-		&.-ds-success {
-			background-color: $color-success-background-medium;
-			color: $color-success-icon;
-		}
-
-		&.-ds-info {
-			background-color: $color-info-background-medium;
-			color: $color-info-icon;
-		}
-
-		&.-ds-fail {
-			background-color: $color-fail-background-medium;
-			color: $color-fail-icon;
-		}
-
-		&.-ds-danger {
-			background-color: $color-danger-background-medium;
-			color: $color-danger-icon;
-		}
-	}
-
 	&__close {
-		margin-left: $space-2xs;
+		padding-left: $space-3xs;
 	}
 
 	&__expander {
-		margin-left: $space-2xs;
-		padding: 0;
+		padding: $space-xs $space-4xs $space-xs $space-2xs;
 	}
 
 	&__expandedContainer {
 		@include text-m-default-regular;
 
-		margin-top: $space-xs;
 		padding: 0 $space-4xs $space-4xs;
 	}
 
@@ -295,7 +308,7 @@
 }
 </style>
 
-<script lang="ts">
+<script lang="ts" setup>
 import DsButton, {
 	BUTTON_COLORS,
 	BUTTON_RADIUSES,
@@ -303,103 +316,109 @@ import DsButton, {
 	BUTTON_TYPES,
 } from '../Buttons/Button';
 import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
-import DsIcon, { ICONS } from '../Icons/Icon';
+import { IconItem, ICONS } from '../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
-import { BANNER_COLORS, BANNER_LAYOUTS, BannerColor, BannerLayout } from './Banner.consts';
-import { defineComponent, toRaw } from 'vue';
-
-export default defineComponent({
-	name: 'Banner',
-	components: {
-		DsButton,
-		DsDivider,
-		DsIconButton,
-		DsIcon,
-	},
-	props: {
-		icon: {
-			type: Object,
-			default: null,
-			validator: (icon) => Object.values(ICONS).includes(toRaw(icon)),
-		},
-		buttonText: {
-			type: String,
-			default: null,
-		},
-		closable: {
-			type: Boolean,
-			default: false,
-		},
-		color: {
-			type: String,
-			default: BANNER_COLORS.DEFAULT,
-			validator: (color: BannerColor) => Object.values(BANNER_COLORS).includes(color),
-		},
-		title: {
-			type: String,
-			required: true,
-		},
-		layout: {
-			type: String,
-			default: BANNER_LAYOUTS.HORIZONTAL,
-			validator: (layout: BannerLayout) => Object.values(BANNER_LAYOUTS).includes(layout),
-		},
-		isExpanded: {
-			type: Boolean,
-			default: false,
-		},
-		isIconHiddenOnMobile: {
-			type: Boolean,
-			default: false,
+import { BANNER_COLORS, BANNER_SIZES, BannerColor, BannerSize } from './Banner.consts';
+import { computed, ref, watch } from 'vue';
+import FeatureIcon, {
+	FEATURE_ICON_COLOR,
+	FEATURE_ICON_SIZES,
+	FeatureIconColor,
+} from '../Icons/FeatureIcon';
+
+const {
+	icon = null,
+	closable = false,
+	color = BANNER_COLORS.DEFAULT,
+	isExpanded = false,
+	isIconHiddenOnMobile = false,
+	size = BANNER_SIZES.MEDIUM,
+	titleInColor = false,
+} = defineProps<{
+	icon?: IconItem | null;
+	buttonText?: string;
+	closable?: boolean;
+	color?: BannerColor;
+	title: string;
+	isExpanded?: boolean;
+	isIconHiddenOnMobile?: boolean;
+	size?: BannerSize;
+	titleInColor?: boolean;
+}>();
+
+const emit = defineEmits<{
+	'button-clicked': [];
+	close: [];
+	'update:isExpanded': [isExpanded: boolean];
+}>();
+
+const { toggleExpandedText, isExpandedInternal } = useExpanded();
+const { sizeClass, colorClass } = useBannerClasses();
+const iconColor = computed(() => {
+	const colorMap: Record<BannerColor, FeatureIconColor> = {
+		[BANNER_COLORS.DEFAULT]: FEATURE_ICON_COLOR.NEUTRAL,
+		[BANNER_COLORS.NEUTRAL]: FEATURE_ICON_COLOR.NEUTRAL,
+		[BANNER_COLORS.INFO]: FEATURE_ICON_COLOR.INFO,
+		[BANNER_COLORS.SUCCESS]: FEATURE_ICON_COLOR.SUCCESS,
+		[BANNER_COLORS.WARNING]: FEATURE_ICON_COLOR.WARNING,
+		[BANNER_COLORS.FAIL]: FEATURE_ICON_COLOR.FAIL,
+		[BANNER_COLORS.DANGER]: FEATURE_ICON_COLOR.DANGER,
+	};
+
+	return colorMap[color];
+});
+
+function useExpanded() {
+	const isExpandedInternal = ref(false);
+
+	watch(
+		() => isExpanded,
+		(newValue) => {
+			if (newValue !== isExpandedInternal.value) {
+				isExpandedInternal.value = newValue;
+			}
 		},
-	},
-	// TODO fix me when touching this file
-	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['button-clicked', 'close', 'update:isExpanded'],
-	data() {
-		return {
-			isExpandedInternal: false,
-			BUTTON_COLORS: Object.freeze(BUTTON_COLORS),
-			BUTTON_RADIUSES: Object.freeze(BUTTON_RADIUSES),
-			BUTTON_SIZES: Object.freeze(BUTTON_SIZES),
-			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
-			DIVIDER_PROMINENCES: Object.freeze(DIVIDER_PROMINENCES),
-			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
-			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
-			ICONS: Object.freeze(ICONS),
+		{ immediate: true },
+	);
+
+	const toggleExpandedText = () => {
+		isExpandedInternal.value = !isExpandedInternal.value;
+		emit('update:isExpanded', isExpandedInternal.value);
+	};
+
+	return {
+		isExpandedInternal,
+		toggleExpandedText,
+	};
+}
+
+function useBannerClasses() {
+	const colorClass = computed(() => {
+		const colorMap: Record<BannerColor, string> = {
+			[BANNER_COLORS.NEUTRAL]: '-ds-neutral',
+			[BANNER_COLORS.DEFAULT]: '-ds-default',
+			[BANNER_COLORS.FAIL]: '-ds-fail',
+			[BANNER_COLORS.INFO]: '-ds-info',
+			[BANNER_COLORS.SUCCESS]: '-ds-success',
+			[BANNER_COLORS.WARNING]: '-ds-warning',
+			[BANNER_COLORS.DANGER]: '-ds-danger',
 		};
-	},
-	computed: {
-		colorClass() {
-			return {
-				[BANNER_COLORS.NEUTRAL]: '-ds-neutral',
-				[BANNER_COLORS.DEFAULT]: '-ds-default',
-				[BANNER_COLORS.FAIL]: '-ds-fail',
-				[BANNER_COLORS.INFO]: '-ds-info',
-				[BANNER_COLORS.SUCCESS]: '-ds-success',
-				[BANNER_COLORS.WARNING]: '-ds-warning',
-				[BANNER_COLORS.DANGER]: '-ds-danger',
-			}[this.color];
-		},
-		layoutClass() {
-			return this.layout === BANNER_LAYOUTS.VERTICAL ? '-ds-vertical' : '-ds-horizontal';
-		},
-	},
-	watch: {
-		isExpanded: {
-			handler(isExpanded) {
-				if (isExpanded !== this.isExpandedInternal) {
-					this.isExpandedInternal = isExpanded;
-				}
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		toggleExpandedText() {
-			this.isExpandedInternal = !this.isExpandedInternal;
-			this.$emit('update:isExpanded', this.isExpandedInternal);
-		},
-	},
-});
+
+		return colorMap[color];
+	});
+
+	const sizeClass = computed(() => {
+		const sizeMap: Record<BannerSize, string> = {
+			[BANNER_SIZES.SMALL]: '-ds-small',
+			[BANNER_SIZES.MEDIUM]: '-ds-medium',
+		};
+
+		return sizeMap[size];
+	});
+
+	return {
+		colorClass,
+		sizeClass,
+	};
+}
 </script>

package/lib/js/components/Buttons/Button/Button.spec.ts

@@ -71,4 +71,19 @@ describe('Button', () => {
 		expect(component.find('.ds-button__icon.-ds-left').exists()).toBe(false);
 		expect(component.find('.ds-button__content').text()).toBe('Hello');
 	});
+
+	it('renders as span by default', () => {
+		const component = createComponent();
+		expect(component.element.tagName).toBe('SPAN');
+	});
+
+	it('renders as button if "as" prop is set to "button"', () => {
+		const component = createComponent({ as: 'button' });
+		expect(component.element.tagName).toBe('BUTTON');
+	});
+
+	it('renders as anchor if "as" prop is set to "a"', () => {
+		const component = createComponent({ as: 'a' });
+		expect(component.element.tagName).toBe('A');
+	});
 });

package/lib/js/components/Buttons/Button/Button.stories.ts

@@ -34,6 +34,7 @@ const StoryTemplate: StoryFn<typeof Button> = (args) => ({
 					:elevation="elevation"
 					:icon-left="ICONS[iconLeft]"
 					:icon-right="ICONS[iconRight]"
+					:as="as"
 			>
 				{{ slotText }}
 			</Button>
@@ -62,6 +63,7 @@ const args = {
 	elevation: BUTTON_ELEVATIONS.NONE,
 	iconLeft: 'FA_CHEVRON_LEFT',
 	iconRight: null,
+	as: 'span',
 } as Args;
 
 const argTypes = {
@@ -97,6 +99,10 @@ const argTypes = {
 		control: 'select',
 		options: [null, ...Object.keys(ICONS)],
 	},
+	as: {
+		control: 'select',
+		options: ['button', 'a', 'span'],
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;