@abstraks-dev/ui-library 1.0.1
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.
- package/LICENSE +21 -0
- package/README.md +708 -0
- package/dist/__tests__/Anchor.test.js +145 -0
- package/dist/__tests__/ArrowRight.test.js +91 -0
- package/dist/__tests__/Avatar.test.js +123 -0
- package/dist/__tests__/Button.test.js +82 -0
- package/dist/__tests__/Card.test.js +198 -0
- package/dist/__tests__/CheckCircle.test.js +98 -0
- package/dist/__tests__/Checkbox.test.js +161 -0
- package/dist/__tests__/ChevronDown.test.js +73 -0
- package/dist/__tests__/Close.test.js +98 -0
- package/dist/__tests__/EditSquare.test.js +99 -0
- package/dist/__tests__/Error.test.js +74 -0
- package/dist/__tests__/Footer.test.js +66 -0
- package/dist/__tests__/Heading.test.js +227 -0
- package/dist/__tests__/Hero.test.js +74 -0
- package/dist/__tests__/Label.test.js +123 -0
- package/dist/__tests__/Loader.test.js +115 -0
- package/dist/__tests__/MenuHover.test.js +137 -0
- package/dist/__tests__/Paragraph.test.js +93 -0
- package/dist/__tests__/PlusCircle.test.js +99 -0
- package/dist/__tests__/Radio.test.js +153 -0
- package/dist/__tests__/Select.test.js +187 -0
- package/dist/__tests__/Tabs.test.js +162 -0
- package/dist/__tests__/TextArea.test.js +127 -0
- package/dist/__tests__/TextInput.test.js +181 -0
- package/dist/__tests__/Toggle.test.js +120 -0
- package/dist/__tests__/TrashX.test.js +99 -0
- package/dist/__tests__/useHeadingAccessibility.test.js +144 -0
- package/dist/components/Anchor.js +131 -0
- package/dist/components/Animation.js +129 -0
- package/dist/components/AnimationGroup.js +207 -0
- package/dist/components/AnimationToggle.js +216 -0
- package/dist/components/Avatar.js +153 -0
- package/dist/components/Button.js +218 -0
- package/dist/components/Card.js +222 -0
- package/dist/components/Checkbox.js +305 -0
- package/dist/components/Crud.js +564 -0
- package/dist/components/DragAndDrop.js +337 -0
- package/dist/components/Error.js +206 -0
- package/dist/components/Footer.js +99 -0
- package/dist/components/Form.js +412 -0
- package/dist/components/Header.js +372 -0
- package/dist/components/Heading.js +134 -0
- package/dist/components/Hero.js +181 -0
- package/dist/components/Label.js +256 -0
- package/dist/components/Loader.js +302 -0
- package/dist/components/MenuHover.js +114 -0
- package/dist/components/Paragraph.js +128 -0
- package/dist/components/Prompt.js +61 -0
- package/dist/components/Radio.js +254 -0
- package/dist/components/Select.js +422 -0
- package/dist/components/SideMenu.js +313 -0
- package/dist/components/Tabs.js +297 -0
- package/dist/components/TextArea.js +370 -0
- package/dist/components/TextInput.js +286 -0
- package/dist/components/Toggle.js +186 -0
- package/dist/components/crudFiles/CrudEditBase.js +150 -0
- package/dist/components/crudFiles/CrudViewBase.js +39 -0
- package/dist/components/crudFiles/crudDevelopment.js +118 -0
- package/dist/components/crudFiles/crudEditHandlers.js +50 -0
- package/dist/constants/animation.js +30 -0
- package/dist/icons/ArrowIcon.js +32 -0
- package/dist/icons/ArrowRight.js +33 -0
- package/dist/icons/CheckCircle.js +33 -0
- package/dist/icons/ChevronDown.js +28 -0
- package/dist/icons/Close.js +33 -0
- package/dist/icons/EditSquare.js +33 -0
- package/dist/icons/Ellipses.js +34 -0
- package/dist/icons/Hamburger.js +39 -0
- package/dist/icons/LoadingSpinner.js +42 -0
- package/dist/icons/PlusCircle.js +33 -0
- package/dist/icons/SaveIcon.js +32 -0
- package/dist/icons/TrashX.js +33 -0
- package/dist/icons/__tests__/CheckCircle.test.js +9 -0
- package/dist/icons/__tests__/ChevronDown.test.js +9 -0
- package/dist/icons/__tests__/Close.test.js +9 -0
- package/dist/icons/__tests__/EditSquare.test.js +9 -0
- package/dist/icons/__tests__/PlusCircle.test.js +9 -0
- package/dist/icons/__tests__/TrashX.test.js +9 -0
- package/dist/icons/index.js +89 -0
- package/dist/index.js +332 -0
- package/dist/setupTests.js +3 -0
- package/dist/styles/_variables.scss +286 -0
- package/dist/styles/anchor.scss +40 -0
- package/dist/styles/animation-accessibility.scss +96 -0
- package/dist/styles/animation-toggle.scss +233 -0
- package/dist/styles/animation.scss +3781 -0
- package/dist/styles/avatar.scss +285 -0
- package/dist/styles/button.scss +430 -0
- package/dist/styles/card.scss +210 -0
- package/dist/styles/checkbox.scss +160 -0
- package/dist/styles/crud.scss +474 -0
- package/dist/styles/dragAndDrop.scss +312 -0
- package/dist/styles/error.scss +232 -0
- package/dist/styles/footer.scss +58 -0
- package/dist/styles/form.scss +420 -0
- package/dist/styles/grid.scss +29 -0
- package/dist/styles/header.scss +276 -0
- package/dist/styles/heading.scss +118 -0
- package/dist/styles/hero.scss +185 -0
- package/dist/styles/htmlElements.scss +20 -0
- package/dist/styles/image.scss +9 -0
- package/dist/styles/label.scss +340 -0
- package/dist/styles/list-item.scss +5 -0
- package/dist/styles/loader.scss +354 -0
- package/dist/styles/logo.scss +19 -0
- package/dist/styles/main.css +9056 -0
- package/dist/styles/main.css.map +1 -0
- package/dist/styles/main.scss +0 -0
- package/dist/styles/menu-hover.scss +30 -0
- package/dist/styles/paragraph.scss +88 -0
- package/dist/styles/prompt.scss +51 -0
- package/dist/styles/radio.scss +202 -0
- package/dist/styles/select.scss +363 -0
- package/dist/styles/side-menu.scss +334 -0
- package/dist/styles/tabs.scss +540 -0
- package/dist/styles/text-area.scss +388 -0
- package/dist/styles/text-input.scss +171 -0
- package/dist/styles/toggle.scss +0 -0
- package/dist/styles/unordered-list.scss +8 -0
- package/dist/utils/ScrollHandler.js +30 -0
- package/dist/utils/accessibility.js +128 -0
- package/dist/utils/heroUtils.js +316 -0
- package/dist/utils/index.js +104 -0
- package/dist/utils/inputValidation.js +29 -0
- package/dist/utils/keyboardNavigation.js +536 -0
- package/dist/utils/labelUtils.js +708 -0
- package/dist/utils/loaderUtils.js +387 -0
- package/dist/utils/menuUtils.js +575 -0
- package/dist/utils/useHeadingAccessibility.js +298 -0
- package/dist/utils/useRadioGroup.js +260 -0
- package/dist/utils/useSelectAccessibility.js +426 -0
- package/dist/utils/useTabsAccessibility.js +278 -0
- package/dist/utils/useTextAreaAccessibility.js +255 -0
- package/dist/utils/useTextInputAccessibility.js +295 -0
- package/dist/utils/useTypographyAccessibility.js +168 -0
- package/dist/utils/useWindowSize.js +32 -0
- package/dist/utils/utils/ScrollHandler.js +26 -0
- package/dist/utils/utils/accessibility.js +133 -0
- package/dist/utils/utils/heroUtils.js +348 -0
- package/dist/utils/utils/index.js +9 -0
- package/dist/utils/utils/inputValidation.js +22 -0
- package/dist/utils/utils/keyboardNavigation.js +664 -0
- package/dist/utils/utils/labelUtils.js +772 -0
- package/dist/utils/utils/loaderUtils.js +436 -0
- package/dist/utils/utils/menuUtils.js +651 -0
- package/dist/utils/utils/useHeadingAccessibility.js +334 -0
- package/dist/utils/utils/useRadioGroup.js +311 -0
- package/dist/utils/utils/useSelectAccessibility.js +498 -0
- package/dist/utils/utils/useTabsAccessibility.js +316 -0
- package/dist/utils/utils/useTextAreaAccessibility.js +303 -0
- package/dist/utils/utils/useTextInputAccessibility.js +338 -0
- package/dist/utils/utils/useTypographyAccessibility.js +180 -0
- package/dist/utils/utils/useWindowSize.js +26 -0
- package/dist/utils/utils/validation.js +131 -0
- package/dist/utils/validation.js +139 -0
- package/package.json +90 -0
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Toggle = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
11
|
+
/**
|
|
12
|
+
* Toggle - Interactive toggle component with controlled and uncontrolled modes
|
|
13
|
+
*
|
|
14
|
+
* Features:
|
|
15
|
+
* - Toggle between two different content states
|
|
16
|
+
* - Controlled and uncontrolled state management
|
|
17
|
+
* - Keyboard navigation support
|
|
18
|
+
* - Customizable styling and animations
|
|
19
|
+
* - Accessibility features with ARIA support
|
|
20
|
+
* - Click and keyboard interaction handling
|
|
21
|
+
*
|
|
22
|
+
* Accessibility:
|
|
23
|
+
* - Uses button semantics for keyboard navigation
|
|
24
|
+
* - ARIA expanded state for screen readers
|
|
25
|
+
* - Focus management and keyboard support
|
|
26
|
+
* - Proper semantic markup for toggle behavior
|
|
27
|
+
* - Screen reader announcements for state changes
|
|
28
|
+
*
|
|
29
|
+
* @component
|
|
30
|
+
* @example
|
|
31
|
+
* // Basic toggle with different content for each state
|
|
32
|
+
* <Toggle
|
|
33
|
+
* isClosedChildren={<span>Show Details</span>}
|
|
34
|
+
* isOpenChildren={<span>Hide Details</span>}
|
|
35
|
+
* />
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* // Controlled toggle with custom handler
|
|
39
|
+
* <Toggle
|
|
40
|
+
* isOpen={isExpanded}
|
|
41
|
+
* onToggle={(newState) => setIsExpanded(newState)}
|
|
42
|
+
* isClosedChildren={<button>Expand Section</button>}
|
|
43
|
+
* isOpenChildren={<button>Collapse Section</button>}
|
|
44
|
+
* />
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* // Toggle with custom styling and accessibility
|
|
48
|
+
* <Toggle
|
|
49
|
+
* className="custom-toggle"
|
|
50
|
+
* aria-label="Toggle navigation menu"
|
|
51
|
+
* isClosedChildren={<span>☰ Menu</span>}
|
|
52
|
+
* isOpenChildren={<span>✕ Close</span>}
|
|
53
|
+
* />
|
|
54
|
+
*/
|
|
55
|
+
const Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
56
|
+
// Core props
|
|
57
|
+
id,
|
|
58
|
+
className = '',
|
|
59
|
+
// Content props
|
|
60
|
+
isClosedChildren,
|
|
61
|
+
isOpenChildren,
|
|
62
|
+
// State props
|
|
63
|
+
isOpen,
|
|
64
|
+
onToggle,
|
|
65
|
+
// Accessibility props
|
|
66
|
+
'aria-label': ariaLabel,
|
|
67
|
+
role = 'button',
|
|
68
|
+
// Legacy props (for backward compatibility - internal use only)
|
|
69
|
+
componentName = 'toggle',
|
|
70
|
+
additionalClassName = '',
|
|
71
|
+
...restProps
|
|
72
|
+
}, ref) => {
|
|
73
|
+
// Handle legacy prop mapping
|
|
74
|
+
const finalId = id || `toggle-${Math.random().toString(36).substr(2, 9)}`;
|
|
75
|
+
const finalClassName = className || additionalClassName;
|
|
76
|
+
|
|
77
|
+
// Internal state for uncontrolled mode
|
|
78
|
+
const [internalIsOpen, setInternalIsOpen] = (0, _react.useState)(false);
|
|
79
|
+
|
|
80
|
+
// Determine if component is controlled or uncontrolled
|
|
81
|
+
const isControlled = isOpen !== undefined;
|
|
82
|
+
const currentIsOpen = isControlled ? isOpen : internalIsOpen;
|
|
83
|
+
|
|
84
|
+
// Handle toggle action
|
|
85
|
+
const handleToggle = () => {
|
|
86
|
+
const newState = !currentIsOpen;
|
|
87
|
+
if (isControlled && onToggle) {
|
|
88
|
+
onToggle(newState);
|
|
89
|
+
} else if (!isControlled) {
|
|
90
|
+
setInternalIsOpen(newState);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
// Handle keyboard interaction
|
|
95
|
+
const handleKeyDown = event => {
|
|
96
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
handleToggle();
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
// Build CSS classes
|
|
103
|
+
const toggleClasses = ['toggle', currentIsOpen && 'toggle--open', finalClassName].filter(Boolean).join(' ').trim();
|
|
104
|
+
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
105
|
+
ref: ref,
|
|
106
|
+
id: finalId,
|
|
107
|
+
className: toggleClasses,
|
|
108
|
+
"data-testid": `${componentName || 'toggle'}-wrapper`,
|
|
109
|
+
onClick: handleToggle,
|
|
110
|
+
onKeyDown: handleKeyDown,
|
|
111
|
+
role: role,
|
|
112
|
+
tabIndex: 0,
|
|
113
|
+
"aria-expanded": currentIsOpen,
|
|
114
|
+
"aria-label": ariaLabel
|
|
115
|
+
}, restProps), currentIsOpen ? isOpenChildren : isClosedChildren);
|
|
116
|
+
});
|
|
117
|
+
Toggle.propTypes = {
|
|
118
|
+
// ============================================================================
|
|
119
|
+
// CORE PROPS
|
|
120
|
+
// ============================================================================
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Unique identifier for the component
|
|
124
|
+
*/
|
|
125
|
+
id: _propTypes.string,
|
|
126
|
+
/**
|
|
127
|
+
* Additional CSS classes to apply to the component
|
|
128
|
+
*/
|
|
129
|
+
className: _propTypes.string,
|
|
130
|
+
// ============================================================================
|
|
131
|
+
// CONTENT PROPS
|
|
132
|
+
// ============================================================================
|
|
133
|
+
|
|
134
|
+
/**
|
|
135
|
+
* Content to display when toggle is in the closed state (required)
|
|
136
|
+
*/
|
|
137
|
+
isClosedChildren: _propTypes.node.isRequired,
|
|
138
|
+
/**
|
|
139
|
+
* Content to display when toggle is in the open state (required)
|
|
140
|
+
*/
|
|
141
|
+
isOpenChildren: _propTypes.node.isRequired,
|
|
142
|
+
// ============================================================================
|
|
143
|
+
// BEHAVIOR PROPS
|
|
144
|
+
// ============================================================================
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Controlled state - whether the toggle is open (for controlled mode)
|
|
148
|
+
*/
|
|
149
|
+
isOpen: _propTypes.bool,
|
|
150
|
+
// ============================================================================
|
|
151
|
+
// EVENT PROPS
|
|
152
|
+
// ============================================================================
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Callback function called when toggle state changes (for controlled mode)
|
|
156
|
+
* @param {boolean} newState - The new toggle state
|
|
157
|
+
*/
|
|
158
|
+
onToggle: _propTypes.func,
|
|
159
|
+
// ============================================================================
|
|
160
|
+
// ACCESSIBILITY PROPS
|
|
161
|
+
// ============================================================================
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* ARIA label for accessibility
|
|
165
|
+
*/
|
|
166
|
+
'aria-label': _propTypes.string,
|
|
167
|
+
/**
|
|
168
|
+
* ARIA role for the toggle element
|
|
169
|
+
*/
|
|
170
|
+
role: _propTypes.string,
|
|
171
|
+
/**
|
|
172
|
+
*Use 'className' instead. Additional CSS classes to apply
|
|
173
|
+
*/
|
|
174
|
+
additionalClassName: _propTypes.string,
|
|
175
|
+
/**
|
|
176
|
+
*Use 'id' instead. Base CSS class name for the component
|
|
177
|
+
*/
|
|
178
|
+
componentName: _propTypes.string
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
*Use 'aria-label' instead. ARIA label for accessibility
|
|
182
|
+
*/
|
|
183
|
+
// aria-label is used as a prop, not ariaLabel
|
|
184
|
+
};
|
|
185
|
+
Toggle.displayName = 'Toggle';
|
|
186
|
+
var _default = exports.default = Toggle;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
var _Trash = _interopRequireDefault(require("../assets/icons/Trash"));
|
|
10
|
+
var _CheckWCircle = _interopRequireDefault(require("../assets/icons/CheckWCircle"));
|
|
11
|
+
var _Edit = _interopRequireDefault(require("../assets/icons/Edit"));
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
+
/**
|
|
15
|
+
* File to contain CrudMenuEdit component
|
|
16
|
+
* @function
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
const CrudMenuEdit = ({
|
|
20
|
+
componentName = 'crud-edit menu',
|
|
21
|
+
handleAddClick,
|
|
22
|
+
listData,
|
|
23
|
+
handleEditClick,
|
|
24
|
+
changeHandler,
|
|
25
|
+
handleDelete,
|
|
26
|
+
handleDeleteClick,
|
|
27
|
+
addBtnText,
|
|
28
|
+
element,
|
|
29
|
+
optionValue,
|
|
30
|
+
selectOptions = [],
|
|
31
|
+
renderItems
|
|
32
|
+
}) => {
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
34
|
+
className: componentName,
|
|
35
|
+
"data-testid": componentName
|
|
36
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
37
|
+
className: "list"
|
|
38
|
+
}, listData.map(item => /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
+
key: item.id,
|
|
40
|
+
className: "item"
|
|
41
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
+
className: "input-container"
|
|
43
|
+
}, item.editable ? /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
+
className: "editable"
|
|
45
|
+
}, element === 'input' && /*#__PURE__*/_react.default.createElement("input", {
|
|
46
|
+
className: "input-text",
|
|
47
|
+
name: "content",
|
|
48
|
+
"aria-label": "Content",
|
|
49
|
+
type: "text",
|
|
50
|
+
onChange: e => changeHandler(e, item),
|
|
51
|
+
value: !item.content ? '' : item.content,
|
|
52
|
+
disabled: !item.editable,
|
|
53
|
+
placeholder: "Editing..."
|
|
54
|
+
}), element === 'select' && /*#__PURE__*/_react.default.createElement("select", {
|
|
55
|
+
className: "select",
|
|
56
|
+
name: "content",
|
|
57
|
+
"aria-label": "Content",
|
|
58
|
+
onChange: e => changeHandler(e, item),
|
|
59
|
+
value: !item.content ? item.name : item.content,
|
|
60
|
+
disabled: !item.editable,
|
|
61
|
+
"data-testid": "crud-select"
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement("option", {
|
|
63
|
+
className: "option",
|
|
64
|
+
value: ""
|
|
65
|
+
}, optionValue), selectOptions)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.content === '' && handleDelete(item.id), renderItems(item))), /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
+
className: "inside-btns"
|
|
67
|
+
}, item.editable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("button", {
|
|
68
|
+
className: "button",
|
|
69
|
+
"data-testid": "crud-save-btn",
|
|
70
|
+
onClick: () => handleEditClick(item, false)
|
|
71
|
+
}, /*#__PURE__*/_react.default.createElement(_CheckWCircle.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
|
|
72
|
+
className: "paragraph"
|
|
73
|
+
}, "Save")), /*#__PURE__*/_react.default.createElement("button", {
|
|
74
|
+
className: "button",
|
|
75
|
+
"data-testid": "crud-save-btn",
|
|
76
|
+
onClick: () => handleDelete(item.id)
|
|
77
|
+
}, /*#__PURE__*/_react.default.createElement(_Trash.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
|
|
78
|
+
className: "paragraph"
|
|
79
|
+
}, "Delete"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
|
|
80
|
+
className: "button",
|
|
81
|
+
"data-testid": "crud-edit-btn",
|
|
82
|
+
onClick: () => handleEditClick(item, true)
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement(_Edit.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
|
|
84
|
+
className: "paragraph"
|
|
85
|
+
}, "Edit")), /*#__PURE__*/_react.default.createElement("button", {
|
|
86
|
+
className: "button",
|
|
87
|
+
onClick: e => handleDeleteClick(e, item),
|
|
88
|
+
"data-testid": "delete-btn"
|
|
89
|
+
}, /*#__PURE__*/_react.default.createElement(_Trash.default, null), " ", /*#__PURE__*/_react.default.createElement("p", {
|
|
90
|
+
className: "paragraph"
|
|
91
|
+
}, "Delete"))))))), /*#__PURE__*/_react.default.createElement("div", {
|
|
92
|
+
className: "wrapper-btn"
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
94
|
+
className: "button submit add-btn",
|
|
95
|
+
"data-testid": "crud-add-btn",
|
|
96
|
+
onClick: handleAddClick
|
|
97
|
+
}, addBtnText)));
|
|
98
|
+
};
|
|
99
|
+
CrudMenuEdit.propTypes = {
|
|
100
|
+
/**
|
|
101
|
+
* Define component name
|
|
102
|
+
*/
|
|
103
|
+
componentName: _propTypes.string,
|
|
104
|
+
/**
|
|
105
|
+
* Invoke add functionality
|
|
106
|
+
*/
|
|
107
|
+
handleAddClick: _propTypes.func.isRequired,
|
|
108
|
+
/**
|
|
109
|
+
* Display data
|
|
110
|
+
*/
|
|
111
|
+
listData: _propTypes.array.isRequired,
|
|
112
|
+
/**
|
|
113
|
+
* Invoke edit functionality
|
|
114
|
+
*/
|
|
115
|
+
handleEditClick: _propTypes.func.isRequired,
|
|
116
|
+
/**
|
|
117
|
+
* Handle onChange functionality
|
|
118
|
+
*/
|
|
119
|
+
changeHandler: _propTypes.func.isRequired,
|
|
120
|
+
/**
|
|
121
|
+
* Handle delete functionality out of focus
|
|
122
|
+
*/
|
|
123
|
+
handleDelete: _propTypes.func.isRequired,
|
|
124
|
+
/**
|
|
125
|
+
* Invoke delete functionality
|
|
126
|
+
*/
|
|
127
|
+
handleDeleteClick: _propTypes.func.isRequired,
|
|
128
|
+
/**
|
|
129
|
+
* Edit button text
|
|
130
|
+
*/
|
|
131
|
+
addBtnText: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.bool]).isRequired,
|
|
132
|
+
/**
|
|
133
|
+
* Choose HTML element
|
|
134
|
+
* options: input or select
|
|
135
|
+
*/
|
|
136
|
+
element: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.bool]).isRequired,
|
|
137
|
+
/**
|
|
138
|
+
* Specific value for option
|
|
139
|
+
*/
|
|
140
|
+
optionValue: _propTypes.string,
|
|
141
|
+
/**
|
|
142
|
+
* Define data to iterate over
|
|
143
|
+
*/
|
|
144
|
+
selectOptions: _propTypes.array.isRequired,
|
|
145
|
+
/**
|
|
146
|
+
* Define UI element to render data for each item
|
|
147
|
+
*/
|
|
148
|
+
renderItems: _propTypes.func.isRequired
|
|
149
|
+
};
|
|
150
|
+
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(CrudMenuEdit);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
|
+
/**
|
|
11
|
+
* File to contain CRUDView component
|
|
12
|
+
* @function
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
const CrudView = ({
|
|
16
|
+
componentName = 'crud-default',
|
|
17
|
+
additionalClass,
|
|
18
|
+
listDataProfile
|
|
19
|
+
}) => {
|
|
20
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
21
|
+
className: `${componentName} ${additionalClass}`,
|
|
22
|
+
"data-testid": componentName
|
|
23
|
+
}, listDataProfile);
|
|
24
|
+
};
|
|
25
|
+
CrudView.propTypes = {
|
|
26
|
+
/**
|
|
27
|
+
* Define component name
|
|
28
|
+
*/
|
|
29
|
+
componentName: _propTypes.string,
|
|
30
|
+
/**
|
|
31
|
+
* Add an additional class for modifiers based on parents component
|
|
32
|
+
*/
|
|
33
|
+
additionalClass: _propTypes.string,
|
|
34
|
+
/**
|
|
35
|
+
* Display data
|
|
36
|
+
*/
|
|
37
|
+
listDataProfile: _propTypes.array.isRequired
|
|
38
|
+
};
|
|
39
|
+
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(CrudView);
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// local state for modal and crud
|
|
4
|
+
const [visible, setVisible] = useState(false);
|
|
5
|
+
const [menuList, setMenuList] = useState([]);
|
|
6
|
+
const [menuPreviousItems, setMenuPreviousItems] = useState([]);
|
|
7
|
+
const [isDeleting, setIsDeleting] = useState('');
|
|
8
|
+
|
|
9
|
+
// container
|
|
10
|
+
// This code creates a constant named menuLastIdGen which stores the result of the lastIdGen function. The lastIdGen function takes two arguments, menuList and menuPreviousItems, and returns a value. The value is the last id number in the menuList array or the last id number in the menuPreviousItems array, whichever is greater. The menuLastIdGen constant is used in the handleAddClick function below.
|
|
11
|
+
const menuLastIdGen = lastIdGen(menuList, menuPreviousItems);
|
|
12
|
+
|
|
13
|
+
//This is a function that handles the click event when a user wants to add a language. It takes in the last item ID from the menuLastIdGen, creates a new item with an empty string, true boolean and false boolean. It then pushes the new item to the menuList array and sets both menuList and menuPreviousItems arrays with the spread operator. The menuLastIdGen constant is used in the handleAddClick function below.
|
|
14
|
+
const handleAddClick = useCallback(() => {
|
|
15
|
+
const lastItemId = menuLastIdGen;
|
|
16
|
+
const newItem = createNewItem(lastItemId, '', true, false);
|
|
17
|
+
menuList.push(newItem);
|
|
18
|
+
setMenuList([...menuList]);
|
|
19
|
+
setMenuPreviousItems([...menuPreviousItems]);
|
|
20
|
+
}, [menuLastIdGen, menuPreviousItems, menuList]);
|
|
21
|
+
const handleAddPreviousItems = useCallback(() => {
|
|
22
|
+
addPreviousItems([], menuPreviousItems);
|
|
23
|
+
});
|
|
24
|
+
const handleItemDelete = useCallback(() => {
|
|
25
|
+
handleDelete(0, menuList, setMenuList, handleAddPreviousItems);
|
|
26
|
+
setVisible(false);
|
|
27
|
+
});
|
|
28
|
+
const handleChange = useCallback((e, item) => {
|
|
29
|
+
const {
|
|
30
|
+
name,
|
|
31
|
+
value
|
|
32
|
+
} = e.target;
|
|
33
|
+
item[name] = value;
|
|
34
|
+
handleList(menuList, setMenuList);
|
|
35
|
+
}, [menuList]);
|
|
36
|
+
const handleEdit = useCallback((item, editable) => {
|
|
37
|
+
item.editable = editable;
|
|
38
|
+
handleList(menuList, setMenuList);
|
|
39
|
+
}, [menuList]);
|
|
40
|
+
const handleDeletePrompt = useCallback((e, item) => {
|
|
41
|
+
const {
|
|
42
|
+
name,
|
|
43
|
+
value
|
|
44
|
+
} = e.target;
|
|
45
|
+
item[name] = value;
|
|
46
|
+
setVisible(true);
|
|
47
|
+
setIsDeleting(item.content);
|
|
48
|
+
}, []);
|
|
49
|
+
const handleSubmitDelete = async () => {
|
|
50
|
+
// Implementation for submit delete
|
|
51
|
+
};
|
|
52
|
+
const handleSubmit = async () => {
|
|
53
|
+
// Implementation for submit
|
|
54
|
+
};
|
|
55
|
+
const crudView = () => /*#__PURE__*/React.createElement(CrudDefault, {
|
|
56
|
+
listDataProfile: languagesList.map(item => {
|
|
57
|
+
const handleRender = item.content;
|
|
58
|
+
return /*#__PURE__*/React.createElement("p", {
|
|
59
|
+
key: item.id
|
|
60
|
+
}, handleRender);
|
|
61
|
+
}),
|
|
62
|
+
additionalClass: "td not-full"
|
|
63
|
+
});
|
|
64
|
+
const renderItems = item => {
|
|
65
|
+
const handleRender = item.content;
|
|
66
|
+
return /*#__PURE__*/React.createElement("p", {
|
|
67
|
+
className: handleRender
|
|
68
|
+
}, handleRender);
|
|
69
|
+
};
|
|
70
|
+
const renderPrompt = () => /*#__PURE__*/React.createElement(Modal, {
|
|
71
|
+
content: /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
className: "form",
|
|
73
|
+
style: {
|
|
74
|
+
backgroundColor: 'rgba(255,255,255,0.9)',
|
|
75
|
+
width: '50%',
|
|
76
|
+
height: '50%',
|
|
77
|
+
display: 'flex',
|
|
78
|
+
flexDirection: 'column',
|
|
79
|
+
justifyContent: 'center',
|
|
80
|
+
alignItems: 'center'
|
|
81
|
+
}
|
|
82
|
+
}, /*#__PURE__*/React.createElement("h5", {
|
|
83
|
+
className: "headder-five"
|
|
84
|
+
}, "Are you sure you want to delete ", isDeleting, "?"), /*#__PURE__*/React.createElement("button", {
|
|
85
|
+
className: "button submit",
|
|
86
|
+
onClick: handleItemDelete
|
|
87
|
+
}, "Yes"), /*#__PURE__*/React.createElement("button", {
|
|
88
|
+
className: "button submit",
|
|
89
|
+
onClick: () => setVisible(false)
|
|
90
|
+
}, "No")),
|
|
91
|
+
isVisible: visible,
|
|
92
|
+
setIsVisible: setVisible
|
|
93
|
+
});
|
|
94
|
+
const crudEdit = () => /*#__PURE__*/React.createElement(CrudMenuEdit, {
|
|
95
|
+
handleAddClick: handleAddClick,
|
|
96
|
+
listData: menuList,
|
|
97
|
+
handleEditClick: handleEdit,
|
|
98
|
+
changeHandler: handleChange,
|
|
99
|
+
handlePrompt: handleDeletePrompt,
|
|
100
|
+
handleDelete: handleItemDelete,
|
|
101
|
+
handleDeleteClick: handleDeletePrompt,
|
|
102
|
+
addBtnText: 'Add ',
|
|
103
|
+
element: "input",
|
|
104
|
+
renderItems: renderItems
|
|
105
|
+
// selectOptions={languagesArr.map((option) => (
|
|
106
|
+
// <option key={randomId(10)} className='option' value={option.id}>
|
|
107
|
+
// {option.id}
|
|
108
|
+
// </option>
|
|
109
|
+
// ))}
|
|
110
|
+
,
|
|
111
|
+
optionValue: "Select"
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
// render component
|
|
115
|
+
/*#__PURE__*/React.createElement(Component, {
|
|
116
|
+
languagesView: crudView(),
|
|
117
|
+
languagesCrud: languagesCrud()
|
|
118
|
+
});
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.lastIdGen = exports.handleList = exports.handleDelete = exports.createNewItem = exports.addPreviousItems = void 0;
|
|
7
|
+
// crudEditHandlers
|
|
8
|
+
const lastIdGen = (itemsList, previousItems) => {
|
|
9
|
+
if (!itemsList || !itemsList.length && !previousItems.length) return 0;
|
|
10
|
+
const currentItemIds = itemsList.length ? itemsList.map(item => item.id) : [];
|
|
11
|
+
const previousItemsIds = previousItems.length ? previousItems.map(item => item.id) : [];
|
|
12
|
+
return Math.max(...currentItemIds, ...previousItemsIds);
|
|
13
|
+
};
|
|
14
|
+
exports.lastIdGen = lastIdGen;
|
|
15
|
+
const createNewItem = (id, content, editable, checked) => {
|
|
16
|
+
return {
|
|
17
|
+
id: id + 1,
|
|
18
|
+
content: content,
|
|
19
|
+
editable: editable,
|
|
20
|
+
checked: checked
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
exports.createNewItem = createNewItem;
|
|
24
|
+
const addPreviousItems = (removedItem, previousItems) => {
|
|
25
|
+
previousItems.push(removedItem);
|
|
26
|
+
if (previousItems.length > 19) {
|
|
27
|
+
previousItems.shift();
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
exports.addPreviousItems = addPreviousItems;
|
|
31
|
+
const handleDelete = (id, list, setList, addPreviousItems) => {
|
|
32
|
+
if (typeof list[0] === 'number') {
|
|
33
|
+
// for when user data is an array of integers/ids (EX: insurance_list: [2,3,4,13])
|
|
34
|
+
const idx = list.indexOf(id);
|
|
35
|
+
let removedItem = list.splice(idx, 1)[0];
|
|
36
|
+
addPreviousItems(removedItem);
|
|
37
|
+
setList([...list]);
|
|
38
|
+
} else {
|
|
39
|
+
const idx = list.findIndex(i => i.id === id);
|
|
40
|
+
let removedItem = list.splice(idx, 1)[0];
|
|
41
|
+
removedItem.index = idx;
|
|
42
|
+
addPreviousItems(removedItem);
|
|
43
|
+
setList([...list]);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
exports.handleDelete = handleDelete;
|
|
47
|
+
const handleList = (list, setList) => {
|
|
48
|
+
setList([...list]);
|
|
49
|
+
};
|
|
50
|
+
exports.handleList = handleList;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TRANSITION_DURATION_SLOW = exports.TRANSITION_DURATION_FAST = exports.TRANSITION_DURATION = exports.FOCUS_DELAY = exports.EASING = exports.DEBOUNCE_DELAY = exports.ANNOUNCEMENT_CLEANUP_DELAY = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Animation and timing constants for the UI library
|
|
9
|
+
*
|
|
10
|
+
* These constants ensure consistency across components and their stories.
|
|
11
|
+
* When updating these values, make sure to also update corresponding CSS transition durations.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
// Animation transition durations (in milliseconds)
|
|
15
|
+
const TRANSITION_DURATION = exports.TRANSITION_DURATION = 300; // Should match CSS transition duration
|
|
16
|
+
const TRANSITION_DURATION_SLOW = exports.TRANSITION_DURATION_SLOW = 500; // For slower animations
|
|
17
|
+
const TRANSITION_DURATION_FAST = exports.TRANSITION_DURATION_FAST = 150; // For quick animations
|
|
18
|
+
|
|
19
|
+
// Screen reader and accessibility timings
|
|
20
|
+
const ANNOUNCEMENT_CLEANUP_DELAY = exports.ANNOUNCEMENT_CLEANUP_DELAY = 1000; // Time to keep screen reader announcements
|
|
21
|
+
const FOCUS_DELAY = exports.FOCUS_DELAY = 50; // Small delay before focusing elements
|
|
22
|
+
const DEBOUNCE_DELAY = exports.DEBOUNCE_DELAY = 300; // For input debouncing
|
|
23
|
+
|
|
24
|
+
// Animation easing curves (for CSS-in-JS or programmatic animations)
|
|
25
|
+
const EASING = exports.EASING = {
|
|
26
|
+
easeOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
|
27
|
+
easeIn: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
|
28
|
+
easeInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
|
|
29
|
+
easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
|
|
30
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ArrowIcon = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const ArrowIcon = ({
|
|
11
|
+
componentName = 'arrow-icon',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 0 24 24',
|
|
15
|
+
fill = 'currentColor'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.ArrowIcon = ArrowIcon;
|
|
26
|
+
ArrowIcon.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ArrowRight = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
const ArrowRight = ({
|
|
10
|
+
className = '',
|
|
11
|
+
size = 24,
|
|
12
|
+
color = 'currentColor'
|
|
13
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
14
|
+
width: size,
|
|
15
|
+
height: size,
|
|
16
|
+
viewBox: "0 0 24 24",
|
|
17
|
+
fill: "none",
|
|
18
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
19
|
+
className: className
|
|
20
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
21
|
+
d: "M5 12H19",
|
|
22
|
+
stroke: color,
|
|
23
|
+
strokeWidth: "2",
|
|
24
|
+
strokeLinecap: "round",
|
|
25
|
+
strokeLinejoin: "round"
|
|
26
|
+
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
27
|
+
d: "M12 5L19 12L12 19",
|
|
28
|
+
stroke: color,
|
|
29
|
+
strokeWidth: "2",
|
|
30
|
+
strokeLinecap: "round",
|
|
31
|
+
strokeLinejoin: "round"
|
|
32
|
+
}));
|
|
33
|
+
exports.ArrowRight = ArrowRight;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.CheckCircle = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = require("prop-types");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
const CheckCircle = ({
|
|
11
|
+
componentName = 'check-close',
|
|
12
|
+
additionalClassName = '',
|
|
13
|
+
dimensions = 24,
|
|
14
|
+
viewBox = '0 -960 960 960',
|
|
15
|
+
fill = '#adb5bd'
|
|
16
|
+
}) => /*#__PURE__*/_react.default.createElement("svg", {
|
|
17
|
+
className: `icon ${componentName} ${additionalClassName}`,
|
|
18
|
+
width: dimensions,
|
|
19
|
+
height: dimensions,
|
|
20
|
+
viewBox: viewBox,
|
|
21
|
+
fill: fill
|
|
22
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
23
|
+
d: "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
|
|
24
|
+
}));
|
|
25
|
+
exports.CheckCircle = CheckCircle;
|
|
26
|
+
CheckCircle.propTypes = {
|
|
27
|
+
componentName: _propTypes.string,
|
|
28
|
+
additionalClassName: _propTypes.string,
|
|
29
|
+
dimensions: _propTypes.number,
|
|
30
|
+
viewBox: _propTypes.string,
|
|
31
|
+
fill: _propTypes.string
|
|
32
|
+
};
|
|
33
|
+
var _default = exports.default = CheckCircle;
|