@redneckz/wildless-cms-uni-blocks 0.8.31 → 0.9.0

package/src/ui-kit/Foldable/DefaultFoldButton.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ColorPalette } from '../../model/ContentPageDef';
+import { style } from '../../utils/style';
 import type { IconName } from '../Icon/IconProps';
 import { Img } from '../Img/Img';
 import type { FoldablePartProps } from './FoldablePartProps';
@@ -9,25 +10,30 @@ interface DefaultFoldButtonProps {
   label: string;
   icon: IconName;
   dataTheme?: ColorPalette;
+  disabled?: boolean;
   onClick?: () => void;
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className = '', label, icon, dataTheme = '', onClick }) => {
+  ({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
     const STATE_STYLE =
       'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
     const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
 
     return (
       <button
-        className={[
+        className={style(
           'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
           STATE_STYLE,
           DIMENSIONS_STYLE,
+          disabled
+            ? 'bg-main-divider text-main-disabled cursor-not-allowed hover:bg-main-divider active:bg-main-divider'
+            : '',
           className,
-        ].join(' ')}
-        data-theme={dataTheme}
+        )}
         onClick={onClick}
+        disabled={disabled}
+        data-theme={dataTheme}
       >
         <span className="text-h4 pr-3">{label}</span>
         {icon ? (

package/src/ui-kit/SlideCheckbox/SlideCheckbox.fixture.tsx

@@ -3,7 +3,7 @@ import { SlideCheckbox } from './SlideCheckbox';
 export default {
   primary: (
     <div className="bg-white">
-      <SlideCheckbox checked={true} text={'Checkbox'} />
+      <SlideCheckbox value={true} text={'Checkbox'} />
     </div>
   ),
 };

package/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -1,33 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Text } from '../../ui-kit/Text/Text';
+import { Text } from '../Text/Text';
 
 interface SlideCheckboxProps {
-  checked?: boolean;
+  value?: boolean;
   text?: string;
-  onClick?: () => void;
+  type?: 'checkbox' | 'radio';
+  onChange?: (value: boolean) => void;
 }
-export const SlideCheckbox = JSX<SlideCheckboxProps>(({ checked, text, onClick }) => (
-  <div
-    role="checkbox"
-    aria-checked={checked}
-    className="flex justify-start items-center w-full cursor-pointer mb-4"
-    onClick={() => onClick && onClick()}
-  >
+export const SlideCheckbox = JSX<SlideCheckboxProps>(
+  ({ value = false, text, type = 'checkbox', onChange }) => (
     <div
-      className={`relative duration-300 w-9 h-5 mr-3 rounded rounded-2xl ${
-        checked ? 'bg-primary-main' : 'bg-main-divider'
-      }`}
+      role={type}
+      aria-checked={value}
+      className="flex justify-start items-center w-full cursor-pointer mb-4"
+      onClick={() => onChange && onChange(!value)}
     >
       <div
-        className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded rounded-full ${
-          checked ? 'left-[50%]' : 'left-[5%]'
+        className={`relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl ${
+          value ? 'bg-primary-main' : 'bg-main-divider'
         }`}
-      />
+      >
+        <div
+          className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full ${
+            value ? 'left-[50%]' : 'left-[5%]'
+          }`}
+        />
+      </div>
+      <div>
+        <Text size="text-m" font="font-light" color="text-primary-text">
+          {text}
+        </Text>
+      </div>
     </div>
-    <div>
-      <Text size="text-m" font="font-light" color="text-primary-text">
-        {text}
-      </Text>
-    </div>
-  </div>
-));
+  ),
+);

package/src/ui-kit/SlideCheckboxGroup/SlideCheckboxGroup.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ControlProps } from '../ControlProps';
+import { SlideCheckbox } from '../SlideCheckbox/SlideCheckbox';
+
+type SlideCheckboxGroupItem = {
+  value: string;
+  title: string;
+};
+
+interface SlideCheckboxGroupProps extends ControlProps<string> {
+  multiple: false;
+  items: SlideCheckboxGroupItem[];
+}
+
+interface MultipleSlideCheckboxGroupProps extends ControlProps<string[]> {
+  multiple: true;
+  items: SlideCheckboxGroupItem[];
+}
+
+export const SlideCheckboxGroup = JSX<SlideCheckboxGroupProps | MultipleSlideCheckboxGroupProps>(
+  ({ value, onChange, items = [], multiple }) => {
+    const handleChange = (newValue: string) => {
+      if (multiple) {
+        const hasAlready = value?.includes(newValue);
+        onChange &&
+          onChange(
+            hasAlready ? value?.filter((v) => v !== newValue) : [...(value || []), newValue],
+          );
+      } else {
+        onChange && onChange(value === newValue ? undefined : newValue);
+      }
+    };
+
+    return items.map((item) => (
+      <SlideCheckbox
+        key={item.value}
+        text={item.title}
+        value={[value].flatMap((_) => _).includes(item.value)}
+        onChange={() => handleChange(item.value)}
+        type={multiple ? 'checkbox' : 'radio'}
+      />
+    ));
+  },
+);