@bethinkpl/design-system 16.2.1 → 16.3.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1683186981518,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}
+{"generatedAt":1684318839894,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.4"},"packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.13","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.13"},"@storybook/manager-webpack5":{"version":"6.5.13"},"@storybook/vue3":{"version":"6.5.13"},"eslint-plugin-storybook":{"version":"0.6.6"}},"framework":{"name":"vue3"},"addons":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-controls":{"version":"6.5.15"},"@storybook/addon-storysource":{"version":"6.5.15"},"@storybook/addon-viewport":{"version":"6.5.15"},"storybook-addon-designs":{"version":"6.3.1"}}}

package/lib/js/components/Drawer/DrawerContent/DrawerContent.stories.ts

@@ -0,0 +1,29 @@
+import DrawerContent from './DrawerContent.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/Drawer/DrawerContent',
+	component: DrawerContent,
+} as Meta<typeof DrawerContent>;
+
+const StoryTemplate: StoryFn<typeof DrawerContent> = (args) => ({
+	components: { DrawerContent },
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<drawer-content>
+			<div>One</div>
+			<div>Two</div>
+		</drawer-content>`,
+});
+
+export const Static = StoryTemplate.bind({});
+
+Static.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111039&t=ojEtzUKoNdQTh0X8-4',
+	},
+};

package/lib/js/components/Drawer/DrawerContent/DrawerContent.vue

@@ -0,0 +1,22 @@
+<template>
+	<div class="drawerContent">
+		<slot />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+
+.drawerContent {
+	display: flex;
+	flex-direction: column;
+	gap: $space-s;
+	padding: $space-xxs $space-s;
+}
+</style>
+
+<script lang="ts">
+export default {
+	name: 'DrawerContent',
+};
+</script>

package/lib/js/components/Drawer/DrawerDivider/DrawerDivider.stories.ts

@@ -0,0 +1,48 @@
+import DrawerDivider from './DrawerDivider.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
+
+export default {
+	title: 'Components/Drawer/DrawerDivider',
+	component: DrawerDivider,
+} as Meta<typeof DrawerDivider>;
+
+const StoryTemplate: StoryFn<typeof DrawerDivider> = (args) => ({
+	components: { DrawerDivider },
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<div style="height: 200px; width: 200px;">
+		<drawer-divider :prominence="prominence" :size="size" />
+		</div>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	prominence: DIVIDER_PROMINENCES.DEFAULT,
+	size: DIVIDER_SIZES.S,
+} as Args;
+
+const argTypes = {
+	prominence: {
+		control: { type: 'select', options: Object.values(DIVIDER_PROMINENCES) },
+		defaultValue: DIVIDER_PROMINENCES.DEFAULT,
+	},
+	size: {
+		control: { type: 'select', options: Object.values(DIVIDER_SIZES) },
+		defaultValue: DIVIDER_SIZES.S,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111032&t=2Z2n2tIHRHEsWjoW-4',
+	},
+};

package/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue

@@ -0,0 +1,36 @@
+<template>
+	<div class="drawerDivider">
+		<ds-divider :prominence="prominence" :size="size" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+
+.drawerDivider {
+	padding: $space-xxs 0;
+}
+</style>
+
+<script lang="ts">
+import Divider, { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
+
+export default {
+	name: 'DrawerDivider',
+	components: {
+		DsDivider: Divider,
+	},
+	props: {
+		prominence: {
+			type: String,
+			default: DIVIDER_PROMINENCES.DEFAULT,
+			validator: (value: string) => Object.values(DIVIDER_PROMINENCES).includes(value),
+		},
+		size: {
+			type: String,
+			default: DIVIDER_SIZES.S,
+			validator: (value: string) => Object.values(DIVIDER_SIZES).includes(value),
+		},
+	},
+};
+</script>

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts

@@ -0,0 +1,57 @@
+import DrawerHeader from './DrawerHeader.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { ICONS } from '../../Icons/Icon';
+
+export default {
+	title: 'Components/Drawer/DrawerHeader',
+	component: DrawerHeader,
+} as Meta<typeof DrawerHeader>;
+
+const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
+	components: { DrawerHeader },
+	setup() {
+		return { ...args };
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+	template: `
+		<drawer-header :title="title" :eyebrow-text="eyebrowText" :pill-label="pillLabel"
+					   :left-icon="ICONS[leftIcon]"
+					   :has-divider="hasDivider" :is-closable="isClosable"
+					   :is-interactive-eyebrow="isInteractiveEyebrow" :is-second-level="isSecondLevel"
+					   :eyebrow-ellipsis="eyebrowEllipsis" :title-ellipsis="titleEllipsis"/>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {} as Args;
+
+const argTypes = {
+	title: { control: { type: 'text' }, defaultValue: 'Header Title' },
+	eyebrowText: { control: { type: 'text' }, defaultValue: 'eyebrow' },
+	pillLabel: { control: { type: 'text' }, defaultValue: 'pill' },
+	hasDivider: { control: { type: 'boolean' }, defaultValue: false },
+	isClosable: { control: { type: 'boolean' }, defaultValue: true },
+	isSecondLevel: { control: { type: 'boolean' }, defaultValue: false },
+	isInteractiveEyebrow: { control: { type: 'boolean' }, defaultValue: false },
+	leftIcon: {
+		control: { type: 'select', options: [...Object.keys(ICONS), null] },
+		defaultValue: null,
+	},
+	eyebrowEllipsis: { control: { type: 'boolean' }, defaultValue: false },
+	titleEllipsis: { control: { type: 'boolean' }, defaultValue: false },
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=5844-97971&t=BghQUeaLDBGoEKOq-4',
+	},
+};

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue

@@ -0,0 +1,204 @@
+<template>
+	<div class="drawerHeader">
+		<div class="drawerHeader__titleWrapper">
+			<ds-button
+				v-if="isSecondLevel"
+				:icon-left="ICONS.FA_CHEVRON_LEFT"
+				:type="BUTTON_TYPES.TEXT"
+				class="drawerHeader__secondLevel"
+			>
+				Wróć
+			</ds-button>
+			<div :class="{ '-hidden': isSecondLevel }" class="drawerHeader__firstLevel">
+				<span
+					v-if="eyebrowText"
+					:class="{
+						'-isInteractive': isInteractiveEyebrow,
+						'-ellipsis': eyebrowEllipsis,
+					}"
+					class="drawerHeader__eyebrow"
+					@click="isInteractiveEyebrow && $emit('eyebrowClicked')"
+				>
+					{{ eyebrowText }}
+				</span>
+				<div class="drawerHeader__title">
+					<icon
+						v-if="leftIcon"
+						:icon="leftIcon"
+						:size="ICON_SIZES.X_SMALL"
+						class="drawerHeader__leftIcon"
+					/>
+					<span
+						v-if="title"
+						:class="{ '-ellipsis': titleEllipsis }"
+						:title="titleEllipsis ? title : undefined"
+						>{{ title }}</span
+					>
+					<pill v-if="pillLabel" :label="pillLabel" />
+				</div>
+			</div>
+			<icon-button
+				v-if="isClosable"
+				class="drawerHeader__closeButton"
+				:icon="ICONS.FA_XMARK"
+				:size="ICON_BUTTON_SIZES.MEDIUM"
+				:touchable="false"
+				@click="$emit('close')"
+			/>
+		</div>
+		<divider v-if="hasDivider" :size="DIVIDER_SIZES.L" :prominence="DIVIDER_PROMINENCES.WEAK" />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/colors/tokens';
+
+$minimal-drawer-header-height: 82px;
+
+.drawerHeader {
+	display: flex;
+	flex-direction: column;
+
+	&__secondLevel {
+		position: absolute !important; //it is required so firstLevel content does not make component wider when hidden, and important is needed so component does not change its width when button was clicked
+	}
+
+	&__leftIcon {
+		color: $color-neutral-icon;
+	}
+
+	&__firstLevel {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		row-gap: $space-xxxxs;
+
+		&.-hidden {
+			visibility: hidden; //by this we make sure that height does not change when switching to second level
+		}
+	}
+
+	&__eyebrow {
+		@include info-s-extensive-bold-uppercase;
+
+		color: $color-neutral-text-weak;
+
+		&.-isInteractive:hover {
+			color: $color-neutral-text-weak-hovered;
+			cursor: pointer;
+		}
+
+		&.-ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	&__title {
+		@include heading-s-default-bold-uppercase;
+
+		align-items: center;
+		color: $color-neutral-text-strong;
+		column-gap: $space-xxxs;
+		display: flex;
+
+		.-ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	&__titleWrapper {
+		align-items: center;
+		column-gap: $space-xxxxs;
+		display: flex;
+		justify-content: space-between;
+		min-height: $minimal-drawer-header-height;
+		padding: $space-m $space-xs $space-m $space-s;
+	}
+
+	&__closeButton {
+		align-self: flex-start;
+	}
+}
+</style>
+
+<script>
+import Button from '../../Buttons/Button/Button.vue';
+import Divider from '../../Divider/Divider.vue';
+import IconButton from '../../Buttons/IconButton/IconButton.vue';
+import Pill from '../../Pill/Pill.vue';
+import Icon from '../../Icons/Icon/Icon.vue';
+import { BUTTON_TYPES } from '../../Buttons/Button';
+import { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
+import { ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
+
+export default {
+	name: 'DrawerHeader',
+	components: {
+		DsButton: Button,
+		Divider,
+		Icon,
+		IconButton,
+		Pill,
+	},
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		eyebrowText: {
+			type: String,
+			default: null,
+		},
+		pillLabel: {
+			type: String,
+			default: null,
+		},
+		leftIcon: {
+			type: [Object, null],
+			default: null,
+		},
+		isClosable: {
+			type: Boolean,
+			default: true,
+		},
+		isSecondLevel: {
+			type: Boolean,
+			default: false,
+		},
+		isInteractiveEyebrow: {
+			type: Boolean,
+			default: false,
+		},
+		hasDivider: {
+			type: Boolean,
+			default: false,
+		},
+		eyebrowEllipsis: {
+			type: Boolean,
+			default: false,
+		},
+		titleEllipsis: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['close', 'eyebrowClicked'],
+	data() {
+		return {
+			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
+			DIVIDER_SIZES: Object.freeze(DIVIDER_SIZES),
+			DIVIDER_PROMINENCES: Object.freeze(DIVIDER_PROMINENCES),
+			ICONS: Object.freeze(ICONS),
+			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
+		};
+	},
+};
+</script>

package/lib/js/components/Drawer/DrawerHeader/index.ts

@@ -0,0 +1,3 @@
+import DrawerHeader from './DrawerHeader.vue';
+
+export default DrawerHeader;

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

@@ -0,0 +1,7 @@
+export const DRAWER_LIST_ITEM_STATES = {
+	DEFAULT: 'default',
+	LOADING: 'loading',
+} as const;
+
+export type DrawerListItemState =
+	typeof DRAWER_LIST_ITEM_STATES[keyof typeof DRAWER_LIST_ITEM_STATES];

package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.stories.ts

@@ -0,0 +1,43 @@
+import DrawerListItem from './DrawerListItem.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { DRAWER_LIST_ITEM_STATES } from './DrawerListItem.consts';
+
+export default {
+	title: 'Components/Drawer/DrawerListItem',
+	component: DrawerListItem,
+} as Meta<typeof DrawerListItem>;
+
+const StoryTemplate: StoryFn<typeof DrawerListItem> = (args) => ({
+	components: { DrawerListItem },
+	setup() {
+		return { ...args };
+	},
+	template: `<div style="height: 300px; width: 200px;">
+		<drawer-list-item :label="label" :value-text="valueText" :state="state" />
+		</div>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	label: 'Label',
+	valueText: 'value',
+} as Args;
+
+const argTypes = {
+	state: {
+		control: { type: 'select', options: Object.values(DRAWER_LIST_ITEM_STATES) },
+		defaultValue: DRAWER_LIST_ITEM_STATES.DEFAULT,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111025&t=pzyp7YuJcnGNBfS5-4',
+	},
+};

package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="drawerListItem">
+		<div class="drawerListItem__label">{{ label }}</div>
+		<ds-icon
+			v-if="state === DRAWER_LIST_ITEM_STATES.LOADING"
+			:icon="ICONS.FAD_SPINNER_THIRD"
+			:size="ICON_SIZES.XX_SMALL"
+			spinning
+		/>
+		<div v-else class="drawerListItem__value">
+			{{ valueText }}
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
+
+.drawerListItem {
+	align-items: center;
+	color: $color-neutral-text-strong;
+	display: flex;
+	gap: $space-xxs;
+	padding: $space-xxs 0;
+	width: 100%;
+
+	&__label {
+		@include label-m-default-regular;
+
+		overflow: hidden;
+		overflow-wrap: break-word;
+		width: 100%;
+	}
+
+	&__value {
+		@include info-m-default-bold;
+	}
+}
+</style>
+
+<script lang="ts">
+import { PropType } from 'vue';
+
+import { DRAWER_LIST_ITEM_STATES, DrawerListItemState } from './DrawerListItem.consts';
+import Icon, { ICONS, ICON_SIZES } from '../../Icons/Icon';
+
+export default {
+	name: 'DrawerListItem',
+	components: {
+		DsIcon: Icon,
+	},
+	props: {
+		state: {
+			type: String as PropType<DrawerListItemState>,
+			default: DRAWER_LIST_ITEM_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(DRAWER_LIST_ITEM_STATES).includes(state);
+			},
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		valueText: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			DRAWER_LIST_ITEM_STATES: Object.freeze(DRAWER_LIST_ITEM_STATES),
+			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
+		};
+	},
+};
+</script>

package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.stories.ts

@@ -0,0 +1,31 @@
+import DrawerListItemGroup from './DrawerListItemGroup.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+import DrawerListItem from '../DrawerListItem/DrawerListItem.vue';
+
+export default {
+	title: 'Components/Drawer/DrawerListItemGroup',
+	component: DrawerListItemGroup,
+} as Meta<typeof DrawerListItemGroup>;
+
+const StoryTemplate: StoryFn<typeof DrawerListItemGroup> = (args) => ({
+	components: { DrawerListItemGroup, DrawerListItem },
+	setup() {
+		return { ...args };
+	},
+	template: `
+    <drawer-list-item-group>
+			<drawer-list-item value-text="1" label="Item" />
+			<drawer-list-item value-text="2" label="Item" />
+		</drawer-list-item-group>
+  `,
+});
+
+export const Static = StoryTemplate.bind({});
+
+Static.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111079&t=PEjZUz7dUozNqntp-4',
+	},
+};

package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="drawerListItemGroup">
+		<slot />
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+
+.drawerListItemGroup {
+	padding: 0 0 $space-xxxs;
+}
+</style>
+
+<script lang="ts">
+export default {
+	name: 'DrawerListItemGroup',
+};
+</script>

package/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts

@@ -0,0 +1,41 @@
+import DrawerSection from './DrawerSection.vue';
+
+import { Args, Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/Drawer/DrawerSection',
+	component: DrawerSection,
+} as Meta<typeof DrawerSection>;
+
+const StoryTemplate: StoryFn<typeof DrawerSection> = (args) => ({
+	components: { DrawerSection },
+	setup() {
+		return { ...args };
+	},
+	template: `
+		<drawer-section
+			:has-divider="hasDivider"
+			:is-expandable="isExpandable"
+			:title="title"
+		>
+		Default slot
+		<template #uncollapsible>Uncollapsible slot</template>
+		</drawer-section>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	hasDivider: true,
+	isExpandable: false,
+	title: 'Drawer section header',
+} as Args;
+
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111107&t=jOrkmR91y4woubGJ-4',
+	},
+};