quicksnack 3.24.1 → 3.25.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,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
interface
|
|
2
|
+
interface TimeLineProps {
|
|
3
3
|
title?: string | JSX.Element;
|
|
4
4
|
titleMeta?: string | JSX.Element;
|
|
5
5
|
isInitiallyOpen: boolean;
|
|
@@ -7,5 +7,12 @@ interface Props {
|
|
|
7
7
|
chevron: string | JSX.Element;
|
|
8
8
|
color: string;
|
|
9
9
|
}
|
|
10
|
-
export declare const Timeline: React.FC<React.PropsWithChildren<
|
|
10
|
+
export declare const Timeline: React.FC<React.PropsWithChildren<TimeLineProps>>;
|
|
11
|
+
interface SimpleTimeLineProps {
|
|
12
|
+
title?: string | JSX.Element;
|
|
13
|
+
titleMeta?: string | JSX.Element;
|
|
14
|
+
icon: JSX.Element;
|
|
15
|
+
color: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const SimpleTimeline: React.FC<SimpleTimeLineProps>;
|
|
11
18
|
export {};
|
|
@@ -7,20 +7,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.Timeline = void 0;
|
|
10
|
+
exports.SimpleTimeline = exports.Timeline = void 0;
|
|
11
11
|
var react_1 = __importDefault(require("react"));
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Box_1 = require("../Box/Box");
|
|
14
14
|
var CollapsiblePanel_1 = require("../CollapsiblePanel/CollapsiblePanel");
|
|
15
|
-
var
|
|
16
|
-
var
|
|
15
|
+
var Panel_1 = require("../Panel/Panel");
|
|
16
|
+
var FlatPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: none;\n"], ["\n box-shadow: none;\n"])));
|
|
17
|
+
var Wrapper = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n \n &:last-of-type .line:before {\n background: none;\n }\n"], ["\n display: flex;\n \n &:last-of-type .line:before {\n background: none;\n }\n"])));
|
|
18
|
+
var Line = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n margin-right: ", ";\n top: 4px;\n \n &:before {\n background: #e7eaec;\n content: '';\n position: absolute;\n top: 0;\n left: ", ";\n height: 100%;\n width: ", ";\n }\n \n"], ["\n position: relative;\n margin-right: ", ";\n top: 4px;\n \n &:before {\n background: #e7eaec;\n content: '';\n position: absolute;\n top: 0;\n left: ", ";\n height: 100%;\n width: ", ";\n }\n \n"])), function (props) { return props.theme.spacing(4); }, function (props) { return props.theme.spacing(4.5); }, function (props) { return props.theme.spacing(1); });
|
|
19
|
+
var Circle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n background-color: ", ";\n color: #fff; \n \n left: 0;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n font-size: ", ";\n \n & > * {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"], ["\n position: relative;\n background-color: ", ";\n color: #fff; \n \n left: 0;\n width: ", ";\n height: ", ";\n border-radius: 50%;\n font-size: ", ";\n \n & > * {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"])), function (props) { return props.color; }, function (props) { return props.theme.spacing(10); }, function (props) { return props.theme.spacing(10); }, function (props) { return props.theme.spacing(4); });
|
|
17
20
|
var Timeline = function (_a) {
|
|
18
21
|
var title = _a.title, icon = _a.icon, color = _a.color, isInitiallyOpen = _a.isInitiallyOpen, titleMeta = _a.titleMeta, chevron = _a.chevron, children = _a.children;
|
|
19
|
-
return (react_1.default.createElement(
|
|
22
|
+
return (react_1.default.createElement(Wrapper, null,
|
|
20
23
|
react_1.default.createElement(Line, null,
|
|
21
24
|
react_1.default.createElement(Circle, { color: color }, icon)),
|
|
22
25
|
react_1.default.createElement(Box_1.Box, { pb: 4, flexGrow: 1 },
|
|
23
26
|
react_1.default.createElement(CollapsiblePanel_1.CollapsiblePanel, { isInitiallyOpen: isInitiallyOpen, titleMeta: titleMeta, title: title, titleAction: chevron }, children))));
|
|
24
27
|
};
|
|
25
28
|
exports.Timeline = Timeline;
|
|
26
|
-
var
|
|
29
|
+
var SimpleTimeline = function (_a) {
|
|
30
|
+
var color = _a.color, icon = _a.icon, title = _a.title, titleMeta = _a.titleMeta;
|
|
31
|
+
return (react_1.default.createElement(Wrapper, null,
|
|
32
|
+
react_1.default.createElement(Line, { className: 'line' },
|
|
33
|
+
react_1.default.createElement(Circle, { color: color }, icon)),
|
|
34
|
+
react_1.default.createElement(Box_1.Box, { pb: 4, flexGrow: 1 },
|
|
35
|
+
react_1.default.createElement(FlatPanel, { titleMeta: titleMeta, title: title }))));
|
|
36
|
+
};
|
|
37
|
+
exports.SimpleTimeline = SimpleTimeline;
|
|
38
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|