From 3a2697d74647e1481fbb4cd1c84f0559af2cf6e9 Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Sun, 3 Dec 2023 18:56:01 +0300 Subject: [PATCH] feat(plasma-new-hope): add header as separate components --- .../.storybook/public/images/320_320_9.jpg | Bin 0 -> 32285 bytes .../src/components/Header/Header.tokens.ts | 35 +++++ .../Header/HeaderContent/HeaderContent.tsx | 17 +++ .../Header/HeaderRoot/HeaderRoot.styles.ts | 49 +++++++ .../Header/HeaderRoot/HeaderRoot.tsx | 68 ++++++++++ .../Header/HeaderRoot/HeaderRoot.types.ts | 27 ++++ .../HeaderRoot/variations/_size/base.ts | 3 + .../HeaderRoot/variations/_size/tokens.json | 1 + .../src/components/Header/index.ts | 9 ++ .../ui/HeaderArrow/HeaderArrow.styles.ts | 10 ++ .../Header/ui/HeaderArrow/HeaderArrow.tsx | 60 ++++++++ .../ui/HeaderArrow/HeaderArrow.types.ts | 11 ++ .../ui/HeaderArrow/variations/_size/base.ts | 19 +++ .../HeaderArrow/variations/_size/tokens.json | 1 + .../ui/HeaderArrow/variations/_view/base.ts | 13 ++ .../HeaderArrow/variations/_view/tokens.json | 1 + .../Header/ui/HeaderLogo/HeaderLogo.styles.ts | 15 ++ .../Header/ui/HeaderLogo/HeaderLogo.tsx | 47 +++++++ .../ui/HeaderLogo/variations/_size/base.ts | 15 ++ .../HeaderLogo/variations/_size/tokens.json | 1 + .../Header/ui/HeaderTitle/HeaderTitle.tsx | 27 ++++ .../HeaderTitleWrapper.styles.ts | 68 ++++++++++ .../HeaderTitleWrapper/HeaderTitleWrapper.tsx | 57 ++++++++ .../HeaderTitleWrapper.types.ts | 10 ++ .../variations/_size/base.ts | 3 + .../variations/_size/tokens.json | 8 ++ .../variations/_view/base.ts | 11 ++ .../variations/_view/tokens.json | 8 ++ .../src/components/Header/ui/index.ts | 10 ++ .../src/components/Image/Image.styles.ts | 48 +++++++ .../src/components/Image/Image.tsx | 37 +++++ .../src/components/Image/Image.types.ts | 22 +++ .../src/components/Image/index.ts | 2 + .../_Icon/Icon.assets/ChevronLeft.tsx | 14 ++ .../src/components/_Icon/Icon.assets/Mic.tsx | 14 ++ .../src/components/_Icon/IconChevronLeft.tsx | 16 +++ .../src/components/_Icon/IconMic.tsx | 8 ++ .../src/components/_Icon/index.tsx | 2 + packages/plasma-new-hope/src/engines/types.ts | 2 +- .../components/Header/Header.config.ts | 49 +++++++ .../components/Header/Header.stories.tsx | 128 ++++++++++++++++++ .../plasma_b2c/components/Header/Header.ts | 21 +++ .../components/Image/Image.stories.tsx | 48 +++++++ .../plasma_b2c/components/Image/Image.ts | 8 ++ .../components/Header/Header.config.ts | 49 +++++++ .../components/Header/Header.stories.tsx | 128 ++++++++++++++++++ .../plasma_web/components/Header/Header.ts | 21 +++ .../components/Image/Image.stories.tsx | 51 +++++++ .../plasma_web/components/Image/Image.ts | 8 ++ .../components/Image/Image.stories.tsx | 51 +++++++ .../sds_engineer/components/Image/Image.ts | 8 ++ packages/plasma-new-hope/src/index.ts | 1 + packages/plasma-new-hope/src/mixins/index.ts | 1 + .../plasma-new-hope/src/mixins/mediaQuery.ts | 64 +++++++++ 54 files changed, 1404 insertions(+), 1 deletion(-) create mode 100644 packages/plasma-new-hope/.storybook/public/images/320_320_9.jpg create mode 100644 packages/plasma-new-hope/src/components/Header/Header.tokens.ts create mode 100644 packages/plasma-new-hope/src/components/Header/HeaderContent/HeaderContent.tsx create mode 100644 packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.styles.ts create mode 100644 packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.tsx create mode 100644 packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.types.ts create mode 100644 packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/base.ts create mode 100644 packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Header/index.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.styles.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.tsx create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.types.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/base.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/base.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.styles.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.tsx create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/base.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitle/HeaderTitle.tsx create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.styles.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.tsx create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.types.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/base.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/base.ts create mode 100644 packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Header/ui/index.ts create mode 100644 packages/plasma-new-hope/src/components/Image/Image.styles.ts create mode 100644 packages/plasma-new-hope/src/components/Image/Image.tsx create mode 100644 packages/plasma-new-hope/src/components/Image/Image.types.ts create mode 100644 packages/plasma-new-hope/src/components/Image/index.ts create mode 100644 packages/plasma-new-hope/src/components/_Icon/Icon.assets/ChevronLeft.tsx create mode 100644 packages/plasma-new-hope/src/components/_Icon/Icon.assets/Mic.tsx create mode 100644 packages/plasma-new-hope/src/components/_Icon/IconChevronLeft.tsx create mode 100644 packages/plasma-new-hope/src/components/_Icon/IconMic.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.config.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Image/Image.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_b2c/components/Image/Image.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Header/Header.config.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Header/Header.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Header/Header.ts create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Image/Image.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/plasma_web/components/Image/Image.ts create mode 100644 packages/plasma-new-hope/src/examples/sds_engineer/components/Image/Image.stories.tsx create mode 100644 packages/plasma-new-hope/src/examples/sds_engineer/components/Image/Image.ts create mode 100644 packages/plasma-new-hope/src/mixins/mediaQuery.ts diff --git a/packages/plasma-new-hope/.storybook/public/images/320_320_9.jpg b/packages/plasma-new-hope/.storybook/public/images/320_320_9.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5ff9dc76ccd7104d7f5582bd9530d36ad0ba13de GIT binary patch literal 32285 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 => ( + {children} +); diff --git a/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.styles.ts b/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.styles.ts new file mode 100644 index 0000000000..e038022289 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.styles.ts @@ -0,0 +1,49 @@ +import { styled } from '@linaria/react'; + +import { mediaQuery } from '../../../mixins'; +import { classes, tokens } from '../Header.tokens'; + +import type { StyledHeaderRootProps } from './HeaderRoot.types'; +import { sizes } from './HeaderRoot'; + +export const StyledHeaderRoot = styled.header` + box-sizing: content-box; + + width: 100%; + height: var(${tokens.headerHeight}); + padding-top: var(${tokens.headerPaddingTop}); + padding-bottom: var(${tokens.headerPaddingBottom}); + + --header_private-gradient-color: ${({ $gradientColor }) => String($gradientColor)}; + &.${String(classes.headerWithGradient)} { + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: calc( + var(${tokens.headerHeight}) + var(${tokens.headerPaddingTop}) + var(${tokens.headerPaddingBottom}) + ); + background-image: linear-gradient(180deg, var(--header_private-gradient-color), rgba(0, 0, 0, 0)); + } + }; + + &.${String(classes.headerWithDefaultSizes)} { + ${mediaQuery('S', 1)(sizes.s)} + ${mediaQuery('M')(sizes.m)} + ${mediaQuery('L')(sizes.l)} + ${mediaQuery('XL')(sizes.l)} + } +`; + +export const StyledInner = styled.div` + position: relative; + + display: flex; + align-items: center; + flex-direction: row; + + width: 100%; + height: 100%; +`; diff --git a/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.tsx b/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.tsx new file mode 100644 index 0000000000..c082796bb6 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.tsx @@ -0,0 +1,68 @@ +import React, { forwardRef } from 'react'; + +import type { RootProps } from '../../../engines'; +import { classes, tokens } from '../Header.tokens'; +import { cx } from '../../../utils'; + +import type { HeaderRootProps } from './HeaderRoot.types'; +import { base as sizeCSS } from './variations/_size/base'; +import { StyledHeaderRoot, StyledInner } from './HeaderRoot.styles'; + +export const sizes = { + /* sberBox */ + l: ` + ${tokens.headerHeight}: 2.25rem; /* 36px */ + ${tokens.headerPaddingTop}: 1.875rem; /* 30px */ + ${tokens.headerPaddingBottom}: 0.875rem; /* 14px */ + `, + /* sberPortal */ + m: ` + ${tokens.headerHeight}: 2.25rem; /* 36px */ + ${tokens.headerPaddingTop}: 1.625rem; /* 26px */ + ${tokens.headerPaddingBottom}: 0.625rem; /* 10px */ + `, + /* mobile */ + s: ` + ${tokens.headerHeight}: 2.25rem; /* 36px */ + ${tokens.headerPaddingTop}: 0.375rem; /* 6px */ + ${tokens.headerPaddingBottom}: 0.375rem; /* 6px */ + `, +}; + +/** + * Корневой узел для шапки. + */ +export const headerRoot = (Root: RootProps) => + forwardRef((props, outerRootRef) => { + const { children, size, view, gradientColor, ...rest } = props; + + const gradientColorClass = gradientColor ? classes.headerWithGradient : undefined; + const defaultSizesClass = !size ? classes.headerWithDefaultSizes : undefined; + + return ( + + + {children} + + + ); + }); + +export const headerRootConfig = { + name: 'HeaderRoot', + tag: 'div', + layout: headerRoot, + base: '', + variations: { + size: { + css: sizeCSS, + }, + }, + defaults: { + size: 'm', + }, +}; diff --git a/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.types.ts b/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.types.ts new file mode 100644 index 0000000000..974893454b --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/HeaderRoot/HeaderRoot.types.ts @@ -0,0 +1,27 @@ +import { HtmlHTMLAttributes } from 'react'; + +import { sizes } from './HeaderRoot'; + +export type StyledHeaderRootProps = { + $size?: string; + $gradientColor?: string; +}; + +type HeaderRootCustomProps = { + /** + * Задать размер, зависимый от устройства. + * Если не задан, на каждом брейкпоинте будет свой размер. + */ + size?: keyof typeof sizes; + /** + * Цвет для создания градиента сверху вниз. + * Указаный цвет займет верхнюю точку градента, + * а его, рассчитываемая программно, прозрачная версия - нижнюю. + * Можно использовать hex, rgb и rgba значения цвета. + */ + gradientColor?: string; + + view?: string; +}; + +export type HeaderRootProps = HtmlHTMLAttributes & HeaderRootCustomProps; diff --git a/packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/base.ts new file mode 100644 index 0000000000..cd585b76c4 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/base.ts @@ -0,0 +1,3 @@ +import { css } from '@linaria/core'; + +export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/tokens.json new file mode 100644 index 0000000000..9ff0c171eb --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/HeaderRoot/variations/_size/tokens.json @@ -0,0 +1 @@ +["--plasma-header-height", "--plasma-header-padding-top", "--plasma-header-padding-bottom"] diff --git a/packages/plasma-new-hope/src/components/Header/index.ts b/packages/plasma-new-hope/src/components/Header/index.ts new file mode 100644 index 0000000000..ad7ea0e58b --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/index.ts @@ -0,0 +1,9 @@ +export { headerLogoConfig, headerArrowConfig, headerTitleWrapperConfig, HeaderTitle } from './ui'; +export type { HeaderLogoProps, HeaderArrowProps, HeaderTitleWrapperProps } from './ui'; + +export { HeaderContent } from './HeaderContent/HeaderContent'; + +export { headerRootConfig } from './HeaderRoot/HeaderRoot'; +export type { HeaderRootProps } from './HeaderRoot/HeaderRoot.types'; + +export { tokens as headerTokens, classes as headerClasses } from './Header.tokens'; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.styles.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.styles.ts new file mode 100644 index 0000000000..1a0055d7e0 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.styles.ts @@ -0,0 +1,10 @@ +import { css } from '@linaria/core'; + +export const base = css` + position: absolute; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + right: 100%; +`; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.tsx b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.tsx new file mode 100644 index 0000000000..febd31d8f5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.tsx @@ -0,0 +1,60 @@ +import React, { forwardRef } from 'react'; +import type { HTMLAttributes } from 'react'; + +import { component, mergeConfig } from '../../../../engines'; +import type { RootProps } from '../../../../engines'; +import { buttonConfig } from '../../../Button'; +import { classes, tokens } from '../../Header.tokens'; +import { IconChevronLeft } from '../../../_Icon'; +import { cx } from '../../../../utils'; + +import type { HeaderArrowProps } from './HeaderArrow.types'; +import { base } from './HeaderArrow.styles'; +import { base as sizeCSS } from './variations/_size/base'; +import { base as viewCSS } from './variations/_view/base'; + +const mergedButtonConfig = mergeConfig(buttonConfig); +const Button = component(mergedButtonConfig); + +/** + * Кнопка-стрелка с возможностью отображения в двух типах - "назад" или "свернуть". + */ +export const headerArrowRoot = (Root: RootProps>) => + forwardRef((props, outerRootRef) => { + const { arrow, iconSize = 's', ...rest } = props; + + const minimizeClass = arrow === 'minimize' ? classes.headerArrowIconMinimize : undefined; + + return ( + + + + ); + }); + +export const headerArrowConfig = { + name: 'HeaderArrow', + tag: 'div', + layout: headerArrowRoot, + base, + variations: { + view: { + css: viewCSS, + }, + size: { + css: sizeCSS, + }, + }, + defaults: { + view: 'primary', + size: 'm', + }, +}; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.types.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.types.ts new file mode 100644 index 0000000000..a5b5ef48ea --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/HeaderArrow.types.ts @@ -0,0 +1,11 @@ +import type { ButtonHTMLAttributes } from 'react'; + +import type { IconSize } from '../../../_Icon/IconRoot'; + +export type HeaderArrowProps = ButtonHTMLAttributes & { + /** + * Тип стрелки. + */ + arrow?: 'back' | 'minimize'; + iconSize?: IconSize; +}; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/base.ts new file mode 100644 index 0000000000..85d09aafd0 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/base.ts @@ -0,0 +1,19 @@ +import { css } from '@linaria/core'; + +import { mediaQuery } from '../../../../../../mixins'; +import { classes, tokens } from '../../../../Header.tokens'; + +export const base = css` + .${String(classes.headerArrow)} { + margin-right: var(${tokens.headerArrowMarginRight}); + + ${mediaQuery('S')(` + position: static; + width: auto; + height: calc(var(${tokens.headerPaddingTop}) + var(${tokens.headerHeight}) + var(${tokens.headerPaddingBottom})); + padding: 0; + margin-right: 1rem; + margin-top: calc(var(${tokens.headerPaddingTop}) * -1); + `)} + } +`; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/tokens.json new file mode 100644 index 0000000000..89a2867bae --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_size/tokens.json @@ -0,0 +1 @@ +["--plasma-header-arrow-margin-right", "--plasma-header-arrow-icon-size"] diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/base.ts new file mode 100644 index 0000000000..5734bdda4c --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/base.ts @@ -0,0 +1,13 @@ +import { css } from '@linaria/core'; + +import { classes, tokens } from '../../../../Header.tokens'; + +export const base = css` + .${String(classes.headerArrowIcon)} { + transition: var(${tokens.headerArrowTransition}); + } + + .${String(classes.headerArrowIconMinimize)} { + transform: rotate(-90deg); + } +`; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/tokens.json new file mode 100644 index 0000000000..38e9617ae3 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderArrow/variations/_view/tokens.json @@ -0,0 +1 @@ +["--plasma-header-arrow-transition"] diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.styles.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.styles.ts new file mode 100644 index 0000000000..a484b022b8 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.styles.ts @@ -0,0 +1,15 @@ +import { css } from '@linaria/core'; + +import { classes, tokens } from '../../Header.tokens'; + +export const base = css` + .${String(classes.headerLogoImage)} { + --plasma_private-header-size: var(${tokens.headerHeight}); + + width: var(--plasma_private-header-size); + height: var(--plasma_private-header-size); + flex: 0 0 var(--plasma_private-header-size); + + margin-right: var(${tokens.headerLogoMarginRight}); + } +`; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.tsx b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.tsx new file mode 100644 index 0000000000..1ce8be70ef --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/HeaderLogo.tsx @@ -0,0 +1,47 @@ +import React, { forwardRef } from 'react'; +import type { HTMLAttributes } from 'react'; + +import { component } from '../../../../engines'; +import type { RootProps } from '../../../../engines'; +import { imageConfig } from '../../../Image'; +import type { ImageProps } from '../../../Image'; +import { classes } from '../../Header.tokens'; + +import { base as sizeCSS } from './variations/_size/base'; + +// INFO: Omit 'onResize' | 'onResizeCapture' | 'nonce' +// because this types coming with @types/react@18.0.25 and breaks react@17.0.2 with @types/react@18.0.18 +export type HeaderLogoProps = Omit< + ImageProps, + 'height' | 'width' | 'ratio' | 'customRatio' | 'onResize' | 'onResizeCapture' | 'nonce' +>; + +// issue #823 +const Image = component(imageConfig); + +/** + * Компонент для размещения логотипа. + */ +export const headerLogoRoot = (Root: RootProps>) => + forwardRef((props, outerRootRef) => { + return ( + + + + ); + }); + +export const headerLogoConfig = { + name: 'HeaderLogo', + tag: 'div', + layout: headerLogoRoot, + base: '', + variations: { + size: { + css: sizeCSS, + }, + }, + defaults: { + size: 'm', + }, +}; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/base.ts new file mode 100644 index 0000000000..2757ef086c --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/base.ts @@ -0,0 +1,15 @@ +import { css } from '@linaria/core'; + +import { classes, tokens } from '../../../../Header.tokens'; + +export const base = css` + .${String(classes.headerLogoImage)} { + --plasma_private-header-size: var(${tokens.headerHeight}); + + width: var(--plasma_private-header-size); + height: var(--plasma_private-header-size); + flex: 0 0 var(--plasma_private-header-size); + + margin-right: var(${tokens.headerLogoMarginRight}); + } +`; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/tokens.json new file mode 100644 index 0000000000..ff4f179665 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderLogo/variations/_size/tokens.json @@ -0,0 +1 @@ +["--plasma-header-logo-margin-right"] diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitle/HeaderTitle.tsx b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitle/HeaderTitle.tsx new file mode 100644 index 0000000000..fc8b943f87 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitle/HeaderTitle.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { styled } from '@linaria/react'; + +import { applyEllipsis, h3, mediaQuery } from '../../../../mixins'; + +const StyledHeaderTitle = styled.div` + ${applyEllipsis()}; + + ${h3}; + font-weight: 600; + + ${mediaQuery('S')(` + font-family: var(--plasma-typo-body-m-font-family); + font-size: var(--plasma-typo-body-m-font-size); + font-style: var(--plasma-typo-body-m-font-style); + letter-spacing: var(--plasma-typo-body-m-letter-spacing); + line-height: var(--plasma-typo-body-m-line-height); + font-weight: 600; + `)}; +`; + +/** + * Компонент для размещения заголовка. + */ +export const HeaderTitle = ({ children, ...rest }: React.HTMLAttributes) => ( + {children} +); diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.styles.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.styles.ts new file mode 100644 index 0000000000..94ea46d8de --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.styles.ts @@ -0,0 +1,68 @@ +import { styled } from '@linaria/react'; + +import { tokens } from '../../Header.tokens'; +import { applyEllipsis, applyHyphens, bodyM, bodyS, h1, h3 } from '../../../../mixins'; + +export const Title = styled.div` + ${bodyM}; + + margin: var(${tokens.headerTitleMargin}); + color: var(${tokens.headerTitleColor}); + + ${applyHyphens}; + ${applyEllipsis()}; +`; + +export const BigTitle = styled.div` + ${h3}; + font-weight: 600; + + margin: var(${tokens.headerBigTitleMargin}); + color: var(${tokens.headerBiggerTitleColor}); + + ${applyHyphens}; + ${applyEllipsis()}; +`; + +export const BiggerTitle = styled.div` + ${h1}; + font-weight: 600; + + margin: var(${tokens.headerBiggerTitleMargin}); + color: var(${tokens.headerBiggerTitleColor}); + + ${applyHyphens}; + ${applyEllipsis()}; +`; + +export const Label = styled.div` + margin: var(${tokens.headerLabelMargin}); + color: var(${tokens.headerLabelColor}); + ${applyEllipsis()}; +`; + +export const SubTitle = styled.div` + ${bodyS}; + + margin: var(${tokens.headerSubTitleMargin}); + color: var(${tokens.headerSubTitleColor}); + + ${applyHyphens}; + ${applyEllipsis()}; +`; + +export const Caption = styled.div` + margin: var(${tokens.headerCaptionMargin}); + color: var(${tokens.headerCaptionColor}); + ${applyEllipsis()}; +`; + +export const TextBoxRoot = styled.div` + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } +`; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.tsx b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.tsx new file mode 100644 index 0000000000..034b86c2f5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.tsx @@ -0,0 +1,57 @@ +import React, { forwardRef } from 'react'; +import type { HTMLAttributes } from 'react'; + +import type { RootProps } from '../../../../engines'; + +import { base as sizeCSS } from './variations/_size/base'; +import { base as viewCSS } from './variations/_view/base'; +import type { HeaderTitleWrapperProps } from './HeaderTitleWrapper.types'; +import { BigTitle, Caption, Label, SubTitle, TextBoxRoot, Title } from './HeaderTitleWrapper.styles'; + +/** + * Компонент для отображения текста в скомпанованном блоке. + */ +export const headerTitleWrapperRoot = (Root: RootProps>) => + forwardRef((props, outerRootRef) => { + const { label, title, subTitle, caption, withBigTitle, children, ...rest } = props; + + if (children) { + return ( + + {children} + + ); + } + + const T = withBigTitle ? BigTitle : Title; + + return ( + + + {label && } + {title && {title}} + {subTitle && {subTitle}} + {caption && {caption}} + + + ); + }); + +export const headerTitleWrapperConfig = { + name: 'HeaderTitleWrapper', + tag: 'div', + layout: headerTitleWrapperRoot, + base: '', + variations: { + view: { + css: viewCSS, + }, + size: { + css: sizeCSS, + }, + }, + defaults: { + view: 'primary', + size: 'm', + }, +}; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.types.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.types.ts new file mode 100644 index 0000000000..9fcde54eb3 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/HeaderTitleWrapper.types.ts @@ -0,0 +1,10 @@ +import type { HTMLAttributes, ReactNode } from 'react'; + +export type HeaderTitleWrapperProps = HTMLAttributes & { + label?: string; + title?: string; + subTitle?: string; + caption?: string; + children?: ReactNode; + withBigTitle?: boolean; +}; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/base.ts new file mode 100644 index 0000000000..cd585b76c4 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/base.ts @@ -0,0 +1,3 @@ +import { css } from '@linaria/core'; + +export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/tokens.json new file mode 100644 index 0000000000..4e4918df92 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_size/tokens.json @@ -0,0 +1,8 @@ +[ + "--plasma-header-title-margin", + "--plasma-header-big-title-margin", + "--plasma-header-bigger-title-margin", + "--plasma-header-label-margin", + "--plasma-header-subtitle-margin", + "--plasma-header-caption-margin" +] diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/base.ts new file mode 100644 index 0000000000..58f66420e4 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/base.ts @@ -0,0 +1,11 @@ +import { css } from '@linaria/core'; + +export const base = css` + display: flex; + flex-direction: column; + align-self: center; + + flex: 1 1 max-content; + max-width: max-content; + min-width: 10%; +`; diff --git a/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/tokens.json new file mode 100644 index 0000000000..a8a6f2fc22 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/HeaderTitleWrapper/variations/_view/tokens.json @@ -0,0 +1,8 @@ +[ + "--plasma-header-title-color", + "--plasma-header-big-title-color", + "--plasma-header-bigger-title-color", + "--plasma-header-label-color", + "--plasma-header-subtitle-color", + "--plasma-header-caption-color" +] diff --git a/packages/plasma-new-hope/src/components/Header/ui/index.ts b/packages/plasma-new-hope/src/components/Header/ui/index.ts new file mode 100644 index 0000000000..59dba2e8da --- /dev/null +++ b/packages/plasma-new-hope/src/components/Header/ui/index.ts @@ -0,0 +1,10 @@ +export { headerLogoConfig } from './HeaderLogo/HeaderLogo'; +export type { HeaderLogoProps } from './HeaderLogo/HeaderLogo'; + +export { headerArrowConfig } from './HeaderArrow/HeaderArrow'; +export type { HeaderArrowProps } from './HeaderArrow/HeaderArrow.types'; + +export { headerTitleWrapperConfig } from './HeaderTitleWrapper/HeaderTitleWrapper'; +export type { HeaderTitleWrapperProps } from './HeaderTitleWrapper/HeaderTitleWrapper.types'; + +export { HeaderTitle } from './HeaderTitle/HeaderTitle'; diff --git a/packages/plasma-new-hope/src/components/Image/Image.styles.ts b/packages/plasma-new-hope/src/components/Image/Image.styles.ts new file mode 100644 index 0000000000..fff9268e7c --- /dev/null +++ b/packages/plasma-new-hope/src/components/Image/Image.styles.ts @@ -0,0 +1,48 @@ +import { styled } from '@linaria/react'; + +import type { StyledRootProps } from './Image.types'; + +export const ratios = { + '1 / 1': '100', + '1/1': '100', + '3 / 4': '133.3333', + '3/4': '133.3333', + '4 / 3': '75', + '4/3': '75', + '9 / 16': '177.7778', + '9/16': '177.7778', + '16 / 9': '56.25', + '16/9': '56.25', + '1 / 2': '200', + '1/2': '200', + '2 / 1': '50', + '2/1': '50', +}; + +export const StyledRoot = styled.div` + position: relative; + display: block; + box-sizing: border-box; + overflow: hidden; + + height: inherit; + border-radius: inherit; + width: ${({ $width }) => $width || '100%'}; + height: ${({ $height }) => $height || '0'}; + padding-bottom: ${({ $ratio, $customRatio }) => ($ratio ? `${ratios[$ratio]}%` : $customRatio)}; +`; + +export const StyledImg = styled.img` + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; +`; + +export const StyledDivImg = styled.div` + width: 100%; + height: 100%; + position: absolute; + background-position: center; + background-size: cover; +`; diff --git a/packages/plasma-new-hope/src/components/Image/Image.tsx b/packages/plasma-new-hope/src/components/Image/Image.tsx new file mode 100644 index 0000000000..ff4939e353 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Image/Image.tsx @@ -0,0 +1,37 @@ +import React, { forwardRef } from 'react'; +import type { HTMLAttributes } from 'react'; + +import type { RootProps } from '../../engines'; + +import { StyledDivImg, StyledImg, StyledRoot } from './Image.styles'; +import type { ImageProps } from './Image.types'; + +/** + * Компонент для отображения картинок. + */ +export const imageRoot = (Root: RootProps>) => + forwardRef( + ({ src, srcSet, sizes, ratio, customRatio, alt, width, height, base = 'img', ...rest }, outerRootRef) => { + const rootCustomRatio = customRatio ? `${customRatio}%` : 'unset'; + + return ( + + + {base === 'img' && } + {base === 'div' && ( + + )} + + + ); + }, + ); + +export const imageConfig = { + name: 'Image', + tag: 'div', + layout: imageRoot, + base: '', + variations: {}, + defaults: {}, +}; diff --git a/packages/plasma-new-hope/src/components/Image/Image.types.ts b/packages/plasma-new-hope/src/components/Image/Image.types.ts new file mode 100644 index 0000000000..d6487cba90 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Image/Image.types.ts @@ -0,0 +1,22 @@ +import type { ImgHTMLAttributes } from 'react'; + +import { ratios } from './Image.styles'; + +export type Ratio = keyof typeof ratios; + +type ImageBaseProps = 'div' | 'img'; + +export type StyledRootProps = { + $customRatio: string; + $ratio?: Ratio; + $width?: string | number; + $height?: string | number; +}; + +type CustomImageProps = { + base?: ImageBaseProps; + ratio?: Ratio; + customRatio?: string; +}; + +export type ImageProps = ImgHTMLAttributes & CustomImageProps; diff --git a/packages/plasma-new-hope/src/components/Image/index.ts b/packages/plasma-new-hope/src/components/Image/index.ts new file mode 100644 index 0000000000..343364d669 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Image/index.ts @@ -0,0 +1,2 @@ +export { imageRoot, imageConfig } from './Image'; +export type { ImageProps, Ratio } from './Image.types'; diff --git a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/ChevronLeft.tsx b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/ChevronLeft.tsx new file mode 100644 index 0000000000..65ac51701d --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/ChevronLeft.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { IconProps } from '../IconRoot'; + +export const ChevronLeft: React.FC = (props) => ( + + + +); diff --git a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/Mic.tsx b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/Mic.tsx new file mode 100644 index 0000000000..1df904426d --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/Mic.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { IconProps } from '../IconRoot'; + +export const Mic: React.FC = (props) => ( + + + +); diff --git a/packages/plasma-new-hope/src/components/_Icon/IconChevronLeft.tsx b/packages/plasma-new-hope/src/components/_Icon/IconChevronLeft.tsx new file mode 100644 index 0000000000..82388bcec5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/IconChevronLeft.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { ChevronLeft } from './Icon.assets/ChevronLeft'; +import { IconRoot, IconProps } from './IconRoot'; + +export const IconChevronLeft: React.FC = ({ size = 's', color, className, sizeCustomProperty }) => { + return ( + + ); +}; diff --git a/packages/plasma-new-hope/src/components/_Icon/IconMic.tsx b/packages/plasma-new-hope/src/components/_Icon/IconMic.tsx new file mode 100644 index 0000000000..e392a5d5ff --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/IconMic.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +import { Mic } from './Icon.assets/Mic'; +import { IconRoot, IconProps } from './IconRoot'; + +export const IconMic: React.FC = ({ size = 's', color, className }) => { + return ; +}; diff --git a/packages/plasma-new-hope/src/components/_Icon/index.tsx b/packages/plasma-new-hope/src/components/_Icon/index.tsx index 672a80db26..68dcd89a3c 100644 --- a/packages/plasma-new-hope/src/components/_Icon/index.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/index.tsx @@ -1,2 +1,4 @@ export { IconDisclosureLeft } from './IconDisclosureLeft'; export { IconDisclosureRight } from './IconDisclosureRight'; +export { IconMic } from './IconMic'; +export { IconChevronLeft } from './IconChevronLeft'; diff --git a/packages/plasma-new-hope/src/engines/types.ts b/packages/plasma-new-hope/src/engines/types.ts index a27d5bd89a..019584747e 100644 --- a/packages/plasma-new-hope/src/engines/types.ts +++ b/packages/plasma-new-hope/src/engines/types.ts @@ -18,7 +18,7 @@ export type Variant = { css?: PolymorphicClassName; attrs?: boolean; true?: PolymorphicClassName; -} & Record; +} & Record; export type HTMLAnyAttributes = Record; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.config.ts new file mode 100644 index 0000000000..590df2f264 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.config.ts @@ -0,0 +1,49 @@ +import { css } from '@linaria/core'; + +import { headerTokens } from '../../../../components/Header'; + +export const config = { + defaults: { + view: 'primary', + size: 'm', + }, + variations: { + view: { + primary: css` + --plasma-button-color: var(--text-primary); + --plasma-button-bg-color: var(--surface-clear); + + ${headerTokens.headerArrowTransition}: transform 0.15s ease-in-out; + + ${headerTokens.headerTitleColor}: var(--plasma-colors-primary); + ${headerTokens.headerBigTitleColor}: var(--plasma-colors-primary); + ${headerTokens.headerBiggerTitleColor}: var(--plasma-colors-primary); + ${headerTokens.headerLabelColor}: var(--plasma-colors-secondary); + ${headerTokens.headerSubTitleColor}: var(--plasma-colors-secondary); + ${headerTokens.headerCaptionColor}: var(--plasma-colors-secondary); + `, + }, + size: { + m: css` + ${headerTokens.headerHeight}: 2.25rem; + ${headerTokens.headerPaddingTop}: 1.625rem; + ${headerTokens.headerPaddingBottom}: 0.625rem; + + ${headerTokens.headerLogoMarginRight}: 0.75rem; + + ${headerTokens.headerArrowMarginRight}: 1rem; + ${headerTokens.headerArrowIconSize}: 1.5rem; + + ${headerTokens.headerTitleMargin}: 0.125rem 0; + ${headerTokens.headerBigTitleMargin}: 0.5rem 0; + ${headerTokens.headerBiggerTitleMargin}: 0.5rem 0; + ${headerTokens.headerLabelMargin}: 0.375rem 0; + ${headerTokens.headerSubTitleMargin}: 0.125rem 0; + ${headerTokens.headerCaptionMargin}: 0.25rem 0; + + --plasma-button-height: 2.25rem; + --plasma-button-padding: 0.5rem; + `, + }, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.stories.tsx new file mode 100644 index 0000000000..e4f2c70e10 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Header/Header.stories.tsx @@ -0,0 +1,128 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; + +import { Button } from '../Button/Button'; +import { WithTheme, argTypesFromConfig } from '../../../_helpers'; +import { mergeConfig } from '../../../../engines'; +import { headerRootConfig } from '../../../../components/Header'; +import { IconMic } from '../../../../components/_Icon'; + +import { config } from './Header.config'; +import { HeaderRoot, HeaderLogo, HeaderArrow, HeaderTitleWrapper, HeaderTitle, HeaderContent } from './Header'; + +const meta: Meta = { + title: 'plasma_b2c/Header', + decorators: [WithTheme], +}; + +export default meta; + +type ContentComponentProps = { + contentType: string; + contentItemsNumber: number; + enableIcons: boolean; +}; + +type CustomAssemblyProps = { + variant: string; + title: string; + subtitle: string; + label: string; + gradientColor: string; +}; + +const StyledContentGrid = styled.div<{ $colCount: number }>` + display: grid; + grid-template-columns: ${({ $colCount }) => `repeat(${$colCount}, max-content)`}; + grid-column-gap: 0.75rem; +`; + +const Content = ({ contentItemsNumber, enableIcons }: ContentComponentProps) => { + const contentItems = Array(contentItemsNumber).fill(0); + + return ( + + {contentItems.map((_, i) => ( +