@carbon/ibm-products 1.54.2 → 1.55.0

package/lib/components/Guidebanner/GuidebannerElement.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidebannerElement = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["button", "className", "description", "title"];
+// 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(_settings.pkg.prefix, "--guidebanner__element");
+var componentName = 'GuidebannerElement';
+
+/**
+ * The GuidebannerElement is a required child component of the Guidebanner,
+ * and acts as a container for a CarouselItem.
+ */
+var GuidebannerElement = function GuidebannerElement(_ref) {
+  var button = _ref.button,
+    className = _ref.className,
+    description = _ref.description,
+    title = _ref.title,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className)
+  }, (0, _devtools.getDevtoolsProps)(componentName)), title && /*#__PURE__*/_react.default.createElement("h2", {
+    className: "".concat(blockClass, "-title")
+  }, title), description && /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "-content")
+  }, description), button && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "-buttons")
+  }, button));
+};
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.GuidebannerElement = GuidebannerElement;
+GuidebannerElement.propTypes = {
+  /**
+   * An optional button can be rendered below the description.
+   * This can be a link, button, Coachmark button, etc.
+   */
+  button: _propTypes.default.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The description of the element.
+   */
+
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+  /**
+   * The title of the element.
+   */
+  title: _propTypes.default.string
+};

package/lib/components/Guidebanner/GuidebannerElementButton.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidebannerElementButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _carbonComponentsReact = require("carbon-components-react");
+var _iconsReact = require("@carbon/icons-react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "type"];
+// 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(_settings.pkg.prefix, "--guidebanner__element-button");
+var componentName = 'GuidebannerElementButton';
+
+/**
+ * One of two buttons styled specifically for the GuidebannerElement.
+ */
+var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    type = _ref.type,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  if (type === 'primary') {
+    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+      className: (0, _classnames.default)(blockClass, className),
+      iconDescription: 'Crossroads',
+      kind: "tertiary",
+      renderIcon: _iconsReact.Crossroads16,
+      role: "button",
+      size: "md"
+    }, (0, _devtools.getDevtoolsProps)(componentName)), children);
+  }
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    kind: "ghost",
+    role: "button",
+    size: "md"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), children);
+};
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.GuidebannerElementButton = GuidebannerElementButton;
+GuidebannerElementButton.propTypes = {
+  /**
+   * Provide the contents of the GuidebannerElementButton.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * If type is "primary", then return a tertiary button with the "crossroads" icon,
+   * else return a ghost button.
+   */
+  type: _propTypes.default.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/components/Guidebanner/GuidebannerElementLink.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidebannerElementLink = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _carbonComponentsReact = require("carbon-components-react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+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(_settings.pkg.prefix, "--guidebanner__element-link");
+var componentName = 'GuidebannerElementLink';
+
+/**
+ * A link styled specifically for the GuidebannerElement.
+ */
+var GuidebannerElementLink = function GuidebannerElementLink(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    kind: "ghost",
+    role: "link",
+    size: "md"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), children);
+};
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.GuidebannerElementLink = GuidebannerElementLink;
+GuidebannerElementLink.propTypes = {
+  /**
+   * Provide the contents of the GuidebannerElementLink.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+};

package/lib/components/Guidebanner/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Guidebanner", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.Guidebanner;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElement", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElement.GuidebannerElement;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementButton", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElementButton.GuidebannerElementButton;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementLink", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElementLink.GuidebannerElementLink;
+  }
+});
+var _Guidebanner = require("./Guidebanner");
+var _GuidebannerElement = require("./GuidebannerElement");
+var _GuidebannerElementButton = require("./GuidebannerElementButton");
+var _GuidebannerElementLink = require("./GuidebannerElementLink");

package/lib/components/InlineTip/InlineTip.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineTip = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _iconsReact = require("@carbon/icons-react");
+var _carbonComponentsReact = require("carbon-components-react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("./utils");
+var _SteppedAnimatedMedia = require("../SteppedAnimatedMedia");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "action", "title", "media"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// 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(_settings.pkg.prefix, "--inline-tip");
+var componentName = 'InlineTip';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Default values for props
+var defaults = {
+  closeIconDescription: 'Close',
+  collapsible: false,
+  collapseButtonLabel: 'Read less',
+  expandButtonLabel: 'Read more',
+  narrow: false,
+  onClick: function onClick() {},
+  onClose: function onClose() {}
+};
+
+/**
+ * TODO: A description of the component.
+ */
+var InlineTip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
+    _ref$collapseButtonLa = _ref.collapseButtonLabel,
+    collapseButtonLabel = _ref$collapseButtonLa === void 0 ? defaults.collapseButtonLabel : _ref$collapseButtonLa,
+    _ref$expandButtonLabe = _ref.expandButtonLabel,
+    expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
+    _ref$narrow = _ref.narrow,
+    narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
+    onClick = _ref.onClick,
+    onClose = _ref.onClose,
+    tertiaryButtonLabel = _ref.tertiaryButtonLabel,
+    action = _ref.action,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
+    media = _ref.media,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(collapsible),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  var previewText = (0, _react.useMemo)(function () {
+    return (0, _utils.getComponentText)(_react.default.Children.toArray(children));
+  }, [children]);
+  var childrenToRender = children;
+  if (!media && collapsible && isCollapsed) {
+    childrenToRender = /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(blockClass, "__preview-text")
+    }, previewText);
+  }
+
+  // If `collapsible` is changed after initial render...
+  (0, _react.useEffect)(function () {
+    setIsCollapsed(collapsible);
+  }, [collapsible]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null], [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], [media ? "".concat(blockClass, "__has-media") : null]),
+    ref: ref,
+    role: "complementary"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    size: "lg",
+    renderIcon: _iconsReact.Close16,
+    iconDescription: closeIconDescription,
+    hasIconOnly: true,
+    className: "".concat(blockClass, "__close-icon"),
+    onClick: onClose
+  }), (!media && narrow || !narrow) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__icon-idea"),
+    tabIndex: -1
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Idea20, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/_react.default.createElement("h6", {
+    className: "".concat(blockClass, "__title")
+  }, title), /*#__PURE__*/_react.default.createElement("section", {
+    className: "".concat(blockClass, "__body")
+  }, childrenToRender, action && (!collapsible || collapsible && !isCollapsed) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__secondary-btn")
+  }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/_react.default.createElement("footer", {
+    className: "".concat(blockClass, "__footer")
+  }, collapsible && !media && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    className: "".concat(blockClass, "__toggle-btn"),
+    kind: "ghost",
+    size: "md",
+    onClick: function onClick() {
+      setIsCollapsed(function (prevState) {
+        return !prevState;
+      });
+    }
+  }, isCollapsed ? expandButtonLabel : collapseButtonLabel), tertiaryButtonLabel && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    className: "".concat(blockClass, "__close-btn"),
+    size: "md",
+    onClick: onClick,
+    kind: "tertiary",
+    renderIcon: _iconsReact.Crossroads16
+  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, media.render()) : /*#__PURE__*/_react.default.createElement(_SteppedAnimatedMedia.SteppedAnimatedMedia, {
+    className: "".concat(blockClass, "__media"),
+    filePaths: media.filePaths
+  })));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.InlineTip = InlineTip;
+exports.InlineTip = InlineTip = _settings.pkg.checkComponentEnabled(InlineTip, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InlineTip.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+InlineTip.propTypes = {
+  /**
+   * Optional "call to action" ghost button or link that can appear
+   * directly below the content. This component comes with pre-styled
+   * elements available to use: `InlineTipLink` and `InlineTipButton`.
+   */
+  action: _propTypes.default.node,
+  /**
+   * Provide the contents of the InlineTip.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: _propTypes.default.string,
+  /**
+   * The label for the collapse button.
+   * This button is not visible if `media` is specified.
+   */
+  collapseButtonLabel: _propTypes.default.string,
+  /**
+   * If set to `true`, it will truncate the body text to
+   * one line and expose an expand/collapse button toggle.
+   *
+   * This feature is disabled if `media` is specified.
+   */
+  collapsible: _propTypes.default.bool,
+  /**
+   * The label for the expand button.
+   * This button is not visible if `media` is specified.
+   */
+  expandButtonLabel: _propTypes.default.string,
+  /**
+   * The object describing an image in one of two shapes.
+   * - If a single media element is required, use `{render}`.
+   * - If a stepped animation is required, use `{filePaths}`.
+   *
+   * Enabling `media` disables the `collapsible` feature.
+   */
+  media: _propTypes.default.oneOfType([_propTypes.default.shape({
+    render: _propTypes.default.func
+  }), _propTypes.default.shape({
+    filePaths: _propTypes.default.string
+  })]),
+  /**
+   * Set to `true` to arrange the information in a format
+   * that is easier to read in a limited space.
+   */
+  narrow: _propTypes.default.bool,
+  /**
+   * Function to call when the tertiary button is clicked.
+   */
+  onClick: _propTypes.default.func,
+  /**
+   * Function to call when the InlineTip is closed via the "X" button.
+   */
+  onClose: _propTypes.default.func,
+  /**
+   * Defining the label will show a the tertiary button with the crossroads icon.
+   * You will still need to define the `onClose` method to trigger a callback.
+   */
+  tertiaryButtonLabel: _propTypes.default.string,
+  /**
+   * The title of the InlineTip.
+   */
+  title: _propTypes.default.string.isRequired
+};

package/lib/components/InlineTip/InlineTipButton.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineTipButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _carbonComponentsReact = require("carbon-components-react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+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(_settings.pkg.prefix, "--inline-tip__button");
+var componentName = 'InlineTipButton';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+var InlineTipButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName), {
+    size: "md",
+    kind: "ghost"
+  }), children);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.InlineTipButton = InlineTipButton;
+exports.InlineTipButton = InlineTipButton = _settings.pkg.checkComponentEnabled(InlineTipButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InlineTipButton.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+InlineTipButton.propTypes = {
+  /**
+   * Provide the contents of the InlineTipButton.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/components/InlineTip/InlineTipLink.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineTipLink = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _iconsReact = require("@carbon/icons-react");
+var _carbonComponentsReact = require("carbon-components-react");
+var _devtools = require("../../global/js/utils/devtools");
+var _settings = require("../../settings");
+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(_settings.pkg.prefix, "--inline-tip__link");
+var componentName = 'InlineTipLink';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+var InlineTipLink = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName), {
+    renderIcon: _iconsReact.Launch16
+  }), children);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.InlineTipLink = InlineTipLink;
+exports.InlineTipLink = InlineTipLink = _settings.pkg.checkComponentEnabled(InlineTipLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InlineTipLink.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+InlineTipLink.propTypes = {
+  /**
+   * Provide the contents of the InlineTipLink.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/components/InlineTip/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InlineTip", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTip.InlineTip;
+  }
+});
+Object.defineProperty(exports, "InlineTipButton", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTipButton.InlineTipButton;
+  }
+});
+Object.defineProperty(exports, "InlineTipLink", {
+  enumerable: true,
+  get: function get() {
+    return _InlineTipLink.InlineTipLink;
+  }
+});
+var _InlineTip = require("./InlineTip");
+var _InlineTipButton = require("./InlineTipButton");
+var _InlineTipLink = require("./InlineTipLink");