@digigov/form 2.0.0-0edebf87 → 2.0.0-2177f152

package/src/inputs/Radio/index.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Conditional } from '@digigov/form/inputs/Radio/__stories__/Conditional';
+import { Default } from '@digigov/form/inputs/Radio/__stories__/Default';
+import { WithDivider } from '@digigov/form/inputs/Radio/__stories__/WithDivider';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All Radio variants', async ({ mount, page }) => {
+  await mount(
+    <div>
+      <TestVariant title="Conditional">
+        <Conditional />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="WithDivider">
+        <WithDivider />
+      </TestVariant>
+    </div>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/inputs/Radio/index.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
-import { Field } from '@digigov/form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { RadioConditional } from '@digigov/react-core/RadioConditional';
-import Hint from '@digigov/react-core/Hint';
-import RadioContainer from '@digigov/react-core/RadioContainer';
-import RadioItem from '@digigov/react-core/RadioItem';
+import {
+  RadioContainer,
+  RadioItem,
+  RadioConditional,
+} from '@digigov/ui/form/RadioContainer';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 
 export interface RadioButtonsGroupProps
   extends Omit<UncontrolledFieldProps, 'extra'> {
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
     dense?: boolean;
   };
+  fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;
 }
 
 export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
@@ -24,12 +27,13 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
   register,
   extra: { options, className },
   disabled,
+  Field,
   ...props
 }) => {
   const currentValue: string | undefined = useWatch({ control, name });
   const { t } = useTranslation();
   return (
-    <RadioContainer className={className} defaultValue={currentValue} id={name}>
+    <RadioContainer className={className} id={name}>
       {options.map(
         ({
           label,
@@ -39,9 +43,10 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
           selected,
           ...option
         }) => (
-          <div key={`${name}.${v}`}>
+          <Base as="div" key={`${name}.${v}`}>
             <RadioItem
               {...register(name)}
+              id={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               {...option}
@@ -49,6 +54,70 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
                 ...props,
                 reset: undefined,
                 required: undefined,
+                error: undefined,
+                'aria-describedby': undefined,
+                type: 'radio',
+              }}
+            >
+              {label && label.primary && (
+                <Base as="span">{t(label.primary) || v}</Base>
+              )}
+              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            </RadioItem>
+            {selected && selected()}
+            {currentValue === v && show && Field && (
+              <RadioConditional>
+                {show.map((fieldName) => (
+                  <Field name={fieldName} key={fieldName} />
+                ))}
+              </RadioConditional>
+            )}
+          </Base>
+        )
+      )}
+    </RadioContainer>
+  );
+};
+export const ControlledRadioButtonsGroup: React.FC<
+  RadioButtonsGroupProps & { onChange: (e: any) => void; value: any }
+> = ({
+  name,
+  extra: { options, className },
+  disabled,
+  onChange,
+  value,
+  Field,
+  ...props
+}) => {
+  const currentValue: string | undefined = value;
+  const { t } = useTranslation();
+  return (
+    <RadioContainer className={className} id={name}>
+      {options.map(
+        ({
+          label,
+          value: v,
+          show,
+          disabled: optionDisabled,
+          selected,
+          ...option
+        }) => (
+          <React.Fragment key={`${name}.${v}`}>
+            <RadioItem
+              onChange={(e) => {
+                console.log(e);
+                onChange(e);
+              }}
+              id={`${name}.${v}`}
+              value={v}
+              checked={currentValue === v}
+              disabled={disabled || optionDisabled}
+              {...option}
+              {...{
+                ...props,
+                reset: undefined,
+                required: undefined,
+                error: undefined,
                 'aria-describedby': undefined,
                 type: 'radio',
               }}
@@ -64,7 +133,7 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
                 ))}
               </RadioConditional>
             )}
-          </div>
+          </React.Fragment>
         )
       )}
     </RadioContainer>

package/src/inputs/Select/Select.stories.js

@@ -4,4 +4,4 @@ export default {
   component: Select,
   displayName: 'Select',
 };
-export * from '@digigov/form/inputs/Select/__stories__/Default';
+export { Default } from '@digigov/form/inputs/Select/__stories__/Default';

package/src/inputs/Select/{index.mdx → doc.mdx}

@@ -10,8 +10,4 @@ The select element represents a control that provides a menu of options.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/Select"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/inputs/Select/__stories__/Default.tsx" />

package/src/inputs/Select/index.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Default } from '@digigov/form/inputs/Select/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All Select variants', async ({ mount, page }) => {
+  await mount(
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/inputs/Select/index.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import SelectContainer from '@digigov/react-core/SelectContainer';
-import SelectOption from '@digigov/react-core/SelectOption';
+import {
+  SelectContainer,
+  SelectOption,
+} from '@digigov/ui/form/SelectContainer';
 
 export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra: {
     className?: string;
-    options: Array<FieldOptionProps>;
+    options: FieldOptionProps[];
   };
 }