@salutejs/plasma-new-hope 0.150.0-canary.1443.10955942474.0 → 0.150.0-canary.1446.10958757493.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/ComboboxOld/Combobox.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +6 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +6 -5
- package/cjs/components/Dropdown/Dropdown.css +6 -5
- package/cjs/components/Dropdown/Dropdown.tokens.js +7 -5
- package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +6 -5
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +9 -3
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +27 -5
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_blclup.css +6 -0
- package/cjs/index.css +6 -5
- package/emotion/cjs/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/emotion/cjs/components/Dropdown/Dropdown.tokens.js +7 -5
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +9 -3
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +24 -14
- package/emotion/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/emotion/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/emotion/es/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/emotion/es/components/Dropdown/Dropdown.tokens.js +7 -5
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +10 -4
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +23 -13
- package/emotion/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/emotion/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/emotion/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/es/components/Combobox/ComboboxOld/Combobox.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +6 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +6 -5
- package/es/components/Dropdown/Dropdown.css +6 -5
- package/es/components/Dropdown/Dropdown.tokens.js +7 -5
- package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +6 -5
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +10 -4
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +27 -6
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_blclup.css +6 -0
- package/es/index.css +6 -5
- package/package.json +2 -2
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +7 -5
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +9 -3
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +14 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/cjs/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +8 -0
- package/styled-components/es/components/Dropdown/Dropdown.tokens.js +7 -5
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +10 -4
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +13 -4
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.config.js +5 -5
- package/styled-components/es/examples/plasma_web/components/Dropdown/Dropdown.stories.tsx +2 -0
- package/types/components/Dropdown/Dropdown.tokens.d.ts +7 -5
- package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +3 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +8 -0
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Dropdown/Dropdown.config.d.ts.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
- package/emotion/cjs/components/Steps/Steps.template-doc.mdx +0 -82
- package/emotion/es/components/Steps/Steps.template-doc.mdx +0 -82
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
- package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +0 -82
- package/styled-components/es/components/Steps/Steps.template-doc.mdx +0 -82
@@ -1,82 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
export const fullItems = [
|
50
|
-
{
|
51
|
-
title: 'Просто заголовок',
|
52
|
-
indicator: 1,
|
53
|
-
content: text,
|
54
|
-
progress: 'completed',
|
55
|
-
},
|
56
|
-
{
|
57
|
-
title: 'Очень длинный и неприятный заголовок',
|
58
|
-
indicator: 2,
|
59
|
-
content: text,
|
60
|
-
progress: 'inProgress',
|
61
|
-
},
|
62
|
-
{
|
63
|
-
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
-
indicator: 3,
|
65
|
-
content: text,
|
66
|
-
progress: 'notStarted',
|
67
|
-
},
|
68
|
-
];
|
69
|
-
|
70
|
-
// пример использования
|
71
|
-
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
-
);
|
74
|
-
|
75
|
-
<Steps
|
76
|
-
onClick={(item, index) => {
|
77
|
-
exampleItems[index].progress = "completed";
|
78
|
-
setExampleItems([...exampleItems]);
|
79
|
-
}}
|
80
|
-
items={exampleItems}
|
81
|
-
/>;
|
82
|
-
```
|
@@ -1,5 +0,0 @@
|
|
1
|
-
.s1gkzlls{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
2
|
-
.sz6s14y{margin-left:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}
|
3
|
-
.d1m97l2m{line-height:0;color:var(--plasma-dropdown-disclosure-icon-color);}
|
4
|
-
.soib72h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-flex:1;-ms-flex:1;flex:1;}
|
5
|
-
.w6l2f0g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;box-sizing:content-box;padding-top:var(--w6l2f0g-0);padding-right:var(--plasma-dropdown-item-padding-right);padding-bottom:var(--w6l2f0g-1);padding-left:var(--plasma-dropdown-item-padding-left);font-family:var(--plasma-dropdown-item-font-family);font-size:var(--plasma-dropdown-item-font-size);font-style:var(--plasma-dropdown-item-font-style);font-weight:var(--plasma-dropdown-item-letter-spacing);-webkit-letter-spacing:var(--plasma-dropdown-item-line-height);-moz-letter-spacing:var(--plasma-dropdown-item-line-height);-ms-letter-spacing:var(--plasma-dropdown-item-line-height);letter-spacing:var(--plasma-dropdown-item-line-height);line-height:var(--plasma-dropdown-item-font-weight);background:var(--plasma-dropdown-item-background);color:var(--plasma-dropdown-item-color);border-radius:var(--plasma-dropdown-item-border-radius);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;}.w6l2f0g:hover:not(.dropdown-item-is-disabled){cursor:pointer;background:var(--plasma-dropdown-item-background-hover);}.w6l2f0g.dropdown-item-is-active{background:var(--plasma-dropdown-item-background-hover);}.w6l2f0g.dropdown-item-is-disabled{opacity:var(--plasma-dropdown-disabled-opacity);cursor:not-allowed;}.w6l2f0g:focus{outline:none;}.w6l2f0g::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:block;box-sizing:content-box;border:0.0625rem solid transparent;border-radius:var(--plasma-dropdown-item-border-radius);-webkit-transition:none;transition:none;pointer-events:none;}.w6l2f0g.dropdown-item-is-focused:before{outline:none;box-shadow:0 0 0 0.0625rem var(--plasma-dropdown-focus-color);}
|
@@ -1,82 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
export const fullItems = [
|
50
|
-
{
|
51
|
-
title: 'Просто заголовок',
|
52
|
-
indicator: 1,
|
53
|
-
content: text,
|
54
|
-
progress: 'completed',
|
55
|
-
},
|
56
|
-
{
|
57
|
-
title: 'Очень длинный и неприятный заголовок',
|
58
|
-
indicator: 2,
|
59
|
-
content: text,
|
60
|
-
progress: 'inProgress',
|
61
|
-
},
|
62
|
-
{
|
63
|
-
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
-
indicator: 3,
|
65
|
-
content: text,
|
66
|
-
progress: 'notStarted',
|
67
|
-
},
|
68
|
-
];
|
69
|
-
|
70
|
-
// пример использования
|
71
|
-
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
-
);
|
74
|
-
|
75
|
-
<Steps
|
76
|
-
onClick={(item, index) => {
|
77
|
-
exampleItems[index].progress = "completed";
|
78
|
-
setExampleItems([...exampleItems]);
|
79
|
-
}}
|
80
|
-
items={exampleItems}
|
81
|
-
/>;
|
82
|
-
```
|
@@ -1,82 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
export const fullItems = [
|
50
|
-
{
|
51
|
-
title: 'Просто заголовок',
|
52
|
-
indicator: 1,
|
53
|
-
content: text,
|
54
|
-
progress: 'completed',
|
55
|
-
},
|
56
|
-
{
|
57
|
-
title: 'Очень длинный и неприятный заголовок',
|
58
|
-
indicator: 2,
|
59
|
-
content: text,
|
60
|
-
progress: 'inProgress',
|
61
|
-
},
|
62
|
-
{
|
63
|
-
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
-
indicator: 3,
|
65
|
-
content: text,
|
66
|
-
progress: 'notStarted',
|
67
|
-
},
|
68
|
-
];
|
69
|
-
|
70
|
-
// пример использования
|
71
|
-
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
-
);
|
74
|
-
|
75
|
-
<Steps
|
76
|
-
onClick={(item, index) => {
|
77
|
-
exampleItems[index].progress = "completed";
|
78
|
-
setExampleItems([...exampleItems]);
|
79
|
-
}}
|
80
|
-
items={exampleItems}
|
81
|
-
/>;
|
82
|
-
```
|