@carbon/ibm-products 2.65.0 → 2.66.0

package/es/components/EditTearsheet/EditTearsheet.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useState, useRef, createContext } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -15,20 +15,19 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
 
-var _excluded = ["cancelButtonText", "children", "className", "description", "influencerWidth", "label", "onClose", "open", "submitButtonText", "title", "verticalPosition", "onRequestSubmit", "onFormChange", "sideNavAriaLabel"];
-var componentName = 'EditTearsheet';
-var blockClass = "".concat(pkg.prefix, "--tearsheet-edit");
+const componentName = 'EditTearsheet';
+const blockClass = `${pkg.prefix}--tearsheet-edit`;
 // This is a general context for the forms container
 // containing information about the state of the container
 // and providing some callback methods for forms to use
-var FormContext = /*#__PURE__*/createContext(null);
+const FormContext = /*#__PURE__*/createContext(null);
 
 // This is a context supplied separately to each form in the container
 // to let it know what number it is in the sequence of forms
-var FormNumberContext = /*#__PURE__*/createContext(0);
+const FormNumberContext = /*#__PURE__*/createContext(0);
 
 // Default values for props
-var defaults = {
+const defaults = {
   verticalPosition: 'normal',
   influencerWidth: 'narrow',
   sideNavAriaLabel: 'Side navigation'
@@ -42,63 +41,40 @@ var defaults = {
  * Use Tearsheet with medium to complex edits. See usage guidance for further information.
  * @deprecated
  */
-var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var cancelButtonText = _ref.cancelButtonText,
-    children = _ref.children,
-    className = _ref.className,
-    description = _ref.description,
-    _ref$influencerWidth = _ref.influencerWidth,
-    influencerWidth = _ref$influencerWidth === void 0 ? defaults.influencerWidth : _ref$influencerWidth,
-    label = _ref.label,
-    onClose = _ref.onClose,
-    open = _ref.open,
-    submitButtonText = _ref.submitButtonText,
-    title = _ref.title,
-    _ref$verticalPosition = _ref.verticalPosition,
-    verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
-    onRequestSubmit = _ref.onRequestSubmit,
-    onFormChange = _ref.onFormChange,
-    _ref$sideNavAriaLabel = _ref.sideNavAriaLabel,
-    sideNavAriaLabel = _ref$sideNavAriaLabel === void 0 ? defaults.sideNavAriaLabel : _ref$sideNavAriaLabel,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isSubmitting = _useState2[0],
-    setIsSubmitting = _useState2[1];
-  var handleOnRequestSubmit = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setIsSubmitting(true);
-            _context.prev = 1;
-            _context.next = 4;
-            return onRequestSubmit();
-          case 4:
-            _context.next = 9;
-            break;
-          case 6:
-            _context.prev = 6;
-            _context.t0 = _context["catch"](1);
-            console.warn("".concat(componentName, " submit error: ").concat(_context.t0));
-          case 9:
-            setIsSubmitting(false);
-          case 10:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[1, 6]]);
-    }));
-    return function handleOnRequestSubmit() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var actions = [{
+let EditTearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    cancelButtonText,
+    children,
+    className,
+    description,
+    influencerWidth = defaults.influencerWidth,
+    label,
+    onClose,
+    open,
+    submitButtonText,
+    title,
+    verticalPosition = defaults.verticalPosition,
+    onRequestSubmit,
+    onFormChange,
+    sideNavAriaLabel = defaults.sideNavAriaLabel,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const handleOnRequestSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      await onRequestSubmit();
+    } catch (error) {
+      console.warn(`${componentName} submit error: ${error}`);
+    }
+    setIsSubmitting(false);
+  };
+  const actions = [{
     key: 'edit-action-button-submit',
     label: submitButtonText,
-    onClick: function onClick() {
-      return handleOnRequestSubmit();
-    },
+    onClick: () => handleOnRequestSubmit(),
     loading: isSubmitting,
     kind: 'primary'
   }, {
@@ -107,16 +83,10 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: onClose,
     kind: 'ghost'
   }];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentForm = _useState4[0],
-    setCurrentForm = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    formTitles = _useState6[0],
-    setFormTitles = _useState6[1];
-  var contentRef = useRef(null);
-  var handleCurrentForm = function handleCurrentForm(formIndex) {
+  const [currentForm, setCurrentForm] = useState(0);
+  const [formTitles, setFormTitles] = useState([]);
+  const contentRef = useRef(null);
+  const handleCurrentForm = formIndex => {
     setCurrentForm(formIndex);
     if (onFormChange) {
       onFormChange(formIndex);
@@ -124,59 +94,55 @@ var EditTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   function defaultInfluencer() {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__side-nav-wrapper")
+      className: `${blockClass}__side-nav-wrapper`
     }, /*#__PURE__*/React__default.createElement(SideNav, {
       "aria-label": sideNavAriaLabel,
-      className: "".concat(blockClass, "__side-nav"),
+      className: `${blockClass}__side-nav`,
       expanded: true,
       isFixedNav: false
-    }, /*#__PURE__*/React__default.createElement(SideNavItems, null, formTitles.map(function (title, index) {
+    }, /*#__PURE__*/React__default.createElement(SideNavItems, null, formTitles.map((title, index) => {
       return /*#__PURE__*/React__default.createElement(SideNavMenuItem, {
         key: index,
-        onClick: function onClick() {
-          return handleCurrentForm(index);
-        },
+        onClick: () => handleCurrentForm(index),
         isActive: currentForm === index
       }, title);
     }))));
   }
-  return /*#__PURE__*/React__default.createElement(TearsheetShell, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, getDevtoolsProps(componentName)), prepareProps(rest)), {}, {
-    actions: actions,
-    children: children,
+  return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, getDevtoolsProps(componentName), prepareProps(rest), {
+    actions,
+    children,
     className: cx(blockClass, className),
-    description: description,
+    description,
     influencerPosition: 'left',
-    influencerWidth: influencerWidth,
-    label: label,
-    onClose: onClose,
-    open: open,
+    influencerWidth,
+    label,
+    onClose,
+    open,
     size: 'wide',
-    title: title,
-    verticalPosition: verticalPosition
-  }, rest), {}, {
+    title,
+    verticalPosition
+  }, rest, {
     hasCloseIcon: false,
     influencer: defaultInfluencer(),
-    ref: ref
+    ref
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content"),
+    className: `${blockClass}__content`,
     ref: contentRef,
     role: "main"
   }, /*#__PURE__*/React__default.createElement(Form, null, /*#__PURE__*/React__default.createElement(FormContext.Provider, {
     value: {
-      currentForm: currentForm,
-      setFormTitles: setFormTitles
+      currentForm,
+      setFormTitles
     }
-  }, React__default.Children.map(children, function (child, index) {
-    return /*#__PURE__*/React__default.createElement(FormNumberContext.Provider, {
-      value: index
-    }, child);
-  })))));
+  }, React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.createElement(FormNumberContext.Provider, {
+    value: index
+  }, child))))));
 });
 
 /**@ts-ignore*/
 EditTearsheet.deprecated = {
   level: 'warn',
-  details: "This component is deprecated and will be removed in the next major version."
+  details: `This component is deprecated and will be removed in the next major version.`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/EditTearsheet/EditTearsheetForm.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useContext } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -15,33 +15,39 @@ import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { useRetrieveFormTitles } from '../../global/js/hooks/useRetrieveFormTitles.js';
 
-var _excluded = ["children", "className", "description", "fieldsetLegendText", "hasFieldset", "subtitle", "title"];
-var componentName = 'EditTearsheetForm';
-var blockClass = "".concat(pkg.prefix, "--tearsheet-edit__form");
+const componentName = 'EditTearsheetForm';
+const blockClass = `${pkg.prefix}--tearsheet-edit__form`;
 
 // Default values for props
-var defaults = {
+const defaults = {
   hasFieldset: true
 };
-var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    description = _ref.description,
-    fieldsetLegendText = _ref.fieldsetLegendText,
-    _ref$hasFieldset = _ref.hasFieldset,
-    hasFieldset = _ref$hasFieldset === void 0 ? defaults.hasFieldset : _ref$hasFieldset,
-    subtitle = _ref.subtitle,
-    title = _ref.title,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var formContext = useContext(FormContext);
-  var formNumber = useContext(FormNumberContext);
+let EditTearsheetForm = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    children,
+    className,
+    description,
+    fieldsetLegendText,
+    hasFieldset = defaults.hasFieldset,
+    subtitle,
+    title,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const formContext = useContext(FormContext);
+  const formNumber = useContext(FormNumberContext);
   useRetrieveFormTitles({
-    formContext: formContext,
-    formNumber: formNumber,
-    title: title
+    formContext,
+    formNumber,
+    title
   });
   return formContext ? /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm))),
+    className: cx(blockClass, className, {
+      [`${blockClass}__form--hidden-form`]: formNumber !== formContext?.currentForm,
+      [`${blockClass}__form--visible-form`]: formNumber === formContext?.currentForm
+    }),
     ref: ref
   }), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
     xlg: 12,
@@ -49,17 +55,17 @@ var EditTearsheetForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
     md: 8,
     sm: 4
   }, /*#__PURE__*/React__default.createElement("h4", {
-    className: "".concat(blockClass, "--title")
+    className: `${blockClass}--title`
   }, title), subtitle && /*#__PURE__*/React__default.createElement("h6", {
-    className: "".concat(blockClass, "--subtitle")
+    className: `${blockClass}--subtitle`
   }, subtitle), description && /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "--description")
+    className: `${blockClass}--description`
   }, description)), /*#__PURE__*/React__default.createElement(Column, {
     span: 100
   }, hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
     legendText: fieldsetLegendText,
-    className: "".concat(blockClass, "--fieldset")
-  }, /*#__PURE__*/React__default.createElement(Grid, null, children)) : children))) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a EditTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the EditTearsheet"));
+    className: `${blockClass}--fieldset`
+  }, /*#__PURE__*/React__default.createElement(Grid, null, children)) : children))) : pconsole.warn(`You have tried using a ${componentName} component outside of a EditTearsheet. This is not allowed. ${componentName}s should always be children of the EditTearsheet`);
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -83,8 +89,10 @@ EditTearsheetForm.propTypes = {
    * Otherwise, use CSS to hide/remove this label text.
    */
   /**@ts-ignore */
-  fieldsetLegendText: PropTypes.string.isRequired.if(function (_ref2) {
-    var hasFieldset = _ref2.hasFieldset;
+  fieldsetLegendText: PropTypes.string.isRequired.if(_ref2 => {
+    let {
+      hasFieldset
+    } = _ref2;
     return !!hasFieldset;
   }),
   /**

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -5,21 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["children", "className"];
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--edit-tearsheet-narrow");
-var componentName = 'EditTearsheetNarrow';
+const blockClass = `${pkg.prefix}--edit-tearsheet-narrow`;
+const componentName = 'EditTearsheetNarrow';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -42,10 +40,17 @@ var componentName = 'EditTearsheetNarrow';
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
  * @deprecated
  */
-var EditTearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
+let EditTearsheetNarrow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    children /* TODO: remove if not needed. */,
+    className,
+    /* TODO: add other props for EditTearsheetNarrow, with default values if needed */
+
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -64,7 +69,7 @@ var EditTearsheetNarrow = /*#__PURE__*/React__default.forwardRef(function (_ref,
 /**@ts-ignore*/
 EditTearsheetNarrow.deprecated = {
   level: 'warn',
-  details: "This component is deprecated and will be removed in the next major version."
+  details: `This component is deprecated and will be removed in the next major version.`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/components/EditUpdateCards/EditUpdateCards.d.ts

@@ -6,18 +6,11 @@
  */
 import React, { ReactNode } from 'react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-type ActionIcon = {
-    id: string;
-    icon: CarbonIconType;
-    onKeyDown?(): void;
-    onClick?(): void;
-    iconDescription: string;
-    href?: string;
-};
+import { ActionIcon } from '../Card/Card';
 type PlacementType = 'top' | 'bottom';
 export interface EditUpdateCardsProps {
     /**
-     * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+     * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
      */
     actionIcons?: Array<ActionIcon>;
     /**

package/es/components/EditUpdateCards/EditUpdateCards.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { ProductiveCard } from '../ProductiveCard/ProductiveCard.js';
 import PropTypes from '../../_virtual/index.js';
@@ -13,16 +13,12 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "onPrimaryButtonClick", "onSecondaryButtonClick", "previewChildren", "title", "titleSize", "primaryButtonIcon", "primaryButtonText", "secondaryButtonIcon", "secondaryButtonText"];
-
-// import { children } from 'cheerio/lib/api/traversing';
-
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--edit-update-cards");
-var componentName = 'EditUpdateCards';
+const blockClass = `${pkg.prefix}--edit-update-cards`;
+const componentName = 'EditUpdateCards';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -47,27 +43,31 @@ var componentName = 'EditUpdateCards';
  (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
  @deprecated
  */
-var EditUpdateCards = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var actionIcons = _ref.actionIcons,
-    actionsPlacement = _ref.actionsPlacement,
-    className = _ref.className,
-    description = _ref.description,
-    editChildren = _ref.editChildren,
-    editMode = _ref.editMode,
-    label = _ref.label,
-    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-    previewChildren = _ref.previewChildren,
-    title = _ref.title,
-    titleSize = _ref.titleSize,
-    primaryButtonIcon = _ref.primaryButtonIcon,
-    primaryButtonText = _ref.primaryButtonText,
-    secondaryButtonIcon = _ref.secondaryButtonIcon,
-    secondaryButtonText = _ref.secondaryButtonText,
-    rest = _objectWithoutProperties(_ref, _excluded);
+let EditUpdateCards = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    actionIcons,
+    actionsPlacement,
+    className,
+    description,
+    editChildren,
+    editMode,
+    label,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick,
+    previewChildren,
+    title,
+    titleSize,
+    primaryButtonIcon,
+    primaryButtonText,
+    secondaryButtonIcon,
+    secondaryButtonText,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
   // const [editCardMode, setEditCardMode] = useState(editMode);
 
-  var conditionalProps = {
+  const conditionalProps = {
     onPrimaryButtonClick: onPrimaryButtonClick,
     onSecondaryButtonClick: onSecondaryButtonClick,
     primaryButtonIcon: primaryButtonIcon,
@@ -82,9 +82,14 @@ var EditUpdateCards = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
-    className, // Apply any supplied class names to the main HTML element.
+    className,
+    // Apply any supplied class names to the main HTML element.
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    _defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+      [`${blockClass}__actions-bottom`]: actionsPlacement === 'bottom'
+    }),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(ProductiveCard, _extends({
     actionIcons: actionIcons,
@@ -100,7 +105,7 @@ var EditUpdateCards = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
 /**@ts-ignore*/
 EditUpdateCards.deprecated = {
   level: 'warn',
-  details: "This component is deprecated and will be removed in the next major version."
+  details: `This component is deprecated and will be removed in the next major version.`
 };
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -115,7 +120,7 @@ EditUpdateCards.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 EditUpdateCards.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
    */
   /**@ts-ignore */
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
@@ -124,7 +129,13 @@ EditUpdateCards.propTypes = {
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
     iconDescription: PropTypes.string,
-    href: PropTypes.string
+    /**
+     * @deprecated please use the `link.href` instead
+     */
+    href: PropTypes.string,
+    link: PropTypes.shape({
+      href: PropTypes.string.isRequired
+    })
   })),
   /**
    * Determines if the action icons are on the top or bottom of the card