@bethinkpl/design-system 40.0.1 → 41.0.0

package/lib/js/components/TopNav/TopNav/TopNav.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="ds-topNav">
+		<div class="ds-topNav__leftWrapper">
+			<div v-if="$slots.leading" class="ds-topNav__leading">
+				<slot name="leading" />
+			</div>
+			<div class="ds-topNav__default">
+				<slot />
+			</div>
+		</div>
+		<div v-if="$slots.trailing" class="ds-topNav__trailing">
+			<slot name="trailing" />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/shadows';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/media-queries';
+
+.ds-topNav {
+	align-items: center;
+	background-color: $color-default-background;
+	box-shadow: $shadow-s;
+	display: flex;
+	gap: $space-6;
+	height: 56px;
+	padding: 0 $space-6 0 $space-3;
+	width: 100%;
+
+	@media #{breakpoint-s()} {
+		padding: $space-6 $space-10;
+	}
+
+	&__leftWrapper {
+		align-items: center;
+		display: flex;
+		flex: 1 0 0;
+		min-width: 0;
+
+		@media #{breakpoint-s()} {
+			gap: $space-4;
+		}
+	}
+
+	&__leading {
+		align-items: center;
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	&__default {
+		flex: 1 0 0;
+		margin-left: $space-3;
+		min-width: 0;
+
+		@media #{breakpoint-s()} {
+			margin-left: 0;
+		}
+	}
+
+	&__trailing {
+		align-items: center;
+		display: flex;
+		flex-shrink: 0;
+		justify-content: flex-end;
+	}
+}
+</style>
+
+<script setup lang="ts">
+defineSlots<{
+	leading?: () => any;
+	default?: () => any;
+	trailing?: () => any;
+}>();
+</script>

package/lib/js/components/TopNav/TopNavBranding/TopNavBranding.spec.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+
+import TopNavBranding from './TopNavBranding.vue';
+
+describe('TopNavBranding', () => {
+	const createComponent = (props = {}, slots = {}) =>
+		mount(TopNavBranding, {
+			props: {
+				title: 'Title',
+				...props,
+			},
+			slots,
+		});
+
+	it('should create', () => {
+		const component = createComponent();
+
+		expect(component.exists()).toBe(true);
+		expect(component.find('.ds-topNavBranding').exists()).toBe(true);
+	});
+
+	it('renders the title', () => {
+		const component = createComponent({ title: 'Kurs do LEK' });
+
+		expect(component.find('.ds-topNavBranding__title').text()).toBe('Kurs do LEK');
+	});
+
+	it('renders the logo slot when provided', () => {
+		const component = createComponent(
+			{},
+			{ logo: () => h('span', { class: 'child' }, 'Logo') },
+		);
+
+		expect(component.find('.ds-topNavBranding__logo .child').text()).toBe('Logo');
+	});
+
+	it('does not render the logo wrapper when the slot is not provided', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-topNavBranding__logo').exists()).toBe(false);
+	});
+
+	it('renders the accessory slot when provided', () => {
+		const component = createComponent(
+			{},
+			{ accessory: () => h('span', { class: 'child' }, 'Accessory') },
+		);
+
+		expect(component.find('.ds-topNavBranding__accessory .child').text()).toBe('Accessory');
+	});
+
+	it('does not render the accessory wrapper when the slot is not provided', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-topNavBranding__accessory').exists()).toBe(false);
+	});
+
+	describe('link rendering', () => {
+		it('renders the brand as a non-interactive div by default', () => {
+			const component = createComponent();
+			const brand = component.find('.ds-topNavBranding__brand');
+
+			expect(brand.element.tagName).toBe('DIV');
+		});
+
+		it('renders the brand as an anchor when href is provided', () => {
+			const component = createComponent({ href: 'https://example.com' });
+			const brand = component.find('.ds-topNavBranding__brand');
+
+			expect(brand.element.tagName).toBe('A');
+			expect(brand.attributes('href')).toBe('https://example.com');
+			expect(brand.find('.ds-topNavBranding__title').text()).toBe('Title');
+		});
+
+		it('renders the brand as a router-link when to is provided', () => {
+			const component = createComponent({ to: '/home' });
+			const brand = component.find('.ds-topNavBranding__brand');
+
+			expect(brand.element.tagName).toBe('ROUTER-LINK');
+		});
+
+		it('prioritizes href over to', () => {
+			const component = createComponent({ href: 'https://example.com', to: '/home' });
+			const brand = component.find('.ds-topNavBranding__brand');
+
+			expect(brand.element.tagName).toBe('A');
+			expect(brand.attributes('href')).toBe('https://example.com');
+		});
+
+		it('keeps the accessory outside the link', () => {
+			const component = createComponent(
+				{ href: 'https://example.com' },
+				{ accessory: () => h('span', { class: 'child' }, 'Accessory') },
+			);
+			const brand = component.find('.ds-topNavBranding__brand');
+
+			expect(brand.find('.ds-topNavBranding__accessory').exists()).toBe(false);
+			expect(component.find('.ds-topNavBranding__accessory .child').text()).toBe('Accessory');
+		});
+	});
+});

package/lib/js/components/TopNav/TopNavBranding/TopNavBranding.stories.ts

@@ -0,0 +1,107 @@
+import TopNavBranding from './TopNavBranding.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import Flag from '../../Flag/Flag.vue';
+import { FLAG_SIZES } from '../../Flag/Flag.consts';
+import * as FLAGS from '../../Flag/flags';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
+import { toRefs } from 'vue';
+import { TOP_NAV_STORY_LOGO } from '../topNavStoryLogo';
+
+export default {
+	title: 'Components/TopNav/TopNavBranding',
+	component: TopNavBranding,
+} as Meta<typeof TopNavBranding>;
+
+const FilledTemplate: StoryFn<typeof TopNavBranding> = (args) => ({
+	components: { TopNavBranding, Flag },
+	setup() {
+		return {
+			...toRefs(args),
+			logo: TOP_NAV_STORY_LOGO,
+			FLAGS,
+			FLAG_SIZES,
+		};
+	},
+	template: `
+		<top-nav-branding :title="title" :href="href" :to="to">
+			<template #logo>
+				<span v-html="logo" style="display: inline-flex;" />
+			</template>
+			<template #accessory>
+				<flag :flag="FLAGS.FLAG_POLAND" :size="FLAG_SIZES.XXS" />
+			</template>
+		</top-nav-branding>
+	`,
+});
+
+export const Filled = FilledTemplate.bind({});
+
+export const Linked = FilledTemplate.bind({});
+
+const SlotPlaceholdersTemplate: StoryFn<typeof TopNavBranding> = (args) => ({
+	components: { TopNavBranding, SlotPlaceholder },
+	setup() {
+		return {
+			...toRefs(args),
+			SLOT_PLACEHOLDER_SIZES,
+		};
+	},
+	template: `
+		<top-nav-branding :title="title">
+			<template #logo>
+				<slot-placeholder label="logo" :size="SLOT_PLACEHOLDER_SIZES.MEDIUM" />
+			</template>
+			<template #accessory>
+				<slot-placeholder label="accessory" :size="SLOT_PLACEHOLDER_SIZES.MEDIUM" />
+			</template>
+		</top-nav-branding>
+	`,
+});
+
+export const SlotPlaceholders = SlotPlaceholdersTemplate.bind({});
+
+const args = {
+	title: 'Bethink',
+	href: '',
+	to: '',
+} as Args;
+
+const argTypes = {
+	title: {
+		control: 'text',
+	},
+	href: {
+		control: 'text',
+		description: 'Renders the logo + title as an `<a>` linking to this URL.',
+	},
+	to: {
+		control: 'text',
+		description:
+			'Renders the logo + title as a `<router-link>` (resolved by the host app). Ignored when `href` is set.',
+	},
+} as ArgTypes;
+
+const parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/xym3gXf0vBCofzksDtRDaU/INI-201-E-commerce?node-id=345-21287&m=dev',
+	},
+};
+
+Filled.args = args;
+Filled.argTypes = argTypes;
+Filled.parameters = parameters;
+
+Linked.args = {
+	...args,
+	href: '/',
+} as Args;
+Linked.argTypes = argTypes;
+Linked.parameters = parameters;
+
+SlotPlaceholders.args = args;
+SlotPlaceholders.argTypes = argTypes;
+SlotPlaceholders.parameters = parameters;

package/lib/js/components/TopNav/TopNavBranding/TopNavBranding.vue

@@ -0,0 +1,102 @@
+<template>
+	<div class="ds-topNavBranding">
+		<component :is="brandAs" v-bind="brandBindings" class="ds-topNavBranding__brand">
+			<span v-if="$slots.logo" class="ds-topNavBranding__logo">
+				<slot name="logo" />
+			</span>
+			<span class="ds-topNavBranding__title">
+				{{ title }}
+			</span>
+		</component>
+		<div v-if="$slots.accessory" class="ds-topNavBranding__accessory">
+			<slot name="accessory" />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/media-queries';
+
+.ds-topNavBranding {
+	align-items: center;
+	display: flex;
+	gap: $space-6;
+	width: 100%;
+
+	&__brand {
+		align-items: center;
+		color: inherit;
+		display: flex;
+		gap: $space-6;
+		text-decoration: none;
+	}
+
+	&__logo {
+		align-items: center;
+		display: flex;
+		flex-shrink: 0;
+	}
+
+	&__title {
+		@include text-m-compact-regular;
+
+		color: $color-default-text;
+		flex: 0 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		@media #{breakpoint-s()} {
+			@include text-l-compact-regular;
+		}
+	}
+
+	&__accessory {
+		align-items: center;
+		display: flex;
+		flex-shrink: 0;
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// DS don't have vue-router installed, so we define a loose type which should match RouteLocationRaw
+type RouterLocation = string | Record<string, unknown>;
+
+const { href = '', to = '' } = defineProps<{
+	title: string;
+	href?: string;
+	to?: RouterLocation;
+}>();
+
+defineSlots<{
+	logo?: () => any;
+	accessory?: () => any;
+}>();
+
+const brandAs = computed(() => {
+	if (href) {
+		return 'a';
+	}
+	if (to) {
+		return 'router-link';
+	}
+	return 'div';
+});
+
+const brandBindings = computed(() => {
+	if (href) {
+		return { href };
+	}
+	if (to) {
+		return { to };
+	}
+	return {};
+});
+</script>

package/lib/js/components/TopNav/topNavStoryLogo.ts

@@ -0,0 +1,19 @@
+// Shared SVG logo markup used by the TopNav and TopNavBranding Storybook stories.
+export const TOP_NAV_STORY_LOGO = `
+	<span style="display: inline-flex; height: 24px; width: 31.448px;">
+		<svg preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 31.4483 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block;">
+			<g clip-path="url(#clip0_0_28)">
+				<path d="M6.79071 8.23154C6.79071 8.64557 7.12449 8.95993 7.51966 8.95993C7.68463 8.95993 7.84193 8.90242 7.96086 8.81041L11.947 11.7278C11.8818 11.8658 11.8435 12.023 11.8435 12.1878C11.8435 12.3527 11.878 12.4984 11.9432 12.6287L7.96853 15.3966C7.84193 15.2969 7.68463 15.2318 7.51582 15.2318C7.10147 15.2318 6.78687 15.5653 6.78687 15.9601C6.78687 16.3742 7.12065 16.6885 7.51582 16.6885C7.91099 16.6885 8.24477 16.355 8.24477 15.9601C8.24477 15.8758 8.22558 15.7876 8.19873 15.7186L12.1657 12.9584C12.3614 13.1539 12.6338 13.2728 12.9215 13.2728C13.5315 13.2728 13.9996 12.7782 13.9996 12.1955C13.9996 11.6128 13.5277 11.0991 12.933 11.0991C12.6491 11.0991 12.3883 11.2179 12.1887 11.402L8.20256 8.48839C8.23709 8.40788 8.2486 8.32354 8.2486 8.23154C8.2486 7.8175 7.91482 7.50314 7.51966 7.50314C7.10531 7.50314 6.79071 7.83667 6.79071 8.23154ZM12.933 11.6856C13.2093 11.6856 13.428 11.9042 13.428 12.1802C13.428 12.4562 13.2093 12.6747 12.933 12.6747C12.6568 12.6747 12.4381 12.4562 12.4381 12.1802C12.4381 11.9042 12.6568 11.6856 12.933 11.6856ZM7.86111 8.24687C7.86111 8.42322 7.70381 8.5804 7.52733 8.5804C7.35085 8.5804 7.19355 8.42322 7.19355 8.24687C7.19355 8.07052 7.35085 7.91334 7.52733 7.91334C7.70381 7.91334 7.86111 8.07052 7.86111 8.24687Z" fill="#101921"/>
+				<path d="M4.4811 14.9481C4.58916 14.9481 4.67677 14.8605 4.67677 14.7526C4.67677 14.6446 4.58916 14.557 4.4811 14.557C4.37304 14.557 4.28544 14.6446 4.28544 14.7526C4.28544 14.8605 4.37304 14.9481 4.4811 14.9481Z" fill="#101921"/>
+				<path d="M3.59102 13.499C3.40686 13.499 3.25724 13.6485 3.25724 13.8325C3.25724 14.0165 3.40686 14.166 3.59102 14.166C3.77517 14.166 3.9248 14.0165 3.9248 13.8325C3.9248 13.6485 3.77517 13.499 3.59102 13.499Z" fill="#101921"/>
+				<path d="M3.8097 12.0843C3.8097 11.7278 3.53347 11.4518 3.17667 11.4518C2.81987 11.4518 2.54364 11.7278 2.54364 12.0843C2.54364 12.4409 2.81987 12.7169 3.17667 12.7169C3.53347 12.7169 3.8097 12.4409 3.8097 12.0843Z" fill="#101921"/>
+				<path d="M24.3315 5.37931H7.6923C3.44139 5.37931 0 8.34271 0 12C0 15.6573 3.46058 18.6207 7.6923 18.6207H24.3123C28.2486 18.6207 31.4521 15.6343 31.4521 11.9885C31.4521 8.34271 28.2639 5.37931 24.3315 5.37931ZM15.5419 17.5434H7.71148C4.07443 17.5434 1.10493 15.0631 1.10493 12C1.10493 8.93692 4.05141 6.45656 7.71148 6.45656H15.5419V17.5434ZM29.8753 10.6122C29.8561 10.6122 29.8177 10.6237 29.7755 10.6237C29.6566 10.6161 29.5645 10.5509 29.5108 10.4282C28.9852 9.00976 27.7076 7.83284 26.0694 7.29996C25.9198 7.24629 25.8277 7.08144 25.8776 6.93193C25.9313 6.78242 26.0963 6.69041 26.2459 6.74025C28.0337 7.34597 29.4571 8.64557 30.0364 10.225C30.0901 10.3899 30.0172 10.5471 29.8715 10.6122H29.8753Z" fill="#101921"/>
+			</g>
+			<defs>
+				<clipPath id="clip0_0_28">
+					<rect width="31.4483" height="24" fill="white"/>
+				</clipPath>
+			</defs>
+		</svg>
+	</span>
+`;

package/lib/js/index.ts

@@ -96,11 +96,9 @@ export { default as DsDrawerDivider } from './components/Drawer/DrawerDivider/Dr
 export { default as DrawerHeader } from './components/Drawer/DrawerHeader/DrawerHeader.vue';
 export { default as DsDrawerHeader } from './components/Drawer/DrawerHeader/DrawerHeader.vue';
 export * from './components/Drawer/DrawerHeader/DrawerHeader.consts';
-export { default as DrawerListItem } from './components/Drawer/DrawerListItem/DrawerListItem.vue';
-export { default as DsDrawerListItem } from './components/Drawer/DrawerListItem/DrawerListItem.vue';
-export { default as DrawerListItemGroup } from './components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue';
-export { default as DsDrawerListItemGroup } from './components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue';
-export * from './components/Drawer/DrawerListItem/DrawerListItem.consts';
+export { default as DsLabelValueItem } from './components/LabelValue/LabelValueItem/LabelValueItem.vue';
+export { default as DsLabelValueItemGroup } from './components/LabelValue/LabelValueItemGroup/LabelValueItemGroup.vue';
+export * from './components/LabelValue/LabelValueItem/LabelValueItem.consts';
 export { default as DrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
 export { default as DsDrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
 export { default as DrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
@@ -188,6 +186,9 @@ export { default as DsSkeleton } from './components/Skeleton/Skeleton.vue';
 export { default as DsStatsLayout } from './components/StatsLayout/StatsLayout.vue';
 export { default as DsStatsResetBanner } from './components/StatsLayout/StatsResetBanner/StatsResetBanner.vue';
 export { default as DsStatsSectionHeader } from './components/StatsLayout/StatsSectionHeader/StatsSectionHeader.vue';
+export { default as DsStepper } from './components/Stepper';
+export { default as DsTopNav } from './components/TopNav/TopNav/TopNav.vue';
+export { default as DsTopNavBranding } from './components/TopNav/TopNavBranding/TopNavBranding.vue';
 export { default as DsFlag } from './components/Flag';
 export * from './components/Flag/Flag.consts';
 export * from './components/Flag/flags';

package/lib/js/styles/Radiuses/Radiuses.stories.ts

@@ -0,0 +1,44 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'foundations/Radiuses',
+} as Meta;
+
+const radiuses = [
+	{ name: 'radius-xs', value: '2px' },
+	{ name: 'radius-s', value: '4px' },
+	{ name: 'radius-m', value: '6px' },
+	{ name: 'radius-l', value: '8px' },
+	// Special radius for components which have to be always rounded
+	{ name: 'radius-xl', value: '200px' },
+];
+
+const StoryTemplate: StoryFn = () => ({
+	setup() {
+		return {
+			radiuses,
+		};
+	},
+	methods: {
+		getStyles(radius) {
+			return `
+				border-radius: ${radius.value};
+				background-color: gray;
+				height: 80px;
+				width: 160px;
+			`;
+		},
+	},
+	template: `
+		<div>
+			<div v-for="radius in radiuses" style="margin-bottom: 24px;">
+				<code>
+					\${{ radius.name }}: {{ radius.value }}
+				</code>
+				<div :style="getStyles(radius)"></div>
+			</div>
+		</div>
+	`,
+});
+
+export const Static = StoryTemplate.bind({});

package/lib/js/styles/Shadows/Shadows.stories.scss

@@ -0,0 +1,33 @@
+@import '../../../styles/settings/shadows';
+@import '../../../styles/settings/radiuses';
+
+.ds-shadow {
+	background-color: var(--color-default-background);
+	border-radius: $radius-m;
+	height: 80px;
+	width: 240px;
+
+	&.-ds-shadowS {
+		box-shadow: $shadow-s;
+	}
+
+	&.-ds-shadowM {
+		box-shadow: $shadow-m;
+	}
+
+	&.-ds-shadowL {
+		box-shadow: $shadow-l;
+	}
+
+	&.-ds-shadowXl {
+		box-shadow: $shadow-xl;
+	}
+
+	&.-ds-shadowInsetS {
+		box-shadow: $shadow-inset-s;
+	}
+
+	&.-ds-shadowInsetM {
+		box-shadow: $shadow-inset-m;
+	}
+}

package/lib/js/styles/Shadows/Shadows.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import './Shadows.stories.scss';
+
+export default {
+	title: 'foundations/Shadows',
+} as Meta;
+
+// Names mirror lib/styles/settings/_shadows.scss; the shadows themselves are
+// applied from that source via the `.ds-shadow` classes in Shadows.stories.scss.
+const shadows = [
+	{ name: 'shadow-s', modifier: '-ds-shadowS' },
+	{ name: 'shadow-m', modifier: '-ds-shadowM' },
+	{ name: 'shadow-l', modifier: '-ds-shadowL' },
+	{ name: 'shadow-xl', modifier: '-ds-shadowXl' },
+	{ name: 'shadow-inset-s', modifier: '-ds-shadowInsetS' },
+	{ name: 'shadow-inset-m', modifier: '-ds-shadowInsetM' },
+];
+
+const StoryTemplate: StoryFn = () => ({
+	setup() {
+		return {
+			shadows,
+		};
+	},
+	template: `
+		<div style="padding: 24px;">
+			<div v-for="shadow in shadows" style="margin-bottom: 48px;">
+				<code>
+					\${{ shadow.name }}
+				</code>
+				<div :class="['ds-shadow', shadow.modifier]" style="margin-top: 12px;"></div>
+			</div>
+		</div>
+	`,
+});
+
+export const Static = StoryTemplate.bind({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "40.0.1",
+  "version": "41.0.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",

package/dist/lib/js/components/Drawer/DrawerListItem/DrawerListItem.consts.d.ts

@@ -1,5 +0,0 @@
-export declare const DRAWER_LIST_ITEM_STATES: {
-    readonly DEFAULT: "default";
-    readonly LOADING: "loading";
-};
-export type DrawerListItemState = (typeof DRAWER_LIST_ITEM_STATES)[keyof typeof DRAWER_LIST_ITEM_STATES];