feat(Logo): export logo components (#190)

Co-authored-by: kseniyakuzina <kseniyakuzina@yandex-team.ru>

README.md

@@ -27,6 +27,8 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16.
 - PageLayout
 - PageLayoutAside
 - AsideFallback
+- Logo
+- MobileLogo
 
 ## Optimization
 

src/components/AsideHeader/components/Header.tsx

@@ -3,7 +3,7 @@ import React, {useCallback} from 'react';
 import {Icon} from '@gravity-ui/uikit';
 
 import {CompositeBar} from '../../CompositeBar/CompositeBar';
-import {Logo} from '../../Logo/Logo';
+import {Logo} from '../../Logo';
 import {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';
 import {SubheaderMenuItem} from '../../types';
 import {useAsideHeaderInnerContext} from '../AsideHeaderContext';

src/components/Logo/__stories__/Logo.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {Logo} from '..';
+import type {LogoProps} from '../../types';
+
+import logoIcon from '../../../../.storybook/assets/logo.svg';
+
+export default {
+    title: 'components/Logo',
+    component: Logo,
+    args: {
+        text: 'Service',
+        icon: logoIcon,
+        href: '#',
+        onClick: () => alert('click on logo'),
+    },
+} as Meta<typeof Logo>;
+
+const ShowcaseTemplate: StoryFn<LogoProps> = (args) => <Logo {...args} />;
+export const Showcase = ShowcaseTemplate.bind({});

src/components/Logo/index.ts

@@ -0,0 +1 @@
+export * from './Logo';

src/components/MobileHeader/MobileHeader.tsx

@@ -3,12 +3,12 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useForwardRef} from '../../hooks/useForwardRef';
 import {Content, RenderContentType} from '../Content';
 import {Drawer, DrawerItem, DrawerItemProps} from '../Drawer/Drawer';
+import {MobileLogo} from '../MobileLogo';
 import {LogoProps} from '../types';
 import {block} from '../utils/cn';
 
 import {Burger} from './Burger/Burger';
 import {BurgerMenu, BurgerMenuInnerProps} from './BurgerMenu/BurgerMenu';
-import {Logo} from './Logo/Logo';
 import {
     BURGER_PANEL_ITEM_ID,
     EVENT_NAMES,
@@ -212,7 +212,7 @@ export const MobileHeader = React.forwardRef<HTMLDivElement, MobileHeaderProps>(
                         closeTitle={burgerCloseTitle}
                         openTitle={burgerOpenTitle}
                     />
-                    <Logo {...logo} compact={compact} onClick={onLogoClick} />
+                    <MobileLogo {...logo} compact={compact} onClick={onLogoClick} />
 
                     <div className={b('side-item')}>{sideItemRenderContent?.({size})}</div>
                 </header>

src/components/MobileHeader/Logo/Logo.scss → src/components/MobileLogo/MobileLogo.scss

@@ -1,8 +1,8 @@
-@use '../../variables';
+@use '../variables';
 
-@import '../../../../styles/mixins';
+@import '../../../styles/mixins';
 
-$block: '.#{variables.$ns}mobile-header-logo';
+$block: '.#{variables.$ns}mobile-logo';
 
 #{$block} {
     display: flex;

src/components/MobileHeader/Logo/Logo.tsx → src/components/MobileLogo/MobileLogo.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 
 import {Icon} from '@gravity-ui/uikit';
 
-import {LogoProps} from '../../types';
-import {block} from '../../utils/cn';
+import {LogoProps} from '../types';
+import {block} from '../utils/cn';
 
-import './Logo.scss';
+import './MobileLogo.scss';
 
-const b = block('mobile-header-logo');
+const b = block('mobile-logo');
 
-interface LogoInnerProps extends LogoProps {
+export interface MobileLogoProps extends LogoProps {
     compact: boolean;
 }
 
-export const Logo: React.FC<LogoInnerProps> = ({
+export const MobileLogo: React.FC<MobileLogoProps> = ({
     text,
     compact,
     icon,

src/components/MobileLogo/__stories__/MobileLogo.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type {Meta, StoryFn} from '@storybook/react';
+
+import {MobileLogo} from '..';
+import type {MobileLogoProps} from '..';
+
+import logoIcon from '../../../../.storybook/assets/logo.svg';
+
+export default {
+    title: 'components/MobileLogo',
+    component: MobileLogo,
+    args: {
+        text: 'Service',
+        icon: logoIcon,
+        href: '#',
+        onClick: () => alert('click on logo'),
+    },
+} as Meta<typeof MobileLogo>;
+
+const ShowcaseTemplate: StoryFn<MobileLogoProps> = (args) => <MobileLogo {...args} />;
+export const Showcase = ShowcaseTemplate.bind({});

src/components/MobileLogo/index.ts

@@ -0,0 +1 @@
+export * from './MobileLogo';

src/components/index.ts

@@ -11,4 +11,6 @@ export * from './Title';
 export * from './HotkeysPanel';
 export * from './Settings';
 export * from './MobileHeader';
+export * from './Logo';
+export * from './MobileLogo';
 export * from './types';