rename Checkbox settings component to CheckboxItem

src/core/modules/components/settings/Checkbox.jsx

@@ -1,38 +0,0 @@
-import React, { memo } from 'react';
-
-import { getModuleByDisplayName, getModule } from '@vizality/webpack';
-
-import AsyncComponent from '../AsyncComponent';
-import { Divider } from '..';
-
-const Checkbox = AsyncComponent.fromDisplayName('Checkbox');
-
-export default memo(props => {
-  // eslint-disable-next-line no-unused-vars
-  const { align, color, disabled, onChange, readOnly, reverse, shape, size, type, value } = props;
-
-  const Flex = getModuleByDisplayName('Flex');
-  const { marginBottom20 } = getModule('marginBottom20');
-
-  return (
-    <Flex className={marginBottom20} direction={Flex.Direction.VERTICAL}>
-      <Checkbox {...props}/>
-      <Divider/>
-    </Flex>
-  );
-});
-
-/**
- * AVAILABLE PROPS
- *
- * align={ 'alignCenter-MrlN6q' }
- * color={ '#7289da' }
- * disabled={ false }
- * onChange={ '' }
- * readOnly={ false }
- * reverse={ false }
- * shape={ 'box-mmYMsp' }
- * size={ 24 }
- * type={ 'inverted' }
- * value={ true }
- */

src/core/modules/components/settings/CheckboxItem.jsx

@@ -0,0 +1,58 @@
+import { joinClassNames } from '@vizality/util/dom';
+import React, { memo } from 'react';
+
+import { Divider, Checkbox } from '..';
+
+export default memo(({ align, color, divider, disabled, onChange, readOnly, reverse, shape, size = '24', type = 'inverted', value, children, className, ...other }) => {
+  return (
+    <>
+      <Checkbox
+        className={joinClassNames('vz-settings-checkbox-item', className)}
+        align={align}
+        color={color}
+        disabled={disabled}
+        onChange={onChange}
+        readOnly={readOnly}
+        reverse={reverse}
+        shape={shape}
+        size={size}
+        type={type}
+        value={value}
+        {...other}
+      >
+        {children}
+      </Checkbox>
+      {divider && (
+        <Divider/>
+      )}
+    </>
+  );
+});
+
+/**
+ * AVAILABLE PROPS
+ *
+ * align={ 'alignCenter-MrlN6q' }
+ * color={ "hsl(227, calc(var(--saturation-factor, 1) * 58.4%), 65.1%)" }
+ * disabled={ false }
+ * onChange={ }
+ * readOnly={ false }
+ * reverse={ false }
+ * shape={ 'box-mmYMsp' }
+ * size={ 24 }
+ * type={ 'inverted' }
+ * value={ true }
+ */
+
+
+//  align: "alignCenter-MrlN6q"
+//  color: "hsl(227, calc(var(--saturation-factor, 1) * 58.4%), 65.1%)"
+//  disabled: false
+//  displayOnly: false
+//  onChange: ƒ ()
+//  readOnly: false
+//  reverse: false
+//  shape: "box-mmYMsp"
+//  size: 24
+//  type: "default"
+//  value: false

src/core/modules/components/settings/index.js

@@ -3,6 +3,7 @@ import { getModuleByDisplayName } from '@vizality/webpack';
 // export { default as PermissionOverrideItem } from './PermissionOverrideItem';
 export { default as ColorPickerInput } from './ColorPickerInput';
 export { default as RegionSelector } from './RegionSelector';
+export { default as CheckboxItem } from './CheckboxItem';
 export { default as SelectInput } from './SelectInput';
 export { default as SliderInput } from './SliderInput';
 export { default as ButtonItem } from './ButtonItem';
@@ -12,7 +13,6 @@ export { default as CopyInput } from './CopyInput';
 export { default as FormTitle } from './FormTitle';
 export { default as TextInput } from './TextInput';
 export { default as Category } from './Category';
-export { default as Checkbox } from './Checkbox';
 export { default as TextArea } from './TextArea';
 export { default as FormItem } from './FormItem';
 
@@ -23,3 +23,9 @@ getModuleByDisplayName('SwitchItem', true, true).then(SwitchItem => {
   this.SwitchItem.Sizes = SwitchItem.Sizes;
   this.SwitchItem.Themes = SwitchItem.Themes;
 });
+
+getModuleByDisplayName('Checkbox', true, true).then(Checkbox => {
+  this.CheckboxItem.Aligns = Checkbox.Aligns;
+  this.CheckboxItem.Shapes = Checkbox.Shapes;
+  this.CheckboxItem.Types = Checkbox.Types;
+});