@bethinkpl/design-system 34.1.3 → 34.2.0

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

@@ -6,7 +6,6 @@
 				colorClass,
 				sizeClass,
 				{
-					'-ds-titleInColor': titleInColor,
 					'-ds-iconHiddenOnMobile': isIconHiddenOnMobile,
 				},
 			]"
@@ -104,8 +103,6 @@
 	width: 100%;
 
 	&__inner {
-		--ds-banner-title-color: #{$color-neutral-text-strong};
-
 		border-radius: $radius-m;
 		border-style: solid;
 		border-width: 1px;
@@ -149,58 +146,59 @@
 		}
 
 		&.-ds-warning {
+			--ds-banner-title-color: #{$color-warning-text-strong};
+
 			background-color: $color-warning-background;
 			border-color: $color-warning-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-warning-text};
-			}
 		}
 
 		&.-ds-success {
+			--ds-banner-title-color: #{$color-success-text-strong};
+
 			background-color: $color-success-background;
 			border-color: $color-success-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-success-text};
-			}
 		}
 
 		&.-ds-info {
+			--ds-banner-title-color: #{$color-info-text-strong};
+
 			background-color: $color-info-background;
 			border-color: $color-info-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-info-text};
-			}
 		}
 
 		&.-ds-fail {
+			--ds-banner-title-color: #{$color-fail-text-strong};
+
 			background-color: $color-fail-background;
 			border-color: $color-fail-border-weak;
-
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-fail-text};
-			}
 		}
 
 		&.-ds-neutral {
+			--ds-banner-title-color: #{$color-neutral-text-strong};
+
 			background-color: $color-neutral-background;
 			border-color: $color-neutral-border-weak;
 		}
 
 		&.-ds-default {
+			--ds-banner-title-color: #{$color-neutral-text-strong};
+
 			background-color: $color-default-background;
 			border-color: $color-neutral-border-weak;
 		}
 
 		&.-ds-danger {
+			--ds-banner-title-color: #{$color-danger-text-strong};
+
 			background-color: $color-danger-background;
 			border-color: $color-danger-border-weak;
+		}
 
-			&.-ds-titleInColor {
-				--ds-banner-title-color: #{$color-danger-text};
-			}
+		&.-ds-accent {
+			--ds-banner-title-color: #{$color-accent-text-strong};
+
+			background-color: $color-accent-background;
+			border-color: $color-accent-border-weak;
 		}
 
 		&.-ds-small {
@@ -340,7 +338,6 @@ const {
 	color = BANNER_COLORS.DEFAULT,
 	isIconHiddenOnMobile = false,
 	size = BANNER_SIZES.MEDIUM,
-	titleInColor = false,
 } = defineProps<{
 	icon?: IconItem | null;
 	buttonText?: string;
@@ -349,7 +346,6 @@ const {
 	title: string;
 	isIconHiddenOnMobile?: boolean;
 	size?: BannerSize;
-	titleInColor?: boolean;
 }>();
 
 defineEmits<{
@@ -369,6 +365,7 @@ const iconColor = computed(() => {
 		[BANNER_COLORS.WARNING]: FEATURE_ICON_COLOR.WARNING,
 		[BANNER_COLORS.FAIL]: FEATURE_ICON_COLOR.FAIL,
 		[BANNER_COLORS.DANGER]: FEATURE_ICON_COLOR.DANGER,
+		[BANNER_COLORS.ACCENT]: FEATURE_ICON_COLOR.ACCENT,
 	};
 
 	return colorMap[color];
@@ -384,6 +381,7 @@ function useBannerClasses() {
 			[BANNER_COLORS.SUCCESS]: '-ds-success',
 			[BANNER_COLORS.WARNING]: '-ds-warning',
 			[BANNER_COLORS.DANGER]: '-ds-danger',
+			[BANNER_COLORS.ACCENT]: '-ds-accent',
 		};
 
 		return colorMap[color];

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

@@ -0,0 +1,14 @@
+import { Value } from '../../utils/type.utils';
+
+export const FLAG_SIZES = {
+	XXXS: 'xxxs',
+	XXS: 'xxs',
+	XS: 'xs',
+	S: 's',
+	M: 'm',
+	L: 'l',
+	XL: 'xl',
+	XXL: 'xxl',
+} as const;
+
+export type FlagSize = Value<typeof FLAG_SIZES>;

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

@@ -0,0 +1,52 @@
+import Flag from './Flag.vue';
+import { FLAG_SIZES } from './Flag.consts';
+import * as FLAGS from './flags';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { toRefs } from 'vue';
+
+export default {
+	title: 'Components/Flag',
+	component: Flag,
+} as Meta<typeof Flag>;
+
+const FLAG_OPTIONS = Object.keys(FLAGS) as Array<keyof typeof FLAGS>;
+
+const StoryTemplate: StoryFn<typeof Flag> = (args) => ({
+	components: { Flag },
+	setup() {
+		const { size, flag } = toRefs(args);
+
+		return {
+			size,
+			flag,
+			FLAGS,
+		};
+	},
+	template: '<flag :flag="FLAGS[flag]" :size="size" />',
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+Interactive.argTypes = {
+	size: {
+		control: 'select',
+		options: Object.values(FLAG_SIZES),
+	},
+	flag: {
+		control: 'select',
+		options: FLAG_OPTIONS,
+	},
+} as ArgTypes;
+
+Interactive.args = {
+	size: FLAG_SIZES.M,
+	flag: 'FLAG_POLAND',
+} as Args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=16265-4959',
+	},
+};

package/lib/js/components/Flag/Flag.vue

@@ -0,0 +1,84 @@
+<template>
+	<div
+		:class="{
+			'ds-flag': true,
+			'-ds-xxxs': size === FLAG_SIZES.XXXS,
+			'-ds-xxs': size === FLAG_SIZES.XXS,
+			'-ds-xs': size === FLAG_SIZES.XS,
+			'-ds-s': size === FLAG_SIZES.S,
+			'-ds-m': size === FLAG_SIZES.M,
+			'-ds-l': size === FLAG_SIZES.L,
+			'-ds-xl': size === FLAG_SIZES.XL,
+			'-ds-xxl': size === FLAG_SIZES.XXL,
+		}"
+	>
+		<component :is="flag" class="ds-flag__image" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/radiuses';
+
+.ds-flag {
+	border-radius: $radius-xs;
+	display: inline-block;
+	flex-shrink: 0;
+	overflow: hidden;
+
+	&.-ds-xxxs {
+		height: 8px;
+		width: 12px;
+	}
+
+	&.-ds-xxs {
+		height: 12px;
+		width: 18px;
+	}
+
+	&.-ds-xs {
+		height: 16px;
+		width: 25px;
+	}
+
+	&.-ds-s {
+		height: 20px;
+		width: 31px;
+	}
+
+	&.-ds-m {
+		height: 24px;
+		width: 37px;
+	}
+
+	&.-ds-l {
+		height: 28px;
+		width: 43px;
+	}
+
+	&.-ds-xl {
+		height: 32px;
+		width: 49px;
+	}
+
+	&.-ds-xxl {
+		height: 40px;
+		width: 61px;
+	}
+
+	&__image {
+		display: block;
+		height: 100%;
+		width: 100%;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { FLAG_SIZES, FlagSize } from './Flag.consts';
+
+const { flag, size = FLAG_SIZES.M } = defineProps<{
+	flag: Component;
+	size?: FlagSize;
+}>();
+</script>