@salutejs/plasma-new-hope 0.113.0-canary.1310.10143188146.0 → 0.113.0-canary.1326.10144852003.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/DatePicker/RangeDate/RangeDate.js +14 -2
- package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/cjs/components/DatePicker/SingleDate/SingleDate.js +14 -2
- package/cjs/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +30 -0
- package/cjs/components/DatePicker/hooks/useKeyboardNavigation.js.map +1 -0
- package/cjs/index.css +0 -4
- package/cjs/index.js +0 -6
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +14 -2
- package/emotion/cjs/components/DatePicker/SingleDate/SingleDate.js +14 -2
- package/emotion/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +32 -0
- package/emotion/cjs/index.js +0 -11
- package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +14 -2
- package/emotion/es/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/emotion/es/components/DatePicker/hooks/useKeyboardNavigation.js +26 -0
- package/emotion/es/index.js +0 -1
- package/es/components/DatePicker/RangeDate/RangeDate.js +14 -2
- package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
- package/es/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/es/components/DatePicker/SingleDate/SingleDate.js.map +1 -1
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js +25 -0
- package/es/components/DatePicker/hooks/useKeyboardNavigation.js.map +1 -0
- package/es/index.css +0 -4
- package/es/index.js +0 -2
- package/es/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +14 -2
- package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js +14 -2
- package/styled-components/cjs/components/DatePicker/hooks/useKeyboardNavigation.js +32 -0
- package/styled-components/cjs/index.js +0 -11
- package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +14 -2
- package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js +15 -3
- package/styled-components/es/components/DatePicker/hooks/useKeyboardNavigation.js +26 -0
- package/styled-components/es/index.js +0 -1
- package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.d.ts.map +1 -1
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts +13 -0
- package/types/components/DatePicker/hooks/useKeyboardNavigation.d.ts.map +1 -0
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_web/components/Header/Header.d.ts +1 -1
- package/types/index.d.ts +0 -1
- package/types/index.d.ts.map +1 -1
- package/cjs/components/Breadcrumbs/Breadcrumbs.css +0 -13
- package/cjs/components/Breadcrumbs/Breadcrumbs.js +0 -59
- package/cjs/components/Breadcrumbs/Breadcrumbs.js.map +0 -1
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +0 -46
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +0 -1
- package/cjs/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +0 -3
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -23
- package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js.map +0 -1
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -36
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +0 -1
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -27
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +0 -1
- package/cjs/components/Breadcrumbs/utils/index.js +0 -53
- package/cjs/components/Breadcrumbs/utils/index.js.map +0 -1
- package/cjs/components/Breadcrumbs/variations/_size/base.js +0 -9
- package/cjs/components/Breadcrumbs/variations/_size/base.js.map +0 -1
- package/cjs/components/Breadcrumbs/variations/_size/base_x642ct.css +0 -1
- package/cjs/components/Breadcrumbs/variations/_view/base.js +0 -9
- package/cjs/components/Breadcrumbs/variations/_view/base.js.map +0 -1
- package/cjs/components/Breadcrumbs/variations/_view/base_x642ct.css +0 -1
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.js +0 -59
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +0 -33
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -21
- package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.types.js +0 -5
- package/emotion/cjs/components/Breadcrumbs/README.md +0 -78
- package/emotion/cjs/components/Breadcrumbs/index.js +0 -31
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -42
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -20
- package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -5
- package/emotion/cjs/components/Breadcrumbs/utils/index.js +0 -49
- package/emotion/cjs/components/Breadcrumbs/variations/_size/base.js +0 -8
- package/emotion/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/emotion/cjs/components/Breadcrumbs/variations/_view/base.js +0 -8
- package/emotion/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -11
- package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -11
- package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.js +0 -50
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +0 -26
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -15
- package/emotion/es/components/Breadcrumbs/Breadcrumbs.types.js +0 -1
- package/emotion/es/components/Breadcrumbs/README.md +0 -78
- package/emotion/es/components/Breadcrumbs/index.js +0 -2
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -33
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -13
- package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -1
- package/emotion/es/components/Breadcrumbs/utils/index.js +0 -42
- package/emotion/es/components/Breadcrumbs/variations/_size/base.js +0 -2
- package/emotion/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/emotion/es/components/Breadcrumbs/variations/_view/base.js +0 -2
- package/emotion/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -5
- package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -5
- package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/es/components/Breadcrumbs/Breadcrumbs.css +0 -13
- package/es/components/Breadcrumbs/Breadcrumbs.js +0 -54
- package/es/components/Breadcrumbs/Breadcrumbs.js.map +0 -1
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js +0 -40
- package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +0 -1
- package/es/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +0 -3
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -18
- package/es/components/Breadcrumbs/Breadcrumbs.tokens.js.map +0 -1
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -32
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +0 -1
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -21
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +0 -1
- package/es/components/Breadcrumbs/utils/index.js +0 -46
- package/es/components/Breadcrumbs/utils/index.js.map +0 -1
- package/es/components/Breadcrumbs/variations/_size/base.js +0 -5
- package/es/components/Breadcrumbs/variations/_size/base.js.map +0 -1
- package/es/components/Breadcrumbs/variations/_size/base_x642ct.css +0 -1
- package/es/components/Breadcrumbs/variations/_view/base.js +0 -5
- package/es/components/Breadcrumbs/variations/_view/base.js.map +0 -1
- package/es/components/Breadcrumbs/variations/_view/base_x642ct.css +0 -1
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.js +0 -59
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +0 -32
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -21
- package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.types.js +0 -5
- package/styled-components/cjs/components/Breadcrumbs/README.md +0 -78
- package/styled-components/cjs/components/Breadcrumbs/index.js +0 -31
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -42
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -24
- package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -5
- package/styled-components/cjs/components/Breadcrumbs/utils/index.js +0 -49
- package/styled-components/cjs/components/Breadcrumbs/variations/_size/base.js +0 -8
- package/styled-components/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Breadcrumbs/variations/_view/base.js +0 -8
- package/styled-components/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -11
- package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -11
- package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.js +0 -50
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +0 -24
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -15
- package/styled-components/es/components/Breadcrumbs/Breadcrumbs.types.js +0 -1
- package/styled-components/es/components/Breadcrumbs/README.md +0 -78
- package/styled-components/es/components/Breadcrumbs/index.js +0 -2
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -33
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -17
- package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -1
- package/styled-components/es/components/Breadcrumbs/utils/index.js +0 -42
- package/styled-components/es/components/Breadcrumbs/variations/_size/base.js +0 -2
- package/styled-components/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Breadcrumbs/variations/_view/base.js +0 -2
- package/styled-components/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -5
- package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -5
- package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts +0 -35
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
- package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts +0 -7
- package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts.map +0 -1
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts +0 -16
- package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts.map +0 -1
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts +0 -38
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts.map +0 -1
- package/types/components/Breadcrumbs/index.d.ts +0 -4
- package/types/components/Breadcrumbs/index.d.ts.map +0 -1
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts +0 -4
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts.map +0 -1
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts +0 -4
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts.map +0 -1
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts +0 -8
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts.map +0 -1
- package/types/components/Breadcrumbs/utils/index.d.ts +0 -7
- package/types/components/Breadcrumbs/utils/index.d.ts.map +0 -1
- package/types/components/Breadcrumbs/variations/_size/base.d.ts +0 -2
- package/types/components/Breadcrumbs/variations/_size/base.d.ts.map +0 -1
- package/types/components/Breadcrumbs/variations/_view/base.d.ts +0 -2
- package/types/components/Breadcrumbs/variations/_view/base.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts +0 -18
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts +0 -19
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts +0 -18
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts +0 -19
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
@@ -1,24 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.StyledShorter = exports.StyledRoot = exports.StyledHidden = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
|
8
|
-
var _mixins = /*#__PURE__*/require("../../../../mixins");
|
9
|
-
var _Breadcrumbs = /*#__PURE__*/require("../../Breadcrumbs.tokens");
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
11
|
-
var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
12
|
-
componentId: "plasma-new-hope__sc-1shiits-0"
|
13
|
-
})([""]);
|
14
|
-
var StyledShorter = exports.StyledShorter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
15
|
-
componentId: "plasma-new-hope__sc-1shiits-1"
|
16
|
-
})(["cursor:pointer;", ""], /*#__PURE__*/(0, _mixins.addFocus)({
|
17
|
-
outlineOffset: '0.125rem',
|
18
|
-
outlineSize: '0.125rem',
|
19
|
-
outlineRadius: '0',
|
20
|
-
outlineColor: /*#__PURE__*/"var(".concat(_Breadcrumbs.tokens.breadcrumbsFocusOutlineColor, ")")
|
21
|
-
}));
|
22
|
-
var StyledHidden = exports.StyledHidden = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
23
|
-
componentId: "plasma-new-hope__sc-1shiits-2"
|
24
|
-
})(["display:flex;align-items:center;gap:var(", ");"], _Breadcrumbs.tokens.breadcrumbsGap);
|
@@ -1,49 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.shortItems = exports.getRenderItems = exports.convertIconSize = exports.addSeparator = void 0;
|
7
|
-
var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
|
8
|
-
var _BreadcrumbShorter = /*#__PURE__*/require("../ui/BreadcrumbShorter/BreadcrumbShorter");
|
9
|
-
var _Breadcrumbs = /*#__PURE__*/require("../Breadcrumbs.styles");
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
11
|
-
var shortItems = exports.shortItems = function shortItems(items, renderSeparator, showItems) {
|
12
|
-
if (!showItems || showItems < 2 || items.length <= showItems) {
|
13
|
-
return items;
|
14
|
-
}
|
15
|
-
var leftSlice = Math.floor(showItems / 2);
|
16
|
-
var rightSlice = items.length - leftSlice - showItems % 2;
|
17
|
-
var renderItems = items.slice(leftSlice, rightSlice);
|
18
|
-
var shorter = /*#__PURE__*/_react["default"].createElement(_BreadcrumbShorter.BreadcrumbShorter, {
|
19
|
-
separator: renderSeparator
|
20
|
-
}, renderItems);
|
21
|
-
items.splice(leftSlice, rightSlice - leftSlice, shorter);
|
22
|
-
return items;
|
23
|
-
};
|
24
|
-
var convertIconSize = exports.convertIconSize = function convertIconSize(size) {
|
25
|
-
switch (size) {
|
26
|
-
case 's':
|
27
|
-
case 'xs':
|
28
|
-
return 'xs';
|
29
|
-
default:
|
30
|
-
return 's';
|
31
|
-
}
|
32
|
-
};
|
33
|
-
var getRenderItems = exports.getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
34
|
-
return shortItems(items.map(function (item) {
|
35
|
-
if ('renderItem' in item) {
|
36
|
-
return item.renderItem();
|
37
|
-
}
|
38
|
-
return /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.StyledLink, {
|
39
|
-
tabIndex: 0,
|
40
|
-
href: item.href,
|
41
|
-
isHref: !!item.href
|
42
|
-
}, item.title);
|
43
|
-
}), renderSeparator, showItems);
|
44
|
-
};
|
45
|
-
var addSeparator = exports.addSeparator = function addSeparator(items, renderSeparator) {
|
46
|
-
return items.flatMap(function (item, idx) {
|
47
|
-
return idx < items.length - 1 ? [item, renderSeparator] : [item];
|
48
|
-
});
|
49
|
-
};
|
File without changes
|
File without changes
|
package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js
DELETED
@@ -1,25 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.config = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
|
9
|
-
var config = exports.config = {
|
10
|
-
defaults: {
|
11
|
-
view: 'default',
|
12
|
-
size: 'm'
|
13
|
-
},
|
14
|
-
variations: {
|
15
|
-
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsColor, _Breadcrumbs.breadcrumbsTokens.breadcrumbsOpacity, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFocusOutlineColor)
|
17
|
-
},
|
18
|
-
size: {
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
|
22
|
-
xs: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight)
|
23
|
-
}
|
24
|
-
}
|
25
|
-
};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.Breadcrumbs = void 0;
|
7
|
-
var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
|
8
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
-
var _Breadcrumbs2 = /*#__PURE__*/require("./Breadcrumbs.config");
|
10
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Breadcrumbs.breadcrumbsConfig, _Breadcrumbs2.config);
|
11
|
-
var Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx
DELETED
@@ -1,42 +0,0 @@
|
|
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
|
-
};
|
package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js
DELETED
@@ -1,25 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.config = void 0;
|
7
|
-
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
|
9
|
-
var config = exports.config = {
|
10
|
-
defaults: {
|
11
|
-
view: 'default',
|
12
|
-
size: 'm'
|
13
|
-
},
|
14
|
-
variations: {
|
15
|
-
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":0.4;", ":var(--surface-accent);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsColor, _Breadcrumbs.breadcrumbsTokens.breadcrumbsOpacity, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFocusOutlineColor)
|
17
|
-
},
|
18
|
-
size: {
|
19
|
-
l: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
|
20
|
-
m: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight),
|
22
|
-
xs: /*#__PURE__*/(0, _styledComponents.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);"], _Breadcrumbs.breadcrumbsTokens.breadcrumbsGap, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontFamily, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontSize, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontStyle, _Breadcrumbs.breadcrumbsTokens.breadcrumbsFontWeight, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLetterSpacing, _Breadcrumbs.breadcrumbsTokens.breadcrumbsLineHeight)
|
23
|
-
}
|
24
|
-
}
|
25
|
-
};
|
@@ -1,11 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.Breadcrumbs = void 0;
|
7
|
-
var _Breadcrumbs = /*#__PURE__*/require("../../../../components/Breadcrumbs");
|
8
|
-
var _engines = /*#__PURE__*/require("../../../../engines");
|
9
|
-
var _Breadcrumbs2 = /*#__PURE__*/require("./Breadcrumbs.config");
|
10
|
-
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Breadcrumbs.breadcrumbsConfig, _Breadcrumbs2.config);
|
11
|
-
var Breadcrumbs = exports.Breadcrumbs = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx
DELETED
@@ -1,42 +0,0 @@
|
|
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
|
-
};
|
@@ -1,50 +0,0 @@
|
|
1
|
-
import React, { forwardRef } from 'react';
|
2
|
-
import { cx } from '../../utils';
|
3
|
-
import { base as sizeCSS } from './variations/_size/base';
|
4
|
-
import { base as viewCSS } from './variations/_view/base';
|
5
|
-
import { base, Separator } from './Breadcrumbs.styles';
|
6
|
-
import { addSeparator, convertIconSize, getRenderItems } from './utils';
|
7
|
-
export var breadcrumbsRoot = function breadcrumbsRoot(Root) {
|
8
|
-
return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
|
9
|
-
var view = _ref.view,
|
10
|
-
size = _ref.size,
|
11
|
-
separator = _ref.separator,
|
12
|
-
items = _ref.items,
|
13
|
-
_ref$showItems = _ref.showItems,
|
14
|
-
showItems = _ref$showItems === void 0 ? items.length : _ref$showItems,
|
15
|
-
className = _ref.className;
|
16
|
-
var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/React.createElement(Separator, {
|
17
|
-
color: "inherit",
|
18
|
-
size: convertIconSize(size)
|
19
|
-
});
|
20
|
-
var renderItems = getRenderItems(items, renderSeparator, showItems);
|
21
|
-
var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
|
22
|
-
return /*#__PURE__*/React.createElement(Root, {
|
23
|
-
ref: outerRootRef,
|
24
|
-
size: size,
|
25
|
-
view: view,
|
26
|
-
className: cx(className),
|
27
|
-
items: items
|
28
|
-
}, itemsWithSeparator.map(function (item) {
|
29
|
-
return item;
|
30
|
-
}));
|
31
|
-
});
|
32
|
-
};
|
33
|
-
export var breadcrumbsConfig = {
|
34
|
-
name: 'Breadcrumbs',
|
35
|
-
tag: 'div',
|
36
|
-
layout: breadcrumbsRoot,
|
37
|
-
base: base,
|
38
|
-
variations: {
|
39
|
-
view: {
|
40
|
-
css: viewCSS
|
41
|
-
},
|
42
|
-
size: {
|
43
|
-
css: sizeCSS
|
44
|
-
}
|
45
|
-
},
|
46
|
-
defaults: {
|
47
|
-
view: 'default',
|
48
|
-
size: 'm'
|
49
|
-
}
|
50
|
-
};
|
@@ -1,24 +0,0 @@
|
|
1
|
-
import styled from 'styled-components';
|
2
|
-
import { css } from 'styled-components';
|
3
|
-
import { linkConfig } from '../Link';
|
4
|
-
import { component, mergeConfig } from '../../engines';
|
5
|
-
import { IconDisclosureRight } from '../_Icon';
|
6
|
-
import { addFocus } from '../../mixins';
|
7
|
-
import { tokens } from './Breadcrumbs.tokens';
|
8
|
-
var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
|
9
|
-
var Link = /*#__PURE__*/component(mergedLinkConfig);
|
10
|
-
export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
|
11
|
-
componentId: "plasma-new-hope__sc-4bjoev-0"
|
12
|
-
})(["opacity:", ";", ""], function (_ref) {
|
13
|
-
var isHref = _ref.isHref;
|
14
|
-
return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
|
15
|
-
}, /*#__PURE__*/addFocus({
|
16
|
-
outlineOffset: '0rem',
|
17
|
-
outlineSize: '0.125rem',
|
18
|
-
outlineRadius: '0rem',
|
19
|
-
outlineColor: /*#__PURE__*/"var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
|
20
|
-
}));
|
21
|
-
export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
|
22
|
-
export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
|
23
|
-
componentId: "plasma-new-hope__sc-4bjoev-1"
|
24
|
-
})(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);
|
@@ -1,15 +0,0 @@
|
|
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
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,78 +0,0 @@
|
|
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. Затем все элементы рендерятся и показываются пользователю
|
package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js
DELETED
@@ -1,33 +0,0 @@
|
|
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
DELETED
@@ -1,17 +0,0 @@
|
|
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
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|
@@ -1,42 +0,0 @@
|
|
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
|
package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js
DELETED
@@ -1,19 +0,0 @@
|
|
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
|
-
};
|
@@ -1,5 +0,0 @@
|
|
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
DELETED
@@ -1,42 +0,0 @@
|
|
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
|
-
};
|