flipper-ui 0.26.16 → 0.26.18

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 (16) hide show
  1. package/core/StepCard/Skeleton.d.ts +8 -0
  2. package/core/StepCard/Skeleton.js +66 -0
  3. package/core/StepCard/StepCardDetails.d.ts +9 -0
  4. package/core/StepCard/StepCardDetails.js +76 -0
  5. package/core/StepCard/StepCardPanel.d.ts +18 -0
  6. package/core/StepCard/StepCardPanel.js +132 -0
  7. package/core/StepCard/index.d.ts +25 -10
  8. package/core/StepCard/index.js +35 -167
  9. package/core/StepCard/styles.d.ts +5 -1
  10. package/core/StepCard/styles.js +15 -5
  11. package/index.d.ts +1 -0
  12. package/index.js +8 -1
  13. package/package.json +2 -3
  14. package/stories/StepCard.stories.js +55 -15
  15. package/custom.d.js +0 -1
  16. package/tests/CheckBox.test.js +0 -33
package/core/StepCard/Skeleton.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ interface IStepCardPanelProps {
2
+ expandable: boolean;
3
+ showBottomPercentage: boolean;
4
+ showIcon: boolean;
5
+ subTitle?: boolean;
6
+ }
7
+ declare const StepCardSkeleton: (props: IStepCardPanelProps) => JSX.Element;
8
+ export default StepCardSkeleton;
package/core/StepCard/Skeleton.js ADDED
@@ -0,0 +1,66 @@
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
+ var _styles = require("./styles");
13
+ var StepCardSkeleton = function StepCardSkeleton(props) {
14
+ var expandable = props.expandable,
15
+ showBottomPercentage = props.showBottomPercentage,
16
+ showIcon = props.showIcon,
17
+ subTitle = props.subTitle;
18
+ var TextSkeleton = function TextSkeleton() {
19
+ return /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
20
+ variant: "text",
21
+ style: {
22
+ minWidth: '400px'
23
+ },
24
+ height: 40
25
+ });
26
+ };
27
+ var NormalProgress = function NormalProgress() {
28
+ return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
29
+ variant: "text",
30
+ height: 40,
31
+ style: {
32
+ minWidth: '100px',
33
+ margin: '4px 0px'
34
+ }
35
+ }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
36
+ style: {
37
+ width: '100%'
38
+ }
39
+ }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
40
+ variant: "text"
41
+ })));
42
+ };
43
+ return /*#__PURE__*/_react["default"].createElement(_styles.Container, null, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
44
+ withPadding: !expandable
45
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
46
+ height: expandable ? '100px' : '100%'
47
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
48
+ justifyContent: "start"
49
+ }, showIcon && /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
50
+ variant: "circle",
51
+ width: 40,
52
+ height: 40
53
+ }), /*#__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, {
54
+ justifyContent: "end"
55
+ }, expandable ? /*#__PURE__*/_react["default"].createElement(TextSkeleton, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
56
+ height: "15px"
57
+ }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
58
+ style: {
59
+ width: '100%'
60
+ }
61
+ }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
62
+ variant: "text"
63
+ }))))));
64
+ };
65
+ var _default = StepCardSkeleton;
66
+ exports["default"] = _default;
package/core/StepCard/StepCardDetails.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { IStepCardProps } from '.';
2
+ interface IStepCardDetailsProps {
3
+ steps: IStepCardProps['steps'];
4
+ onStepUrlClick?: IStepCardProps['onStepUrlClick'];
5
+ image?: IStepCardProps['image'];
6
+ expansionPanelDetailsProps?: IStepCardProps['expansionPanelDetailsProps'];
7
+ }
8
+ export declare const StepCardDetails: (props: IStepCardDetailsProps) => JSX.Element;
9
+ export {};
package/core/StepCard/StepCardDetails.js ADDED
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.StepCardDetails = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _List = _interopRequireDefault(require("@material-ui/core/List"));
10
+ var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
11
+ var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/ExpansionPanelDetails"));
12
+ var _nginformaticaStyleguide = require("nginformatica-styleguide");
13
+ var _react = _interopRequireDefault(require("react"));
14
+ var _icons = require("../../icons");
15
+ var _IconButton = _interopRequireDefault(require("../IconButton"));
16
+ var _Typography = _interopRequireDefault(require("../Typography"));
17
+ var _styles = require("./styles");
18
+ var _theme$colors = _nginformaticaStyleguide.theme.colors,
19
+ feedback = _theme$colors.feedback,
20
+ grays = _theme$colors.grays;
21
+ var DONE_COLOR = feedback.success;
22
+ var UNDONE_COLOR = grays.g3;
23
+ var UNDONE_FONT_COLOR = grays.g2;
24
+ var StepCardDetails = function StepCardDetails(props) {
25
+ var steps = props.steps,
26
+ onStepUrlClick = props.onStepUrlClick,
27
+ image = props.image,
28
+ expansionPanelDetailsProps = props.expansionPanelDetailsProps;
29
+ var StepsList = function StepsList() {
30
+ return /*#__PURE__*/_react["default"].createElement(_List["default"], null, steps.map(function (step, index) {
31
+ var handleOnClickStepUrl = function handleOnClickStepUrl() {
32
+ if (onStepUrlClick && step.url) {
33
+ onStepUrlClick(step.url);
34
+ }
35
+ };
36
+ return /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
37
+ key: index,
38
+ primary: /*#__PURE__*/_react["default"].createElement(_styles.ListItemContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
39
+ style: {
40
+ color: step.done ? DONE_COLOR : UNDONE_COLOR
41
+ }
42
+ }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
43
+ variant: "body1",
44
+ style: {
45
+ color: UNDONE_FONT_COLOR,
46
+ fontWeight: 600
47
+ }
48
+ }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
49
+ style: {
50
+ backgroundColor: 'unset'
51
+ },
52
+ onClick: handleOnClickStepUrl
53
+ }, /*#__PURE__*/_react["default"].createElement(_icons.Help, {
54
+ fontSize: "small",
55
+ style: {
56
+ margin: '0px'
57
+ }
58
+ }))))
59
+ });
60
+ }));
61
+ };
62
+ return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], (0, _extends2["default"])({
63
+ style: {
64
+ display: 'flex',
65
+ justifyContent: 'space-between'
66
+ }
67
+ }, expansionPanelDetailsProps), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
68
+ justifyContent: "start"
69
+ }, /*#__PURE__*/_react["default"].createElement(StepsList, null)), image && /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
70
+ justifyContent: "end"
71
+ }, /*#__PURE__*/_react["default"].createElement("img", {
72
+ src: image,
73
+ alt: "Step Icon"
74
+ })));
75
+ };
76
+ exports.StepCardDetails = StepCardDetails;
package/core/StepCard/StepCardPanel.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { IStepCardProps } from '.';
2
+ interface IStepCardPanelProps {
3
+ title: string;
4
+ expandable: boolean;
5
+ showBottomPercentage: boolean;
6
+ linearProgressBarProps: IStepCardProps['linearProgressBarProps'];
7
+ summaryProps: IStepCardProps['summaryProps'];
8
+ summaryLinearProgressBarProps: IStepCardProps['summaryLinearProgressBarProps'];
9
+ titleProps: IStepCardProps['titleProps'];
10
+ percentage: number;
11
+ summary: string;
12
+ remainingSteps: number;
13
+ time: number;
14
+ showIcon: boolean;
15
+ subTitle?: string;
16
+ }
17
+ export declare const StepCardPanel: (props: IStepCardPanelProps) => JSX.Element;
18
+ export {};
package/core/StepCard/StepCardPanel.js ADDED
@@ -0,0 +1,132 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.StepCardPanel = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
10
+ var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/ExpansionPanelSummary"));
11
+ var _nginformaticaStyleguide = require("nginformatica-styleguide");
12
+ var _react = _interopRequireDefault(require("react"));
13
+ var _sprintfJs = require("sprintf-js");
14
+ var _icons = require("../../icons");
15
+ var _Typography = _interopRequireDefault(require("../Typography"));
16
+ var _styles = require("./styles");
17
+ var _theme$colors = _nginformaticaStyleguide.theme.colors,
18
+ feedback = _theme$colors.feedback,
19
+ grays = _theme$colors.grays;
20
+ var DONE_COLOR = feedback.success;
21
+ var UNDONE_COLOR = grays.g3;
22
+ var UNDONE_TITLE_COLOR = grays.g1;
23
+ var UNDONE_PROGRESS_COLOR = grays.g5;
24
+ var StepCardPanel = function StepCardPanel(props) {
25
+ var title = props.title,
26
+ summary = props.summary,
27
+ expandable = props.expandable,
28
+ showBottomPercentage = props.showBottomPercentage,
29
+ summaryProps = props.summaryProps,
30
+ linearProgressBarProps = props.linearProgressBarProps,
31
+ summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
32
+ percentage = props.percentage,
33
+ remainingSteps = props.remainingSteps,
34
+ time = props.time,
35
+ showIcon = props.showIcon,
36
+ subTitle = props.subTitle,
37
+ titleProps = props.titleProps;
38
+ var TitleIcon = function TitleIcon() {
39
+ return /*#__PURE__*/_react["default"].createElement(_icons.CheckCircle, {
40
+ style: {
41
+ fontSize: 40,
42
+ color: percentage === 100 ? DONE_COLOR : UNDONE_COLOR
43
+ }
44
+ });
45
+ };
46
+ var Title = function Title() {
47
+ return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
48
+ variant: "h6",
49
+ style: {
50
+ color: UNDONE_TITLE_COLOR,
51
+ fontSize: 24,
52
+ textAlign: 'center'
53
+ }
54
+ }, titleProps), title);
55
+ };
56
+ var SubTitle = function SubTitle() {
57
+ return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
58
+ variant: "h6",
59
+ style: {
60
+ color: UNDONE_COLOR,
61
+ textAlign: 'center'
62
+ }
63
+ }, titleProps), subTitle);
64
+ };
65
+ var TitleColumn = function TitleColumn() {
66
+ 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)));
67
+ };
68
+ var Summary = function Summary() {
69
+ return /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
70
+ style: {
71
+ textAlign: 'center'
72
+ },
73
+ expandIcon: /*#__PURE__*/_react["default"].createElement(_icons.ExpandMore, {
74
+ fontSize: "large"
75
+ })
76
+ }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
77
+ variant: "h6"
78
+ }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time)));
79
+ };
80
+ var SummaryLinearProgress = function SummaryLinearProgress() {
81
+ return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
82
+ variant: "determinate",
83
+ value: percentage,
84
+ color: "primary",
85
+ classes: {
86
+ barColorPrimary: 'barColorPrimary'
87
+ },
88
+ style: {
89
+ borderRadius: 10,
90
+ height: '16px',
91
+ backgroundColor: UNDONE_PROGRESS_COLOR
92
+ }
93
+ }, summaryLinearProgressBarProps));
94
+ };
95
+ var NormalProgress = function NormalProgress() {
96
+ return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
97
+ variant: "h6"
98
+ }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
99
+ variant: "subtitle2",
100
+ style: {
101
+ position: 'absolute',
102
+ right: 8
103
+ }
104
+ }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(SummaryLinearProgress, null)));
105
+ };
106
+ var BottomLineProgress = function BottomLineProgress() {
107
+ return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
108
+ variant: "determinate",
109
+ value: percentage,
110
+ color: "primary",
111
+ classes: {
112
+ barColorPrimary: 'barColorPrimary'
113
+ },
114
+ style: {
115
+ height: '16px',
116
+ backgroundColor: UNDONE_PROGRESS_COLOR
117
+ }
118
+ }, linearProgressBarProps));
119
+ };
120
+ return /*#__PURE__*/_react["default"].createElement(_styles.StepContainer, {
121
+ withPadding: !expandable
122
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
123
+ height: expandable ? '100px' : '100%'
124
+ }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
125
+ justifyContent: "start"
126
+ }, /*#__PURE__*/_react["default"].createElement(TitleColumn, null)), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
127
+ justifyContent: "end"
128
+ }, expandable ? /*#__PURE__*/_react["default"].createElement(Summary, null) : /*#__PURE__*/_react["default"].createElement(NormalProgress, null))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
129
+ height: "15px"
130
+ }, /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(BottomLineProgress, null))));
131
+ };
132
+ exports.StepCardPanel = StepCardPanel;
package/core/StepCard/index.d.ts CHANGED
@@ -2,7 +2,6 @@ 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';
7
6
  /**
8
7
  * Props for the StepCard component
@@ -10,6 +9,19 @@ import { PropWithDataCy } from '../types';
10
9
  * @interface IStepCardProps
11
10
  */
12
11
  export interface IStepCardProps {
12
+ /**
13
+ * Whether the step card are loading
14
+ * @type {boolean}
15
+ * @memberof IStepCardProps
16
+ * @default false
17
+ */
18
+ loading?: boolean;
19
+ /**
20
+ * The percentage of the progress bar
21
+ * @type {number}
22
+ * @memberof IStepCardProps
23
+ */
24
+ percentage: number;
13
25
  /**
14
26
  * Whether to show the percentage on the expansion panel summary
15
27
  * Defaults to true
@@ -17,12 +29,17 @@ export interface IStepCardProps {
17
29
  * @memberof IStepCardProps
18
30
  * @default true
19
31
  */
20
- showBottomPercentage: boolean;
32
+ showBottomPercentage?: boolean;
21
33
  /**
22
34
  * A text to be displayed on the expansion panel summary
23
35
  *
24
36
  * @type {string}
25
37
  * @memberof IStepCardProps
38
+ * @example using literals
39
+ * summary: '%i items remaining - %i minute(s)'
40
+ *
41
+ * @example using string
42
+ * summary: 'Your progress'
26
43
  */
27
44
  summary: string;
28
45
  /**
@@ -47,19 +64,17 @@ export interface IStepCardProps {
47
64
  */
48
65
  image?: string;
49
66
  /**
50
- * The total number of steps
51
- *
67
+ * The number of remaining steps
52
68
  * @type {number}
53
69
  * @memberof IStepCardProps
54
70
  */
55
- totalSteps: number;
71
+ remainingSteps: number;
56
72
  /**
57
- * The number of completed steps
58
- *
73
+ * The time in seconds to be displayed on the expansion panel summary
59
74
  * @type {number}
60
75
  * @memberof IStepCardProps
61
76
  */
62
- doneSteps: number;
77
+ time: number;
63
78
  /**
64
79
  * An array of steps, each with a title, a done flag and an optional url
65
80
  *
@@ -120,14 +135,14 @@ export interface IStepCardProps {
120
135
  * @memberof IStepCardProps
121
136
  * @default true
122
137
  */
123
- expandable: boolean;
138
+ expandable?: boolean;
124
139
  /**
125
140
  * Whether to show the icon on the expansion panel summary
126
141
  * @type {boolean}
127
142
  * @memberof IStepCardProps
128
143
  * @default true
129
144
  */
130
- showIcon: boolean;
145
+ showIcon?: boolean;
131
146
  /**
132
147
  * Callback to be called when the user clicks on a step url
133
148
  * @memberof IStepCardProps
package/core/StepCard/index.js CHANGED
@@ -1,45 +1,16 @@
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"));
21
- require("./colors.css");
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _Skeleton = _interopRequireDefault(require("./Skeleton"));
11
+ var _StepCardDetails = require("./StepCardDetails");
12
+ var _StepCardPanel = require("./StepCardPanel");
22
13
  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
14
  /**
44
15
  * StepCard is a reusable component that displays a card with a title, a summary,
45
16
  * an expandable panel, and a progress bar.
@@ -68,9 +39,13 @@ var UNDONE_PROGRESS_COLOR = grays.g5;
68
39
  * defaultExpanded={false}
69
40
  * />
70
41
  */
71
-
72
42
  var StepCard = function StepCard(props) {
73
- var steps = props.steps,
43
+ var _props$loading = props.loading,
44
+ loading = _props$loading === void 0 ? false : _props$loading,
45
+ percentage = props.percentage,
46
+ time = props.time,
47
+ steps = props.steps,
48
+ remainingSteps = props.remainingSteps,
74
49
  title = props.title,
75
50
  titleProps = props.titleProps,
76
51
  subTitle = props.subTitle,
@@ -81,144 +56,37 @@ var StepCard = function StepCard(props) {
81
56
  expandable = _props$expandable === void 0 ? true : _props$expandable,
82
57
  _props$showIcon = props.showIcon,
83
58
  showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
84
- doneSteps = props.doneSteps,
85
- totalSteps = props.totalSteps,
86
59
  summary = props.summary,
87
60
  summaryProps = props.summaryProps,
88
61
  expansionPanelDetailsProps = props.expansionPanelDetailsProps,
89
62
  linearProgressBarProps = props.linearProgressBarProps,
63
+ summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
90
64
  rootProps = props.rootProps,
91
65
  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
- })))));
66
+ return loading ? /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
67
+ expandable: expandable,
68
+ showIcon: showIcon,
69
+ showBottomPercentage: showBottomPercentage
70
+ }) : /*#__PURE__*/_react["default"].createElement(_styles.Container, rootProps, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], null, /*#__PURE__*/_react["default"].createElement(_StepCardPanel.StepCardPanel, {
71
+ title: title,
72
+ summary: summary,
73
+ expandable: expandable,
74
+ remainingSteps: remainingSteps,
75
+ time: time,
76
+ showIcon: showIcon,
77
+ showBottomPercentage: showBottomPercentage,
78
+ subTitle: subTitle,
79
+ percentage: percentage,
80
+ titleProps: titleProps,
81
+ summaryProps: summaryProps,
82
+ summaryLinearProgressBarProps: summaryLinearProgressBarProps,
83
+ linearProgressBarProps: linearProgressBarProps
84
+ }), expandable && /*#__PURE__*/_react["default"].createElement(_StepCardDetails.StepCardDetails, {
85
+ steps: steps,
86
+ image: image,
87
+ expansionPanelDetailsProps: expansionPanelDetailsProps,
88
+ onStepUrlClick: onStepUrlClick
89
+ })));
222
90
  };
223
91
  var _default = StepCard;
224
92
  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,9 +10,10 @@ 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>;
14
17
  export declare const NormalProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
18
+ export declare const BarWrapper: import("styled-components").StyledComponent<import("react").ComponentType<import("@material-ui/core").BoxProps>, any, {}, never>;
15
19
  export {};
package/core/StepCard/styles.js CHANGED
@@ -4,17 +4,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = void 0;
7
+ exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = exports.BarWrapper = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
+ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
10
+ var _nginformaticaStyleguide = require("nginformatica-styleguide");
9
11
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
12
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
11
13
  var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n max-width: 1100px;\n"])));
12
14
  exports.Container = Container;
13
15
  var StepCardRow = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n max-width: 1100px;\n height: ", ";\n"])), function (props) {
14
16
  return props.height;
15
17
  });
16
18
  exports.StepCardRow = StepCardRow;
17
- var StepContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n "])));
19
+ var StepContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n ", "\n"])), function (props) {
20
+ if (props.withPadding) {
21
+ return "\n padding: 20px;\n ";
22
+ } else {
23
+ return '';
24
+ }
25
+ });
18
26
  exports.StepContainer = StepContainer;
19
27
  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
28
  return props.justifyContent;
@@ -28,7 +36,9 @@ var StepCardColumn = _styledComponents["default"].div(_templateObject4 || (_temp
28
36
  exports.StepCardColumn = StepCardColumn;
29
37
  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
38
  exports.ListItemContainer = ListItemContainer;
31
- var TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n h6:first-child {\n padding-inline: 20px;\n }\n"])));
39
+ 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
40
  exports.TitleContainer = TitleContainer;
33
41
  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
- exports.NormalProgressContainer = NormalProgressContainer;
42
+ exports.NormalProgressContainer = NormalProgressContainer;
43
+ var BarWrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n\n & .barColorPrimary {\n background-color: ", ";\n }\n"])), _nginformaticaStyleguide.theme.colors.feedback.success);
44
+ exports.BarWrapper = BarWrapper;
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.18",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "homepage": "https://flipper-ui.ngi.com.br/",
@@ -80,7 +80,6 @@
80
80
  "babel-loader": "8.2.5",
81
81
  "babel-plugin-transform-class-properties": "6.24.1",
82
82
  "babel-plugin-transform-imports": "2.0.0",
83
- "css-loader": "^6.7.3",
84
83
  "cypress": "12.0.2",
85
84
  "cypress-cucumber-preprocessor": "4.3.1",
86
85
  "cypress-plugin-tab": "^1.0.5",
@@ -108,7 +107,7 @@
108
107
  "react-router": "5.1.2",
109
108
  "react-router-dom": "5.1.2",
110
109
  "styled-components": "5.0.0",
111
- "ts-loader": "9.4.1",
110
+ "ts-loader": "^9.4.2",
112
111
  "typescript": "3.9.10",
113
112
  "webpack": "5"
114
113
  },
package/stories/StepCard.stories.js CHANGED
@@ -1,36 +1,47 @@
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
+ percentage: 75,
42
+ totalSteps: 6,
43
+ doneSteps: 3,
44
+ remainingSteps: 3,
34
45
  title: 'Configurar a organização e filial',
35
46
  image: 'https://dummyimage.com/130x124/000/fff',
36
47
  onStepUrlClick: function onStepUrlClick(url) {
@@ -53,6 +64,8 @@ Default.args = {
53
64
  var WithoutExpandable = Template.bind({});
54
65
  exports.WithoutExpandable = WithoutExpandable;
55
66
  WithoutExpandable.args = {
67
+ loading: false,
68
+ percentage: 75,
56
69
  showBottomPercentage: false,
57
70
  expandable: false,
58
71
  showIcon: false,
@@ -72,4 +85,31 @@ WithoutExpandable.args = {
72
85
  done: false,
73
86
  url: 'https://www.google.com'
74
87
  }]
88
+ };
89
+ var WithLoading = TemplateWithLoading.bind({});
90
+ exports.WithLoading = WithLoading;
91
+ WithLoading.args = {
92
+ summary: '%i passos restantes - Leva %i minuto(s)',
93
+ time: 2,
94
+ totalSteps: 6,
95
+ doneSteps: 3,
96
+ remainingSteps: 3,
97
+ title: 'Configurar a organização e filial',
98
+ image: 'https://dummyimage.com/130x124/000/fff',
99
+ onStepUrlClick: function onStepUrlClick(url) {
100
+ return alert(url);
101
+ },
102
+ steps: [{
103
+ title: 'Informar Razão social',
104
+ done: true,
105
+ url: 'https://www.google.com'
106
+ }, {
107
+ title: 'Informar dados do eSocial',
108
+ done: true,
109
+ url: 'https://www.google.com'
110
+ }, {
111
+ title: 'Informar dados da filial(CNAE, CNPJ)',
112
+ done: false,
113
+ url: 'https://www.google.com'
114
+ }]
75
115
  };
package/custom.d.js DELETED
@@ -1 +0,0 @@
1
- "use strict";
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
- });