@faststore/components 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.
Files changed (53) hide show
  1. package/dist/assets/ArrowElbowDownRight.d.ts +3 -2
  2. package/dist/assets/ArrowElbowDownRight.js +3 -3
  3. package/dist/assets/ArrowElbowDownRight.js.map +1 -1
  4. package/dist/assets/DotsThree.d.ts +4 -0
  5. package/dist/assets/DotsThree.js +9 -0
  6. package/dist/assets/DotsThree.js.map +1 -0
  7. package/dist/assets/House.d.ts +3 -2
  8. package/dist/assets/House.js +1 -1
  9. package/dist/assets/House.js.map +1 -1
  10. package/dist/assets/IconProps.d.ts +3 -0
  11. package/dist/assets/IconProps.js +2 -0
  12. package/dist/assets/IconProps.js.map +1 -0
  13. package/dist/assets/index.d.ts +1 -0
  14. package/dist/assets/index.js +1 -0
  15. package/dist/assets/index.js.map +1 -1
  16. package/dist/index.d.ts +2 -0
  17. package/dist/index.js +1 -0
  18. package/dist/index.js.map +1 -1
  19. package/dist/molecules/Breadcrumb/Breadcrumb.d.ts +5 -0
  20. package/dist/molecules/Breadcrumb/Breadcrumb.js +7 -0
  21. package/dist/molecules/Breadcrumb/Breadcrumb.js.map +1 -0
  22. package/dist/molecules/Breadcrumb/BreadcrumbBase.d.ts +77 -0
  23. package/dist/molecules/Breadcrumb/BreadcrumbBase.js +51 -0
  24. package/dist/molecules/Breadcrumb/BreadcrumbBase.js.map +1 -0
  25. package/dist/molecules/Breadcrumb/BreadcrumbPure.d.ts +23 -0
  26. package/dist/molecules/Breadcrumb/BreadcrumbPure.js +12 -0
  27. package/dist/molecules/Breadcrumb/BreadcrumbPure.js.map +1 -0
  28. package/dist/molecules/Breadcrumb/Divider.d.ts +4 -0
  29. package/dist/molecules/Breadcrumb/Divider.js +14 -0
  30. package/dist/molecules/Breadcrumb/Divider.js.map +1 -0
  31. package/dist/molecules/Breadcrumb/HomeLink.d.ts +3 -0
  32. package/dist/molecules/Breadcrumb/HomeLink.js +6 -0
  33. package/dist/molecules/Breadcrumb/HomeLink.js.map +1 -0
  34. package/dist/molecules/Breadcrumb/ListItem.d.ts +10 -0
  35. package/dist/molecules/Breadcrumb/ListItem.js +20 -0
  36. package/dist/molecules/Breadcrumb/ListItem.js.map +1 -0
  37. package/dist/molecules/Breadcrumb/index.d.ts +4 -0
  38. package/dist/molecules/Breadcrumb/index.js +3 -0
  39. package/dist/molecules/Breadcrumb/index.js.map +1 -0
  40. package/package.json +4 -4
  41. package/src/assets/ArrowElbowDownRight.tsx +5 -11
  42. package/src/assets/DotsThree.tsx +21 -0
  43. package/src/assets/House.tsx +4 -4
  44. package/src/assets/IconProps.ts +3 -0
  45. package/src/assets/index.ts +1 -0
  46. package/src/index.ts +8 -0
  47. package/src/molecules/Breadcrumb/Breadcrumb.tsx +17 -0
  48. package/src/molecules/Breadcrumb/BreadcrumbBase.tsx +165 -0
  49. package/src/molecules/Breadcrumb/BreadcrumbPure.tsx +59 -0
  50. package/src/molecules/Breadcrumb/Divider.tsx +18 -0
  51. package/src/molecules/Breadcrumb/HomeLink.tsx +15 -0
  52. package/src/molecules/Breadcrumb/ListItem.tsx +38 -0
  53. package/src/molecules/Breadcrumb/index.ts +4 -0
@@ -1,3 +1,4 @@
1
- import type { FC } from 'react';
2
- declare const ArrowElbowDownRight: FC;
1
+ /// <reference types="react" />
2
+ import { IconProps } from './IconProps';
3
+ declare const ArrowElbowDownRight: ({ size }: IconProps) => JSX.Element;
3
4
  export default ArrowElbowDownRight;
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  // Icon from Phosphor Icons
3
- const ArrowElbowDownRight = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", fill: "currentColor", strokeWidth: "16", width: 24, height: 24 },
3
+ const ArrowElbowDownRight = ({ size = 24 }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", fill: "currentColor", strokeWidth: "16", width: size, height: size },
4
4
  React.createElement("rect", { width: "256", height: "256", fill: "none" }),
5
- React.createElement("polyline", { points: "160 128 208 176 160 224", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "16" }),
6
- React.createElement("polyline", { points: "64 32 64 176 208 176", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "16" })));
5
+ React.createElement("polyline", { points: "160 128 208 176 160 224", fill: "none", stroke: "currentColor" }),
6
+ React.createElement("polyline", { points: "64 32 64 176 208 176", fill: "none", stroke: "currentColor" })));
7
7
  export default ArrowElbowDownRight;
8
8
  //# sourceMappingURL=ArrowElbowDownRight.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ArrowElbowDownRight.js","sourceRoot":"","sources":["../../src/assets/ArrowElbowDownRight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,mBAAmB,GAAO,GAAG,EAAE,CAAC,CACpC,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,kCACE,MAAM,EAAC,yBAAyB,EAChC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,oBACN,OAAO,qBACN,OAAO,kBACV,IAAI,GACP;IACZ,kCACE,MAAM,EAAC,sBAAsB,EAC7B,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,oBACN,OAAO,qBACN,OAAO,kBACV,IAAI,GACP,CACR,CACP,CAAA;AAED,eAAe,mBAAmB,CAAA"}
1
+ {"version":3,"file":"ArrowElbowDownRight.js","sourceRoot":"","sources":["../../src/assets/ArrowElbowDownRight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,GAAI,EAAE,EAAa,EAAE,EAAE,CAAC,CACzD,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI;IAEZ,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,kCACE,MAAM,EAAC,yBAAyB,EAChC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,GACX;IACZ,kCACE,MAAM,EAAC,sBAAsB,EAC7B,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,GACX,CACR,CACP,CAAA;AAED,eAAe,mBAAmB,CAAA"}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { IconProps } from './IconProps';
3
+ declare const DotsThree: ({ size }: IconProps) => JSX.Element;
4
+ export default DotsThree;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ // Icon from Phosphor Icons
3
+ const DotsThree = ({ size = 24 }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: size, height: size },
4
+ React.createElement("rect", { width: "256", height: "256", fill: "none" }),
5
+ React.createElement("circle", { cx: "128", cy: "128", r: "12" }),
6
+ React.createElement("circle", { cx: "192", cy: "128", r: "12" }),
7
+ React.createElement("circle", { cx: "64", cy: "128", r: "12" })));
8
+ export default DotsThree;
9
+ //# sourceMappingURL=DotsThree.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DotsThree.js","sourceRoot":"","sources":["../../src/assets/DotsThree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAa,EAAE,EAAE,CAAC,CAC9C,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI;IAEZ,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,gCAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,IAAI,GAAU;IAC1C,gCAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,IAAI,GAAU;IAC1C,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,IAAI,GAAU,CACrC,CACP,CAAA;AAED,eAAe,SAAS,CAAA"}
@@ -1,3 +1,4 @@
1
- import type { FC } from 'react';
2
- declare const House: FC;
1
+ /// <reference types="react" />
2
+ import { IconProps } from './IconProps';
3
+ declare const House: ({ size }: IconProps) => JSX.Element;
3
4
  export default House;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  // Icon from Phosphor Icons
3
- const House = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
3
+ const House = ({ size = 24 }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: size, height: size },
4
4
  React.createElement("rect", { width: "256", height: "256", fill: "none" }),
5
5
  React.createElement("path", { d: "M152,208V160a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v48a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V115.5a8.3,8.3,0,0,1,2.6-5.9l80-72.7a8,8,0,0,1,10.8,0l80,72.7a8.3,8.3,0,0,1,2.6,5.9V208a8,8,0,0,1-8,8H160A8,8,0,0,1,152,208Z", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "24" })));
6
6
  export default House;
@@ -1 +1 @@
1
- {"version":3,"file":"House.js","sourceRoot":"","sources":["../../src/assets/House.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAO,GAAG,EAAE,CAAC,CACtB,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,CAAC,EAAC,4MAA4M,EAC9M,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV,CACJ,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"House.js","sourceRoot":"","sources":["../../src/assets/House.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAa,EAAE,EAAE,CAAC,CAC1C,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI;IAEZ,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,8BACE,CAAC,EAAC,4MAA4M,EAC9M,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV,CACJ,CACP,CAAA;AAED,eAAe,KAAK,CAAA"}
@@ -0,0 +1,3 @@
1
+ export type IconProps = {
2
+ size?: number;
3
+ };
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=IconProps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconProps.js","sourceRoot":"","sources":["../../src/assets/IconProps.ts"],"names":[],"mappings":""}
@@ -3,6 +3,7 @@ export { default as ArrowElbowDownRight } from './ArrowElbowDownRight';
3
3
  export { default as ArrowRight } from './ArrowRight';
4
4
  export { default as CaretDown } from './CaretDown';
5
5
  export { default as Checked } from './Checked';
6
+ export { default as DotsThree } from './DotsThree';
6
7
  export { default as Heart } from './Heart';
7
8
  export { default as House } from './House';
8
9
  export { default as Minus } from './Minus';
@@ -4,6 +4,7 @@ export { default as ArrowElbowDownRight } from './ArrowElbowDownRight';
4
4
  export { default as ArrowRight } from './ArrowRight';
5
5
  export { default as CaretDown } from './CaretDown';
6
6
  export { default as Checked } from './Checked';
7
+ export { default as DotsThree } from './DotsThree';
7
8
  export { default as Heart } from './Heart';
8
9
  export { default as House } from './House';
9
10
  export { default as Minus } from './Minus';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,sBAAsB;AACtB,cAAc,gBAAgB,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,sBAAsB;AACtB,cAAc,gBAAgB,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,CAAC,EAAE,MAAM,KAAK,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA"}
package/dist/index.d.ts CHANGED
@@ -35,6 +35,8 @@ export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, }
35
35
  export type { AccordionProps, AccordionItemProps, AccordionButtonProps, AccordionPanelProps, } from './molecules/Accordion';
36
36
  export { default as Alert } from './molecules/Alert';
37
37
  export type { AlertProps } from './molecules/Alert';
38
+ export { BreadcrumbPure, Breadcrumb, } from './molecules/Breadcrumb';
39
+ export type { BreadcrumbPureProps, BreadcrumbProps, } from './molecules/Breadcrumb';
38
40
  export { default as BuyButton } from './molecules/BuyButton';
39
41
  export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
40
42
  export type { CartItemProps, CartItemImageProps, CartItemSummaryProps, } from './molecules/CartItem';
package/dist/index.js CHANGED
@@ -22,6 +22,7 @@ export { default as SROnly } from './atoms/SROnly';
22
22
  // Molecules
23
23
  export { default as Accordion, AccordionItem, AccordionButton, AccordionPanel, } from './molecules/Accordion';
24
24
  export { default as Alert } from './molecules/Alert';
25
+ export { BreadcrumbPure, Breadcrumb, } from './molecules/Breadcrumb';
25
26
  export { default as BuyButton } from './molecules/BuyButton';
26
27
  export { default as CartItem, CartItemImage, CartItemSummary, } from './molecules/CartItem';
27
28
  export { default as CheckboxField } from './molecules/CheckboxField';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ import { BreadcrumbBaseProps } from './BreadcrumbBase';
3
+ export type BreadcrumbProps = Omit<BreadcrumbBaseProps, "isDesktop">;
4
+ declare const Breadcrumb: ({ breadcrumbList, ...otherProps }: BreadcrumbProps) => JSX.Element;
5
+ export default Breadcrumb;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import BreadcrumbBase from './BreadcrumbBase';
3
+ const Breadcrumb = ({ breadcrumbList, ...otherProps }) => (React.createElement(React.Fragment, null,
4
+ React.createElement(BreadcrumbBase, { breadcrumbList: breadcrumbList, ...otherProps }),
5
+ React.createElement(BreadcrumbBase, { breadcrumbList: breadcrumbList, isDesktop: true, ...otherProps })));
6
+ export default Breadcrumb;
7
+ //# sourceMappingURL=Breadcrumb.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/molecules/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,cAAuC,MAAM,kBAAkB,CAAA;AAKtE,MAAM,UAAU,GAAG,CAAC,EAClB,cAAc,EACd,GAAG,UAAU,EACG,EAAE,EAAE,CAAC,CACrB;IACE,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,KAAM,UAAU,GAAI;IAClE,oBAAC,cAAc,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,WAAK,UAAU,GAAI,CAC3E,CACJ,CAAA;AAED,eAAe,UAAU,CAAA"}
@@ -0,0 +1,77 @@
1
+ import React, { ReactElement, ReactNode } from 'react';
2
+ import { BreadcrumbPureProps } from './BreadcrumbPure';
3
+ type ItemElement = {
4
+ item: string;
5
+ name: string;
6
+ position: number;
7
+ };
8
+ type RenderLinkProps = {
9
+ /**
10
+ * Item prop for specific item.
11
+ */
12
+ itemProps: ItemElement;
13
+ /**
14
+ * Represents if the item is collapsed or not.
15
+ */
16
+ collapsed: boolean;
17
+ };
18
+ export type BreadcrumbBaseProps = {
19
+ /**
20
+ * Array of ItemElement that represents each breadcrumb item.
21
+ */
22
+ breadcrumbList: ItemElement[];
23
+ /**
24
+ * Represents if is Desktop os mobile.
25
+ */
26
+ isDesktop?: boolean;
27
+ /**
28
+ * Link go to home.
29
+ */
30
+ homeLink?: ReactElement;
31
+ /**
32
+ * Icon for dropdown button.
33
+ */
34
+ dropdownButtonIcon?: ReactNode;
35
+ /**
36
+ * Icon for collapsed items.
37
+ */
38
+ collapsedItemsIcon?: ReactNode;
39
+ /**
40
+ * Function to render a item as breadcrumb link.
41
+ * @param renderLinkProps Properties for each item to be rendered.
42
+ * @returns Link to be rendered.
43
+ */
44
+ renderLink?: (renderLinkProps: RenderLinkProps) => ReactElement;
45
+ } & BreadcrumbPureProps;
46
+ declare const BreadcrumbBase: React.ForwardRefExoticComponent<{
47
+ /**
48
+ * Array of ItemElement that represents each breadcrumb item.
49
+ */
50
+ breadcrumbList: ItemElement[];
51
+ /**
52
+ * Represents if is Desktop os mobile.
53
+ */
54
+ isDesktop?: boolean | undefined;
55
+ /**
56
+ * Link go to home.
57
+ */
58
+ homeLink?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
59
+ /**
60
+ * Icon for dropdown button.
61
+ */
62
+ dropdownButtonIcon?: ReactNode;
63
+ /**
64
+ * Icon for collapsed items.
65
+ */
66
+ collapsedItemsIcon?: ReactNode;
67
+ /**
68
+ * Function to render a item as breadcrumb link.
69
+ * @param renderLinkProps Properties for each item to be rendered.
70
+ * @returns Link to be rendered.
71
+ */
72
+ renderLink?: ((renderLinkProps: RenderLinkProps) => ReactElement) | undefined;
73
+ } & {
74
+ divider?: React.ReactNode;
75
+ testId?: string | undefined;
76
+ } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
77
+ export default BreadcrumbBase;
@@ -0,0 +1,51 @@
1
+ import React, { cloneElement, forwardRef, useCallback } from 'react';
2
+ import { ArrowElbowDownRight, DotsThree } from '../../assets';
3
+ import Icon from '../../atoms/Icon';
4
+ import Link from '../../atoms/Link';
5
+ import Dropdown, { DropdownButton, DropdownMenu, DropdownItem, } from '../Dropdown';
6
+ import BreadcrumbPure from './BreadcrumbPure';
7
+ import HomeLink from './HomeLink';
8
+ const BreadcrumbBase = forwardRef(function BreadcrumbBase({ children, divider: rawDivider = '', testId = 'fs-breadcrumb', breadcrumbList, isDesktop = false, renderLink, homeLink = React.createElement(HomeLink, null), dropdownButtonIcon = React.createElement(Icon, { component: React.createElement(DotsThree, null) }), collapsedItemsIcon = React.createElement(Icon, { component: React.createElement(ArrowElbowDownRight, null) }), ...otherProps }, ref) {
9
+ const homeLinkProps = {
10
+ 'data-fs-breadcrumb-link': true,
11
+ 'data-fs-breadcrumb-link-home': true,
12
+ 'aria-label': 'Go to homepage',
13
+ href: '/',
14
+ };
15
+ const homeLinkWithProps = cloneElement(homeLink, homeLinkProps);
16
+ const firstItem = isDesktop ? breadcrumbList[0] : null;
17
+ const mediumItems = isDesktop
18
+ ? breadcrumbList.slice(1, -2)
19
+ : breadcrumbList.slice(0, -2);
20
+ const lastItems = breadcrumbList.slice(-2);
21
+ const collapseBreadcrumb = breadcrumbList.length > 4;
22
+ const breadcrumbLink = useCallback((renderLinkProps) => {
23
+ const breadcrumbItem = renderLink?.(renderLinkProps);
24
+ const itemProps = renderLinkProps.collapsed
25
+ ? {
26
+ 'data-fs-breadcrumb-dropdown-link': true,
27
+ }
28
+ : {
29
+ 'data-fs-breadcrumb-link': true,
30
+ };
31
+ return breadcrumbItem ? (cloneElement(breadcrumbItem, { ...itemProps, key: renderLinkProps.itemProps.position })) : (React.createElement(Link, { ...itemProps, href: renderLinkProps.itemProps.item, key: renderLinkProps.itemProps.position }, renderLinkProps.itemProps.name));
32
+ }, [renderLink]);
33
+ return (React.createElement(BreadcrumbPure, { ref: ref, "data-fs-breadcrumb-is-desktop": isDesktop, ...otherProps },
34
+ homeLinkWithProps,
35
+ !collapseBreadcrumb &&
36
+ breadcrumbList.map((item, index) => {
37
+ return breadcrumbList.length === index + 1 ? (React.createElement("span", { key: String(item.position) }, item.name)) : (breadcrumbLink({ itemProps: item, collapsed: false }));
38
+ }),
39
+ collapseBreadcrumb &&
40
+ firstItem &&
41
+ breadcrumbLink({ itemProps: firstItem, collapsed: false }),
42
+ collapseBreadcrumb && (React.createElement(Dropdown, null,
43
+ React.createElement(DropdownButton, { "data-fs-breadcrumb-dropdown-button": true, size: "small" }, dropdownButtonIcon),
44
+ React.createElement(DropdownMenu, { "data-fs-breadcrumb-dropdown-menu": true }, mediumItems.map((item) => (React.createElement(DropdownItem, { "data-fs-breadcrumb-dropdown-item": true, key: String(item.position), icon: collapsedItemsIcon }, breadcrumbLink({ itemProps: item, collapsed: true }))))))),
45
+ collapseBreadcrumb &&
46
+ lastItems.map((item, index) => {
47
+ return lastItems.length === index + 1 ? (React.createElement("span", { key: String(item.position) }, item.name)) : (breadcrumbLink({ itemProps: item, collapsed: false }));
48
+ })));
49
+ });
50
+ export default BreadcrumbBase;
51
+ //# sourceMappingURL=BreadcrumbBase.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BreadcrumbBase.js","sourceRoot":"","sources":["../../../src/molecules/Breadcrumb/BreadcrumbBase.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,23 @@
1
+ import React from "react";
2
+ import type { HTMLAttributes, ReactNode } from 'react';
3
+ export type BreadcrumbPureProps = {
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
+ } & HTMLAttributes<HTMLDivElement>;
13
+ declare const BreadcrumbPure: React.ForwardRefExoticComponent<{
14
+ /**
15
+ * A ReactNode that will be rendered as the Divider icon.
16
+ */
17
+ divider?: ReactNode;
18
+ /**
19
+ * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
20
+ */
21
+ testId?: string | undefined;
22
+ } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
23
+ export default BreadcrumbPure;
@@ -0,0 +1,12 @@
1
+ import React, { forwardRef } from "react";
2
+ import List from "../../atoms/List";
3
+ import ListItem from "./ListItem";
4
+ const BreadcrumbPure = forwardRef(function BreadcrumbPure({ children, divider: rawDivider = '', testId = 'fs-breadcrumb', ...otherProps }, ref) {
5
+ return (React.createElement("nav", { "aria-label": "Breadcrumb", role: "navigation", ref: ref, "data-fs-breadcrumb": true, "data-testid": testId, ...otherProps },
6
+ React.createElement(List, { as: "ol", "data-fs-breadcrumb-list": true }, React.Children.toArray(children).map((child, index, childrenArray) => {
7
+ const isLastItem = index === childrenArray.length - 1;
8
+ return (React.createElement(ListItem, { isLastItem: isLastItem, divider: rawDivider, key: `breadcrumb-${index}`, testId: testId }, child));
9
+ }))));
10
+ });
11
+ export default BreadcrumbPure;
12
+ //# sourceMappingURL=BreadcrumbPure.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BreadcrumbPure.js","sourceRoot":"","sources":["../../../src/molecules/Breadcrumb/BreadcrumbPure.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,IAAI,MAAM,kBAAkB,CAAA;AAEnC,OAAO,QAAQ,MAAM,YAAY,CAAA;AAajC,MAAM,cAAc,GAAG,UAAU,CAC7B,SAAS,cAAc,CACrB,EACE,QAAQ,EACR,OAAO,EAAE,UAAU,GAAG,EAAE,EACxB,MAAM,GAAG,eAAe,EACxB,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,qCACV,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;AAEH,eAAe,cAAc,CAAA"}
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { BreadcrumbBaseProps } from "./BreadcrumbBase";
3
+ declare const Divider: ({ divider, testId }: Omit<BreadcrumbBaseProps, "breadcrumbList">) => JSX.Element;
4
+ export default Divider;
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ const Divider = ({ divider, testId }) => {
3
+ const props = {
4
+ 'data-fs-breadcrumb-divider': true,
5
+ 'aria-hidden': true,
6
+ 'data-testid': `${testId}-divider`,
7
+ };
8
+ if (React.isValidElement(divider)) {
9
+ return React.cloneElement(divider, props);
10
+ }
11
+ return React.createElement("span", { ...props }, divider ?? '/');
12
+ };
13
+ export default Divider;
14
+ //# sourceMappingURL=Divider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/molecules/Breadcrumb/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,MAAM,EAA+C,EAAE,EAAE;IACjF,MAAM,KAAK,GAAG;QACZ,4BAA4B,EAAE,IAAI;QAClC,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;AACnD,CAAC,CAAA;AAED,eAAe,OAAO,CAAA"}
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const HomeLink: () => JSX.Element;
3
+ export default HomeLink;
@@ -0,0 +1,6 @@
1
+ import { House, Icon, Link } from "../..";
2
+ import React from "react";
3
+ const HomeLink = () => (React.createElement(Link, { "data-fs-breadcrumb-link": true, "data-fs-breadcrumb-link-home": true, "aria-label": "Go to homepage", href: "/" },
4
+ React.createElement(Icon, { component: React.createElement(House, { size: 18 }) })));
5
+ export default HomeLink;
6
+ //# sourceMappingURL=HomeLink.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HomeLink.js","sourceRoot":"","sources":["../../../src/molecules/Breadcrumb/HomeLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,oBAAC,IAAI,yFAGQ,gBAAgB,EAC3B,IAAI,EAAC,GAAG;IAER,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GAAI,CACnC,CACR,CAAA;AAED,eAAe,QAAQ,CAAA"}
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from 'react';
2
+ import { BreadcrumbBaseProps } from './BreadcrumbBase';
3
+ type ListItemProps = {
4
+ children: ReactNode;
5
+ isLastItem: boolean;
6
+ divider: BreadcrumbBaseProps['divider'];
7
+ testId: string;
8
+ };
9
+ declare const ListItem: ({ children, isLastItem, divider, testId }: ListItemProps) => JSX.Element;
10
+ export default ListItem;
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import Divider from './Divider';
3
+ const ListItem = ({ children, isLastItem, divider, testId }) => {
4
+ const props = {
5
+ 'data-testid': `${testId}-item`,
6
+ 'data-fs-breadcrumb-item': isLastItem ? 'current' : true,
7
+ 'aria-current': isLastItem ? 'page' : undefined,
8
+ };
9
+ if (!React.isValidElement(children)) {
10
+ return (React.createElement("li", { "data-fs-breadcrumb-list-item": true },
11
+ React.createElement("span", { ...props },
12
+ children,
13
+ isLastItem ? null : React.createElement(Divider, { divider: divider, testId: testId }))));
14
+ }
15
+ return (React.createElement("li", { "data-fs-breadcrumb-list-item": true },
16
+ React.cloneElement(children, props),
17
+ isLastItem ? null : React.createElement(Divider, { divider: divider, testId: testId })));
18
+ };
19
+ export default ListItem;
20
+ //# sourceMappingURL=ListItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/molecules/Breadcrumb/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,OAAO,MAAM,WAAW,CAAA;AAS/B,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAiB,EAAE,EAAE;IAC5E,MAAM,KAAK,GAAG;QACZ,aAAa,EAAE,GAAG,MAAM,OAAO;QAC/B,yBAAyB,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACxD,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,eAAe,QAAQ,CAAA"}
@@ -0,0 +1,4 @@
1
+ export { default as BreadcrumbPure } from './BreadcrumbPure';
2
+ export type { BreadcrumbPureProps } from './BreadcrumbPure';
3
+ export { default as Breadcrumb } from './Breadcrumb';
4
+ export type { BreadcrumbProps } from './Breadcrumb';
@@ -0,0 +1,3 @@
1
+ export { default as BreadcrumbPure } from './BreadcrumbPure';
2
+ export { default as Breadcrumb } from './Breadcrumb';
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAE5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/components",
3
- "version": "2.0.65-alpha.0",
3
+ "version": "2.0.69-alpha.0",
4
4
  "module": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
6
6
  "author": "Emerson Laurentino @emersonlaurentino",
@@ -21,8 +21,8 @@
21
21
  "src"
22
22
  ],
23
23
  "devDependencies": {
24
- "@faststore/eslint-config": "^2.0.65-alpha.0",
25
- "@faststore/shared": "^2.0.65-alpha.0",
24
+ "@faststore/eslint-config": "^2.0.66-alpha.0",
25
+ "@faststore/shared": "^2.0.66-alpha.0",
26
26
  "eslint": "7.32.0",
27
27
  "typescript": "^4.8.4"
28
28
  },
@@ -30,5 +30,5 @@
30
30
  "node": "16.18.0",
31
31
  "yarn": "1.19.1"
32
32
  },
33
- "gitHead": "05c8f7f46e876406fcae355dbeff243bbf2e1e25"
33
+ "gitHead": "9203ce7fd8a8fd0d0ae60afde8743adaec18c53d"
34
34
  }
@@ -1,32 +1,26 @@
1
1
  import React from 'react'
2
- import type { FC } from 'react'
2
+ import { IconProps } from './IconProps'
3
3
 
4
4
  // Icon from Phosphor Icons
5
- const ArrowElbowDownRight: FC = () => (
5
+ const ArrowElbowDownRight = ({ size = 24 }: IconProps) => (
6
6
  <svg
7
7
  xmlns="http://www.w3.org/2000/svg"
8
8
  viewBox="0 0 256 256"
9
9
  fill="currentColor"
10
10
  strokeWidth="16"
11
- width={24}
12
- height={24}
11
+ width={size}
12
+ height={size}
13
13
  >
14
14
  <rect width="256" height="256" fill="none"></rect>
15
15
  <polyline
16
16
  points="160 128 208 176 160 224"
17
17
  fill="none"
18
- stroke="currentColor"
19
- stroke-linecap="round"
20
- stroke-linejoin="round"
21
- stroke-width="16"
18
+ stroke="currentColor"
22
19
  ></polyline>
23
20
  <polyline
24
21
  points="64 32 64 176 208 176"
25
22
  fill="none"
26
23
  stroke="currentColor"
27
- stroke-linecap="round"
28
- stroke-linejoin="round"
29
- stroke-width="16"
30
24
  ></polyline>
31
25
  </svg>
32
26
  )
@@ -0,0 +1,21 @@
1
+ import React from 'react'
2
+ import { IconProps } from './IconProps'
3
+
4
+ // Icon from Phosphor Icons
5
+ const DotsThree = ({ size = 24 }: IconProps) => (
6
+ <svg
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ fill="currentColor"
9
+ viewBox="0 0 256 256"
10
+ strokeWidth="16"
11
+ width={size}
12
+ height={size}
13
+ >
14
+ <rect width="256" height="256" fill="none"></rect>
15
+ <circle cx="128" cy="128" r="12"></circle>
16
+ <circle cx="192" cy="128" r="12"></circle>
17
+ <circle cx="64" cy="128" r="12"></circle>
18
+ </svg>
19
+ )
20
+
21
+ export default DotsThree
@@ -1,15 +1,15 @@
1
1
  import React from 'react'
2
- import type { FC } from 'react'
2
+ import { IconProps } from './IconProps'
3
3
 
4
4
  // Icon from Phosphor Icons
5
- const House: FC = () => (
5
+ const House = ({ size = 24 }: IconProps) => (
6
6
  <svg
7
7
  xmlns="http://www.w3.org/2000/svg"
8
8
  fill="currentColor"
9
9
  viewBox="0 0 256 256"
10
10
  strokeWidth="16"
11
- width={24}
12
- height={24}
11
+ width={size}
12
+ height={size}
13
13
  >
14
14
  <rect width="256" height="256" fill="none"></rect>
15
15
  <path
@@ -0,0 +1,3 @@
1
+ export type IconProps = {
2
+ size?: number
3
+ }
@@ -5,6 +5,7 @@ export { default as ArrowElbowDownRight } from './ArrowElbowDownRight'
5
5
  export { default as ArrowRight } from './ArrowRight'
6
6
  export { default as CaretDown } from './CaretDown'
7
7
  export { default as Checked } from './Checked'
8
+ export { default as DotsThree } from './DotsThree'
8
9
  export { default as Heart } from './Heart'
9
10
  export { default as House } from './House'
10
11
  export { default as Minus } from './Minus'
package/src/index.ts CHANGED
@@ -52,6 +52,14 @@ export type {
52
52
  } from './molecules/Accordion'
53
53
  export { default as Alert } from './molecules/Alert'
54
54
  export type { AlertProps } from './molecules/Alert'
55
+ export {
56
+ BreadcrumbPure,
57
+ Breadcrumb,
58
+ } from './molecules/Breadcrumb'
59
+ export type {
60
+ BreadcrumbPureProps,
61
+ BreadcrumbProps,
62
+ } from './molecules/Breadcrumb'
55
63
  export { default as BuyButton } from './molecules/BuyButton'
56
64
  export {
57
65
  default as CartItem,
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import BreadcrumbBase, { BreadcrumbBaseProps } from './BreadcrumbBase'
3
+
4
+ export type BreadcrumbProps = Omit<BreadcrumbBaseProps, "isDesktop">
5
+
6
+
7
+ const Breadcrumb = ({
8
+ breadcrumbList,
9
+ ...otherProps
10
+ }: BreadcrumbProps) => (
11
+ <>
12
+ <BreadcrumbBase breadcrumbList={breadcrumbList} {...otherProps} />
13
+ <BreadcrumbBase breadcrumbList={breadcrumbList} isDesktop {...otherProps} />
14
+ </>
15
+ )
16
+
17
+ export default Breadcrumb
@@ -0,0 +1,165 @@
1
+ import React, { cloneElement, forwardRef, ReactElement, ReactNode, useCallback } from 'react'
2
+ import { ArrowElbowDownRight, DotsThree } from '../../assets'
3
+ import Icon from '../../atoms/Icon'
4
+ import Link from '../../atoms/Link'
5
+ import Dropdown, {
6
+ DropdownButton,
7
+ DropdownMenu,
8
+ DropdownItem,
9
+ } from '../Dropdown'
10
+ import BreadcrumbPure, { BreadcrumbPureProps } from './BreadcrumbPure'
11
+ import HomeLink from './HomeLink'
12
+
13
+ type ItemElement = {
14
+ item: string
15
+ name: string
16
+ position: number
17
+ }
18
+
19
+ type RenderLinkProps = {
20
+ /**
21
+ * Item prop for specific item.
22
+ */
23
+ itemProps: ItemElement
24
+ /**
25
+ * Represents if the item is collapsed or not.
26
+ */
27
+ collapsed: boolean
28
+ }
29
+
30
+ export type BreadcrumbBaseProps = {
31
+ /**
32
+ * Array of ItemElement that represents each breadcrumb item.
33
+ */
34
+ breadcrumbList: ItemElement[]
35
+ /**
36
+ * Represents if is Desktop os mobile.
37
+ */
38
+ isDesktop?: boolean
39
+ /**
40
+ * Link go to home.
41
+ */
42
+ homeLink?: ReactElement
43
+ /**
44
+ * Icon for dropdown button.
45
+ */
46
+ dropdownButtonIcon?: ReactNode
47
+ /**
48
+ * Icon for collapsed items.
49
+ */
50
+ collapsedItemsIcon?: ReactNode
51
+ /**
52
+ * Function to render a item as breadcrumb link.
53
+ * @param renderLinkProps Properties for each item to be rendered.
54
+ * @returns Link to be rendered.
55
+ */
56
+ renderLink?: (renderLinkProps: RenderLinkProps) => ReactElement
57
+ } & BreadcrumbPureProps
58
+
59
+ const BreadcrumbBase = forwardRef<HTMLDivElement, BreadcrumbBaseProps>(
60
+ function BreadcrumbBase(
61
+ {
62
+ children,
63
+ divider: rawDivider = '',
64
+ testId = 'fs-breadcrumb',
65
+ breadcrumbList,
66
+ isDesktop = false,
67
+ renderLink,
68
+ homeLink = <HomeLink />,
69
+ dropdownButtonIcon = <Icon component={<DotsThree />} />,
70
+ collapsedItemsIcon = <Icon component={<ArrowElbowDownRight />} />,
71
+ ...otherProps
72
+ },
73
+ ref
74
+ ) {
75
+ const homeLinkProps = {
76
+ 'data-fs-breadcrumb-link': true,
77
+ 'data-fs-breadcrumb-link-home': true,
78
+ 'aria-label': 'Go to homepage',
79
+ href: '/',
80
+ }
81
+
82
+ const homeLinkWithProps = cloneElement(homeLink, homeLinkProps)
83
+
84
+ const firstItem = isDesktop ? breadcrumbList[0] : null
85
+ const mediumItems = isDesktop
86
+ ? breadcrumbList.slice(1, -2)
87
+ : breadcrumbList.slice(0, -2)
88
+
89
+ const lastItems = breadcrumbList.slice(-2)
90
+
91
+ const collapseBreadcrumb = breadcrumbList.length > 4
92
+
93
+ const breadcrumbLink = useCallback((renderLinkProps: RenderLinkProps) => {
94
+ const breadcrumbItem = renderLink?.(renderLinkProps)
95
+ const itemProps = renderLinkProps.collapsed
96
+ ? {
97
+ 'data-fs-breadcrumb-dropdown-link': true,
98
+ }
99
+ : {
100
+ 'data-fs-breadcrumb-link': true,
101
+ }
102
+ return breadcrumbItem ? (
103
+ cloneElement(breadcrumbItem, {...itemProps, key: renderLinkProps.itemProps.position })
104
+ ) : (
105
+ <Link {...itemProps} href={renderLinkProps.itemProps.item} key={renderLinkProps.itemProps.position}>
106
+ {renderLinkProps.itemProps.name}
107
+ </Link>
108
+ )
109
+ }, [renderLink])
110
+
111
+ return (
112
+ <BreadcrumbPure
113
+ ref={ref}
114
+ data-fs-breadcrumb-is-desktop={isDesktop}
115
+ {...otherProps}
116
+ >
117
+ {homeLinkWithProps}
118
+
119
+ {!collapseBreadcrumb &&
120
+ breadcrumbList.map((item, index) => {
121
+ return breadcrumbList.length === index + 1 ? (
122
+ <span key={String(item.position)}>{item.name}</span>
123
+ ) : (
124
+ breadcrumbLink({ itemProps: item, collapsed: false })
125
+ )
126
+ })}
127
+
128
+ {collapseBreadcrumb &&
129
+ firstItem &&
130
+ breadcrumbLink({ itemProps: firstItem, collapsed: false })}
131
+
132
+ {collapseBreadcrumb && (
133
+ <Dropdown>
134
+ <DropdownButton
135
+ data-fs-breadcrumb-dropdown-button
136
+ size="small"
137
+ >{dropdownButtonIcon}</DropdownButton>
138
+ <DropdownMenu data-fs-breadcrumb-dropdown-menu>
139
+ {mediumItems.map((item) => (
140
+ <DropdownItem
141
+ data-fs-breadcrumb-dropdown-item
142
+ key={String(item.position)}
143
+ icon={collapsedItemsIcon}
144
+ >
145
+ {breadcrumbLink({ itemProps: item, collapsed: true })}
146
+ </DropdownItem>
147
+ ))}
148
+ </DropdownMenu>
149
+ </Dropdown>
150
+ )}
151
+
152
+ {collapseBreadcrumb &&
153
+ lastItems.map((item, index) => {
154
+ return lastItems.length === index + 1 ? (
155
+ <span key={String(item.position)}>{item.name}</span>
156
+ ) : (
157
+ breadcrumbLink({ itemProps: item, collapsed: false })
158
+ )
159
+ })}
160
+ </BreadcrumbPure>
161
+ )
162
+ }
163
+ )
164
+
165
+ export default BreadcrumbBase
@@ -0,0 +1,59 @@
1
+ import React, { forwardRef } from "react"
2
+ import List from "../../atoms/List"
3
+ import type { HTMLAttributes, ReactNode } from 'react'
4
+ import ListItem from "./ListItem"
5
+
6
+ export type BreadcrumbPureProps = {
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
+ } & HTMLAttributes<HTMLDivElement>
16
+
17
+ const BreadcrumbPure = forwardRef<HTMLDivElement, BreadcrumbPureProps>(
18
+ function BreadcrumbPure(
19
+ {
20
+ children,
21
+ divider: rawDivider = '',
22
+ testId = 'fs-breadcrumb',
23
+ ...otherProps
24
+ },
25
+ ref
26
+ ) {
27
+ return (
28
+ <nav
29
+ aria-label="Breadcrumb"
30
+ role="navigation"
31
+ ref={ref}
32
+ data-fs-breadcrumb
33
+ data-testid={testId}
34
+ {...otherProps}
35
+ >
36
+ <List as="ol" data-fs-breadcrumb-list>
37
+ {React.Children.toArray(children).map(
38
+ (child, index, childrenArray) => {
39
+ const isLastItem = index === childrenArray.length - 1
40
+
41
+ return (
42
+ <ListItem
43
+ isLastItem={isLastItem}
44
+ divider={rawDivider}
45
+ key={`breadcrumb-${index}`}
46
+ testId={testId}
47
+ >
48
+ {child}
49
+ </ListItem>
50
+ )
51
+ }
52
+ )}
53
+ </List>
54
+ </nav>
55
+ )
56
+ }
57
+ )
58
+
59
+ export default BreadcrumbPure
@@ -0,0 +1,18 @@
1
+ import React from "react"
2
+ import { BreadcrumbBaseProps } from "./BreadcrumbBase"
3
+
4
+ const Divider = ({ divider, testId }: Omit<BreadcrumbBaseProps, "breadcrumbList">) => {
5
+ const props = {
6
+ 'data-fs-breadcrumb-divider': true,
7
+ 'aria-hidden': true,
8
+ 'data-testid': `${testId}-divider`,
9
+ }
10
+
11
+ if (React.isValidElement(divider)) {
12
+ return React.cloneElement(divider, props)
13
+ }
14
+
15
+ return <span {...props}>{divider ?? '/'}</span>
16
+ }
17
+
18
+ export default Divider
@@ -0,0 +1,15 @@
1
+ import { House, Icon, Link } from "../..";
2
+ import React from "react";
3
+
4
+ const HomeLink = () => (
5
+ <Link
6
+ data-fs-breadcrumb-link
7
+ data-fs-breadcrumb-link-home
8
+ aria-label="Go to homepage"
9
+ href="/"
10
+ >
11
+ <Icon component={<House size={18} />} />
12
+ </Link>
13
+ )
14
+
15
+ export default HomeLink
@@ -0,0 +1,38 @@
1
+ import React, { ReactNode } from 'react'
2
+ import { BreadcrumbBaseProps } from './BreadcrumbBase'
3
+ import Divider from './Divider'
4
+
5
+ type ListItemProps = {
6
+ children: ReactNode
7
+ isLastItem: boolean
8
+ divider: BreadcrumbBaseProps['divider']
9
+ testId: string
10
+ }
11
+
12
+ const ListItem = ({ children, isLastItem, divider, testId }: ListItemProps) => {
13
+ const props = {
14
+ 'data-testid': `${testId}-item`,
15
+ 'data-fs-breadcrumb-item': isLastItem ? 'current' : true,
16
+ 'aria-current': isLastItem ? ('page' as const) : undefined,
17
+ }
18
+
19
+ if (!React.isValidElement(children)) {
20
+ return (
21
+ <li data-fs-breadcrumb-list-item>
22
+ <span {...props}>
23
+ {children}
24
+ {isLastItem ? null : <Divider divider={divider} testId={testId} />}
25
+ </span>
26
+ </li>
27
+ )
28
+ }
29
+
30
+ return (
31
+ <li data-fs-breadcrumb-list-item>
32
+ {React.cloneElement(children, props)}
33
+ {isLastItem ? null : <Divider divider={divider} testId={testId} />}
34
+ </li>
35
+ )
36
+ }
37
+
38
+ export default ListItem
@@ -0,0 +1,4 @@
1
+ export { default as BreadcrumbPure } from './BreadcrumbPure'
2
+ export type { BreadcrumbPureProps } from './BreadcrumbPure'
3
+ export { default as Breadcrumb } from './Breadcrumb'
4
+ export type { BreadcrumbProps } from './Breadcrumb'