@salutejs/plasma-new-hope 0.112.0-canary.1310.10100026085.0 → 0.112.0-canary.1319.10090634420.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (166) hide show
  1. package/cjs/index.css +0 -4
  2. package/cjs/index.js +0 -6
  3. package/cjs/index.js.map +1 -1
  4. package/emotion/cjs/index.js +0 -11
  5. package/emotion/es/index.js +0 -1
  6. package/es/index.css +0 -4
  7. package/es/index.js +0 -2
  8. package/es/index.js.map +1 -1
  9. package/package.json +4 -4
  10. package/styled-components/cjs/index.js +0 -11
  11. package/styled-components/es/index.js +0 -1
  12. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts +2 -2
  13. package/types/examples/plasma_b2c/components/Header/Header.d.ts +1 -1
  14. package/types/examples/plasma_web/components/Header/Header.d.ts +1 -1
  15. package/types/index.d.ts +0 -1
  16. package/types/index.d.ts.map +1 -1
  17. package/cjs/components/Breadcrumbs/Breadcrumbs.css +0 -13
  18. package/cjs/components/Breadcrumbs/Breadcrumbs.js +0 -59
  19. package/cjs/components/Breadcrumbs/Breadcrumbs.js.map +0 -1
  20. package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +0 -46
  21. package/cjs/components/Breadcrumbs/Breadcrumbs.styles.js.map +0 -1
  22. package/cjs/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +0 -3
  23. package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -23
  24. package/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js.map +0 -1
  25. package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -36
  26. package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +0 -1
  27. package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -27
  28. package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +0 -1
  29. package/cjs/components/Breadcrumbs/utils/index.js +0 -56
  30. package/cjs/components/Breadcrumbs/utils/index.js.map +0 -1
  31. package/cjs/components/Breadcrumbs/variations/_size/base.js +0 -9
  32. package/cjs/components/Breadcrumbs/variations/_size/base.js.map +0 -1
  33. package/cjs/components/Breadcrumbs/variations/_size/base_x642ct.css +0 -1
  34. package/cjs/components/Breadcrumbs/variations/_view/base.js +0 -9
  35. package/cjs/components/Breadcrumbs/variations/_view/base.js.map +0 -1
  36. package/cjs/components/Breadcrumbs/variations/_view/base_x642ct.css +0 -1
  37. package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.js +0 -59
  38. package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +0 -33
  39. package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -21
  40. package/emotion/cjs/components/Breadcrumbs/Breadcrumbs.types.js +0 -5
  41. package/emotion/cjs/components/Breadcrumbs/README.md +0 -78
  42. package/emotion/cjs/components/Breadcrumbs/index.js +0 -31
  43. package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -42
  44. package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -20
  45. package/emotion/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -5
  46. package/emotion/cjs/components/Breadcrumbs/utils/index.js +0 -52
  47. package/emotion/cjs/components/Breadcrumbs/variations/_size/base.js +0 -8
  48. package/emotion/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
  49. package/emotion/cjs/components/Breadcrumbs/variations/_view/base.js +0 -8
  50. package/emotion/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
  51. package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
  52. package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -11
  53. package/emotion/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  54. package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
  55. package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -11
  56. package/emotion/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  57. package/emotion/es/components/Breadcrumbs/Breadcrumbs.js +0 -50
  58. package/emotion/es/components/Breadcrumbs/Breadcrumbs.styles.js +0 -26
  59. package/emotion/es/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -15
  60. package/emotion/es/components/Breadcrumbs/Breadcrumbs.types.js +0 -1
  61. package/emotion/es/components/Breadcrumbs/README.md +0 -78
  62. package/emotion/es/components/Breadcrumbs/index.js +0 -2
  63. package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -33
  64. package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -13
  65. package/emotion/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -1
  66. package/emotion/es/components/Breadcrumbs/utils/index.js +0 -45
  67. package/emotion/es/components/Breadcrumbs/variations/_size/base.js +0 -2
  68. package/emotion/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
  69. package/emotion/es/components/Breadcrumbs/variations/_view/base.js +0 -2
  70. package/emotion/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
  71. package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
  72. package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -5
  73. package/emotion/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  74. package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
  75. package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -5
  76. package/emotion/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  77. package/es/components/Breadcrumbs/Breadcrumbs.css +0 -13
  78. package/es/components/Breadcrumbs/Breadcrumbs.js +0 -54
  79. package/es/components/Breadcrumbs/Breadcrumbs.js.map +0 -1
  80. package/es/components/Breadcrumbs/Breadcrumbs.styles.js +0 -40
  81. package/es/components/Breadcrumbs/Breadcrumbs.styles.js.map +0 -1
  82. package/es/components/Breadcrumbs/Breadcrumbs.styles_1troyzr.css +0 -3
  83. package/es/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -18
  84. package/es/components/Breadcrumbs/Breadcrumbs.tokens.js.map +0 -1
  85. package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -32
  86. package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +0 -1
  87. package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -21
  88. package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js.map +0 -1
  89. package/es/components/Breadcrumbs/utils/index.js +0 -49
  90. package/es/components/Breadcrumbs/utils/index.js.map +0 -1
  91. package/es/components/Breadcrumbs/variations/_size/base.js +0 -5
  92. package/es/components/Breadcrumbs/variations/_size/base.js.map +0 -1
  93. package/es/components/Breadcrumbs/variations/_size/base_x642ct.css +0 -1
  94. package/es/components/Breadcrumbs/variations/_view/base.js +0 -5
  95. package/es/components/Breadcrumbs/variations/_view/base.js.map +0 -1
  96. package/es/components/Breadcrumbs/variations/_view/base_x642ct.css +0 -1
  97. package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.js +0 -59
  98. package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.styles.js +0 -32
  99. package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -21
  100. package/styled-components/cjs/components/Breadcrumbs/Breadcrumbs.types.js +0 -5
  101. package/styled-components/cjs/components/Breadcrumbs/README.md +0 -78
  102. package/styled-components/cjs/components/Breadcrumbs/index.js +0 -31
  103. package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -42
  104. package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -24
  105. package/styled-components/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -5
  106. package/styled-components/cjs/components/Breadcrumbs/utils/index.js +0 -52
  107. package/styled-components/cjs/components/Breadcrumbs/variations/_size/base.js +0 -8
  108. package/styled-components/cjs/components/Breadcrumbs/variations/_size/tokens.json +0 -0
  109. package/styled-components/cjs/components/Breadcrumbs/variations/_view/base.js +0 -8
  110. package/styled-components/cjs/components/Breadcrumbs/variations/_view/tokens.json +0 -0
  111. package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
  112. package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -11
  113. package/styled-components/cjs/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  114. package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -25
  115. package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -11
  116. package/styled-components/cjs/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  117. package/styled-components/es/components/Breadcrumbs/Breadcrumbs.js +0 -50
  118. package/styled-components/es/components/Breadcrumbs/Breadcrumbs.styles.js +0 -24
  119. package/styled-components/es/components/Breadcrumbs/Breadcrumbs.tokens.js +0 -15
  120. package/styled-components/es/components/Breadcrumbs/Breadcrumbs.types.js +0 -1
  121. package/styled-components/es/components/Breadcrumbs/README.md +0 -78
  122. package/styled-components/es/components/Breadcrumbs/index.js +0 -2
  123. package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js +0 -33
  124. package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.js +0 -17
  125. package/styled-components/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.js +0 -1
  126. package/styled-components/es/components/Breadcrumbs/utils/index.js +0 -45
  127. package/styled-components/es/components/Breadcrumbs/variations/_size/base.js +0 -2
  128. package/styled-components/es/components/Breadcrumbs/variations/_size/tokens.json +0 -0
  129. package/styled-components/es/components/Breadcrumbs/variations/_view/base.js +0 -2
  130. package/styled-components/es/components/Breadcrumbs/variations/_view/tokens.json +0 -0
  131. package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
  132. package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.js +0 -5
  133. package/styled-components/es/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  134. package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.js +0 -19
  135. package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.js +0 -5
  136. package/styled-components/es/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -42
  137. package/types/components/Breadcrumbs/Breadcrumbs.d.ts +0 -35
  138. package/types/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
  139. package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts +0 -7
  140. package/types/components/Breadcrumbs/Breadcrumbs.styles.d.ts.map +0 -1
  141. package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts +0 -16
  142. package/types/components/Breadcrumbs/Breadcrumbs.tokens.d.ts.map +0 -1
  143. package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts +0 -38
  144. package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts.map +0 -1
  145. package/types/components/Breadcrumbs/index.d.ts +0 -4
  146. package/types/components/Breadcrumbs/index.d.ts.map +0 -1
  147. package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts +0 -4
  148. package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts.map +0 -1
  149. package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts +0 -4
  150. package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.styles.d.ts.map +0 -1
  151. package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts +0 -8
  152. package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.types.d.ts.map +0 -1
  153. package/types/components/Breadcrumbs/utils/index.d.ts +0 -7
  154. package/types/components/Breadcrumbs/utils/index.d.ts.map +0 -1
  155. package/types/components/Breadcrumbs/variations/_size/base.d.ts +0 -2
  156. package/types/components/Breadcrumbs/variations/_size/base.d.ts.map +0 -1
  157. package/types/components/Breadcrumbs/variations/_view/base.d.ts +0 -2
  158. package/types/components/Breadcrumbs/variations/_view/base.d.ts.map +0 -1
  159. package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts +0 -18
  160. package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +0 -1
  161. package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts +0 -19
  162. package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
  163. package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts +0 -18
  164. package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.config.d.ts.map +0 -1
  165. package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts +0 -19
  166. package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
@@ -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. Затем все элементы рендерятся и показываются пользователю
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "breadcrumbsClasses", {
7
- enumerable: true,
8
- get: function get() {
9
- return _Breadcrumbs2.classes;
10
- }
11
- });
12
- Object.defineProperty(exports, "breadcrumbsConfig", {
13
- enumerable: true,
14
- get: function get() {
15
- return _Breadcrumbs.breadcrumbsConfig;
16
- }
17
- });
18
- Object.defineProperty(exports, "breadcrumbsRoot", {
19
- enumerable: true,
20
- get: function get() {
21
- return _Breadcrumbs.breadcrumbsRoot;
22
- }
23
- });
24
- Object.defineProperty(exports, "breadcrumbsTokens", {
25
- enumerable: true,
26
- get: function get() {
27
- return _Breadcrumbs2.tokens;
28
- }
29
- });
30
- var _Breadcrumbs = /*#__PURE__*/require("./Breadcrumbs");
31
- var _Breadcrumbs2 = /*#__PURE__*/require("./Breadcrumbs.tokens");
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.BreadcrumbShorter = void 0;
8
- var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
- var _utils = /*#__PURE__*/require("../../utils");
10
- var _BreadcrumbShorter = /*#__PURE__*/require("./BreadcrumbShorter.styles");
11
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
13
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
14
- 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."); }
15
- 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); }
16
- 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; }
17
- 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; } }
18
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
19
- var BreadcrumbShorter = exports.BreadcrumbShorter = function BreadcrumbShorter(_ref) {
20
- var children = _ref.children,
21
- separator = _ref.separator;
22
- var _useState = (0, _react.useState)(false),
23
- _useState2 = _slicedToArray(_useState, 2),
24
- openShorter = _useState2[0],
25
- setOpenShorter = _useState2[1];
26
- var renderItems = (0, _utils.addSeparator)(children, separator);
27
- var onKeyPress = function onKeyPress(event) {
28
- event.persist();
29
- if (event.keyCode === 13) {
30
- setOpenShorter(true);
31
- }
32
- };
33
- return /*#__PURE__*/_react["default"].createElement(_BreadcrumbShorter.StyledRoot, null, !openShorter && /*#__PURE__*/_react["default"].createElement(_BreadcrumbShorter.StyledShorter, {
34
- tabIndex: 0,
35
- onClick: function onClick() {
36
- return setOpenShorter(true);
37
- },
38
- onKeyDown: onKeyPress
39
- }, "..."), openShorter && /*#__PURE__*/_react["default"].createElement(_BreadcrumbShorter.StyledHidden, null, renderItems.map(function (item) {
40
- return item;
41
- })));
42
- };
@@ -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,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,52 +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
- return 'xs';
28
- case 'm':
29
- return 's';
30
- case 'l':
31
- return 's';
32
- default:
33
- return 's';
34
- }
35
- };
36
- var getRenderItems = exports.getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
37
- return shortItems(items.map(function (item) {
38
- if ('renderItem' in item) {
39
- return item.renderItem();
40
- }
41
- return /*#__PURE__*/_react["default"].createElement(_Breadcrumbs.StyledLink, {
42
- tabIndex: 0,
43
- href: item.href,
44
- isHref: !!item.href
45
- }, item.title);
46
- }), renderSeparator, showItems);
47
- };
48
- var addSeparator = exports.addSeparator = function addSeparator(items, renderSeparator) {
49
- return items.flatMap(function (item, idx) {
50
- return idx < items.length - 1 ? [item, renderSeparator] : [item];
51
- });
52
- };
@@ -1,8 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.base = void 0;
7
- var _styledComponents = /*#__PURE__*/require("styled-components");
8
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -1,8 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.base = void 0;
7
- var _styledComponents = /*#__PURE__*/require("styled-components");
8
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);
@@ -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);
@@ -1,42 +0,0 @@
1
- import React from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { StoryObj, Meta } from '@storybook/react';
4
-
5
- import { mergeConfig } from '../../../../engines';
6
- import { WithTheme, argTypesFromConfig } from '../../../_helpers';
7
- import { accordionConfig } from '../../../../components/Accordion';
8
-
9
- import { config } from './Breadcrumbs.config';
10
- import { Breadcrumbs } from './Breadcrumbs';
11
-
12
- type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
13
-
14
- const meta: Meta<BreadcrumbsProps> = {
15
- title: 'plasma_b2c/Breadcrumbs',
16
- decorators: [WithTheme],
17
- component: Breadcrumbs,
18
- args: {
19
- view: 'default',
20
- size: 'm',
21
- showItems: 2,
22
- items: [
23
- { title: 'Home', href: '/' },
24
- { title: 'About as', href: '/' },
25
- { renderItem: () => <span>Custom Item</span> },
26
- { title: 'Contacts' },
27
- ],
28
- },
29
- argTypes: {
30
- ...argTypesFromConfig(mergeConfig(accordionConfig, config)),
31
- },
32
- };
33
-
34
- export default meta;
35
-
36
- export const Default: StoryObj<BreadcrumbsProps> = {
37
- render: (props: BreadcrumbsProps) => {
38
- const args = { ...props };
39
-
40
- return <Breadcrumbs {...args} />;
41
- },
42
- };
@@ -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);
@@ -1,42 +0,0 @@
1
- import React from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { StoryObj, Meta } from '@storybook/react';
4
-
5
- import { mergeConfig } from '../../../../engines';
6
- import { WithTheme, argTypesFromConfig } from '../../../_helpers';
7
- import { accordionConfig } from '../../../../components/Accordion';
8
-
9
- import { config } from './Breadcrumbs.config';
10
- import { Breadcrumbs } from './Breadcrumbs';
11
-
12
- type BreadcrumbsProps = ComponentProps<typeof Breadcrumbs>;
13
-
14
- const meta: Meta<BreadcrumbsProps> = {
15
- title: 'plasma_web/Breadcrumbs',
16
- decorators: [WithTheme],
17
- component: Breadcrumbs,
18
- args: {
19
- view: 'default',
20
- size: 'm',
21
- showItems: 2,
22
- items: [
23
- { title: 'Home', href: '/' },
24
- { title: 'About as', href: '/' },
25
- { renderItem: () => <span>Custom Item</span> },
26
- { title: 'Contacts' },
27
- ],
28
- },
29
- argTypes: {
30
- ...argTypesFromConfig(mergeConfig(accordionConfig, config)),
31
- },
32
- };
33
-
34
- export default meta;
35
-
36
- export const Default: StoryObj<BreadcrumbsProps> = {
37
- render: (props: BreadcrumbsProps) => {
38
- const args = { ...props };
39
-
40
- return <Breadcrumbs {...args} />;
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,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. Затем все элементы рендерятся и показываются пользователю
@@ -1,2 +0,0 @@
1
- export { breadcrumbsRoot, breadcrumbsConfig } from './Breadcrumbs';
2
- export { tokens as breadcrumbsTokens, classes as breadcrumbsClasses } from './Breadcrumbs.tokens';
@@ -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
- };