@bethinkpl/design-system 22.0.5 → 22.1.0

package/docs/project.json

@@ -1 +1 @@
-{"generatedAt":1718352425644,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"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":1719584425466,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"vue-cli","packageName":"@vue/cli-service","version":"5.0.8"},"packageManager":{"type":"yarn","version":"1.22.22"},"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/Cards/Card/Card.vue

@@ -60,7 +60,7 @@
 
 	&.-ds-border-size-small {
 		border-radius: $radius-xs;
-		border-width: $border-s;
+		border-top-width: $border-s;
 
 		#{$root}__loadingBar {
 			border-radius: $radius-xs $radius-xs 0 0;
@@ -70,7 +70,7 @@
 
 	&.-ds-border-size-medium {
 		border-radius: $radius-s;
-		border-width: $border-m;
+		border-top-width: $border-m;
 
 		#{$root}__loadingBar {
 			border-radius: $radius-s $radius-s 0 0;
@@ -80,7 +80,7 @@
 
 	&.-ds-border-size-large {
 		border-radius: $radius-m;
-		border-width: $border-l;
+		border-top-width: $border-l;
 
 		#{$root}__loadingBar {
 			border-radius: $radius-m $radius-m 0 0;

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

@@ -14,8 +14,8 @@
 			:eyebrow="eyebrow"
 			:supporting-text="supportingText"
 			:has-divider="hasDivider"
-			@infoClick="onInfoClick"
-			@update:isExpanded="onExpandableHeaderClick"
+			@info-click="onInfoClick"
+			@update:is-expanded="onExpandableHeaderClick"
 		/>
 
 		<div v-if="isExpandedInternal || !isExpandable">

package/lib/js/components/Form/Checkbox/Checkbox.vue

@@ -7,7 +7,7 @@
 		:not-selected-icon="ICONS.FA_SQUARE"
 		:state="state"
 		:type="SELECTION_CONTROL_TYPE.CHECKBOX"
-		@update:isSelected="$emit('update:isSelected', $event)"
+		@update:is-selected="$emit('update:is-selected', $event)"
 		@input:focus="$emit('input:focus')"
 		@input:blur="$emit('input:blur')"
 	/>
@@ -49,7 +49,7 @@ export default {
 	},
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['update:isSelected', 'input:focus', 'input:blur'],
+	emits: ['update:is-selected', 'input:focus', 'input:blur'],
 	data() {
 		return {
 			SELECTION_CONTROL_TYPE: Object.freeze(SELECTION_CONTROL_TYPE),

package/lib/js/components/Form/RadioButton/RadioButton.vue

@@ -7,7 +7,7 @@
 		:not-selected-icon="ICONS.FA_CIRCLE"
 		:state="state"
 		:type="SELECTION_CONTROL_TYPE.RADIO_BUTTON"
-		@update:isSelected="$emit('update:isSelected', $event)"
+		@update:is-selected="$emit('update:is-selected', $event)"
 		@input:focus="$emit('input:focus')"
 		@input:blur="$emit('input:blur')"
 	/>
@@ -54,7 +54,7 @@ export default {
 	},
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['update:isSelected', 'input:focus', 'input:blur'],
+	emits: ['update:is-selected', 'input:focus', 'input:blur'],
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),

package/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.ts

@@ -1,7 +1,7 @@
 import { Args, ArgTypes } from '@storybook/vue3';
 
 export const template = (componentTag: string) => `
-		<${componentTag} v-bind="args" @update:isSelected="onIsSelectedUpdated"/>`;
+		<${componentTag} v-bind="args" @update:is-selected="onIsSelectedUpdated"/>`;
 
 export const argTypes = (size, state) =>
 	({

package/lib/js/components/Form/SelectionControl/SelectionControl.vue

@@ -290,7 +290,7 @@ export default {
 	},
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['update:isSelected', 'input:focus', 'input:blur'],
+	emits: ['update:is-selected', 'input:focus', 'input:blur'],
 	data() {
 		return {
 			isFocused: false,
@@ -323,7 +323,7 @@ export default {
 				return;
 			}
 
-			this.$emit('update:isSelected', !this.isSelected);
+			this.$emit('update:is-selected', !this.isSelected);
 		},
 		onFocus() {
 			this.isFocused = true;

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -91,7 +91,7 @@
 			:icon="ICONS.FA_XMARK"
 			:size="ICON_BUTTON_SIZES.MEDIUM"
 			:color="ICON_BUTTON_COLORS.NEUTRAL"
-			@click.native="$emit('close')"
+			@click="$emit('close')"
 		/>
 	</div>
 </template>

package/lib/js/components/PopOver/PopOver.vue

@@ -1,52 +1,50 @@
 <template>
-	<span>
-		<slot v-if="triggerAction === POP_OVER_TRIGGER_ACTIONS.NONE" name="reference" />
-		<vue-popper
-			v-else
-			ref="popper"
-			:key="key"
-			:boundaries-selector="boundariesSelector"
-			:force-show="forceShow"
-			:options="{ placement, modifiers }"
-			:trigger="triggerAction"
-			:delay-on-mouse-over="300"
-			:delay-on-mouse-out="300"
-			:append-to-body="appendToBody"
-			:visible-arrow="isPointerVisible"
-			:root-class="rootClass"
+	<slot v-if="triggerAction === POP_OVER_TRIGGER_ACTIONS.NONE" name="reference" />
+	<vue-popper
+		v-else
+		ref="popper"
+		:key="key"
+		:boundaries-selector="boundariesSelector"
+		:force-show="forceShow"
+		:options="{ placement, modifiers }"
+		:trigger="triggerAction"
+		:delay-on-mouse-over="300"
+		:delay-on-mouse-out="300"
+		:append-to-body="appendToBody"
+		:visible-arrow="isPointerVisible"
+		:root-class="rootClass"
+	>
+		<div
+			class="popper ds-popOver"
+			:class="{
+				'-ds-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
+				'-ds-small': size === POP_OVER_SIZES.SMALL,
+				'-ds-medium': size === POP_OVER_SIZES.MEDIUM,
+			}"
 		>
-			<div
-				class="popper ds-popOver"
-				:class="{
-					'-ds-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
-					'-ds-small': size === POP_OVER_SIZES.SMALL,
-					'-ds-medium': size === POP_OVER_SIZES.MEDIUM,
-				}"
-			>
-				<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
-				<div class="ds-popOver__content">
-					<div v-if="titleText" class="ds-popOver__title"> {{ titleText }} </div>
-					<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }} </div>
-					<div class="ds-popOver__contentSlot" :class="{ '-ds-maxHeight': maxHeight }">
-						<slot :close="close" />
-					</div>
+			<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
+			<div class="ds-popOver__content">
+				<div v-if="titleText" class="ds-popOver__title"> {{ titleText }} </div>
+				<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }} </div>
+				<div class="ds-popOver__contentSlot" :class="{ '-ds-maxHeight': maxHeight }">
+					<slot :close="close" />
 				</div>
-				<ds-button
-					v-if="buttonText"
-					class="ds-popOver__button"
-					:type="BUTTON_TYPES.TEXT"
-					:size="BUTTON_SIZES.LARGE"
-					@click="$emit('button-click')"
-				>
-					{{ buttonText }}
-				</ds-button>
 			</div>
+			<ds-button
+				v-if="buttonText"
+				class="ds-popOver__button"
+				:type="BUTTON_TYPES.TEXT"
+				:size="BUTTON_SIZES.LARGE"
+				@click="$emit('button-click')"
+			>
+				{{ buttonText }}
+			</ds-button>
+		</div>
 
-			<template #reference>
-				<slot name="reference" />
-			</template>
-		</vue-popper>
-	</span>
+		<template #reference>
+			<slot name="reference" />
+		</template>
+	</vue-popper>
 </template>
 
 <style lang="scss" scoped>

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts

@@ -59,7 +59,7 @@ const StoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs })
       :has-actions-slot-divider="hasActionsSlotDivider"
       :is-selectable="isSelectable"
       :is-selected="isSelected"
-      @update:isSelected="updateIsSelected"
+      @update:is-selected="updateIsSelected"
     >
       <template v-if="meta" #meta>
         <div v-html="meta" />
@@ -161,7 +161,7 @@ Interactive.args = args;
 
 Interactive.parameters = {
 	actions: {
-		handles: ['icon-click', 'click', 'update:isSelected'],
+		handles: ['icon-click', 'click', 'update:is-selected'],
 	},
 	layout: 'fullscreen',
 	design: {

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue

@@ -21,7 +21,7 @@
 		:class="{
 			'-ds-small': size === RICH_LIST_ITEM_SIZE.SMALL,
 		}"
-		@update:is-selected="$emit('update:isSelected', $event)"
+		@update:is-selected="$emit('update:is-selected', $event)"
 	>
 		<template #content>
 			<div class="ds-basicRichListItem__content">
@@ -239,7 +239,7 @@ export default {
 		},
 	},
 	emits: {
-		'update:isSelected': (value: boolean) => true,
+		'update:is-selected': (value: boolean) => true,
 	},
 	data() {
 		return {

package/lib/js/components/RichList/RichListItem/RichListItem.stories.ts

@@ -57,7 +57,7 @@ const StoryTemplate: StoryFn<typeof RichListItem> = (args, { updateArgs }) => ({
       :has-actions-slot-divider="hasActionsSlotDivider"
       :is-selectable="isSelectable"
       :is-selected="isSelected"
-      @update:isSelected="updateIsSelected"
+      @update:is-selected="updateIsSelected"
     >
       <template v-if="content" #content>
         <div v-html="content" />
@@ -156,7 +156,7 @@ Interactive.args = args;
 
 Interactive.parameters = {
 	actions: {
-		handles: ['icon-click', 'click', 'update:isSelected'],
+		handles: ['icon-click', 'click', 'update:is-selected'],
 	},
 	layout: 'fullscreen',
 	design: {

package/lib/js/components/RichList/RichListItem/RichListItem.vue

@@ -47,7 +47,7 @@
 					<ds-divider is-vertical class="-ds-hideOnMobile" />
 					<ds-checkbox
 						:is-selected="isSelected"
-						@update:is-selected="$emit('update:isSelected', $event)"
+						@update:is-selected="$emit('update:is-selected', $event)"
 						@click.stop
 					/>
 				</div>
@@ -532,7 +532,7 @@ export default {
 	emits: {
 		'icon-click': () => true,
 		click: () => true,
-		'update:isSelected': (isSelected: boolean) => true,
+		'update:is-selected': (isSelected: boolean) => true,
 	},
 	data() {
 		return {

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

@@ -44,7 +44,7 @@ const StoryTemplate: StoryFn<typeof SelectionTile> = (args, { updateArgs }) => (
 			:is-selected="isSelected"
 			:state="state"
 			@icon-click="onIconClick"
-			@update:isSelected="onIsSelectedUpdated"
+			@update:is-selected="onIsSelectedUpdated"
 		/>`,
 });
 

package/lib/js/components/SelectionTile/SelectionTile.vue

@@ -18,7 +18,7 @@
 				:size="SELECTION_CONTROL_SIZE.X_SMALL"
 				:is-selected="isSelected"
 				:state="SELECTION_CONTROL_STATE_MAP[state]"
-				@update:isSelected="updateIsSelected($event)"
+				@update:is-selected="updateIsSelected($event)"
 				@input:focus="onInputFocus"
 				@input:blur="onInputBlur"
 			/>
@@ -219,7 +219,7 @@ export default defineComponent({
 	},
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator
-	emits: ['update:isSelected', 'icon-click'],
+	emits: ['update:is-selected', 'icon-click'],
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -242,7 +242,7 @@ export default defineComponent({
 				return;
 			}
 
-			this.$emit('update:isSelected', value);
+			this.$emit('update:is-selected', value);
 		},
 		onIconClick(event: Event) {
 			if (!this.isLoading) {

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

@@ -0,0 +1,27 @@
+import { Value } from '../../utils/type.utils';
+
+export const TOAST_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+} as const;
+
+export type ToastSizes = Value<typeof TOAST_SIZES>;
+
+export const TOAST_COLORS = {
+	NEUTRAL_HEAVY: 'neutralHeavy',
+	NEUTRAL_STRONG: 'neutralStrong',
+	SUCCESS: 'success',
+	WARNING: 'warning',
+	DANGER: 'danger',
+	INFO: 'info',
+};
+
+export type ToastColors = Value<typeof TOAST_COLORS>;
+
+export const TOAST_POSITIONS = {
+	LEFT: 'left',
+	CENTER: 'center',
+	RIGHT: 'right',
+};
+
+export type ToastPositions = Value<typeof TOAST_POSITIONS>;

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

@@ -0,0 +1,109 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import DsToast from './Toast.vue';
+import { TOAST_COLORS, TOAST_POSITIONS, TOAST_SIZES } from './Toast.consts';
+import { ICONS } from '../Icons/Icon';
+
+export default {
+	title: 'Components/Toast',
+	component: DsToast,
+} as Meta<typeof DsToast>;
+
+const StoryTemplate: StoryFn<typeof DsToast> = (args) => ({
+	components: { DsToast },
+	setup() {
+		return { ...args };
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+			isVisible: true,
+			boundariesSelectorId:
+				this.boundariesSelector != null ? `#${this.boundariesSelector}` : null,
+		};
+	},
+	template: `<div style="display: flex; justify-content: space-around; height: 1200px; width: 100%;">
+		<ds-toast
+			v-if="isVisible"
+			:size="size"
+			:position="position"
+			:boundaries-selector="boundariesSelectorId"
+			:color="color"
+			:footer-primary-button-text="footerPrimaryButtonText"
+			:footer-primary-button-icon="ICONS[footerPrimaryButtonIcon]"
+			:footer-secondary-button-text="footerSecondaryButtonText"
+			:footer-secondary-button-icon="ICONS[footerSecondaryButtonIcon]"
+			:is-disappearing="isDisappearing"
+			:disappearing-timeout="disappearingTimeout"
+			@close="isVisible = false"
+		>
+			<template #content>
+				<span v-html="content" />
+			</template>
+		</ds-toast>
+		<div id="left" style="width: 25%; height: 100%;  border: 1px black solid;"></div>
+		<div id="right" style="width: 25%; height: 100%;  border: 1px black solid;"></div>
+	</div>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	size: TOAST_SIZES.MEDIUM,
+	position: TOAST_POSITIONS.CENTER,
+	boundariesSelector: null,
+	color: TOAST_COLORS.INFO,
+	footerPrimaryButtonText: 'primary',
+	footerPrimaryButtonIcon: null,
+	footerSecondaryButtonText: 'secondary',
+	footerSecondaryButtonIcon: null,
+	isDisappearing: false,
+	disappearingTimeout: '0',
+	content: 'Wpłynąłem na suchego przestwór oceanu',
+} as Args;
+
+const argTypes = {
+	size: {
+		control: { type: 'select' },
+		options: Object.values(TOAST_SIZES),
+		defaultValue: TOAST_SIZES.MEDIUM,
+	},
+	position: {
+		control: { type: 'select' },
+		options: Object.values(TOAST_POSITIONS),
+		defaultValue: TOAST_POSITIONS.CENTER,
+	},
+	boundariesSelector: {
+		control: { type: 'select' },
+		options: [null, 'left', 'right'],
+		defaultValue: null,
+	},
+	color: {
+		control: { type: 'select' },
+		options: Object.values(TOAST_COLORS),
+		defaultValue: TOAST_COLORS.INFO,
+	},
+	footerPrimaryButtonIcon: {
+		control: { type: 'select' },
+		options: [null, ...Object.keys(ICONS)],
+	},
+	footerSecondaryButtonIcon: {
+		control: { type: 'select' },
+		options: [null, ...Object.keys(ICONS)],
+	},
+	content: {
+		control: { type: 'text' },
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	actions: {
+		handles: ['close', 'primary-button-click', 'secondary-button-click'],
+	},
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=8091-108960',
+	},
+};