From d4208c40ff31e20eaf5d18b56b4aee1f7c18be4d Mon Sep 17 00:00:00 2001
From: Daria Larionova <darialari@yandex-team.ru>
Date: Tue, 17 Dec 2024 13:59:07 +0300
Subject: [PATCH] feat(PluginTitle): add xl size

---
 src/plugins/Title/Title.scss                  |  5 ++++
 src/plugins/Title/Title.tsx                   |  4 ++-
 .../Title/__stories__/Title.stories.tsx       | 29 +++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/plugins/Title/__stories__/Title.stories.tsx

diff --git a/src/plugins/Title/Title.scss b/src/plugins/Title/Title.scss
index 4d4ae08..2f2895e 100644
--- a/src/plugins/Title/Title.scss
+++ b/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;
diff --git a/src/plugins/Title/Title.tsx b/src/plugins/Title/Title.tsx
index 118993d..f30fbef 100644
--- a/src/plugins/Title/Title.tsx
+++ b/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'];
diff --git a/src/plugins/Title/__stories__/Title.stories.tsx b/src/plugins/Title/__stories__/Title.stories.tsx
new file mode 100644
index 0000000..a95a720
--- /dev/null
+++ b/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>
+    ),
+};