@carbon/ibm-products 1.54.2 → 1.55.0

package/es/components/Datagrid/useOnRowClick.js

@@ -6,6 +6,7 @@
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 
+import { pkg, carbon } from '../../settings';
 var useOnRowClick = function useOnRowClick(hooks) {
   var useInstance = function useInstance(rowInstance) {
     var onRowClick = rowInstance.onRowClick;
@@ -15,13 +16,28 @@ var useOnRowClick = function useOnRowClick(hooks) {
         instance = datagridState.instance;
       var id = row.id,
         toggleRowSelected = row.toggleRowSelected;
+      var withSelectRows = instance.withSelectRows,
+        tableId = instance.tableId;
       var onClick = function onClick(event) {
         if (!isFetching && onRowClick) {
           onRowClick(row, event);
-          instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
-            return toggleRow.toggleRowSelected(false);
-          });
-          toggleRowSelected(id, true);
+          // We do not want to change the list of selected rows if using the useSelectedRows hook, otherwise clicking on an entire row will mark the row as checked
+
+          // Remove selected class from all other clickable rows as only one clickable row can be selected at a time
+          var clickableSelectedRows = document.querySelectorAll("#".concat(tableId, ".").concat(pkg.prefix, "--datagrid .").concat(carbon.prefix, "--data-table--selected:not(.").concat(pkg.prefix, "--datagrid__active-row)"));
+          if (clickableSelectedRows.length) {
+            Array.from(clickableSelectedRows).forEach(function (row) {
+              row.classList.remove("".concat(carbon.prefix, "--data-table--selected"));
+            });
+          }
+          var closestRow = event.target.closest(".".concat(pkg.prefix, "--datagrid__carbon-row"));
+          closestRow.classList.add("".concat(carbon.prefix, "--data-table--selected"));
+          if (!withSelectRows) {
+            instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
+              return toggleRow.toggleRowSelected(false);
+            });
+            toggleRowSelected(id, true);
+          }
         }
       };
       var onKeyDown = function onKeyDown(event) {

package/es/components/Datagrid/useSortableColumns.js

@@ -20,11 +20,30 @@ var ordering = {
   DESC: 'DESC',
   NONE: 'NONE'
 };
+var getAriaSortValue = function getAriaSortValue(col, _ref) {
+  var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
+    descendingSortableLabelText = _ref.descendingSortableLabelText,
+    defaultSortableLabelText = _ref.defaultSortableLabelText;
+  var isSorted = col.isSorted,
+    isSortedDesc = col.isSortedDesc;
+  if (!isSorted) {
+    return defaultSortableLabelText || 'none';
+  }
+  if (isSorted && !isSortedDesc) {
+    return ascendingSortableLabelText || 'ascending';
+  }
+  if (isSorted && isSortedDesc) {
+    return descendingSortableLabelText || 'descending';
+  }
+};
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
     var _instance$customizeCo;
-    var instance = _ref.instance;
-    var onSort = instance.onSort;
+    var instance = _ref2.instance;
+    var onSort = instance.onSort,
+      ascendingSortableLabelText = instance.ascendingSortableLabelText,
+      descendingSortableLabelText = instance.descendingSortableLabelText,
+      defaultSortableLabelText = instance.defaultSortableLabelText;
     var onSortClick = function onSortClick(column) {
       var key = column.id;
       var sortDesc = column.isSortedDesc;
@@ -69,6 +88,11 @@ var useSortableColumns = function useSortableColumns(hooks) {
       var Header = function Header(headerProp) {
         var _cx;
         return column.disableSortBy === true ? column.Header : /*#__PURE__*/React.createElement(Button, {
+          "aria-sort": getAriaSortValue(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column, {
+            ascendingSortableLabelText: ascendingSortableLabelText,
+            descendingSortableLabelText: descendingSortableLabelText,
+            defaultSortableLabelText: defaultSortableLabelText
+          }),
           onClick: function onClick() {
             return onSortClick(headerProp === null || headerProp === void 0 ? void 0 : headerProp.column);
           },

package/es/components/Datagrid/utils/DatagridActions.js

@@ -6,17 +6,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useLayoutEffect, useMemo, useContext, useState } from 'react';
-import { Button, DataTable, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalFooter, ModalHeader, Dropdown } from 'carbon-components-react';
 import { Add16, ChevronDown16, Download16, Filter16, Restart16 } from '@carbon/icons-react';
+import { Button, ComposedModal, DataTable, Dropdown, ModalBody, ModalFooter, ModalHeader, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { pkg } from '../../../settings';
-import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
-import { FilterContext } from '../Datagrid/addons/Filtering';
+import { useFilterContext } from '../Datagrid/addons/Filtering/hooks';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridActions = function DatagridActions(datagridState) {
-  var _useContext = useContext(FilterContext),
-    setPanelOpen = _useContext.setPanelOpen;
+  var _useFilterContext = useFilterContext(),
+    setPanelOpen = _useFilterContext.setPanelOpen;
   var selectedFlatRows = datagridState.selectedFlatRows,
     setGlobalFilter = datagridState.setGlobalFilter,
     CustomizeColumnsButton = datagridState.CustomizeColumnsButton,

package/es/components/Datagrid/utils/getArgTypes.js

@@ -50,6 +50,10 @@ export var ARG_TYPES = {
     control: 'select',
     options: ['error', 'noData']
   },
+  isFetching: {
+    control: 'radio',
+    options: [true, false]
+  },
   useDenseHeader: {
     control: {
       type: 'radio'

package/es/components/EditSidePanel/EditSidePanel.js

@@ -24,6 +24,7 @@ import { pkg /*, carbon */ } from '../../settings';
 import { Form } from 'carbon-components-react';
 import { SidePanel } from '../SidePanel';
 import '../../global/js/utils/props-helper';
+import uuidv4 from '../../global/js/utils/uuidv4';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--edit-side-panel");
@@ -75,6 +76,7 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClick: onRequestClose,
     kind: 'secondary'
   }];
+  var formTitleId = uuidv4();
   return /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
     open: open,
     ref: ref,
@@ -92,11 +94,13 @@ export var EditSidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside: true,
     actions: actions
   }), formTitle && /*#__PURE__*/React.createElement("h3", {
-    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
+    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text"),
+    id: formTitleId
   }, formTitle), formDescription && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
   }, formDescription), /*#__PURE__*/React.createElement(Form, {
-    className: "".concat(blockClass, "__form")
+    className: "".concat(blockClass, "__form"),
+    "aria-labelledby": formTitleId
   }, children));
 });
 
@@ -131,7 +135,7 @@ EditSidePanel.propTypes = {
   /**
    * Specifies a required field that provides a title for a form
    */
-  formTitle: PropTypes.node,
+  formTitle: PropTypes.node.isRequired,
   /**
    * Specifies an optional handler which is called when the CreateSidePanel
    * is closed.

package/es/components/FilterSummary/FilterSummary.js

@@ -19,13 +19,16 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$clearFilters = _ref.clearFilters,
     clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
     _ref$filters = _ref.filters,
-    filters = _ref$filters === void 0 ? [] : _ref$filters;
+    filters = _ref$filters === void 0 ? [] : _ref$filters,
+    _ref$renderLabel = _ref.renderLabel,
+    renderLabel = _ref$renderLabel === void 0 ? null : _ref$renderLabel;
   var tagFilters = filters.map(function (_ref2) {
+    var _renderLabel;
     var key = _ref2.key,
       value = _ref2.value;
     return {
       type: 'gray',
-      label: "".concat(key, ": ").concat(value)
+      label: (_renderLabel = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel(key, value)) !== null && _renderLabel !== void 0 ? _renderLabel : "".concat(key, ": ").concat(value)
     };
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -49,6 +52,7 @@ FilterSummary.propTypes = {
   className: PropTypes.string,
   clearFilters: PropTypes.func.isRequired,
   clearFiltersText: PropTypes.string,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  renderLabel: PropTypes.func
 };
 export default FilterSummary;

package/es/components/Guidebanner/Guidebanner.js

@@ -0,0 +1,229 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "collapsible", "onClose", "closeIconDescription", "collapseButtonLabel", "expandButtonLabel", "nextIconDescription", "previousIconDescription", "title"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React, { useRef, useState } from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { blue90, purple70 } from '@carbon/colors';
+import { CaretLeft16, CaretRight16, Close20, Idea20 } from '@carbon/icons-react';
+import { Button } from 'carbon-components-react';
+import { Carousel } from '../Carousel';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// 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, "--guidebanner");
+var componentName = 'Guidebanner';
+var defaults = {
+  collapsible: false,
+  // Labels
+  closeIconDescription: 'Close',
+  collapseButtonLabel: 'Read less',
+  expandButtonLabel: 'Read more',
+  nextIconDescription: 'Next',
+  previousIconDescription: 'Back'
+};
+
+/**
+ * The guide banner sits at the top of a page, or page-level tab,
+ * to introduce foundational concepts related to the page's content.
+ */
+export var Guidebanner = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
+    onClose = _ref.onClose,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    _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$nextIconDescript = _ref.nextIconDescription,
+    nextIconDescription = _ref$nextIconDescript === void 0 ? defaults.nextIconDescription : _ref$nextIconDescript,
+    _ref$previousIconDesc = _ref.previousIconDescription,
+    previousIconDescription = _ref$previousIconDesc === void 0 ? defaults.previousIconDescription : _ref$previousIconDesc,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var scrollRef = useRef();
+  var toggleRef = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollPosition = _useState2[0],
+    setScrollPosition = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showNavigation = _useState4[0],
+    setShowNavigation = _useState4[1];
+  var _useState5 = useState(collapsible ? true : false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isCollapsed = _useState6[0],
+    setIsCollapsed = _useState6[1];
+  var handleScrollableChange = function handleScrollableChange(value) {
+    setShowNavigation(value);
+  };
+  var handleClickToggle = function handleClickToggle() {
+    setScrollPosition(0);
+    scrollRef.current.scrollToView(0);
+    setIsCollapsed(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    "aria-expanded": !isCollapsed,
+    className: cx(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null]),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(Idea20, {
+    className: "".concat(blockClass, "__icon-idea")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__title")
+  }, title), /*#__PURE__*/React.createElement(Carousel, {
+    className: "".concat(blockClass, "__carousel")
+    // These colors are to match the Carousel's faded edges
+    // against the Guidebanner's gradient background.
+    ,
+    fadedEdgeColor: {
+      left: blue90,
+      right: purple70
+    },
+    ref: scrollRef,
+    scrollableChange: handleScrollableChange,
+    scrollTune: -450
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: cx([collapsible || showNavigation ? "".concat(blockClass, "__navigation") : null])
+  }, collapsible && /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "md",
+    className: "".concat(blockClass, "__toggle-button"),
+    onClick: handleClickToggle,
+    ref: toggleRef
+  }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "md",
+    hasIconOnly: true,
+    disabled: scrollPosition === 0,
+    renderIcon: CaretLeft16,
+    className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null]),
+    tooltipPosition: "top",
+    iconDescription: previousIconDescription,
+    onClick: function onClick() {
+      scrollRef.current.scrollPrev().then(function (scrollPercentage) {
+        return setScrollPosition(scrollPercentage);
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "md",
+    hasIconOnly: true,
+    disabled: scrollPosition === 1,
+    renderIcon: CaretRight16,
+    className: cx("".concat(blockClass, "__next-button"), [scrollPosition === 1 ? "".concat(blockClass, "__next-button--disabled") : null]),
+    tooltipPosition: "top",
+    tooltipAlignment: "end",
+    iconDescription: nextIconDescription,
+    onClick: function onClick() {
+      scrollRef.current.scrollNext().then(function (scrollPercentage) {
+        return setScrollPosition(scrollPercentage);
+      });
+    }
+  }))), onClose && /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(blockClass, "__close-button"),
+    hasIconOnly: true,
+    iconDescription: closeIconDescription,
+    kind: "ghost",
+    onClick: onClose,
+    renderIcon: Close20,
+    size: "md",
+    tooltipPosition: "bottom",
+    tooltipAlignment: "end"
+  }));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+Guidebanner = pkg.checkComponentEnabled(Guidebanner, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+Guidebanner.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.
+Guidebanner.propTypes = {
+  /**
+   * Provide the contents of the Guidebanner.
+   * One or more GuidebannerElement components are required.
+   */
+  children: function children(props, propName) {
+    var error;
+    var prop = props[propName];
+    if (!prop) {
+      error = new Error('`Guidebanner` requires one or more children of type `GuidebannerElement`.');
+    }
+    React.Children.forEach(prop, function (child) {
+      if (child.type.name !== 'GuidebannerElement') {
+        var _child$type;
+        // If not GuidebannerElement, then show:
+        // React component name(child.type?.name) or
+        // HTML element name(child.type).
+        error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || child.type, "` instead."));
+      }
+    });
+    return error;
+  },
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
+  /**
+   * Text label for the Collapse button.
+   */
+  collapseButtonLabel: PropTypes.string,
+  /**
+   * When true, the Guidebanner will initialize in a collapsed state,
+   * showing the title and the Expand button.
+   *
+   * When expanded, it will show the GuidebannerElement child components and the Collapse button.
+   */
+  collapsible: PropTypes.bool,
+  /**
+   * Text label for the Expand button.
+   */
+  expandButtonLabel: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Next button icon.
+   */
+  nextIconDescription: PropTypes.string,
+  /**
+   * If defined, a Close button will render in the top-right corner and a
+   * callback function will be triggered when button is clicked.
+   */
+  onClose: PropTypes.func,
+  /**
+   * Tooltip text and aria label for the Back button icon.
+   */
+  previousIconDescription: PropTypes.string,
+  /**
+   * Title text.
+   */
+  title: PropTypes.string.isRequired
+};

package/es/components/Guidebanner/GuidebannerElement.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["button", "className", "description", "title"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// 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, "--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 = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className)
+  }, getDevtoolsProps(componentName)), title && /*#__PURE__*/React.createElement("h2", {
+    className: "".concat(blockClass, "-title")
+  }, title), description && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "-content")
+  }, description), button && /*#__PURE__*/React.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.
+GuidebannerElement.propTypes = {
+  /**
+   * An optional button can be rendered below the description.
+   * This can be a link, button, Coachmark button, etc.
+   */
+  button: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * The description of the element.
+   */
+
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  /**
+   * The title of the element.
+   */
+  title: PropTypes.string
+};
+export { GuidebannerElement };

package/es/components/Guidebanner/GuidebannerElementButton.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "type"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Button } from 'carbon-components-react';
+import { Crossroads16 } from '@carbon/icons-react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// 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, "--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 = _objectWithoutProperties(_ref, _excluded);
+  if (type === 'primary') {
+    return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+      className: cx(blockClass, className),
+      iconDescription: 'Crossroads',
+      kind: "tertiary",
+      renderIcon: Crossroads16,
+      role: "button",
+      size: "md"
+    }, getDevtoolsProps(componentName)), children);
+  }
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    className: cx(blockClass, className),
+    kind: "ghost",
+    role: "button",
+    size: "md"
+  }, 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.
+GuidebannerElementButton.propTypes = {
+  /**
+   * Provide the contents of the GuidebannerElementButton.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * If type is "primary", then return a tertiary button with the "crossroads" icon,
+   * else return a ghost button.
+   */
+  type: PropTypes.string
+
+  /* TODO: add types and DocGen for all props. */
+};
+
+export { GuidebannerElementButton };

package/es/components/Guidebanner/GuidebannerElementLink.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Import portions of React that are needed.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Link } from 'carbon-components-react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// 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, "--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 = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
+    className: cx(blockClass, className),
+    kind: "ghost",
+    role: "link",
+    size: "md"
+  }, 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.
+GuidebannerElementLink.propTypes = {
+  /**
+   * Provide the contents of the GuidebannerElementLink.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+};
+export { GuidebannerElementLink };

package/es/components/Guidebanner/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { Guidebanner } from './Guidebanner';
+export { GuidebannerElement } from './GuidebannerElement';
+export { GuidebannerElementButton } from './GuidebannerElementButton';
+export { GuidebannerElementLink } from './GuidebannerElementLink';