flipper-ui 0.26.16 → 0.26.17

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.
Files changed (15) hide show
  1. package/core/StepCard/Skeleton.d.ts +9 -0
  2. package/core/StepCard/Skeleton.js +67 -0
  3. package/core/StepCard/StepCardDetails.d.ts +10 -0
  4. package/core/StepCard/StepCardDetails.js +80 -0
  5. package/core/StepCard/StepCardPanel.d.ts +19 -0
  6. package/core/StepCard/StepCardPanel.js +145 -0
  7. package/core/StepCard/index.d.ts +26 -10
  8. package/core/StepCard/index.js +35 -166
  9. package/core/StepCard/styles.d.ts +4 -1
  10. package/core/StepCard/styles.js +8 -2
  11. package/index.d.ts +1 -0
  12. package/index.js +8 -1
  13. package/package.json +1 -1
  14. package/stories/StepCard.stories.js +53 -15
  15. package/tests/CheckBox.test.js +0 -33
package/core/StepCard/Skeleton.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import './colors.css';
2
+ interface IStepCardPanelProps {
3
+ expandable: boolean;
4
+ showBottomPercentage: boolean;
5
+ showIcon: boolean;
6
+ subTitle?: boolean;
7
+ }
8
+ declare const StepCardSkeleton: (props: IStepCardPanelProps) => JSX.Element;
9
+ export default StepCardSkeleton;
package/core/StepCard/Skeleton.js ADDED
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
9
+ var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
10
+ var _lab = require("@material-ui/lab");
11
+ var _react = _interopRequireDefault(require("react"));
12
+ require("./colors.css");
13
+ var _styles = require("./styles");
14
+ var StepCardSkeleton = function StepCardSkeleton(props) {
15
+ var expandable = props.expandable,
16
+ showBottomPercentage = props.showBottomPercentage,
17
+ showIcon = props.showIcon,
18
+ subTitle = props.subTitle;
19
+ var TextSkeleton = function TextSkeleton() {
20
+ return /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
21
+ variant: "text",
22
+ style: {
23
+ minWidth: '400px'
24
+ },
25
+ height: 40
26
+ });
27
+ };
28
+ var NormalProgress = function NormalProgress() {
29
+ return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
30
+ variant: "text",
31
+ height: 40,
32
+ style: {
33
+ minWidth: '100px',
34
+ margin: '4px 0px'
35
+ }
36
+ }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
37
+ style: {
38
+ width: '100%'
39
+ }
40
+ }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
41
+ variant: "text"
42
+ })));
43
+ };
44
+ return /*#__PURE__*/_react["default"].createElement(_styles.Container, null, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
45
+ withPadding: !expandable
46
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
47
+ height: expandable ? '100px' : '100%'
48
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
49
+ justifyContent: "start"
50
+ }, showIcon && /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
51
+ variant: "circle",
52
+ width: 40,
53
+ height: 40
54
+ }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TextSkeleton, null), subTitle && /*#__PURE__*/_react["default"].createElement(TextSkeleton, null))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
55
+ justifyContent: "end"
56
+ }, expandable ? /*#__PURE__*/_react["default"].createElement(TextSkeleton, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
57
+ height: "15px"
58
+ }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
59
+ style: {
60
+ width: '100%'
61
+ }
62
+ }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
63
+ variant: "text"
64
+ }))))));
65
+ };
66
+ var _default = StepCardSkeleton;
67
+ exports["default"] = _default;
package/core/StepCard/StepCardDetails.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { IStepCardProps } from '.';
2
+ import './colors.css';
3
+ interface IStepCardDetailsProps {
4
+ steps: IStepCardProps['steps'];
5
+ onStepUrlClick?: IStepCardProps['onStepUrlClick'];
6
+ image?: IStepCardProps['image'];
7
+ expansionPanelDetailsProps?: IStepCardProps['expansionPanelDetailsProps'];
8
+ }
9
+ export declare const StepCardDetails: (props: IStepCardDetailsProps) => JSX.Element;
10
+ export {};
package/core/StepCard/StepCardDetails.js ADDED
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.StepCardDetails = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _List = _interopRequireDefault(require("@material-ui/core/List"));
11
+ var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
12
+ var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
13
+ var _nginformaticaStyleguide = require("nginformatica-styleguide");
14
+ var _react = _interopRequireWildcard(require("react"));
15
+ var _icons = require("../../icons");
16
+ var _IconButton = _interopRequireDefault(require("../IconButton"));
17
+ var _Typography = _interopRequireDefault(require("../Typography"));
18
+ require("./colors.css");
19
+ var _styles = require("./styles");
20
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
22
+ var _theme$colors = _nginformaticaStyleguide.theme.colors,
23
+ feedback = _theme$colors.feedback,
24
+ grays = _theme$colors.grays;
25
+ var DONE_COLOR = feedback.success;
26
+ var UNDONE_COLOR = grays.g3;
27
+ var UNDONE_FONT_COLOR = grays.g2;
28
+ var StepCardDetails = function StepCardDetails(props) {
29
+ var steps = props.steps,
30
+ onStepUrlClick = props.onStepUrlClick,
31
+ image = props.image,
32
+ expansionPanelDetailsProps = props.expansionPanelDetailsProps;
33
+ var StepsList = (0, _react.useCallback)(function () {
34
+ return /*#__PURE__*/_react["default"].createElement(_List["default"], null, steps.map(function (step, index) {
35
+ var handleOnClickStepUrl = function handleOnClickStepUrl() {
36
+ if (onStepUrlClick && step.url) {
37
+ onStepUrlClick(step.url);
38
+ }
39
+ };
40
+ return /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
41
+ key: index,
42
+ primary: /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
43
+ style: {
44
+ color: step.done ? DONE_COLOR : UNDONE_COLOR
45
+ }
46
+ }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
47
+ variant: "body1",
48
+ style: {
49
+ color: UNDONE_FONT_COLOR,
50
+ fontWeight: 600
51
+ }
52
+ }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
53
+ style: {
54
+ backgroundColor: 'unset'
55
+ },
56
+ onClick: handleOnClickStepUrl
57
+ }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
58
+ fontSize: "small",
59
+ style: {
60
+ margin: '0px'
61
+ }
62
+ }))))
63
+ });
64
+ }));
65
+ }, [onStepUrlClick, steps]);
66
+ return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], (0, _extends2["default"])({
67
+ style: {
68
+ display: 'flex',
69
+ justifyContent: 'space-between'
70
+ }
71
+ }, expansionPanelDetailsProps), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
72
+ justifyContent: "start"
73
+ }, /*#__PURE__*/_react["default"].createElement(StepsList, null)), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
74
+ justifyContent: "end"
75
+ }, /*#__PURE__*/_react["default"].createElement("img", {
76
+ src: image,
77
+ alt: "Step Icon"
78
+ })));
79
+ };
80
+ exports.StepCardDetails = StepCardDetails;
package/core/StepCard/StepCardPanel.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { IStepCardProps } from '.';
2
+ import './colors.css';
3
+ interface IStepCardPanelProps {
4
+ title: string;
5
+ expandable: boolean;
6
+ showBottomPercentage: boolean;
7
+ linearProgressBarProps: IStepCardProps['linearProgressBarProps'];
8
+ summaryProps: IStepCardProps['summaryProps'];
9
+ summaryLinearProgressBarProps: IStepCardProps['summaryLinearProgressBarProps'];
10
+ titleProps: IStepCardProps['titleProps'];
11
+ percentage: number;
12
+ summary: string;
13
+ remainingSteps: number;
14
+ time: number;
15
+ showIcon: boolean;
16
+ subTitle?: string;
17
+ }
18
+ export declare const StepCardPanel: (props: IStepCardPanelProps) => JSX.Element;
19
+ export {};
package/core/StepCard/StepCardPanel.js ADDED
@@ -0,0 +1,145 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.StepCardPanel = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
11
+ var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
12
+ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
13
+ var _nginformaticaStyleguide = require("nginformatica-styleguide");
14
+ var _react = _interopRequireWildcard(require("react"));
15
+ var _sprintfJs = require("sprintf-js");
16
+ var _icons = require("../../icons");
17
+ var _Typography = _interopRequireDefault(require("../Typography"));
18
+ require("./colors.css");
19
+ var _styles = require("./styles");
20
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
22
+ var _theme$colors = _nginformaticaStyleguide.theme.colors,
23
+ feedback = _theme$colors.feedback,
24
+ grays = _theme$colors.grays;
25
+ var DONE_COLOR = feedback.success;
26
+ var UNDONE_COLOR = grays.g3;
27
+ var UNDONE_TITLE_COLOR = grays.g1;
28
+ var UNDONE_PROGRESS_COLOR = grays.g5;
29
+ var StepCardPanel = function StepCardPanel(props) {
30
+ var title = props.title,
31
+ summary = props.summary,
32
+ expandable = props.expandable,
33
+ showBottomPercentage = props.showBottomPercentage,
34
+ summaryProps = props.summaryProps,
35
+ linearProgressBarProps = props.linearProgressBarProps,
36
+ summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
37
+ percentage = props.percentage,
38
+ remainingSteps = props.remainingSteps,
39
+ time = props.time,
40
+ showIcon = props.showIcon,
41
+ subTitle = props.subTitle,
42
+ titleProps = props.titleProps;
43
+ var TitleIcon = (0, _react.useCallback)(function () {
44
+ return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
45
+ style: {
46
+ fontSize: 40,
47
+ color: percentage === 100 ? DONE_COLOR : UNDONE_COLOR
48
+ }
49
+ });
50
+ }, [percentage]);
51
+ var Title = (0, _react.useCallback)(function () {
52
+ return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
53
+ variant: "h6",
54
+ style: {
55
+ color: UNDONE_TITLE_COLOR,
56
+ fontSize: 24,
57
+ textAlign: 'center'
58
+ }
59
+ }, titleProps), title);
60
+ }, [titleProps, title]);
61
+ var SubTitle = (0, _react.useCallback)(function () {
62
+ return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
63
+ variant: "h6",
64
+ style: {
65
+ color: UNDONE_COLOR,
66
+ textAlign: 'center'
67
+ }
68
+ }, titleProps), subTitle);
69
+ }, [titleProps, subTitle]);
70
+ var TitleColumn = (0, _react.useCallback)(function () {
71
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon && /*#__PURE__*/_react["default"].createElement(TitleIcon, null), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(Title, null), subTitle && /*#__PURE__*/_react["default"].createElement(SubTitle, null)));
72
+ }, [showIcon, TitleIcon, Title, subTitle, SubTitle]);
73
+ var Summary = (0, _react.useCallback)(function () {
74
+ return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
75
+ style: {
76
+ textAlign: 'center'
77
+ },
78
+ expandIcon: /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, {
79
+ fontSize: "large"
80
+ })
81
+ }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
82
+ variant: "h6"
83
+ }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time)));
84
+ }, [remainingSteps, summary, summaryProps, time]);
85
+ var SummaryLinearProgress = (0, _react.useCallback)(function () {
86
+ return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
87
+ variant: "determinate",
88
+ value: percentage,
89
+ color: "primary",
90
+ classes: {
91
+ barColorPrimary: 'barColorPrimary'
92
+ },
93
+ style: {
94
+ borderRadius: 10,
95
+ height: '16px',
96
+ backgroundColor: UNDONE_PROGRESS_COLOR
97
+ }
98
+ }, summaryLinearProgressBarProps));
99
+ }, [summaryLinearProgressBarProps, percentage]);
100
+ var NormalProgress = (0, _react.useCallback)(function () {
101
+ return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
102
+ variant: "h6"
103
+ }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
104
+ variant: "subtitle2",
105
+ style: {
106
+ position: 'absolute',
107
+ right: 8
108
+ }
109
+ }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
110
+ style: {
111
+ width: '100%'
112
+ }
113
+ }, /*#__PURE__*/_react["default"].createElement(SummaryLinearProgress, null)));
114
+ }, [summaryProps, summary, percentage, SummaryLinearProgress]);
115
+ var BottomLineProgress = (0, _react.useCallback)(function () {
116
+ return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
117
+ variant: "determinate",
118
+ value: percentage,
119
+ color: "primary",
120
+ classes: {
121
+ barColorPrimary: 'barColorPrimary'
122
+ },
123
+ style: {
124
+ height: '16px',
125
+ backgroundColor: UNDONE_PROGRESS_COLOR
126
+ }
127
+ }, linearProgressBarProps));
128
+ }, [percentage, linearProgressBarProps]);
129
+ return /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
130
+ withPadding: !expandable
131
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
132
+ height: expandable ? '100px' : '100%'
133
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
134
+ justifyContent: "start"
135
+ }, /*#__PURE__*/_react["default"].createElement(TitleColumn, null)), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
136
+ justifyContent: "end"
137
+ }, expandable ? /*#__PURE__*/_react["default"].createElement(Summary, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
138
+ height: "15px"
139
+ }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
140
+ style: {
141
+ width: '100%'
142
+ }
143
+ }, /*#__PURE__*/_react["default"].createElement(BottomLineProgress, null))));
144
+ };
145
+ exports.StepCardPanel = StepCardPanel;
package/core/StepCard/index.d.ts CHANGED
@@ -2,14 +2,27 @@ import { LinearProgress } from '@material-ui/core';
2
2
  import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
3
3
  import React from 'react';
4
4
  import Typography from '../Typography';
5
- import './colors.css';
6
5
  import { PropWithDataCy } from '../types';
6
+ import './colors.css';
7
7
  /**
8
8
  * Props for the StepCard component
9
9
  *
10
10
  * @interface IStepCardProps
11
11
  */
12
12
  export interface IStepCardProps {
13
+ /**
14
+ * Whether the step card are loading
15
+ * @type {boolean}
16
+ * @memberof IStepCardProps
17
+ * @default false
18
+ */
19
+ loading?: boolean;
20
+ /**
21
+ * The percentage of the progress bar
22
+ * @type {number}
23
+ * @memberof IStepCardProps
24
+ */
25
+ percentage: number;
13
26
  /**
14
27
  * Whether to show the percentage on the expansion panel summary
15
28
  * Defaults to true
@@ -17,12 +30,17 @@ export interface IStepCardProps {
17
30
  * @memberof IStepCardProps
18
31
  * @default true
19
32
  */
20
- showBottomPercentage: boolean;
33
+ showBottomPercentage?: boolean;
21
34
  /**
22
35
  * A text to be displayed on the expansion panel summary
23
36
  *
24
37
  * @type {string}
25
38
  * @memberof IStepCardProps
39
+ * @example using literals
40
+ * summary: '%i items remaining - %i minute(s)'
41
+ *
42
+ * @example using string
43
+ * summary: 'Your progress'
26
44
  */
27
45
  summary: string;
28
46
  /**
@@ -47,19 +65,17 @@ export interface IStepCardProps {
47
65
  */
48
66
  image?: string;
49
67
  /**
50
- * The total number of steps
51
- *
68
+ * The number of remaining steps
52
69
  * @type {number}
53
70
  * @memberof IStepCardProps
54
71
  */
55
- totalSteps: number;
72
+ remainingSteps: number;
56
73
  /**
57
- * The number of completed steps
58
- *
74
+ * The time in seconds to be displayed on the expansion panel summary
59
75
  * @type {number}
60
76
  * @memberof IStepCardProps
61
77
  */
62
- doneSteps: number;
78
+ time: number;
63
79
  /**
64
80
  * An array of steps, each with a title, a done flag and an optional url
65
81
  *
@@ -120,14 +136,14 @@ export interface IStepCardProps {
120
136
  * @memberof IStepCardProps
121
137
  * @default true
122
138
  */
123
- expandable: boolean;
139
+ expandable?: boolean;
124
140
  /**
125
141
  * Whether to show the icon on the expansion panel summary
126
142
  * @type {boolean}
127
143
  * @memberof IStepCardProps
128
144
  * @default true
129
145
  */
130
- showIcon: boolean;
146
+ showIcon?: boolean;
131
147
  /**
132
148
  * Callback to be called when the user clicks on a step url
133
149
  * @memberof IStepCardProps
package/core/StepCard/index.js CHANGED
@@ -1,45 +1,17 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
11
- var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
12
- var _List = _interopRequireDefault(require("@material-ui/core/List"));
13
- var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
14
8
  var _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
15
- var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
16
- var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
17
- var _nginformaticaStyleguide = require("nginformatica-styleguide");
18
- var _react = _interopRequireWildcard(require("react"));
19
- var _icons = require("../../icons");
20
- var _Typography = _interopRequireDefault(require("../Typography"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _Skeleton = _interopRequireDefault(require("./Skeleton"));
11
+ var _StepCardDetails = require("./StepCardDetails");
12
+ var _StepCardPanel = require("./StepCardPanel");
21
13
  require("./colors.css");
22
14
  var _styles = require("./styles");
23
- var _IconButton = _interopRequireDefault(require("../IconButton"));
24
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
26
- /* eslint-disable max-lines */
27
-
28
- var _theme$colors = _nginformaticaStyleguide.theme.colors,
29
- feedback = _theme$colors.feedback,
30
- grays = _theme$colors.grays;
31
- var DONE_COLOR = feedback.success;
32
- var UNDONE_COLOR = grays.g3;
33
- var UNDONE_FONT_COLOR = grays.g2;
34
- var UNDONE_TITLE_COLOR = grays.g1;
35
- var UNDONE_PROGRESS_COLOR = grays.g5;
36
-
37
- /**
38
- * Props for the StepCard component
39
- *
40
- * @interface IStepCardProps
41
- */
42
-
43
15
  /**
44
16
  * StepCard is a reusable component that displays a card with a title, a summary,
45
17
  * an expandable panel, and a progress bar.
@@ -68,9 +40,13 @@ var UNDONE_PROGRESS_COLOR = grays.g5;
68
40
  * defaultExpanded={false}
69
41
  * />
70
42
  */
71
-
72
43
  var StepCard = function StepCard(props) {
73
- var steps = props.steps,
44
+ var _props$loading = props.loading,
45
+ loading = _props$loading === void 0 ? false : _props$loading,
46
+ percentage = props.percentage,
47
+ time = props.time,
48
+ steps = props.steps,
49
+ remainingSteps = props.remainingSteps,
74
50
  title = props.title,
75
51
  titleProps = props.titleProps,
76
52
  subTitle = props.subTitle,
@@ -81,144 +57,37 @@ var StepCard = function StepCard(props) {
81
57
  expandable = _props$expandable === void 0 ? true : _props$expandable,
82
58
  _props$showIcon = props.showIcon,
83
59
  showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
84
- doneSteps = props.doneSteps,
85
- totalSteps = props.totalSteps,
86
60
  summary = props.summary,
87
61
  summaryProps = props.summaryProps,
88
62
  expansionPanelDetailsProps = props.expansionPanelDetailsProps,
89
63
  linearProgressBarProps = props.linearProgressBarProps,
64
+ summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
90
65
  rootProps = props.rootProps,
91
66
  onStepUrlClick = props.onStepUrlClick;
92
- var percentage = Math.round(doneSteps / totalSteps * 100);
93
- var renderTitleColumn = (0, _react.useMemo)(function () {
94
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showIcon && /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
95
- style: {
96
- fontSize: 40,
97
- color: percentage === 100 ? DONE_COLOR : UNDONE_COLOR
98
- }
99
- }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
100
- variant: "h6",
101
- style: {
102
- color: UNDONE_TITLE_COLOR,
103
- fontSize: 24,
104
- textAlign: 'center'
105
- }
106
- }, titleProps), title), subTitle && /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
107
- variant: "h6",
108
- style: {
109
- color: UNDONE_COLOR,
110
- textAlign: 'center'
111
- }
112
- }, titleProps), subTitle)));
113
- }, [showIcon, percentage, titleProps, title, subTitle]);
114
- var renderSummaryColumn = (0, _react.useMemo)(function () {
115
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
116
- style: {
117
- textAlign: 'center'
118
- },
119
- expandIcon: /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, {
120
- fontSize: "large"
121
- })
122
- }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
123
- variant: "h6"
124
- }, summaryProps), summary)));
125
- }, [summary, summaryProps]);
126
- var renderStepsList = (0, _react.useMemo)(function () {
127
- return /*#__PURE__*/_react["default"].createElement(_List["default"], null, steps.map(function (step, index) {
128
- var handleOnClickStepUrl = function handleOnClickStepUrl() {
129
- if (onStepUrlClick && step.url) {
130
- onStepUrlClick(step.url);
131
- }
132
- };
133
- return /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
134
- key: index,
135
- primary: /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
136
- style: {
137
- color: step.done ? DONE_COLOR : UNDONE_COLOR
138
- }
139
- }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
140
- variant: "body1",
141
- style: {
142
- color: UNDONE_FONT_COLOR,
143
- fontWeight: 600
144
- }
145
- }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
146
- style: {
147
- backgroundColor: 'unset'
148
- },
149
- onClick: handleOnClickStepUrl
150
- }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
151
- fontSize: "small",
152
- style: {
153
- margin: '0px'
154
- }
155
- }))))
156
- });
157
- }));
158
- }, [onStepUrlClick, steps]);
159
- var renderNormalProgress = (0, _react.useMemo)(function () {
160
- return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
161
- variant: "h6"
162
- }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
163
- variant: "subtitle2",
164
- style: {
165
- position: 'absolute',
166
- right: 8
167
- }
168
- }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
169
- style: {
170
- width: '100%'
171
- }
172
- }, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
173
- variant: "determinate",
174
- value: percentage,
175
- color: "primary",
176
- classes: {
177
- barColorPrimary: 'barColorPrimary'
178
- },
179
- style: {
180
- borderRadius: 10,
181
- height: '16px',
182
- backgroundColor: UNDONE_PROGRESS_COLOR
183
- }
184
- })));
185
- }, [percentage, summary, summaryProps]);
186
- return /*#__PURE__*/_react["default"].createElement(_styles.Container, rootProps, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, null, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
187
- height: expandable ? '100px' : '100%'
188
- }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
189
- justifyContent: "start"
190
- }, renderTitleColumn), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
191
- justifyContent: "end"
192
- }, expandable ? renderSummaryColumn : renderNormalProgress)), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
193
- height: "15px"
194
- }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
195
- style: {
196
- width: '100%'
197
- }
198
- }, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
199
- variant: "determinate",
200
- value: percentage,
201
- color: "primary",
202
- classes: {
203
- barColorPrimary: 'barColorPrimary'
204
- },
205
- style: {
206
- height: '16px',
207
- backgroundColor: UNDONE_PROGRESS_COLOR
208
- }
209
- }, linearProgressBarProps))))), expandable && /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], (0, _extends2["default"])({
210
- style: {
211
- display: 'flex',
212
- justifyContent: 'space-between'
213
- }
214
- }, expansionPanelDetailsProps), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
215
- justifyContent: "start"
216
- }, renderStepsList), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
217
- justifyContent: "end"
218
- }, /*#__PURE__*/_react["default"].createElement("img", {
219
- src: image,
220
- alt: "Step Icon"
221
- })))));
67
+ return loading ? /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
68
+ expandable: expandable,
69
+ showIcon: showIcon,
70
+ showBottomPercentage: showBottomPercentage
71
+ }) : /*#__PURE__*/_react["default"].createElement(_styles.Container, rootProps, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_StepCardPanel.StepCardPanel, {
72
+ title: title,
73
+ summary: summary,
74
+ expandable: expandable,
75
+ remainingSteps: remainingSteps,
76
+ time: time,
77
+ showIcon: showIcon,
78
+ showBottomPercentage: showBottomPercentage,
79
+ subTitle: subTitle,
80
+ percentage: percentage,
81
+ titleProps: titleProps,
82
+ summaryProps: summaryProps,
83
+ summaryLinearProgressBarProps: summaryLinearProgressBarProps,
84
+ linearProgressBarProps: linearProgressBarProps
85
+ }), expandable && /*#__PURE__*/_react["default"].createElement(_StepCardDetails.StepCardDetails, {
86
+ steps: steps,
87
+ image: image,
88
+ expansionPanelDetailsProps: expansionPanelDetailsProps,
89
+ onStepUrlClick: onStepUrlClick
90
+ })));
222
91
  };
223
92
  var _default = StepCard;
224
93
  exports["default"] = _default;
package/core/StepCard/styles.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  /// <reference types="react" />
2
+ interface IStepContainerProps {
3
+ withPadding?: boolean;
4
+ }
2
5
  interface IRowProps {
3
6
  height: React.CSSProperties['maxHeight'];
4
7
  }
@@ -7,7 +10,7 @@ interface IColumnProps {
7
10
  }
8
11
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
9
12
  export declare const StepCardRow: import("styled-components").StyledComponent<"div", any, IRowProps, never>;
10
- export declare const StepContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
13
+ export declare const StepContainer: import("styled-components").StyledComponent<"div", any, IStepContainerProps, never>;
11
14
  export declare const StepCardColumn: import("styled-components").StyledComponent<"div", any, IColumnProps, never>;
12
15
  export declare const ListItemContainer: import("styled-components").StyledComponent<"p", any, {}, never>;
13
16
  export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
package/core/StepCard/styles.js CHANGED
@@ -14,7 +14,13 @@ var StepCardRow = _styledComponents["default"].div(_templateObject2 || (_templat
14
14
  return props.height;
15
15
  });
16
16
  exports.StepCardRow = StepCardRow;
17
- var StepContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n "])));
17
+ var StepContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n ", "\n "])), function (props) {
18
+ if (props.withPadding) {
19
+ return "\n padding: 20px;\n ";
20
+ } else {
21
+ return '';
22
+ }
23
+ });
18
24
  exports.StepContainer = StepContainer;
19
25
  var StepCardColumn = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n padding-inline: 30px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: ", ";\n width: 100%;\n\n ", "\n"])), function (props) {
20
26
  return props.justifyContent;
@@ -28,7 +34,7 @@ var StepCardColumn = _styledComponents["default"].div(_templateObject4 || (_temp
28
34
  exports.StepCardColumn = StepCardColumn;
29
35
  var ListItemContainer = _styledComponents["default"].p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 30px;\n\n svg:first-child {\n margin-right: 16px;\n }\n"])));
30
36
  exports.ListItemContainer = ListItemContainer;
31
- var TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n h6:first-child {\n padding-inline: 20px;\n }\n"])));
37
+ var TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n h6:first-child {\n padding-inline: 20px;\n }\n\n span:first-child {\n margin-left: 20px;\n }\n"])));
32
38
  exports.TitleContainer = TitleContainer;
33
39
  var NormalProgressContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n\n h6:first-child {\n margin-bottom: 8px;\n }\n"])));
34
40
  exports.NormalProgressContainer = NormalProgressContainer;
package/index.d.ts CHANGED
@@ -61,3 +61,4 @@ export { default as PinInput } from './core/PinInput';
61
61
  export { default as Chapter } from './core/Chapter';
62
62
  export { default as DataTable } from './core/DataTable';
63
63
  export { default as StepCard } from './core/StepCard';
64
+ export { default as StepCardSkeleton } from './core/StepCard/Skeleton';
package/index.js CHANGED
@@ -292,6 +292,12 @@ Object.defineProperty(exports, "StepCard", {
292
292
  return _StepCard["default"];
293
293
  }
294
294
  });
295
+ Object.defineProperty(exports, "StepCardSkeleton", {
296
+ enumerable: true,
297
+ get: function get() {
298
+ return _Skeleton["default"];
299
+ }
300
+ });
295
301
  Object.defineProperty(exports, "Stepper", {
296
302
  enumerable: true,
297
303
  get: function get() {
@@ -444,4 +450,5 @@ var _Zoom = _interopRequireDefault(require("./core/Zoom"));
444
450
  var _PinInput = _interopRequireDefault(require("./core/PinInput"));
445
451
  var _Chapter = _interopRequireDefault(require("./core/Chapter"));
446
452
  var _DataTable = _interopRequireDefault(require("./core/DataTable"));
447
- var _StepCard = _interopRequireDefault(require("./core/StepCard"));
453
+ var _StepCard = _interopRequireDefault(require("./core/StepCard"));
454
+ var _Skeleton = _interopRequireDefault(require("./core/StepCard/Skeleton"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flipper-ui",
3
- "version": "0.26.16",
3
+ "version": "0.26.17",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "homepage": "https://flipper-ui.ngi.com.br/",
package/stories/StepCard.stories.js CHANGED
@@ -1,36 +1,46 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
- exports["default"] = exports.WithoutExpandable = exports.Default = void 0;
8
+ exports["default"] = exports.WithoutExpandable = exports.WithLoading = exports.Default = void 0;
8
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _react = _interopRequireDefault(require("react"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+ var _react = _interopRequireWildcard(require("react"));
10
12
  var _StepCard = _interopRequireDefault(require("../core/StepCard"));
11
- var _sprintfJs = require("sprintf-js");
12
- var STEM_TIME_MULTIPLIER = 0.5;
13
+ var _Button = _interopRequireDefault(require("../core/Button"));
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
16
  var _default = {
14
17
  title: 'StepCard',
15
18
  component: _StepCard["default"]
16
19
  };
17
20
  exports["default"] = _default;
18
21
  var Template = function Template(args) {
19
- var total = args.steps.length;
20
- var done = args.steps.filter(function (step) {
21
- return step.done;
22
- }).length;
23
- var remaining = total - done;
24
- var summary = args.summary || (0, _sprintfJs.sprintf)('%i passos restantes - Leva %i minuto(s)', remaining, remaining * STEM_TIME_MULTIPLIER);
25
- return /*#__PURE__*/_react["default"].createElement(_StepCard["default"], (0, _extends2["default"])({}, args, {
26
- summary: summary,
27
- totalSteps: total,
28
- doneSteps: done
29
- }));
22
+ return /*#__PURE__*/_react["default"].createElement(_StepCard["default"], args);
23
+ };
24
+ var TemplateWithLoading = function TemplateWithLoading(args) {
25
+ var _useState = (0, _react.useState)(true),
26
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
27
+ loading = _useState2[0],
28
+ setLoading = _useState2[1];
29
+ setTimeout(function () {
30
+ setLoading(false);
31
+ }, 1500);
32
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], null), /*#__PURE__*/_react["default"].createElement(_StepCard["default"], (0, _extends2["default"])({}, args, {
33
+ loading: loading
34
+ })));
30
35
  };
31
36
  var Default = Template.bind({});
32
37
  exports.Default = Default;
33
38
  Default.args = {
39
+ summary: '%i passos restantes - Leva %i minuto(s)',
40
+ time: 2,
41
+ totalSteps: 6,
42
+ doneSteps: 3,
43
+ remainingSteps: 3,
34
44
  title: 'Configurar a organização e filial',
35
45
  image: 'https://dummyimage.com/130x124/000/fff',
36
46
  onStepUrlClick: function onStepUrlClick(url) {
@@ -53,6 +63,7 @@ Default.args = {
53
63
  var WithoutExpandable = Template.bind({});
54
64
  exports.WithoutExpandable = WithoutExpandable;
55
65
  WithoutExpandable.args = {
66
+ loading: false,
56
67
  showBottomPercentage: false,
57
68
  expandable: false,
58
69
  showIcon: false,
@@ -72,4 +83,31 @@ WithoutExpandable.args = {
72
83
  done: false,
73
84
  url: 'https://www.google.com'
74
85
  }]
86
+ };
87
+ var WithLoading = TemplateWithLoading.bind({});
88
+ exports.WithLoading = WithLoading;
89
+ WithLoading.args = {
90
+ summary: '%i passos restantes - Leva %i minuto(s)',
91
+ time: 2,
92
+ totalSteps: 6,
93
+ doneSteps: 3,
94
+ remainingSteps: 3,
95
+ title: 'Configurar a organização e filial',
96
+ image: 'https://dummyimage.com/130x124/000/fff',
97
+ onStepUrlClick: function onStepUrlClick(url) {
98
+ return alert(url);
99
+ },
100
+ steps: [{
101
+ title: 'Informar Razão social',
102
+ done: true,
103
+ url: 'https://www.google.com'
104
+ }, {
105
+ title: 'Informar dados do eSocial',
106
+ done: true,
107
+ url: 'https://www.google.com'
108
+ }, {
109
+ title: 'Informar dados da filial(CNAE, CNPJ)',
110
+ done: false,
111
+ url: 'https://www.google.com'
112
+ }]
75
113
  };
package/tests/CheckBox.test.js DELETED
@@ -1,33 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
6
- var _react = _interopRequireWildcard(require("react"));
7
- var _react2 = require("@testing-library/react");
8
- var _Checkbox = _interopRequireDefault(require("../core/Checkbox"));
9
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
10
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
11
- var TestComponent = function TestComponent() {
12
- var _useState = (0, _react.useState)(false),
13
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
14
- checked = _useState2[0],
15
- setChecked = _useState2[1];
16
- return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
17
- checked: checked,
18
- name: "check-test",
19
- label: "check it",
20
- onChange: function onChange() {
21
- return setChecked(!checked);
22
- }
23
- });
24
- };
25
- test('Testing CheckBox component', function () {
26
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(TestComponent, null)),
27
- getByText = _render.getByText,
28
- asFragment = _render.asFragment;
29
- var firstRender = asFragment();
30
- _react2.fireEvent.click(getByText('check it'));
31
- expect(getByText('check it')).toBeTruthy();
32
- expect(firstRender).not.toEqual(asFragment);
33
- });