feat(PluginTitle): add xl size (#235)

src/plugins/Title/Title.scss

@@ -6,6 +6,11 @@
     padding-bottom: 5px;
     padding-right: 5px;
 
+    &_size_xl {
+        font-size: 32px;
+        line-height: 40px;
+    }
+
     &_size_l {
         font-size: 24px;
         line-height: 28px;

src/plugins/Title/Title.tsx

@@ -6,9 +6,11 @@ import {PLUGIN_ROOT_ATTR_NAME} from '../constants';
 
 import './Title.scss';
 
+export type PluginTitleSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+
 export interface PluginTitleProps extends PluginWidgetProps {
     data: {
-        size: 'l' | 'm' | 's' | 'xs';
+        size: PluginTitleSize;
         text: string;
         showInTOC: boolean;
     } & PluginWidgetProps['data'];

src/plugins/Title/__stories__/Title.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {Flex} from '@gravity-ui/uikit';
+import {Meta, StoryObj} from '@storybook/react';
+
+import {PluginTitle, PluginTitleSize} from '../Title';
+
+export default {
+    title: 'Components/Title',
+    component: PluginTitle,
+} as Meta;
+
+type Story = StoryObj<typeof PluginTitle>;
+
+const sizes: PluginTitleSize[] = ['xs', 's', 'm', 'l', 'xl'];
+
+export const Size: Story = {
+    render: ({data: _, ...args}) => (
+        <Flex direction="column" gap={2}>
+            {sizes.map((size) => (
+                <PluginTitle
+                    key={size}
+                    data={{size, text: `Title size=${size}`, showInTOC: true}}
+                    {...args}
+                />
+            ))}
+        </Flex>
+    ),
+};