@marigold/components 0.3.0 → 0.3.1

package/src/Radio/Radio.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Radio } from './Radio';
 import { ThemeProvider } from '@marigold/system';
 
@@ -8,6 +8,9 @@ const theme = {
     none: 0,
     small: 2,
   },
+  colors: {
+    disabled: 'gray',
+  },
   radio: {
     __default: {
       m: 'small',
@@ -60,14 +63,14 @@ test('supports required prop and renders required icon', () => {
 });
 
 test('supports default type', () => {
-  render(<Radio id="radio" title="radio" />);
+  render(<Radio id="radio" title="radio" label="test" />);
 
   const radio = screen.getByTitle(/radio/);
   expect(radio.getAttribute('type')).toEqual('radio');
 });
 
 test('renders <input> element', () => {
-  render(<Radio id="radio" title="radio" />);
+  render(<Radio id="radio" title="radio" label="test" />);
 
   const radio = screen.getByTitle(/radio/);
   expect(radio instanceof HTMLInputElement).toBeTruthy();
@@ -82,6 +85,8 @@ test('supports disabled prop', () => {
 
   const radio = screen.getByTitle(/radio/);
   expect(radio).toHaveAttribute('disabled');
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: gray`);
 });
 
 test('supports error and errorMessage prop', () => {
@@ -98,22 +103,52 @@ test('supports error and errorMessage prop', () => {
 test('supports checked radio', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" onChange={() => {}} checked />
+      <Radio id="test" title="radio" label="test" onChange={() => {}} checked />
     </ThemeProvider>
   );
 
   const radio = screen.getByTitle(/radio/);
-  expect(radio).toBeDefined();
+  expect(radio).toHaveAttribute('checked');
 });
 
 test('supports checked and disabled radio', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" onChange={() => {}} checked disabled />
+      <Radio
+        id="test"
+        title="radio"
+        label="test"
+        onChange={() => {}}
+        checked
+        disabled
+      />
     </ThemeProvider>
   );
 
   const radio = screen.getByTitle(/radio/);
-  expect(radio).toBeDefined();
+  expect(radio).toHaveAttribute('checked');
   expect(radio).toHaveAttribute('disabled');
 });
+
+test('correctly handles interaction', () => {
+  const click = jest.fn();
+  const change = jest.fn();
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio
+        id="test"
+        title="radio"
+        label="Test"
+        onClick={click}
+        onChange={change}
+      />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  fireEvent.click(radio);
+
+  expect(click).toHaveBeenCalledTimes(1);
+  expect(change).toHaveBeenCalledTimes(1);
+});

package/src/Radio/Radio.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Exclamation } from '@marigold/icons';
+import { useFocusRing } from '@react-aria/focus';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
 
+import { RadioIcon, RadioIconProps } from './RadioIcon';
 import { Box } from '../Box';
 import { Label } from '../Label';
 import { ValidationMessage } from '../ValidationMessage';
 
-import { RadioChecked, RadioUnchecked } from './RadioIcons';
-
 // Theme Extension
 // ---------------
 export interface RadioThemeExtension<Value> {
@@ -16,78 +17,38 @@ export interface RadioThemeExtension<Value> {
   };
 }
 
-// Radio Icon
+// Radio Input
 // ---------------
-type RadioIconProps = {
-  variant?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  children?: never;
-};
+type RadioInputProps = RadioIconProps & ComponentProps<'input'>;
+
+const RadioInput: React.FC<RadioInputProps> = ({ error, ...props }) => {
+  const { focusProps } = useFocusRing();
 
-const RadioIcon: React.FC<RadioIconProps> = ({
-  variant,
-  checked,
-  disabled,
-  error,
-}) => {
-  if (checked) {
-    return (
-      <Box as={RadioChecked} variant={`radio.${variant}`} disabled={disabled} />
-    );
-  }
   return (
-    <Box
-      as={RadioUnchecked}
-      variant={`radio.${variant}`}
-      disabled={disabled}
-      error={error}
-    />
+    <Box pr="xsmall">
+      <VisuallyHidden>
+        <input
+          type="radio"
+          disabled={props.disabled}
+          {...focusProps}
+          {...props}
+        />
+      </VisuallyHidden>
+      <RadioIcon
+        variant={props.variant}
+        disabled={props.disabled}
+        checked={props.checked}
+        error={error}
+      />
+    </Box>
   );
 };
 
-// Radio Input
-// ---------------
-type RadioInputProps = {
-  variant?: string;
-  error?: boolean;
-} & ComponentProps<'input'>;
-
-const RadioInput: React.FC<RadioInputProps> = ({
-  className,
-  variant = '',
-  error,
-  ...props
-}) => (
-  <Box display="inline-block" className={className}>
-    <Box
-      as="input"
-      type="radio"
-      css={{
-        position: 'absolute',
-        opacity: 0,
-        zIndex: -1,
-        width: 1,
-        height: 1,
-        overflow: 'hidden',
-      }}
-      {...props}
-    />
-    <RadioIcon
-      checked={props.checked}
-      variant={variant}
-      disabled={props.disabled}
-      error={error}
-    />
-  </Box>
-);
-
 // Radio
 // ---------------
 export type RadioProps = {
   id: string;
-  label?: string;
+  label: string;
   required?: boolean;
   labelVariant?: string;
   error?: boolean;
@@ -101,28 +62,27 @@ export const Radio: React.FC<RadioProps> = ({
   error,
   errorMessage,
   ...props
-}) => {
-  if (label) {
-    return (
-      <>
-        <Label
-          htmlFor={props.id}
-          required={required}
-          variant={labelVariant}
-          color={props.disabled ? 'disabled' : 'text'}
-        >
-          <Box as={RadioInput} pr="8px" error={error} {...props} />
-          {label}
-        </Label>
-        {error && errorMessage && (
-          <ValidationMessage>
-            <Exclamation size={16} />
-            {errorMessage}
-          </ValidationMessage>
-        )}
-      </>
-    );
-  }
-
-  return <RadioInput {...props} />;
-};
+}) => (
+  <>
+    <Box
+      as={Label}
+      htmlFor={props.id}
+      required={required}
+      variant={`label.${labelVariant}`}
+      css={
+        props.disabled
+          ? { color: 'disabled', ':hover': { cursor: 'not-allowed' } }
+          : { color: 'text', ':hover': { cursor: 'pointer' } }
+      }
+    >
+      <Box as={RadioInput} error={error} {...props} />
+      {label}
+    </Box>
+    {error && errorMessage && (
+      <ValidationMessage>
+        <Exclamation size={16} />
+        {errorMessage}
+      </ValidationMessage>
+    )}
+  </>
+);

package/src/Radio/RadioIcon.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { conditional, State, SVG } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// Radio Icon
+// ---------------
+export type RadioIconProps = {
+  variant?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
+};
+
+export const RadioIcon: React.FC<RadioIconProps> = ({
+  variant = '',
+  checked = false,
+  disabled = false,
+  error = false,
+}) => {
+  const conditionalStates: State = disabled
+    ? {
+        disabled: disabled,
+      }
+    : {
+        checked: checked,
+        error: error,
+      };
+
+  return (
+    <SVG
+      width="16"
+      height="32"
+      viewBox="0 0 16 32"
+      fill="none"
+      aria-hidden="true"
+    >
+      <Box
+        variant={conditional(`radio.${variant}`, conditionalStates)}
+        as="circle"
+        cx="8"
+        cy="16"
+        r="7.5"
+      />
+      {checked && <circle fill="white" cx="8" cy="16" r="3" />}
+    </SVG>
+  );
+};

package/dist/Radio/RadioIcons.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare const RadioChecked: ({ disabled, ...props }: {
-    [x: string]: any;
-    disabled?: boolean | undefined;
-}) => JSX.Element;
-export declare const RadioUnchecked: ({ disabled, error, ...props }: {
-    [x: string]: any;
-    disabled?: boolean | undefined;
-    error?: boolean | undefined;
-}) => JSX.Element;

package/src/Checkbox/Checkbox.stories.mdx

@@ -1,97 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Checkbox } from './Checkbox';
-import { useState } from 'react';
-
-<Meta
-  title="Components/Checkbox"
-  parameters={{
-    actions: {
-      handles: ['click'],
-    },
-  }}
-  argTypes={{
-    id: {
-      control: {
-        type: 'text',
-      },
-      type: { required: true },
-      description: 'Unique ID',
-    },
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Checkbox variant',
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
-    labelVariant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Checkbox label variant',
-      table: {
-        defaultValue: {
-          summary: 'inline',
-        },
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'Label',
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Require',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    error: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Error',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-      description: 'Error Message',
-    },
-  }}
-/>
-
-# Checkbox
-
-export const Template = ({ onChange, checked, ...args }) => {
-  const [isChecked, setChecked] = useState(false);
-  return (
-    <Checkbox
-      onChange={() => setChecked(!isChecked)}
-      checked={isChecked}
-      label="Checkbox Label"
-      {...args}
-    />
-  );
-};
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Radio/RadioIcons.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { SVG } from '@marigold/system';
-
-import { Box } from '../Box';
-
-export const RadioChecked = ({ disabled = false, ...props }) => (
-  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
-    <Box
-      as="circle"
-      cx="8"
-      cy="16"
-      r="7.5"
-      variant={disabled ? 'radio.checked.disabled' : 'radio.checked'}
-    />
-    <Box as="circle" cx="8" cy="16" r="3" variant="radio.checked.circle" />
-  </SVG>
-);
-
-export const RadioUnchecked = ({
-  disabled = false,
-  error = false,
-  ...props
-}) => (
-  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
-    <Box
-      as="circle"
-      cx="8"
-      cy="16"
-      r="7.5"
-      variant={
-        disabled
-          ? 'radio.unchecked.disabled'
-          : error
-          ? 'radio.unchecked.error'
-          : 'radio.unchecked'
-      }
-    />
-  </SVG>
-);