npm - @bethinkpl/design-system - Versions diffs - 26.14.10 → 26.15.0 - Mend

@bethinkpl/design-system 26.14.10 → 26.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/docs/assets/{preview-CxZpfmpr.js → preview-pqm_1-Xy.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-CsJlhGZ8.js","./iframe-DeX83N-_.js","./_commonjsHelpers-CDR5Xrri.js","./index-C7dYv50j.js"])))=>i.map(i=>d[i]);
-import{_ as s}from"./iframe-DeX83N-_.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-CsJlhGZ8.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-ciQO70gR.js","./iframe-bbt6wJ1S.js","./_commonjsHelpers-CDR5Xrri.js","./index-C7dYv50j.js"])))=>i.map(i=>d[i]);
+import{_ as s}from"./iframe-bbt6wJ1S.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-ciQO70gR.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};

package/docs/iframe.html CHANGED Viewed

@@ -510,7 +510,7 @@
 </script>
 <link rel="stylesheet" href="./preview.css">
-    <script type="module" crossorigin src="./assets/iframe-DeX83N-_.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-bbt6wJ1S.js"></script>
   </head>
   <body>

package/docs/project.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"generatedAt":~~1749556610344~~,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@vitest/coverage-c8":"0.33.0","@vitest/ui":"3.1.4","vitest":"3.1.4"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":3,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
1	+ {"generatedAt":1749706739935,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@vitest/coverage-c8":"0.33.0","@vitest/ui":"3.1.4","vitest":"3.1.4"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":3,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}

package/lib/js/components/Modals/Modal/Modal.spec.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import Modal from './Modal.vue';
+describe('Modal', () => {
+	it('renders with right actions slot', () => {
+		const wrapper = mount(Modal, {
+			slots: {
+				rightActions: () => h('button', { id: 'test-right-action' }, 'Test button'),
+			},
+			global: {
+				stubs: {
+					teleport: true,
+				},
+			},
+		});
+		expect(wrapper.find('#test-right-action').exists()).toBe(true);
+	});
+});

package/lib/js/components/Modals/Modal/Modal.stories.ts CHANGED Viewed

@@ -24,6 +24,7 @@ const StoryTemplate: StoryFn<typeof Modal> = (args) => ({
 		':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' +
 		':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' +
 		'<div v-html="defaultSlot" />' +
+		'<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' +
 		'</modal>',
 	data() {
 		return {
@@ -37,6 +38,7 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	defaultSlot:
 		'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',
+	rightActionsSlot: 'Right actions',
 	size: MODAL_SIZES.MEDIUM,
 	danger: false,
 	contentCentered: false,
@@ -128,6 +130,7 @@ Interactive.parameters = {
 const argsDanger = {
 	defaultSlot:
 		'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',
+	rightActionsSlot: 'Right actions',
 	size: MODAL_SIZES.MEDIUM,
 	danger: true,
 	contentCentered: false,
@@ -156,6 +159,7 @@ Danger.args = argsDanger;
 const argsWithImage = {
 	defaultSlot:
 		'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',
+	rightActionsSlot: 'Right actions',
 	size: MODAL_SIZES.MEDIUM,
 	danger: false,
 	contentCentered: false,
@@ -185,6 +189,7 @@ WithImage.args = argsWithImage;
 const argsSmallHeaderAndCentered = {
 	defaultSlot:
 		'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',
+	rightActionsSlot: 'Right actions',
 	size: MODAL_SIZES.SMALL,
 	danger: false,
 	contentCentered: true,

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

@@ -2,15 +2,17 @@
 	<teleport to="body">
 		<div class="ds-modal" v-bind="$attrs" @click.self="$emit('close-modal')">
 			<div class="ds-modal__wrapper" :class="{ '-ds-small': size === MODAL_SIZES.SMALL }">
-				<wnl-icon-button
-					touchable
-					:icon="ICONS.FA_XMARK"
-					class="ds-modal__close"
-					:size="ICON_SIZES.SMALL"
-					:elevation="BUTTON_ELEVATIONS.X_SMALL"
-					:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
-					@click.stop="$emit('close-modal')"
-				/>
+				<div class="ds-modal__rightActions">
+					<slot name="rightActions" />
+					<wnl-icon-button
+						touchable
+						:icon="ICONS.FA_XMARK"
+						:size="ICON_SIZES.SMALL"
+						:elevation="BUTTON_ELEVATIONS.X_SMALL"
+						:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
+						@click.stop="$emit('close-modal')"
+					/>
+				</div>
 				<div class="ds-modal__scrollableWrapper">
 					<img v-if="headerImage" class="ds-modal__image" :src="headerImage" alt="" />
 					<div class="ds-modal__content" :class="{ '-ds-centered': contentCentered }">
@@ -119,7 +121,7 @@
 @import '../../../../styles/settings/media-queries';
 @import '../../../../styles/settings/z-indexes';
-$modal-medium-width: 700px;
+$modal-medium-width: 800px;
 $modal-small-width: 460px;
 $image-height: 200px;
 $image-height-small: 140px;
@@ -147,12 +149,19 @@ $image-height-small: 140px;
 		background: $color-default-background;
 		border-radius: $radius-m;
 		box-shadow: $shadow-xl;
+		display: flex;
 		margin: 0 auto;
+		max-height: calc(100vh - #{2 * $space-l});
 		max-width: $modal-medium-width;
 		overflow: hidden;
+		padding-top: $space-xl;
 		position: relative;
 		width: 100%;
+		@media #{breakpoint-s()} {
+			max-height: 84vh;
+		}
 		&.-ds-small {
 			max-width: $modal-small-width;
@@ -170,19 +179,15 @@ $image-height-small: 140px;
 	}
 	&__scrollableWrapper {
-		max-height: calc(100vh - #{2 * $space-l});
+		flex: 1;
 		overflow-y: auto;
-		@media #{breakpoint-s()} {
-			max-height: 84vh;
-		}
 	}
 	&__content {
-		padding: $space-l $space-s;
+		padding: 0 $space-s $space-l;
 		@media #{breakpoint-s()} {
-			padding: $space-l $space-xl;
+			padding: 0 $space-xl $space-l;
 		}
 		&.-ds-centered {
@@ -246,10 +251,12 @@ $image-height-small: 140px;
 		margin-left: $space-2xs;
 	}
-	&__close {
+	&__rightActions {
 		position: absolute;
-		right: $space-3xs;
-		top: $space-3xs;
+		right: $space-4xs;
+		top: $space-4xs;
+		// z-index needs to be higher than 0 to cover the content elements with `position: relative`
+		z-index: 1;
 	}
 	&__image {

package/lib/js/components/Modals/ModalDialog/ModalDialog.spec.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { h } from 'vue';
+import ModalDialog from './ModalDialog.vue';
+describe('ModalDialog', () => {
+	it('renders with right actions slot', () => {
+		const wrapper = mount(ModalDialog, {
+			props: {
+				headerTitle: 'Test Modal',
+			},
+			slots: {
+				rightActions: () => h('button', { id: 'test-right-action' }, 'Test button'),
+			},
+			global: {
+				stubs: {
+					teleport: true,
+				},
+			},
+		});
+		expect(wrapper.find('#test-right-action').exists()).toBe(true);
+	});
+});

package/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts CHANGED Viewed

@@ -22,6 +22,7 @@ const StoryTemplate: StoryFn<typeof ModalDialog> = (args) => ({
 		':headerImage="headerImage" ' +
 		':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' +
 		'<div v-html="defaultSlot" />' +
+		'<template v-if="rightActionsSlot" #rightActions><div style="display: inline-flex;" v-html="rightActionsSlot" /></template>' +
 		'</modal-dialog>',
 	data() {
 		return {
@@ -36,6 +37,7 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	defaultSlot:
 		'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',
+	rightActionsSlot: 'Right actions',
 	danger: false,
 	headerImage: '',
 	headerTitle: 'Modal Title Accusantium occaecati atque similique gg provident nobis.',
@@ -102,6 +104,7 @@ Interactive.parameters = {
 const argsDanger = {
 	defaultSlot:
 		'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',
+	rightActionsSlot: 'Right actions',
 	danger: true,
 	headerImage: '',
 	headerTitle: 'Modal Title Accusantium occaecati atque similique gg provident nobis.',
@@ -123,6 +126,7 @@ Danger.args = argsDanger;
 const argsWithImage = {
 	defaultSlot: '',
+	rightActionsSlot: '',
 	danger: false,
 	headerImage:
 		'https://wiecejnizlek.pl/wp-content/themes/uncode-child/assets/patterns/pattern-black.png',

package/lib/js/components/Modals/ModalDialog/ModalDialog.vue CHANGED Viewed

@@ -21,6 +21,9 @@
 		@secondary-button-click="$emit('secondary-button-click')"
 	>
 		<slot />
+		<template #rightActions>
+			<slot name="rightActions" />
+		</template>
 	</ds-modal>
 </template>

package/package.json CHANGED Viewed

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

package/docs/assets/Modal.stories-CuBB-dA5.js DELETED Viewed

@@ -1,53 +0,0 @@
-import{D as g,M as u,a as i}from"./Modal-BcXHhF5p.js";import{I as n}from"./Icon-DLflpryl.js";import{a as c}from"./FeatureIcon-JKiMnOvS.js";import{a as t}from"./Button-DTM9D6tQ.js";import"./IconButton-jIBOZaL6.js";import"./vue.esm-bundler-DD4BrEtS.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const D={title:"Components/Modals/Modal",component:g},s=b=>({components:{Modal:g},setup(){return b},template:'<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" :headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" :footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" :footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" :footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" :footerCheckboxText="footerCheckboxText" :headerImage="headerImage"><div v-html="defaultSlot" /></modal>',data(){return{ICONS:Object.freeze(n)}}}),e=s.bind({}),O={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:i.MEDIUM,danger:!1,contentCentered:!1,headerImage:"",headerTitleSize:u.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_QUESTION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"Tertiary M",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},l={size:{control:"select",options:Object.values(i)},danger:{control:"boolean"},headerTitleSize:{control:"select",options:Object.values(u)},headerTitle:{control:"text"},headerImage:{control:"text"},headerSubtitle:{control:"text"},headerFeatureIcon:{control:"select",options:[null,...Object.keys(n)]},headerFeatureIconColor:{control:"select",options:Object.values(c)},contentCentered:{control:"boolean"},footerPrimaryButtonText:{control:"text"},footerPrimaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerPrimaryButtonState:{control:"select",options:Object.values(t)},footerSecondaryButtonText:{control:"text"},footerSecondaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerSecondaryButtonState:{control:"select",options:Object.values(t)},footerTertiaryButtonText:{control:"text"},footerTertiaryButtonIcon:{control:"select",options:[null,...Object.keys(n)]},footerTertiaryButtonState:{control:"select",options:Object.values(t)},footerCheckboxText:{control:"text"},onCloseModal:{action:"close-modal"},onCheckboxChange:{action:"checkbox-change"},onPrimaryButtonClick:{action:"primary-button-click"},onSecondaryButtonClick:{action:"secondary-button-click"},onTertiaryButtonClick:{action:"tertiary-button-click"}};e.argTypes=l;e.args=O;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5658%3A96416&t=lgUXCZhvWDuBr3qw-0"}};const E={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:i.MEDIUM,danger:!0,contentCentered:!1,headerImage:"",headerTitleSize:u.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},o=s.bind({});o.argTypes=l;o.args=E;const q={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:i.MEDIUM,danger:!1,contentCentered:!1,headerImage:"https://wiecejnizlek.pl/wp-content/uploads/2022/10/WNL-Strona-cover-dla-filmu-2-1.jpg",headerTitleSize:u.MEDIUM,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:null,headerFeatureIconColor:null,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},r=s.bind({});r.argTypes=l;r.args=q;const P={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',size:i.SMALL,danger:!1,contentCentered:!0,headerImage:"",headerTitleSize:u.SMALL,headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:c.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:t.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:t.DEFAULT,footerTertiaryButtonText:"",footerTertiaryButtonIcon:null,footerTertiaryButtonState:t.DEFAULT,footerCheckboxText:""},a=s.bind({});a.argTypes=l;a.args=P;var d,m,S;e.parameters={...e.parameters,docs:{...(d=e.parameters)==null?void 0:d.docs,source:{originalSource:`args => ({
-  components: {
-    Modal
-  },
-  setup() {
-    return args;
-  },
-  template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
-  data() {
-    return {
-      ICONS: Object.freeze(ICONS)
-    };
-  }
-})`,...(S=(m=e.parameters)==null?void 0:m.docs)==null?void 0:S.source}}};var f,T,y;o.parameters={...o.parameters,docs:{...(f=o.parameters)==null?void 0:f.docs,source:{originalSource:`args => ({
-  components: {
-    Modal
-  },
-  setup() {
-    return args;
-  },
-  template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
-  data() {
-    return {
-      ICONS: Object.freeze(ICONS)
-    };
-  }
-})`,...(y=(T=o.parameters)==null?void 0:T.docs)==null?void 0:y.source}}};var I,B,p;r.parameters={...r.parameters,docs:{...(I=r.parameters)==null?void 0:I.docs,source:{originalSource:`args => ({
-  components: {
-    Modal
-  },
-  setup() {
-    return args;
-  },
-  template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
-  data() {
-    return {
-      ICONS: Object.freeze(ICONS)
-    };
-  }
-})`,...(p=(B=r.parameters)==null?void 0:B.docs)==null?void 0:p.source}}};var h,C,x;a.parameters={...a.parameters,docs:{...(h=a.parameters)==null?void 0:h.docs,source:{originalSource:`args => ({
-  components: {
-    Modal
-  },
-  setup() {
-    return args;
-  },
-  template: '<modal :headerFeatureIcon="ICONS[headerFeatureIcon]" :size="size" :danger="danger" ' + ':headerTitleSize="headerTitleSize" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :contentCentered="contentCentered" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="ICONS[footerPrimaryButtonIcon]" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="ICONS[footerSecondaryButtonIcon]" :footerSecondaryButtonState="footerSecondaryButtonState" ' + ':footerTertiaryButtonText="footerTertiaryButtonText" :footerTertiaryButtonIcon="ICONS[footerTertiaryButtonIcon]" :footerTertiaryButtonState="footerTertiaryButtonState" ' + ':footerCheckboxText="footerCheckboxText" :headerImage="headerImage">' + '<div v-html="defaultSlot" />' + '</modal>',
-  data() {
-    return {
-      ICONS: Object.freeze(ICONS)
-    };
-  }
-})`,...(x=(C=a.parameters)==null?void 0:C.docs)==null?void 0:x.source}}};const U=["Interactive","Danger","WithImage","SizeSAndCentered"];export{o as Danger,e as Interactive,a as SizeSAndCentered,r as WithImage,U as __namedExportsOrder,D as default};

package/docs/assets/ModalDialog-BTKtgJej.js DELETED Viewed

@@ -1 +0,0 @@

- import{D as i,M as s,a as f}from"./Modal-BcXHhF5p.js";import{I as o}from"./Icon-DLflpryl.js";import{a as l}from"./FeatureIcon-JKiMnOvS.js";import{d as m,t as r,b as c,e as y,r as p,o as S,f as b}from"./vue.esm-bundler-DD4BrEtS.js";import{a}from"./Button-DTM9D6tQ.js";import{_ as g}from"./_plugin-vue_export-helper-DlAUqK2U.js";const u=m({name:"ModalDialog",components:{DsModal:i},props:{danger:{type:Boolean,default:!1},headerTitle:{type:String,required:!0},headerSubtitle:{type:String,default:null},headerFeatureIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},headerFeatureIconColor:{type:String,default:l.NEUTRAL,validator(e){return Object.values(l).includes(e)}},headerImage:{type:String,default:null},footerPrimaryButtonText:{type:String,default:null},footerPrimaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},footerPrimaryButtonState:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},footerSecondaryButtonText:{type:String,default:null},footerSecondaryButtonIcon:{type:Object,default:null,validator(e){return Object.values(o).includes(r(e))}},footerSecondaryButtonState:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}}},emits:["close-modal","primary-button-click","secondary-button-click"],data(){return{MODAL_SIZES:Object.freeze(f),MODAL_HEADER_TITLE_SIZES:Object.freeze(s)}}});function T(e,t,v,I,E,O){const d=p("ds-modal");return S(),c(d,{class:"ds-modalDialog",size:e.MODAL_SIZES.SMALL,danger:e.danger,"content-centered":!0,"header-image":e.headerImage,"header-title-size":e.MODAL_HEADER_TITLE_SIZES.SMALL,"header-feature-icon":e.headerFeatureIcon,"header-feature-icon-color":e.headerFeatureIconColor,"header-title":e.headerTitle,"header-subtitle":e.headerSubtitle,"footer-primary-button-text":e.footerPrimaryButtonText,"footer-primary-button-icon":e.footerPrimaryButtonIcon,"footer-primary-button-state":e.footerPrimaryButtonState,"footer-secondary-button-text":e.footerSecondaryButtonText,"footer-secondary-button-icon":e.footerSecondaryButtonIcon,"footer-secondary-button-state":e.footerSecondaryButtonState,onCloseModal:t[0]||(t[0]=n=>e.$emit("close-modal")),onPrimaryButtonClick:t[1]||(t[1]=n=>e.$emit("primary-button-click")),onSecondaryButtonClick:t[2]||(t[2]=n=>e.$emit("secondary-button-click"))},{default:y(()=>[b(e.$slots,"default")]),_:3},8,["size","danger","header-image","header-title-size","header-feature-icon","header-feature-icon-color","header-title","header-subtitle","footer-primary-button-text","footer-primary-button-icon","footer-primary-button-state","footer-secondary-button-text","footer-secondary-button-icon","footer-secondary-button-state"])}const j=g(u,[["render",T]]);u.__docgenInfo={displayName:"ModalDialog",exportName:"default",description:"",tags:{},props:[{name:"danger",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"headerTitle",type:{name:"string"},required:!0},{name:"headerSubtitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"headerFeatureIconColor",type:{name:"string"},defaultValue:{func:!1,value:"FEATURE_ICON_COLOR.NEUTRAL"}},{name:"headerImage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerPrimaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"footerSecondaryButtonText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"footerSecondaryButtonState",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}}],events:[{name:"close-modal"},{name:"primary-button-click"},{name:"secondary-button-click"}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Modals/ModalDialog/ModalDialog.vue"]};export{j as M};

package/docs/assets/ModalDialog.stories-HhLl8KlV.js DELETED Viewed

@@ -1,43 +0,0 @@
-import{M as p}from"./ModalDialog-BTKtgJej.js";import{I as a}from"./Icon-DLflpryl.js";import{a as n}from"./FeatureIcon-JKiMnOvS.js";import{a as e}from"./Button-DTM9D6tQ.js";import"./Modal-BcXHhF5p.js";import"./IconButton-jIBOZaL6.js";import"./vue.esm-bundler-DD4BrEtS.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const N={title:"Components/Modals/ModalDialog",component:p},u=I=>({components:{ModalDialog:p},setup(){return I},template:'<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" :headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" :footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" :headerImage="headerImage" :footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState"><div v-html="defaultSlot" /></modal-dialog>',data(){return{ICONS:Object.freeze(a),BUTTON_STATES:Object.freeze(e)}}}),t=u.bind({}),g={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',danger:!1,headerImage:"",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_QUESTION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:e.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:e.DEFAULT},i={danger:{control:"boolean"},headerImage:{control:"text",table:{type:{summary:"string"},defaultValue:{summary:"Hello"}}},headerTitle:{control:"text"},headerSubtitle:{control:"text"},headerFeatureIcon:{control:"select",options:[null,...Object.keys(a)]},headerFeatureIconColor:{control:"select",options:Object.values(n)},footerPrimaryButtonText:{control:"text"},footerPrimaryButtonIcon:{control:"select",options:[null,...Object.keys(a)]},footerPrimaryButtonState:{control:"select",options:Object.values(e)},footerSecondaryButtonText:{control:"text"},footerSecondaryButtonIcon:{control:"select",options:[null,...Object.keys(a)]},footerSecondaryButtonState:{control:"select",options:Object.values(e)}};t.argTypes=i;t.args=g;t.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5658%3A96416&t=lgUXCZhvWDuBr3qw-0"}};const B={defaultSlot:'<p style="margin-top: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p><p style="margin-top: 0; margin-bottom: 0">Text. Occaecati qui debitis ut minima ab ut ipsa. Eos qui eum. Vel eaque sint. Aut voluptatem est. Eos est aut sit soluta est facere qui soluta aspernatur. Et sint repellat sunt.</p>',danger:!0,headerImage:"",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:e.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:e.DEFAULT},o=u.bind({});o.argTypes=i;o.args=B;const h={defaultSlot:"",danger:!1,headerImage:"https://wiecejnizlek.pl/wp-content/themes/uncode-child/assets/patterns/pattern-black.png",headerTitle:"Modal Title Accusantium occaecati atque similique gg provident nobis.",headerSubtitle:"Modal Subtitle Aut vitae neque consequatur. Consequuntur natus sint ad.",headerFeatureIcon:"FA_CIRCLE_EXCLAMATION",headerFeatureIconColor:n.NEUTRAL,footerPrimaryButtonText:"Primary M",footerPrimaryButtonIcon:null,footerPrimaryButtonState:e.DEFAULT,footerSecondaryButtonText:"Secondary M",footerSecondaryButtonIcon:null,footerSecondaryButtonState:e.DEFAULT},r=u.bind({});r.argTypes=i;r.args=h;var c,l,d;t.parameters={...t.parameters,docs:{...(c=t.parameters)==null?void 0:c.docs,source:{originalSource:`args => ({
-  components: {
-    ModalDialog
-  },
-  setup() {
-    return args;
-  },
-  template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '</modal-dialog>',
-  data() {
-    return {
-      ICONS: Object.freeze(ICONS),
-      BUTTON_STATES: Object.freeze(BUTTON_STATES)
-    };
-  }
-})`,...(d=(l=t.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var s,m,S;o.parameters={...o.parameters,docs:{...(s=o.parameters)==null?void 0:s.docs,source:{originalSource:`args => ({
-  components: {
-    ModalDialog
-  },
-  setup() {
-    return args;
-  },
-  template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '</modal-dialog>',
-  data() {
-    return {
-      ICONS: Object.freeze(ICONS),
-      BUTTON_STATES: Object.freeze(BUTTON_STATES)
-    };
-  }
-})`,...(S=(m=o.parameters)==null?void 0:m.docs)==null?void 0:S.source}}};var f,y,T;r.parameters={...r.parameters,docs:{...(f=r.parameters)==null?void 0:f.docs,source:{originalSource:`args => ({
-  components: {
-    ModalDialog
-  },
-  setup() {
-    return args;
-  },
-  template: '<modal-dialog :headerFeatureIcon="ICONS[headerFeatureIcon]" :danger="danger" ' + ':headerTitle="headerTitle" :headerSubtitle="headerSubtitle" :headerFeatureIconColor="headerFeatureIconColor" ' + ':footerPrimaryButtonText="footerPrimaryButtonText" :footerPrimaryButtonIcon="footerPrimaryButtonIcon" :footerPrimaryButtonState="footerPrimaryButtonState" ' + ':headerImage="headerImage" ' + ':footerSecondaryButtonText="footerSecondaryButtonText" :footerSecondaryButtonIcon="footerSecondaryButtonIcon" :footerSecondaryButtonState="footerSecondaryButtonState">' + '<div v-html="defaultSlot" />' + '</modal-dialog>',
-  data() {
-    return {
-      ICONS: Object.freeze(ICONS),
-      BUTTON_STATES: Object.freeze(BUTTON_STATES)
-    };
-  }
-})`,...(T=(y=r.parameters)==null?void 0:y.docs)==null?void 0:T.source}}};const v=["Interactive","Danger","WithImage"];export{o as Danger,t as Interactive,r as WithImage,v as __namedExportsOrder,N as default};