flipper-ui 0.26.15 → 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 (17) 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 +184 -0
  8. package/core/StepCard/index.js +93 -0
  9. package/core/StepCard/styles.d.ts +18 -0
  10. package/core/StepCard/styles.js +40 -0
  11. package/core/types.d.ts +3 -0
  12. package/custom.d.js +1 -0
  13. package/index.d.ts +2 -0
  14. package/index.js +15 -1
  15. package/package.json +5 -1
  16. package/stories/StepCard.stories.js +113 -0
  17. 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 ADDED
@@ -0,0 +1,184 @@
1
+ import { LinearProgress } from '@material-ui/core';
2
+ import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
3
+ import React from 'react';
4
+ import Typography from '../Typography';
5
+ import { PropWithDataCy } from '../types';
6
+ import './colors.css';
7
+ /**
8
+ * Props for the StepCard component
9
+ *
10
+ * @interface IStepCardProps
11
+ */
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;
26
+ /**
27
+ * Whether to show the percentage on the expansion panel summary
28
+ * Defaults to true
29
+ * @type {boolean}
30
+ * @memberof IStepCardProps
31
+ * @default true
32
+ */
33
+ showBottomPercentage?: boolean;
34
+ /**
35
+ * A text to be displayed on the expansion panel summary
36
+ *
37
+ * @type {string}
38
+ * @memberof IStepCardProps
39
+ * @example using literals
40
+ * summary: '%i items remaining - %i minute(s)'
41
+ *
42
+ * @example using string
43
+ * summary: 'Your progress'
44
+ */
45
+ summary: string;
46
+ /**
47
+ * The title of the step card
48
+ *
49
+ * @type {string}
50
+ * @memberof IStepCardProps
51
+ */
52
+ title: string;
53
+ /**
54
+ * The subtitle of the step card title
55
+ *
56
+ * @type {string}
57
+ * @memberof IStepCardProps
58
+ */
59
+ subTitle?: string;
60
+ /**
61
+ * The image to be displayed on the expansion panel details
62
+ *
63
+ * @type {string}
64
+ * @memberof IStepCardProps
65
+ */
66
+ image?: string;
67
+ /**
68
+ * The number of remaining steps
69
+ * @type {number}
70
+ * @memberof IStepCardProps
71
+ */
72
+ remainingSteps: number;
73
+ /**
74
+ * The time in seconds to be displayed on the expansion panel summary
75
+ * @type {number}
76
+ * @memberof IStepCardProps
77
+ */
78
+ time: number;
79
+ /**
80
+ * An array of steps, each with a title, a done flag and an optional url
81
+ *
82
+ * @type [{
83
+ * title: string;
84
+ * done: boolean;
85
+ * url?: string;
86
+ * }]
87
+ * @memberof IStepCardProps
88
+ */
89
+ steps: {
90
+ title: string;
91
+ done: boolean;
92
+ url?: string;
93
+ }[];
94
+ /**
95
+ * Props to be passed to the root element
96
+ *
97
+ * @type {(React.HTMLAttributes<HTMLDivElement> | undefined)}
98
+ * @memberof IStepCardProps
99
+ */
100
+ rootProps?: React.HTMLAttributes<HTMLDivElement>;
101
+ /**
102
+ * Props to be passed to the title typography
103
+ *
104
+ * @type {(typeof Typography | undefined)}
105
+ * @memberof IStepCardProps
106
+ */
107
+ titleProps?: PropWithDataCy<typeof Typography>;
108
+ /**
109
+ * Props to be passed to the summary typography
110
+ *
111
+ * @type {(typeof Typography | undefined)}
112
+ * @memberof IStepCardProps
113
+ */
114
+ summaryProps?: PropWithDataCy<typeof Typography>;
115
+ /**
116
+ * Props to be passed to the expansion panel
117
+ * @type {(typeof MuiExpansionPanel | undefined)}
118
+ * @memberof IStepCardProps
119
+ */
120
+ expansionPanelDetailsProps?: PropWithDataCy<typeof MuiExpansionPanelDetails>;
121
+ /**
122
+ * Props to be passed to the linear progress bar
123
+ * @type {(typeof LinearProgress | undefined)}
124
+ * @memberof IStepCardProps
125
+ */
126
+ linearProgressBarProps?: PropWithDataCy<typeof LinearProgress>;
127
+ /**
128
+ * Props to be passed to the expansion panel summary linear progress bar
129
+ * @type {(typeof LinearProgress | undefined)}
130
+ * @memberof IStepCardProps
131
+ */
132
+ summaryLinearProgressBarProps?: PropWithDataCy<typeof LinearProgress>;
133
+ /**
134
+ * Whether the expansion panel is expandable
135
+ * @type {boolean}
136
+ * @memberof IStepCardProps
137
+ * @default true
138
+ */
139
+ expandable?: boolean;
140
+ /**
141
+ * Whether to show the icon on the expansion panel summary
142
+ * @type {boolean}
143
+ * @memberof IStepCardProps
144
+ * @default true
145
+ */
146
+ showIcon?: boolean;
147
+ /**
148
+ * Callback to be called when the user clicks on a step url
149
+ * @memberof IStepCardProps
150
+ * @default undefined
151
+ * @type {(url: string) => void}
152
+ */
153
+ onStepUrlClick?: (url: string) => void;
154
+ }
155
+ /**
156
+ * StepCard is a reusable component that displays a card with a title, a summary,
157
+ * an expandable panel, and a progress bar.
158
+ * The expandable panel displays a list of steps, each with a title, a done flag,
159
+ * and an optional url.
160
+ *
161
+ * @example
162
+ * <StepCard
163
+ * showBottomPercentage={true}
164
+ * summary="50% Complete"
165
+ * title="Step 1"
166
+ * subTitle="Subtitle for step 1"
167
+ * image="https://via.placeholder.com/150"
168
+ * totalSteps={4}
169
+ * doneSteps={2}
170
+ * steps={[
171
+ * { title: "Step 1-1", done: true },
172
+ * { title: "Step 1-2", done: true, url: "/step-1-2" },
173
+ * { title: "Step 1-3", done: false },
174
+ * { title: "Step 1-4", done: false }
175
+ * ]}
176
+ * rootProps={{ className: "my-custom-class" }}
177
+ * titleProps={{ variant: "h3", color: "primary" }}
178
+ * summaryProps={{ variant: "body2", color: "secondary" }}
179
+ * expandable={true}
180
+ * defaultExpanded={false}
181
+ * />
182
+ */
183
+ declare const StepCard: (props: IStepCardProps) => JSX.Element;
184
+ export default StepCard;
package/core/StepCard/index.js ADDED
@@ -0,0 +1,93 @@
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 _ExpansionPanel = _interopRequireDefault(require("@material-ui/core/ExpansionPanel"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _Skeleton = _interopRequireDefault(require("./Skeleton"));
11
+ var _StepCardDetails = require("./StepCardDetails");
12
+ var _StepCardPanel = require("./StepCardPanel");
13
+ require("./colors.css");
14
+ var _styles = require("./styles");
15
+ /**
16
+ * StepCard is a reusable component that displays a card with a title, a summary,
17
+ * an expandable panel, and a progress bar.
18
+ * The expandable panel displays a list of steps, each with a title, a done flag,
19
+ * and an optional url.
20
+ *
21
+ * @example
22
+ * <StepCard
23
+ * showBottomPercentage={true}
24
+ * summary="50% Complete"
25
+ * title="Step 1"
26
+ * subTitle="Subtitle for step 1"
27
+ * image="https://via.placeholder.com/150"
28
+ * totalSteps={4}
29
+ * doneSteps={2}
30
+ * steps={[
31
+ * { title: "Step 1-1", done: true },
32
+ * { title: "Step 1-2", done: true, url: "/step-1-2" },
33
+ * { title: "Step 1-3", done: false },
34
+ * { title: "Step 1-4", done: false }
35
+ * ]}
36
+ * rootProps={{ className: "my-custom-class" }}
37
+ * titleProps={{ variant: "h3", color: "primary" }}
38
+ * summaryProps={{ variant: "body2", color: "secondary" }}
39
+ * expandable={true}
40
+ * defaultExpanded={false}
41
+ * />
42
+ */
43
+ var StepCard = function StepCard(props) {
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,
50
+ title = props.title,
51
+ titleProps = props.titleProps,
52
+ subTitle = props.subTitle,
53
+ image = props.image,
54
+ _props$showBottomPerc = props.showBottomPercentage,
55
+ showBottomPercentage = _props$showBottomPerc === void 0 ? true : _props$showBottomPerc,
56
+ _props$expandable = props.expandable,
57
+ expandable = _props$expandable === void 0 ? true : _props$expandable,
58
+ _props$showIcon = props.showIcon,
59
+ showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
60
+ summary = props.summary,
61
+ summaryProps = props.summaryProps,
62
+ expansionPanelDetailsProps = props.expansionPanelDetailsProps,
63
+ linearProgressBarProps = props.linearProgressBarProps,
64
+ summaryLinearProgressBarProps = props.summaryLinearProgressBarProps,
65
+ rootProps = props.rootProps,
66
+ onStepUrlClick = props.onStepUrlClick;
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
+ })));
91
+ };
92
+ var _default = StepCard;
93
+ exports["default"] = _default;
package/core/StepCard/styles.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ interface IStepContainerProps {
3
+ withPadding?: boolean;
4
+ }
5
+ interface IRowProps {
6
+ height: React.CSSProperties['maxHeight'];
7
+ }
8
+ interface IColumnProps {
9
+ justifyContent: React.CSSProperties['justifyContent'];
10
+ }
11
+ export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
12
+ export declare const StepCardRow: import("styled-components").StyledComponent<"div", any, IRowProps, never>;
13
+ export declare const StepContainer: import("styled-components").StyledComponent<"div", any, IStepContainerProps, never>;
14
+ export declare const StepCardColumn: import("styled-components").StyledComponent<"div", any, IColumnProps, never>;
15
+ export declare const ListItemContainer: import("styled-components").StyledComponent<"p", any, {}, never>;
16
+ export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
17
+ export declare const NormalProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
18
+ export {};
package/core/StepCard/styles.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
+ var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n max-width: 1100px;\n"])));
12
+ exports.Container = Container;
13
+ 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
+ return props.height;
15
+ });
16
+ exports.StepCardRow = StepCardRow;
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
+ });
24
+ exports.StepContainer = StepContainer;
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) {
26
+ return props.justifyContent;
27
+ }, function (props) {
28
+ if (props.justifyContent === 'start') {
29
+ return "\n svg:first-child {\n margin-right: 40px;\n }\n ";
30
+ } else {
31
+ return '';
32
+ }
33
+ });
34
+ exports.StepCardColumn = StepCardColumn;
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"])));
36
+ exports.ListItemContainer = ListItemContainer;
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"])));
38
+ exports.TitleContainer = TitleContainer;
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"])));
40
+ exports.NormalProgressContainer = NormalProgressContainer;
package/core/types.d.ts CHANGED
@@ -11,3 +11,6 @@ export interface DefaultProps {
11
11
  export interface HTMLElementWithDataCy<T> extends React.HTMLAttributes<T> {
12
12
  'data-cy': string;
13
13
  }
14
+ export declare type PropWithDataCy<T> = Partial<T> & {
15
+ 'data-cy': string;
16
+ };
package/custom.d.js ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/index.d.ts CHANGED
@@ -60,3 +60,5 @@ export { default as Zoom } from './core/Zoom';
60
60
  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
+ export { default as StepCard } from './core/StepCard';
64
+ export { default as StepCardSkeleton } from './core/StepCard/Skeleton';
package/index.js CHANGED
@@ -286,6 +286,18 @@ Object.defineProperty(exports, "Snackbar", {
286
286
  return _Snackbar["default"];
287
287
  }
288
288
  });
289
+ Object.defineProperty(exports, "StepCard", {
290
+ enumerable: true,
291
+ get: function get() {
292
+ return _StepCard["default"];
293
+ }
294
+ });
295
+ Object.defineProperty(exports, "StepCardSkeleton", {
296
+ enumerable: true,
297
+ get: function get() {
298
+ return _Skeleton["default"];
299
+ }
300
+ });
289
301
  Object.defineProperty(exports, "Stepper", {
290
302
  enumerable: true,
291
303
  get: function get() {
@@ -437,4 +449,6 @@ var _Typography = _interopRequireDefault(require("./core/Typography"));
437
449
  var _Zoom = _interopRequireDefault(require("./core/Zoom"));
438
450
  var _PinInput = _interopRequireDefault(require("./core/PinInput"));
439
451
  var _Chapter = _interopRequireDefault(require("./core/Chapter"));
440
- var _DataTable = _interopRequireDefault(require("./core/DataTable"));
452
+ var _DataTable = _interopRequireDefault(require("./core/DataTable"));
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.15",
3
+ "version": "0.26.17",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "homepage": "https://flipper-ui.ngi.com.br/",
@@ -40,8 +40,10 @@
40
40
  "faker": "5.5.3",
41
41
  "material-table": "1.69.3",
42
42
  "material-ui-chip-input": "2.0.0-beta.2",
43
+ "nginformatica-styleguide": "^1.0.2",
43
44
  "ramda": "0.25.0",
44
45
  "react-number-format": "4.4.1",
46
+ "sprintf-js": "^1.1.2",
45
47
  "uuid": "9.0.0"
46
48
  },
47
49
  "devDependencies": {
@@ -70,6 +72,7 @@
70
72
  "@types/react": "18.0.26",
71
73
  "@types/react-router": "5.1.2",
72
74
  "@types/react-router-dom": "5.1.2",
75
+ "@types/sprintf-js": "^1.1.2",
73
76
  "@types/styled-components": "4.4.2",
74
77
  "@types/uuid": "8.3.4",
75
78
  "@typescript-eslint/eslint-plugin": "5.44.0",
@@ -77,6 +80,7 @@
77
80
  "babel-loader": "8.2.5",
78
81
  "babel-plugin-transform-class-properties": "6.24.1",
79
82
  "babel-plugin-transform-imports": "2.0.0",
83
+ "css-loader": "^6.7.3",
80
84
  "cypress": "12.0.2",
81
85
  "cypress-cucumber-preprocessor": "4.3.1",
82
86
  "cypress-plugin-tab": "^1.0.5",
package/stories/StepCard.stories.js ADDED
@@ -0,0 +1,113 @@
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["default"] = exports.WithoutExpandable = exports.WithLoading = exports.Default = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var _StepCard = _interopRequireDefault(require("../core/StepCard"));
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; }
16
+ var _default = {
17
+ title: 'StepCard',
18
+ component: _StepCard["default"]
19
+ };
20
+ exports["default"] = _default;
21
+ var Template = function Template(args) {
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
+ })));
35
+ };
36
+ var Default = Template.bind({});
37
+ exports.Default = Default;
38
+ Default.args = {
39
+ summary: '%i passos restantes - Leva %i minuto(s)',
40
+ time: 2,
41
+ totalSteps: 6,
42
+ doneSteps: 3,
43
+ remainingSteps: 3,
44
+ title: 'Configurar a organização e filial',
45
+ image: 'https://dummyimage.com/130x124/000/fff',
46
+ onStepUrlClick: function onStepUrlClick(url) {
47
+ return alert(url);
48
+ },
49
+ steps: [{
50
+ title: 'Informar Razão social',
51
+ done: true,
52
+ url: 'https://www.google.com'
53
+ }, {
54
+ title: 'Informar dados do eSocial',
55
+ done: true,
56
+ url: 'https://www.google.com'
57
+ }, {
58
+ title: 'Informar dados da filial(CNAE, CNPJ)',
59
+ done: false,
60
+ url: 'https://www.google.com'
61
+ }]
62
+ };
63
+ var WithoutExpandable = Template.bind({});
64
+ exports.WithoutExpandable = WithoutExpandable;
65
+ WithoutExpandable.args = {
66
+ loading: false,
67
+ showBottomPercentage: false,
68
+ expandable: false,
69
+ showIcon: false,
70
+ title: 'Conheça mais sobre o Quírons',
71
+ subTitle: 'Siga os passos recomendados para uma melhor experiência ' + 'dentro da plataforma.',
72
+ summary: 'Seu progresso',
73
+ steps: [{
74
+ title: 'Informar Razão social',
75
+ done: true,
76
+ url: 'https://www.google.com'
77
+ }, {
78
+ title: 'Informar dados do eSocial',
79
+ done: true,
80
+ url: 'https://www.google.com'
81
+ }, {
82
+ title: 'Informar dados da filial(CNAE, CNPJ)',
83
+ done: false,
84
+ url: 'https://www.google.com'
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
+ }]
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
- });