@factorearth/component-library 6.6.11-alpha.1 → 6.6.11-alpha.2
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/Atoms/ProgressBar/ProgressBar.js +1 -1
- package/dist/Atoms/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/Atoms/ProgressDisplay/ProgressDisplay.d.ts +1 -0
- package/dist/Atoms/ProgressDisplay/ProgressDisplay.js +14 -24
- package/dist/Atoms/ProgressDisplay/ProgressDisplay.js.map +1 -1
- package/dist/Atoms/Tab/Tab.js +4 -1
- package/dist/Atoms/Tab/Tab.js.map +1 -1
- package/package.json +2 -2
|
@@ -3,7 +3,7 @@ import React from "react";
|
|
|
3
3
|
const ProgressBarContainer = styled.div `
|
|
4
4
|
width: 100%;
|
|
5
5
|
height: 14px;
|
|
6
|
-
background-color:
|
|
6
|
+
background-color: transparent;
|
|
7
7
|
border: ${({ colorPalette }) => colorPalette.border.primary};
|
|
8
8
|
border-style: solid;
|
|
9
9
|
border-width: 0.5px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../lib/Atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AA2G1B,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../lib/Atoms/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AA2G1B,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B;;;;WAIvD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO;;;;;;CAM3D,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAIlC;;UAEQ,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;qBACf,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE,CACjD,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC;;;CAGhC,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACtD,MAAM,EACL,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,GAAG,SAAS,EACZ,GAAG,KAAK,CAAC;IACV,OAAO,CACN,oBAAC,oBAAoB,IAAC,YAAY,EAAE,YAAY,KAAM,SAAS;QAC9D,oBAAC,iBAAiB,IACjB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,GACf,CACoB,CACvB,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { ProgressMetadata } from "../../Hooks/useProgress";
|
|
3
3
|
import { Colors } from "../../Theme/types";
|
|
4
4
|
interface Props extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
action?: React.ReactNode;
|
|
5
6
|
colors: Colors;
|
|
6
7
|
progress: ProgressMetadata;
|
|
7
8
|
setProgress: (newProgress: Partial<ProgressMetadata>) => void;
|
|
@@ -3,38 +3,27 @@ import styled from "@emotion/styled";
|
|
|
3
3
|
import { ProgressBar } from "../../Atoms/ProgressBar/ProgressBar";
|
|
4
4
|
import { Typography } from "../../Atoms/Typography/Typography";
|
|
5
5
|
const Wrapper = styled.div `
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
cursor: ${({ progress }) => (progress.canClose ? "pointer" : "default")};
|
|
7
|
+
padding: 12px 16px;
|
|
8
|
+
border-radius: 8px;
|
|
9
|
+
background-color: ${({ progress, colors }) => colors.toastBackground[progress.variant]};
|
|
10
|
+
transition: background-color 0.3s ease;
|
|
8
11
|
`;
|
|
9
|
-
const
|
|
10
|
-
display:
|
|
12
|
+
const ProgressBarContainer = styled.div `
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
11
15
|
align-items: center;
|
|
12
|
-
|
|
13
|
-
margin-top: 8px;
|
|
14
|
-
padding: 6px 8px;
|
|
15
|
-
height: 33px;
|
|
16
|
-
background-color: ${({ colors }) => colors.buttonBackground.filled};
|
|
17
|
-
color: ${({ colors }) => colors.buttonText.filled};
|
|
18
|
-
border: 1px solid ${({ colors }) => colors.buttonBorder.filled};
|
|
19
|
-
border-radius: 4px;
|
|
20
|
-
font-size: 14px;
|
|
21
|
-
font-weight: 700;
|
|
22
|
-
text-decoration: none;
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
|
|
25
|
-
&:hover {
|
|
26
|
-
opacity: 0.85;
|
|
27
|
-
}
|
|
16
|
+
width: 100%;
|
|
28
17
|
`;
|
|
29
18
|
export function ProgressDisplay(props) {
|
|
30
|
-
const { colors, progress, setProgress, ...rest } = props;
|
|
19
|
+
const { action, colors, progress, setProgress, ...rest } = props;
|
|
31
20
|
useEffect(() => {
|
|
32
21
|
console.log("ProgressDisplay: progress changed", progress);
|
|
33
22
|
if (progress.downloadUrl) {
|
|
34
23
|
console.log("ProgressDisplay: downloadUrl is set, setting canClose to true", progress.downloadUrl);
|
|
35
24
|
}
|
|
36
25
|
}, [progress]);
|
|
37
|
-
return (React.createElement(Wrapper, { progress: progress, onClick: progress.canClose
|
|
26
|
+
return (React.createElement(Wrapper, { progress: progress, colors: colors, onClick: progress.canClose
|
|
38
27
|
? rest.onClick
|
|
39
28
|
? rest.onClick
|
|
40
29
|
: (() => setProgress({ ...progress, show: false }))
|
|
@@ -43,7 +32,8 @@ export function ProgressDisplay(props) {
|
|
|
43
32
|
...rest.style
|
|
44
33
|
}, ...rest },
|
|
45
34
|
React.createElement(Typography, { variant: "Label", textColor: colors.text.primary }, progress.title),
|
|
46
|
-
React.createElement(
|
|
47
|
-
|
|
35
|
+
React.createElement(ProgressBarContainer, null,
|
|
36
|
+
React.createElement(ProgressBar, { progress: progress.value, variant: progress.variant, colorPalette: colors, style: { width: "100%" } }),
|
|
37
|
+
action)));
|
|
48
38
|
}
|
|
49
39
|
//# sourceMappingURL=ProgressDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressDisplay.js","sourceRoot":"","sources":["../../../lib/Atoms/ProgressDisplay/ProgressDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE/D,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"ProgressDisplay.js","sourceRoot":"","sources":["../../../lib/Atoms/ProgressDisplay/ProgressDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE/D,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAiD;WAChE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;qBAGnD,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,OAAO,CAAC;;CAEtF,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtC,CAAC;AASF,MAAM,UAAU,eAAe,CAAC,KAAY;IAC3C,MAAM,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,WAAW,EACX,GAAG,IAAI,EACP,GAAG,KAAK,CAAC;IAEV,SAAS,CAAC,GAAG,EAAE;QACd,OAAO,CAAC,GAAG,CAAC,mCAAmC,EAAE,QAAQ,CAAC,CAAC;QAC3D,IAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;YACzB,OAAO,CAAC,GAAG,CAAC,+DAA+D,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;QACpG,CAAC;IACF,CAAC,EAAE,CAAE,QAAQ,CAAE,CAAC,CAAC;IACjB,OAAO,CACN,oBAAC,OAAO,IACP,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EACN,QAAQ,CAAC,QAAQ;YAChB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACb,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;YACpD,CAAC,CAAC,SAAS,EAEb,KAAK,EAAE;YACN,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YACnD,GAAG,IAAI,CAAC,KAAK;SACb,KACG,IAAI;QAER,oBAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,IAAG,QAAQ,CAAC,KAAK,CAAc;QACzF,oBAAC,oBAAoB;YACpB,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI;YACnH,MAAM,CACe,CACb,CACX,CAAC;AACH,CAAC"}
|
package/dist/Atoms/Tab/Tab.js
CHANGED
|
@@ -18,7 +18,10 @@ const Label = styled.p `
|
|
|
18
18
|
font-weight: 700;
|
|
19
19
|
margin: 0px;
|
|
20
20
|
max-height: 20px;
|
|
21
|
-
overflow:
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
white-space: nowrap;
|
|
23
|
+
text-overflow: ellipsis;
|
|
24
|
+
min-width: 0px;
|
|
22
25
|
`;
|
|
23
26
|
function Tab(props) {
|
|
24
27
|
const { colors, handleClick, label, selected, closeButton, newTabButton, ...remainingProps } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../lib/Atoms/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAyC;;;;;;;eAOnD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW;sBAC1E,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ;EACvD,CAAC;AAEH,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAyC;UACrD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW;;;WAGxF,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS
|
|
1
|
+
{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../lib/Atoms/Tab/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAyC;;;;;;;eAOnD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW;sBAC1E,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ;EACvD,CAAC;AAEH,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAyC;UACrD,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW;;;WAGxF,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;;;;;;;;CAQzD,CAAC;AAWF,SAAS,GAAG,CAAC,KAAe;IACxB,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IACrG,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE;QAC7D,oBAAC,MAAM,IACH,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,KAClC,cAAc;YAElB,oBAAC,KAAK,kBACU,GAAG,KAAK,MAAM,EAC1B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAE3C,KAAK,CACF;YACP,WAAW,IAAI,WAAW,CACtB;QACR,YAAY,IAAI,YAAY,CAC3B,CACT,CAAC;AACN,CAAC;AAED,eAAe,GAAG,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "6.6.11-alpha.
|
|
3
|
+
"version": "6.6.11-alpha.2",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"access": "public",
|
|
48
48
|
"registry": "https://registry.npmjs.org/"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "8bf3860ac985bb5995b8601cd8f85a7906ac54fa",
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@emotion/react": "^11.13.0",
|
|
53
53
|
"@emotion/styled": "^11.13.0",
|