@sproutsocial/seeds-react-breadcrumb 1.0.18 → 1.1.6
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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +55 -0
- package/dist/esm/index.js +5 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/Breadcrumb.stories.tsx +21 -0
- package/src/Breadcrumb.tsx +6 -1
- package/src/BreadcrumbTypes.ts +2 -0
- package/src/__tests__/breadcrumb.test.tsx +87 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m4.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m4.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m2.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m4.27 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m4.95 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 13ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m2.38 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m4.89 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 13ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.
|
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.
|
|
21
|
-
Done in 2.
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 1758ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.21 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.21 KB[39m
|
|
21
|
+
Done in 2.48s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,60 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-breadcrumb
|
|
2
2
|
|
|
3
|
+
## 1.1.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [edc1819]
|
|
8
|
+
- @sproutsocial/seeds-react-link@1.1.12
|
|
9
|
+
|
|
10
|
+
## 1.1.5
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies [5892f44]
|
|
15
|
+
- @sproutsocial/seeds-react-system-props@3.1.1
|
|
16
|
+
- @sproutsocial/seeds-react-link@1.1.11
|
|
17
|
+
|
|
18
|
+
## 1.1.4
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies [5114a32]
|
|
23
|
+
- @sproutsocial/seeds-react-theme@4.1.0
|
|
24
|
+
- @sproutsocial/seeds-react-link@1.1.10
|
|
25
|
+
|
|
26
|
+
## 1.1.3
|
|
27
|
+
|
|
28
|
+
### Patch Changes
|
|
29
|
+
|
|
30
|
+
- Updated dependencies [132ef9d]
|
|
31
|
+
- Updated dependencies [132ef9d]
|
|
32
|
+
- @sproutsocial/seeds-react-theme@4.0.0
|
|
33
|
+
- @sproutsocial/seeds-react-system-props@3.1.0
|
|
34
|
+
- @sproutsocial/seeds-react-link@1.1.9
|
|
35
|
+
|
|
36
|
+
## 1.1.2
|
|
37
|
+
|
|
38
|
+
### Patch Changes
|
|
39
|
+
|
|
40
|
+
- Updated dependencies [47c62b3]
|
|
41
|
+
- @sproutsocial/seeds-react-theme@3.7.1
|
|
42
|
+
- @sproutsocial/seeds-react-link@1.1.8
|
|
43
|
+
|
|
44
|
+
## 1.1.1
|
|
45
|
+
|
|
46
|
+
### Patch Changes
|
|
47
|
+
|
|
48
|
+
- Updated dependencies [06da9c2]
|
|
49
|
+
- @sproutsocial/seeds-react-theme@3.7.0
|
|
50
|
+
- @sproutsocial/seeds-react-link@1.1.7
|
|
51
|
+
|
|
52
|
+
## 1.1.0
|
|
53
|
+
|
|
54
|
+
### Minor Changes
|
|
55
|
+
|
|
56
|
+
- 51f5e85: Add root item functionality to breadcrumb overflow
|
|
57
|
+
|
|
3
58
|
## 1.0.18
|
|
4
59
|
|
|
5
60
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -47,7 +47,7 @@ var Nav = styled.nav`
|
|
|
47
47
|
var styles_default = Nav;
|
|
48
48
|
|
|
49
49
|
// src/Breadcrumb.tsx
|
|
50
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
50
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
51
51
|
var BreadcrumbItem = ({
|
|
52
52
|
children,
|
|
53
53
|
href,
|
|
@@ -64,7 +64,10 @@ var Breadcrumb = ({
|
|
|
64
64
|
const listItems = React.Children.toArray(children);
|
|
65
65
|
const lastItem = listItems[listItems.length - 1];
|
|
66
66
|
return /* @__PURE__ */ jsx(styles_default, { "aria-label": ariaLabel, "data-qa-breadcrumb": ariaLabel, ...rest, children: /* @__PURE__ */ jsxs("ol", { children: [
|
|
67
|
-
overflow && /* @__PURE__ */
|
|
67
|
+
overflow && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
68
|
+
overflow.rootItem,
|
|
69
|
+
/* @__PURE__ */ jsx("li", { children: overflow.menu })
|
|
70
|
+
] }),
|
|
68
71
|
listItems.map((item, i) => {
|
|
69
72
|
const itemElem = typeof item === "object" && "props" in item ? item : /* @__PURE__ */ jsx("span", { children: "item" });
|
|
70
73
|
return React.cloneElement(itemElem, {
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Breadcrumb.tsx","../../src/styles.ts","../../src/BreadcrumbTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport Nav from \"./styles\";\nimport type {\n TypeBreadcrumbProps,\n TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nconst BreadcrumbItem = ({\n children,\n href,\n ...rest\n}: TypeBreadcrumbItemProps) => {\n return (\n <li>\n <Link href={href} {...rest}>\n {children}\n </Link>\n </li>\n );\n};\n\nconst Breadcrumb = ({\n ariaLabel,\n overflow,\n children,\n ...rest\n}: TypeBreadcrumbProps) => {\n const listItems = React.Children.toArray(children);\n const lastItem = listItems[listItems.length - 1];\n return (\n <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n <ol>\n {overflow && <li>{overflow.menu}</li
|
|
1
|
+
{"version":3,"sources":["../../src/Breadcrumb.tsx","../../src/styles.ts","../../src/BreadcrumbTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport Nav from \"./styles\";\nimport type {\n TypeBreadcrumbProps,\n TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nconst BreadcrumbItem = ({\n children,\n href,\n ...rest\n}: TypeBreadcrumbItemProps) => {\n return (\n <li>\n <Link href={href} {...rest}>\n {children}\n </Link>\n </li>\n );\n};\n\nconst Breadcrumb = ({\n ariaLabel,\n overflow,\n children,\n ...rest\n}: TypeBreadcrumbProps) => {\n const listItems = React.Children.toArray(children);\n const lastItem = listItems[listItems.length - 1];\n return (\n <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n <ol>\n {overflow && (\n <>\n {overflow.rootItem}\n <li>{overflow.menu}</li>\n </>\n )}\n {listItems.map((item, i) => {\n // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props\n const itemElem =\n typeof item === \"object\" && \"props\" in item ? (\n item\n ) : (\n <span>item</span>\n );\n return React.cloneElement(itemElem, {\n ...itemElem.props,\n \"aria-current\": listItems[i] === lastItem ? \"page\" : undefined,\n });\n })}\n </ol>\n </Nav>\n );\n};\n\nBreadcrumbItem.displayName = \"Breadcrumb.Item\";\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n","import styled from \"styled-components\";\n\nconst Nav = styled.nav`\n ol {\n ${(props) => props.theme.typography[200]};\n margin: 0;\n font-family: ${(props) => props.theme.fontFamily};\n padding: 0;\n display: flex;\n }\n\n li {\n margin-right: ${(props) => props.theme.space[200]};\n display: flex;\n }\n\n a,\n button {\n ${(props) => props.theme.typography[200]};\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n ol > div + li::before {\n content: \"/\";\n margin-right: ${(props) => props.theme.space[200]};\n }\n\n li:last-child a,\n li:last-child button {\n color: ${(props) => props.theme.colors.text.body};\n font-weight: bold;\n }\n\n li:not(:last-child)::after {\n content: \"/\";\n color: ${(props) => props.theme.colors.text.body};\n margin-left: ${(props) => props.theme.space[200]};\n }\n`;\n\nexport default Nav;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nexport type { TypeLinkProps as TypeBreadcrumbItemProps } from \"@sproutsocial/seeds-react-link\";\n\nexport interface TypeBreadcrumbProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"nav\">, \"color\"> {\n children: React.ReactNode;\n\n /** Description of the type of navigation being provided by the breadcrumb (i.e. \"Asset library breadcrumb\") */\n ariaLabel: string;\n\n /** optional */\n overflow?: {\n label: string;\n menu: React.ReactNode;\n /** Optional item rendered before the overflow menu (e.g. the root/home crumb) */\n rootItem?: React.ReactNode;\n };\n}\n","import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport { Breadcrumb };\nexport * from \"./BreadcrumbTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,UAAU;;;ACDjB,OAAO,YAAY;AAEnB,IAAM,MAAM,OAAO;AAAA;AAAA,MAEb,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA,mBAEzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMhC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASxB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAIpD,IAAO,iBAAQ;;;AD5BT,SAmBI,UAnBJ,KAmBI,YAnBJ;AAPN,IAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,SACE,oBAAC,QACC,8BAAC,QAAK,MAAa,GAAG,MACnB,UACH,GACF;AAEJ;AAEA,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,YAAkB,eAAS,QAAQ,QAAQ;AACjD,QAAM,WAAW,UAAU,UAAU,SAAS,CAAC;AAC/C,SACE,oBAAC,kBAAI,cAAY,WAAW,sBAAoB,WAAY,GAAG,MAC7D,+BAAC,QACE;AAAA,gBACC,iCACG;AAAA,eAAS;AAAA,MACV,oBAAC,QAAI,mBAAS,MAAK;AAAA,OACrB;AAAA,IAED,UAAU,IAAI,CAAC,MAAM,MAAM;AAE1B,YAAM,WACJ,OAAO,SAAS,YAAY,WAAW,OACrC,OAEA,oBAAC,UAAK,kBAAI;AAEd,aAAa,mBAAa,UAAU;AAAA,QAClC,GAAG,SAAS;AAAA,QACZ,gBAAgB,UAAU,CAAC,MAAM,WAAW,SAAS;AAAA,MACvD,CAAC;AAAA,IACH,CAAC;AAAA,KACH,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,WAAW,OAAO;AAElB,IAAO,qBAAQ;;;AE5Df,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -12,6 +12,8 @@ interface TypeBreadcrumbProps extends TypeStyledComponentsCommonProps, TypeSyste
|
|
|
12
12
|
overflow?: {
|
|
13
13
|
label: string;
|
|
14
14
|
menu: React.ReactNode;
|
|
15
|
+
/** Optional item rendered before the overflow menu (e.g. the root/home crumb) */
|
|
16
|
+
rootItem?: React.ReactNode;
|
|
15
17
|
};
|
|
16
18
|
}
|
|
17
19
|
|
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ interface TypeBreadcrumbProps extends TypeStyledComponentsCommonProps, TypeSyste
|
|
|
12
12
|
overflow?: {
|
|
13
13
|
label: string;
|
|
14
14
|
menu: React.ReactNode;
|
|
15
|
+
/** Optional item rendered before the overflow menu (e.g. the root/home crumb) */
|
|
16
|
+
rootItem?: React.ReactNode;
|
|
15
17
|
};
|
|
16
18
|
}
|
|
17
19
|
|
package/dist/index.js
CHANGED
|
@@ -101,7 +101,10 @@ var Breadcrumb = ({
|
|
|
101
101
|
const listItems = React.Children.toArray(children);
|
|
102
102
|
const lastItem = listItems[listItems.length - 1];
|
|
103
103
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { "aria-label": ariaLabel, "data-qa-breadcrumb": ariaLabel, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ol", { children: [
|
|
104
|
-
overflow && /* @__PURE__ */ (0, import_jsx_runtime.
|
|
104
|
+
overflow && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
105
|
+
overflow.rootItem,
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: overflow.menu })
|
|
107
|
+
] }),
|
|
105
108
|
listItems.map((item, i) => {
|
|
106
109
|
const itemElem = typeof item === "object" && "props" in item ? item : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "item" });
|
|
107
110
|
return React.cloneElement(itemElem, {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Breadcrumb.tsx","../src/styles.ts","../src/BreadcrumbTypes.ts"],"sourcesContent":["import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport { Breadcrumb };\nexport * from \"./BreadcrumbTypes\";\n","import * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport Nav from \"./styles\";\nimport type {\n TypeBreadcrumbProps,\n TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nconst BreadcrumbItem = ({\n children,\n href,\n ...rest\n}: TypeBreadcrumbItemProps) => {\n return (\n <li>\n <Link href={href} {...rest}>\n {children}\n </Link>\n </li>\n );\n};\n\nconst Breadcrumb = ({\n ariaLabel,\n overflow,\n children,\n ...rest\n}: TypeBreadcrumbProps) => {\n const listItems = React.Children.toArray(children);\n const lastItem = listItems[listItems.length - 1];\n return (\n <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n <ol>\n {overflow && <li>{overflow.menu}</li
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Breadcrumb.tsx","../src/styles.ts","../src/BreadcrumbTypes.ts"],"sourcesContent":["import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport { Breadcrumb };\nexport * from \"./BreadcrumbTypes\";\n","import * as React from \"react\";\nimport Link from \"@sproutsocial/seeds-react-link\";\nimport Nav from \"./styles\";\nimport type {\n TypeBreadcrumbProps,\n TypeBreadcrumbItemProps,\n} from \"./BreadcrumbTypes\";\n\nconst BreadcrumbItem = ({\n children,\n href,\n ...rest\n}: TypeBreadcrumbItemProps) => {\n return (\n <li>\n <Link href={href} {...rest}>\n {children}\n </Link>\n </li>\n );\n};\n\nconst Breadcrumb = ({\n ariaLabel,\n overflow,\n children,\n ...rest\n}: TypeBreadcrumbProps) => {\n const listItems = React.Children.toArray(children);\n const lastItem = listItems[listItems.length - 1];\n return (\n <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>\n <ol>\n {overflow && (\n <>\n {overflow.rootItem}\n <li>{overflow.menu}</li>\n </>\n )}\n {listItems.map((item, i) => {\n // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props\n const itemElem =\n typeof item === \"object\" && \"props\" in item ? (\n item\n ) : (\n <span>item</span>\n );\n return React.cloneElement(itemElem, {\n ...itemElem.props,\n \"aria-current\": listItems[i] === lastItem ? \"page\" : undefined,\n });\n })}\n </ol>\n </Nav>\n );\n};\n\nBreadcrumbItem.displayName = \"Breadcrumb.Item\";\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n","import styled from \"styled-components\";\n\nconst Nav = styled.nav`\n ol {\n ${(props) => props.theme.typography[200]};\n margin: 0;\n font-family: ${(props) => props.theme.fontFamily};\n padding: 0;\n display: flex;\n }\n\n li {\n margin-right: ${(props) => props.theme.space[200]};\n display: flex;\n }\n\n a,\n button {\n ${(props) => props.theme.typography[200]};\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n ol > div + li::before {\n content: \"/\";\n margin-right: ${(props) => props.theme.space[200]};\n }\n\n li:last-child a,\n li:last-child button {\n color: ${(props) => props.theme.colors.text.body};\n font-weight: bold;\n }\n\n li:not(:last-child)::after {\n content: \"/\";\n color: ${(props) => props.theme.colors.text.body};\n margin-left: ${(props) => props.theme.space[200]};\n }\n`;\n\nexport default Nav;\n","import * as React from \"react\";\nimport type {\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nexport type { TypeLinkProps as TypeBreadcrumbItemProps } from \"@sproutsocial/seeds-react-link\";\n\nexport interface TypeBreadcrumbProps\n extends TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n Omit<React.ComponentPropsWithoutRef<\"nav\">, \"color\"> {\n children: React.ReactNode;\n\n /** Description of the type of navigation being provided by the breadcrumb (i.e. \"Asset library breadcrumb\") */\n ariaLabel: string;\n\n /** optional */\n overflow?: {\n label: string;\n menu: React.ReactNode;\n /** Optional item rendered before the overflow menu (e.g. the root/home crumb) */\n rootItem?: React.ReactNode;\n };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAiB;;;ACDjB,+BAAmB;AAEnB,IAAM,MAAM,yBAAAA,QAAO;AAAA;AAAA,MAEb,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA,mBAEzB,CAAC,UAAU,MAAM,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMhC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM/C,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASxB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKxC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA,mBACjC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAIpD,IAAO,iBAAQ;;;AD5BT;AAPN,IAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,SACE,4CAAC,QACC,sDAAC,wBAAAC,SAAA,EAAK,MAAa,GAAG,MACnB,UACH,GACF;AAEJ;AAEA,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,QAAM,YAAkB,eAAS,QAAQ,QAAQ;AACjD,QAAM,WAAW,UAAU,UAAU,SAAS,CAAC;AAC/C,SACE,4CAAC,kBAAI,cAAY,WAAW,sBAAoB,WAAY,GAAG,MAC7D,uDAAC,QACE;AAAA,gBACC,4EACG;AAAA,eAAS;AAAA,MACV,4CAAC,QAAI,mBAAS,MAAK;AAAA,OACrB;AAAA,IAED,UAAU,IAAI,CAAC,MAAM,MAAM;AAE1B,YAAM,WACJ,OAAO,SAAS,YAAY,WAAW,OACrC,OAEA,4CAAC,UAAK,kBAAI;AAEd,aAAa,mBAAa,UAAU;AAAA,QAClC,GAAG,SAAS;AAAA,QACZ,gBAAgB,UAAU,CAAC,MAAM,WAAW,SAAS;AAAA,MACvD,CAAC;AAAA,IACH,CAAC;AAAA,KACH,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,WAAW,OAAO;AAElB,IAAO,qBAAQ;;;AE5Df,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["styled","Link","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-breadcrumb",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.6",
|
|
4
4
|
"description": "Seeds React Breadcrumb",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
"test:watch": "jest --watch --coverage=false"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "^
|
|
22
|
-
"@sproutsocial/seeds-react-system-props": "^3.
|
|
23
|
-
"@sproutsocial/seeds-react-link": "^1.1.
|
|
21
|
+
"@sproutsocial/seeds-react-theme": "^4.1.0",
|
|
22
|
+
"@sproutsocial/seeds-react-system-props": "^3.1.1",
|
|
23
|
+
"@sproutsocial/seeds-react-link": "^1.1.12"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@types/react": "^18.0.0",
|
|
@@ -92,3 +92,24 @@ buttonStory.story = {
|
|
|
92
92
|
overflowMenu.story = {
|
|
93
93
|
name: "With Overflow",
|
|
94
94
|
};
|
|
95
|
+
|
|
96
|
+
export const overflowWithRoot = () => (
|
|
97
|
+
<Breadcrumb
|
|
98
|
+
overflow={{
|
|
99
|
+
label: "Asset Library's Breadcrumbs Overflow Menu",
|
|
100
|
+
menu: <BreadcrumbMenu />,
|
|
101
|
+
rootItem: <Breadcrumb.Item href="#">Asset Library</Breadcrumb.Item>,
|
|
102
|
+
}}
|
|
103
|
+
ariaLabel="breadcrumb"
|
|
104
|
+
>
|
|
105
|
+
{path.length > 4
|
|
106
|
+
? path
|
|
107
|
+
.slice(pathMiddle, path.length)
|
|
108
|
+
.map((item) => <Breadcrumb.Item href="#">{item}</Breadcrumb.Item>)
|
|
109
|
+
: path.map((item) => <Breadcrumb.Item href="#">{item}</Breadcrumb.Item>)}
|
|
110
|
+
</Breadcrumb>
|
|
111
|
+
);
|
|
112
|
+
|
|
113
|
+
overflowWithRoot.story = {
|
|
114
|
+
name: "With Overflow and Root",
|
|
115
|
+
};
|
package/src/Breadcrumb.tsx
CHANGED
|
@@ -31,7 +31,12 @@ const Breadcrumb = ({
|
|
|
31
31
|
return (
|
|
32
32
|
<Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>
|
|
33
33
|
<ol>
|
|
34
|
-
{overflow &&
|
|
34
|
+
{overflow && (
|
|
35
|
+
<>
|
|
36
|
+
{overflow.rootItem}
|
|
37
|
+
<li>{overflow.menu}</li>
|
|
38
|
+
</>
|
|
39
|
+
)}
|
|
35
40
|
{listItems.map((item, i) => {
|
|
36
41
|
// @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props
|
|
37
42
|
const itemElem =
|
package/src/BreadcrumbTypes.ts
CHANGED
|
@@ -68,4 +68,91 @@ describe("Breadcrumb", () => {
|
|
|
68
68
|
"page"
|
|
69
69
|
);
|
|
70
70
|
});
|
|
71
|
+
|
|
72
|
+
describe("overflow", () => {
|
|
73
|
+
const OverflowMenu = () => <button>overflow</button>;
|
|
74
|
+
|
|
75
|
+
it("should render the overflow menu", () => {
|
|
76
|
+
render(
|
|
77
|
+
<Breadcrumb
|
|
78
|
+
ariaLabel="breadcrumb"
|
|
79
|
+
overflow={{ label: "More items", menu: <OverflowMenu /> }}
|
|
80
|
+
>
|
|
81
|
+
<Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
|
|
82
|
+
<Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
|
|
83
|
+
</Breadcrumb>
|
|
84
|
+
);
|
|
85
|
+
expect(screen.getByText("overflow")).toBeInTheDocument();
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
it("should not render a rootItem when overflow has no rootItem", () => {
|
|
89
|
+
render(
|
|
90
|
+
<Breadcrumb
|
|
91
|
+
ariaLabel="breadcrumb"
|
|
92
|
+
overflow={{ label: "More items", menu: <OverflowMenu /> }}
|
|
93
|
+
>
|
|
94
|
+
<Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
|
|
95
|
+
<Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
|
|
96
|
+
</Breadcrumb>
|
|
97
|
+
);
|
|
98
|
+
expect(screen.queryByText("Home")).not.toBeInTheDocument();
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
it("should render rootItem before the overflow menu when provided", () => {
|
|
102
|
+
render(
|
|
103
|
+
<Breadcrumb
|
|
104
|
+
ariaLabel="breadcrumb"
|
|
105
|
+
overflow={{
|
|
106
|
+
label: "More items",
|
|
107
|
+
menu: <OverflowMenu />,
|
|
108
|
+
rootItem: <Breadcrumb.Item href="/">Home</Breadcrumb.Item>,
|
|
109
|
+
}}
|
|
110
|
+
>
|
|
111
|
+
<Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
|
|
112
|
+
<Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
|
|
113
|
+
</Breadcrumb>
|
|
114
|
+
);
|
|
115
|
+
expect(screen.getByText("Home")).toBeInTheDocument();
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
it("should render rootItem before the overflow menu in DOM order", () => {
|
|
119
|
+
render(
|
|
120
|
+
<Breadcrumb
|
|
121
|
+
ariaLabel="breadcrumb"
|
|
122
|
+
overflow={{
|
|
123
|
+
label: "More items",
|
|
124
|
+
menu: <OverflowMenu />,
|
|
125
|
+
rootItem: <Breadcrumb.Item href="/">Home</Breadcrumb.Item>,
|
|
126
|
+
}}
|
|
127
|
+
>
|
|
128
|
+
<Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
|
|
129
|
+
<Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
|
|
130
|
+
</Breadcrumb>
|
|
131
|
+
);
|
|
132
|
+
const items = screen.getAllByRole("listitem");
|
|
133
|
+
// rootItem li → overflow li → Level Two li → Level Three li
|
|
134
|
+
expect(items[0]).toHaveTextContent("Home");
|
|
135
|
+
expect(items[1]).toHaveTextContent("overflow");
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
it("should still mark the last child as aria-current when rootItem is present", () => {
|
|
139
|
+
render(
|
|
140
|
+
<Breadcrumb
|
|
141
|
+
ariaLabel="breadcrumb"
|
|
142
|
+
overflow={{
|
|
143
|
+
label: "More items",
|
|
144
|
+
menu: <OverflowMenu />,
|
|
145
|
+
rootItem: <Breadcrumb.Item href="/">Home</Breadcrumb.Item>,
|
|
146
|
+
}}
|
|
147
|
+
>
|
|
148
|
+
<Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
|
|
149
|
+
<Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
|
|
150
|
+
</Breadcrumb>
|
|
151
|
+
);
|
|
152
|
+
expect(screen.getByText("Level Three")).toHaveAttribute(
|
|
153
|
+
"aria-current",
|
|
154
|
+
"page"
|
|
155
|
+
);
|
|
156
|
+
});
|
|
157
|
+
});
|
|
71
158
|
});
|