feat(new-hope): Cell web, b2c and docs

feat(new-hope): Documentation

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<PropsType<    {
+view: {
+default: string;
+};
+size: {
+l: string;
+m: string;
+s: string;
+xs: string;
+};
+}> & (({
+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<HTMLDivElement> & RefAttributes<HTMLDivElement>) | ({
+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<HTMLDivElement> & RefAttributes<HTMLDivElement>))>;
 
 export { CellProps }
 
+export { CellTextbox }
+
+export { CellTextboxLabel }
+
+export { CellTextboxSubtitle }
+
+export { CellTextboxTitle }
+
 // @public
 export const Checkbox: FunctionComponent<PropsType<    {
 size: {

packages/plasma-b2c/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);
+            `,
+        },
+    },
+};

packages/plasma-b2c/src/components/Cell/Cell.stories.tsx

@@ -1,39 +1,127 @@
 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<CellProps> = {
-    title: 'Content/Cell',
-    component: Cell,
-    decorators: [InSpacingDecorator],
+import { Cell, CellTextbox, CellTextboxTitle } from '.';
+
+type StoryProps = ComponentProps<typeof Cell> & {
+    itemsCount?: number;
+    enableLeftContent?: boolean;
+    enableRightContent?: boolean;
 };
+type Story = StoryObj<StoryProps>;
 
-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<CellProps>;
+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<typeof Cell> = {
+    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',
+        enableLeftContent: false,
+        enableRightContent: false,
+        alignContentLeft: 'center',
+        alignContentRight: 'center',
+        title: 'Title',
+        subtitle: 'Subtitle',
+        label: 'Label',
+    },
+    render: ({ ...args }: StoryProps) => {
+        return (
+            <Cell
+                contentLeft={
+                    !args.enableLeftContent && (
+                        <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    )
+                }
+                alignContentLeft={args.alignContentLeft}
+                contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
+                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 (
-            <StyledCellRating content={<StyledIconStarFill color={additional.h40[300]} />} description={description} />
+            <Cell
+                view="default"
+                size={args.size}
+                stretching={args.stretching}
+                contentLeft={
+                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                }
+                contentRight={<ChevronRight color="inheart" size="xs" />}
+            >
+                <CellTextbox>
+                    <CellTextboxTitle>Title</CellTextboxTitle>
+                    <MyStyledText>My styled Text</MyStyledText>
+                </CellTextbox>
+            </Cell>
         );
     },
 };

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;