@workday/canvas-kit-preview-react 9.1.0-473-next.0 → 9.1.0-477-next.0

package/radio/lib/StyledRadioButton.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import {
+  styled,
+  StyledType,
+  focusRing,
+  mouseFocusBehavior,
+  createComponent,
+  ExtractProps,
+  Themeable,
+} from '@workday/canvas-kit-react/common';
+import {colors, inputColors, spaceNumbers, borderRadius} from '@workday/canvas-kit-react/tokens';
+
+import {Box, Flex} from '@workday/canvas-kit-react/layout';
+
+const radioWidth = 18;
+const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
+const radioHeight = 18;
+
+export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'>, Themeable {
+  variant?: 'inverse' | undefined;
+}
+
+const StyledRadioInput = styled(Box.as('input'))<StyledRadioButtonProps & StyledType>(
+  {
+    '&:focus, &:active': {
+      outline: 'transparent',
+    },
+  },
+  ({
+    disabled,
+    variant,
+    theme: {
+      canvas: {
+        palette: {
+          primary: themePrimary,
+          common: {focusOutline: themeFocusOutline},
+        },
+      },
+    },
+  }) => ({
+    cursor: !disabled ? 'pointer' : undefined,
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
+    height: '18px',
+    width: '18px',
+
+    // Circle element styles the radio as checked or unchecked
+    '+ .cnvs-radio-check': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      backgroundColor: disabled ? inputColors.disabled.background : colors.frenchVanilla100,
+      borderRadius: '999px',
+      boxSizing: 'border-box',
+      border: `1px solid`,
+      borderColor: disabled
+        ? inputColors.disabled.border
+        : variant === 'inverse'
+        ? colors.soap300
+        : inputColors.border,
+      height: '18px',
+      width: '18px',
+      justifyContent: 'center',
+      pointerEvents: 'none',
+      position: 'absolute',
+      transition: 'border 200ms ease, background 200ms',
+      opacity: disabled && variant === 'inverse' ? '.4' : '1',
+    },
+
+    '&:hover + .cnvs-radio-check': {
+      borderColor: disabled
+        ? inputColors.disabled.border
+        : variant === 'inverse'
+        ? colors.soap300
+        : colors.licorice500,
+    },
+
+    '&:focus + .cnvs-radio-check': {
+      borderColor: disabled
+        ? inputColors.disabled.border
+        : variant === 'inverse'
+        ? colors.soap300
+        : colors.blueberry400,
+    },
+
+    '&:checked + .cnvs-radio-check': {
+      backgroundColor: variant === 'inverse' ? themePrimary.main : themePrimary.contrast, // inner circle color
+      border: `5px solid`, // this creates the inner circle
+      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main, // outer circle color
+    },
+
+    '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check': {
+      outline: 'transparent',
+
+      ...focusRing({
+        width: variant === 'inverse' ? 2 : 1,
+        separation: 0,
+        animate: false,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : colors.frenchVanilla100,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+      }),
+    },
+
+    '&:focus:checked + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check': {
+      outline: 'transparent',
+      ...focusRing({
+        width: 2,
+        separation: 2,
+        animate: false,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : colors.frenchVanilla100,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+      }),
+    },
+
+    ...mouseFocusBehavior({
+      '&:focus + .cnvs-radio-check, &:focus:hover + .cnvs-radio-check, &:focus:active + .cnvs-radio-check, &:focus:hover:checked + .cnvs-radio-check, &:focus:active:checked + .cnvs-radio-check': {
+        ...focusRing({
+          width: 0,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        }),
+      },
+    }),
+  })
+);
+
+const RadioInputWrapper = styled(Flex)<Pick<StyledRadioButtonProps, 'disabled' | 'variant'>>(
+  {
+    // Hover Ripple element
+    '::before': {
+      content: "''",
+      borderRadius: borderRadius.circle,
+      height: radioHeight,
+      transition: 'box-shadow 150ms ease-out',
+      width: radioWidth,
+      pointerEvents: 'none',
+    },
+  },
+  ({variant, disabled}) => ({
+    '::before': {
+      opacity: variant === 'inverse' ? '0.4' : '1',
+    },
+    '&:hover:before': {
+      boxShadow: !disabled ? `0 0 0 ${rippleRadius}px ${colors.soap200}` : undefined,
+    },
+  })
+);
+
+export interface StyledRadioButtonProps extends ExtractProps<typeof Box, 'input'> {
+  variant?: 'inverse' | undefined;
+}
+
+/**
+ * Use `StyledRadioButton` when you want a styled radio button on its own without using `RadioGroup`.
+ * You will need to handle behavior and accessibility.
+ */
+export const StyledRadioButton = createComponent('input')({
+  displayName: 'Radio',
+  Component: ({...elemProps}: StyledRadioButtonProps, ref, Element) => {
+    return (
+      <RadioInputWrapper
+        height="18px"
+        width="18px"
+        flex="0 0 auto"
+        {...elemProps} // This ensures our visual testing stories work properly
+      >
+        <StyledRadioInput
+          borderRadius="circle"
+          position="absolute"
+          margin="zero"
+          as={Element}
+          type="radio"
+          ref={ref}
+          {...elemProps}
+        />
+        <span className="cnvs-radio-check"></span>
+      </RadioInputWrapper>
+    );
+  },
+});

package/radio/lib/hooks/useRadioModel.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export const useRadioModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.
+     * The value of this attribute needs to match the value passed to `hintId` on the `FormField`.
+     *
+     * ```tsx
+     * <FormField
+     *    error={FormField.ErrorType.Alert}
+     *    hintId="hint-alert"
+     *    hintText="Deep dish is an extra $2.99"
+     *    label="Choose Your Pizza Crust"
+     *    useFieldset={true}
+     *  >
+     *    <RadioGroup
+     *      name="crust"
+     *      onChange={handleChange}
+     *      initialValue={value}
+     *      aria-describedby="hint-alert"
+     *    >
+     *      <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
+     *      <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
+     *    </RadioGroup>
+     * </FormField>
+     * ```
+     */
+    'aria-describedby': undefined as string | undefined,
+    /**
+     * The common `name` passed to all Radio button children of the RadioGroup. This enables you to avoid specifying the `name` for each child.
+     */
+    name: '',
+    /**
+     * The selected value of the RadioGroup. Providing this prop will cause the model be in a controlled state
+     */
+    value: undefined as string | number | undefined,
+    /**
+     * `onChange` handler. Any `onChange` passed to children will be overwritten by this event so that there is only one per group.
+     */
+    onChange(event: React.ChangeEvent<HTMLInputElement>) {
+      return;
+    },
+  },
+})(config => {
+  const inputRef = React.useRef<HTMLInputElement>();
+  const state = {
+    value: config.value,
+    name: config.name,
+    'aria-describedby': config['aria-describedby'],
+    inputRef,
+  };
+  const events = {};
+
+  return {
+    onChange: config.onChange,
+    state,
+    events,
+  };
+});

package/radio/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/radio",
+  "module": "../dist/es6/radio",
+  "sideEffects": false,
+  "types": "../dist/es6/radio"
+}