@bethinkpl/design-system 43.0.0 → 45.0.0

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;