documentation-site/components/yard/config/payment-card.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 omit from "just-omit";
import { PaymentCard } from "baseui/payment-card";
import { ADJOINED, SIZE } from "baseui/input";
import { PropTypes } from "react-view";
import type { TConfig } from "../types";
import { theme, inputProps } from "./input";

const PaymentCardConfig: TConfig = {
  componentName: "PaymentCard",
  imports: {
    "baseui/payment-card": { named: ["PaymentCard"] },
  },
  scope: {
    PaymentCard,
    SIZE,
    ADJOINED,
  },
  theme,
  props: {
    value: {
      ...inputProps.value,
      value: "",
    },
    ...omit(inputProps, [
      "type",
      "startEnhancer",
      "endEnhancer",
      "value",
      "placeholder",
    ]),
    placeholder: {
      ...inputProps.placeholder,
      value: "Please enter your credit card number...",
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: "Lets you customize all aspects of the component.",
      custom: {
        names: ["Root", "Input", "InputContainer", "IconWrapper"],
        sharedProps: {
          $isFocused: {
            type: PropTypes.Boolean,
            description: "True when the component is focused.",
          },
          $disabled: "disabled",
          $error: "error",
          $positive: "positive",
          $adjoined: "adjoined",
          $size: "size",
          $required: "required",
        },
      },
    },
  },
};

export default PaymentCardConfig;