@salutejs/plasma-new-hope 0.67.0-canary.1148.8444175533.0 → 0.67.0-canary.1148.8449317874.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Cell/Cell.js +3 -0
- package/cjs/components/Cell/Cell.js.map +1 -1
- package/cjs/components/Cell/Cell.tokens.js +2 -3
- package/cjs/components/Cell/Cell.tokens.js.map +1 -1
- package/es/components/Cell/Cell.js +3 -0
- package/es/components/Cell/Cell.js.map +1 -1
- package/es/components/Cell/Cell.tokens.js +2 -3
- package/es/components/Cell/Cell.tokens.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +97 -0
- package/styled-components/cjs/components/AvatarGroup/AvatarGroup.template-doc.mdx +29 -0
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +131 -0
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +162 -0
- package/styled-components/cjs/components/ButtonGroup/ButtonGroup.template-doc.mdx +123 -0
- package/styled-components/cjs/components/Calendar/Calendar.template-doc.mdx +208 -0
- package/styled-components/cjs/components/Cell/Cell.js +3 -0
- package/styled-components/cjs/components/Cell/Cell.tokens.js +2 -3
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +44 -0
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +90 -0
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +237 -0
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +76 -0
- package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +170 -0
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +80 -0
- package/styled-components/cjs/components/Grid/Grid.template-doc.mdx +142 -0
- package/styled-components/cjs/components/Image/Image.template-doc.mdx +26 -0
- package/styled-components/cjs/components/Indicator/Indicator.template-doc.mdx +76 -0
- package/styled-components/cjs/components/Link/Link.template-doc.mdx +23 -0
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +56 -0
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +59 -0
- package/styled-components/cjs/components/Overlay/Overlay.template-doc.mdx +10 -0
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +72 -0
- package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +209 -0
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +38 -0
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +61 -0
- package/styled-components/cjs/components/Select/Select.template-doc.mdx +115 -0
- package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +103 -0
- package/styled-components/cjs/components/Spinner/Spinner.template-doc.mdx +21 -0
- package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +24 -0
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +94 -0
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +88 -0
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +112 -0
- package/styled-components/cjs/components/Toast/Toast.template-doc.mdx +153 -0
- package/styled-components/cjs/components/Tooltip/Tooltip.template-doc.mdx +30 -0
- package/styled-components/cjs/components/Typography/Typography.template-doc.mdx +127 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.config.js +5 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.stories.tsx +16 -19
- package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.config.js +5 -5
- package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.stories.tsx +16 -19
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +97 -0
- package/styled-components/es/components/AvatarGroup/AvatarGroup.template-doc.mdx +29 -0
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +131 -0
- package/styled-components/es/components/Button/Button.template-doc.mdx +162 -0
- package/styled-components/es/components/ButtonGroup/ButtonGroup.template-doc.mdx +123 -0
- package/styled-components/es/components/Calendar/Calendar.template-doc.mdx +208 -0
- package/styled-components/es/components/Cell/Cell.js +3 -0
- package/styled-components/es/components/Cell/Cell.tokens.js +2 -3
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +44 -0
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +90 -0
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +237 -0
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +76 -0
- package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +170 -0
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +80 -0
- package/styled-components/es/components/Grid/Grid.template-doc.mdx +142 -0
- package/styled-components/es/components/Image/Image.template-doc.mdx +26 -0
- package/styled-components/es/components/Indicator/Indicator.template-doc.mdx +76 -0
- package/styled-components/es/components/Link/Link.template-doc.mdx +23 -0
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +56 -0
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +59 -0
- package/styled-components/es/components/Overlay/Overlay.template-doc.mdx +10 -0
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +72 -0
- package/styled-components/es/components/Popup/Popup.template-doc.mdx +209 -0
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +38 -0
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +61 -0
- package/styled-components/es/components/Select/Select.template-doc.mdx +115 -0
- package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +103 -0
- package/styled-components/es/components/Spinner/Spinner.template-doc.mdx +21 -0
- package/styled-components/es/components/Switch/Switch.template-doc.mdx +24 -0
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +94 -0
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +88 -0
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +112 -0
- package/styled-components/es/components/Toast/Toast.template-doc.mdx +153 -0
- package/styled-components/es/components/Tooltip/Tooltip.template-doc.mdx +30 -0
- package/styled-components/es/components/Typography/Typography.template-doc.mdx +127 -0
- package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.config.js +5 -5
- package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.stories.tsx +16 -19
- package/styled-components/es/examples/plasma_web/components/Cell/Cell.config.js +5 -5
- package/styled-components/es/examples/plasma_web/components/Cell/Cell.stories.tsx +16 -19
- package/types/components/Cell/Cell.d.ts +4 -2
- package/types/components/Cell/Cell.d.ts.map +1 -1
- package/types/components/Cell/Cell.tokens.d.ts +0 -1
- package/types/components/Cell/Cell.tokens.d.ts.map +1 -1
- package/types/components/Cell/Cell.types.d.ts +5 -2
- package/types/components/Cell/Cell.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Cell/Cell.d.ts +2 -1
- package/types/examples/plasma_b2c/components/Cell/Cell.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Cell/Cell.d.ts +2 -1
- package/types/examples/plasma_web/components/Cell/Cell.d.ts.map +1 -1
@@ -9,18 +9,21 @@ import { IconChevronLeft } from '../../../../components/_Icon';
|
|
9
9
|
|
10
10
|
import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
|
11
11
|
|
12
|
-
type StoryProps = ComponentProps<typeof Cell> & {
|
12
|
+
type StoryProps = ComponentProps<typeof Cell> & {
|
13
|
+
itemsCount?: number;
|
14
|
+
enableLeftContent?: boolean;
|
15
|
+
enableRightContent?: boolean;
|
16
|
+
};
|
13
17
|
type Story = StoryObj<StoryProps>;
|
14
18
|
|
15
|
-
const views = ['default'];
|
16
19
|
const sizes = ['l', 'm', 's', 'xs'];
|
17
|
-
const stretchingValues = ['fixed', 'filled'];
|
20
|
+
const stretchingValues = ['fixed', 'filled', 'auto'];
|
18
21
|
|
19
|
-
type
|
20
|
-
type
|
22
|
+
type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined;
|
23
|
+
type SizesAvatar = 'l' | 'm' | 's';
|
21
24
|
|
22
|
-
const getSize = (size:
|
23
|
-
if (size === 'xs') {
|
25
|
+
const getSize = (size: SizesCell): SizesAvatar => {
|
26
|
+
if (size === 'xs' || !size) {
|
24
27
|
return 's';
|
25
28
|
}
|
26
29
|
|
@@ -37,12 +40,6 @@ const meta: Meta<typeof Cell> = {
|
|
37
40
|
type: 'select',
|
38
41
|
},
|
39
42
|
},
|
40
|
-
view: {
|
41
|
-
options: views,
|
42
|
-
control: {
|
43
|
-
type: 'select',
|
44
|
-
},
|
45
|
-
},
|
46
43
|
stretching: {
|
47
44
|
options: stretchingValues,
|
48
45
|
control: {
|
@@ -61,17 +58,20 @@ const ChevronRight = styled(IconChevronLeft)`
|
|
61
58
|
|
62
59
|
export const Default: Story = {
|
63
60
|
args: {
|
64
|
-
view: 'default',
|
65
61
|
size: 'm',
|
66
62
|
stretching: 'filled',
|
63
|
+
enableLeftContent: false,
|
64
|
+
enableRightContent: false,
|
67
65
|
},
|
68
66
|
render: ({ ...args }: StoryProps) => {
|
69
67
|
return (
|
70
68
|
<Cell
|
71
69
|
contentLeft={
|
72
|
-
|
70
|
+
!args.enableLeftContent && (
|
71
|
+
<Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
|
72
|
+
)
|
73
73
|
}
|
74
|
-
contentRight={<ChevronRight color="inherit" size="xs" />}
|
74
|
+
contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
|
75
75
|
title="Title"
|
76
76
|
subtitle="Subtitle"
|
77
77
|
label="Label"
|
@@ -83,7 +83,6 @@ export const Default: Story = {
|
|
83
83
|
|
84
84
|
export const WithContentTextbox: Story = {
|
85
85
|
args: {
|
86
|
-
view: 'default',
|
87
86
|
size: 'm',
|
88
87
|
stretching: 'filled',
|
89
88
|
},
|
@@ -104,7 +103,6 @@ export const WithContentTextbox: Story = {
|
|
104
103
|
|
105
104
|
export const WithContentTextboxWithTags: Story = {
|
106
105
|
args: {
|
107
|
-
view: 'default',
|
108
106
|
size: 'm',
|
109
107
|
stretching: 'filled',
|
110
108
|
},
|
@@ -129,7 +127,6 @@ export const WithContentTextboxWithTags: Story = {
|
|
129
127
|
|
130
128
|
export const WithContentTextboxCustom: Story = {
|
131
129
|
args: {
|
132
|
-
view: 'default',
|
133
130
|
size: 'm',
|
134
131
|
stretching: 'filled',
|
135
132
|
},
|
@@ -2,7 +2,7 @@ import { css } from 'styled-components';
|
|
2
2
|
import { cellTokens } from '../../../../components/Cell';
|
3
3
|
export var config = {
|
4
4
|
defaults: {
|
5
|
-
view: '
|
5
|
+
view: 'default',
|
6
6
|
size: 'm',
|
7
7
|
stretching: 'filled'
|
8
8
|
},
|
@@ -11,10 +11,10 @@ export var config = {
|
|
11
11
|
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], cellTokens.cellColor, cellTokens.cellLabelColor, cellTokens.cellTitleColor, cellTokens.cellSubtitleColor, cellTokens.cellBackgroundColor)
|
12
12
|
},
|
13
13
|
size: {
|
14
|
-
l: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-
|
15
|
-
m: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-
|
16
|
-
s: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-
|
17
|
-
xs: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-
|
14
|
+
l: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
|
15
|
+
m: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
|
16
|
+
s: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
|
17
|
+
xs: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight)
|
18
18
|
},
|
19
19
|
stretching: {
|
20
20
|
auto: /*#__PURE__*/css([""]),
|
@@ -9,18 +9,21 @@ import { IconChevronLeft } from '../../../../components/_Icon';
|
|
9
9
|
|
10
10
|
import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
|
11
11
|
|
12
|
-
type StoryProps = ComponentProps<typeof Cell> & {
|
12
|
+
type StoryProps = ComponentProps<typeof Cell> & {
|
13
|
+
itemsCount?: number;
|
14
|
+
enableLeftContent?: boolean;
|
15
|
+
enableRightContent?: boolean;
|
16
|
+
};
|
13
17
|
type Story = StoryObj<StoryProps>;
|
14
18
|
|
15
|
-
const views = ['default'];
|
16
19
|
const sizes = ['l', 'm', 's', 'xs'];
|
17
|
-
const stretchingValues = ['fixed', 'filled'];
|
20
|
+
const stretchingValues = ['fixed', 'filled', 'auto'];
|
18
21
|
|
19
|
-
type
|
20
|
-
type
|
22
|
+
type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined | undefined;
|
23
|
+
type SizesAvatar = 'l' | 'm' | 's';
|
21
24
|
|
22
|
-
const getSize = (size:
|
23
|
-
if (size === 'xs') {
|
25
|
+
const getSize = (size: SizesCell): SizesAvatar => {
|
26
|
+
if (size === 'xs' || !size) {
|
24
27
|
return 's';
|
25
28
|
}
|
26
29
|
|
@@ -37,12 +40,6 @@ const meta: Meta<typeof Cell> = {
|
|
37
40
|
type: 'select',
|
38
41
|
},
|
39
42
|
},
|
40
|
-
view: {
|
41
|
-
options: views,
|
42
|
-
control: {
|
43
|
-
type: 'select',
|
44
|
-
},
|
45
|
-
},
|
46
43
|
stretching: {
|
47
44
|
options: stretchingValues,
|
48
45
|
control: {
|
@@ -61,17 +58,20 @@ const ChevronRight = styled(IconChevronLeft)`
|
|
61
58
|
|
62
59
|
export const Default: Story = {
|
63
60
|
args: {
|
64
|
-
view: 'default',
|
65
61
|
size: 'm',
|
66
62
|
stretching: 'filled',
|
63
|
+
enableLeftContent: false,
|
64
|
+
enableRightContent: false,
|
67
65
|
},
|
68
66
|
render: ({ ...args }: StoryProps) => {
|
69
67
|
return (
|
70
68
|
<Cell
|
71
69
|
contentLeft={
|
72
|
-
|
70
|
+
!args.enableLeftContent && (
|
71
|
+
<Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
|
72
|
+
)
|
73
73
|
}
|
74
|
-
contentRight={<ChevronRight color="inherit" size="xs" />}
|
74
|
+
contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
|
75
75
|
title="Title"
|
76
76
|
subtitle="Subtitle"
|
77
77
|
label="Label"
|
@@ -83,7 +83,6 @@ export const Default: Story = {
|
|
83
83
|
|
84
84
|
export const WithContentTextbox: Story = {
|
85
85
|
args: {
|
86
|
-
view: 'default',
|
87
86
|
size: 'm',
|
88
87
|
stretching: 'filled',
|
89
88
|
},
|
@@ -104,7 +103,6 @@ export const WithContentTextbox: Story = {
|
|
104
103
|
|
105
104
|
export const WithContentTextboxWithTags: Story = {
|
106
105
|
args: {
|
107
|
-
view: 'default',
|
108
106
|
size: 'm',
|
109
107
|
stretching: 'filled',
|
110
108
|
},
|
@@ -129,7 +127,6 @@ export const WithContentTextboxWithTags: Story = {
|
|
129
127
|
|
130
128
|
export const WithContentTextboxCustom: Story = {
|
131
129
|
args: {
|
132
|
-
view: 'default',
|
133
130
|
size: 'm',
|
134
131
|
stretching: 'filled',
|
135
132
|
},
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
2
2
|
import { RootProps } from '../../engines';
|
3
3
|
import type { CellProps } from './Cell.types';
|
4
4
|
export declare const cellRoot: (Root: RootProps<HTMLSelectElement, CellProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
5
|
-
size
|
5
|
+
size?: string | undefined;
|
6
|
+
view: string;
|
6
7
|
contentLeft?: React.ReactNode;
|
7
8
|
contentRight?: React.ReactNode;
|
8
9
|
content?: React.ReactNode;
|
@@ -17,7 +18,8 @@ export declare const cellConfig: {
|
|
17
18
|
name: string;
|
18
19
|
tag: string;
|
19
20
|
layout: (Root: RootProps<HTMLSelectElement, CellProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
20
|
-
size
|
21
|
+
size?: string | undefined;
|
22
|
+
view: string;
|
21
23
|
contentLeft?: React.ReactNode;
|
22
24
|
contentRight?: React.ReactNode;
|
23
25
|
content?: React.ReactNode;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAW9C,eAAO,MAAM,QAAQ,SAAU,UAAU,iBAAiB,EAAE,SAAS,CAAC
|
1
|
+
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAW9C,eAAO,MAAM,QAAQ,SAAU,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;;2CAuChE,CAAC;AAEP,eAAO,MAAM,UAAU;;;mBAzCQ,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DrE,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Cell.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClB,CAAC;AAEF,eAAO,MAAM,OAAO
|
1
|
+
{"version":3,"file":"Cell.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAUnB,CAAC"}
|
@@ -1,12 +1,15 @@
|
|
1
1
|
import type { HTMLAttributes, ReactNode } from 'react';
|
2
2
|
export declare type AlignLeftProp = 'center' | 'top' | 'bottom';
|
3
3
|
export declare type AlignRightProp = 'center' | 'top';
|
4
|
-
export declare type Sizes = 'l' | 'm' | 's' | 'xs';
|
5
4
|
declare type CustomCellProps = {
|
6
5
|
/**
|
7
6
|
* Размер
|
8
7
|
*/
|
9
|
-
size
|
8
|
+
size?: string;
|
9
|
+
/**
|
10
|
+
* Размер
|
11
|
+
*/
|
12
|
+
view: string;
|
10
13
|
/**
|
11
14
|
* Слот для контента слева, например `Icon`
|
12
15
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Cell.types.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,oBAAY,aAAa,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AACxD,oBAAY,cAAc,GAAG,QAAQ,GAAG,KAAK,CAAC;
|
1
|
+
{"version":3,"file":"Cell.types.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,oBAAY,aAAa,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AACxD,oBAAY,cAAc,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE9C,aAAK,eAAe,GAAG;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEzC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,oBAAY,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,eAAe,CAAC"}
|
@@ -16,7 +16,8 @@ export declare const Cell: import("react").FunctionComponent<import("../../../..
|
|
16
16
|
fixed: import("@linaria/core").LinariaClassName;
|
17
17
|
};
|
18
18
|
}> & import("react").HTMLAttributes<HTMLDivElement> & {
|
19
|
-
size
|
19
|
+
size?: string | undefined;
|
20
|
+
view: string;
|
20
21
|
contentLeft?: import("react").ReactNode;
|
21
22
|
contentRight?: import("react").ReactNode;
|
22
23
|
content?: import("react").ReactNode;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Cell/Cell.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMtG,eAAO,MAAM,IAAI
|
1
|
+
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Cell/Cell.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMtG,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAA0B,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}
|
@@ -16,7 +16,8 @@ export declare const Cell: import("react").FunctionComponent<import("../../../..
|
|
16
16
|
fixed: import("@linaria/core").LinariaClassName;
|
17
17
|
};
|
18
18
|
}> & import("react").HTMLAttributes<HTMLDivElement> & {
|
19
|
-
size
|
19
|
+
size?: string | undefined;
|
20
|
+
view: string;
|
20
21
|
contentLeft?: import("react").ReactNode;
|
21
22
|
contentRight?: import("react").ReactNode;
|
22
23
|
content?: import("react").ReactNode;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Cell/Cell.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMtG,eAAO,MAAM,IAAI
|
1
|
+
{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Cell/Cell.ts"],"names":[],"mappings":";AAAA,OAAO,EAAc,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMtG,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAA0B,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}
|