@bethinkpl/design-system 39.1.0 → 40.0.1

package/lib/js/components/TextGroup/TextGroup.vue

@@ -4,13 +4,16 @@
 		:class="{
 			'-ds-x-small': size === TEXT_GROUP_SIZES.X_SMALL,
 			'-ds-small': size === TEXT_GROUP_SIZES.SMALL,
+			'-ds-large': size === TEXT_GROUP_SIZES.LARGE,
+
+			'-ds-align-center': align === TEXT_GROUP_ALIGNS.CENTER,
 
 			'-ds-hovered': state === TEXT_GROUP_STATES.HOVERED,
 			'-ds-loading': isLoading,
 			'-ds-disabled': state === TEXT_GROUP_STATES.DISABLED,
 
 			'-ds-interactive': isInteractive,
-			'-ds-selected': isSelected,
+			'-ds-mainTextColor-primary': mainTextColor === TEXT_GROUP_MAIN_TEXT_COLORS.PRIMARY,
 
 			[loadingSizeClassName]: isLoading,
 
@@ -100,9 +103,6 @@ $text-group-colors: (
 		'main-text-color': $color-neutral-text-strong,
 		'main-text-color-hovered': $color-neutral-text-strong-hovered,
 		'main-text-color-disabled': $color-neutral-text-strong-disabled,
-		'main-text-color-selected': $color-primary-text,
-		'main-text-color-selected-hovered': $color-primary-text-hovered,
-		'main-text-color-selected-disabled': $color-primary-text-disabled,
 		'supporting-text-color': $color-neutral-text,
 		'supporting-text-color-hovered': $color-neutral-text-hovered,
 		'supporting-text-color-disabled': $color-neutral-text-disabled,
@@ -114,9 +114,6 @@ $text-group-colors: (
 		'main-text-color': $color-neutral-text-heavy,
 		'main-text-color-hovered': $color-neutral-text-heavy-hovered,
 		'main-text-color-disabled': $color-neutral-text-heavy-disabled,
-		'main-text-color-selected': $color-primary-text,
-		'main-text-color-selected-hovered': $color-primary-text-hovered,
-		'main-text-color-selected-disabled': $color-primary-text-disabled,
 		'supporting-text-color': $color-neutral-text,
 		'supporting-text-color-hovered': $color-neutral-text-hovered,
 		'supporting-text-color-disabled': $color-neutral-text-disabled,
@@ -166,25 +163,6 @@ $text-group-colors: (
 			color: map-get($map, 'supporting-text-color-disabled');
 		}
 	}
-
-	&.-ds-selected {
-		#{$self}__main {
-			color: map-get($map, 'main-text-color-selected');
-		}
-
-		&.-ds-interactive:hover,
-		&.-ds-hovered {
-			#{$self}__main {
-				color: map-get($map, 'main-text-color-selected-hovered');
-			}
-		}
-
-		&.-ds-disabled {
-			#{$self}__main {
-				color: map-get($map, 'main-text-color-selected-disabled');
-			}
-		}
-	}
 }
 
 .ds-textGroup {
@@ -302,6 +280,40 @@ $text-group-colors: (
 		}
 	}
 
+	&.-ds-large {
+		#{$self}__main {
+			@include text-l-compact-bold;
+		}
+
+		#{$self}__supporting {
+			@include text-m-compact-regular;
+		}
+	}
+
+	&.-ds-align-center {
+		align-items: center;
+		text-align: center;
+	}
+
+	&.-ds-mainTextColor-primary {
+		#{$self}__main {
+			color: $color-primary-text;
+		}
+
+		&.-ds-interactive:hover,
+		&.-ds-hovered {
+			#{$self}__main {
+				color: $color-primary-text-hovered;
+			}
+		}
+
+		&.-ds-disabled {
+			#{$self}__main {
+				color: $color-primary-text-disabled;
+			}
+		}
+	}
+
 	&.-ds-interactive:hover,
 	&.-ds-hovered {
 		cursor: pointer;
@@ -346,9 +358,13 @@ import { throttle } from 'lodash';
 import { useElementSize } from '@vueuse/core';
 import DsSkeleton from '../Skeleton/Skeleton.vue';
 import {
+	TEXT_GROUP_ALIGNS,
 	TEXT_GROUP_LOADING_SIZES,
+	TEXT_GROUP_MAIN_TEXT_COLORS,
 	TEXT_GROUP_SIZES,
 	TEXT_GROUP_STATES,
+	TextGroupAlign,
+	TextGroupMainTextColor,
 	TextGroupProminence,
 	TextGroupLoadingSize,
 	TextGroupSize,
@@ -356,9 +372,12 @@ import {
 	TEXT_GROUP_PROMINENCE,
 } from './TextGroup.consts';
 import DsTooltip from '../Tooltip';
+import { RemovedProp } from '../../utils/type.utils';
 
 const {
 	size = TEXT_GROUP_SIZES.MEDIUM,
+	align = TEXT_GROUP_ALIGNS.LEFT,
+	mainTextColor = TEXT_GROUP_MAIN_TEXT_COLORS.NEUTRAL,
 	prominence = TEXT_GROUP_PROMINENCE.DEFAULT,
 	eyebrowText,
 	eyebrowTextEllipsis = false,
@@ -370,7 +389,6 @@ const {
 	supportingTextEllipsis = false,
 	isInteractive = true,
 	skeletonLoadingSize = TEXT_GROUP_LOADING_SIZES.LARGE,
-	isSelected = false,
 	state = TEXT_GROUP_STATES.DEFAULT,
 	isSupportingTextTooltipEnabled = false,
 	isSupportingTextTooltipEnabledOnMobile = true,
@@ -378,6 +396,8 @@ const {
 	supportingTextTooltipContent,
 } = defineProps<{
 	size?: TextGroupSize;
+	align?: TextGroupAlign;
+	mainTextColor?: TextGroupMainTextColor;
 	prominence?: TextGroupProminence;
 	eyebrowText?: string | null;
 	eyebrowTextEllipsis?: boolean;
@@ -389,12 +409,15 @@ const {
 	supportingTextEllipsis?: boolean;
 	isInteractive?: boolean;
 	skeletonLoadingSize?: TextGroupLoadingSize;
-	isSelected?: boolean;
 	state?: TextGroupState;
 	isSupportingTextTooltipEnabled?: boolean;
 	isSupportingTextTooltipEnabledOnMobile?: boolean;
 	isSupportingTextTooltipAutoFilledWithContent?: boolean;
 	supportingTextTooltipContent?: string;
+
+	// Removed prop kept as a removal marker so existing usages fail type-checking.
+	/** @deprecated use `mainTextColor` set to `primary` instead */
+	isSelected?: RemovedProp<'use mainTextColor=primary instead'>;
 }>();
 
 const prominenceClassName = computed(() => `-ds-${prominence}`);

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

@@ -1,4 +1,5 @@
 import { Value } from '../../utils/type.utils';
+import { CONTAINER_RIBBON_COLORS, CONTAINER_RIBBON_SIZES } from '../ContainerRibbon';
 
 export const WELL_PADDINGS = {
 	SMALL: 'small',
@@ -21,3 +22,18 @@ export const WELL_COLORS = {
 export type WellColor = Value<typeof WELL_COLORS>;
 
 export const WELL_DEFAULT_COLOR = WELL_COLORS.NEUTRAL;
+
+export const WELL_RIBBON_COLORS = CONTAINER_RIBBON_COLORS;
+
+export type WellRibbonColor = Value<typeof WELL_RIBBON_COLORS>;
+
+export const WELL_RIBBON_SIZES = CONTAINER_RIBBON_SIZES;
+
+export type WellRibbonSize = Value<typeof WELL_RIBBON_SIZES>;
+
+export const WELL_RIBBON_POSITIONS = {
+	TOP: 'top',
+	LEFT: 'left',
+} as const;
+
+export type WellRibbonPosition = Value<typeof WELL_RIBBON_POSITIONS>;

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

@@ -0,0 +1,112 @@
+import { describe, expect, it } from 'vitest';
+import { ComponentMountingOptions, mount } from '@vue/test-utils';
+
+import Well from './Well.vue';
+import { WELL_RIBBON_POSITIONS } from './Well.consts';
+
+describe('Well', () => {
+	const createComponent = (options: ComponentMountingOptions<typeof Well> = {}) => {
+		return mount(Well, options);
+	};
+
+	it('should create', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well').exists()).toBe(true);
+	});
+
+	it('should render default slot content', () => {
+		const content = 'Wpłynąlem na suchego przestwór oceanu';
+		const component = createComponent({
+			slots: { default: () => content },
+		});
+
+		expect(component.find('.ds-well__content').text()).toContain(content);
+	});
+
+	it('should not set no-radius class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well').classes()).not.toContain('-ds-noRadius');
+	});
+
+	it('should set no-radius class when hasRadius is false', () => {
+		const component = createComponent({
+			props: { hasRadius: false },
+		});
+
+		expect(component.find('.ds-well').classes()).toContain('-ds-noRadius');
+	});
+
+	it('should not set border class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well').classes()).not.toContain('-ds-hasBorder');
+	});
+
+	it('should set border class when hasBorder is true', () => {
+		const component = createComponent({
+			props: { hasBorder: true },
+		});
+
+		expect(component.find('.ds-well').classes()).toContain('-ds-hasBorder');
+	});
+
+	it('should not render a ribbon by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-well__ribbon').exists()).toBe(false);
+		expect(component.find('.ds-container-ribbon').exists()).toBe(false);
+	});
+
+	it('should render a horizontal ribbon for the top position', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, ribbonPosition: WELL_RIBBON_POSITIONS.TOP },
+		});
+
+		expect(component.find('.ds-container-ribbon').classes()).toContain('-ds-layout-horizontal');
+		expect(component.find('.ds-well').classes()).not.toContain('-ds-leftRibbon');
+	});
+
+	it('should render a vertical ribbon and left-ribbon class for the left position', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, ribbonPosition: WELL_RIBBON_POSITIONS.LEFT },
+		});
+
+		expect(component.find('.ds-container-ribbon').classes()).toContain('-ds-layout-vertical');
+		expect(component.find('.ds-well').classes()).toContain('-ds-leftRibbon');
+	});
+
+	it('should not give the ribbon a radius when the well is rounded', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRadius: true },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+		expect(component.find('.-ds-radius-right').exists()).toBe(false);
+	});
+
+	it('should give a top ribbon a bottom radius when the well is square', () => {
+		const component = createComponent({
+			props: {
+				hasRibbon: true,
+				hasRadius: false,
+				ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+			},
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
+	});
+
+	it('should give a left ribbon a right radius when the well is square', () => {
+		const component = createComponent({
+			props: {
+				hasRibbon: true,
+				hasRadius: false,
+				ribbonPosition: WELL_RIBBON_POSITIONS.LEFT,
+			},
+		});
+
+		expect(component.find('.-ds-radius-right').exists()).toBe(true);
+	});
+});

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

@@ -2,7 +2,14 @@
 
 import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import Well from './Well.vue';
-import { WELL_COLORS, WELL_PADDINGS } from './Well.consts';
+import {
+	WELL_COLORS,
+	WELL_DEFAULT_COLOR,
+	WELL_PADDINGS,
+	WELL_RIBBON_COLORS,
+	WELL_RIBBON_POSITIONS,
+	WELL_RIBBON_SIZES,
+} from './Well.consts';
 import type { ComponentProps } from 'vue-component-type-helpers';
 import Chip, { CHIP_RADIUSES } from '../Chip';
 
@@ -27,6 +34,27 @@ const meta: Meta<WellProps> = {
 			control: 'select',
 			options: Object.values(WELL_COLORS),
 		},
+		hasRadius: {
+			control: 'boolean',
+		},
+		hasBorder: {
+			control: 'boolean',
+		},
+		hasRibbon: {
+			control: 'boolean',
+		},
+		ribbonPosition: {
+			control: 'select',
+			options: Object.values(WELL_RIBBON_POSITIONS),
+		},
+		ribbonSize: {
+			control: 'select',
+			options: Object.values(WELL_RIBBON_SIZES),
+		},
+		ribbonColor: {
+			control: 'select',
+			options: Object.values(WELL_RIBBON_COLORS),
+		},
 		content: {
 			control: 'text',
 		},
@@ -48,6 +76,13 @@ export const Interactive: Story = {
 		content:
 			'<h3 style="margin-top: 0">Content</h3>' +
 			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasRadius: true,
+		hasBorder: false,
+		hasRibbon: false,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+		color: WELL_DEFAULT_COLOR,
 	} as Args,
 };
 
@@ -85,5 +120,59 @@ export const WithMultipleChips: Story = {
 	},
 	args: {
 		padding: WELL_PADDINGS.SMALL,
+		hasRadius: true,
+		hasBorder: false,
+		hasRibbon: false,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+		color: WELL_DEFAULT_COLOR,
 	},
 };
+
+export const WithRibbon: Story = {
+	args: {
+		padding: WELL_PADDINGS.MEDIUM,
+		hasRibbon: true,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.PRIMARY,
+		content:
+			'<h3 style="margin-top: 0">Content</h3>' +
+			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasRadius: true,
+		hasBorder: false,
+		color: WELL_DEFAULT_COLOR,
+	} as Args,
+};
+
+export const WithLeftRibbonNoRadius: Story = {
+	args: {
+		padding: WELL_PADDINGS.MEDIUM,
+		hasRadius: false,
+		hasRibbon: true,
+		ribbonPosition: WELL_RIBBON_POSITIONS.LEFT,
+		ribbonColor: WELL_RIBBON_COLORS.SUCCESS,
+		content:
+			'<h3 style="margin-top: 0">Content</h3>' +
+			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasBorder: false,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+		color: WELL_DEFAULT_COLOR,
+	} as Args,
+};
+
+export const WithBorder: Story = {
+	args: {
+		padding: WELL_PADDINGS.MEDIUM,
+		hasBorder: true,
+		color: WELL_COLORS.PRIMARY,
+		content:
+			'<h3 style="margin-top: 0">Content</h3>' +
+			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasRadius: true,
+		hasRibbon: false,
+		ribbonPosition: WELL_RIBBON_POSITIONS.TOP,
+		ribbonColor: WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+		ribbonSize: WELL_RIBBON_SIZES.MEDIUM,
+	} as Args,
+};

package/lib/js/components/Well/Well.vue

@@ -6,53 +6,136 @@
 			{
 				'-ds-medium': WELL_PADDINGS.MEDIUM === padding,
 				'-ds-small': WELL_PADDINGS.SMALL === padding,
+				'-ds-noRadius': !hasRadius,
+				'-ds-hasBorder': hasBorder,
+				'-ds-leftRibbon': hasRibbon && ribbonPosition === WELL_RIBBON_POSITIONS.LEFT,
 			},
 		]"
 	>
+		<div v-if="hasRibbon" class="ds-well__ribbon">
+			<ds-container-ribbon
+				:size="ribbonSize"
+				:color="ribbonColor"
+				:layout="ribbonLayout"
+				:radius="ribbonRadius"
+			/>
+		</div>
+
 		<div v-if="$slots.accessory" class="ds-well__accessorySlot">
 			<slot name="accessory" />
 		</div>
 
-		<slot />
+		<div class="ds-well__content">
+			<slot />
+		</div>
 	</div>
 </template>
 
 <style scoped lang="scss">
 @import '../../../styles/settings/spacings';
 @import '../../../styles/settings/radiuses';
+@import '../../../styles/settings/borders';
 @import '../../../styles/settings/colors/tokens';
 
 .ds-well {
 	$root: &;
 
 	border-radius: $radius-m;
+	display: flex;
+	flex-direction: column;
 	position: relative;
 
+	&.-ds-noRadius {
+		border-radius: 0;
+	}
+
+	&.-ds-leftRibbon {
+		flex-direction: row;
+	}
+
+	// box-shadow is used instead of border so the border doesn't add to the well's size
+	&.-ds-hasBorder {
+		box-shadow: inset 0 0 0 $border-xs var(--ds-well-border-color);
+
+		// when the well is square it spans edge-to-edge, so only top/bottom rules are drawn
+		&.-ds-noRadius {
+			box-shadow:
+				inset 0 $border-xs 0 0 var(--ds-well-border-color),
+				inset 0 (-$border-xs) 0 0 var(--ds-well-border-color);
+		}
+	}
+
 	&.-ds-accent {
+		--ds-well-border-color: #{$color-accent-border-weak};
+
 		background-color: $color-accent-background;
 	}
 	&.-ds-primary {
+		--ds-well-border-color: #{$color-primary-border-weak};
+
 		background-color: $color-primary-background;
 	}
 	&.-ds-fail {
+		--ds-well-border-color: #{$color-fail-border-weak};
+
 		background-color: $color-fail-background;
 	}
 	&.-ds-info {
+		--ds-well-border-color: #{$color-info-border-weak};
+
 		background-color: $color-info-background;
 	}
 	&.-ds-inverted {
+		--ds-well-border-color: #{$color-neutral-border-weak};
+
 		background-color: $color-default-background;
 	}
 	&.-ds-neutral {
+		--ds-well-border-color: #{$color-neutral-border-weak};
+
 		background-color: $color-neutral-background;
 	}
 	&.-ds-success {
+		--ds-well-border-color: #{$color-success-border-weak};
+
 		background-color: $color-success-background;
 	}
 	&.-ds-warning {
+		--ds-well-border-color: #{$color-warning-border-weak};
+
 		background-color: $color-warning-background;
 	}
 
+	// the border container is added to avoid adding overflow hidden to the well itself
+	// which would clip the accessory slot rendered above its top edge
+	&__ribbon {
+		border-top-left-radius: $radius-m;
+		border-top-right-radius: $radius-m;
+		display: flex;
+		flex-shrink: 0;
+		overflow: hidden;
+
+		#{$root}.-ds-leftRibbon & {
+			border-bottom-left-radius: $radius-m;
+			border-top-left-radius: $radius-m;
+			border-top-right-radius: 0;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+		}
+
+		#{$root}.-ds-noRadius & {
+			border-radius: 0;
+		}
+	}
+
+	&__content {
+		flex: 1;
+		// prevents excessive width due to child elements
+		min-width: 0;
+	}
+
 	&__accessorySlot {
 		display: flex;
 		gap: $space-2;
@@ -62,7 +145,9 @@
 	}
 
 	&.-ds-medium {
-		padding: $space-8;
+		#{$root}__content {
+			padding: $space-8;
+		}
 
 		#{$root}__accessorySlot {
 			right: $space-8;
@@ -70,7 +155,9 @@
 	}
 
 	&.-ds-small {
-		padding: $space-6;
+		#{$root}__content {
+			padding: $space-6;
+		}
 
 		#{$root}__accessorySlot {
 			right: $space-6;
@@ -81,17 +168,41 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+
+import DsContainerRibbon from '../ContainerRibbon/ContainerRibbon.vue';
+import { CONTAINER_RIBBON_LAYOUTS, CONTAINER_RIBBON_RADIUSES } from '../ContainerRibbon';
 import {
 	WELL_PADDINGS,
 	WELL_COLORS,
 	WELL_DEFAULT_COLOR,
+	WELL_RIBBON_POSITIONS,
 	WellPadding,
 	WellColor,
+	WellRibbonPosition,
+	WellRibbonSize,
+	WellRibbonColor,
+	WELL_RIBBON_SIZES,
+	WELL_RIBBON_COLORS,
 } from './Well.consts';
 
-const { padding = null, color = WELL_DEFAULT_COLOR } = defineProps<{
+const {
+	padding = null,
+	color = WELL_DEFAULT_COLOR,
+	hasRadius = true,
+	hasBorder = false,
+	hasRibbon = false,
+	ribbonPosition = WELL_RIBBON_POSITIONS.TOP,
+	ribbonSize = WELL_RIBBON_SIZES.MEDIUM,
+	ribbonColor = WELL_RIBBON_COLORS.NEUTRAL_HEAVY,
+} = defineProps<{
 	padding?: WellPadding | null;
 	color?: WellColor;
+	hasRadius?: boolean;
+	hasBorder?: boolean;
+	hasRibbon?: boolean;
+	ribbonPosition?: WellRibbonPosition;
+	ribbonSize?: WellRibbonSize;
+	ribbonColor?: WellRibbonColor;
 }>();
 
 const colorClass = computed(() => {
@@ -107,4 +218,24 @@ const colorClass = computed(() => {
 	};
 	return colorMap[color];
 });
+
+const ribbonLayout = computed(() => {
+	const layoutMap = {
+		[WELL_RIBBON_POSITIONS.TOP]: CONTAINER_RIBBON_LAYOUTS.HORIZONTAL,
+		[WELL_RIBBON_POSITIONS.LEFT]: CONTAINER_RIBBON_LAYOUTS.VERTICAL,
+	};
+	return layoutMap[ribbonPosition];
+});
+
+const ribbonRadius = computed(() => {
+	const ribbonPositionToRibbonRadiusMap = {
+		[WELL_RIBBON_POSITIONS.TOP]: CONTAINER_RIBBON_RADIUSES.BOTTOM,
+		[WELL_RIBBON_POSITIONS.LEFT]: CONTAINER_RIBBON_RADIUSES.RIGHT,
+	};
+	// when the well is rounded the outer corners are clipped by .ds-well__ribbon,
+	// so the ribbon only needs its own radius on the inner edge of a square well
+	return hasRadius
+		? CONTAINER_RIBBON_RADIUSES.NONE
+		: ribbonPositionToRibbonRadiusMap[ribbonPosition];
+});
 </script>

package/lib/js/icons/fontawesome.ts

@@ -69,6 +69,7 @@ import { faCode } from '@fortawesome/pro-regular-svg-icons/faCode';
 import { faCodeSimple } from '@fortawesome/pro-regular-svg-icons/faCodeSimple';
 import { faComment } from '@fortawesome/pro-regular-svg-icons/faComment';
 import { faCommentDots } from '@fortawesome/pro-regular-svg-icons/faCommentDots';
+import { faCommentPlus } from '@fortawesome/pro-regular-svg-icons/faCommentPlus';
 import { faComments } from '@fortawesome/pro-regular-svg-icons/faComments';
 import { faCompress } from '@fortawesome/pro-regular-svg-icons/faCompress';
 import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
@@ -180,6 +181,7 @@ import { faTrophyStar } from '@fortawesome/pro-regular-svg-icons/faTrophyStar';
 import { faUnlockKeyhole } from '@fortawesome/pro-regular-svg-icons/faUnlockKeyhole';
 import { faUpload } from '@fortawesome/pro-regular-svg-icons/faUpload';
 import { faUser } from '@fortawesome/pro-regular-svg-icons/faUser';
+import { faPaste } from '@fortawesome/pro-regular-svg-icons/faPaste';
 import { faWandMagicSparkles } from '@fortawesome/pro-regular-svg-icons/faWandMagicSparkles';
 import { faSparkles } from '@fortawesome/pro-regular-svg-icons/faSparkles';
 import { faWindowMaximize } from '@fortawesome/pro-regular-svg-icons/faWindowMaximize';
@@ -362,6 +364,7 @@ export const FONTAWESOME_ICONS = {
 	FA_CODE_SIMPLE: faCodeSimple,
 	FA_CODE: faCode,
 	FA_COMMENT_DOTS: faCommentDots,
+	FA_COMMENT_PLUS: faCommentPlus,
 	FA_COMMENT_SOLID: fasComment,
 	FA_COMMENT: faComment,
 	FA_COMMENTS_QUESTION_CHECK: faCommentsQuestionCheck,
@@ -464,6 +467,7 @@ export const FONTAWESOME_ICONS = {
 	FA_PAPER_PLANE: faPaperPlane,
 	FA_PAPERCLIP: faPaperclip,
 	FA_PARTY_HORN: faPartyHorn,
+	FA_PASTE: faPaste,
 	FA_PEN_CIRCLE: faPenCircle,
 	FA_PEN_FIELD: faPenField,
 	FA_PEN_TO_SQUARE: faPenToSquare,

package/lib/js/index.ts

@@ -1,3 +1,4 @@
+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';
@@ -84,6 +85,7 @@ export * from './components/Headers/PageHeader/PageHeader.consts';
 export { default as SectionTitle } from './components/SectionTitle/SectionTitle.vue';
 export { default as DsSectionTitle } from './components/SectionTitle/SectionTitle.vue';
 export * from './components/SectionTitle/SectionTitle.consts';
+export { default as DsSpinnerLoading } from './components/SpinnerLoading/SpinnerLoading.vue';
 export { default as Drawer } from './components/Drawer';
 export { default as DsDrawer } from './components/Drawer';
 export * from './components/Drawer/Drawer.consts';