@drivy/cobalt 0.42.19 → 0.43.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.
|
@@ -2,9 +2,12 @@ import { nanoid } from 'nanoid';
|
|
|
2
2
|
import React, { Children, cloneElement, isValidElement } from 'react';
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
|
|
5
|
-
const LayoutStackItem = ({ children, isTable }) => {
|
|
5
|
+
const LayoutStackItem = ({ children, isTable, ...props }) => {
|
|
6
6
|
const Comp = isTable ? "tr" : "div";
|
|
7
|
-
return React.createElement(Comp, { className: "cobalt-layout-stack__item" }, children);
|
|
7
|
+
return (React.createElement(Comp, { className: "cobalt-layout-stack__item", ...props }, children));
|
|
8
|
+
};
|
|
9
|
+
const LayoutStackLinkItem = ({ children, ...hyperlinkProps }) => {
|
|
10
|
+
return (React.createElement("a", { className: "cobalt-layout-stack__item", ...hyperlinkProps }, children));
|
|
8
11
|
};
|
|
9
12
|
const isStackItem = (child) => {
|
|
10
13
|
return isValidElement(child) && child.type === LayoutStackItem;
|
|
@@ -39,6 +42,7 @@ const LayoutStack = ({ children, isTable, isPageHeader, }) => {
|
|
|
39
42
|
}
|
|
40
43
|
};
|
|
41
44
|
LayoutStack.Item = LayoutStackItem;
|
|
45
|
+
LayoutStack.LinkItem = LayoutStackLinkItem;
|
|
42
46
|
|
|
43
47
|
export { LayoutStack as default };
|
|
44
48
|
//# sourceMappingURL=LayoutStack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n | {\n children: React.ReactNode\n isTable: never\n isPageHeader: never\n }\n | {\n children: React.ReactNode\n isPageHeader?: boolean\n isTable?: boolean\n }\n\nconst LayoutStackItem = ({
|
|
1
|
+
{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n | (React.HTMLAttributes<HTMLElement> & {\n children: React.ReactNode\n isTable: never\n isPageHeader: never\n })\n | (React.HTMLAttributes<HTMLElement> & {\n children: React.ReactNode\n isPageHeader?: boolean\n isTable?: boolean\n })\n\ntype LayoutStackLinkItemPropsType =\n React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n children: React.ReactNode\n isPageHeader?: boolean\n }\n\nconst LayoutStackItem = ({\n children,\n isTable,\n ...props\n}: LayoutStackItemPropsType) => {\n const Comp = isTable ? \"tr\" : \"div\"\n return (\n <Comp className=\"cobalt-layout-stack__item\" {...props}>\n {children}\n </Comp>\n )\n}\n\nconst LayoutStackLinkItem = ({\n children,\n ...hyperlinkProps\n}: LayoutStackLinkItemPropsType) => {\n return (\n <a className=\"cobalt-layout-stack__item\" {...hyperlinkProps}>\n {children}\n </a>\n )\n}\n\nconst isStackItem = (\n child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n return isValidElement(child) && child.type === LayoutStackItem\n}\n\nconst LayoutStack = ({\n children,\n isTable,\n isPageHeader,\n}: {\n children: React.ReactNode\n isTable?: boolean\n isPageHeader?: boolean\n}) => {\n const headerElements: React.ReactElement[] = []\n const bodyElements: React.ReactElement[] = []\n const content = Children.map(children, (child) => {\n if (isStackItem(child)) {\n const newChild = cloneElement(child, { isTable, key: nanoid() })\n if (newChild.props.isTable) {\n if (newChild.props.isPageHeader) {\n headerElements.push(newChild)\n } else {\n bodyElements.push(newChild)\n }\n }\n }\n return child\n })\n const className = cx(\"cobalt-layout-stack\", {\n \"cobalt-layout--isPageHeader\": isPageHeader,\n })\n if (isTable) {\n return (\n <table className={className}>\n {!!headerElements.length && <thead>{headerElements}</thead>}\n <tbody>{bodyElements}</tbody>\n </table>\n )\n } else {\n return <div className={className}>{content}</div>\n }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nLayoutStack.LinkItem = LayoutStackLinkItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAsBA,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACiB,KAAI;IAC7B,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AACnC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2BAA2B,EAAA,GAAK,KAAK,EAAA,EAClD,QAAQ,CACJ,EACR;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,GAAG,cAAc,EACY,KAAI;IACjC,QACE,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,2BAA2B,EAAK,GAAA,cAAc,EACxD,EAAA,QAAQ,CACP,EACL;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CAAA;AAChE,CAAC,CAAA;AAEK,MAAA,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,GAKb,KAAI;IACH,MAAM,cAAc,GAAyB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/C,QAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AAChE,YAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE;AAC/B,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;AACF,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,qBAAqB,EAAE;AAC1C,QAAA,6BAA6B,EAAE,YAAY;AAC5C,KAAA,CAAC,CAAA;IACF,IAAI,OAAO,EAAE;AACX,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,SAAS,EAAA;AACxB,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;AACL,QAAA,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAG,EAAA,OAAO,CAAO,CAAA;KAClD;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA;AAElC,WAAW,CAAC,QAAQ,GAAG,mBAAmB;;;;"}
|
package/package.json
CHANGED
|
@@ -42,12 +42,34 @@ div.cobalt-layout-stack {
|
|
|
42
42
|
|
|
43
43
|
.cobalt-layout-stack__item {
|
|
44
44
|
@include border-top(base);
|
|
45
|
+
|
|
46
|
+
display: block;
|
|
47
|
+
|
|
45
48
|
padding: var(--cobalt-layout-item-spacing);
|
|
46
49
|
}
|
|
47
50
|
|
|
48
|
-
.cobalt-layout-stack__item:first-
|
|
51
|
+
.cobalt-layout-stack__item:first-child {
|
|
49
52
|
border-top: 0;
|
|
50
53
|
}
|
|
54
|
+
|
|
55
|
+
a.cobalt-layout-stack__item {
|
|
56
|
+
text-decoration: inherit;
|
|
57
|
+
font-weight: inherit;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
a.cobalt-layout-stack__item[href]:hover {
|
|
61
|
+
@include bg-color(neutralAlt);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
a.cobalt-layout-stack__item[href]:first-child {
|
|
65
|
+
border-radius: calc(border-radius(xl) - 1px) calc(border-radius(xl) - 1px) 0
|
|
66
|
+
0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
a.cobalt-layout-stack__item[href]:last-child {
|
|
70
|
+
border-radius: 0 0 calc(border-radius(xl) - 1px)
|
|
71
|
+
calc(border-radius(xl) - 1px);
|
|
72
|
+
}
|
|
51
73
|
}
|
|
52
74
|
|
|
53
75
|
table.cobalt-layout-stack {
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
type LayoutStackItemPropsType = {
|
|
2
|
+
type LayoutStackItemPropsType = (React.HTMLAttributes<HTMLElement> & {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
isTable: never;
|
|
5
5
|
isPageHeader: never;
|
|
6
|
-
} | {
|
|
6
|
+
}) | (React.HTMLAttributes<HTMLElement> & {
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
isPageHeader?: boolean;
|
|
9
9
|
isTable?: boolean;
|
|
10
|
+
});
|
|
11
|
+
type LayoutStackLinkItemPropsType = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
isPageHeader?: boolean;
|
|
10
14
|
};
|
|
11
15
|
declare const LayoutStack: {
|
|
12
16
|
({ children, isTable, isPageHeader, }: {
|
|
@@ -14,6 +18,7 @@ declare const LayoutStack: {
|
|
|
14
18
|
isTable?: boolean;
|
|
15
19
|
isPageHeader?: boolean;
|
|
16
20
|
}): React.JSX.Element;
|
|
17
|
-
Item: ({ children, isTable }: LayoutStackItemPropsType) => React.JSX.Element;
|
|
21
|
+
Item: ({ children, isTable, ...props }: LayoutStackItemPropsType) => React.JSX.Element;
|
|
22
|
+
LinkItem: ({ children, ...hyperlinkProps }: LayoutStackLinkItemPropsType) => React.JSX.Element;
|
|
18
23
|
};
|
|
19
24
|
export default LayoutStack;
|