@faststore/ui 2.0.65-alpha.0 → 2.0.69-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -19,8 +19,6 @@ export { default as Carousel } from './components/molecules/Carousel';
19
19
  export type { CarouselProps } from './components/molecules/Carousel';
20
20
  export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
21
21
  export type { BannerProps, BannerContentProps, BannerImageProps, BannerLinkProps, } from './components/molecules/Banner';
22
- export { default as Breadcrumb } from './components/molecules/Breadcrumb';
23
- export type { BreadcrumbProps } from './components/molecules/Breadcrumb';
24
22
  export { default as Form } from './components/molecules/Form';
25
23
  export type { FormProps } from './components/molecules/Form';
26
24
  export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
package/dist/index.js CHANGED
@@ -11,7 +11,6 @@ export { default as Bullets } from './components/molecules/Bullets';
11
11
  export { default as SearchInput } from './components/molecules/SearchInput';
12
12
  export { default as Carousel } from './components/molecules/Carousel';
13
13
  export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
14
- export { default as Breadcrumb } from './components/molecules/Breadcrumb';
15
14
  export { default as Form } from './components/molecules/Form';
16
15
  // Organisms
17
16
  export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/ui",
3
- "version": "2.0.65-alpha.0",
3
+ "version": "2.0.69-alpha.0",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -46,8 +46,8 @@
46
46
  "react-dom": "^18.2.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@faststore/eslint-config": "^2.0.65-alpha.0",
50
- "@faststore/shared": "^2.0.65-alpha.0",
49
+ "@faststore/eslint-config": "^2.0.66-alpha.0",
50
+ "@faststore/shared": "^2.0.66-alpha.0",
51
51
  "@size-limit/preset-small-lib": "^7.0.8",
52
52
  "@types/tabbable": "^3.1.1",
53
53
  "babel-loader": "^8.2.5",
@@ -59,5 +59,5 @@
59
59
  "node": "16.18.0",
60
60
  "yarn": "1.19.1"
61
61
  },
62
- "gitHead": "05c8f7f46e876406fcae355dbeff243bbf2e1e25"
62
+ "gitHead": "9203ce7fd8a8fd0d0ae60afde8743adaec18c53d"
63
63
  }
@@ -0,0 +1,166 @@
1
+ [data-fs-breadcrumb] {
2
+ // --------------------------------------------------------
3
+ // Design Tokens for Breadcrumb
4
+ // --------------------------------------------------------
5
+
6
+ // Default properties
7
+ --fs-breadcrumb-margin-left : calc(-1 * var(--fs-spacing-1));
8
+ --fs-breadcrumb-padding : var(--fs-spacing-2) 0;
9
+
10
+ // List item
11
+ --fs-breadcrumb-list-item-padding : var(--fs-spacing-0);
12
+ --fs-breadcrumb-list-item-last-text-color : var(--fs-color-text-light);
13
+ --fs-breadcrumb-list-item-max-width-mobile : 30%;
14
+
15
+ // Link
16
+ --fs-breadcrumb-link-color-visited : var(--fs-color-link);
17
+
18
+ // Link Home
19
+ --fs-breadcrumb-link-home-padding : var(--fs-spacing-1);
20
+ --fs-breadcrumb-link-home-border-radius : var(--fs-border-radius-circle);
21
+ --fs-breadcrumb-link-home-hover-bkg-color : var(--fs-color-primary-bkg-light);
22
+ --fs-breadcrumb-link-home-color : var(--fs-color-text);
23
+
24
+ // Divider
25
+ --fs-breadcrumb-divider-height : var(--fs-spacing-3);
26
+ --fs-breadcrumb-divider-margin : var(--fs-spacing-1);
27
+ --fs-breadcrumb-divider-border-left-width : var(--fs-border-width);
28
+ --fs-breadcrumb-divider-border-left-color : var(--fs-border-color-light);
29
+
30
+ // Dropdown Button
31
+ --fs-breadcrumb-dropdown-button-margin-left : var(--fs-breadcrumb-margin-left);
32
+ --fs-breadcrumb-dropdown-button-color : var(--fs-color-link);
33
+ --fs-breadcrumb-dropdown-button-border-radius : var(--fs-spacing-0);
34
+ --fs-breadcrumb-dropdown-button-transition-property : var(--fs-transition-property);
35
+ --fs-breadcrumb-dropdown-button-transition-timing : var(--fs-transition-timing);
36
+ --fs-breadcrumb-dropdown-button-transition-function : var(--fs-transition-function);
37
+
38
+ // --------------------------------------------------------
39
+ // Structural Styles
40
+ // --------------------------------------------------------
41
+
42
+ width: 100%;
43
+ padding: var(--fs-breadcrumb-padding);
44
+
45
+ @include media(">=notebook") {
46
+ width: 50%;
47
+ }
48
+
49
+ [data-fs-breadcrumb-list] {
50
+ display: flex;
51
+ align-items: center;
52
+ margin-left: var(--fs-breadcrumb-margin-left);
53
+ overflow-x: hidden;
54
+ }
55
+
56
+ [data-fs-breadcrumb-list-item] {
57
+ display: inline-flex;
58
+ align-items: center;
59
+ padding: var(--fs-breadcrumb-list-item-padding);
60
+
61
+ &:not(:first-child) {
62
+ overflow: hidden;
63
+ text-overflow: ellipsis;
64
+ white-space: nowrap;
65
+
66
+ @include media("<=tablet") {
67
+ max-width: var(--fs-breadcrumb-list-item-max-width-mobile);
68
+ }
69
+ }
70
+
71
+ [data-fs-breadcrumb-link-home] {
72
+ display: flex;
73
+ align-items: center;
74
+ padding: var(--fs-breadcrumb-link-home-padding);
75
+ border-radius: var(--fs-breadcrumb-link-home-border-radius);
76
+
77
+ &:hover, &:focus {
78
+ background-color: var(--fs-breadcrumb-link-home-hover-bkg-color);
79
+ }
80
+
81
+ svg {
82
+ color: var(--fs-breadcrumb-link-home-color);
83
+ }
84
+ }
85
+
86
+ &:nth-child(2) {
87
+ overflow: visible;
88
+ }
89
+
90
+ &:last-child {
91
+ color: var(--fs-breadcrumb-list-item-last-text-color);
92
+ }
93
+
94
+ @include media(">=notebook") {
95
+ &:nth-child(3) {
96
+ overflow: visible;
97
+ }
98
+
99
+ &:nth-child(2) {
100
+ overflow: hidden;
101
+ }
102
+ }
103
+ }
104
+
105
+ [data-fs-breadcrumb-item] {
106
+ display: block;
107
+ width: 100%;
108
+ overflow: hidden;
109
+ text-overflow: ellipsis;
110
+ white-space: nowrap;
111
+ }
112
+
113
+ [data-fs-breadcrumb-divider] {
114
+ height: var(--fs-breadcrumb-divider-height);
115
+ margin: var(--fs-breadcrumb-divider-margin);
116
+ border-left: var(--fs-breadcrumb-divider-border-left-width) solid var(--fs-breadcrumb-divider-border-left-color);
117
+ }
118
+
119
+ [data-fs-breadcrumb-link] {
120
+ padding: 0;
121
+
122
+ &:visited {
123
+ color: var(--fs-breadcrumb-link-color-visited);
124
+ }
125
+ }
126
+
127
+ [data-fs-breadcrumb-dropdown-button] {
128
+ display: flex;
129
+ align-items: center;
130
+ margin-left: var(--fs-breadcrumb-dropdown-button-margin-left);
131
+ color: var(--fs-breadcrumb-dropdown-button-color);
132
+ cursor: pointer;
133
+ background-color: transparent;
134
+ border-width: 0;
135
+ border-radius: var(--fs-breadcrumb-dropdown-button-border-radius);
136
+ transition: var(--fs-breadcrumb-dropdown-button-transition-property) var(--fs-breadcrumb-dropdown-button-transition-timing) var(--fs-breadcrumb-dropdown-button-transition-function);
137
+
138
+ &:focus, &:focus-visible {
139
+ @include focus-ring;
140
+ }
141
+ }
142
+
143
+ &[data-fs-breadcrumb-is-desktop="true"] {
144
+ @include media("<notebook") {
145
+ display: none;
146
+ visibility: hidden;
147
+ }
148
+ }
149
+
150
+ &[data-fs-breadcrumb-is-desktop="false"] {
151
+ @include media(">=notebook") {
152
+ display: none;
153
+ visibility: hidden;
154
+ }
155
+ }
156
+ }
157
+
158
+ [data-fs-breadcrumb-dropdown-menu] {
159
+ [data-fs-breadcrumb-dropdown-link] {
160
+ padding: 0;
161
+
162
+ &:visited {
163
+ color: var(--fs-breadcrumb-link-color-visited);
164
+ }
165
+ }
166
+ }
package/src/index.ts CHANGED
@@ -55,9 +55,6 @@ export type {
55
55
  BannerLinkProps,
56
56
  } from './components/molecules/Banner'
57
57
 
58
- export { default as Breadcrumb } from './components/molecules/Breadcrumb'
59
- export type { BreadcrumbProps } from './components/molecules/Breadcrumb'
60
-
61
58
  export { default as Form } from './components/molecules/Form'
62
59
  export type { FormProps } from './components/molecules/Form'
63
60
 
@@ -18,6 +18,7 @@
18
18
  // Molecules
19
19
  @import "../components/molecules/Accordion/styles";
20
20
  @import "../components/molecules/Alert/styles";
21
+ @import "../components/molecules/Breadcrumb/styles";
21
22
  @import "../components/molecules/BuyButton/styles";
22
23
  @import "../components/molecules/CartItem/styles";
23
24
  @import "../components/molecules/CheckboxField/styles";
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import type { HTMLAttributes, ReactNode } from 'react';
3
- export interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
4
- /**
5
- * A ReactNode that will be rendered as the Divider icon.
6
- */
7
- divider?: ReactNode;
8
- /**
9
- * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
10
- */
11
- testId?: string;
12
- }
13
- declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLDivElement>>;
14
- export default Breadcrumb;
@@ -1,38 +0,0 @@
1
- import React, { forwardRef } from 'react';
2
- import { List } from '@faststore/components';
3
- const Divider = ({ divider, testId }) => {
4
- const props = {
5
- 'data-breadcrumb-divider': true,
6
- 'aria-hidden': true,
7
- 'data-testid': `${testId}-divider`,
8
- };
9
- if (React.isValidElement(divider)) {
10
- return React.cloneElement(divider, props);
11
- }
12
- return React.createElement("span", { ...props }, divider ?? '/');
13
- };
14
- const ListItem = ({ children, isLastItem, divider, testId, }) => {
15
- const props = {
16
- 'data-testid': `${testId}-item`,
17
- 'data-breadcrumb-item': isLastItem ? 'current' : true,
18
- 'aria-current': isLastItem ? 'page' : undefined,
19
- };
20
- if (!React.isValidElement(children)) {
21
- return (React.createElement("li", { "data-breadcrumb-list-item": true },
22
- React.createElement("span", { ...props },
23
- children,
24
- isLastItem ? null : React.createElement(Divider, { divider: divider, testId: testId }))));
25
- }
26
- return (React.createElement("li", { "data-breadcrumb-list-item": true },
27
- React.cloneElement(children, props),
28
- isLastItem ? null : React.createElement(Divider, { divider: divider, testId: testId })));
29
- };
30
- const Breadcrumb = forwardRef(function Breadcrumb({ children, divider: rawDivider, testId = 'store-breadcrumb', ...otherProps }, ref) {
31
- return (React.createElement("nav", { "aria-label": "Breadcrumb", role: "navigation", ref: ref, "data-fs-breadcrumb": true, "data-testid": testId, ...otherProps },
32
- React.createElement(List, { as: "ol", "data-breadcrumb-list": true }, React.Children.toArray(children).map((child, index, childrenArray) => {
33
- const isLastItem = index === childrenArray.length - 1;
34
- return (React.createElement(ListItem, { isLastItem: isLastItem, divider: rawDivider, key: `breadcrumb-${index}`, testId: testId }, child));
35
- }))));
36
- });
37
- export default Breadcrumb;
38
- //# sourceMappingURL=Breadcrumb.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAa5C,MAAM,OAAO,GAAwB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3D,MAAM,KAAK,GAAG;QACZ,yBAAyB,EAAE,IAAI;QAC/B,aAAa,EAAE,IAAI;QACnB,aAAa,EAAE,GAAG,MAAM,UAAU;KACnC,CAAA;IAED,IAAI,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;QACjC,OAAO,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;KAC1C;IAED,OAAO,iCAAU,KAAK,IAAG,OAAO,IAAI,GAAG,CAAQ,CAAA;AACjD,CAAC,CAAA;AASD,MAAM,QAAQ,GAAsB,CAAC,EACnC,QAAQ,EACR,UAAU,EACV,OAAO,EACP,MAAM,GACP,EAAE,EAAE;IACH,MAAM,KAAK,GAAG;QACZ,aAAa,EAAE,GAAG,MAAM,OAAO;QAC/B,sBAAsB,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACrD,cAAc,EAAE,UAAU,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;KAC3D,CAAA;IAED,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;QACnC,OAAO,CACL;YACE,iCAAU,KAAK;gBACZ,QAAQ;gBACR,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,CAC7D,CACJ,CACN,CAAA;KACF;IAED,OAAO,CACL;QACG,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC;QACnC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAI,CAC/D,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,QAAQ,EACR,OAAO,EAAE,UAAU,EACnB,MAAM,GAAG,kBAAkB,EAC3B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,2CACa,YAAY,EACvB,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,6CAEK,MAAM,KACf,UAAU;QAEd,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,kCACV,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CACnC,CAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;YAC9B,MAAM,UAAU,GAAG,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAA;YAErD,OAAO,CACL,oBAAC,QAAQ,IACP,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,UAAU,EACnB,GAAG,EAAE,cAAc,KAAK,EAAE,EAC1B,MAAM,EAAE,MAAM,IAEb,KAAK,CACG,CACZ,CAAA;QACH,CAAC,CACF,CACI,CACH,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}
@@ -1,2 +0,0 @@
1
- export { default } from './Breadcrumb';
2
- export type { BreadcrumbProps } from './Breadcrumb';
@@ -1,2 +0,0 @@
1
- export { default } from './Breadcrumb';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}
@@ -1,111 +0,0 @@
1
- import React, { forwardRef } from 'react'
2
- import type { FC, HTMLAttributes, ReactNode } from 'react'
3
-
4
- import { List } from '@faststore/components'
5
-
6
- export interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
7
- /**
8
- * A ReactNode that will be rendered as the Divider icon.
9
- */
10
- divider?: ReactNode
11
- /**
12
- * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
13
- */
14
- testId?: string
15
- }
16
-
17
- const Divider: FC<BreadcrumbProps> = ({ divider, testId }) => {
18
- const props = {
19
- 'data-breadcrumb-divider': true,
20
- 'aria-hidden': true,
21
- 'data-testid': `${testId}-divider`,
22
- }
23
-
24
- if (React.isValidElement(divider)) {
25
- return React.cloneElement(divider, props)
26
- }
27
-
28
- return <span {...props}>{divider ?? '/'}</span>
29
- }
30
-
31
- type ListItemProps = {
32
- children: ReactNode
33
- isLastItem: boolean
34
- divider: BreadcrumbProps['divider']
35
- testId: string
36
- }
37
-
38
- const ListItem: FC<ListItemProps> = ({
39
- children,
40
- isLastItem,
41
- divider,
42
- testId,
43
- }) => {
44
- const props = {
45
- 'data-testid': `${testId}-item`,
46
- 'data-breadcrumb-item': isLastItem ? 'current' : true,
47
- 'aria-current': isLastItem ? ('page' as const) : undefined,
48
- }
49
-
50
- if (!React.isValidElement(children)) {
51
- return (
52
- <li data-breadcrumb-list-item>
53
- <span {...props}>
54
- {children}
55
- {isLastItem ? null : <Divider divider={divider} testId={testId} />}
56
- </span>
57
- </li>
58
- )
59
- }
60
-
61
- return (
62
- <li data-breadcrumb-list-item>
63
- {React.cloneElement(children, props)}
64
- {isLastItem ? null : <Divider divider={divider} testId={testId} />}
65
- </li>
66
- )
67
- }
68
-
69
- const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
70
- function Breadcrumb(
71
- {
72
- children,
73
- divider: rawDivider,
74
- testId = 'store-breadcrumb',
75
- ...otherProps
76
- },
77
- ref
78
- ) {
79
- return (
80
- <nav
81
- aria-label="Breadcrumb"
82
- role="navigation"
83
- ref={ref}
84
- data-fs-breadcrumb
85
- data-testid={testId}
86
- {...otherProps}
87
- >
88
- <List as="ol" data-breadcrumb-list>
89
- {React.Children.toArray(children).map(
90
- (child, index, childrenArray) => {
91
- const isLastItem = index === childrenArray.length - 1
92
-
93
- return (
94
- <ListItem
95
- isLastItem={isLastItem}
96
- divider={rawDivider}
97
- key={`breadcrumb-${index}`}
98
- testId={testId}
99
- >
100
- {child}
101
- </ListItem>
102
- )
103
- }
104
- )}
105
- </List>
106
- </nav>
107
- )
108
- }
109
- )
110
-
111
- export default Breadcrumb
@@ -1,2 +0,0 @@
1
- export { default } from './Breadcrumb'
2
- export type { BreadcrumbProps } from './Breadcrumb'