@bethinkpl/design-system 44.0.0 → 45.0.0

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue.d.ts

@@ -1046,9 +1046,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: string;
         touchableDeprecated: boolean;
         color: string;
+        elevation: string;
         radius: string;
         state: string;
-        elevation: string;
         colorScheme: string;
     }, {}, {
         WnlIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -1655,7 +1655,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     }, {}, {
         calcHeaderFeatureIconColor(): any;
-        calcFooterPrimaryButtonColor(): "neutral" | "primary";
+        calcFooterPrimaryButtonColor(): "primary" | "neutral";
         calcFooterSecondaryButtonColor(): "danger" | "neutral";
         calcSingleColumn(): boolean;
         displayFooter(): any;
@@ -2351,9 +2351,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: string;
             touchableDeprecated: boolean;
             color: string;
+            elevation: string;
             radius: string;
             state: string;
-            elevation: string;
             colorScheme: string;
         }, {}, {
             WnlIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue.d.ts

@@ -1107,9 +1107,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: string;
         touchableDeprecated: boolean;
         color: string;
+        elevation: string;
         radius: string;
         state: string;
-        elevation: string;
         colorScheme: string;
     }, {}, {
         WnlIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -1889,7 +1889,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         };
     }, {}, {
         calcHeaderFeatureIconColor(): any;
-        calcFooterPrimaryButtonColor(): "neutral" | "primary";
+        calcFooterPrimaryButtonColor(): "primary" | "neutral";
         calcFooterSecondaryButtonColor(): "danger" | "neutral";
         calcSingleColumn(): boolean;
         displayFooter(): any;
@@ -2585,9 +2585,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: string;
             touchableDeprecated: boolean;
             color: string;
+            elevation: string;
             radius: string;
             state: string;
-            elevation: string;
             colorScheme: string;
         }, {}, {
             WnlIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts

@@ -299,8 +299,8 @@ export declare const data: () => {
         readonly ACCENT: "accent";
     }>;
     allowedColorsToBorderColorsMap: {
-        neutral: ("neutral" | "neutralWeak" | "primary" | "primaryWeak")[];
-        neutralWeak: ("neutral" | "neutralWeak" | "primary" | "primaryWeak")[];
+        neutral: ("primary" | "neutral" | "neutralWeak" | "primaryWeak")[];
+        neutralWeak: ("primary" | "neutral" | "neutralWeak" | "primaryWeak")[];
         primary: ("primary" | "primaryWeak")[];
         success: ("success" | "successWeak")[];
         fail: ("fail" | "failWeak")[];

package/dist/lib/js/components/Tile/Tile.vue.d.ts

@@ -126,11 +126,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     color: import('./Tile.consts').TileColor;
-    eyebrowText: string;
-    isEyebrowTextUppercase: boolean;
     state: import('./Tile.consts').TileState;
     iconLeft: Record<string, any>;
     iconRight: Record<string, any>;
+    eyebrowText: string;
+    isEyebrowTextUppercase: boolean;
     interactive: boolean;
     additionalText: string;
     eyebrowEllipsis: boolean;

package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts

@@ -433,10 +433,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     label: string;
     color: ToggleButtonColor;
     radius: ToggleButtonRadius;
-    isInteractive: boolean;
     state: ToggleButtonState;
     iconLeft: any;
     iconRight: any;
+    isInteractive: boolean;
     isLabelUppercase: boolean;
     isSelected: boolean;
     hasSmallHorizontalPadding: boolean;

package/dist/lib/js/index.d.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/lib/js/components/Callout/Callout.consts.ts

@@ -0,0 +1,25 @@
+import { Value } from '../../utils/type.utils';
+import { FEATURE_ICON_COLOR, FeatureIconColor } from '../Icons/FeatureIcon/FeatureIcon.consts';
+import { TEXT_GROUP_MAIN_TEXT_COLORS, TextGroupMainTextColor } from '../TextGroup/TextGroup.consts';
+
+export const CALLOUT_LAYOUTS = {
+	VERTICAL: 'vertical',
+	HORIZONTAL: 'horizontal',
+} as const;
+
+export type CalloutLayout = Value<typeof CALLOUT_LAYOUTS>;
+
+export const CALLOUT_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+	LARGE: 'large',
+} as const;
+
+export type CalloutSize = Value<typeof CALLOUT_SIZES>;
+
+// Aliased so the sets can never drift from the components they are forwarded to.
+export const CALLOUT_ICON_COLORS = FEATURE_ICON_COLOR;
+export type CalloutIconColor = FeatureIconColor;
+
+export const CALLOUT_MAIN_TEXT_COLORS = TEXT_GROUP_MAIN_TEXT_COLORS;
+export type CalloutMainTextColor = TextGroupMainTextColor;

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

@@ -0,0 +1,257 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ComponentProps } from 'vue-component-type-helpers';
+import { h } from 'vue';
+import Callout from './Callout.vue';
+import {
+	CALLOUT_ICON_COLORS,
+	CALLOUT_LAYOUTS,
+	CALLOUT_MAIN_TEXT_COLORS,
+	CALLOUT_SIZES,
+} from './Callout.consts';
+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 from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_RADIUSES, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button';
+import { ICONS } from '../Icons/Icon';
+
+type MountOptions = Omit<NonNullable<Parameters<typeof mount<typeof Callout>>[1]>, 'props'> & {
+	props?: Partial<ComponentProps<typeof Callout>>;
+};
+
+const mountCallout = (options: MountOptions = {}) =>
+	mount(Callout, {
+		...options,
+		props: { icon: ICONS.FA_COMMENT_DOTS, ...options.props },
+	});
+
+describe('Callout', () => {
+	it('renders', () => {
+		const wrapper = mountCallout();
+
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('renders the feature icon', () => {
+		const wrapper = mountCallout();
+
+		expect(wrapper.findComponent(DsFeatureIcon).exists()).toBe(true);
+		expect(wrapper.findComponent(DsFeatureIcon).props('icon')).toStrictEqual(
+			ICONS.FA_COMMENT_DOTS,
+		);
+	});
+
+	it('passes main and supporting text to the text group', () => {
+		const wrapper = mountCallout({
+			props: {
+				mainText: 'Main text',
+				supportingText: 'Supporting text',
+			},
+		});
+
+		expect(wrapper.find('.ds-callout__text').text()).toContain('Main text');
+		expect(wrapper.find('.ds-callout__text').text()).toContain('Supporting text');
+	});
+
+	describe('layout', () => {
+		it.each(Object.values(CALLOUT_LAYOUTS))('applies the layout class for "%s"', (layout) => {
+			const wrapper = mountCallout({ props: { layout } });
+
+			expect(wrapper.find('.ds-callout').classes()).toContain(`-ds-layout-${layout}`);
+		});
+
+		it('is vertical by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.find('.ds-callout').classes()).toContain('-ds-layout-vertical');
+		});
+
+		it.each([
+			[CALLOUT_LAYOUTS.VERTICAL, TEXT_GROUP_ALIGNS.CENTER],
+			[CALLOUT_LAYOUTS.HORIZONTAL, TEXT_GROUP_ALIGNS.LEFT],
+		])('aligns the text group for layout "%s"', (layout, expectedAlign) => {
+			const wrapper = mountCallout({ props: { layout } });
+
+			expect(wrapper.findComponent(DsTextGroup).props('align')).toBe(expectedAlign);
+		});
+	});
+
+	describe('size', () => {
+		it('is medium by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsFeatureIcon).props('size')).toBe(
+				FEATURE_ICON_SIZES.MEDIUM,
+			);
+			expect(wrapper.findComponent(DsTextGroup).props('size')).toBe(TEXT_GROUP_SIZES.LARGE);
+		});
+
+		it.each([
+			[CALLOUT_SIZES.SMALL, FEATURE_ICON_SIZES.MEDIUM, TEXT_GROUP_SIZES.MEDIUM],
+			[CALLOUT_SIZES.MEDIUM, FEATURE_ICON_SIZES.MEDIUM, TEXT_GROUP_SIZES.LARGE],
+			[CALLOUT_SIZES.LARGE, FEATURE_ICON_SIZES.LARGE, TEXT_GROUP_SIZES.LARGE],
+		])(
+			'maps size "%s" to feature icon "%s" and text group "%s"',
+			(size, featureIconSize, textGroupSize) => {
+				const wrapper = mountCallout({ props: { size } });
+
+				expect(wrapper.findComponent(DsFeatureIcon).props('size')).toBe(featureIconSize);
+				expect(wrapper.findComponent(DsTextGroup).props('size')).toBe(textGroupSize);
+			},
+		);
+	});
+
+	describe('icon color', () => {
+		it.each(Object.values(CALLOUT_ICON_COLORS))(
+			'passes icon color "%s" to the feature icon',
+			(iconColor) => {
+				const wrapper = mountCallout({ props: { iconColor } });
+
+				expect(wrapper.findComponent(DsFeatureIcon).props('color')).toBe(iconColor);
+			},
+		);
+
+		it('is primary by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsFeatureIcon).props('color')).toBe(
+				CALLOUT_ICON_COLORS.PRIMARY,
+			);
+		});
+	});
+
+	describe('main text color', () => {
+		it.each(Object.values(CALLOUT_MAIN_TEXT_COLORS))(
+			'passes main text color "%s" to the text group',
+			(mainTextColor) => {
+				const wrapper = mountCallout({ props: { mainTextColor } });
+
+				expect(wrapper.findComponent(DsTextGroup).props('mainTextColor')).toBe(
+					mainTextColor,
+				);
+			},
+		);
+
+		it('is primary by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsTextGroup).props('mainTextColor')).toBe(
+				CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+			);
+		});
+	});
+
+	describe('eyebrow text', () => {
+		it('does not render the eyebrow by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.findComponent(DsTextGroup).props('eyebrowText')).toBe(null);
+			expect(wrapper.find('.ds-textGroup__eyebrow').exists()).toBe(false);
+		});
+
+		it('renders the eyebrow when eyebrowText is provided', () => {
+			const wrapper = mountCallout({ props: { eyebrowText: 'Eyebrow text' } });
+
+			expect(wrapper.find('.ds-textGroup__eyebrow').text()).toBe('Eyebrow text');
+		});
+
+		it('never uppercases the eyebrow', () => {
+			const wrapper = mountCallout({ props: { eyebrowText: 'Eyebrow text' } });
+
+			expect(wrapper.findComponent(DsTextGroup).props('isEyebrowTextUppercase')).toBe(false);
+			expect(wrapper.find('.ds-textGroup__eyebrow').classes()).not.toContain('-ds-uppercase');
+		});
+	});
+
+	describe('actions', () => {
+		it('renders a default primary button with the button label and icon', () => {
+			const wrapper = mountCallout({
+				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);
+			expect(button.props('color')).toBe(BUTTON_COLORS.PRIMARY);
+			expect(button.props('type')).toBe(BUTTON_TYPES.FILLED);
+			expect(button.props('size')).toBe(BUTTON_SIZES.SMALL);
+			expect(button.props('radius')).toBe(BUTTON_RADIUSES.ROUNDED);
+		});
+
+		it.each(Object.values(CALLOUT_ICON_COLORS))(
+			'keeps the filled primary button for icon color "%s"',
+			(iconColor) => {
+				const wrapper = mountCallout({ props: { buttonLabel: 'Confirm', iconColor } });
+
+				const button = wrapper.findComponent(DsButton);
+				expect(button.props('color')).toBe(BUTTON_COLORS.PRIMARY);
+				expect(button.props('type')).toBe(BUTTON_TYPES.FILLED);
+			},
+		);
+
+		it('emits button-clicked when the default button is clicked', async () => {
+			const wrapper = mountCallout({
+				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 = mountCallout({
+				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('does not render the actions block when there is no button label and no slot', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.find('.ds-callout__actions').exists()).toBe(false);
+			expect(wrapper.findComponent(DsButton).exists()).toBe(false);
+		});
+
+		it('renders the actions block when only the slot is provided', () => {
+			const wrapper = mountCallout({
+				slots: {
+					actions: () => h('span', { class: 'custom-action' }, 'Custom action'),
+				},
+			});
+
+			expect(wrapper.find('.ds-callout__actions').exists()).toBe(true);
+		});
+
+		it('adds the stacked actions modifier on the root when isActionVertical is set', () => {
+			const wrapper = mountCallout({
+				props: {
+					isActionVertical: true,
+				},
+			});
+
+			expect(wrapper.find('.ds-callout').classes()).toContain('-ds-actions-vertical');
+		});
+
+		it('does not add the stacked actions modifier by default', () => {
+			const wrapper = mountCallout();
+
+			expect(wrapper.find('.ds-callout').classes()).not.toContain('-ds-actions-vertical');
+		});
+	});
+});

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

@@ -0,0 +1,209 @@
+import { ComponentProps } from 'vue-component-type-helpers';
+import { Meta, StoryObj } from '@storybook/vue3';
+import { action } from '@storybook/addon-actions';
+
+import Callout from './Callout.vue';
+import {
+	CALLOUT_ICON_COLORS,
+	CALLOUT_LAYOUTS,
+	CALLOUT_MAIN_TEXT_COLORS,
+	CALLOUT_SIZES,
+} from './Callout.consts';
+import DsButton from '../Buttons/Button';
+import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button/Button.consts';
+import { ICONS } from '../Icons/Icon';
+
+type CalloutProps = ComponentProps<typeof Callout>;
+
+const VERTICAL_FIGMA_URL =
+	'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=17359-1009&m=dev';
+const HORIZONTAL_FIGMA_URL =
+	'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=17760-416&m=dev';
+
+/**
+ * Clearing a text control yields `''`, which TextGroup renders as a `&nbsp;` placeholder row.
+ * Mapping it to `null` removes the row instead, which is what an empty control should mean.
+ */
+const emptyToNull = (value?: string | null) => value || null;
+
+const mapArgs = (args: CalloutProps) => ({
+	...args,
+	icon: ICONS[args.icon],
+	buttonIcon: ICONS[args.buttonIcon],
+	eyebrowText: emptyToNull(args.eyebrowText),
+	mainText: emptyToNull(args.mainText),
+	supportingText: emptyToNull(args.supportingText),
+	buttonLabel: emptyToNull(args.buttonLabel),
+});
+
+const meta: Meta<typeof Callout> = {
+	title: 'Components/Callout',
+	component: Callout,
+	render: (args: CalloutProps) => ({
+		components: { Callout },
+		setup() {
+			return { onButtonClicked: action('button-clicked') };
+		},
+		computed: {
+			props() {
+				return mapArgs(args);
+			},
+		},
+		template: `<div style="max-width: 500px;"><Callout v-bind="props" @button-clicked="onButtonClicked" /></div>`,
+	}),
+	argTypes: {
+		layout: {
+			control: 'select',
+			options: Object.values(CALLOUT_LAYOUTS),
+		},
+		size: {
+			control: 'select',
+			options: Object.values(CALLOUT_SIZES),
+		},
+		iconColor: {
+			control: 'select',
+			options: Object.values(CALLOUT_ICON_COLORS),
+		},
+		mainTextColor: {
+			control: 'select',
+			options: Object.values(CALLOUT_MAIN_TEXT_COLORS),
+		},
+		icon: {
+			control: 'select',
+			options: Object.keys(ICONS),
+		},
+		buttonIcon: {
+			control: 'select',
+			options: [null, ...Object.keys(ICONS)],
+		},
+		eyebrowText: { control: 'text' },
+		mainText: { control: 'text' },
+		supportingText: { control: 'text' },
+		buttonLabel: { control: 'text' },
+		isActionVertical: { control: 'boolean' },
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof Callout>;
+
+export const Interactive: Story = {
+	args: {
+		layout: CALLOUT_LAYOUTS.VERTICAL,
+		size: CALLOUT_SIZES.MEDIUM,
+		iconColor: CALLOUT_ICON_COLORS.PRIMARY,
+		mainTextColor: CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+		icon: 'FA_COMMENT_DOTS' as unknown as CalloutProps['icon'],
+		eyebrowText: '',
+		mainText: 'Main text tutaj sobie będzie',
+		supportingText: 'Supporting text tutaj będzie',
+		buttonLabel: 'Button label',
+		buttonIcon: null,
+		isActionVertical: false,
+	},
+};
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: VERTICAL_FIGMA_URL,
+	},
+};
+
+export const WithActionsSlot: Story = {
+	render: (args: CalloutProps) => ({
+		components: { Callout, DsButton },
+		setup() {
+			return { args, ICONS, BUTTON_COLORS, BUTTON_SIZES, BUTTON_TYPES };
+		},
+		computed: {
+			props() {
+				return mapArgs(args);
+			},
+		},
+		template: `
+			<div style="max-width: 500px;">
+				<Callout v-bind="props">
+					<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>
+				</Callout>
+			</div>`,
+	}),
+	args: {
+		layout: CALLOUT_LAYOUTS.VERTICAL,
+		size: CALLOUT_SIZES.MEDIUM,
+		iconColor: CALLOUT_ICON_COLORS.PRIMARY,
+		mainTextColor: CALLOUT_MAIN_TEXT_COLORS.PRIMARY,
+		icon: 'FA_COMMENT_DOTS' as unknown as CalloutProps['icon'],
+		mainText: 'Main text tutaj sobie będzie',
+		supportingText: 'Supporting text tutaj będzie',
+		isActionVertical: false,
+	},
+};
+
+WithActionsSlot.parameters = {
+	design: {
+		type: 'figma',
+		url: VERTICAL_FIGMA_URL,
+	},
+};
+
+/**
+ * The full variant matrix, laid out for side-by-side comparison with the Figma component set
+ * (node 17696:2260).
+ */
+export const Variants: Story = {
+	render: () => ({
+		components: { Callout },
+		setup() {
+			return {
+				ICONS,
+				CALLOUT_LAYOUTS,
+				CALLOUT_SIZES,
+				sizes: Object.values(CALLOUT_SIZES),
+			};
+		},
+		template: `
+			<div style="display: flex; flex-direction: column; gap: 48px;">
+				<section v-for="layout in [CALLOUT_LAYOUTS.VERTICAL, CALLOUT_LAYOUTS.HORIZONTAL]" :key="layout">
+					<h3 style="margin-bottom: 16px;">{{ layout }}</h3>
+					<div style="display: flex; flex-direction: column; gap: 32px; max-width: 500px;">
+						<Callout
+							v-for="size in sizes"
+							:key="size"
+							:layout="layout"
+							:size="size"
+							:icon="ICONS.FA_COMMENT_DOTS"
+							:eyebrow-text="size === CALLOUT_SIZES.SMALL ? 'Eyebrow text' : null"
+							:main-text="'Main text tutaj sobie będzie (' + size + ')'"
+							supporting-text="Supporting text tutaj będzie"
+							button-label="Button small"
+						/>
+						<Callout
+							:layout="layout"
+							:icon="ICONS.FA_COMMENT_DOTS"
+							main-text="Main text tutaj sobie będzie (stacked actions)"
+							supporting-text="Supporting text tutaj będzie"
+							button-label="Button small"
+							is-action-vertical
+						/>
+						<Callout
+							:layout="layout"
+							:icon="ICONS.FA_COMMENT_DOTS"
+							main-text="Main text tutaj sobie będzie (no actions)"
+							supporting-text="Supporting text tutaj będzie"
+						/>
+					</div>
+				</section>
+			</div>`,
+	}),
+};
+
+Variants.parameters = {
+	design: {
+		type: 'figma',
+		url: HORIZONTAL_FIGMA_URL,
+	},
+};