fix: raise up title item arrow to 1 px (#668)

raise up title item arrow to 1 px
gravity-ui · Nov 7, 2023 · 51f6215 · 51f6215
1 parent ad0d3b4
commit 51f6215
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 18 deletions.
diff --git a/src/components/Title/TitleItem.scss b/src/components/Title/TitleItem.scss
@@ -27,14 +27,14 @@ $block: '.#{$ns}title-item';
     }
 
     &__arrow {
-        margin-top: 10px;
+        margin-top: 9px;
 
         &_size_xs {
-            margin-top: 7px;
+            margin-top: 6px;
         }
 
         &_size_s {
-            margin-top: 5px;
+            margin-top: 4px;
         }
     }
 

diff --git a/src/components/Title/__stories__/Title.stories.tsx b/src/components/Title/__stories__/Title.stories.tsx
@@ -15,22 +15,58 @@ export default {
 
 const DefaultTemplate: StoryFn<TitleProps & ClassNameProps> = (args) => <Title {...args} />;
 
-const SizesTemplate: StoryFn<TitleProps & ClassNameProps> = (args) => (
-    <div>
-        <div style={{paddingBottom: '64px'}}>
-            <Title {...args} title={data.sizes.l as TitleItemProps} />
-        </div>
-        <div style={{paddingBottom: '64px'}}>
-            <Title {...args} title={data.sizes.m as TitleItemProps} />
-        </div>
-        <div style={{paddingBottom: '64px'}}>
-            <Title {...args} title={data.sizes.s as TitleItemProps} />
-        </div>
-        <div style={{paddingBottom: '64px'}}>
-            <Title {...args} title={data.sizes.xs as TitleItemProps} />
+const SizesTemplate: StoryFn<TitleProps & ClassNameProps> = (args) => {
+    const titleItemObjectProps = typeof args.title === 'object' ? args.title : {};
+
+    return (
+        <div>
+            <div style={{paddingBottom: '64px'}}>
+                <Title
+                    {...args}
+                    title={
+                        {
+                            ...data.sizes.l,
+                            ...titleItemObjectProps,
+                        } as TitleItemProps
+                    }
+                />
+            </div>
+            <div style={{paddingBottom: '64px'}}>
+                <Title
+                    {...args}
+                    title={
+                        {
+                            ...data.sizes.m,
+                            ...titleItemObjectProps,
+                        } as TitleItemProps
+                    }
+                />
+            </div>
+            <div style={{paddingBottom: '64px'}}>
+                <Title
+                    {...args}
+                    title={
+                        {
+                            ...data.sizes.s,
+                            ...titleItemObjectProps,
+                        } as TitleItemProps
+                    }
+                />
+            </div>
+            <div style={{paddingBottom: '64px'}}>
+                <Title
+                    {...args}
+                    title={
+                        {
+                            ...data.sizes.xs,
+                            ...titleItemObjectProps,
+                        } as TitleItemProps
+                    }
+                />
+            </div>
         </div>
-    </div>
-);
+    );
+};
 
 const DefaultArgs = {
     ...data.default.content,
@@ -41,6 +77,7 @@ export const Default = DefaultTemplate.bind({});
 export const TitleLink = DefaultTemplate.bind({});
 export const CustomTitle = DefaultTemplate.bind({});
 export const Sizes = SizesTemplate.bind({});
+export const SizesWithLinks = SizesTemplate.bind({});
 export const TitleWithoutDescription = SizesTemplate.bind({});
 
 Default.args = {
@@ -57,6 +94,10 @@ CustomTitle.args = {
 Sizes.args = {
     ...DefaultArgs,
 } as TitleProps;
+SizesWithLinks.args = {
+    ...DefaultArgs,
+    title: data.titleLink.content.title,
+} as TitleProps;
 TitleWithoutDescription.args = {
     title: data.default.content.title,
 } as TitleProps;