feat(Title): add title font customization

gravity-ui · Dec 28, 2024 · f79d0cf · f79d0cf
1 parent 11dbeb0
commit f79d0cf
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 15 deletions.
diff --git 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 {FontDataProps} 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'];
+    } & FontDataProps &
+        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
@@ -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
@@ -0,0 +1,30 @@
+import {FontParams, PluginTitleSize} from './types';
+
+export const PLUGIN_ROOT_ATTR_NAME = 'data-plugin-root-el';
+
+export const TITLE_DEFAULT_SIZES: Record<PluginTitleSize, FontParams> = {
+    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
@@ -1,2 +1,4 @@
 export * from './Title';
 export {default as pluginTitle} from './Title';
+export * from './types';
+export * from './constants';
diff --git a/src/plugins/Title/types.ts b/src/plugins/Title/types.ts
@@ -0,0 +1,16 @@
+export type PluginTitleSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+
+export interface FontParams {
+    fontSize: number;
+    lineHeight: number;
+}
+
+interface FontSizeProps {
+    size: PluginTitleSize;
+}
+
+type UndefinedProps<T extends Object> = Partial<Record<keyof T, undefined>>;
+
+export type FontDataProps =
+    | (FontSizeProps & UndefinedProps<FontParams>)
+    | (UndefinedProps<FontSizeProps> & FontParams);