@salutejs/plasma-new-hope 0.67.0-canary.1148.8444175533.0 → 0.67.0-canary.1148.8449780048.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. package/cjs/components/Cell/Cell.js +3 -0
  2. package/cjs/components/Cell/Cell.js.map +1 -1
  3. package/cjs/components/Cell/Cell.tokens.js +2 -3
  4. package/cjs/components/Cell/Cell.tokens.js.map +1 -1
  5. package/es/components/Cell/Cell.js +3 -0
  6. package/es/components/Cell/Cell.js.map +1 -1
  7. package/es/components/Cell/Cell.tokens.js +2 -3
  8. package/es/components/Cell/Cell.tokens.js.map +1 -1
  9. package/package.json +2 -2
  10. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +97 -0
  11. package/styled-components/cjs/components/AvatarGroup/AvatarGroup.template-doc.mdx +29 -0
  12. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +131 -0
  13. package/styled-components/cjs/components/Button/Button.template-doc.mdx +162 -0
  14. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.template-doc.mdx +123 -0
  15. package/styled-components/cjs/components/Calendar/Calendar.template-doc.mdx +208 -0
  16. package/styled-components/cjs/components/Cell/Cell.js +3 -0
  17. package/styled-components/cjs/components/Cell/Cell.tokens.js +2 -3
  18. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +44 -0
  19. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +90 -0
  20. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +237 -0
  21. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +76 -0
  22. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +170 -0
  23. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +80 -0
  24. package/styled-components/cjs/components/Grid/Grid.template-doc.mdx +142 -0
  25. package/styled-components/cjs/components/Image/Image.template-doc.mdx +26 -0
  26. package/styled-components/cjs/components/Indicator/Indicator.template-doc.mdx +76 -0
  27. package/styled-components/cjs/components/Link/Link.template-doc.mdx +23 -0
  28. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +56 -0
  29. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +59 -0
  30. package/styled-components/cjs/components/Overlay/Overlay.template-doc.mdx +10 -0
  31. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +72 -0
  32. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +209 -0
  33. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +38 -0
  34. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +61 -0
  35. package/styled-components/cjs/components/Select/Select.template-doc.mdx +115 -0
  36. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +103 -0
  37. package/styled-components/cjs/components/Spinner/Spinner.template-doc.mdx +21 -0
  38. package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +24 -0
  39. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +94 -0
  40. package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +88 -0
  41. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +112 -0
  42. package/styled-components/cjs/components/Toast/Toast.template-doc.mdx +153 -0
  43. package/styled-components/cjs/components/Tooltip/Tooltip.template-doc.mdx +30 -0
  44. package/styled-components/cjs/components/Typography/Typography.template-doc.mdx +127 -0
  45. package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.config.js +5 -5
  46. package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.stories.tsx +16 -19
  47. package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.config.js +5 -5
  48. package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.stories.tsx +16 -19
  49. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +97 -0
  50. package/styled-components/es/components/AvatarGroup/AvatarGroup.template-doc.mdx +29 -0
  51. package/styled-components/es/components/Badge/Badge.template-doc.mdx +131 -0
  52. package/styled-components/es/components/Button/Button.template-doc.mdx +162 -0
  53. package/styled-components/es/components/ButtonGroup/ButtonGroup.template-doc.mdx +123 -0
  54. package/styled-components/es/components/Calendar/Calendar.template-doc.mdx +208 -0
  55. package/styled-components/es/components/Cell/Cell.js +3 -0
  56. package/styled-components/es/components/Cell/Cell.tokens.js +2 -3
  57. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +44 -0
  58. package/styled-components/es/components/Chip/Chip.template-doc.mdx +90 -0
  59. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +237 -0
  60. package/styled-components/es/components/Counter/Counter.template-doc.mdx +76 -0
  61. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +170 -0
  62. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +80 -0
  63. package/styled-components/es/components/Grid/Grid.template-doc.mdx +142 -0
  64. package/styled-components/es/components/Image/Image.template-doc.mdx +26 -0
  65. package/styled-components/es/components/Indicator/Indicator.template-doc.mdx +76 -0
  66. package/styled-components/es/components/Link/Link.template-doc.mdx +23 -0
  67. package/styled-components/es/components/Modal/Modal.template-doc.mdx +56 -0
  68. package/styled-components/es/components/Notification/Notification.template-doc.mdx +59 -0
  69. package/styled-components/es/components/Overlay/Overlay.template-doc.mdx +10 -0
  70. package/styled-components/es/components/Popover/Popover.template-doc.mdx +72 -0
  71. package/styled-components/es/components/Popup/Popup.template-doc.mdx +209 -0
  72. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +38 -0
  73. package/styled-components/es/components/Segment/Segment.template-doc.mdx +61 -0
  74. package/styled-components/es/components/Select/Select.template-doc.mdx +115 -0
  75. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +103 -0
  76. package/styled-components/es/components/Spinner/Spinner.template-doc.mdx +21 -0
  77. package/styled-components/es/components/Switch/Switch.template-doc.mdx +24 -0
  78. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +94 -0
  79. package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +88 -0
  80. package/styled-components/es/components/TextField/TextField.template-doc.mdx +112 -0
  81. package/styled-components/es/components/Toast/Toast.template-doc.mdx +153 -0
  82. package/styled-components/es/components/Tooltip/Tooltip.template-doc.mdx +30 -0
  83. package/styled-components/es/components/Typography/Typography.template-doc.mdx +127 -0
  84. package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.config.js +5 -5
  85. package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.stories.tsx +16 -19
  86. package/styled-components/es/examples/plasma_web/components/Cell/Cell.config.js +5 -5
  87. package/styled-components/es/examples/plasma_web/components/Cell/Cell.stories.tsx +16 -19
  88. package/types/components/Cell/Cell.d.ts +4 -2
  89. package/types/components/Cell/Cell.d.ts.map +1 -1
  90. package/types/components/Cell/Cell.tokens.d.ts +0 -1
  91. package/types/components/Cell/Cell.tokens.d.ts.map +1 -1
  92. package/types/components/Cell/Cell.types.d.ts +5 -2
  93. package/types/components/Cell/Cell.types.d.ts.map +1 -1
  94. package/types/examples/plasma_b2c/components/Cell/Cell.d.ts +2 -1
  95. package/types/examples/plasma_b2c/components/Cell/Cell.d.ts.map +1 -1
  96. package/types/examples/plasma_web/components/Cell/Cell.d.ts +2 -1
  97. 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> & { itemsCount?: number };
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 sizesCell = 'xs' | 'l' | 'm' | 's';
20
- type sizesAvatar = 'l' | 'm' | 's';
22
+ type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined;
23
+ type SizesAvatar = 'l' | 'm' | 's';
21
24
 
22
- const getSize = (size: sizesCell): sizesAvatar => {
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
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
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: 'primary',
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-regular-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-regular-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-regular-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-regular-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-regular-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-regular-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-regular-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-regular-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-regular-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-regular-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-regular-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-regular-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)
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> & { itemsCount?: number };
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 sizesCell = 'xs' | 'l' | 'm' | 's';
20
- type sizesAvatar = 'l' | 'm' | 's';
22
+ type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined | undefined;
23
+ type SizesAvatar = 'l' | 'm' | 's';
21
24
 
22
- const getSize = (size: sizesCell): sizesAvatar => {
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
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
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: import("./Cell.types").Sizes;
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: import("./Cell.types").Sizes;
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;;;;;;;;;;;2CAsChE,CAAC;AAEP,eAAO,MAAM,UAAU;;;mBAxCQ,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DrE,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"}
@@ -31,7 +31,6 @@ export declare const tokens: {
31
31
  cellSubtitleLineHeight: string;
32
32
  };
33
33
  export declare const classes: {
34
- cellStretch: string;
35
34
  autoStretching: string;
36
35
  filledStretching: string;
37
36
  fixedStretching: string;
@@ -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;;;;;;;;;;CAWnB,CAAC"}
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: Sizes;
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;AAC9C,oBAAY,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAE3C,aAAK,eAAe,GAAG;IACnB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;IAEZ;;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"}
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: import("../../../../components/Cell/Cell.types").Sizes;
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;;;;;;;;;;;;;;;;;;;;;;;;;;qDAA0B,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}
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: import("../../../../components/Cell/Cell.types").Sizes;
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;;;;;;;;;;;;;;;;;;;;;;;;;;qDAA0B,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}
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"}