PNP Settings

ts/components/CircleCheckbox.tsx

@@ -2,15 +2,24 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import classNames from 'classnames';
 
 import { getClassNamesFor } from '../util/getClassNamesFor';
+import { missingCaseError } from '../util/missingCaseError';
+
+export enum Variant {
+  Normal = 'Normal',
+  Small = 'Small',
+}
 
 export type Props = {
   id?: string;
+  variant?: Variant;
   checked?: boolean;
   disabled?: boolean;
   isRadio?: boolean;
   name?: string;
+  moduleClassName?: string;
   onChange?: (value: boolean) => unknown;
   onClick?: () => unknown;
 };
@@ -24,17 +33,28 @@ export type Props = {
  */
 export function CircleCheckbox({
   id,
+  variant = Variant.Normal,
   checked,
   disabled,
   isRadio,
+  moduleClassName,
   name,
   onChange,
   onClick,
 }: Props): JSX.Element {
-  const getClassName = getClassNamesFor('CircleCheckbox');
+  const getClassName = getClassNamesFor('CircleCheckbox', moduleClassName);
+
+  let variantModifier: string;
+  if (variant === Variant.Normal) {
+    variantModifier = getClassName('__checkbox--normal');
+  } else if (variant === Variant.Small) {
+    variantModifier = getClassName('__checkbox--small');
+  } else {
+    throw missingCaseError(variant);
+  }
 
   return (
-    <div className={getClassName('__checkbox')}>
+    <div className={classNames(getClassName('__checkbox'), variantModifier)}>
       <input
         checked={Boolean(checked)}
         disabled={disabled}