PNP Settings

ts/components/CircleCheckbox.stories.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 
 import type { Props } from './CircleCheckbox';
-import { CircleCheckbox } from './CircleCheckbox';
+import { CircleCheckbox, Variant } from './CircleCheckbox';
 
 const createProps = (): Props => ({
   checked: false,
@@ -28,3 +28,53 @@ export function Checked(): JSX.Element {
 export function Disabled(): JSX.Element {
   return <CircleCheckbox {...createProps()} disabled />;
 }
+
+export function SmallNormal(): JSX.Element {
+  return <CircleCheckbox variant={Variant.Small} {...createProps()} />;
+}
+
+export function SmallChecked(): JSX.Element {
+  return <CircleCheckbox variant={Variant.Small} {...createProps()} checked />;
+}
+
+export function SmallDisabled(): JSX.Element {
+  return <CircleCheckbox variant={Variant.Small} {...createProps()} disabled />;
+}
+
+export function RadioNormal(): JSX.Element {
+  return <CircleCheckbox isRadio {...createProps()} />;
+}
+
+export function RadioChecked(): JSX.Element {
+  return <CircleCheckbox isRadio {...createProps()} checked />;
+}
+
+export function RadioDisabled(): JSX.Element {
+  return <CircleCheckbox isRadio {...createProps()} disabled />;
+}
+
+export function SmallRadioNormal(): JSX.Element {
+  return <CircleCheckbox variant={Variant.Small} isRadio {...createProps()} />;
+}
+
+export function SmallRadioChecked(): JSX.Element {
+  return (
+    <CircleCheckbox
+      variant={Variant.Small}
+      isRadio
+      {...createProps()}
+      checked
+    />
+  );
+}
+
+export function SmallRadioDisabled(): JSX.Element {
+  return (
+    <CircleCheckbox
+      variant={Variant.Small}
+      isRadio
+      {...createProps()}
+      disabled
+    />
+  );
+}