@salutejs/plasma-new-hope 0.112.1-canary.1325.10159014222.0 → 0.113.0-canary.1310.10159980270.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Breadcrumbs/Breadcrumbs.css +13 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.js +59 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.js.map +1 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +46 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +3 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +23 -0
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js.map +1 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +36 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +1 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +27 -0
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +1 -0
- package/cjs/components/Breadcrumbs/utils/index.js +53 -0
- package/cjs/components/Breadcrumbs/utils/index.js.map +1 -0
- package/cjs/components/Breadcrumbs/variations/_size/base.js +9 -0
- package/cjs/components/Breadcrumbs/variations/_size/base.js.map +1 -0
- package/cjs/components/Breadcrumbs/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Breadcrumbs/variations/_view/base.js +9 -0
- package/cjs/components/Breadcrumbs/variations/_view/base.js.map +1 -0
- package/cjs/components/Breadcrumbs/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/Modal/hooks/useModal.js +15 -0
- package/cjs/components/Modal/hooks/useModal.js.map +1 -1
- package/cjs/components/Popup/PopupContext.js +8 -23
- package/cjs/components/Popup/PopupContext.js.map +1 -1
- package/cjs/components/Popup/hooks/usePopup.js +0 -5
- package/cjs/components/Popup/hooks/usePopup.js.map +1 -1
- package/cjs/index.css +4 -0
- package/cjs/index.js +6 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.js +59 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +33 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +21 -0
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.types.js +5 -0
- package/emotion/cjs/components/Breadcrumbs/README.md +78 -0
- package/emotion/cjs/components/Breadcrumbs/index.js +31 -0
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +42 -0
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +20 -0
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +5 -0
- package/emotion/cjs/components/Breadcrumbs/utils/index.js +49 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_size/base.js +8 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_view/base.js +8 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/emotion/cjs/components/Modal/hooks/useModal.js +15 -0
- package/emotion/cjs/components/Popup/PopupContext.js +8 -23
- package/emotion/cjs/components/Popup/hooks/usePopup.js +0 -5
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.js +50 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +26 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.tokens.js +15 -0
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.types.js +1 -0
- package/emotion/es/components/Breadcrumbs/README.md +78 -0
- package/emotion/es/components/Breadcrumbs/index.js +2 -0
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +33 -0
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +13 -0
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +1 -0
- package/emotion/es/components/Breadcrumbs/utils/index.js +42 -0
- package/emotion/es/components/Breadcrumbs/variations/_size/base.js +2 -0
- package/emotion/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/emotion/es/components/Breadcrumbs/variations/_view/base.js +2 -0
- package/emotion/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/emotion/es/components/Modal/hooks/useModal.js +17 -2
- package/emotion/es/components/Popup/PopupContext.js +9 -24
- package/emotion/es/components/Popup/hooks/usePopup.js +0 -5
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/emotion/es/index.js +1 -0
- package/es/components/Breadcrumbs/Breadcrumbs.css +13 -0
- package/es/components/Breadcrumbs/Breadcrumbs.js +54 -0
- package/es/components/Breadcrumbs/Breadcrumbs.js.map +1 -0
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js +40 -0
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +1 -0
- package/es/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +3 -0
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js +18 -0
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js.map +1 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +32 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +1 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +21 -0
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +1 -0
- package/es/components/Breadcrumbs/utils/index.js +46 -0
- package/es/components/Breadcrumbs/utils/index.js.map +1 -0
- package/es/components/Breadcrumbs/variations/_size/base.js +5 -0
- package/es/components/Breadcrumbs/variations/_size/base.js.map +1 -0
- package/es/components/Breadcrumbs/variations/_size/base_x642ct.css +1 -0
- package/es/components/Breadcrumbs/variations/_view/base.js +5 -0
- package/es/components/Breadcrumbs/variations/_view/base.js.map +1 -0
- package/es/components/Breadcrumbs/variations/_view/base_x642ct.css +1 -0
- package/es/components/Modal/hooks/useModal.js +17 -2
- package/es/components/Modal/hooks/useModal.js.map +1 -1
- package/es/components/Popup/PopupContext.js +9 -24
- package/es/components/Popup/PopupContext.js.map +1 -1
- package/es/components/Popup/hooks/usePopup.js +0 -5
- package/es/components/Popup/hooks/usePopup.js.map +1 -1
- package/es/index.css +4 -0
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.js +59 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +32 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +21 -0
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.types.js +5 -0
- package/styled-components/cjs/components/Breadcrumbs/README.md +78 -0
- package/styled-components/cjs/components/Breadcrumbs/index.js +31 -0
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +42 -0
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +24 -0
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +5 -0
- package/styled-components/cjs/components/Breadcrumbs/utils/index.js +49 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_size/base.js +8 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_view/base.js +8 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/components/Modal/hooks/useModal.js +15 -0
- package/styled-components/cjs/components/Popup/PopupContext.js +8 -23
- package/styled-components/cjs/components/Popup/hooks/usePopup.js +0 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +25 -0
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.js +50 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +24 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.template-doc.mdx +96 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.tokens.js +15 -0
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.types.js +1 -0
- package/styled-components/es/components/Breadcrumbs/README.md +78 -0
- package/styled-components/es/components/Breadcrumbs/index.js +2 -0
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +33 -0
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +17 -0
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +1 -0
- package/styled-components/es/components/Breadcrumbs/utils/index.js +42 -0
- package/styled-components/es/components/Breadcrumbs/variations/_size/base.js +2 -0
- package/styled-components/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Breadcrumbs/variations/_view/base.js +2 -0
- package/styled-components/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/styled-components/es/components/Modal/hooks/useModal.js +17 -2
- package/styled-components/es/components/Popup/PopupContext.js +9 -24
- package/styled-components/es/components/Popup/hooks/usePopup.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +19 -0
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +5 -0
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +42 -0
- package/styled-components/es/index.js +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts +35 -0
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts +7 -0
- package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts.map +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts +16 -0
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts.map +1 -0
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts +38 -0
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts.map +1 -0
- package/types/components/Breadcrumbs/index.d.ts +4 -0
- package/types/components/Breadcrumbs/index.d.ts.map +1 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts +4 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts.map +1 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts +4 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts.map +1 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts +8 -0
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts.map +1 -0
- package/types/components/Breadcrumbs/utils/index.d.ts +7 -0
- package/types/components/Breadcrumbs/utils/index.d.ts.map +1 -0
- package/types/components/Breadcrumbs/variations/_size/base.d.ts +2 -0
- package/types/components/Breadcrumbs/variations/_size/base.d.ts.map +1 -0
- package/types/components/Breadcrumbs/variations/_view/base.d.ts +2 -0
- package/types/components/Breadcrumbs/variations/_view/base.d.ts.map +1 -0
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts +2 -2
- package/types/components/Modal/hooks/useModal.d.ts +1 -1
- package/types/components/Modal/hooks/useModal.d.ts.map +1 -1
- package/types/components/Popup/PopupContext.d.ts.map +1 -1
- package/types/components/Popup/hooks/usePopup.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts +18 -0
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts +19 -0
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts +18 -0
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts +19 -0
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Header/Header.d.ts +1 -1
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
@@ -0,0 +1,96 @@
|
|
1
|
+
---
|
2
|
+
id: breadcrumbs
|
3
|
+
title: Breadcrumbs
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# Breadcrumbs
|
9
|
+
<PropsTable name="Breadcrumbs" />
|
10
|
+
|
11
|
+
# Обычное использование
|
12
|
+
|
13
|
+
```tsx live
|
14
|
+
import React from 'react';
|
15
|
+
import { Breadcrumbs } from '@salutejs/plasma-web';
|
16
|
+
|
17
|
+
export function App() {
|
18
|
+
const items = [
|
19
|
+
{ title: 'Home', href: '/' },
|
20
|
+
{ title: 'About as', href: '/' },
|
21
|
+
{ renderItem: () => <span>Custom Item</span> },
|
22
|
+
{ title: 'Contacts' },
|
23
|
+
];
|
24
|
+
|
25
|
+
return (
|
26
|
+
<div>
|
27
|
+
<Breadcrumbs items={items} />
|
28
|
+
</div>
|
29
|
+
);
|
30
|
+
}
|
31
|
+
```
|
32
|
+
# Использование с shorter
|
33
|
+
```tsx live
|
34
|
+
import React from 'react';
|
35
|
+
import { Breadcrumbs } from '@salutejs/plasma-web';
|
36
|
+
|
37
|
+
export function App() {
|
38
|
+
const items = [
|
39
|
+
{ title: 'Home', href: '/' },
|
40
|
+
{ title: 'About as', href: '/' },
|
41
|
+
{ renderItem: () => <span>Custom Item</span> },
|
42
|
+
{ title: 'Contacts' },
|
43
|
+
];
|
44
|
+
|
45
|
+
return (
|
46
|
+
<div style={{"flexDirection": 'column'}}>
|
47
|
+
<div>
|
48
|
+
<Breadcrumbs items={items} showItems={2} />
|
49
|
+
</div>
|
50
|
+
<div>
|
51
|
+
<Breadcrumbs items={items} showItems={3} />
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
);
|
55
|
+
}
|
56
|
+
```
|
57
|
+
|
58
|
+
# Использование с кастомным элементом
|
59
|
+
```tsx live
|
60
|
+
import React from 'react';
|
61
|
+
import { Breadcrumbs, Dropdown } from '@salutejs/plasma-web';
|
62
|
+
|
63
|
+
export function App() {
|
64
|
+
const items = [
|
65
|
+
{ title: 'Home', href: '/' },
|
66
|
+
{ title: 'About as', href: '/' },
|
67
|
+
{
|
68
|
+
renderItem: () => {
|
69
|
+
const itemsDropdown = [
|
70
|
+
{
|
71
|
+
value: 'Custom Item 1',
|
72
|
+
label: 'Custom Item 1',
|
73
|
+
},
|
74
|
+
{
|
75
|
+
value: 'Custom Item 2',
|
76
|
+
label: 'Custom Item 2',
|
77
|
+
},
|
78
|
+
];
|
79
|
+
return (
|
80
|
+
<Dropdown variant="tight" placement="bottom" items={itemsDropdown} trigger="hover">
|
81
|
+
<span>...</span>
|
82
|
+
</Dropdown>
|
83
|
+
);
|
84
|
+
},
|
85
|
+
},
|
86
|
+
{ title: 'Contacts' },
|
87
|
+
];
|
88
|
+
|
89
|
+
|
90
|
+
return (
|
91
|
+
<div style={{height: '200px'}}>
|
92
|
+
<Breadcrumbs items={items} />
|
93
|
+
</div>
|
94
|
+
);
|
95
|
+
}
|
96
|
+
```
|
@@ -0,0 +1,15 @@
|
|
1
|
+
export var classes = {
|
2
|
+
breadcrumbsRoot: 'breadcrumbs-root'
|
3
|
+
};
|
4
|
+
export var tokens = {
|
5
|
+
breadcrumbsGap: '--plasma-breadcrumbs-gap',
|
6
|
+
breadcrumbsOpacity: '--plasma-breadcrumbs-opacity',
|
7
|
+
breadcrumbsFocusOutlineColor: '--plasma-breadcrumbs-focus-outline-color',
|
8
|
+
breadcrumbsColor: '--plasma-breadcrumbs-color',
|
9
|
+
breadcrumbsFontFamily: '--plasma-breadcrumbs-font-family',
|
10
|
+
breadcrumbsFontSize: '--plasma-breadcrumbs-font-size',
|
11
|
+
breadcrumbsFontStyle: '--plasma-breadcrumbs-font-style',
|
12
|
+
breadcrumbsFontWeight: '--plasma-breadcrumbs-font-weight',
|
13
|
+
breadcrumbsLetterSpacing: '--plasma-breadcrumbs-letter-spacing',
|
14
|
+
breadcrumbsLineHeight: '--plasma-breadcrumbs-line-height'
|
15
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,78 @@
|
|
1
|
+
Структура файлов:
|
2
|
+
|
3
|
+
- Breadcrumbs.types.ts
|
4
|
+
- Breadcrumbs.tokens.ts
|
5
|
+
- Breadcrumbs.tsx
|
6
|
+
- index.ts
|
7
|
+
- variants:
|
8
|
+
- - \_size:
|
9
|
+
- - - base.ts
|
10
|
+
- - - tokens.json
|
11
|
+
- ui:
|
12
|
+
- - BreadcrumbItem:
|
13
|
+
- - - BreadcrumbItem.tsx
|
14
|
+
- - BreadcrumbShorter:
|
15
|
+
- - - BreadcrumbShorter.tsx
|
16
|
+
- - BreadcrumbSeparator:
|
17
|
+
- - - BreadcrumbSeparator.tsx
|
18
|
+
|
19
|
+
Логика работы:
|
20
|
+
|
21
|
+
1. На вход идет 1 обязательный параметр: items
|
22
|
+
|
23
|
+
```jsx
|
24
|
+
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]}></Breadcreumbs>
|
25
|
+
```
|
26
|
+
|
27
|
+
2. Затем генерируется массив элементов хлебных крошек, между ними сепаратор ( если указан пропс, то используется элемент из параметра, иначе стандартный из BreadcrumbSeparator )
|
28
|
+
|
29
|
+
```jsx
|
30
|
+
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]} separator=">"></Breadcreumbs>
|
31
|
+
```
|
32
|
+
|
33
|
+
2.1. При генерации BreadcrumbItem, смотрит на href. Если он есть, то добавляется тег a, с указанной ссылкой, иначе ссылка не кликабельна
|
34
|
+
|
35
|
+
```jsx
|
36
|
+
<Breadcrumbs
|
37
|
+
items={[
|
38
|
+
{ title: 'Главная', href: '/' },
|
39
|
+
{ title: 'Контакты' }, // Без ссылки
|
40
|
+
]}
|
41
|
+
separator=">"
|
42
|
+
></Breadcreumbs>
|
43
|
+
```
|
44
|
+
|
45
|
+
3. Можно указать в item, вместо title и href - renderItem. Эта функция, которая возвращает любое, что придумал разработчик. кастомный шортер, определенный функционал для него ( например кнопку )
|
46
|
+
|
47
|
+
```jsx
|
48
|
+
const renderItem = () => {
|
49
|
+
return <Button>Контакты</Button>
|
50
|
+
}
|
51
|
+
<Breadcrumbs
|
52
|
+
items={[
|
53
|
+
{title: 'Главная', href: '/'},
|
54
|
+
{renderItem: renderItem}
|
55
|
+
{title: 'Адрес'}
|
56
|
+
]}
|
57
|
+
separator=">">
|
58
|
+
</Breadcreumbs>
|
59
|
+
```
|
60
|
+
|
61
|
+
ТАКЖЕ: Можно указать кол-во видимых элементов через параметр showItems. ShowItems: если указано четное число, например 2 - то распределяется равномерно по 1 с каждой стороны. Если нечетное, например 3 - то две будет справа и 1 слева. Все оставльное сокращается шортером
|
62
|
+
|
63
|
+
```jsx
|
64
|
+
const renderItem = () => {
|
65
|
+
return <Button>Контакты</Button>
|
66
|
+
}
|
67
|
+
<Breadcrumbs
|
68
|
+
items={[
|
69
|
+
{title: 'Главная', href: '/'},
|
70
|
+
{renderItem: renderItem}
|
71
|
+
{title: 'Адрес'}
|
72
|
+
]}
|
73
|
+
showItems={2}
|
74
|
+
separator=">">
|
75
|
+
</Breadcreumbs>
|
76
|
+
```
|
77
|
+
|
78
|
+
4. Затем все элементы рендерятся и показываются пользователю
|
@@ -0,0 +1,33 @@
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
7
|
+
import React, { useState } from 'react';
|
8
|
+
import { addSeparator } from '../../utils';
|
9
|
+
import { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';
|
10
|
+
export var BreadcrumbShorter = function BreadcrumbShorter(_ref) {
|
11
|
+
var children = _ref.children,
|
12
|
+
separator = _ref.separator;
|
13
|
+
var _useState = useState(false),
|
14
|
+
_useState2 = _slicedToArray(_useState, 2),
|
15
|
+
openShorter = _useState2[0],
|
16
|
+
setOpenShorter = _useState2[1];
|
17
|
+
var renderItems = addSeparator(children, separator);
|
18
|
+
var onKeyPress = function onKeyPress(event) {
|
19
|
+
event.persist();
|
20
|
+
if (event.keyCode === 13) {
|
21
|
+
setOpenShorter(true);
|
22
|
+
}
|
23
|
+
};
|
24
|
+
return /*#__PURE__*/React.createElement(StyledRoot, null, !openShorter && /*#__PURE__*/React.createElement(StyledShorter, {
|
25
|
+
tabIndex: 0,
|
26
|
+
onClick: function onClick() {
|
27
|
+
return setOpenShorter(true);
|
28
|
+
},
|
29
|
+
onKeyDown: onKeyPress
|
30
|
+
}, "..."), openShorter && /*#__PURE__*/React.createElement(StyledHidden, null, renderItems.map(function (item) {
|
31
|
+
return item;
|
32
|
+
})));
|
33
|
+
};
|
package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js
ADDED
@@ -0,0 +1,17 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
import { addFocus } from '../../../../mixins';
|
3
|
+
import { tokens } from '../../Breadcrumbs.tokens';
|
4
|
+
export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
|
5
|
+
componentId: "plasma-new-hope__sc-1shiits-0"
|
6
|
+
})([""]);
|
7
|
+
export var StyledShorter = /*#__PURE__*/styled.div.withConfig({
|
8
|
+
componentId: "plasma-new-hope__sc-1shiits-1"
|
9
|
+
})(["cursor:pointer;", ""], /*#__PURE__*/addFocus({
|
10
|
+
outlineOffset: '0.125rem',
|
11
|
+
outlineSize: '0.125rem',
|
12
|
+
outlineRadius: '0',
|
13
|
+
outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
|
14
|
+
}));
|
15
|
+
export var StyledHidden = /*#__PURE__*/styled.div.withConfig({
|
16
|
+
componentId: "plasma-new-hope__sc-1shiits-2"
|
17
|
+
})(["display:flex;align-items:center;gap:var(", ");"], tokens.breadcrumbsGap);
|
package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';
|
3
|
+
import { StyledLink } from '../Breadcrumbs.styles';
|
4
|
+
export var shortItems = function shortItems(items, renderSeparator, showItems) {
|
5
|
+
if (!showItems || showItems < 2 || items.length <= showItems) {
|
6
|
+
return items;
|
7
|
+
}
|
8
|
+
var leftSlice = Math.floor(showItems / 2);
|
9
|
+
var rightSlice = items.length - leftSlice - showItems % 2;
|
10
|
+
var renderItems = items.slice(leftSlice, rightSlice);
|
11
|
+
var shorter = /*#__PURE__*/React.createElement(BreadcrumbShorter, {
|
12
|
+
separator: renderSeparator
|
13
|
+
}, renderItems);
|
14
|
+
items.splice(leftSlice, rightSlice - leftSlice, shorter);
|
15
|
+
return items;
|
16
|
+
};
|
17
|
+
export var convertIconSize = function convertIconSize(size) {
|
18
|
+
switch (size) {
|
19
|
+
case 's':
|
20
|
+
case 'xs':
|
21
|
+
return 'xs';
|
22
|
+
default:
|
23
|
+
return 's';
|
24
|
+
}
|
25
|
+
};
|
26
|
+
export var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
27
|
+
return shortItems(items.map(function (item) {
|
28
|
+
if ('renderItem' in item) {
|
29
|
+
return item.renderItem();
|
30
|
+
}
|
31
|
+
return /*#__PURE__*/React.createElement(StyledLink, {
|
32
|
+
tabIndex: 0,
|
33
|
+
href: item.href,
|
34
|
+
isHref: !!item.href
|
35
|
+
}, item.title);
|
36
|
+
}), renderSeparator, showItems);
|
37
|
+
};
|
38
|
+
export var addSeparator = function addSeparator(items, renderSeparator) {
|
39
|
+
return items.flatMap(function (item, idx) {
|
40
|
+
return idx < items.length - 1 ? [item, renderSeparator] : [item];
|
41
|
+
});
|
42
|
+
};
|
File without changes
|
File without changes
|
@@ -4,18 +4,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
4
4
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
5
5
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
6
6
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
7
|
-
import { useCallback, useEffect } from 'react';
|
8
|
-
import { getIdLastModal } from '../ModalContext';
|
7
|
+
import { useCallback, useEffect, useRef } from 'react';
|
8
|
+
import { getIdLastModal, hasModals } from '../ModalContext';
|
9
9
|
import { usePopupContext } from '../../Popup';
|
10
10
|
var ESCAPE_KEYCODE = 27;
|
11
11
|
export var useModal = function useModal(_ref) {
|
12
12
|
var id = _ref.id,
|
13
|
+
isOpen = _ref.isOpen,
|
13
14
|
popupInfo = _ref.popupInfo,
|
14
15
|
onEscKeyDown = _ref.onEscKeyDown,
|
15
16
|
onClose = _ref.onClose,
|
16
17
|
_ref$closeOnEsc = _ref.closeOnEsc,
|
17
18
|
closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc;
|
18
19
|
var popupController = usePopupContext();
|
20
|
+
var overflow = useRef(document.body.style.overflowY);
|
19
21
|
|
20
22
|
// При ESC закрывает текущее окно, если это возможно
|
21
23
|
var onKeyDown = useCallback(function (event) {
|
@@ -38,6 +40,19 @@ export var useModal = function useModal(_ref) {
|
|
38
40
|
window.removeEventListener('keydown', onKeyDown);
|
39
41
|
};
|
40
42
|
}, [onClose, onEscKeyDown, popupController.items, closeOnEsc]);
|
43
|
+
|
44
|
+
// linaria не поддерживает динамический global
|
45
|
+
useEffect(function () {
|
46
|
+
if (isOpen) {
|
47
|
+
overflow.current = document.body.style.overflowY;
|
48
|
+
document.body.style.overflowY = 'hidden';
|
49
|
+
}
|
50
|
+
}, [isOpen]);
|
51
|
+
useEffect(function () {
|
52
|
+
if (!isOpen && !hasModals(popupController.items)) {
|
53
|
+
document.body.style.overflowY = overflow.current;
|
54
|
+
}
|
55
|
+
}, [isOpen, overflow.current, popupController.items]);
|
41
56
|
var modalInfo = _objectSpread({
|
42
57
|
id: id,
|
43
58
|
info: {
|
@@ -8,8 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
8
8
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
9
9
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
11
|
-
import React, { createContext, useEffect, useState, useContext
|
12
|
-
import { hasModals } from '../Modal/ModalContext';
|
11
|
+
import React, { createContext, useEffect, useState, useContext } from 'react';
|
13
12
|
export var POPUP_PORTAL_ID = 'plasma-popup-root';
|
14
13
|
var items = [];
|
15
14
|
var PopupContext = /*#__PURE__*/createContext({
|
@@ -26,36 +25,22 @@ export var usePopupContext = function usePopupContext() {
|
|
26
25
|
};
|
27
26
|
export var PopupProvider = function PopupProvider(_ref) {
|
28
27
|
var children = _ref.children;
|
29
|
-
var prevBodyOverflowY = useRef(document.body.style.overflowY);
|
30
28
|
var _useState = useState([]),
|
31
29
|
_useState2 = _slicedToArray(_useState, 2),
|
32
30
|
items = _useState2[0],
|
33
31
|
setItems = _useState2[1];
|
34
32
|
var register = function register(info) {
|
35
|
-
setItems(
|
36
|
-
var _info$info;
|
37
|
-
if ((_info$info = info.info) !== null && _info$info !== void 0 && _info$info.isModal && !hasModals(prevItems)) {
|
38
|
-
prevBodyOverflowY.current = document.body.style.overflowY;
|
39
|
-
document.body.style.overflowY = 'hidden';
|
40
|
-
}
|
41
|
-
return [].concat(_toConsumableArray(prevItems), [info]);
|
42
|
-
});
|
33
|
+
setItems([].concat(_toConsumableArray(items), [info]));
|
43
34
|
};
|
44
35
|
var unregister = function unregister(id) {
|
45
|
-
|
46
|
-
|
47
|
-
return id === item.id;
|
48
|
-
});
|
49
|
-
if (index === -1) {
|
50
|
-
return prevItems;
|
51
|
-
}
|
52
|
-
var prevHasModals = hasModals(prevItems);
|
53
|
-
prevItems.splice(index, 1);
|
54
|
-
if (prevHasModals && !hasModals(prevItems)) {
|
55
|
-
document.body.style.overflowY = prevBodyOverflowY.current;
|
56
|
-
}
|
57
|
-
return _toConsumableArray(prevItems);
|
36
|
+
var index = items.findIndex(function (item) {
|
37
|
+
return id === item.id;
|
58
38
|
});
|
39
|
+
if (index === -1) {
|
40
|
+
return;
|
41
|
+
}
|
42
|
+
items.splice(index, 1);
|
43
|
+
setItems(_toConsumableArray(items));
|
59
44
|
};
|
60
45
|
var context = {
|
61
46
|
items: items,
|
@@ -76,11 +76,6 @@ export var usePopup = function usePopup(_ref) {
|
|
76
76
|
popupController.unregister(id);
|
77
77
|
setVisible(false);
|
78
78
|
}, [isOpen, isVisible, animationInfo]);
|
79
|
-
useEffect(function () {
|
80
|
-
return function () {
|
81
|
-
popupController.unregister(id);
|
82
|
-
};
|
83
|
-
}, [id]);
|
84
79
|
return {
|
85
80
|
isVisible: isVisible,
|
86
81
|
setVisible: setVisible,
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { breadcrumbsTokens } from '../../../../components/Breadcrumbs';
|
3
|
+
export var config = {
|
4
|
+
defaults: {
|
5
|
+
view: 'default',
|
6
|
+
size: 'm'
|
7
|
+
},
|
8
|
+
variations: {
|
9
|
+
view: {
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], breadcrumbsTokens.breadcrumbsColor, breadcrumbsTokens.breadcrumbsOpacity, breadcrumbsTokens.breadcrumbsFocusOutlineColor)
|
11
|
+
},
|
12
|
+
size: {
|
13
|
+
l: /*#__PURE__*/css(["", ":0.5rem;", ":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-bold-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
14
|
+
m: /*#__PURE__*/css(["", ":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-bold-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
15
|
+
s: /*#__PURE__*/css(["", ":0.25rem;", ":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-bold-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
16
|
+
xs: /*#__PURE__*/css(["", ":0rem;", ":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-bold-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight)
|
17
|
+
}
|
18
|
+
}
|
19
|
+
};
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { breadcrumbsConfig } from '../../../../components/Breadcrumbs';
|
2
|
+
import { component, mergeConfig } from '../../../../engines';
|
3
|
+
import { config } from './Breadcrumbs.config';
|
4
|
+
var mergedConfig = /*#__PURE__*/mergeConfig(breadcrumbsConfig, config);
|
5
|
+
export var Breadcrumbs = /*#__PURE__*/component(mergedConfig);
|
package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx
ADDED
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
3
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
|
+
|
6
|
+
import { mergeConfig } from '../../../../engines';
|
7
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
|
+
import { accordionConfig } from '../../../../components/Accordion';
|
9
|
+
|
10
|
+
import { config } from './Breadcrumbs.config';
|
11
|
+
import { Breadcrumbs } from './Breadcrumbs';
|
12
|
+
|
13
|
+
type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
|
14
|
+
|
15
|
+
const meta: Meta<BreadcrumbsProps> = {
|
16
|
+
title: 'plasma_b2c/Breadcrumbs',
|
17
|
+
decorators: [WithTheme],
|
18
|
+
component: Breadcrumbs,
|
19
|
+
args: {
|
20
|
+
view: 'default',
|
21
|
+
size: 'm',
|
22
|
+
showItems: 2,
|
23
|
+
items: [
|
24
|
+
{ title: 'Home', href: '/' },
|
25
|
+
{ title: 'About as', href: '/' },
|
26
|
+
{ renderItem: () => <span>Custom Item</span> },
|
27
|
+
{ title: 'Contacts' },
|
28
|
+
],
|
29
|
+
},
|
30
|
+
argTypes: {
|
31
|
+
...argTypesFromConfig(mergeConfig(accordionConfig, config)),
|
32
|
+
...disableProps(['separator']),
|
33
|
+
},
|
34
|
+
};
|
35
|
+
|
36
|
+
export default meta;
|
37
|
+
|
38
|
+
export const Default: StoryObj<BreadcrumbsProps> = {
|
39
|
+
render: (props: BreadcrumbsProps) => {
|
40
|
+
return <Breadcrumbs {...props} />;
|
41
|
+
},
|
42
|
+
};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { css } from 'styled-components';
|
2
|
+
import { breadcrumbsTokens } from '../../../../components/Breadcrumbs';
|
3
|
+
export var config = {
|
4
|
+
defaults: {
|
5
|
+
view: 'default',
|
6
|
+
size: 'm'
|
7
|
+
},
|
8
|
+
variations: {
|
9
|
+
view: {
|
10
|
+
"default": /*#__PURE__*/css(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], breadcrumbsTokens.breadcrumbsColor, breadcrumbsTokens.breadcrumbsOpacity, breadcrumbsTokens.breadcrumbsFocusOutlineColor)
|
11
|
+
},
|
12
|
+
size: {
|
13
|
+
l: /*#__PURE__*/css(["", ":0.5rem;", ":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-bold-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
14
|
+
m: /*#__PURE__*/css(["", ":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-bold-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
15
|
+
s: /*#__PURE__*/css(["", ":0.25rem;", ":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-bold-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight),
|
16
|
+
xs: /*#__PURE__*/css(["", ":0rem;", ":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-bold-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], breadcrumbsTokens.breadcrumbsGap, breadcrumbsTokens.breadcrumbsFontFamily, breadcrumbsTokens.breadcrumbsFontSize, breadcrumbsTokens.breadcrumbsFontStyle, breadcrumbsTokens.breadcrumbsFontWeight, breadcrumbsTokens.breadcrumbsLetterSpacing, breadcrumbsTokens.breadcrumbsLineHeight)
|
17
|
+
}
|
18
|
+
}
|
19
|
+
};
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { breadcrumbsConfig } from '../../../../components/Breadcrumbs';
|
2
|
+
import { component, mergeConfig } from '../../../../engines';
|
3
|
+
import { config } from './Breadcrumbs.config';
|
4
|
+
var mergedConfig = /*#__PURE__*/mergeConfig(breadcrumbsConfig, config);
|
5
|
+
export var Breadcrumbs = /*#__PURE__*/component(mergedConfig);
|
package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx
ADDED
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { ComponentProps } from 'react';
|
3
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
+
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
|
+
|
6
|
+
import { mergeConfig } from '../../../../engines';
|
7
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
|
+
import { accordionConfig } from '../../../../components/Accordion';
|
9
|
+
|
10
|
+
import { config } from './Breadcrumbs.config';
|
11
|
+
import { Breadcrumbs } from './Breadcrumbs';
|
12
|
+
|
13
|
+
type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
|
14
|
+
|
15
|
+
const meta: Meta<BreadcrumbsProps> = {
|
16
|
+
title: 'plasma_web/Breadcrumbs',
|
17
|
+
decorators: [WithTheme],
|
18
|
+
component: Breadcrumbs,
|
19
|
+
args: {
|
20
|
+
view: 'default',
|
21
|
+
size: 'm',
|
22
|
+
showItems: 2,
|
23
|
+
items: [
|
24
|
+
{ title: 'Home', href: '/' },
|
25
|
+
{ title: 'About as', href: '/' },
|
26
|
+
{ renderItem: () => <span>Custom Item</span> },
|
27
|
+
{ title: 'Contacts' },
|
28
|
+
],
|
29
|
+
},
|
30
|
+
argTypes: {
|
31
|
+
...argTypesFromConfig(mergeConfig(accordionConfig, config)),
|
32
|
+
...disableProps(['separator']),
|
33
|
+
},
|
34
|
+
};
|
35
|
+
|
36
|
+
export default meta;
|
37
|
+
|
38
|
+
export const Default: StoryObj<BreadcrumbsProps> = {
|
39
|
+
render: (props: BreadcrumbsProps) => {
|
40
|
+
return <Breadcrumbs {...props} />;
|
41
|
+
},
|
42
|
+
};
|
@@ -7,6 +7,7 @@ export * from './utils';
|
|
7
7
|
export * from './components/Button';
|
8
8
|
export * from './components/IconButton';
|
9
9
|
export * from './components/ButtonGroup';
|
10
|
+
export * from './components/Breadcrumbs';
|
10
11
|
export * from './components/Chip';
|
11
12
|
export * from './components/Cell';
|
12
13
|
export * from './components/Link';
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { RootProps } from '../../engines';
|
3
|
+
import type { BreadcrumbsProps } from './Breadcrumbs.types';
|
4
|
+
export declare const breadcrumbsRoot: (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
5
|
+
view?: string | undefined;
|
6
|
+
size?: "m" | "s" | "xs" | "l" | undefined;
|
7
|
+
separator?: React.ReactNode;
|
8
|
+
items: import("./Breadcrumbs.types").BreadcrumbsItem[];
|
9
|
+
showItems?: number | undefined;
|
10
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
11
|
+
export declare const breadcrumbsConfig: {
|
12
|
+
name: string;
|
13
|
+
tag: string;
|
14
|
+
layout: (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
15
|
+
view?: string | undefined;
|
16
|
+
size?: "m" | "s" | "xs" | "l" | undefined;
|
17
|
+
separator?: React.ReactNode;
|
18
|
+
items: import("./Breadcrumbs.types").BreadcrumbsItem[];
|
19
|
+
showItems?: number | undefined;
|
20
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
21
|
+
base: import("@linaria/core").LinariaClassName;
|
22
|
+
variations: {
|
23
|
+
view: {
|
24
|
+
css: import("@linaria/core").LinariaClassName;
|
25
|
+
};
|
26
|
+
size: {
|
27
|
+
css: import("@linaria/core").LinariaClassName;
|
28
|
+
};
|
29
|
+
};
|
30
|
+
defaults: {
|
31
|
+
view: string;
|
32
|
+
size: string;
|
33
|
+
};
|
34
|
+
};
|
35
|
+
//# sourceMappingURL=Breadcrumbs.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAM5D,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;wCAe5E,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAjBQ,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;CAkChF,CAAC"}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export declare const StyledLink: import("@linaria/react").StyledComponent<{
|
3
|
+
isHref: boolean;
|
4
|
+
} & import("../../engines/types").PropsType<import("../../engines/types").Variants> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("../Link/Link").LinkCustomProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
5
|
+
export declare const base: import("@linaria/core").LinariaClassName;
|
6
|
+
export declare const Separator: import("@linaria/react").StyledMeta & import("react").FC<import("../_Icon/IconRoot").IconProps>;
|
7
|
+
//# sourceMappingURL=Breadcrumbs.styles.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.styles.ts"],"names":[],"mappings":";AAaA,eAAO,MAAM,UAAU;YAA0B,OAAO;0OASvD,CAAC;AAEF,eAAO,MAAM,IAAI,0CAahB,CAAC;AAEF,eAAO,MAAM,SAAS,iGAGrB,CAAC"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
export declare const classes: {
|
2
|
+
breadcrumbsRoot: string;
|
3
|
+
};
|
4
|
+
export declare const tokens: {
|
5
|
+
breadcrumbsGap: string;
|
6
|
+
breadcrumbsOpacity: string;
|
7
|
+
breadcrumbsFocusOutlineColor: string;
|
8
|
+
breadcrumbsColor: string;
|
9
|
+
breadcrumbsFontFamily: string;
|
10
|
+
breadcrumbsFontSize: string;
|
11
|
+
breadcrumbsFontStyle: string;
|
12
|
+
breadcrumbsFontWeight: string;
|
13
|
+
breadcrumbsLetterSpacing: string;
|
14
|
+
breadcrumbsLineHeight: string;
|
15
|
+
};
|
16
|
+
//# sourceMappingURL=Breadcrumbs.tokens.d.ts.map
|