diff --git a/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _align.snap.png b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _align.snap.png new file mode 100644 index 0000000000..731809e0e3 Binary files /dev/null and b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _align.snap.png differ diff --git a/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _size.snap.png b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _size.snap.png new file mode 100644 index 0000000000..d1a7fa2770 Binary files /dev/null and b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- default.snap.png b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- default.snap.png new file mode 100644 index 0000000000..de10f69328 Binary files /dev/null and b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- simple.snap.png b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- simple.snap.png new file mode 100644 index 0000000000..9771474d7f Binary files /dev/null and b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- _align.snap.png b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- _align.snap.png new file mode 100644 index 0000000000..b06e279874 Binary files /dev/null and b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- _align.snap.png differ diff --git a/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- default.snap.png b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- default.snap.png new file mode 100644 index 0000000000..de10f69328 Binary files /dev/null and b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- simple.snap.png b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- simple.snap.png new file mode 100644 index 0000000000..9771474d7f Binary files /dev/null and b/cypress/snapshots/b2c/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _align.snap.png b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _align.snap.png new file mode 100644 index 0000000000..843d373b6c Binary files /dev/null and b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _align.snap.png differ diff --git a/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _size.snap.png b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _size.snap.png new file mode 100644 index 0000000000..88ad68923b Binary files /dev/null and b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- default.snap.png b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- default.snap.png new file mode 100644 index 0000000000..3dfb2c83a7 Binary files /dev/null and b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- simple.snap.png b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- simple.snap.png new file mode 100644 index 0000000000..32a9e368e1 Binary files /dev/null and b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-new-hope Cell Styled -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- _align.snap.png b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- _align.snap.png new file mode 100644 index 0000000000..24f9e8fcad Binary files /dev/null and b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- _align.snap.png differ diff --git a/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- default.snap.png b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- default.snap.png new file mode 100644 index 0000000000..3dfb2c83a7 Binary files /dev/null and b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- simple.snap.png b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- simple.snap.png new file mode 100644 index 0000000000..32a9e368e1 Binary files /dev/null and b/cypress/snapshots/web/components/Cell/Cell.component-test.tsx/plasma-web Cell Styled -- simple.snap.png differ diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index cb0d98f4c7..e3a9bfada7 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -8,6 +8,7 @@ import { addFocus } from '@salutejs/plasma-core'; import { addNotification } from '@salutejs/plasma-new-hope/styled-components'; +import { AlignProp } from '@salutejs/plasma-new-hope/types/components/Cell/Cell.types'; import { AnchorHTMLAttributes } from 'react'; import { animatedScrollToX } from '@salutejs/plasma-core'; import { animatedScrollToY } from '@salutejs/plasma-core'; @@ -63,8 +64,11 @@ import { CarouselGridWrapper } from '@salutejs/plasma-hope'; import { CarouselItem } from '@salutejs/plasma-hope'; import { CarouselItemProps } from '@salutejs/plasma-hope'; import { CarouselProps } from '@salutejs/plasma-hope'; -import { Cell } from '@salutejs/plasma-hope'; -import { CellProps } from '@salutejs/plasma-hope'; +import { CellProps } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextbox } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextboxLabel } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextboxSubtitle } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextboxTitle } from '@salutejs/plasma-new-hope/styled-components'; import { ChipProps } from '@salutejs/plasma-new-hope/styled-components'; import { clearSelection } from '@salutejs/plasma-hope'; import { closeNotification } from '@salutejs/plasma-new-hope/styled-components'; @@ -618,10 +622,59 @@ export { CarouselItemProps } export { CarouselProps } -export { Cell } +// @public +export const Cell: FunctionComponent & (({ +size?: string | undefined; +view: string; +contentLeft?: ReactNode; +contentRight?: ReactNode; +alignContentLeft?: AlignProp | undefined; +alignContentRight?: AlignProp | undefined; +stretching?: "auto" | "fixed" | "filled" | undefined; +content?: ReactNode; +description?: string | undefined; +} & { +title?: string | undefined; +subtitle?: string | undefined; +label?: string | undefined; +children?: undefined; +} & HTMLAttributes & RefAttributes) | ({ +size?: string | undefined; +view: string; +contentLeft?: ReactNode; +contentRight?: ReactNode; +alignContentLeft?: AlignProp | undefined; +alignContentRight?: AlignProp | undefined; +stretching?: "auto" | "fixed" | "filled" | undefined; +content?: ReactNode; +description?: string | undefined; +} & { +title?: undefined; +subtitle?: undefined; +label?: undefined; +children?: ReactNode; +} & HTMLAttributes & RefAttributes))>; export { CellProps } +export { CellTextbox } + +export { CellTextboxLabel } + +export { CellTextboxSubtitle } + +export { CellTextboxTitle } + // @public export const Checkbox: FunctionComponent = { - title: 'Content/Cell', - component: Cell, - decorators: [InSpacingDecorator], +import { Cell, CellTextbox, CellTextboxTitle } from '.'; + +type StoryProps = ComponentProps & { + itemsCount?: number; + disableLeftContent?: boolean; + disableRightContent?: boolean; }; +type Story = StoryObj; -export default meta; +const sizes = ['l', 'm', 's', 'xs']; +const stretchingValues = ['fixed', 'filled', 'auto']; +const alignLeft = ['top', 'center', 'bottom']; +const alignRight = ['top', 'center', 'bottom']; -type Story = StoryObj; +type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined; +type SizesAvatar = 'l' | 'm' | 's'; -const StyledCellRating = styled(Cell)` - color: ${additional.h40[300]}; - margin-right: 0.75rem; -`; +const getSize = (size: SizesCell): SizesAvatar => { + if (size === 'xs' || !size) { + return 's'; + } + + return size; +}; -const StyledIconStarFill = styled(IconStarFill)` - transform: scale(0.75); +const ChevronRight = styled(IconChevronRight)` + color: var(--text-secondary); `; +const meta: Meta = { + title: 'Content/Cell', + argTypes: { + size: { + options: sizes, + control: { + type: 'select', + }, + }, + stretching: { + options: stretchingValues, + control: { + type: 'select', + }, + }, + alignContentLeft: { + options: alignLeft, + control: { + type: 'select', + }, + }, + alignContentRight: { + options: alignRight, + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + export const Default: Story = { args: { - description: '4.7', + size: 'm', + stretching: 'filled', + disableLeftContent: false, + disableRightContent: false, + alignContentLeft: 'center', + alignContentRight: 'center', + title: 'Title', + subtitle: 'Subtitle', + label: 'Label', + }, + render: ({ ...args }: StoryProps) => { + return ( + + ) + } + alignContentLeft={args.alignContentLeft} + contentRight={!args.disableRightContent && } + alignContentRight={args.alignContentRight} + {...args} + /> + ); + }, +}; + +export const WithContentTextboxCustom: Story = { + args: { + size: 'm', + stretching: 'filled', }, - render: ({ description }) => { + render: ({ ...args }: StoryProps) => { + const MyStyledText = styled.div` + font-size: 12px; + font-weight: 600; + opacity: 0.5; + `; return ( - } description={description} /> + + } + contentRight={} + > + + Title + My styled Text + + ); }, }; diff --git a/packages/plasma-b2c/src/components/Cell/Cell.ts b/packages/plasma-b2c/src/components/Cell/Cell.ts new file mode 100644 index 0000000000..5b29a951c7 --- /dev/null +++ b/packages/plasma-b2c/src/components/Cell/Cell.ts @@ -0,0 +1,11 @@ +import { cellConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Cell.config'; + +const mergedConfig = mergeConfig(cellConfig, config); +const CellComponent = component(mergedConfig); + +/** + * Cell + */ +export const Cell = CellComponent; diff --git a/packages/plasma-b2c/src/components/Cell/index.ts b/packages/plasma-b2c/src/components/Cell/index.ts index fc09d0a525..eed8af3061 100644 --- a/packages/plasma-b2c/src/components/Cell/index.ts +++ b/packages/plasma-b2c/src/components/Cell/index.ts @@ -1,2 +1,9 @@ -export { Cell } from '@salutejs/plasma-hope'; -export type { CellProps } from '@salutejs/plasma-hope'; +export { + CellTextbox, + CellTextboxLabel, + CellTextboxTitle, + CellTextboxSubtitle, +} from '@salutejs/plasma-new-hope/styled-components'; +export { Cell } from './Cell'; + +export type { CellProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-new-hope/src/components/Cell/Cell.styles.ts b/packages/plasma-new-hope/src/components/Cell/Cell.styles.ts index 80f454369c..3fc7470e42 100644 --- a/packages/plasma-new-hope/src/components/Cell/Cell.styles.ts +++ b/packages/plasma-new-hope/src/components/Cell/Cell.styles.ts @@ -1,8 +1,8 @@ import styled from 'styled-components'; import { css } from '@linaria/core'; -import { tokens } from './Cell.tokens'; -import type { AlignLeftProp, AlignRightProp } from './Cell.types'; +import type { AlignProp } from './Cell.types'; +import { tokens, classes } from './Cell.tokens'; const alignToFlex = { center: 'center', @@ -10,71 +10,40 @@ const alignToFlex = { bottom: 'flex-end', }; -export const CellRoot = styled.div` - width: 100%; - display: flex; - gap: 0.375rem; - - &:focus { - outline: 0 none; +export const base = css` + &&.${classes.fixedStretching} { + width: var(${tokens.cellWidth}); + } + &&.${classes.filledStretching} { + width: 100%; + } + &&.${classes.autoStretching} { + width: auto; } `; export const CellContentWrapper = styled.div` display: flex; flex: auto; + align-items: stretch; justify-content: space-between; - gap: 0.375rem; - // padding: 0.375rem 0; + gap: var(${tokens.cellGap}); + height: auto; `; export const CellContent = styled.div` display: flex; align-items: center; + height: auto; `; -export const CellLeft = styled.div<{ align: AlignLeftProp }>` +export const CellLeft = styled.div<{ align: AlignProp }>` display: flex; - align-items: ${({ align = 'center' }) => alignToFlex[align]}; + align-items: ${({ align }) => alignToFlex[align]}; `; -export const CellRight = styled.div<{ align: AlignRightProp }>` +export const CellRight = styled.div<{ align: AlignProp }>` display: flex; - align-items: ${({ align = 'center' }) => alignToFlex[align]}; + align-items: ${({ align }) => alignToFlex[align]}; text-align: right; `; - -// -// Стили в Textbox -// - -export const cellTextbox = css` - gap: var(${tokens.cellTextboxGap}); -`; -export const cellTextboxLabel = css` - color: var(${tokens.cellLabelColor}); - font-size: var(${tokens.cellLabelFontSize}); - font-weight: var(${tokens.cellLabelFontWeight}); - font-family: var(${tokens.cellLabelFontFamily}); - font-style: var(${tokens.cellLabelFontStyle}); - line-height: var(${tokens.cellLabelLineHeight}); - letter-spacing: var(${tokens.cellLabelLetterSpacing}); -`; -export const cellTextboxTitle = css` - color: var(${tokens.cellTitleColor}); - font-size: var(${tokens.cellTitleFontSize}); - font-weight: var(${tokens.cellTitleFontWeight}); - font-family: var(${tokens.cellTitleFontFamily}); - font-style: var(${tokens.cellTitleFontStyle}); - line-height: var(${tokens.cellTitleLineHeight}); - letter-spacing: var(${tokens.cellTitleLetterSpacing}); -`; -export const cellTextboxSubtitle = css` - color: var(${tokens.cellSubtitleColor}); - font-size: var(${tokens.cellSubtitleFontSize}); - font-weight: var(${tokens.cellSubtitleFontWeight}); - font-family: var(${tokens.cellSubtitleFontFamily}); - font-style: var(${tokens.cellSubtitleFontStyle}); - line-height: var(${tokens.cellSubtitleLineHeight}); - letter-spacing: var(${tokens.cellSubtitleLetterSpacing}); -`; diff --git a/packages/plasma-new-hope/src/components/Cell/Cell.tokens.ts b/packages/plasma-new-hope/src/components/Cell/Cell.tokens.ts index 5823ac666d..188f689036 100644 --- a/packages/plasma-new-hope/src/components/Cell/Cell.tokens.ts +++ b/packages/plasma-new-hope/src/components/Cell/Cell.tokens.ts @@ -3,11 +3,12 @@ export const tokens = { cellBackgroundColor: '--plasma-cell-background-color', cellPadding: '--plasma-cell-padding', - cellPaddingLeftContent: '--plasma-cell-padding', - cellPaddingContent: '--plasma-cell-padding', - cellPaddingRightContent: '--plasma-cell-padding', + cellPaddingLeftContent: '--plasma-cell-padding-left-content', + cellPaddingContent: '--plasma-cell-padding-content', + cellPaddingRightContent: '--plasma-cell-padding-right-content', cellTextboxGap: '--plasma-cell-textbox-gap', + cellGap: '--plasma-cell-gap', cellWidth: '--plasma-cell-width', @@ -37,10 +38,9 @@ export const tokens = { }; export const classes = { - cellStretch: 'button-stretch', - autoStretching: 'button-stretching-auto', - filledStretching: 'button-stretching-filled', - fixedStretching: 'button-stretching-fixed', + autoStretching: 'cell-stretching-auto', + filledStretching: 'cell-stretching-filled', + fixedStretching: 'cell-stretching-fixed', cellWrapper: 'cell-wrapper', cellRoot: 'cell-root', diff --git a/packages/plasma-new-hope/src/components/Cell/Cell.tsx b/packages/plasma-new-hope/src/components/Cell/Cell.tsx index 547a9cf5ee..e1f96af612 100644 --- a/packages/plasma-new-hope/src/components/Cell/Cell.tsx +++ b/packages/plasma-new-hope/src/components/Cell/Cell.tsx @@ -4,57 +4,59 @@ import { RootProps } from '../../engines'; import { cx } from '../../utils'; import type { CellProps } from './Cell.types'; -import { CellRoot, CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles'; +import { base, CellLeft, CellRight, CellContentWrapper, CellContent } from './Cell.styles'; import { classes } from './Cell.tokens'; import { base as viewCSS } from './variations/_view/base'; import { base as sizeCSS } from './variations/_size/base'; -import { base as stretchingCSS } from './variations/_stretching/base'; -import { Textbox } from './Textbox/Textbox'; +import { CellTextbox } from './ui/CellTextbox/CellTextbox'; -export const cellRoot = (Root: RootProps) => - forwardRef((props, outerRootRef) => { - const { - size = 'm', - contentLeft: left, - contentRight: right, - alignLeft = 'center', - alignRight = 'center', - stretch, - stretching = 'auto', - children, - title, - subtitle, - label, - } = props; +export const cellRoot = (Root: RootProps) => + forwardRef( + ( + { + size, + view, + contentLeft, + contentRight, + alignContentLeft = 'center', + alignContentRight = 'center', + children, + title, + subtitle, + label, + description, + content, + stretching = 'filled', + }, + outerRootRef, + ) => { + const stretchingClass = classes[`${stretching}Stretching` as keyof typeof classes]; + const titleText = title || description; + const contentLeftDeprecated = contentLeft || content; - const stretchingClass = stretch - ? classes.filledStretching - : classes[`${stretching}Stretching` as keyof typeof classes]; - - return ( - - - {left && {left}} + return ( + + {contentLeftDeprecated && {contentLeftDeprecated}} - {title || subtitle || label ? ( - + {titleText || subtitle || label ? ( + ) : ( - children && children + children )} - {right && {right}} + {contentRight && {contentRight}} - - - ); - }); + + ); + }, + ); export const cellConfig = { name: 'Cell', tag: 'div', layout: cellRoot, - base: '', + base, variations: { view: { css: viewCSS, @@ -62,9 +64,6 @@ export const cellConfig = { size: { css: sizeCSS, }, - stretching: { - css: stretchingCSS, - }, }, defaults: { view: 'default', diff --git a/packages/plasma-new-hope/src/components/Cell/Cell.types.ts b/packages/plasma-new-hope/src/components/Cell/Cell.types.ts index e57de6f608..2c5df74eb1 100644 --- a/packages/plasma-new-hope/src/components/Cell/Cell.types.ts +++ b/packages/plasma-new-hope/src/components/Cell/Cell.types.ts @@ -1,46 +1,39 @@ -import type { HTMLAttributes, ReactNode } from 'react'; +import type { ReactNode } from 'react'; -export type AlignLeftProp = 'center' | 'top' | 'bottom'; -export type AlignRightProp = 'center' | 'top'; -export type Sizes = 'l' | 'm' | 's' | 'xs'; +import type { CellTextboxProps } from './ui/CellTextbox/CellTextbox.types'; + +export type AlignProp = 'center' | 'top' | 'bottom'; type CustomCellProps = { /** * Размер */ - size: Sizes; + size?: string; /** - * Слот для контента слева, например `Icon` + * Размер */ - contentLeft?: ReactNode; + view: string; /** - * Слот для контента спарва, например `Icon` + * Слот для контента слева, например `Icon` */ - contentRight?: ReactNode; + contentLeft?: ReactNode; /** * Слот для контента спарва, например `Icon` */ - content?: ReactNode; + contentRight?: ReactNode; /** * Вертикальное выравнивание контента слева. */ - alignLeft?: AlignLeftProp; + alignContentLeft?: AlignProp; /** * Вертикальное выравнивание контента справа. */ - alignRight?: AlignRightProp; - - /** - * Кнопка растягивается на всю доступную ширину - * @deprecated - * Использовать stretching - */ - stretch?: boolean; + alignContentRight?: AlignProp; /** * Ширина cell @@ -53,19 +46,16 @@ type CustomCellProps = { stretching?: 'fixed' | 'filled' | 'auto'; /** - * Слот для Title - */ - title?: ReactNode; - - /** - * Слот для Subtitle + * Свойство устарело, вместо этого нужно использовать contentLeft + * @deprecated */ - subtitle?: ReactNode; + content?: ReactNode; /** - * Слот для Label + * Свойство устарело, вместо этого нужно использовать title + * @deprecated */ - label?: ReactNode; + description?: string; }; -export type CellProps = HTMLAttributes & CustomCellProps; +export type CellProps = CustomCellProps & CellTextboxProps; diff --git a/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.styles.ts b/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.styles.ts deleted file mode 100644 index 04ad034aae..0000000000 --- a/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.styles.ts +++ /dev/null @@ -1,6 +0,0 @@ -import styled from 'styled-components'; - -export const TextboxStyled = styled.div` - display: flex; - flex-direction: column; -`; diff --git a/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.tsx b/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.tsx deleted file mode 100644 index e698e80527..0000000000 --- a/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { HTMLAttributes } from 'react'; - -import { cellTextbox } from '../Cell.styles'; - -import type { TextboxProps } from './Textbox.types'; -import { TextboxStyled } from './Textbox.styles'; -import { TextLabel } from './ui/TextLabel'; -import { TextTitle } from './ui/TextTitle'; -import { TextSubtitle } from './ui/TextSubtitle'; - -export const Textbox: React.FC & TextboxProps> = (props) => { - const { label, title, subtitle, children } = props; - return ( - - {label || title || subtitle ? ( - <> - {label && {label}} - {title && {title}} - {subtitle && {subtitle}} - - ) : ( - children - )} - - ); -}; diff --git a/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.types.ts b/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.types.ts deleted file mode 100644 index 4bf3d7d707..0000000000 --- a/packages/plasma-new-hope/src/components/Cell/Textbox/Textbox.types.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { HTMLAttributes, ReactNode } from 'react'; - -export type AlignLeftProp = 'center' | 'top' | 'bottom'; -export type AlignRightProp = 'center' | 'top'; - -type CustomTextboxProps = { - /** - * Слот для Title - */ - title?: ReactNode; - - /** - * Слот для Subtitle - */ - subtitle?: ReactNode; - - /** - * Слот для Label - */ - label?: ReactNode; -}; - -export type TextboxProps = HTMLAttributes & CustomTextboxProps; diff --git a/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextLabel.tsx b/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextLabel.tsx deleted file mode 100644 index a1de0016ca..0000000000 --- a/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextLabel.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import styled from 'styled-components'; - -import { cellTextboxLabel } from '../../Cell.styles'; - -const StyledTextLabel = styled.div``; - -type TextLabelProps = { - text?: string; -}; - -export const TextLabel: React.FC & TextLabelProps> = (props) => { - return {props.children}; -}; diff --git a/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextSubtitle.tsx b/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextSubtitle.tsx deleted file mode 100644 index 203d89087d..0000000000 --- a/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextSubtitle.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import styled from 'styled-components'; - -import { cellTextboxSubtitle } from '../../Cell.styles'; - -const StyledTextSubtitle = styled.div``; - -type TextSubtitleProps = { - text?: string; -}; - -export const TextSubtitle: React.FC & TextSubtitleProps> = (props) => { - return {props.children}; -}; diff --git a/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextTitle.tsx b/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextTitle.tsx deleted file mode 100644 index 791700239b..0000000000 --- a/packages/plasma-new-hope/src/components/Cell/Textbox/ui/TextTitle.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import styled from 'styled-components'; - -import { cellTextboxTitle } from '../../Cell.styles'; - -const StyledTextTitle = styled.div``; - -type TextTitleProps = { - text?: string; -}; - -export const TextTitle: React.FC & TextTitleProps> = (props) => { - return {props.children}; -}; diff --git a/packages/plasma-new-hope/src/components/Cell/index.ts b/packages/plasma-new-hope/src/components/Cell/index.ts index e6727770c0..3342ce4348 100644 --- a/packages/plasma-new-hope/src/components/Cell/index.ts +++ b/packages/plasma-new-hope/src/components/Cell/index.ts @@ -1,10 +1,10 @@ -export { TextLabel } from './Textbox/ui/TextLabel'; -export { TextTitle } from './Textbox/ui/TextTitle'; -export { TextSubtitle } from './Textbox/ui/TextSubtitle'; +export { CellTextboxLabel } from './ui/CellTextboxLabel/CellTextboxLabel'; +export { CellTextboxTitle } from './ui/CellTextboxTitle/CellTextboxTitle'; +export { CellTextboxSubtitle } from './ui/CellTextboxSubtitle/CellTextboxSubtitle'; export { cellRoot, cellConfig } from './Cell'; export type { CellProps } from './Cell.types'; export { tokens as cellTokens, classes as cellClasses } from './Cell.tokens'; -export { Textbox } from './Textbox/Textbox'; -export type { TextboxProps } from './Textbox/Textbox.types'; +export { CellTextbox } from './ui/CellTextbox/CellTextbox'; +export type { CellTextboxProps } from './ui/CellTextbox/CellTextbox.types'; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.styles.ts b/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.styles.ts new file mode 100644 index 0000000000..c92567f2b1 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.styles.ts @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +import { tokens } from '../../Cell.tokens'; + +export const CellTextboxStyled = styled.div` + display: flex; + flex-direction: column; + gap: var(${tokens.cellTextboxGap}); +`; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.tsx b/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.tsx new file mode 100644 index 0000000000..0372ea32e3 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.tsx @@ -0,0 +1,29 @@ +import React, { HTMLAttributes } from 'react'; + +import { CellTextboxLabel } from '../CellTextboxLabel/CellTextboxLabel'; +import { CellTextboxTitle } from '../CellTextboxTitle/CellTextboxTitle'; +import { CellTextboxSubtitle } from '../CellTextboxSubtitle/CellTextboxSubtitle'; + +import { CellTextboxStyled } from './CellTextbox.styles'; +import type { CellTextboxProps } from './CellTextbox.types'; + +export const CellTextbox: React.FC & CellTextboxProps> = ({ + label, + title, + subtitle, + children, +}) => { + return ( + + {label || title || subtitle ? ( + <> + {label && {label}} + {title && {title}} + {subtitle && {subtitle}} + + ) : ( + children + )} + + ); +}; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.types.ts b/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.types.ts new file mode 100644 index 0000000000..bec197db10 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextbox/CellTextbox.types.ts @@ -0,0 +1,40 @@ +import type { HTMLAttributes, ReactNode } from 'react'; + +type CustomTextboxProps = + | { + /** + * Слот для Title + */ + title?: string; + /** + * Слот для Subtitle + */ + subtitle?: string; + + /** + * Слот для Label + */ + label?: string; + + children?: never; + } + | { + /** + * Слот для Title + */ + title?: never; + + /** + * Слот для Subtitle + */ + subtitle?: never; + + /** + * Слот для Label + */ + label?: never; + + children?: ReactNode; + }; + +export type CellTextboxProps = CustomTextboxProps & HTMLAttributes; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.styles.ts b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.styles.ts new file mode 100644 index 0000000000..c43ac71ab3 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { tokens } from '../../Cell.tokens'; + +export const StyledTextboxLabel = styled.div` + color: var(${tokens.cellLabelColor}); + font-size: var(${tokens.cellLabelFontSize}); + font-weight: var(${tokens.cellLabelFontWeight}); + font-family: var(${tokens.cellLabelFontFamily}); + font-style: var(${tokens.cellLabelFontStyle}); + line-height: var(${tokens.cellLabelLineHeight}); + letter-spacing: var(${tokens.cellLabelLetterSpacing}); +`; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.tsx b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.tsx new file mode 100644 index 0000000000..c8d66b25a5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxLabel/CellTextboxLabel.tsx @@ -0,0 +1,7 @@ +import React, { HTMLAttributes } from 'react'; + +import { StyledTextboxLabel } from './CellTextboxLabel.styles'; + +export const CellTextboxLabel: React.FC> = (props) => { + return {props.children}; +}; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.styles.ts b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.styles.ts new file mode 100644 index 0000000000..38eb1a080c --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { tokens } from '../../Cell.tokens'; + +export const StyledTextboxSubtitle = styled.div` + color: var(${tokens.cellSubtitleColor}); + font-size: var(${tokens.cellSubtitleFontSize}); + font-weight: var(${tokens.cellSubtitleFontWeight}); + font-family: var(${tokens.cellSubtitleFontFamily}); + font-style: var(${tokens.cellSubtitleFontStyle}); + line-height: var(${tokens.cellSubtitleLineHeight}); + letter-spacing: var(${tokens.cellSubtitleLetterSpacing}); +`; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.tsx b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.tsx new file mode 100644 index 0000000000..7c6bb171a5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxSubtitle/CellTextboxSubtitle.tsx @@ -0,0 +1,7 @@ +import React, { HTMLAttributes } from 'react'; + +import { StyledTextboxSubtitle } from './CellTextboxSubtitle.styles'; + +export const CellTextboxSubtitle: React.FC> = (props) => { + return {props.children}; +}; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.styles.ts b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.styles.ts new file mode 100644 index 0000000000..7d29085c8d --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { tokens } from '../../Cell.tokens'; + +export const StyledTextboxTitle = styled.div` + color: var(${tokens.cellTitleColor}); + font-size: var(${tokens.cellTitleFontSize}); + font-weight: var(${tokens.cellTitleFontWeight}); + font-family: var(${tokens.cellTitleFontFamily}); + font-style: var(${tokens.cellTitleFontStyle}); + line-height: var(${tokens.cellTitleLineHeight}); + letter-spacing: var(${tokens.cellTitleLetterSpacing}); +`; diff --git a/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.tsx b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.tsx new file mode 100644 index 0000000000..42475ff7e7 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Cell/ui/CellTextboxTitle/CellTextboxTitle.tsx @@ -0,0 +1,7 @@ +import React, { HTMLAttributes } from 'react'; + +import { StyledTextboxTitle } from './CellTextboxTitle.styles'; + +export const CellTextboxTitle: React.FC> = (props) => { + return {props.children}; +}; diff --git a/packages/plasma-new-hope/src/components/Cell/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Cell/variations/_view/base.ts index fe1fcb63cd..142049f648 100644 --- a/packages/plasma-new-hope/src/components/Cell/variations/_view/base.ts +++ b/packages/plasma-new-hope/src/components/Cell/variations/_view/base.ts @@ -5,4 +5,13 @@ import { tokens } from '../../Cell.tokens'; export const base = css` color: var(${tokens.cellColor}); background-color: var(${tokens.cellBackgroundColor}); + + width: 100%; + display: flex; + align-items: stretch; + gap: var(${tokens.cellGap}); + + &:focus { + outline: 0 none; + } `; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.config.ts index c0814b3280..e976be7898 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.config.ts @@ -3,10 +3,6 @@ import { css } from '@linaria/core'; import { cellTokens } from '../../../../components/Cell'; export const config = { - defaults: { - view: 'primary', - size: 'm', - }, variations: { view: { default: css` @@ -19,7 +15,7 @@ export const config = { }, size: { l: css` - ${cellTokens.cellWidth}: 12.5rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -27,30 +23,31 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); `, m: css` - ${cellTokens.cellWidth}: 11.25rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -58,30 +55,31 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); `, s: css` - ${cellTokens.cellWidth}: 11.25rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -89,30 +87,31 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); `, xs: css` - ${cellTokens.cellWidth}: 10rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -120,32 +119,29 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.25rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); `, }, - stretching: { - auto: css``, - filled: css``, - }, }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.stories.tsx index bcf81ca3f3..8a216193b1 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.stories.tsx @@ -7,20 +7,25 @@ import { WithTheme } from '../../../_helpers'; import { Avatar } from '../Avatar/Avatar'; import { IconChevronLeft } from '../../../../components/_Icon'; -import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell'; +import { Cell, CellTextbox, CellTextboxTitle } from './Cell'; -type StoryProps = ComponentProps & { itemsCount?: number }; +type StoryProps = ComponentProps & { + itemsCount?: number; + disableLeftContent?: boolean; + disableRightContent?: boolean; +}; type Story = StoryObj; -const views = ['default']; const sizes = ['l', 'm', 's', 'xs']; -const stretchingValues = ['auto', 'filled']; +const stretchingValues = ['fixed', 'filled', 'auto']; +const alignLeft = ['top', 'center', 'bottom']; +const alignRight = ['top', 'center', 'bottom']; -type sizesCell = 'xs' | 'l' | 'm' | 's'; -type sizesAvatar = 'l' | 'm' | 's'; +type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined; +type SizesAvatar = 'l' | 'm' | 's'; -const getSize = (size: sizesCell): sizesAvatar => { - if (size === 'xs') { +const getSize = (size: SizesCell): SizesAvatar => { + if (size === 'xs' || !size) { return 's'; } @@ -37,14 +42,20 @@ const meta: Meta = { type: 'select', }, }, - view: { - options: views, + stretching: { + options: stretchingValues, control: { type: 'select', }, }, - stretching: { - options: stretchingValues, + alignContentLeft: { + options: alignLeft, + control: { + type: 'select', + }, + }, + alignContentRight: { + options: alignRight, control: { type: 'select', }, @@ -54,94 +65,44 @@ const meta: Meta = { export default meta; +const ChevronRight = styled(IconChevronLeft)` + transform: rotate(180deg); + color: var(--text-secondary); +`; + export const Default: Story = { args: { - view: 'default', size: 'm', - stretching: 'auto', + stretching: 'filled', + disableLeftContent: false, + disableRightContent: false, + alignContentLeft: 'center', + alignContentRight: 'center', + title: 'Title', + subtitle: 'Subtitle', + label: 'Label', }, render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; return ( + !args.disableLeftContent && ( + + ) } - contentRight={} - title="Title" - subtitle="Subtitle" - label="Label" + contentRight={!args.disableRightContent && } {...args} /> ); }, }; -export const WithContentTextbox: Story = { - args: { - view: 'default', - size: 'm', - stretching: 'auto', - }, - render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; - return ( - - } - contentRight={} - {...args} - > - - - ); - }, -}; - -export const WithContentTextboxWithTags: Story = { - args: { - view: 'default', - size: 'm', - stretching: 'auto', - }, - render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; - return ( - - } - contentRight={} - {...args} - > - - Label - Title - Subtitle - - - ); - }, -}; - export const WithContentTextboxCustom: Story = { args: { - view: 'default', size: 'm', - stretching: 'auto', + stretching: 'filled', }, render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; - const MyStyledText = styled.div` font-size: 12px; font-weight: 600; @@ -149,16 +110,18 @@ export const WithContentTextboxCustom: Story = { `; return ( } - contentRight={} - {...args} + contentRight={!args.disableRightContent && } > - - Title + + Title My styled Text - + ); }, diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.ts index 4c30261c31..01ebca298a 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Cell/Cell.ts @@ -1,8 +1,14 @@ -import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell'; +import { + cellConfig, + CellTextbox, + CellTextboxLabel, + CellTextboxSubtitle, + CellTextboxTitle, +} from '../../../../components/Cell'; import { component, mergeConfig } from '../../../../engines'; import { config } from './Cell.config'; const mergedConfig = mergeConfig(cellConfig, config); export const Cell = component(mergedConfig); -export { Textbox, TextLabel, TextSubtitle, TextTitle }; +export { CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.config.ts index c0814b3280..ae6820d8d2 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.config.ts @@ -3,10 +3,6 @@ import { css } from '@linaria/core'; import { cellTokens } from '../../../../components/Cell'; export const config = { - defaults: { - view: 'primary', - size: 'm', - }, variations: { view: { default: css` @@ -19,7 +15,7 @@ export const config = { }, size: { l: css` - ${cellTokens.cellWidth}: 12.5rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -27,30 +23,31 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); `, m: css` - ${cellTokens.cellWidth}: 11.25rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -58,30 +55,31 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); `, s: css` - ${cellTokens.cellWidth}: 11.25rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -89,30 +87,31 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); `, xs: css` - ${cellTokens.cellWidth}: 10rem; + ${cellTokens.cellWidth}: 15rem; ${cellTokens.cellPadding}: 0rem; ${cellTokens.cellPaddingLeftContent}: 0rem; @@ -120,32 +119,30 @@ export const config = { ${cellTokens.cellPaddingRightContent}: 0rem; ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.25rem; + ${cellTokens.cellGap}: 0.375rem; ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); `, }, - stretching: { - auto: css``, - filled: css``, - }, }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.stories.tsx index 91b02e694c..6e00ec9b6d 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.stories.tsx @@ -7,20 +7,25 @@ import { WithTheme } from '../../../_helpers'; import { Avatar } from '../Avatar/Avatar'; import { IconChevronLeft } from '../../../../components/_Icon'; -import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell'; +import { Cell, CellTextbox, CellTextboxTitle } from './Cell'; -type StoryProps = ComponentProps & { itemsCount?: number }; +type StoryProps = ComponentProps & { + itemsCount?: number; + disableLeftContent?: boolean; + disableRightContent?: boolean; +}; type Story = StoryObj; -const views = ['default']; const sizes = ['l', 'm', 's', 'xs']; -const stretchingValues = ['auto', 'filled']; +const stretchingValues = ['fixed', 'filled', 'auto']; +const alignLeft = ['top', 'center', 'bottom']; +const alignRight = ['top', 'center', 'bottom']; -type sizesCell = 'xs' | 'l' | 'm' | 's'; -type sizesAvatar = 'l' | 'm' | 's'; +type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined; +type SizesAvatar = 'l' | 'm' | 's'; -const getSize = (size: sizesCell): sizesAvatar => { - if (size === 'xs') { +const getSize = (size: SizesCell): SizesAvatar => { + if (size === 'xs' || !size) { return 's'; } @@ -37,14 +42,20 @@ const meta: Meta = { type: 'select', }, }, - view: { - options: views, + stretching: { + options: stretchingValues, control: { type: 'select', }, }, - stretching: { - options: stretchingValues, + alignContentLeft: { + options: alignLeft, + control: { + type: 'select', + }, + }, + alignContentRight: { + options: alignRight, control: { type: 'select', }, @@ -54,94 +65,44 @@ const meta: Meta = { export default meta; +const ChevronRight = styled(IconChevronLeft)` + transform: rotate(180deg); + color: var(--text-secondary); +`; + export const Default: Story = { args: { - view: 'default', size: 'm', - stretching: 'auto', + stretching: 'filled', + disableLeftContent: false, + disableRightContent: false, + alignContentLeft: 'center', + alignContentRight: 'center', + title: 'Title', + subtitle: 'Subtitle', + label: 'Label', }, render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; return ( + !args.disableLeftContent && ( + + ) } - contentRight={} - title="Title" - subtitle="Subtitle" - label="Label" + contentRight={!args.disableRightContent && } {...args} /> ); }, }; -export const WithContentTextbox: Story = { - args: { - view: 'default', - size: 'm', - stretching: 'auto', - }, - render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; - return ( - - } - contentRight={} - {...args} - > - - - ); - }, -}; - -export const WithContentTextboxWithTags: Story = { - args: { - view: 'default', - size: 'm', - stretching: 'auto', - }, - render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; - return ( - - } - contentRight={} - {...args} - > - - Label - Title - Subtitle - - - ); - }, -}; - export const WithContentTextboxCustom: Story = { args: { - view: 'default', size: 'm', - stretching: 'auto', + stretching: 'filled', }, render: ({ ...args }: StoryProps) => { - const ChevronRight = styled(IconChevronLeft)` - transform: rotate(180deg); - `; - const MyStyledText = styled.div` font-size: 12px; font-weight: 600; @@ -149,16 +110,18 @@ export const WithContentTextboxCustom: Story = { `; return ( } - contentRight={} - {...args} + contentRight={} > - - Title + + Title My styled Text - + ); }, diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.ts index 4c30261c31..cbabf59100 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Cell/Cell.ts @@ -1,8 +1,14 @@ -import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell'; import { component, mergeConfig } from '../../../../engines'; +import { + cellConfig, + CellTextbox, + CellTextboxLabel, + CellTextboxSubtitle, + CellTextboxTitle, +} from '../../../../components/Cell'; import { config } from './Cell.config'; const mergedConfig = mergeConfig(cellConfig, config); export const Cell = component(mergedConfig); -export { Textbox, TextLabel, TextSubtitle, TextTitle }; +export { CellTextbox, CellTextboxLabel, CellTextboxSubtitle, CellTextboxTitle }; diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts index e0e426975c..569f35754a 100644 --- a/packages/plasma-new-hope/src/index.ts +++ b/packages/plasma-new-hope/src/index.ts @@ -6,6 +6,7 @@ export * from './hooks'; export * from './components/Button'; export * from './components/ButtonGroup'; export * from './components/Chip'; +export * from './components/Cell'; export * from './components/Link'; export * from './components/Spinner'; export * from './components/Checkbox'; diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index 73e092fc2f..72cec451a4 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -8,6 +8,7 @@ import { addFocus } from '@salutejs/plasma-core'; import { addNotification } from '@salutejs/plasma-new-hope/styled-components'; +import { AlignProp } from '@salutejs/plasma-new-hope/types/components/Cell/Cell.types'; import { AnchorHTMLAttributes } from 'react'; import { animatedScrollToX } from '@salutejs/plasma-core'; import { animatedScrollToY } from '@salutejs/plasma-core'; @@ -63,8 +64,11 @@ import { CarouselGridWrapper } from '@salutejs/plasma-hope'; import { CarouselItem } from '@salutejs/plasma-hope'; import { CarouselItemProps } from '@salutejs/plasma-hope'; import { CarouselProps } from '@salutejs/plasma-hope'; -import { Cell } from '@salutejs/plasma-hope'; -import { CellProps } from '@salutejs/plasma-hope'; +import { CellProps } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextbox } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextboxLabel } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextboxSubtitle } from '@salutejs/plasma-new-hope/styled-components'; +import { CellTextboxTitle } from '@salutejs/plasma-new-hope/styled-components'; import { ChipProps } from '@salutejs/plasma-new-hope/styled-components'; import { clearSelection } from '@salutejs/plasma-hope'; import { closeNotification } from '@salutejs/plasma-new-hope/styled-components'; @@ -618,10 +622,59 @@ export { CarouselItemProps } export { CarouselProps } -export { Cell } +// @public +export const Cell: FunctionComponent & (({ +size?: string | undefined; +view: string; +contentLeft?: ReactNode; +contentRight?: ReactNode; +alignContentLeft?: AlignProp | undefined; +alignContentRight?: AlignProp | undefined; +stretching?: "auto" | "fixed" | "filled" | undefined; +content?: ReactNode; +description?: string | undefined; +} & { +title?: string | undefined; +subtitle?: string | undefined; +label?: string | undefined; +children?: undefined; +} & HTMLAttributes & RefAttributes) | ({ +size?: string | undefined; +view: string; +contentLeft?: ReactNode; +contentRight?: ReactNode; +alignContentLeft?: AlignProp | undefined; +alignContentRight?: AlignProp | undefined; +stretching?: "auto" | "fixed" | "filled" | undefined; +content?: ReactNode; +description?: string | undefined; +} & { +title?: undefined; +subtitle?: undefined; +label?: undefined; +children?: ReactNode; +} & HTMLAttributes & RefAttributes))>; export { CellProps } +export { CellTextbox } + +export { CellTextboxLabel } + +export { CellTextboxSubtitle } + +export { CellTextboxTitle } + // @public export const Checkbox: FunctionComponent { +describe('plasma-web: Cell Styled', () => { const Cell = getComponent('Cell'); + const Avatar = getComponent('Avatar'); - // TODO: Перетащить подключение StandardTypoStyle в @salutejs/plasma-cy-utils - // после переезда на новую типографику для @salutejs/plasma-web - https://github.com/salute-developers/plasma/issues/69 - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( {children} ); + it('default', () => { + mount( + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> + , + ); + + cy.matchImageSnapshot(); + }); + it('simple', () => { mount( - } description="Тестовый контент для ячейки" /> + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_size', () => { + mount( + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> + , + ); + }); + + it('_align', () => { + mount( + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> + + } + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> , ); diff --git a/packages/plasma-web/src/components/Cell/Cell.config.ts b/packages/plasma-web/src/components/Cell/Cell.config.ts new file mode 100644 index 0000000000..8598427ac0 --- /dev/null +++ b/packages/plasma-web/src/components/Cell/Cell.config.ts @@ -0,0 +1,145 @@ +import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + variations: { + view: { + default: css` + ${cellTokens.cellColor}: var(--text-primary); + ${cellTokens.cellLabelColor}: var(--text-secondary); + ${cellTokens.cellTitleColor}: var(--text-primary); + ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellBackgroundColor}: transparent; + `, + }, + size: { + l: css` + ${cellTokens.cellWidth}: 15rem; + + ${cellTokens.cellPadding}: 0rem; + ${cellTokens.cellPaddingLeftContent}: 0rem; + ${cellTokens.cellPaddingContent}: 0rem; + ${cellTokens.cellPaddingRightContent}: 0rem; + + ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; + + ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); + ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); + ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); + ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); + ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); + ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + + ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); + ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); + ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); + ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + `, + m: css` + ${cellTokens.cellWidth}: 15rem; + + ${cellTokens.cellPadding}: 0rem; + ${cellTokens.cellPaddingLeftContent}: 0rem; + ${cellTokens.cellPaddingContent}: 0rem; + ${cellTokens.cellPaddingRightContent}: 0rem; + + ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; + + ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); + ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); + ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); + ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); + ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); + ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + + ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); + ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); + ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); + ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + `, + s: css` + ${cellTokens.cellWidth}: 15rem; + + ${cellTokens.cellPadding}: 0rem; + ${cellTokens.cellPaddingLeftContent}: 0rem; + ${cellTokens.cellPaddingContent}: 0rem; + ${cellTokens.cellPaddingRightContent}: 0rem; + + ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.375rem; + + ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); + ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); + ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); + ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + + ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); + ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); + ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + xs: css` + ${cellTokens.cellWidth}: 15rem; + + ${cellTokens.cellPadding}: 0rem; + ${cellTokens.cellPaddingLeftContent}: 0rem; + ${cellTokens.cellPaddingContent}: 0rem; + ${cellTokens.cellPaddingRightContent}: 0rem; + + ${cellTokens.cellTextboxGap}: 0.125rem; + ${cellTokens.cellGap}: 0.25rem; + + ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); + ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); + ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); + ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); + ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); + ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); + ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-web/src/components/Cell/Cell.stories.tsx b/packages/plasma-web/src/components/Cell/Cell.stories.tsx index da771dc04d..30e06f322c 100644 --- a/packages/plasma-web/src/components/Cell/Cell.stories.tsx +++ b/packages/plasma-web/src/components/Cell/Cell.stories.tsx @@ -1,37 +1,125 @@ import React from 'react'; import type { StoryObj, Meta } from '@storybook/react'; +import type { ComponentProps } from 'react'; +import { IconChevronRight } from '@salutejs/plasma-icons'; import styled from 'styled-components'; -import { IconStarFill } from '@salutejs/plasma-icons'; -import { additional } from '@salutejs/plasma-colors'; -import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { Cell } from '.'; -import type { CellProps } from '.'; +import { Avatar } from '../Avatar'; -const meta: Meta = { - title: 'Content/Cell', - component: Cell, - decorators: [InSpacingDecorator], +import { Cell, CellTextbox, CellTextboxTitle } from '.'; + +type StoryProps = ComponentProps & { + itemsCount?: number; + disableLeftContent?: boolean; + disableRightContent?: boolean; }; +type Story = StoryObj; -export default meta; +const sizes = ['l', 'm', 's', 'xs']; +const stretchingValues = ['fixed', 'filled', 'auto']; +const alignLeft = ['top', 'center', 'bottom']; +const alignRight = ['top', 'center', 'bottom']; -const StyledCellRating = styled(Cell)` - color: ${additional.h40[300]}; - margin-right: 0.75rem; -`; +type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined; +type SizesAvatar = 'l' | 'm' | 's'; + +const getSize = (size: SizesCell): SizesAvatar => { + if (size === 'xs' || !size) { + return 's'; + } -const StyledIconStarFill = styled(IconStarFill)` - transform: scale(0.75); + return size; +}; + +const ChevronRight = styled(IconChevronRight)` + color: var(--text-secondary); `; -export const Default: StoryObj = { +const meta: Meta = { + title: 'Content/Cell', + argTypes: { + size: { + options: sizes, + control: { + type: 'select', + }, + }, + stretching: { + options: stretchingValues, + control: { + type: 'select', + }, + }, + alignContentLeft: { + options: alignLeft, + control: { + type: 'select', + }, + }, + alignContentRight: { + options: alignRight, + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +export const Default: Story = { + args: { + size: 'm', + stretching: 'filled', + disableLeftContent: false, + disableRightContent: false, + alignContentLeft: 'center', + alignContentRight: 'center', + title: 'Title', + subtitle: 'Subtitle', + label: 'Label', + }, + render: ({ ...args }: StoryProps) => { + return ( + + ) + } + contentRight={!args.disableRightContent && } + {...args} + /> + ); + }, +}; + +export const WithContentTextboxCustom: Story = { args: { - description: '4.7', + size: 'm', + stretching: 'filled', }, - render: ({ description }) => { + render: ({ ...args }: StoryProps) => { + const MyStyledText = styled.div` + font-size: 12px; + font-weight: 600; + opacity: 0.5; + `; return ( - } description={description} /> + + } + contentRight={} + view="default" + size={args.size} + stretching={args.stretching} + > + + Title + My styled Text + + ); }, }; diff --git a/packages/plasma-web/src/components/Cell/Cell.ts b/packages/plasma-web/src/components/Cell/Cell.ts new file mode 100644 index 0000000000..6a29eea943 --- /dev/null +++ b/packages/plasma-web/src/components/Cell/Cell.ts @@ -0,0 +1,11 @@ +import { cellConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Cell.config'; + +const mergedConfig = mergeConfig(cellConfig, config); +const CellComponent = component(mergedConfig); + +/** + * Кнопка. + */ +export const Cell = CellComponent; diff --git a/packages/plasma-web/src/components/Cell/index.ts b/packages/plasma-web/src/components/Cell/index.ts index fc09d0a525..eed8af3061 100644 --- a/packages/plasma-web/src/components/Cell/index.ts +++ b/packages/plasma-web/src/components/Cell/index.ts @@ -1,2 +1,9 @@ -export { Cell } from '@salutejs/plasma-hope'; -export type { CellProps } from '@salutejs/plasma-hope'; +export { + CellTextbox, + CellTextboxLabel, + CellTextboxTitle, + CellTextboxSubtitle, +} from '@salutejs/plasma-new-hope/styled-components'; +export { Cell } from './Cell'; + +export type { CellProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/website/plasma-web-docs/docs/components/Cell.mdx b/website/plasma-web-docs/docs/components/Cell.mdx index 60ba7f5e8c..1ac5c9287b 100644 --- a/website/plasma-web-docs/docs/components/Cell.mdx +++ b/website/plasma-web-docs/docs/components/Cell.mdx @@ -6,9 +6,11 @@ title: Cell import { PropsTable, Description, StorybookLink } from '@site/src/components'; # Cell - - +Компонент ячейки. + + +Компонент представляет собой стилизировные слоты для контента. Также имеются вспомогательные компоненты ( Textbox, TextTitle, TextSubtitle, TextLabel ). Они представляют собой стилизированный текст и слот для них. ## Примеры @@ -16,14 +18,51 @@ import { PropsTable, Description, StorybookLink } from '@site/src/components'; ```tsx live import React from 'react'; import { Cell } from '@salutejs/plasma-web'; -import { IconHelp } from '@salutejs/plasma-icons'; +import { Avatar } from '@salutejs/plasma-web'; +import { IconChevronRight } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ + } + size="m" + contentRight={} + title="Title" + subtitle="Subtitle" + label="Label" + /> +
+ ); +} +``` + +### С использованием своих стилей или встроеных компонентов +```tsx live +import React from 'react'; +import { Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/plasma-web'; +import { Avatar } from '@salutejs/plasma-web'; +import { IconChevronRight } from '@salutejs/plasma-icons'; export function App() { return (
- } description="Тестовый контент для ячейки" /> + + } + size="m" + contentRight={} + > + + Label + Title + Subtitle +
Caption
+ +
); }