From aa56b330933ed4b2fe39e2141246ba56decce2de Mon Sep 17 00:00:00 2001
From: Daria Larionova <darialari@yandex-team.ru>
Date: Sat, 28 Dec 2024 17:59:30 +0300
Subject: [PATCH] feat(Title): add title font customization

---
 src/plugins/Title/Title.tsx                   | 34 +++++++++++++------
 .../Title/__stories__/Title.stories.tsx       | 23 ++++++++++---
 src/plugins/Title/constants.ts                | 24 +++++++++++++
 src/plugins/Title/index.ts                    |  2 ++
 src/plugins/Title/types.ts                    | 16 +++++++++
 5 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 src/plugins/Title/constants.ts
 create mode 100644 src/plugins/Title/types.ts

diff --git a/src/plugins/Title/Title.tsx b/src/plugins/Title/Title.tsx
index f30fbef..f1797e1 100644
--- a/src/plugins/Title/Title.tsx
+++ b/src/plugins/Title/Title.tsx
@@ -4,33 +4,47 @@ import {Plugin, PluginWidgetProps} from '../../typings';
 import {cn} from '../../utils/cn';
 import {PLUGIN_ROOT_ATTR_NAME} from '../constants';
 
-import './Title.scss';
+import type {TitleFontDataProps} from './types';
 
-export type PluginTitleSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+import './Title.scss';
 
 export interface PluginTitleProps extends PluginWidgetProps {
     data: {
-        size: PluginTitleSize;
         text: string;
         showInTOC: boolean;
-    } & PluginWidgetProps['data'];
+    } & TitleFontDataProps &
+        PluginWidgetProps['data'];
 }
 
 const b = cn('dashkit-plugin-title');
 
-export class PluginTitle extends React.Component<PluginTitleProps> {
-    render() {
-        const {data} = this.props;
+export const PluginTitle = React.forwardRef<HTMLDivElement, PluginTitleProps>(
+    function PluginTitle_(props, ref) {
+        const {data} = props;
         const text = data.text ? data.text : '';
         const size = data.size ? data.size : false;
+        const styles =
+            data.fontSize && data.lineHeight
+                ? {
+                      fontSize: `${data.fontSize}px`,
+                      lineHeight: `${data.lineHeight}px`,
+                  }
+                : {};
         const id = data.showInTOC && text ? encodeURIComponent(text) : undefined;
+
         return (
-            <div id={id} className={b({size})} {...{[PLUGIN_ROOT_ATTR_NAME]: 'title'}}>
+            <div
+                ref={ref}
+                id={id}
+                style={styles}
+                className={b({size})}
+                {...{[PLUGIN_ROOT_ATTR_NAME]: 'title'}}
+            >
                 {text}
             </div>
         );
-    }
-}
+    },
+);
 
 const plugin: Plugin<PluginTitleProps> = {
     type: 'title',
diff --git a/src/plugins/Title/__stories__/Title.stories.tsx b/src/plugins/Title/__stories__/Title.stories.tsx
index a95a720..f982275 100644
--- a/src/plugins/Title/__stories__/Title.stories.tsx
+++ b/src/plugins/Title/__stories__/Title.stories.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import {Flex} from '@gravity-ui/uikit';
+import {Card, Flex} from '@gravity-ui/uikit';
 import {Meta, StoryObj} from '@storybook/react';
 
-import {PluginTitle, PluginTitleSize} from '../Title';
+import {PluginTitle} from '../Title';
+import {PluginTitleSize} from '../types';
 
 export default {
     title: 'Components/Title',
@@ -18,12 +19,24 @@ export const Size: Story = {
     render: ({data: _, ...args}) => (
         <Flex direction="column" gap={2}>
             {sizes.map((size) => (
+                <Card key={size}>
+                    <PluginTitle
+                        data={{size, text: `Title size=${size}`, showInTOC: true}}
+                        {...args}
+                    />
+                </Card>
+            ))}
+            <Card key="custom">
                 <PluginTitle
-                    key={size}
-                    data={{size, text: `Title size=${size}`, showInTOC: true}}
+                    data={{
+                        fontSize: 40,
+                        lineHeight: 100,
+                        text: `Title with custom font params`,
+                        showInTOC: true,
+                    }}
                     {...args}
                 />
-            ))}
+            </Card>
         </Flex>
     ),
 };
diff --git a/src/plugins/Title/constants.ts b/src/plugins/Title/constants.ts
new file mode 100644
index 0000000..464760d
--- /dev/null
+++ b/src/plugins/Title/constants.ts
@@ -0,0 +1,24 @@
+import {PluginTitleSize, TitleFontParams} from './types';
+
+export const TITLE_DEFAULT_SIZES: Record<PluginTitleSize, TitleFontParams> = {
+    xl: {
+        fontSize: 32,
+        lineHeight: 40,
+    },
+    l: {
+        fontSize: 24,
+        lineHeight: 28,
+    },
+    m: {
+        fontSize: 20,
+        lineHeight: 24,
+    },
+    s: {
+        fontSize: 17,
+        lineHeight: 24,
+    },
+    xs: {
+        fontSize: 15,
+        lineHeight: 20,
+    },
+};
diff --git a/src/plugins/Title/index.ts b/src/plugins/Title/index.ts
index 4a0f03e..f89380c 100644
--- a/src/plugins/Title/index.ts
+++ b/src/plugins/Title/index.ts
@@ -1,2 +1,4 @@
 export * from './Title';
 export {default as pluginTitle} from './Title';
+export {PluginTitleSize, TitleFontParams} from './types';
+export {TITLE_DEFAULT_SIZES} from './constants';
diff --git a/src/plugins/Title/types.ts b/src/plugins/Title/types.ts
new file mode 100644
index 0000000..301a223
--- /dev/null
+++ b/src/plugins/Title/types.ts
@@ -0,0 +1,16 @@
+export type PluginTitleSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+
+export interface TitleFontParams {
+    fontSize: number;
+    lineHeight: number;
+}
+
+interface FontSizeProps {
+    size: PluginTitleSize;
+}
+
+type UndefinedProps<T extends Object> = Partial<Record<keyof T, undefined>>;
+
+export type TitleFontDataProps =
+    | (FontSizeProps & UndefinedProps<TitleFontParams>)
+    | (UndefinedProps<FontSizeProps> & TitleFontParams);