@factorearth/component-library 4.0.0-alpha.0 → 4.0.2-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.
|
@@ -1,41 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Colors } from "../../Theme/types";
|
|
3
|
-
export declare const TutorialOverlay: import("@emotion/styled").StyledComponent<{
|
|
4
|
-
theme?: import("@emotion/react").Theme;
|
|
5
|
-
as?: React.ElementType;
|
|
6
|
-
} & {
|
|
7
|
-
color: Colors;
|
|
8
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
-
export declare const TutorialWrapper: import("@emotion/styled").StyledComponent<{
|
|
10
|
-
theme?: import("@emotion/react").Theme;
|
|
11
|
-
as?: React.ElementType;
|
|
12
|
-
} & {
|
|
13
|
-
color: Colors;
|
|
14
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
15
|
-
export declare const HelpHeader: import("@emotion/styled").StyledComponent<{
|
|
16
|
-
theme?: import("@emotion/react").Theme;
|
|
17
|
-
as?: React.ElementType;
|
|
18
|
-
} & {
|
|
19
|
-
color: Colors;
|
|
20
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
21
|
-
export declare const TitleAndExit: import("@emotion/styled").StyledComponent<{
|
|
22
|
-
theme?: import("@emotion/react").Theme;
|
|
23
|
-
as?: React.ElementType;
|
|
24
|
-
} & {
|
|
25
|
-
color: Colors;
|
|
26
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
27
|
-
export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
|
|
28
|
-
theme?: import("@emotion/react").Theme;
|
|
29
|
-
as?: React.ElementType;
|
|
30
|
-
} & {
|
|
31
|
-
color: Colors;
|
|
32
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
33
|
-
export declare const ContactContainer: import("@emotion/styled").StyledComponent<{
|
|
34
|
-
theme?: import("@emotion/react").Theme;
|
|
35
|
-
as?: React.ElementType;
|
|
36
|
-
} & {
|
|
37
|
-
color: Colors;
|
|
38
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
39
3
|
type Page = {
|
|
40
4
|
title: string;
|
|
41
5
|
"page-summary": string;
|
|
@@ -58,5 +22,5 @@ interface TutorialModalProps extends React.DetailedHTMLProps<React.HTMLAttribute
|
|
|
58
22
|
setOpen: (open: boolean) => void;
|
|
59
23
|
page: Page;
|
|
60
24
|
}
|
|
61
|
-
export declare const
|
|
25
|
+
export declare const Tutorial: (props: TutorialModalProps) => React.JSX.Element;
|
|
62
26
|
export {};
|
|
@@ -4,18 +4,20 @@ import { FiX } from "react-icons/fi";
|
|
|
4
4
|
import Accordion from "../../Atoms/Accordion/Accordion";
|
|
5
5
|
import { Button } from "../../Atoms/Buttons/Button";
|
|
6
6
|
import { Typography } from "../../Atoms/Typography/Typography";
|
|
7
|
-
|
|
8
|
-
background-color: ${({ color }) => color.background.secondary};
|
|
9
|
-
// opacity: 0.8;
|
|
7
|
+
const TutorialOverlay = styled.div `
|
|
8
|
+
background-color: ${({ color }) => `${color.background.secondary}90`};
|
|
10
9
|
position: absolute;
|
|
11
10
|
z-index: 1000;
|
|
12
11
|
display: flex;
|
|
13
12
|
justify-content: center;
|
|
14
|
-
|
|
15
|
-
height: 100vw;
|
|
13
|
+
height: 100vh;
|
|
16
14
|
width: 100vw;
|
|
15
|
+
top: 0;
|
|
16
|
+
left: 0;
|
|
17
|
+
border: solid 2px pink;
|
|
17
18
|
`;
|
|
18
|
-
|
|
19
|
+
//I used the calc below beccause align-items: center had no affect when applied to the styled div above
|
|
20
|
+
const TutorialWrapper = styled.div `
|
|
19
21
|
background-color: ${({ color }) => color.background.primary};
|
|
20
22
|
color: ${({ color }) => color.text.primary};
|
|
21
23
|
display: flex;
|
|
@@ -31,8 +33,9 @@ export const TutorialWrapper = styled.div `
|
|
|
31
33
|
&::-webkit-scrollbar {
|
|
32
34
|
display: none;
|
|
33
35
|
}
|
|
36
|
+
margin-top: calc(50vh - 250px)
|
|
34
37
|
`;
|
|
35
|
-
|
|
38
|
+
const HelpHeader = styled.div `
|
|
36
39
|
display: flex;
|
|
37
40
|
flex-direction: column;
|
|
38
41
|
align-items: flex-start;
|
|
@@ -41,17 +44,17 @@ export const HelpHeader = styled.div `
|
|
|
41
44
|
padding: 24px;
|
|
42
45
|
box-shadow: ${({ color }) => `${color.text.secondary} 0px 0px 4px 0px`};
|
|
43
46
|
`;
|
|
44
|
-
|
|
47
|
+
const TitleAndExit = styled.div `
|
|
45
48
|
display: flex;
|
|
46
49
|
justify-content: space-between;
|
|
47
50
|
align-items: center;
|
|
48
51
|
align-self: stretch;
|
|
49
52
|
`;
|
|
50
|
-
|
|
53
|
+
const ContentContainer = styled.div `
|
|
51
54
|
padding: 0px 24px;
|
|
52
55
|
width: 90%;
|
|
53
56
|
`;
|
|
54
|
-
|
|
57
|
+
const ContactContainer = styled.div `
|
|
55
58
|
background-color: ${({ color }) => color.background.tertiary};
|
|
56
59
|
color: ${({ color }) => color.text.primary};
|
|
57
60
|
display: flex;
|
|
@@ -61,7 +64,7 @@ export const ContactContainer = styled.div `
|
|
|
61
64
|
gap: 16px;
|
|
62
65
|
align-self: stretch;
|
|
63
66
|
`;
|
|
64
|
-
export const
|
|
67
|
+
export const Tutorial = (props) => {
|
|
65
68
|
const { children, color, page, setOpen, ...htmlProps } = props;
|
|
66
69
|
return (React.createElement(TutorialOverlay, { color: color, onClick: () => setOpen(false) },
|
|
67
70
|
React.createElement(TutorialWrapper, { color: color, ...htmlProps },
|
|
@@ -80,7 +83,4 @@ export const TutorialModal = (props) => {
|
|
|
80
83
|
React.createElement(Typography, { textColor: color.text.primary, content: "devs@factorearth.com", variant: "Heading 4" }),
|
|
81
84
|
React.createElement(Button, { colorPalette: color, variant: "filled" }, "Report Bug")))));
|
|
82
85
|
};
|
|
83
|
-
//needs to take in content from the json like the drawer in record
|
|
84
|
-
//use the styles from the modal container I think
|
|
85
|
-
//drop downs are similar to the exsiting ones in Record but some styling changes need to happen, plus icons are added
|
|
86
86
|
//# sourceMappingURL=Tutorial.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tutorial.js","sourceRoot":"","sources":["../../../lib/Organisms/Tutorial/Tutorial.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAE9D,MAAM,
|
|
1
|
+
{"version":3,"file":"Tutorial.js","sourceRoot":"","sources":["../../../lib/Organisms/Tutorial/Tutorial.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -20,5 +20,6 @@ export * from "./Molecules/NavMenu/NavMenu";
|
|
|
20
20
|
export * from "./Organisms/TabManager/TabManager";
|
|
21
21
|
export * from "./Organisms/Table/Table";
|
|
22
22
|
export * from "./Organisms/EditUserPerms/EditUserPerms";
|
|
23
|
+
export * from "./Organisms/Tutorial/Tutorial";
|
|
23
24
|
export * from "./Theme/ThemeProvider";
|
|
24
25
|
export * from "./Theme/types";
|
package/dist/index.js
CHANGED
|
@@ -24,6 +24,7 @@ export * from "./Molecules/NavMenu/NavMenu";
|
|
|
24
24
|
export * from "./Organisms/TabManager/TabManager";
|
|
25
25
|
export * from "./Organisms/Table/Table";
|
|
26
26
|
export * from "./Organisms/EditUserPerms/EditUserPerms";
|
|
27
|
+
export * from "./Organisms/Tutorial/Tutorial";
|
|
27
28
|
// Themes
|
|
28
29
|
export * from "./Theme/ThemeProvider";
|
|
29
30
|
export * from "./Theme/types";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,qDAAqD;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iBAAiB,CAAC;AAChC,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAA;AACvD,SAAS;AACT,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,qDAAqD;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iBAAiB,CAAC;AAChC,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAA;AACvD,cAAc,+BAA+B,CAAA;AAC7C,SAAS;AACT,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2-alpha.0",
|
|
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",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "70c29e6b9c97d9c4e3ee8acfc4ca4c3a863794d2",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|