Fn208/UI kit updates

src/components/common/Badge/index.tsx

@@ -1,7 +1,7 @@
 import './styles.scss';
 
 import clsx from 'clsx';
-import React, { FC, ReactNode } from 'react';
+import React, { FC, HTMLAttributes, ReactNode } from 'react';
 
 import { Icon, IconName } from '~/components/common/Icon';
 import { useCombinedPropsWithKit } from '~/hooks';
@@ -20,22 +20,27 @@ export enum BadgeColor {
   PURPLE = 'purple',
 }
 
-export interface BadgeProps {
+type AllowedDivProps = Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+
+export interface BadgeProps extends AllowedDivProps {
   children: ReactNode;
   color: BadgeColor;
   icon?: IconName;
   filled?: boolean;
 }
 
 export const Badge: FC<BadgeProps> = props => {
-  const { children, color, icon, filled } = useCombinedPropsWithKit({
+  const { children, color, icon, filled, className, style } = useCombinedPropsWithKit({
     name: 'Badge',
     props,
   });
+
   return (
-    <div className={clsx('badge', `badge--${color}`, { 'badge--filled': filled })}>
+    <div className={clsx('badge', `badge--${color}`, { 'badge--filled': filled }, className)}>
       {icon !== undefined && <Icon className="badge__icon" name={icon} size={14} />}
-      <p className="badge__text">{children}</p>
+      <p className="badge__text" style={style}>
+        {children}
+      </p>
     </div>
   );
 };

src/components/form/Checkbox/index.tsx

@@ -1,18 +1,20 @@
 import clsx from 'clsx';
-import React, { useId } from 'react';
+import React, { ReactNode, useId } from 'react';
 
 import { Icon } from '~/components/common/Icon';
 import { useCombinedPropsWithKit } from '~/hooks';
 
 import styles from './styles.module.scss';
 
-export interface CheckboxProps extends React.AllHTMLAttributes<HTMLInputElement> {
-  label?: string;
+export interface CheckboxProps extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'label'> {
+  label?: string | ReactNode | null;
+  borderColor?: string;
+  checkedColor?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { label, className, ...inputProps } = useCombinedPropsWithKit({
+  const { label, className, checkedColor, borderColor, ...inputProps } = useCombinedPropsWithKit({
     name: 'Checkbox',
     props,
   });
@@ -21,18 +23,22 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props
   const checkboxId = `checkbox-${id}`;
 
   return (
-    <label className={clsx(styles['container'], className)} htmlFor={checkboxId}>
+    <label
+      className={clsx(styles['container'], className)}
+      htmlFor={checkboxId}
+      style={{ '--checked-bg-color': checkedColor } as React.CSSProperties}
+    >
       <input
         className={styles['input']}
         id={checkboxId}
         ref={ref}
         type="checkbox"
         {...inputProps}
       />
-      <div className={styles['square']}>
+      <div className={styles['square']} style={{ borderColor }}>
         <Icon className={styles['square__icon']} name="check" size={18} />
       </div>
-      {label && <p className={styles['label']}>{label}</p>}
+      {typeof label === 'string' ? <p className={styles['label']}>{label}</p> : label}
     </label>
   );
 });

src/components/form/RadioInput/index.tsx

@@ -1,19 +1,21 @@
 import './styles.scss';
 
 import clsx from 'clsx';
-import React, { AllHTMLAttributes } from 'react';
+import React, { AllHTMLAttributes, ReactNode } from 'react';
 
 import { useCombinedPropsWithKit } from '~/hooks';
 
-export interface RadioInputProps extends AllHTMLAttributes<HTMLInputElement> {
-  label?: string;
+export interface RadioInputProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'label'> {
+  label?: ReactNode | string;
+  labelClassName?: React.CSSProperties;
 }
 
 export const RadioInput: React.FC<RadioInputProps> = props => {
-  const { checked, label, className, disabled, ...restProps } = useCombinedPropsWithKit({
-    name: 'RadioInput',
-    props,
-  });
+  const { checked, label, labelClassName, className, disabled, ...restProps } =
+    useCombinedPropsWithKit({
+      name: 'RadioInput',
+      props,
+    });
 
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
@@ -26,7 +28,13 @@ export const RadioInput: React.FC<RadioInputProps> = props => {
         {...restProps}
       />
       <div className="radio-input__check-mark" />
-      {label && <div className="radio-input__label-text">{label}</div>}
+      {typeof label === 'string' ? (
+        <div className={clsx('radio-input__label-text')} style={labelClassName}>
+          {label}
+        </div>
+      ) : (
+        label
+      )}
     </label>
   );
 };