Merge pull request #15 from holaplex/anshul/radiobuttongroup

add radiobuttongroup component to form
holaplex · Apr 19, 2023 · 8c6a4ee · 8c6a4ee
2 parents 291eb90 + cfc44ba
commit 8c6a4ee
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 26 deletions.
diff --git a/packages/@holaplexui-playground/pages/form.tsx b/packages/@holaplexui-playground/pages/form.tsx
@@ -1,4 +1,4 @@
-import { Form, Icon } from '@holaplex/ui-library-react';
+import { Form, Icon, Placement } from '@holaplex/ui-library-react';
 import clsx from 'clsx';
 import { watch } from 'fs';
 import { useCallback, useState } from 'react';
@@ -207,12 +207,22 @@ export default function App() {
             )}
           />
         </Form.Label>
-
-        <Form.Checkbox
-          id='subscribe'
-          label='Subscribe newsletter'
+        <Form.Label
+          name='Subscribe newsletter'
+          placement={Placement.Right}
           className='mt-5 text-xs'
-        />
+        >
+          <Form.Checkbox id='subscribe' />
+        </Form.Label>
+
+        <Form.RadioGroup className='mt-5'>
+          <Form.Label name='Apple' placement={Placement.Right}>
+            <Form.RadioGroup.Radio value='apple' name='fruits' />
+          </Form.Label>
+          <Form.Label name='Mango' placement={Placement.Right}>
+            <Form.RadioGroup.Radio value='Mango' name='fruits' />
+          </Form.Label>
+        </Form.RadioGroup>
       </Form>
     </div>
   );

diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
@@ -32,7 +32,7 @@ a {
 }
 
 .form-label {
-  @apply flex flex-col gap-1;
+  @apply gap-1;
 }
 
 .form-label-text {
@@ -140,3 +140,7 @@ a {
 .dragdrop-preview-image {
   @apply w-full h-48;
 }
+
+.form-radio-group {
+  @apply flex flex-col gap-2;
+}
diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [

diff --git a/packages/@holaplexui-react/src/components/Form.tsx b/packages/@holaplexui-react/src/components/Form.tsx
@@ -9,7 +9,7 @@ import {
   useState,
   Fragment,
 } from 'react';
-import { Listbox } from '@headlessui/react';
+import { Listbox, RadioGroup } from '@headlessui/react';
 import { FieldError } from 'react-hook-form';
 import { Icon } from './Icon';
 import { DropzoneInputProps, DropzoneRootProps } from 'react-dropzone';
@@ -21,21 +21,43 @@ export function Form({
   return <form {...props}>{children}</form>;
 }
 
+export enum Placement {
+  Right,
+  Left,
+  Top,
+  Bottom,
+}
+
 interface FormLabelProps
   extends DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
   name: string;
+  placement?: Placement;
   asideComponent?: JSX.Element;
 }
 
 function FormLabel({
   name,
+  placement = Placement.Top,
   asideComponent,
   className,
   children,
   ...props
 }: FormLabelProps): JSX.Element {
   return (
-    <label className={clsx('form-label', className)} {...props}>
+    <label
+      className={clsx(
+        'flex',
+        {
+          'flex-col': placement === Placement.Top,
+          'flex-col-reverse': placement === Placement.Bottom,
+          'flex-row-reverse items-center': placement === Placement.Right,
+          'flex-row items-center': placement === Placement.Left,
+        },
+        'form-label',
+        className
+      )}
+      {...props}
+    >
       <div className="flex w-full justify-between items-center">
         <span className="form-label-text">{name}</span>
         {asideComponent}
@@ -214,7 +236,8 @@ function FormSelectButton({
       )}
       <div
         className={clsx(
-          'absolute top-1/2 right-0 transform -translate-y-1/2 form-select-button-dropdown'
+          'absolute top-1/2 right-0 transform -translate-y-1/2 stroke-black',
+          'form-select-button-dropdown'
         )}
       >
         {dropdown}
@@ -277,31 +300,52 @@ FormSelect.Option = FormSelectOption;
 
 interface FormCheckboxProps
   extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  label?: string | JSX.Element;
   className?: string;
 }
 
 const FormCheckbox = forwardRef(function FormCheckbox(
-  { label, className, ...props }: FormCheckboxProps,
+  { className, ...props }: FormCheckboxProps,
   ref
 ) {
   return (
-    <div className={clsx('flex gap-2 items-center', className)}>
-      <input
-        {...props}
-        ref={ref as LegacyRef<HTMLInputElement> | undefined}
-        type="checkbox"
-        className={clsx('form-checkbox')}
-      />
-      <label htmlFor={props.id} className="form-checkbox-label">
-        {label}
-      </label>
-    </div>
+    <input
+      {...props}
+      ref={ref as LegacyRef<HTMLInputElement> | undefined}
+      type="checkbox"
+      className={clsx('form-checkbox', className)}
+    />
   );
 });
 
 Form.Checkbox = FormCheckbox;
 
+interface FormRadioGroupProps {
+  children: JSX.Element[];
+  className?: string;
+}
+
+function FormRadioGroup({ children, className }: FormRadioGroupProps) {
+  return <div className={clsx('form-radio-group', className)}>{children}</div>;
+}
+Form.RadioGroup = FormRadioGroup;
+
+interface FormRadioProps
+  extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  className?: string;
+}
+
+const FormRadio = forwardRef(function FormRadio({ className, ...props }: FormRadioProps, ref) {
+  return (
+    <input
+      {...props}
+      ref={ref as LegacyRef<HTMLInputElement> | undefined}
+      type="radio"
+      className={clsx('form-radio', className)}
+    />
+  );
+});
+FormRadioGroup.Radio = FormRadio;
+
 interface DragDropProps {
   getInputProps: <T extends DropzoneInputProps>(props?: T | undefined) => T;
   getRootProps: <T extends DropzoneRootProps>(props?: T | undefined) => T;

diff --git a/packages/@holaplexui-react/src/components/Icon.tsx b/packages/@holaplexui-react/src/components/Icon.tsx
@@ -321,7 +321,7 @@ interface ChevronDownIconProps {
 }
 
 function ChevronDownIcon({
-  className = 'text-black',
+  className = 'stroke-inherit',
   width = 8,
   height = 4,
 }: ChevronDownIconProps) {
@@ -336,7 +336,6 @@ function ChevronDownIcon({
     >
       <path
         d="M1.3335 0.667969L4.00016 3.33464L6.66683 0.667969"
-        stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
       />