@bethinkpl/design-system 44.0.0 → 45.0.0

package/lib/js/components/Callout/Callout.vue

@@ -0,0 +1,161 @@
+<template>
+	<div
+		class="ds-callout"
+		:class="{
+			'-ds-layout-vertical': layout === CALLOUT_LAYOUTS.VERTICAL,
+			'-ds-layout-horizontal': layout === CALLOUT_LAYOUTS.HORIZONTAL,
+			'-ds-actions-vertical': isActionVertical,
+		}"
+	>
+		<div class="ds-callout__content">
+			<ds-feature-icon
+				class="ds-callout__icon"
+				:icon="icon"
+				:color="iconColor"
+				:size="featureIconSize"
+				double-background
+			/>
+			<ds-text-group
+				class="ds-callout__text"
+				:eyebrow-text="eyebrowText"
+				:is-eyebrow-text-uppercase="false"
+				:main-text="mainText"
+				:supporting-text="supportingText"
+				:size="textGroupSize"
+				:align="textGroupAlign"
+				:main-text-color="mainTextColor"
+				:is-interactive="false"
+			/>
+		</div>
+		<div v-if="$slots.actions || buttonLabel" class="ds-callout__actions">
+			<slot name="actions">
+				<ds-button
+					:color="BUTTON_COLORS.PRIMARY"
+					:type="BUTTON_TYPES.FILLED"
+					:size="BUTTON_SIZES.SMALL"
+					:radius="BUTTON_RADIUSES.ROUNDED"
+					:icon-left="buttonIcon"
+					@click="$emit('button-clicked', $event)"
+					>{{ buttonLabel }}</ds-button
+				>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../styles/settings/spacings';
+
+.ds-callout {
+	$self: &;
+
+	display: flex;
+	flex-direction: column;
+	gap: $space-8;
+	width: 100%;
+
+	&.-ds-layout-horizontal:not(.-ds-actions-vertical) {
+		align-items: center;
+		flex-direction: row;
+	}
+
+	&__content {
+		display: flex;
+
+		#{$self}.-ds-layout-vertical & {
+			align-items: center;
+			flex-direction: column;
+			gap: $space-4;
+		}
+
+		#{$self}.-ds-layout-horizontal & {
+			align-items: center;
+			flex: 1 1 auto;
+			gap: $space-6;
+			min-width: 0;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		gap: $space-8;
+
+		#{$self}.-ds-layout-vertical & {
+			justify-content: center;
+			width: 100%;
+		}
+
+		#{$self}.-ds-actions-vertical & {
+			align-items: stretch;
+			flex-direction: column;
+			width: 100%;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import DsFeatureIcon from '../Icons/FeatureIcon';
+import { FEATURE_ICON_SIZES } from '../Icons/FeatureIcon/FeatureIcon.consts';
+import DsTextGroup from '../TextGroup/TextGroup.vue';
+import { TEXT_GROUP_ALIGNS, TEXT_GROUP_SIZES } from '../TextGroup/TextGroup.consts';
+import DsButton, { BUTTON_RADIUSES } from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
+import { IconItem } from '../Icons/Icon';
+import {
+	CALLOUT_ICON_COLORS,
+	CALLOUT_LAYOUTS,
+	CALLOUT_MAIN_TEXT_COLORS,
+	CALLOUT_SIZES,
+	CalloutIconColor,
+	CalloutLayout,
+	CalloutMainTextColor,
+	CalloutSize,
+} from './Callout.consts';
+
+const {
+	layout = CALLOUT_LAYOUTS.VERTICAL,
+	size = CALLOUT_SIZES.MEDIUM,
+	iconColor = CALLOUT_ICON_COLORS.PRIMARY,
+	eyebrowText = null,
+	mainText = null,
+	supportingText = null,
+	mainTextColor = CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+	buttonLabel = null,
+	buttonIcon = null,
+	isActionVertical = false,
+} = defineProps<{
+	icon: IconItem;
+	layout?: CalloutLayout;
+	size?: CalloutSize;
+	iconColor?: CalloutIconColor;
+	eyebrowText?: string | null;
+	mainText?: string | null;
+	supportingText?: string | null;
+	mainTextColor?: CalloutMainTextColor;
+	buttonLabel?: string | null;
+	buttonIcon?: IconItem | null;
+	isActionVertical?: boolean;
+}>();
+
+defineEmits<{
+	'button-clicked': [e: Event];
+}>();
+
+defineSlots<{
+	actions?: () => any;
+}>();
+
+const featureIconSize = computed(() =>
+	size === CALLOUT_SIZES.LARGE ? FEATURE_ICON_SIZES.LARGE : FEATURE_ICON_SIZES.MEDIUM,
+);
+
+const textGroupSize = computed(() =>
+	size === CALLOUT_SIZES.SMALL ? TEXT_GROUP_SIZES.MEDIUM : TEXT_GROUP_SIZES.LARGE,
+);
+
+const textGroupAlign = computed(() =>
+	layout === CALLOUT_LAYOUTS.VERTICAL ? TEXT_GROUP_ALIGNS.CENTER : TEXT_GROUP_ALIGNS.LEFT,
+);
+</script>

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

@@ -0,0 +1,4 @@
+import Callout from './Callout.vue';
+
+export default Callout;
+export * from './Callout.consts';

package/lib/js/components/Cards/Card/Card.vue

@@ -102,7 +102,7 @@
 	}
 
 	&.-ds-elevationTop {
-		box-shadow: $shadow-top-s;
+		box-shadow: $shadow-top-l;
 	}
 
 	&.-ds-elevationNone {

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

@@ -3,7 +3,7 @@
 		v-bind="$props"
 		v-model="value"
 		:input-props="inputProps"
-		:left-icon="ICONS.FA_UNLOCK_KEYHOLE"
+		:left-icon="ICONS.FA_LOCK_KEYHOLE"
 	>
 		<template #action>
 			<icon-button

package/lib/js/index.ts

@@ -1,4 +1,3 @@
-export { default as DsActionContent } from './components/ActionContent';
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar/Avatar.consts';
 export { default as Badge } from './components/Badge';
@@ -15,6 +14,8 @@ export * from './components/Buttons/Button/Button.consts';
 export { default as ToggleButton } from './components/Toggles/ToggleButton';
 export { default as DsToggleButton } from './components/Toggles/ToggleButton';
 export * from './components/Toggles/ToggleButton/ToggleButton.consts';
+export { default as DsCallout } from './components/Callout';
+export * from './components/Callout/Callout.consts';
 export { default as Card } from './components/Cards/Card/';
 export * from './components/Cards/Card';
 export { default as DsCard } from './components/Cards/Card';

package/package.json

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

package/dist/lib/js/components/ActionContent/index.d.ts

@@ -1,3 +0,0 @@
-import { default as ActionContent } from './ActionContent.vue';
-
-export default ActionContent;

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

@@ -1,99 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { h } from 'vue';
-import ActionContent from './ActionContent.vue';
-import DsFeatureIcon from '../Icons/FeatureIcon';
-import DsButton from '../Buttons/Button';
-import { ICONS } from '../Icons/Icon';
-
-describe('ActionContent', () => {
-	it('renders', () => {
-		const wrapper = mount(ActionContent);
-
-		expect(wrapper.exists()).toBe(true);
-	});
-
-	it('renders the feature icon when icon is provided', () => {
-		const wrapper = mount(ActionContent, {
-			props: {
-				icon: ICONS.FA_COMMENT_DOTS,
-			},
-		});
-
-		expect(wrapper.findComponent(DsFeatureIcon).exists()).toBe(true);
-	});
-
-	it('does not render the feature icon when icon is not provided', () => {
-		const wrapper = mount(ActionContent);
-
-		expect(wrapper.findComponent(DsFeatureIcon).exists()).toBe(false);
-	});
-
-	it('passes main and supporting text to the text group', () => {
-		const wrapper = mount(ActionContent, {
-			props: {
-				mainText: 'Main text',
-				supportingText: 'Supporting text',
-			},
-		});
-
-		expect(wrapper.find('.ds-actionContent__text').text()).toContain('Main text');
-		expect(wrapper.find('.ds-actionContent__text').text()).toContain('Supporting text');
-	});
-
-	it('renders a default primary button with the button label and icon', () => {
-		const wrapper = mount(ActionContent, {
-			props: {
-				buttonLabel: 'Confirm',
-				buttonIcon: ICONS.FA_COMMENT_DOTS,
-			},
-		});
-
-		const button = wrapper.findComponent(DsButton);
-		expect(button.exists()).toBe(true);
-		expect(button.text()).toBe('Confirm');
-		expect(button.props('iconLeft')).toStrictEqual(ICONS.FA_COMMENT_DOTS);
-	});
-
-	it('emits button-clicked when the default button is clicked', async () => {
-		const wrapper = mount(ActionContent, {
-			props: {
-				buttonLabel: 'Confirm',
-			},
-		});
-
-		await wrapper.findComponent(DsButton).trigger('click');
-
-		expect(wrapper.emitted('button-clicked')).toHaveLength(1);
-	});
-
-	it('renders the actions slot instead of the default button', () => {
-		const wrapper = mount(ActionContent, {
-			props: {
-				buttonLabel: 'Default button',
-			},
-			slots: {
-				actions: () => h('span', { class: 'custom-action' }, 'Custom action'),
-			},
-		});
-
-		expect(wrapper.find('.custom-action').exists()).toBe(true);
-		expect(wrapper.findComponent(DsButton).exists()).toBe(false);
-	});
-
-	it('adds the vertical modifier when isActionVertical is set', () => {
-		const wrapper = mount(ActionContent, {
-			props: {
-				isActionVertical: true,
-			},
-		});
-
-		expect(wrapper.find('.ds-actionContent__actions').classes()).toContain('-ds-vertical');
-	});
-
-	it('does not add the vertical modifier by default', () => {
-		const wrapper = mount(ActionContent);
-
-		expect(wrapper.find('.ds-actionContent__actions').classes()).not.toContain('-ds-vertical');
-	});
-});

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

@@ -1,141 +0,0 @@
-import ActionContent from './ActionContent.vue';
-import DsButton from '../Buttons/Button';
-import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
-import { ICONS } from '../Icons/Icon';
-
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
-import { toRefs } from 'vue';
-
-export default {
-	title: 'Components/ActionContent',
-	component: ActionContent,
-} as Meta<typeof ActionContent>;
-
-const StoryTemplate: StoryFn<typeof ActionContent> = (args) => {
-	return {
-		components: { ActionContent },
-		setup() {
-			return {
-				...toRefs(args),
-				ICONS,
-			};
-		},
-		template: `
-				<action-content
-						:icon="ICONS[icon]"
-						:main-text="mainText"
-						:supporting-text="supportingText"
-						:button-label="buttonLabel"
-						:button-icon="ICONS[buttonIcon]"
-						:is-action-vertical="isActionVertical"
-				>
-				<template v-if="actions" #actions><span v-html="actions" /></template>
-				</action-content>`,
-	};
-};
-
-export const Interactive = StoryTemplate.bind({});
-
-const args = {
-	icon: 'FA_COMMENT_DOTS',
-	mainText: 'Main text tutaj sobie będzie',
-	supportingText: 'Supporting text tutaj będzie',
-	buttonLabel: 'Button label',
-	buttonIcon: null,
-	isActionVertical: false,
-	actions: '',
-} as Args;
-
-const argTypes = {
-	icon: {
-		control: 'select',
-		options: [null, ...Object.keys(ICONS)],
-	},
-	mainText: {
-		control: 'text',
-	},
-	supportingText: {
-		control: 'text',
-	},
-	buttonLabel: {
-		control: 'text',
-	},
-	buttonIcon: {
-		control: 'select',
-		options: [null, ...Object.keys(ICONS)],
-	},
-	isActionVertical: {
-		control: 'boolean',
-	},
-	actions: {
-		control: 'text',
-	},
-} as ArgTypes;
-
-Interactive.argTypes = argTypes;
-Interactive.args = args;
-
-Interactive.parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/design/uLBrJvVwTYzuch6VnDOBlL/INI-188---Dyskusje-2.0-NEW?node-id=4001-152961&m=dev',
-	},
-};
-
-const WithActionsSlotTemplate: StoryFn<typeof ActionContent> = (args) => {
-	return {
-		components: { ActionContent, DsButton },
-		setup() {
-			return {
-				...toRefs(args),
-				ICONS,
-				BUTTON_COLORS,
-				BUTTON_SIZES,
-				BUTTON_TYPES,
-			};
-		},
-		template: `
-				<action-content
-						:icon="ICONS[icon]"
-						:main-text="mainText"
-						:supporting-text="supportingText"
-						:is-action-vertical="isActionVertical"
-				>
-				<template #actions>
-					<ds-button
-							:color="BUTTON_COLORS.NEUTRAL"
-							:type="BUTTON_TYPES.OUTLINED"
-							:size="BUTTON_SIZES.SMALL"
-					>Cancel</ds-button>
-					<ds-button
-							:color="BUTTON_COLORS.PRIMARY"
-							:type="BUTTON_TYPES.FILLED"
-							:size="BUTTON_SIZES.SMALL"
-					>Confirm</ds-button>
-				</template>
-				</action-content>`,
-	};
-};
-
-export const WithActionsSlot = WithActionsSlotTemplate.bind({});
-
-WithActionsSlot.argTypes = {
-	icon: argTypes.icon,
-	mainText: argTypes.mainText,
-	supportingText: argTypes.supportingText,
-	isActionVertical: argTypes.isActionVertical,
-} as ArgTypes;
-
-WithActionsSlot.args = {
-	icon: 'FA_COMMENT_DOTS',
-	mainText: 'Main text tutaj sobie będzie',
-	supportingText: 'Supporting text tutaj będzie',
-	isActionVertical: false,
-} as Args;
-
-WithActionsSlot.parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/design/uLBrJvVwTYzuch6VnDOBlL/INI-188---Dyskusje-2.0-NEW?node-id=4001-152961&m=dev',
-	},
-};

package/lib/js/components/ActionContent/ActionContent.vue

@@ -1,104 +0,0 @@
-<template>
-	<div class="ds-actionContent">
-		<div class="ds-actionContent__content">
-			<ds-feature-icon
-				v-if="icon"
-				class="ds-actionContent__icon"
-				:icon="icon"
-				:color="FEATURE_ICON_COLOR.PRIMARY"
-				:size="FEATURE_ICON_SIZES.MEDIUM"
-				double-background
-			/>
-			<ds-text-group
-				class="ds-actionContent__text"
-				:eyebrow-text="null"
-				:main-text="mainText"
-				:supporting-text="supportingText"
-				:size="TEXT_GROUP_SIZES.LARGE"
-				:align="TEXT_GROUP_ALIGNS.CENTER"
-				:main-text-color="TEXT_GROUP_MAIN_TEXT_COLORS.PRIMARY"
-				:is-interactive="false"
-			/>
-		</div>
-		<div class="ds-actionContent__actions" :class="{ '-ds-vertical': isActionVertical }">
-			<slot name="actions">
-				<ds-button
-					:color="BUTTON_COLORS.PRIMARY"
-					:type="BUTTON_TYPES.FILLED"
-					:size="BUTTON_SIZES.SMALL"
-					:radius="BUTTON_RADIUSES.ROUNDED"
-					:icon-left="buttonIcon"
-					@click="$emit('button-clicked')"
-					>{{ buttonLabel }}</ds-button
-				>
-			</slot>
-		</div>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-@import '../../../styles/settings/spacings';
-
-.ds-actionContent {
-	display: flex;
-	flex-direction: column;
-	gap: $space-8;
-	width: 100%;
-
-	&__content {
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		gap: $space-4;
-	}
-
-	&__actions {
-		display: flex;
-		gap: $space-8;
-		justify-content: center;
-
-		&.-ds-vertical {
-			align-items: stretch;
-			flex-direction: column;
-		}
-	}
-}
-</style>
-
-<script setup lang="ts">
-import DsFeatureIcon from '../Icons/FeatureIcon';
-import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from '../Icons/FeatureIcon/FeatureIcon.consts';
-import DsTextGroup from '../TextGroup/TextGroup.vue';
-import {
-	TEXT_GROUP_ALIGNS,
-	TEXT_GROUP_MAIN_TEXT_COLORS,
-	TEXT_GROUP_SIZES,
-} from '../TextGroup/TextGroup.consts';
-import DsButton, { BUTTON_RADIUSES } from '../Buttons/Button';
-import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
-import { IconItem } from '../Icons/Icon';
-
-const {
-	icon = null,
-	mainText = null,
-	supportingText = null,
-	buttonLabel,
-	buttonIcon = null,
-	isActionVertical = false,
-} = defineProps<{
-	icon?: IconItem | null;
-	mainText?: string | null;
-	supportingText?: string | null;
-	buttonLabel?: string;
-	buttonIcon?: IconItem | null;
-	isActionVertical?: boolean;
-}>();
-
-defineEmits<{
-	(e: 'button-clicked'): void;
-}>();
-
-defineSlots<{
-	actions?: () => any;
-}>();
-</script>

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

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