@bethinkpl/design-system 16.0.1 → 16.2.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1682327759759,"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":1682602775449,"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/TabItem/TabItem.consts.ts

@@ -0,0 +1,4 @@
+export const TAB_ITEM_SIZES = {
+	SMALL: 'S',
+	MEDIUM: 'M',
+} as const;

package/lib/js/components/TabItem/TabItem.spec.ts

@@ -2,14 +2,18 @@ import { shallowMount } from '@vue/test-utils';
 
 import TabItem from './TabItem.vue';
 import { ICONS } from '../Icons/Icon';
+import { TAB_ITEM_SIZES } from './TabItem.consts';
 
 describe('TabItem', () => {
-	const createComponent = ({ isActive = false } = {}) => {
+	const createComponent = ({ isSelected = false } = {}) => {
+		//@ts-ignore
 		return shallowMount(TabItem, {
 			props: {
-				icon: Object.freeze(ICONS.FA_CALENDAR_DAYS),
-				isActive,
-				title: 'Lorem ipsum dolor sit amet',
+				icon: ICONS.FA_CALENDAR_DAYS,
+				isSelected,
+				label: 'Lorem ipsum dolor sit amet',
+				labelEllipsis: false,
+				size: TAB_ITEM_SIZES.MEDIUM,
 			},
 		});
 	};
@@ -20,15 +24,15 @@ describe('TabItem', () => {
 		expect(component.exists()).toBe(true);
 	});
 
-	it('when prop isActive is set to false component should not render "isActive" class', () => {
-		const component = createComponent({ isActive: false });
+	it('when prop isSelected is set to false component should not render "isSelected" class', () => {
+		const component = createComponent({ isSelected: false });
 
-		expect(component.find('.-isActive').exists()).toBe(false);
+		expect(component.find('.-isSelected').exists()).toBe(false);
 	});
 
-	it('when prop isActive is set to true component should render "isActive" class', () => {
-		const component = createComponent({ isActive: true });
+	it('when prop isSelected is set to true component should render "isSelected" class', () => {
+		const component = createComponent({ isSelected: true });
 
-		expect(component.find('.-isActive').exists()).toBe(true);
+		expect(component.find('.-isSelected').exists()).toBe(true);
 	});
 });

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

@@ -2,6 +2,7 @@ import TabItem from './TabItem.vue';
 import { ICONS } from '../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { TAB_ITEM_SIZES } from './TabItem.consts';
 
 export default {
 	title: 'Components/TabItem',
@@ -13,10 +14,12 @@ const StoryTemplate: StoryFn<typeof TabItem> = (args) => ({
 	setup() {
 		return { ...args };
 	},
-	template: '<tab-item :icon="ICONS[icon]" :is-active="isActive" :title="title" />',
+	template:
+		'<tab-item style="max-width: 150px" :icon="ICONS[icon]" :is-selected="isSelected" :label="label" :size="TAB_ITEM_SIZES[size]" :label-ellipsis="labelEllipsis" />',
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
+			TAB_ITEM_SIZES: Object.freeze(TAB_ITEM_SIZES),
 		};
 	},
 });
@@ -24,14 +27,29 @@ const StoryTemplate: StoryFn<typeof TabItem> = (args) => ({
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
-	isActive: false,
-	title: 'Lorem ipsum dolor sit amet',
+	isSelected: false,
 } as Args;
 
 const argTypes = {
 	icon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
-		defaultValue: 'FA_CALENDAR_DAYS',
+		control: { type: 'select', options: [...Object.keys(ICONS), null] },
+		defaultValue: null,
+	},
+	size: {
+		control: { type: 'select', options: Object.keys(TAB_ITEM_SIZES) },
+		defaultValue: 'MEDIUM',
+	},
+	label: {
+		control: { type: 'text' },
+		defaultValue: 'Tab item',
+	},
+	isSelected: {
+		control: { type: 'boolean' },
+		defaultValue: false,
+	},
+	labelEllipsis: {
+		control: { type: 'boolean' },
+		defaultValue: false,
 	},
 } as ArgTypes;
 

package/lib/js/components/TabItem/TabItem.vue

@@ -1,65 +1,136 @@
 <template>
-	<div class="a-tabItem" :title="title" :class="{ '-isActive': isActive }">
-		<wnl-icon :icon="icon" :size="ICON_SIZES.X_SMALL" />
+	<div
+		class="tabItem"
+		:title="label"
+		:class="{
+			'-sizeMedium': size === TAB_ITEM_SIZES.MEDIUM,
+			'-sizeSmall': size === TAB_ITEM_SIZES.SMALL,
+			'-isSelected': isSelected,
+		}"
+		@click="$emit('click')"
+	>
+		<ds-icon
+			v-if="icon !== null"
+			class="tabItem__icon"
+			:icon="icon"
+			:size="ICON_SIZES.X_SMALL"
+		/>
+		<span v-if="label" class="tabItem__label" :class="{ '-ellipsis': labelEllipsis }">{{
+			label
+		}}</span>
 	</div>
 </template>
 
 <style scoped lang="scss">
-@import '../../../styles/settings/icons';
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/animations';
 
-$tab-item-width: (2 * $space-s) + $icon-xs;
+.tabItem {
+	$self: &;
 
-.a-tabItem {
-	border-bottom: 1px solid $color-neutral-border;
-	color: $color-neutral-icon;
+	align-items: center;
+	box-shadow: inset 0 -1px 0 $color-neutral-border;
 	cursor: pointer;
-	display: flex;
+	display: inline-flex;
 	justify-content: center;
-	padding: $space-xxs $space-s;
-	width: $tab-item-width;
+	min-height: 40px;
+	transition: box-shadow ease-in-out $default-transition-time;
+
+	&__icon {
+		color: $color-neutral-icon;
+		transition: color ease-in-out $default-transition-time;
+	}
+
+	&__label {
+		color: $color-neutral-text;
+		transition: color ease-in-out $default-transition-time;
+
+		&.-ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
 
 	&:hover {
-		border-bottom-color: $color-default-border;
-		color: $color-default-icon;
+		box-shadow: inset 0 -1px 0 $color-default-border;
+		#{$self}__icon {
+			color: $color-default-icon;
+		}
+
+		#{$self}__label {
+			color: $color-default-text;
+		}
 	}
 
-	&.-isActive {
-		border-bottom-color: $color-primary-border;
-		color: $color-primary-icon;
+	&.-isSelected {
+		box-shadow: inset 0 -1px 0 $color-primary-border;
+
+		#{$self}__icon {
+			color: $color-primary-icon;
+		}
+
+		#{$self}__label {
+			color: $color-primary-text;
+		}
+	}
+
+	&.-sizeSmall {
+		@include label-m-default-bold;
+
+		column-gap: $space-xxxxs;
+		padding: $space-xs;
+	}
+
+	&.-sizeMedium {
+		@include label-l-default-bold;
+
+		column-gap: $space-xxs;
+		padding: $space-xs $space-s;
 	}
 }
 </style>
 
 <script lang="ts">
-import WnlIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
+import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { toRaw } from 'vue';
+import { TAB_ITEM_SIZES } from './TabItem.consts';
 
 export default {
 	name: 'TabItem',
 	components: {
-		WnlIcon,
+		DsIcon,
 	},
 	props: {
 		icon: {
-			type: Object,
-			required: true,
+			type: [Object, null],
+			default: null,
 			validator(icon) {
-				return Object.values(ICONS).includes(toRaw(icon));
+				return icon === null || Object.values(ICONS).includes(toRaw(icon));
 			},
 		},
-		isActive: {
+		isSelected: {
 			type: Boolean,
 			required: true,
 		},
-		title: {
+		label: {
+			type: [String, null],
+			default: null,
+		},
+		labelEllipsis: {
+			type: Boolean,
+			default: false,
+		},
+		size: {
 			type: String,
-			required: true,
+			default: TAB_ITEM_SIZES.MEDIUM,
 		},
 	},
 	data() {
 		return {
+			TAB_ITEM_SIZES: Object.freeze(TAB_ITEM_SIZES),
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 		};
 	},

package/lib/js/components/TabItem/index.ts

@@ -1,3 +1,3 @@
 import TabItem from './TabItem.vue';
-
 export default TabItem;
+export * from './TabItem.consts';

package/lib/js/icons/fontawesome.ts

@@ -45,6 +45,7 @@ import { faCircleNotch } from '@fortawesome/pro-regular-svg-icons/faCircleNotch'
 import { faCircleQuestion } from '@fortawesome/pro-regular-svg-icons/faCircleQuestion';
 import { faCircleXmark } from '@fortawesome/pro-regular-svg-icons/faCircleXmark';
 import { faClipboardMedical } from '@fortawesome/pro-regular-svg-icons/faClipboardMedical';
+import { faClipboardList } from '@fortawesome/pro-regular-svg-icons/faClipboardList';
 import { faClock } from '@fortawesome/pro-regular-svg-icons/faClock';
 import { faClockRotateLeft } from '@fortawesome/pro-regular-svg-icons/faClockRotateLeft';
 import { faCode } from '@fortawesome/pro-regular-svg-icons/faCode';
@@ -236,6 +237,7 @@ export const FONTAWESOME_ICONS = {
 	FA_CIRCLE_QUESTION: faCircleQuestion,
 	FA_CIRCLE_XMARK: faCircleXmark,
 	FA_CLIPBOARD_MEDICAL: faClipboardMedical,
+	FA_CLIPBOARD_LIST: faClipboardList,
 	FA_CLOCK: faClock,
 	FA_CLOCK_ROTATE_LEFT: faClockRotateLeft,
 	FA_CODE: faCode,

package/lib/js/index.ts

@@ -26,6 +26,7 @@ export { default as DsModalDialog } from './components/Modals/ModalDialog';
 export { default as NumberInCircle } from './components/NumberInCircle';
 export * from './components/NumberInCircle/NumberInCircle.consts';
 export { default as TabItem } from './components/TabItem';
+export * from './components/TabItem/TabItem.consts';
 export { default as Tile } from './components/Tile';
 export * from './components/Tile/Tile.consts';
 export { default as AccessStatus } from './components/Statuses/AccessStatus/';

package/lib/styles/design-system.scss

@@ -50,7 +50,9 @@ textarea {
 }
 
 html.thick-scrollbar {
-	@include scrollbar(15px, var(--raw-gray-100));
+	@media #{breakpoint-m()} {
+		@include scrollbar(15px, var(--raw-gray-100));
+	}
 }
 
 html {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "16.0.1",
+  "version": "16.2.0",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",