@bethinkpl/design-system 39.1.0 → 40.0.1

package/lib/js/components/Cards/Card/Card.consts.ts

@@ -12,21 +12,28 @@ export const CARD_PADDING_SIZES = {
 
 export type CardPaddingSize = Value<typeof CARD_PADDING_SIZES>;
 
-export const CARD_BORDER_COLORS = CONTAINER_RIBBON_COLORS;
+export const CARD_BACKGROUND_COLORS = {
+	DEFAULT: 'default',
+	NEUTRAL: 'neutral',
+} as const;
+
+export type CardBackgroundColor = Value<typeof CARD_BACKGROUND_COLORS>;
+
+export const CARD_RIBBON_COLORS = CONTAINER_RIBBON_COLORS;
 
-export type CardBorderColors = Value<typeof CARD_BORDER_COLORS>;
+export type CardRibbonColors = Value<typeof CARD_RIBBON_COLORS>;
 
-export const CARD_BORDER_SIZES = CONTAINER_RIBBON_SIZES;
+export const CARD_RIBBON_SIZES = CONTAINER_RIBBON_SIZES;
 
-export type CardBorderSizes = Value<typeof CARD_BORDER_SIZES>;
+export type CardRibbonSizes = Value<typeof CARD_RIBBON_SIZES>;
 
-export const CARD_BORDER_POSITIONS = {
+export const CARD_RIBBON_POSITIONS = {
 	TOP: 'top',
 	LEFT: 'left',
 } as const;
 
-export type CardBorderPositions = Value<typeof CARD_BORDER_POSITIONS>;
+export type CardRibbonPositions = Value<typeof CARD_RIBBON_POSITIONS>;
 
-export const CARD_BORDER_RADIUS = CONTAINER_RIBBON_RADIUSES;
+export const CARD_RIBBON_RADIUS = CONTAINER_RIBBON_RADIUSES;
 
-export type CardBorderRadius = Value<typeof CARD_BORDER_RADIUS>;
+export type CardRibbonRadius = Value<typeof CARD_RIBBON_RADIUS>;

package/lib/js/components/Cards/Card/Card.spec.ts

@@ -3,7 +3,7 @@ import { ComponentMountingOptions, mount } from '@vue/test-utils';
 import { h } from 'vue';
 
 import Card from './Card.vue';
-import { CARD_PADDING_SIZES } from './Card.consts';
+import { CARD_BACKGROUND_COLORS, CARD_PADDING_SIZES } from './Card.consts';
 
 describe('Card', () => {
 	const createComponent = (options: ComponentMountingOptions<typeof Card> = {}) => {
@@ -177,4 +177,64 @@ describe('Card', () => {
 
 		expect(component.find('.ds-card').classes()).toContain('-ds-flat');
 	});
+
+	it('should not set no-radius class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-card').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-card').classes()).toContain('-ds-noRadius');
+	});
+
+	it('should not set neutral background class by default', () => {
+		const component = createComponent();
+
+		expect(component.find('.ds-card').classes()).not.toContain('-ds-backgroundNeutral');
+	});
+
+	it('should set neutral background class when backgroundColor is neutral', () => {
+		const component = createComponent({
+			props: { backgroundColor: CARD_BACKGROUND_COLORS.NEUTRAL },
+		});
+
+		expect(component.find('.ds-card').classes()).toContain('-ds-backgroundNeutral');
+	});
+
+	it('should not give the ribbon a radius when only hasRibbonRadius is set', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: true },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+	});
+
+	it('should give the ribbon a radius when hasRibbonRadius and card has no radius', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: true, hasRadius: false },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
+	});
+
+	it('should not give the ribbon a radius when hasRadius is false but hasRibbonRadius is false', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: false, hasRadius: false },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(false);
+	});
+
+	it('should give the ribbon a radius when hasRibbonRadius and card is flat', () => {
+		const component = createComponent({
+			props: { hasRibbon: true, hasRibbonRadius: true, isFlat: true },
+		});
+
+		expect(component.find('.-ds-radius-bottom').exists()).toBe(true);
+	});
 });

package/lib/js/components/Cards/Card/Card.stories.ts

@@ -2,9 +2,10 @@ import Card from './Card.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
-	CARD_BORDER_COLORS,
-	CARD_BORDER_POSITIONS,
-	CARD_BORDER_SIZES,
+	CARD_BACKGROUND_COLORS,
+	CARD_RIBBON_COLORS,
+	CARD_RIBBON_POSITIONS,
+	CARD_RIBBON_SIZES,
 	CARD_PADDING_SIZES,
 } from './Card.consts';
 import { LOADING_BAR_COLORS } from '../../LoadingBar';
@@ -44,10 +45,12 @@ const args = {
 	footerHasPadding: false,
 	paddingSize: CARD_PADDING_SIZES.SMALL,
 	dividerUnderHeader: false,
-	hasBorder: false,
-	borderPosition: CARD_BORDER_POSITIONS.TOP,
-	borderSize: CARD_BORDER_SIZES.LARGE,
-	borderColor: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+	hasRibbon: false,
+	hasRadius: true,
+	backgroundColor: CARD_BACKGROUND_COLORS.DEFAULT,
+	ribbonPosition: CARD_RIBBON_POSITIONS.TOP,
+	ribbonSize: CARD_RIBBON_SIZES.MEDIUM,
+	ribbonColor: CARD_RIBBON_COLORS.NEUTRAL_HEAVY,
 	hasRibbonRadius: false,
 	hasLoadingBar: false,
 	loadingBarColor: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
@@ -62,17 +65,21 @@ const argTypes = {
 		control: 'text',
 	},
 	footer: { control: 'text' },
-	borderPosition: {
+	backgroundColor: {
 		control: 'select',
-		options: Object.values(CARD_BORDER_POSITIONS),
+		options: Object.values(CARD_BACKGROUND_COLORS),
 	},
-	borderSize: {
+	ribbonPosition: {
 		control: 'select',
-		options: Object.values(CARD_BORDER_SIZES),
+		options: Object.values(CARD_RIBBON_POSITIONS),
 	},
-	borderColor: {
+	ribbonSize: {
 		control: 'select',
-		options: Object.values(CARD_BORDER_COLORS),
+		options: Object.values(CARD_RIBBON_SIZES),
+	},
+	ribbonColor: {
+		control: 'select',
+		options: Object.values(CARD_RIBBON_COLORS),
 	},
 	hasRibbonRadius: {
 		control: 'boolean',

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

@@ -4,17 +4,19 @@
 			'ds-card',
 			{
 				'-ds-paddingLarge': paddingSize === CARD_PADDING_SIZES.LARGE,
-				'-ds-leftBorder':
-					hasBorder && !hasLoadingBar && borderPosition === CARD_BORDER_POSITIONS.LEFT,
+				'-ds-leftRibbon':
+					hasRibbon && !hasLoadingBar && ribbonPosition === CARD_RIBBON_POSITIONS.LEFT,
 				'-ds-flat': isFlat,
+				'-ds-noRadius': !hasRadius,
+				'-ds-backgroundNeutral': backgroundColor === CARD_BACKGROUND_COLORS.NEUTRAL,
 			},
 		]"
 	>
-		<div v-if="hasBorder || hasLoadingBar" class="ds-card__border">
+		<div v-if="hasRibbon || hasLoadingBar" class="ds-card__ribbon">
 			<ds-container-ribbon
-				v-if="hasBorder && !hasLoadingBar"
-				:size="borderSize"
-				:color="borderColor"
+				v-if="hasRibbon && !hasLoadingBar"
+				:size="ribbonSize"
+				:color="ribbonColor"
 				:layout="ribbonLayout"
 				:radius="ribbonRadius"
 			/>
@@ -22,7 +24,7 @@
 				v-if="hasLoadingBar"
 				:time="loadingBarTime"
 				:color="loadingBarColor"
-				:size="borderSize"
+				:size="ribbonSize"
 			/>
 		</div>
 
@@ -82,9 +84,17 @@
 		background-color: $color-default-background;
 		border-radius: $card-border-radius;
 		box-shadow: $shadow-s;
+
+		&.-ds-backgroundNeutral {
+			background-color: $color-neutral-background;
+		}
+
+		&.-ds-noRadius {
+			border-radius: 0;
+		}
 	}
 
-	&.-ds-leftBorder {
+	&.-ds-leftRibbon {
 		flex-direction: row;
 	}
 
@@ -147,9 +157,9 @@
 		}
 	}
 
-	// the border container is added to avoid adding overflow hidden to the card itself
+	// the ribbon container is added to avoid adding overflow hidden to the card itself
 	// which would clip floating elements rendered within the card (e.g. dropdowns)
-	&__border {
+	&__ribbon {
 		display: flex;
 		flex-shrink: 0;
 
@@ -159,13 +169,17 @@
 			overflow: hidden;
 		}
 
-		#{$root}:not(.-ds-flat).-ds-leftBorder & {
+		#{$root}:not(.-ds-flat).-ds-leftRibbon & {
 			border-bottom-left-radius: $card-border-radius;
 			border-top-left-radius: $card-border-radius;
 			border-top-right-radius: 0;
 		}
 
-		.-ds-leftBorder & {
+		#{$root}:not(.-ds-flat).-ds-noRadius & {
+			border-radius: 0;
+		}
+
+		.-ds-leftRibbon & {
 			height: 100%;
 			left: 0;
 			position: absolute;
@@ -178,18 +192,21 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
+import { RemovedProp } from '../../../utils/type.utils';
 import DsDivider from '../../Divider/Divider.vue';
 import DsLoadingBar, { LOADING_BAR_COLORS, LoadingBarColors } from '../../LoadingBar';
 import DsContainerRibbon from '../../ContainerRibbon/ContainerRibbon.vue';
 import { CONTAINER_RIBBON_LAYOUTS, CONTAINER_RIBBON_RADIUSES } from '../../ContainerRibbon';
 import {
-	CARD_BORDER_COLORS,
-	CARD_BORDER_POSITIONS,
-	CARD_BORDER_SIZES,
+	CARD_BACKGROUND_COLORS,
+	CARD_RIBBON_COLORS,
+	CARD_RIBBON_POSITIONS,
+	CARD_RIBBON_SIZES,
 	CARD_PADDING_SIZES,
-	CardBorderColors,
-	CardBorderPositions,
-	CardBorderSizes,
+	CardBackgroundColor,
+	CardRibbonColors,
+	CardRibbonPositions,
+	CardRibbonSizes,
 	CardPaddingSize,
 } from './Card.consts';
 
@@ -200,10 +217,12 @@ const {
 	footerHasPadding = false,
 	paddingSize = CARD_PADDING_SIZES.SMALL,
 	dividerUnderHeader = false,
-	hasBorder = false,
-	borderPosition = CARD_BORDER_POSITIONS.TOP,
-	borderSize = CARD_BORDER_SIZES.LARGE,
-	borderColor = CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+	hasRibbon = false,
+	hasRadius = true,
+	backgroundColor = CARD_BACKGROUND_COLORS.DEFAULT,
+	ribbonPosition = CARD_RIBBON_POSITIONS.TOP,
+	ribbonSize = CARD_RIBBON_SIZES.MEDIUM,
+	ribbonColor = CARD_RIBBON_COLORS.NEUTRAL_HEAVY,
 	hasRibbonRadius = false,
 	hasLoadingBar = false,
 	loadingBarColor = LOADING_BAR_COLORS.NEUTRAL_HEAVY,
@@ -216,16 +235,28 @@ const {
 	footerHasPadding?: boolean;
 	paddingSize?: CardPaddingSize;
 	dividerUnderHeader?: boolean;
-	hasBorder?: boolean;
-	borderPosition?: CardBorderPositions;
-	borderSize?: CardBorderSizes;
-	borderColor?: CardBorderColors;
+	hasRibbon?: boolean;
+	hasRadius?: boolean;
+	backgroundColor?: CardBackgroundColor;
+	ribbonPosition?: CardRibbonPositions;
+	ribbonSize?: CardRibbonSizes;
+	ribbonColor?: CardRibbonColors;
 	hasRibbonRadius?: boolean;
 	hasLoadingBar?: boolean;
 	loadingBarColor?: LoadingBarColors;
 	loadingBarTime?: string;
 	isFlat?: boolean;
 	isContentScrollable?: boolean;
+
+	// Renamed props kept as removal markers so existing usages fail type-checking.
+	/** @deprecated renamed to `hasRibbon` */
+	hasBorder?: RemovedProp<'renamed to hasRibbon'>;
+	/** @deprecated renamed to `ribbonPosition` */
+	borderPosition?: RemovedProp<'renamed to ribbonPosition'>;
+	/** @deprecated renamed to `ribbonSize` */
+	borderSize?: RemovedProp<'renamed to ribbonSize'>;
+	/** @deprecated renamed to `ribbonColor` */
+	borderColor?: RemovedProp<'renamed to ribbonColor'>;
 }>();
 
 defineSlots<{
@@ -236,19 +267,19 @@ defineSlots<{
 
 const ribbonLayout = computed(() => {
 	const layoutMap = {
-		[CARD_BORDER_POSITIONS.TOP]: CONTAINER_RIBBON_LAYOUTS.HORIZONTAL,
-		[CARD_BORDER_POSITIONS.LEFT]: CONTAINER_RIBBON_LAYOUTS.VERTICAL,
+		[CARD_RIBBON_POSITIONS.TOP]: CONTAINER_RIBBON_LAYOUTS.HORIZONTAL,
+		[CARD_RIBBON_POSITIONS.LEFT]: CONTAINER_RIBBON_LAYOUTS.VERTICAL,
 	};
-	return layoutMap[borderPosition] || CONTAINER_RIBBON_LAYOUTS.HORIZONTAL;
+	return layoutMap[ribbonPosition] || CONTAINER_RIBBON_LAYOUTS.HORIZONTAL;
 });
 
 const ribbonRadius = computed(() => {
-	const borderPositionToRibbonRadiusMap = {
-		[CARD_BORDER_POSITIONS.TOP]: CONTAINER_RIBBON_RADIUSES.BOTTOM,
-		[CARD_BORDER_POSITIONS.LEFT]: CONTAINER_RIBBON_RADIUSES.RIGHT,
+	const ribbonPositionToRibbonRadiusMap = {
+		[CARD_RIBBON_POSITIONS.TOP]: CONTAINER_RIBBON_RADIUSES.BOTTOM,
+		[CARD_RIBBON_POSITIONS.LEFT]: CONTAINER_RIBBON_RADIUSES.RIGHT,
 	};
-	return hasRibbonRadius && isFlat
-		? borderPositionToRibbonRadiusMap[borderPosition]
+	return hasRibbonRadius && (isFlat || !hasRadius)
+		? ribbonPositionToRibbonRadiusMap[ribbonPosition]
 		: CONTAINER_RIBBON_RADIUSES.NONE;
 });
 </script>

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

@@ -10,6 +10,7 @@ import IconButton from '../Buttons/IconButton';
 interface createComponentOptions {
 	label?: string;
 	leftIcon?: IconDefinition | null;
+	rightIcon?: IconDefinition | null;
 	isRemovable?: boolean;
 	size?: string;
 	color?: string;
@@ -20,6 +21,7 @@ describe('Chip', () => {
 	const createComponent = ({
 		label = 'random label',
 		leftIcon = null,
+		rightIcon = null,
 		isRemovable = false,
 		size = CHIP_SIZES.SMALL,
 		color = CHIP_COLORS.NEUTRAL,
@@ -29,6 +31,7 @@ describe('Chip', () => {
 			props: {
 				label,
 				leftIcon,
+				rightIcon,
 				isRemovable,
 				size,
 				color,
@@ -65,6 +68,31 @@ describe('Chip', () => {
 		);
 	});
 
+	it("doesn't render rightIcon by default", () => {
+		const component = createComponent({ rightIcon: null });
+
+		expect(component.find('.ds-chip__rightIcon').exists()).toBe(false);
+	});
+
+	it('renders rightIcon', () => {
+		const component = createComponent({ rightIcon: Object.freeze(ICONS.FA_TAG) });
+
+		expect(component.find('.ds-chip__rightIcon').exists()).toBe(true);
+		expect(component.find('.ds-chip__rightIcon').findComponent(Icon).props().icon).toEqual(
+			ICONS.FA_TAG,
+		);
+	});
+
+	it('renders rightIcon before the remove button', () => {
+		const component = createComponent({
+			rightIcon: Object.freeze(ICONS.FA_TAG),
+			isRemovable: true,
+		});
+
+		const html = component.html();
+		expect(html.indexOf('ds-chip__rightIcon')).toBeLessThan(html.indexOf('ds-chip__remove'));
+	});
+
 	it("doesn't render leftIcon by default", () => {
 		const component = createComponent({ isRemovable: false });
 

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

@@ -21,7 +21,7 @@ const StoryTemplate: StoryFn<typeof Chip> = (args) => ({
 		return args;
 	},
 	template:
-		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" :is-interactive="isInteractive" />',
+		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :right-icon="ICONS[rightIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" :is-interactive="isInteractive" />',
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -34,7 +34,7 @@ const StoryTemplateWithAccessory: StoryFn<typeof Chip> = (args) => ({
 		return args;
 	},
 	template:
-		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" :is-interactive="isInteractive">' +
+		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :right-icon="ICONS[rightIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" :is-interactive="isInteractive">' +
 		'<template #accessory><logo-badge :style="svgStyle" /></template>' +
 		'</chip>',
 	data() {
@@ -59,6 +59,7 @@ const args = {
 	label: 'Chip z labelem',
 	isLabelUppercase: false,
 	leftIcon: null,
+	rightIcon: null,
 	radius: CHIP_RADIUSES.CAPSULE,
 	size: CHIP_SIZES.SMALL,
 	color: CHIP_DEFAULT_COLOR,
@@ -72,6 +73,10 @@ const argTypes = {
 		control: 'select',
 		options: [null, ...Object.keys(ICONS)],
 	},
+	rightIcon: {
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
+	},
 	size: {
 		control: 'select',
 		options: Object.values(CHIP_SIZES),

package/lib/js/components/Chip/Chip.vue

@@ -23,6 +23,12 @@
 			</slot>
 		</span>
 		<span v-if="label" class="ds-chip__label">{{ label }}</span>
+		<span v-if="rightIcon" class="ds-chip__rightIcon">
+			<icon
+				:icon="rightIcon"
+				:size="size === CHIP_SIZES.X_SMALL ? ICON_SIZES.XXX_SMALL : ICON_SIZES.XX_SMALL"
+			/>
+		</span>
 		<icon-button
 			v-if="size !== CHIP_SIZES.X_SMALL && isRemovable"
 			class="ds-chip__remove"
@@ -178,7 +184,8 @@ $chip-colors: (
 		&.-ds-color-#{$color-name} {
 			background-color: map-get($color-map, 'background');
 
-			#{$self}__leftIcon {
+			#{$self}__leftIcon,
+			#{$self}__rightIcon {
 				color: map-get($color-map, 'icon');
 				fill: map-get($color-map, 'icon');
 			}
@@ -198,7 +205,8 @@ $chip-colors: (
 			&.-ds-disabled {
 				background-color: map-get(map-get($color-map, 'disabled'), 'background');
 
-				#{$self}__leftIcon {
+				#{$self}__leftIcon,
+				#{$self}__rightIcon {
 					color: map-get(map-get($color-map, 'disabled'), 'icon');
 					fill: map-get($color-map, 'icon');
 				}
@@ -250,7 +258,8 @@ $chip-colors: (
 		white-space: nowrap;
 	}
 
-	&__leftIcon {
+	&__leftIcon,
+	&__rightIcon {
 		display: flex;
 	}
 
@@ -315,6 +324,7 @@ const {
 	label = null,
 	isLabelUppercase = false,
 	leftIcon = null,
+	rightIcon = null,
 	radius = CHIP_RADIUSES.CAPSULE,
 	size = CHIP_SIZES.SMALL,
 	color = CHIP_DEFAULT_COLOR,
@@ -326,6 +336,7 @@ const {
 	label?: string | null;
 	isLabelUppercase?: boolean;
 	leftIcon?: IconItem | null;
+	rightIcon?: IconItem | null;
 	radius?: ChipRadius;
 	size?: ChipSize;
 	color?: ChipColor;

package/lib/js/components/Icons/Icon/Icon.consts.ts

@@ -2,6 +2,7 @@ import HeadWithQuestionMark from '../../../../images/icons/head-with-question-ma
 import Ribbon from '../../../../images/icons/ribbon.svg';
 import SlidersSearch from '../../../../images/icons/sliders-search.svg';
 import CommentsCheck from '../../../../images/icons/comments-check.svg';
+import CommentLock from '../../../../images/icons/comment-lock.svg';
 import Answers from '../../../../images/icons/icon-answers.svg';
 import HideAnswers from '../../../../images/icons/icon-hide-answers.svg';
 import SidebarFlipSolid from '../../../../images/icons/sidebar-flip-solid.svg';
@@ -47,6 +48,7 @@ export type IconSize = Value<typeof ICON_SIZES>;
 const BETHINK_ICONS = {
 	ANSWERS: Answers,
 	CHANGE: Change,
+	COMMENT_LOCK: CommentLock,
 	COMMENTS_CHECK: CommentsCheck,
 	HEAD_WITH_QUESTION_MARK: HeadWithQuestionMark,
 	HIDE_ANSWERS: HideAnswers,

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

@@ -89,8 +89,8 @@ describe('ProgressDonutChart', () => {
 		});
 		const tracks = component.findAll('.ds-progressDonutChart__track');
 		expect(tracks.length).toBe(3);
-		expect(tracks.at(0)?.attributes('style')).toBe('--length: 30; transform: rotate(90deg);');
-		expect(tracks.at(1)?.attributes('style')).toBe('--length: 25; transform: rotate(198deg);');
-		expect(tracks.at(2)?.attributes('style')).toBe('--length: 25; transform: rotate(288deg);');
+		expect(tracks[0]?.attributes('style')).toBe('--length: 30; transform: rotate(90deg);');
+		expect(tracks[1]?.attributes('style')).toBe('--length: 25; transform: rotate(198deg);');
+		expect(tracks[2]?.attributes('style')).toBe('--length: 25; transform: rotate(288deg);');
 	});
 });

package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue

@@ -36,7 +36,7 @@
 					:eyebrow-text="eyebrow"
 					:eyebrow-text-ellipsis="eyebrowEllipsis"
 					:is-eyebrow-text-uppercase="isEyebrowUppercase"
-					:is-selected="isTextGroupSelected"
+					:main-text-color="textGroupMainTextColor"
 					:is-interactive="false"
 					:main-text="text"
 					:main-text-ellipsis="textEllipsis"
@@ -96,8 +96,10 @@
 import { defineComponent, PropType, toRaw } from 'vue';
 import { ICON_COLORS, IconColor, IconItem, ICONS } from '../../Icons/Icon';
 import {
+	TEXT_GROUP_MAIN_TEXT_COLORS,
 	TEXT_GROUP_SIZES,
 	TEXT_GROUP_STATES,
+	TextGroupMainTextColor,
 	TextGroupSize,
 	TextGroupState,
 } from '../../TextGroup';
@@ -290,6 +292,11 @@ export default defineComponent({
 			}
 			return TEXT_GROUP_STATES.DEFAULT;
 		},
+		textGroupMainTextColor(): TextGroupMainTextColor {
+			return this.isTextGroupSelected
+				? TEXT_GROUP_MAIN_TEXT_COLORS.PRIMARY
+				: TEXT_GROUP_MAIN_TEXT_COLORS.NEUTRAL;
+		},
 	},
 });
 </script>

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

@@ -13,7 +13,18 @@ export const TEXT_GROUP_SIZES = {
 	X_SMALL: 'x-small',
 	SMALL: 'small',
 	MEDIUM: 'medium',
-};
+	LARGE: 'large',
+} as const;
+
+export const TEXT_GROUP_ALIGNS = {
+	LEFT: 'left',
+	CENTER: 'center',
+} as const;
+
+export const TEXT_GROUP_MAIN_TEXT_COLORS = {
+	NEUTRAL: 'neutral',
+	PRIMARY: 'primary',
+} as const;
 
 export const TEXT_GROUP_STATES = {
 	DEFAULT: 'default',
@@ -28,3 +39,6 @@ export type TextGroupLoadingSize =
 	(typeof TEXT_GROUP_LOADING_SIZES)[keyof typeof TEXT_GROUP_LOADING_SIZES];
 export type TextGroupSize = (typeof TEXT_GROUP_SIZES)[keyof typeof TEXT_GROUP_SIZES];
 export type TextGroupState = (typeof TEXT_GROUP_STATES)[keyof typeof TEXT_GROUP_STATES];
+export type TextGroupAlign = (typeof TEXT_GROUP_ALIGNS)[keyof typeof TEXT_GROUP_ALIGNS];
+export type TextGroupMainTextColor =
+	(typeof TEXT_GROUP_MAIN_TEXT_COLORS)[keyof typeof TEXT_GROUP_MAIN_TEXT_COLORS];

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

@@ -2,7 +2,9 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsDivider from '../Divider/Divider.vue';
 import DsTextGroup from './TextGroup.vue';
 import {
+	TEXT_GROUP_ALIGNS,
 	TEXT_GROUP_LOADING_SIZES,
+	TEXT_GROUP_MAIN_TEXT_COLORS,
 	TEXT_GROUP_PROMINENCE,
 	TEXT_GROUP_SIZES,
 	TEXT_GROUP_STATES,
@@ -21,6 +23,8 @@ const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 	template: `
 		<ds-text-group
 			:size="size"
+			:align="align"
+			:main-text-color="mainTextColor"
 			:prominence="prominence"
 			:eyebrow-text="eyebrowText === 'null' ? null : eyebrowText"
 			:eyebrow-text-ellipsis="eyebrowTextEllipsis"
@@ -31,7 +35,6 @@ const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 			:supporting-text-ellipsis="supportingTextEllipsis"
 			:is-interactive="isInteractive"
 			:skeleton-loading-size="skeletonLoadingSize"
-			:is-selected="isSelected"
 			:state="state"
 			:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
 			:is-supporting-text-tooltip-enabled-on-mobile="isSupportingTextTooltipEnabledOnMobile"
@@ -54,6 +57,8 @@ export const Interactive = StoryTemplate.bind({});
 Interactive.args = {
 	mainTextSlot: '',
 	size: TEXT_GROUP_SIZES.MEDIUM,
+	align: TEXT_GROUP_ALIGNS.LEFT,
+	mainTextColor: TEXT_GROUP_MAIN_TEXT_COLORS.NEUTRAL,
 	prominence: TEXT_GROUP_PROMINENCE.DEFAULT,
 	eyebrowText: 'Eyebrow Uppercase Veritatis aspernatur cupiditate magnam quidem',
 	eyebrowTextEllipsis: false,
@@ -66,7 +71,6 @@ Interactive.args = {
 	supportingTextEllipsis: false,
 	isInteractive: true,
 	skeletonLoadingSize: TEXT_GROUP_LOADING_SIZES.LARGE,
-	isSelected: false,
 	state: TEXT_GROUP_STATES.DEFAULT,
 	isSupportingTextTooltipEnabled: false,
 	isSupportingTextTooltipEnabledOnMobile: true,
@@ -79,6 +83,14 @@ Interactive.argTypes = {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_SIZES),
 	},
+	align: {
+		control: 'select',
+		options: Object.values(TEXT_GROUP_ALIGNS),
+	},
+	mainTextColor: {
+		control: 'select',
+		options: Object.values(TEXT_GROUP_MAIN_TEXT_COLORS),
+	},
 	prominence: {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_PROMINENCE),
@@ -114,9 +126,6 @@ Interactive.argTypes = {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_LOADING_SIZES),
 	},
-	isSelected: {
-		control: 'boolean',
-	},
 	state: {
 		control: 'select',
 		options: Object.values(TEXT_GROUP_STATES),