From f2dca3aa2d531da9ffd26d96d773e88e14fe9c72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D1=81=D0=B5=D0=BD=D0=B8=D1=8F?= <31247233+kseniya57@users.noreply.github.com> Date: Thu, 15 Feb 2024 07:11:03 +0300 Subject: [PATCH] feat(Logo): export logo components (#190) Co-authored-by: kseniyakuzina --- README.md | 2 ++ .../AsideHeader/components/Header.tsx | 2 +- .../Logo/__stories__/Logo.stories.tsx | 22 +++++++++++++++++++ src/components/Logo/index.ts | 1 + src/components/MobileHeader/MobileHeader.tsx | 4 ++-- .../Logo.scss => MobileLogo/MobileLogo.scss} | 6 ++--- .../Logo.tsx => MobileLogo/MobileLogo.tsx} | 12 +++++----- .../__stories__/MobileLogo.stories.tsx | 22 +++++++++++++++++++ src/components/MobileLogo/index.ts | 1 + src/components/index.ts | 2 ++ 10 files changed, 62 insertions(+), 12 deletions(-) create mode 100644 src/components/Logo/__stories__/Logo.stories.tsx create mode 100644 src/components/Logo/index.ts rename src/components/{MobileHeader/Logo/Logo.scss => MobileLogo/MobileLogo.scss} (81%) rename src/components/{MobileHeader/Logo/Logo.tsx => MobileLogo/MobileLogo.tsx} (86%) create mode 100644 src/components/MobileLogo/__stories__/MobileLogo.stories.tsx create mode 100644 src/components/MobileLogo/index.ts diff --git a/README.md b/README.md index e3b74b0..c56533c 100644 --- a/README.md +++ b/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 diff --git a/src/components/AsideHeader/components/Header.tsx b/src/components/AsideHeader/components/Header.tsx index c7431c1..787aadb 100644 --- a/src/components/AsideHeader/components/Header.tsx +++ b/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'; diff --git a/src/components/Logo/__stories__/Logo.stories.tsx b/src/components/Logo/__stories__/Logo.stories.tsx new file mode 100644 index 0000000..a892909 --- /dev/null +++ b/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; + +const ShowcaseTemplate: StoryFn = (args) => ; +export const Showcase = ShowcaseTemplate.bind({}); diff --git a/src/components/Logo/index.ts b/src/components/Logo/index.ts new file mode 100644 index 0000000..d97c695 --- /dev/null +++ b/src/components/Logo/index.ts @@ -0,0 +1 @@ +export * from './Logo'; diff --git a/src/components/MobileHeader/MobileHeader.tsx b/src/components/MobileHeader/MobileHeader.tsx index 31c26e0..85025d5 100644 --- a/src/components/MobileHeader/MobileHeader.tsx +++ b/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( closeTitle={burgerCloseTitle} openTitle={burgerOpenTitle} /> - +
{sideItemRenderContent?.({size})}
diff --git a/src/components/MobileHeader/Logo/Logo.scss b/src/components/MobileLogo/MobileLogo.scss similarity index 81% rename from src/components/MobileHeader/Logo/Logo.scss rename to src/components/MobileLogo/MobileLogo.scss index 2761856..2572715 100644 --- a/src/components/MobileHeader/Logo/Logo.scss +++ b/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; diff --git a/src/components/MobileHeader/Logo/Logo.tsx b/src/components/MobileLogo/MobileLogo.tsx similarity index 86% rename from src/components/MobileHeader/Logo/Logo.tsx rename to src/components/MobileLogo/MobileLogo.tsx index b2aac59..7bab9ef 100644 --- a/src/components/MobileHeader/Logo/Logo.tsx +++ b/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 = ({ +export const MobileLogo: React.FC = ({ text, compact, icon, diff --git a/src/components/MobileLogo/__stories__/MobileLogo.stories.tsx b/src/components/MobileLogo/__stories__/MobileLogo.stories.tsx new file mode 100644 index 0000000..bdcb057 --- /dev/null +++ b/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; + +const ShowcaseTemplate: StoryFn = (args) => ; +export const Showcase = ShowcaseTemplate.bind({}); diff --git a/src/components/MobileLogo/index.ts b/src/components/MobileLogo/index.ts new file mode 100644 index 0000000..73d711f --- /dev/null +++ b/src/components/MobileLogo/index.ts @@ -0,0 +1 @@ +export * from './MobileLogo'; diff --git a/src/components/index.ts b/src/components/index.ts index db57f1b..f02c9fe 100644 --- a/src/components/index.ts +++ b/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';