How to use the react-desc.PropTypes.node function in react-desc

placeholder: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.node,
    ]).description('Placeholder to use when no value is provided.'),
    plain: PropTypes.bool.description(
      `Whether this is a plain input with no border or padding.
Only use this when the containing context provides sufficient affordance`,
    ),
    size: PropTypes.oneOfType([
      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
      PropTypes.string,
    ]).description('The size of the TextInput.'),
    suggestions: PropTypes.arrayOf(
      PropTypes.oneOfType([
        PropTypes.shape({
          label: PropTypes.node,
          value: PropTypes.any,
        }),
        PropTypes.string,
      ]),
    ).description(
      `Suggestions to show. It is recommended to avoid showing too many
suggestions and instead rely on the user to type more.`,
    ),
    value: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]).description('What text to put in the input.'),
  };

  return DocumentedTextInput;
};

PropTypes.oneOf([
        'none',
        'xxsmall',
        'xsmall',
        'small',
        'medium',
        'large',
        'xlarge',
      ]),
      PropTypes.string,
    ])
      .description(
        `The amount of spacing between icon and label in the button.`,
      )
      .defaultValue('small'),
    label: PropTypes.node.description('Label text to place in the button.'),
    onClick: PropTypes.func.description(
      `Click handler. Not setting this property and not specifying a href
causes the Button to be disabled.`,
    ),
    plain: PropTypes.bool
      .description(
        `Whether this is a plain button with no border or pad.
Non plain button will show both pad and border.
The plain button has no border and unless the icon prop exist it has no pad as 
well.`,
      )
      .defaultValue(false),
    primary: PropTypes.bool
      .description(
        `Whether this is a primary button. There should be at most one per page
         or screen.`,

.intrinsicElement('input');

  DocumentedCheckBox.propTypes = {
    checked: PropTypes.bool
      .description('Same as React <input checked="{}">')
      .defaultValue(false),
    disabled: PropTypes.bool
      .description(
        `Same as React <input disabled="{}">. Also adds a hidden input element
      with the same name so form submissions work.`,
      )
      .defaultValue(false),
    id: PropTypes.string.description(
      'The DOM id attribute value to use for the underlying <input> element.',
    ),
    label: PropTypes.node.description(
      'Label text to place next to the control.',
    ),
    name: PropTypes.string.description(
      `The DOM name attribute value to use for the underlying <input> 
      element.`,
    ),
    onChange: PropTypes.func.description(
      `Function that will be called when the user clicks the check box. It
      will be passed a React event object. The current state can be accessed
      via event.target.checked. Same as React <input>.`,
    ),
    reverse: PropTypes.bool
      .description('Whether to show the label in front of the checkbox.')
      .defaultValue(false),
    toggle: PropTypes.bool
      .description('Whether to visualize it as a toggle switch.')

export default (function (CheckBox) {
  var DocumentedCheckBox = describe(CheckBox).availableAt(getAvailableAtBadge('CheckBox')).description('A checkbox toggle control.').usage('import { CheckBox } from \'grommet\';\n');

  DocumentedCheckBox.propTypes = {
    checked: PropTypes.bool.description('Same as React <input checked="{}">'),
    disabled: PropTypes.bool.description('Same as React <input disabled="{}">. Also adds a hidden input element\n      with the same name so form submissions work.'),
    id: PropTypes.string.description('The DOM id attribute value to use for the underlying <input> element.'),
    label: PropTypes.node.description('Label text to place next to the control.'),
    name: PropTypes.string.description('The DOM name attribute value to use for the underlying <input> element.'),
    onChange: PropTypes.func.description('Function that will be called when the user clicks the check box. It\n      will be passed a React event object. The current state can be accessed\n      via event.target.checked. Same as React <input>.'),
    reverse: PropTypes.bool.description('Whether to show the label in front of the checkbox.'),
    toggle: PropTypes.bool.description('Whether to visualize it as a toggle switch.')
  };

  return DocumentedCheckBox;
});

`
    );

  DocumentedElement.propTypes = {
    animation: PropTypes.oneOfType([
      ANIMATION_TYPE,
      ANIMATION_SHAPE,
      PropTypes.arrayOf(
        PropTypes.oneOfType([ANIMATION_TYPE, ANIMATION_SHAPE]),
      ),
    ])
      .description(`Animation effect(s) to use. 'duration' and 'delay' should
        be in milliseconds. 'jiggle' and 'pulse' types are intended for
        small elements, like icons.`),
    backContent: PropTypes.node.description(
      'Content for the back side of the card, if not specified, the card will not be flippable.'
    ),
    background: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.shape({
        color: PropTypes.string,
        dark: PropTypes.bool,
        image: PropTypes.string,
        position: PropTypes.string,
        opacity: PropTypes.oneOfType([
          PropTypes.oneOf(['weak', 'medium', 'strong']),
          PropTypes.bool,
        ]),
      }),
    ]).description(`Either a color identifier to use for the background
        color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark

left: PropTypes.oneOf(['left', 'right'])
    }).description('How to align the drop.').defaultValue({
      top: 'top',
      left: 'left'
    }),
    dropTarget: PropTypes.object.description('Target where the options drop will be aligned to. This should be\n      a React reference. Typically, this is not required as the drop will be\n      aligned to the Select itself by default.'),
    focusIndicator: PropTypes.bool.description('Whether when \'plain\' it should receive a focus outline.'),
    messages: PropTypes.shape({
      multiple: PropTypes.string
    }).description('Custom messages.'),
    multiple: PropTypes.bool.description('Whether to allow multiple options to be selected.'),
    onChange: PropTypes.func.description('Function that will be called when the user selects an option.'),
    onClose: PropTypes.func.description('Function that will be called when the Select drop closes.'),
    onSearch: PropTypes.func.description('Function that will be called when the user types in the search input.\n      If this property is not provided, no search field will be rendered.'),
    options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.object])).description('Options can be either a string or an object. If an object is used, use\n      children callback in order to render anything based on the current item.').isRequired,
    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description('Placeholder text to use when no value is provided.'),
    plain: PropTypes.bool.description('Whether this is a plain Select input with no border or padding.'),
    searchPlaceholder: PropTypes.string.description('Placeholder text to use in the search box when the search input is empty.'),
    selected: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description('Index of the currently selected option. When multiple, the set of\n      options selected. This property is required when multiple.'),
    size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']).description('The size of the select.'),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.object, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]).description('Currently selected value. This can be an array\n      when multiple. Passing an element allows the caller to control how\n      the value is rendered.')
  };

  return DocumentedSelect;
});

export const docCardActions = (Element) => {
  const DocumentedElement = describe(Element)
    .description('Actions container, aligned at bottom of the Card. All properties of Box apply.')
    .usage(
      `$ npm install grommet-controls\n
    import { CardActions } from 'grommet-controls/components/Card';\n
    
      
        <button>
      
    
`
    );

  DocumentedElement.propTypes = {
    children: PropTypes.node.description(
      'Content of card actions - usually Button or Anchor elements.'
    ).isRequired,
  };

  return DocumentedElement;
};
</button>

`import { Tabs, Tab } from 'grommet';

  ...
  ...
`,
    )
    .intrinsicElement('div');

  DocumentedTabs.propTypes = {
    ...genericProps,
    activeIndex: PropTypes.number.description(
      `Active tab index. If specified, Tabs will be a controlled component.
This means that future tab changes will not work unless you subscribe to
onActive function and update activeIndex accordingly.`,
    ),
    children: PropTypes.node.description('Array of Tab.').isRequired,
    flex: PropTypes.oneOfType([
      PropTypes.oneOf(['grow', 'shrink']),
      PropTypes.bool,
    ]).description('Whether flex-grow and/or flex-shrink is true.'),
    justify: PropTypes.oneOf(['start', 'center', 'end'])
      .description('How to align the tabs along the main axis.')
      .defaultValue('center'),
    messages: PropTypes.shape({
      tabContents: PropTypes.string,
    })
      .description(
        'Custom messages for Tabs. Used for accessibility by screen readers.',
      )
      .defaultValue({
        tabContents: 'Tab Contents',
      }),

export default (function (RadioButton) {
  var DocumentedRadioButton = describe(RadioButton).availableAt(getAvailableAtBadge('RadioButton')).description('A radio button control.').usage('import { RadioButton } from \'grommet\';\n');

  DocumentedRadioButton.propTypes = {
    checked: PropTypes.bool.description('Same as React <input checked="{}">'),
    disabled: PropTypes.bool.description('Same as React <input disabled="{}">. Also adds a hidden input element\nwith the same name so form submissions work.'),
    id: PropTypes.string.description('The DOM id attribute value to use for the underlying <input> element.'),
    label: PropTypes.node.description('Label text to place next to the control.'),
    name: PropTypes.string.description('The DOM name attribute value to use for the underlying <input> element.').isRequired,
    onChange: PropTypes.func.description('Function that will be called when the user clicks the radio button. It\n      will be passed a React event object. The current state can be accessed\n      via event.target.checked. Same as React <input>.')
  };

  return DocumentedRadioButton;
});

`Target where the drop will be aligned to. This should be
      a React reference. Typically, this is not required as the drop will be
      aligned to the Menu itself by default.`,
    ),
    dropProps: PropTypes.object.description('Any valid Drop prop.'),
    justifyContent: PropTypes.oneOf([
      'start',
      'center',
      'end',
      'between',
      'around',
      'stretch',
    ])
      .description('How to align the contents along the row axis.')
      .defaultValue('start'),
    icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]).description(
      'Indicates the icon shown as a control to open it.',
    ),
    items: PropTypes.arrayOf(PropTypes.object).description(
      `Menu items to be placed inside the drop down.
The object values can be any Button prop, for example: label and onClick.`,
    ).isRequired,
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
      'Indicates the label shown as a control to open it.',
    ),
    messages: PropTypes.shape({
      closeMenu: PropTypes.string,
      openMenu: PropTypes.string,
    })
      .description('Custom messages. Used for accessibility by screen readers.')
      .defaultValue({ openMenu: 'Open Menu', closeMenu: 'Close Menu' }),
    size: PropTypes.oneOfType([