@bethinkpl/design-system 15.1.1 → 15.1.2

package/docs/project.json

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

package/lib/js/components/Modals/Modal/Modal.vue

@@ -43,14 +43,13 @@
 					>
 						<div
 							v-if="footerTertiaryButtonText || footerCheckboxText"
-							class="ds-modal__footerColumn --ctaSecondary"
+							class="ds-modal__footerCtaSecondary"
 						>
 							<div v-if="footerCheckboxText" class="ds-modal__checkbox">
 								<input
 									id="ds-modal__checkboxInput"
 									type="checkbox"
 									:checked="false"
-									class="ds-modal__checkboxInput"
 									@change="$emit('checkbox-change', $event.target.checked)"
 								/>
 								<label
@@ -62,10 +61,10 @@
 							</div>
 							<wnl-button
 								v-if="footerTertiaryButtonText"
-								class="ds-modal__buttonSecondary"
 								:type="BUTTON_TYPES.TEXT"
 								:color="BUTTON_COLORS.NEUTRAL"
 								:icon-left="footerTertiaryButtonIcon"
+								class="ds-modal__tertiaryButton"
 								@click="$emit('tertiary-button-click')"
 							>
 								{{ footerTertiaryButtonText }}
@@ -73,11 +72,10 @@
 						</div>
 						<div
 							v-if="footerSecondaryButtonText || footerPrimaryButtonText"
-							class="ds-modal__footerColumn --cta"
+							class="ds-modal__footerCtaPrimary"
 						>
 							<wnl-button
 								v-if="footerSecondaryButtonText"
-								class="ds-modal__buttonSecondary"
 								:type="BUTTON_TYPES.OUTLINED"
 								:color="calcFooterSecondaryButtonColor"
 								:icon-right="footerSecondaryButtonIcon"
@@ -87,7 +85,6 @@
 							</wnl-button>
 							<wnl-button
 								v-if="footerPrimaryButtonText"
-								class="ds-modal__buttonPrimary"
 								:color="calcFooterPrimaryButtonColor"
 								:icon-right="footerPrimaryButtonIcon"
 								@click="$emit('primary-button-click')"
@@ -188,17 +185,19 @@ $image-height-small: 140px;
 	&__header {
 		display: flex;
 		flex-direction: column;
+		margin-bottom: $space-s;
+		row-gap: $space-xs;
 	}
 
 	&__headerFeatureIcon {
 		align-self: center;
-		margin-bottom: $space-m;
+		margin-bottom: $space-xs;
 	}
 
 	&__headerTitle {
 		@include heading-xl-default-bold;
 
-		margin-bottom: $space-xs;
+		margin-bottom: 0;
 		margin-top: 0;
 
 		@media #{breakpoint-s()} {
@@ -213,25 +212,19 @@ $image-height-small: 140px;
 	&__headerSubtitle {
 		@include heading-m-default-regular;
 
-		margin-bottom: $space-s;
+		margin-bottom: 0;
 		margin-top: 0;
 	}
 
 	&__slotContent {
 		@include text-m-default-regular;
-
-		margin-bottom: $space-xs;
 	}
 
 	&__checkbox {
-		align-items: center;
+		align-items: flex-start;
 		cursor: pointer;
 		display: flex;
-		margin-top: $space-s;
-
-		@media #{breakpoint-s()} {
-			margin-top: 0;
-		}
+		flex-flow: row;
 	}
 
 	&__checkboxLabel {
@@ -254,65 +247,65 @@ $image-height-small: 140px;
 	}
 
 	&__footer {
+		column-gap: $space-s;
 		display: flex;
 		flex-direction: column-reverse;
 		justify-content: space-between;
+		line-break: anywhere;
 		padding-top: $space-m;
 
 		@media #{breakpoint-s()} {
+			align-items: center;
 			flex-direction: row;
 		}
 
 		&.-singleColumn {
-			#{$self}__footerColumn {
+			#{$self}__footerCtaPrimary {
 				justify-content: center;
 				width: 100%;
 			}
 		}
 	}
 
-	&__footerColumn {
-		display: flex;
-		flex-direction: column-reverse;
-		gap: 0 $space-s;
+	&__tertiaryButton {
+		flex-shrink: 0;
 
-		&.--cta {
-			@media #{breakpoint-s()} {
-				flex-direction: row;
-			}
-
-			&:not(:first-child) {
-				// first-child because of reverse order in flex-direction
-				margin-bottom: $space-xs;
-
-				@media #{breakpoint-s()} {
-					margin-bottom: 0;
-				}
-			}
+		&:only-child {
+			margin: 0 auto;
 		}
+	}
 
-		&.--ctaSecondary {
-			align-items: center;
-			gap: 0 $space-m;
-			justify-content: center;
+	&__footerCtaPrimary {
+		display: flex;
+		flex-direction: column-reverse;
+		flex-shrink: 0;
+		gap: $space-s 0;
 
-			@media #{breakpoint-s()} {
-				flex-direction: row;
-				justify-content: left;
-			}
+		@media #{breakpoint-s()} {
+			flex-direction: row;
+			gap: 0 $space-s;
 		}
-	}
 
-	&__buttonPrimary {
 		&:not(:first-child) {
 			// first-child because of reverse order in flex-direction
-			margin-bottom: $space-s;
+			margin-bottom: $space-xs;
 
 			@media #{breakpoint-s()} {
 				margin-bottom: 0;
 			}
 		}
 	}
+
+	&__footerCtaSecondary {
+		align-items: center;
+		display: flex;
+		gap: 0 $space-m;
+		justify-content: space-between;
+
+		@media #{breakpoint-s()} {
+			justify-content: left;
+		}
+	}
 }
 </style>
 

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

@@ -17,10 +17,10 @@ const StoryTemplate: StoryFn<typeof PopOver> = (argTypes) => ({
 	components: { PopOver },
 	props: Object.keys(argTypes),
 	template:
-		'<div style="display: flex; align-items: center; justify-content: center; height: 600px">' +
-		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl">' +
+		'<div style="display: flex; align-items: center; justify-content: center; height: 800px">' +
+		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :button-text="buttonText" :force-show="forceShow" :header-image-url="headerImageUrl" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible">' +
 		'<template #reference><span>click me!</span></template>' +
-		'<div>Bacon ipsum dolor amet t-bone meatball ground round turducken buffalo pork.</div>' +
+		'<div>{{ definitionSlot }}</div>' +
 		'</pop-over>' +
 		'</div>',
 });
@@ -28,17 +28,26 @@ const StoryTemplate: StoryFn<typeof PopOver> = (argTypes) => ({
 export const Interactive = StoryTemplate.bind({});
 
 Interactive.args = {
+	size: POP_OVER_SIZES.SMALL,
+	maxHeight: false,
 	placement: POP_OVER_PLACEMENTS.BOTTOM,
 	color: POP_OVER_COLORS.DEFAULT,
-	triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
+	headerImageUrl:
+		'https://wnl-platform-dev-kuba.s3.eu-central-1.amazonaws.com/public/illustation-StatusLekcji.png',
 	titleText: 'Lorem ipsum',
 	subtitleText: 'Dolor sit amet',
 	buttonText: 'button text',
+	triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
 	forceShow: false,
-	headerImageUrl: 'https://lek.wiecejnizlek.pl/images/lesson-status-onboarding-inprogress.png',
+	isPointerVisible: true,
+	definitionSlot: 'Bacon ipsum dolor amet t-bone meatball ground round turducken buffalo pork.',
 } as Args;
 
 const argTypes = {
+	size: {
+		control: { type: 'select', options: Object.values(POP_OVER_SIZES) },
+		defaultValue: POP_OVER_SIZES.SMALL,
+	},
 	placement: {
 		control: { type: 'select', options: Object.values(POP_OVER_PLACEMENTS) },
 		defaultValue: POP_OVER_PLACEMENTS.BOTTOM,
@@ -51,12 +60,10 @@ const argTypes = {
 		control: { type: 'select', options: Object.values(POP_OVER_TRIGGER_ACTIONS) },
 		defaultValue: POP_OVER_TRIGGER_ACTIONS.CLICK,
 	},
-	size: {
-		control: { type: 'select', options: Object.values(POP_OVER_SIZES) },
-		defaultValue: POP_OVER_SIZES.SMALL,
-	},
 } as ArgTypes;
 
+Interactive.argTypes = argTypes;
+
 Interactive.parameters = {
 	design: {
 		type: 'figma',
@@ -64,34 +71,30 @@ Interactive.parameters = {
 	},
 };
 
-Interactive.argTypes = argTypes;
-
 const PopoverWithHTMLStoryTemplate: StoryFn<typeof PopOver> = (argTypes) => ({
 	components: { PopOver },
 	props: Object.keys(argTypes),
 	template:
-		'<div style="display: flex; align-items: center; justify-content: center; height: 600px">' +
-		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :force-show="forceShow" :size="size" :max-height="maxHeight" :visible-arrow="visibleArrow">' +
+		'<div style="display: flex; align-items: center; justify-content: center; height: 800px">' +
+		'<pop-over :placement="placement" :color="color" :trigger-action="triggerAction" :title-text="titleText" :subtitle-text="subtitleText" :force-show="forceShow" :size="size" :max-height="maxHeight" :is-pointer-visible="isPointerVisible">' +
 		'<template #reference><span>click me!</span></template>' +
 		'<template #default><b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork. <b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.</template>' +
 		'</pop-over>' +
 		'</div>',
 });
 
-export const PopOverSizeMMaxHeightDisabledArrow = PopoverWithHTMLStoryTemplate.bind({});
+export const PopOverMMaxHeightNoPointer = PopoverWithHTMLStoryTemplate.bind({});
 
-PopOverSizeMMaxHeightDisabledArrow.args = {
+PopOverMMaxHeightNoPointer.args = {
+	size: POP_OVER_SIZES.MEDIUM,
+	maxHeight: true,
 	placement: POP_OVER_PLACEMENTS.BOTTOM,
 	color: POP_OVER_COLORS.DEFAULT,
-	triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
 	titleText: 'Lorem ipsum',
 	subtitleText: 'Dolor sit amet',
-	size: POP_OVER_SIZES.MEDIUM,
+	triggerAction: POP_OVER_TRIGGER_ACTIONS.CLICK,
 	forceShow: false,
-	maxHeight: true,
-	visibleArrow: false,
-	slotText:
-		'<b>Bacon</b> ipsum dolor <u>amet</u> t-bone meatball ground round turducken buffalo pork.',
+	isPointerVisible: false,
 } as Args;
 
-PopOverSizeMMaxHeightDisabledArrow.argTypes = argTypes;
+PopOverMMaxHeightNoPointer.argTypes = argTypes;

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

@@ -9,7 +9,7 @@
 		:delay-on-mouse-over="300"
 		:delay-on-mouse-out="300"
 		:append-to-body="appendToBody"
-		:visible-arrow="visibleArrow"
+		:visible-arrow="isPointerVisible"
 		:root-class="rootClass"
 	>
 		<div
@@ -70,12 +70,16 @@
 		background-color: $color-neutral-background;
 	}
 
+	.popOver__contentSlot {
+		word-break: break-word;
+	}
+
 	.popOver__contentSlot.-maxHeight {
-		overflow: scroll;
+		overflow: hidden scroll;
 	}
 
 	&.-small {
-		max-width: 320px;
+		width: 320px;
 
 		.popOver__contentSlot.-maxHeight {
 			max-height: 160px;
@@ -83,7 +87,7 @@
 	}
 
 	&.-medium {
-		max-width: 460px;
+		width: min(90vw, 460px);
 
 		.popOver__contentSlot.-maxHeight {
 			max-height: 250px;
@@ -260,7 +264,7 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		visibleArrow: {
+		isPointerVisible: {
 			type: Boolean,
 			default: true,
 		},

package/package.json

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