@carbon/ibm-products 1.1.0 → 1.2.0

package/es/components/Card/Card.js

@@ -87,7 +87,8 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           Icon = _ref3.icon,
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
-          onKeyDown = _ref3.onKeyDown;
+          onKeyDown = _ref3.onKeyDown,
+          href = _ref3.href;
 
       if (productive) {
         return /*#__PURE__*/React.createElement(Button, {
@@ -97,10 +98,22 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           onClick: onClick,
           size: actionsPlacement === 'top' ? 'sm' : 'field',
           iconDescription: iconDescription,
-          kind: "ghost"
+          kind: "ghost",
+          href: href
         });
       }
 
+      if (href) {
+        return /*#__PURE__*/React.createElement("a", {
+          key: id,
+          className: "".concat(blockClass, "__icon"),
+          href: href,
+          onClick: onClick
+        }, /*#__PURE__*/React.createElement(Icon, {
+          "aria-label": iconDescription
+        }));
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         key: id,
         className: "".concat(blockClass, "__icon"),
@@ -195,7 +208,8 @@ Card.propTypes = {
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
-    iconDescription: PropTypes.string
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
   })),
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
   children: PropTypes.node,
@@ -219,7 +233,7 @@ Card.propTypes = {
   primaryButtonHref: PropTypes.string,
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
-  primaryButtonText: PropTypes.string,
+  primaryButtonText: PropTypes.node,
   productive: PropTypes.bool,
   secondaryButtonHref: PropTypes.string,
   secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -22,14 +22,15 @@ export var ExpressiveCard = /*#__PURE__*/forwardRef(function (props, ref) {
 ExpressiveCard = pkg.checkComponentEnabled(ExpressiveCard, componentName);
 ExpressiveCard.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
    */
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
-    iconDescription: PropTypes.string
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
   })),
 
   /**

package/es/components/ProductiveCard/ProductiveCard.js

@@ -30,7 +30,8 @@ ProductiveCard.propTypes = {
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
-    iconDescription: PropTypes.string
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
   })),
 
   /**
@@ -96,7 +97,7 @@ ProductiveCard.propTypes = {
   /**
    * The text that's displayed in the primary button
    */
-  primaryButtonText: PropTypes.string,
+  primaryButtonText: PropTypes.node,
 
   /**
    * Title that's displayed at the top of the card

package/es/components/index.js

@@ -14,7 +14,6 @@ export { CreateSidePanel } from './CreateSidePanel';
 export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from './CreateTearsheet';
 export { CreateTearsheetNarrow } from './CreateTearsheetNarrow';
 export { EmptyState, ErrorEmptyState, NoDataEmptyState, NoTagsEmptyState, NotFoundEmptyState, NotificationsEmptyState, UnauthorizedEmptyState } from './EmptyStates';
-export { ExampleComponent } from './ExampleComponent';
 export { ExportModal } from './ExportModal';
 export { ExpressiveCard } from './ExpressiveCard';
 export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';

package/es/global/js/package-settings.js

@@ -52,7 +52,6 @@ var defaults = {
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
     // other public components not yet reviewed and released:
-    ExampleComponent: false,
     LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,

package/es/global/js/utils/story-helper.js

@@ -61,7 +61,7 @@ export var prepareStory = function prepareStory(template, options) {
 export var CodesandboxLink = function CodesandboxLink(_ref) {
   var exampleDirectory = _ref.exampleDirectory;
   return /*#__PURE__*/React.createElement("a", {
-    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/cloud-cognitive/".concat(exampleDirectory)
+    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/carbon-for-ibm-products/".concat(exampleDirectory)
   }, /*#__PURE__*/React.createElement("img", {
     alt: "Edit on CodeSandbox",
     src: "https://codesandbox.io/static/img/play-codesandbox.svg"

package/lib/components/Card/Card.js

@@ -104,7 +104,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           Icon = _ref3.icon,
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
-          onKeyDown = _ref3.onKeyDown;
+          onKeyDown = _ref3.onKeyDown,
+          href = _ref3.href;
 
       if (productive) {
         return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
@@ -114,10 +115,22 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           onClick: onClick,
           size: actionsPlacement === 'top' ? 'sm' : 'field',
           iconDescription: iconDescription,
-          kind: "ghost"
+          kind: "ghost",
+          href: href
         });
       }
 
+      if (href) {
+        return /*#__PURE__*/_react.default.createElement("a", {
+          key: id,
+          className: "".concat(blockClass, "__icon"),
+          href: href,
+          onClick: onClick
+        }, /*#__PURE__*/_react.default.createElement(Icon, {
+          "aria-label": iconDescription
+        }));
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         key: id,
         className: "".concat(blockClass, "__icon"),
@@ -213,7 +226,8 @@ Card.propTypes = {
     icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     onKeyDown: _propTypes.default.func,
     onClick: _propTypes.default.func,
-    iconDescription: _propTypes.default.string
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
   })),
   actionsPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   children: _propTypes.default.node,
@@ -237,7 +251,7 @@ Card.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
-  primaryButtonText: _propTypes.default.string,
+  primaryButtonText: _propTypes.default.node,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -45,14 +45,15 @@ exports.ExpressiveCard = ExpressiveCard;
 exports.ExpressiveCard = ExpressiveCard = _settings.pkg.checkComponentEnabled(ExpressiveCard, componentName);
 ExpressiveCard.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
    */
   actionIcons: _propTypes.default.arrayOf(_propTypes.default.shape({
     id: _propTypes.default.string,
     icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     onKeyDown: _propTypes.default.func,
     onClick: _propTypes.default.func,
-    iconDescription: _propTypes.default.string
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
   })),
 
   /**

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -53,7 +53,8 @@ ProductiveCard.propTypes = {
     icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     onKeyDown: _propTypes.default.func,
     onClick: _propTypes.default.func,
-    iconDescription: _propTypes.default.string
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
   })),
 
   /**
@@ -119,7 +120,7 @@ ProductiveCard.propTypes = {
   /**
    * The text that's displayed in the primary button
    */
-  primaryButtonText: _propTypes.default.string,
+  primaryButtonText: _propTypes.default.node,
 
   /**
    * Title that's displayed at the top of the card

package/lib/components/index.js

@@ -99,12 +99,6 @@ Object.defineProperty(exports, "ErrorEmptyState", {
     return _EmptyStates.ErrorEmptyState;
   }
 });
-Object.defineProperty(exports, "ExampleComponent", {
-  enumerable: true,
-  get: function get() {
-    return _ExampleComponent.ExampleComponent;
-  }
-});
 Object.defineProperty(exports, "ExportModal", {
   enumerable: true,
   get: function get() {
@@ -300,8 +294,6 @@ var _CreateTearsheetNarrow = require("./CreateTearsheetNarrow");
 
 var _EmptyStates = require("./EmptyStates");
 
-var _ExampleComponent = require("./ExampleComponent");
-
 var _ExportModal = require("./ExportModal");
 
 var _ExpressiveCard = require("./ExpressiveCard");

package/lib/global/js/package-settings.js

@@ -56,7 +56,6 @@ var defaults = {
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
     // other public components not yet reviewed and released:
-    ExampleComponent: false,
     LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,

package/lib/global/js/utils/story-helper.js

@@ -84,7 +84,7 @@ exports.prepareStory = prepareStory;
 var CodesandboxLink = function CodesandboxLink(_ref) {
   var exampleDirectory = _ref.exampleDirectory;
   return /*#__PURE__*/_react.default.createElement("a", {
-    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/cloud-cognitive/".concat(exampleDirectory)
+    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/carbon-for-ibm-products/".concat(exampleDirectory)
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: "Edit on CodeSandbox",
     src: "https://codesandbox.io/static/img/play-codesandbox.svg"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -86,5 +86,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "8f28bbdcb86f4ef6dcb75058bde4a8c340ce8048"
+  "gitHead": "2d73283440932eacac0047223791c6590599d0db"
 }

package/scss/components/Card/_card.scss

@@ -102,6 +102,7 @@
   }
 
   .#{$block-class}__icon {
+    color: inherit;
     cursor: pointer;
   }
 

package/scss/components/ProductiveCard/_productive-card.scss

@@ -36,6 +36,10 @@
       align-items: center;
       justify-content: space-between;
       border-top: 1px solid $ui-03;
+
+      .#{$carbon-prefix}--btn svg {
+        margin-left: $spacing-03;
+      }
     }
 
     .#{$block-class}__footer-no-button {

package/scss/components/Tearsheet/_tearsheet.scss

@@ -225,6 +225,12 @@
       flex: 0 0 257px; // influencer width 256px plus 1px border
       border-right: 1px solid $ui-03;
       overflow-y: auto;
+
+      // the normal 80% content width inside modals should not apply to influencer content
+      // apply the class again for higher specificity
+      &.#{$block-class}__influencer p {
+        padding-right: 0;
+      }
     }
 
     .#{$block-class}__influencer--wide {

package/scss/components/_index.scss

@@ -21,7 +21,6 @@
 @import './CreateTearsheet/index';
 @import './CreateTearsheetNarrow/index';
 @import './EmptyStates/index';
-@import './ExampleComponent/index';
 @import './ExportModal/index';
 @import './ExpressiveCard/index';
 @import './HTTPErrors/index';