chore(Title): update title stories and description

src/components/Title/README.md

@@ -1,21 +1,79 @@
+# Title
+
 `type: "title"`
 
-`title:`
+The **Title** component is used to display a section heading, optionally with a subtitle (description) and configurable styles, alignment, and link behavior.
+
+---
+
+## 🔧 Props
+
+### `title`
+
+Defines the main title content.  
+It can be either a simple string or an object with the following structure:
+
+| Property      | Type                                       | Default   | Description                                                                                                                          |
+| ------------- | ------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `text`        | `string`                                   | —         | Main title text.                                                                                                                     |
+| `textSize`    | `'s'` \| `'m'` \| `'l'` \|`'xs'` \| `'sm'` | `'m'`     | Title font size.                                                                                                                     |
+| `url`         | `string`                                   | —         | Optional URL. When set, the title becomes a clickable link, and an arrow is automatically displayed at the end.                      |
+| `resetMargin` | `boolean`                                  | `true`    | When `true`, removes automatic top margin. When `false`, the top margin depends on the `textSize` (see [_Margins_](#margins) below). |
+| `anchor`      | `string`                                   | —         | Optional anchor ID for navigation.                                                                                                   |
+| `justify`     | `'start'` \| `'center'` \| `'end'`         | `'start'` | Text alignment.                                                                                                                      |
+| `urlTitle`    | `string`                                   | —         | Accessibility title attribute for the link.                                                                                          |
+| `onClick`     | `() => void`                               | —         | Optional click handler.                                                                                                              |
+| `custom`      | `string \| React.ReactNode`                | —         | Custom React node or text appended to the title.                                                                                     |
+| `navTitle`    | `string`                                   | —         | Optional navigation title for use in table of contents.                                                                              |
+
+---
+
+### `subtitle`
+
+`subtitle?: string`
+
+Optional subtitle (description) text.  
+Supports **YFM (Yandex Flavored Markdown)** formatting.
+
+---
+
+### `className`
+
+`className?: string`
+
+Optional CSS class name for the container.
+
+---
+
+### `colSizes`
 
-- `text: string` - Title text
+`colSizes?: GridColumnSizesType`
 
-- `textSize?: 's' | 'm' | 'l'` — Title font size
+Grid column size configuration for responsive layouts.  
+Default: `{ all: 12, sm: 8 }`.
 
-- `url?: string` — URL for a redirect on clicking the title, an arrow is automatically added at the end.
+---
 
-- `resetMargin?: boolean` - default `true`. Without this property `margin-top` will be proportional to `textSize` (see section _Margins_ below)
+### `id`
 
-`description: string` - text (with YFM support)
+`id?: string`
 
-**Margins for title without reset:**
+Optional HTML `id` attribute for the title container.
 
-`textSize s - top: m`
+---
 
-`textSize m - top: l`
+## 🧩 Example
 
-`textSize l - top: xl`
+```tsx
+<Title
+  title={{
+    text: 'Section Heading',
+    textSize: 'l',
+    url: 'https://example.com',
+    urlTitle: 'Go to example',
+    resetMargin: false,
+  }}
+  subtitle="**This is** a subtitle with [YFM](https://example.com) support."
+  colSizes={{all: 12, sm: 6}}
+/>
+```

src/components/Title/__stories__/Title.stories.tsx

@@ -7,15 +7,25 @@ import Title, {TitleProps} from '../Title';
 import data from './data.json';
 
 export default {
-    component: Title,
     title: 'Components/Title',
-} as Meta;
+    component: Title,
+    parameters: {
+        layout: 'centered',
+        controls: {expanded: true},
+    },
+    argTypes: {
+        title: {control: 'object'},
+        subtitle: {control: 'text'},
+        className: {control: 'text'},
+        id: {control: 'text'},
+        colSizes: {control: 'object'},
+    },
+} as Meta<TitleProps & ClassNameProps>;
 
 const DefaultTemplate: StoryFn<TitleProps & ClassNameProps> = (args) => <Title {...args} />;
 
 const SizesTemplate: StoryFn<TitleProps & ClassNameProps> = (args) => {
     const titleItemObjectProps = typeof args.title === 'object' ? args.title : {};
-
     return (
         <div>
             {Object.entries(data.sizes).map(([size, props]) => (
@@ -46,10 +56,9 @@ export const CustomTitle = DefaultTemplate.bind({});
 export const Sizes = SizesTemplate.bind({});
 export const SizesWithLinks = SizesTemplate.bind({});
 export const TitleWithoutDescription = SizesTemplate.bind({});
+export const WithCustomColSizes = DefaultTemplate.bind({});
 
-Default.args = {
-    ...DefaultArgs,
-} as TitleProps;
+Default.args = {...DefaultArgs} as TitleProps;
 TitleLink.args = {
     ...DefaultArgs,
     title: data.titleLink.content.title,
@@ -58,13 +67,15 @@ CustomTitle.args = {
     ...DefaultArgs,
     title: data.customTitle.content.title,
 } as TitleProps;
-Sizes.args = {
-    ...DefaultArgs,
-} as TitleProps;
+Sizes.args = {...DefaultArgs} as TitleProps;
 SizesWithLinks.args = {
     ...DefaultArgs,
     title: data.titleLink.content.title,
 } as TitleProps;
 TitleWithoutDescription.args = {
     title: data.default.content.title,
 } as TitleProps;
+WithCustomColSizes.args = {
+    ...DefaultArgs,
+    colSizes: {all: 6, sm: 6, md: 4},
+};

src/components/Title/__stories__/data.json

@@ -10,7 +10,7 @@
       "title": {
         "text": "Lorem ipsum",
         "url": "https://example.com",
-        "custom": "Some react node",
+        "custom": "⭐️",
         "urlTitle": "Example website. Opens in a new window"
       }
     }

src/components/Title/__tests__/Title.visual.test.tsx

@@ -0,0 +1,59 @@
+import {test} from '../../../../playwright/core/index';
+
+import {
+    CustomTitle,
+    Default,
+    Sizes,
+    SizesWithLinks,
+    TitleLink,
+    TitleWithoutDescription,
+    WithCustomColSizes,
+} from './helpers';
+
+test.describe('Title', () => {
+    test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Default />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <TitleLink>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<TitleLink />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <CustomTitle>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<CustomTitle />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <Sizes>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Sizes />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <SizesWithLinks>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<SizesWithLinks />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <TitleWithoutDescription>', async ({
+        mount,
+        expectScreenshot,
+        defaultDelay,
+    }) => {
+        await mount(<TitleWithoutDescription />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <WithCustomColSizes>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithCustomColSizes />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+});

src/components/Title/__tests__/helpers.ts

@@ -0,0 +1,15 @@
+import {composeStories} from '@storybook/react';
+
+import * as TitleStories from '../__stories__/Title.stories';
+
+const composed = composeStories(TitleStories) as Record<string, React.ComponentType<any>>;
+
+export const {
+    CustomTitle,
+    Default,
+    Sizes,
+    SizesWithLinks,
+    TitleLink,
+    TitleWithoutDescription,
+    WithCustomColSizes,
+} = composed;