documentation-site/components/yard/config/radio.ts

/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import pick from "just-pick";

import { Radio, RadioGroup, ALIGN } from "baseui/radio";
import { PropTypes } from "react-view";
import type { TConfig } from "../types";

import { changeHandlers } from "./common/common";

const RadioGroupConfig: TConfig = {
  componentName: "RadioGroup",
  imports: {
    "baseui/radio": { named: ["RadioGroup"] },
  },
  scope: {
    Radio,
    RadioGroup,
    ALIGN,
  },
  theme: [
    "tickFill",
    "tickFillHover",
    "tickFillActive",
    "tickFillSelected",
    "tickFillSelectedHover",
    "tickFillSelectedHoverActive",
    "tickFillError",
    "tickFillErrorHover",
    "tickFillErrorHoverActive",
    "tickFillErrorSelected",
    "tickFillErrorSelectedHover",
    "tickFillErrorSelectedHoverActive",
    "tickFillDisabled",
    "tickBorder",
    "tickBorderError",
    "tickMarkFill",
    "tickMarkFillError",
    "tickMarkFillDisabled",
  ],
  props: {
    value: {
      value: "2",
      type: PropTypes.String,
      description: "Passed to the input element value attribute",
      stateful: true,
    },
    onChange: {
      value: "e => setValue(e.currentTarget.value)",
      type: PropTypes.Function,
      description: "Handler for change events on trigger element.",
      propHook: {
        what: "e.target.value",
        into: "value",
      },
    },
    children: {
      value: `<Radio value="1">One</Radio>
<Radio
  value="2"
  description="This is a radio description"
>
  Two
</Radio>
<Radio value="3">
  Three
</Radio>`,
      type: PropTypes.ReactNode,
      description: "Radios within the RadioGroup",
      imports: {
        "baseui/radio": { named: ["Radio"] },
      },
    },
    name: {
      value: "number",
      type: PropTypes.String,
      description:
        "String value for the name of RadioGroup, it is used to group buttons. If missed default is random ID string.",
      hidden: false,
    },
    align: {
      value: "ALIGN.vertical",
      type: PropTypes.Enum,
      options: ALIGN,
      description: "How to position radio buttons in the group.",
      imports: {
        "baseui/radio": {
          named: ["ALIGN"],
        },
      },
    },
    disabled: {
      value: false,
      type: PropTypes.Boolean,
      description:
        "Disabled all radio group from being changed. To disable some of radios provide disabled flag in each of them.",
    },
    error: {
      value: false,
      type: PropTypes.Boolean,
      description: "Sets radio group into error state.",
    },
    required: {
      value: false,
      type: PropTypes.Boolean,
      description: "Set if the control is required to be checked.",
      hidden: true,
    },
    autoFocus: {
      value: false,
      type: PropTypes.Boolean,
      description: "Set to be focused (active) on selectedchecked radio.",
      hidden: true,
    },
    containsInteractiveElement: {
      value: false,
      type: PropTypes.Boolean,
      description:
        "Indicates the radio contains an interactive element, and the default label behavior should be prevented for child elements.",
      hidden: true,
    },
    "aria-label": {
      value: undefined,
      type: PropTypes.String,
      description: `Sets aria-label attribute.`,
      hidden: true,
    },
    "aria-labelledby": {
      value: undefined,
      type: PropTypes.String,
      description: `Sets aria-labelledby attribute.`,
      hidden: true,
    },
    ...pick(changeHandlers, [
      "onBlur",
      "onFocus",
      "onMouseLeave",
      "onMouseEnter",
    ]),
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: "Lets you customize all aspects of the component.",
      custom: {
        names: ["Root"],
        sharedProps: {
          $isFocused: {
            type: PropTypes.Boolean,
            description: "True when the component is focused.",
          },
          $isHovered: {
            type: PropTypes.Boolean,
            description: "True when the component is hovered.",
          },
          $isActive: {
            type: PropTypes.Boolean,
            description: "True when the component is active.",
          },
          $error: "error",
          $checked: {
            type: PropTypes.Boolean,
            description: "True when the component is active.",
          },
          $required: "required",
          $disabled: "disabled",
        },
      },
    },
  },
};

export default RadioGroupConfig;