carbon-react 104.33.1 → 104.35.0

package/esm/components/alert/alert.component.js

@@ -0,0 +1,70 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import Dialog from "../dialog";
+
+const Alert = ({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement(Dialog, _extends({
+  "data-component": "alert",
+  role: "alertdialog"
+}, rest), children);
+
+Alert.propTypes = {
+  /** Prop to specify the aria-describedby property of the component */
+  "aria-describedby": PropTypes.string,
+
+  /**
+   * Prop to specify the aria-label of the component.
+   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+   */
+  "aria-label": PropTypes.string,
+
+  /**
+   * Prop to specify the aria-labeledby property of the component
+   * To be used when the title prop is a custom React Node,
+   * or the component is labelled by an internal element other than the title.
+   */
+  "aria-labelledby": PropTypes.string,
+
+  /** Alert content */
+  children: PropTypes.node,
+
+  /** Controls the open state of the component */
+  open: PropTypes.bool.isRequired,
+
+  /** A custom close event handler */
+  onCancel: PropTypes.func,
+
+  /** Determines if the Esc Key closes the Alert */
+  disableEscKey: PropTypes.bool,
+
+  /** Allows developers to specify a specific height for the dialog. */
+  height: PropTypes.string,
+
+  /** Title displayed at top of Alert */
+  title: PropTypes.node,
+
+  /** Subtitle displayed at top of Alert */
+  subtitle: PropTypes.string,
+
+  /** Size of Alert */
+  size: PropTypes.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
+
+  /** Determines if the close icon is shown */
+  showCloseIcon: PropTypes.bool,
+
+  /** Optional reference to an element meant to be focused on open */
+  focusFirstElement: PropTypes.shape({
+    current: PropTypes.any
+  }),
+
+  /** Disables auto focus functionality on child elements */
+  disableAutoFocus: PropTypes.bool
+};
+Alert.defaultProps = {
+  size: "extra-small"
+};
+export default Alert;

package/esm/components/alert/alert.d.ts

@@ -0,0 +1,5 @@
+import { DialogProps } from "../dialog/dialog";
+
+declare function Alert(props: DialogProps): JSX.Element;
+
+export default Alert;

package/esm/components/alert/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./alert";

package/esm/components/alert/index.js

@@ -0,0 +1 @@
+export { default } from "./alert.component";

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.d.ts

@@ -0,0 +1,3 @@
+export default AnchorNavigationItem;
+declare const AnchorNavigationItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.component.js

@@ -0,0 +1,46 @@
+/* eslint-disable react/no-unused-prop-types */
+import React from "react";
+import PropTypes from "prop-types";
+import StyledNavigationItem from "./anchor-navigation-item.style";
+const AnchorNavigationItem = /*#__PURE__*/React.forwardRef(({
+  children,
+  onKeyDown,
+  onClick,
+  href,
+  tabIndex,
+  isSelected
+}, ref) => /*#__PURE__*/React.createElement(StyledNavigationItem, {
+  isSelected: isSelected
+}, /*#__PURE__*/React.createElement("a", {
+  onKeyDown: onKeyDown,
+  onClick: onClick,
+  tabIndex: tabIndex,
+  ref: ref,
+  href: href,
+  "data-element": "anchor-navigation-item"
+}, children)));
+AnchorNavigationItem.propTypes = {
+  children: PropTypes.node,
+
+  /** OnKeyDown handler */
+  onKeyDown: PropTypes.func,
+
+  /** onClick handler */
+  onClick: PropTypes.func,
+
+  /** href to be passed to the anchor element, can be linked with id passed to the scrollable section */
+  href: PropTypes.string,
+
+  /** tabIndex passed to the anchor element */
+  tabIndex: PropTypes.number,
+
+  /** Indicates if component is selected */
+  isSelected: PropTypes.bool,
+
+  /** Reference to the section html element meant to be shown   */
+  target: PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })
+};
+AnchorNavigationItem.displayName = "AnchorNavigationItem";
+export default AnchorNavigationItem;

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export interface AnchorNavigationItemProps {
+  children?: React.ReactNode;
+  /** href to be passed to the anchor element, can be linked with id passed to the scrollable section */
+  href?: string;
+  /** Indicates if component is selected */
+  isSelected?: boolean;
+  /** onClick handler */
+  onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
+  /** OnKeyDown handler */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement>) => void;
+  /** tabIndex passed to the anchor element */
+  tabIndex?: number;
+  /** Reference to the section html element meant to be shown   */
+  target?: React.Ref<HTMLElement>;
+}
+
+declare function AnchorNavigationItem(
+  props: AnchorNavigationItemProps & React.RefAttributes<HTMLAnchorElement>
+): JSX.Element;
+
+export default AnchorNavigationItem;

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledNavigationItem;
+declare const StyledNavigationItem: import("styled-components").StyledComponent<"li", any, {}, never>;

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.style.js

@@ -0,0 +1,37 @@
+import PropTypes from "prop-types";
+import styled, { css } from "styled-components";
+const StyledNavigationItem = styled.li`
+  width: 100%;
+
+  a {
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    color: var(--colorsUtilityYin090);
+    background-color: transparent;
+    border-left: var(--sizing050) solid var(--colorsActionMinor100);
+    font-weight: 700;
+    padding: 12px 24px;
+
+    &:focus {
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
+    }
+
+    &:hover {
+      background-color: ${({
+  isSelected
+}) => !isSelected && "var(--colorsActionMinor100)"};
+    }
+
+    ${({
+  isSelected
+}) => isSelected && css`
+        background-color: var(--colorsActionMajorYang100);
+        border-left-color: var(--colorsActionMajor500);
+      `}
+  }
+`;
+StyledNavigationItem.propTypes = {
+  isSelected: PropTypes.bool
+};
+export default StyledNavigationItem;

package/esm/components/anchor-navigation/anchor-navigation.component.d.ts

@@ -0,0 +1,12 @@
+export default AnchorNavigation;
+declare function AnchorNavigation({ children, stickyNavigation }: {
+    children: any;
+    stickyNavigation: any;
+}): JSX.Element;
+declare namespace AnchorNavigation {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        function stickyNavigation(props: any, propName: any, componentName: any): Error | undefined;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/anchor-navigation/anchor-navigation.component.js

@@ -0,0 +1,155 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import PropTypes from "prop-types";
+import throttle from "lodash/throttle";
+import { isFragment } from "react-is";
+import Event from "../../__internal__/utils/helpers/events";
+import { StyledAnchorNavigation, StyledNavigation, StyledContent } from "./anchor-navigation.style";
+import AnchorNavigationItem from "./anchor-navigation-item/anchor-navigation-item.component";
+const SECTION_VISIBILITY_OFFSET = 200;
+const SCROLL_THROTTLE = 100;
+
+const AnchorNavigation = ({
+  children,
+  stickyNavigation
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const sectionRefs = useRef(React.Children.map(stickyNavigation.props.children, child => child.props.target));
+  const anchorRefs = useRef(Array.from({
+    length: React.Children.count(stickyNavigation.props.children)
+  }, () => /*#__PURE__*/React.createRef()));
+  const contentRef = useRef();
+  const navigationRef = useRef();
+  const isUserScroll = useRef(true);
+  const isUserScrollTimer = useRef();
+  const setSelectedAnchorBasedOnScroll = useCallback(() => {
+    const sectionsTopOffsets = sectionRefs.current.map(({
+      current
+    }) => current.getBoundingClientRect().top);
+    const {
+      top: navTopOffset
+    } = navigationRef.current.getBoundingClientRect();
+    const indexOfSmallestNegativeTopOffset = sectionsTopOffsets.reduce((currentTopIndex, sectionTopOffset, index) => {
+      if (sectionTopOffset - SECTION_VISIBILITY_OFFSET > navTopOffset) return currentTopIndex;
+      return sectionTopOffset > sectionsTopOffsets[currentTopIndex] ? index : currentTopIndex;
+    }, 0);
+    setSelectedIndex(indexOfSmallestNegativeTopOffset);
+  }, []);
+  const scrollHandler = useCallback(throttle(() => {
+    if (isUserScroll.current) {
+      setSelectedAnchorBasedOnScroll();
+    } else {
+      window.clearTimeout(isUserScrollTimer.current);
+      isUserScrollTimer.current = setTimeout(() => {
+        isUserScroll.current = true;
+      }, SCROLL_THROTTLE + 50);
+    }
+  }, SCROLL_THROTTLE), []);
+  useEffect(() => {
+    window.addEventListener("scroll", scrollHandler, true);
+    return () => window.removeEventListener("scroll", scrollHandler, true);
+  }, [scrollHandler]);
+
+  const focusFirstFocusableChild = section => {
+    // eslint-disable-next-line max-len
+    const defaultFocusableSelectors = 'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
+    const firstFocusableElement = section.querySelector(defaultFocusableSelectors);
+
+    if (firstFocusableElement) {
+      firstFocusableElement.focus({
+        preventScroll: true
+      });
+    }
+  };
+
+  const scrollToSection = section => {
+    isUserScroll.current = false;
+    section.scrollIntoView({
+      block: "start",
+      inline: "nearest",
+      behavior: "smooth"
+    });
+  };
+
+  const handleClick = (event, index) => {
+    event.preventDefault();
+    const sectionToScroll = sectionRefs.current[index].current;
+    focusFirstFocusableChild(sectionToScroll); // workaround due to preventScroll focus method option on firefox not working consistently
+
+    window.setTimeout(() => {
+      scrollToSection(sectionToScroll);
+      setSelectedIndex(index);
+    }, 10);
+  };
+
+  const focusNavItem = (event, index) => {
+    event.preventDefault();
+    let newIndex = index;
+
+    if (index === -1) {
+      newIndex = anchorRefs.current.length - 1;
+    } else if (index === anchorRefs.current.length) {
+      newIndex = 0;
+    }
+
+    anchorRefs.current[newIndex].current.focus();
+  };
+
+  const handleKeyDown = (event, index) => {
+    if (Event.isUpKey(event)) {
+      focusNavItem(event, index - 1);
+    } else if (Event.isDownKey(event)) {
+      focusNavItem(event, index + 1);
+    } else if (Event.isEnterKey(event) || Event.isSpaceKey(event)) {
+      handleClick(event, index);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(StyledAnchorNavigation, {
+    ref: contentRef,
+    "data-component": "anchor-navigation"
+  }, /*#__PURE__*/React.createElement(StyledNavigation, {
+    ref: navigationRef,
+    "data-element": "anchor-sticky-navigation"
+  }, React.Children.map(stickyNavigation.props.children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
+    isSelected: index === selectedIndex,
+    tabIndex: index === selectedIndex ? 0 : -1,
+    onClick: ev => handleClick(ev, index),
+    onKeyDown: ev => handleKeyDown(ev, index),
+    ref: anchorRefs.current[index]
+  }))), /*#__PURE__*/React.createElement(StyledContent, null, children));
+};
+
+AnchorNavigation.propTypes = {
+  children: PropTypes.node,
+
+  /** The AnchorNavigationItems components to be rendered in the sticky navigation.
+  It is important to maintain proper structure.
+  List of AnchorNavigationItems has to be wrapped in React.Fragment */
+  stickyNavigation: (props, propName, componentName) => {
+    let error;
+    const prop = props[propName];
+    const errorsList = [];
+
+    if (!isFragment(prop)) {
+      errorsList.push(`Prop ${propName} container supplied to ${componentName} should be a React.Fragment.`);
+    }
+
+    let isAnyChildIncorrect = false;
+    React.Children.forEach(prop.props.children, child => {
+      if (AnchorNavigationItem.displayName !== child.type.displayName) {
+        isAnyChildIncorrect = true;
+      }
+    });
+
+    if (isAnyChildIncorrect) {
+      errorsList.push(`Prop ${propName} container supplied to ${componentName} only accepts children of type ${AnchorNavigationItem.displayName}.`);
+    }
+
+    if (errorsList.length) {
+      error = new Error(errorsList.join(" "));
+    }
+
+    return error;
+  }
+};
+export default AnchorNavigation;

package/esm/components/anchor-navigation/anchor-navigation.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface AnchorNavigationProps {
+  children?: React.ReactNode;
+  /** The AnchorNavigationItems components to be rendered in the sticky navigation */
+  stickyNavigation?: React.ReactNode;
+}
+
+declare function AnchorNavigation(props: AnchorNavigationProps): JSX.Element;
+
+export default AnchorNavigation;

package/esm/components/anchor-navigation/anchor-navigation.style.d.ts

@@ -0,0 +1,3 @@
+export const StyledAnchorNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledNavigation: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/anchor-navigation/anchor-navigation.style.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+const StyledAnchorNavigation = styled.div`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+`;
+const StyledNavigation = styled.ul`
+  position: sticky;
+  top: 32px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-width: 240px;
+`;
+const StyledContent = styled.div`
+  flex: 1;
+  margin-left: 32px;
+`;
+export { StyledAnchorNavigation, StyledNavigation, StyledContent };

package/esm/components/anchor-navigation/anchor-section-divider/anchor-section-divider.d.ts

@@ -0,0 +1,12 @@
+import { StyledComponentProps } from "styled-components";
+
+declare function AnchorSectionDivider(
+  attrs: StyledComponentProps<
+    "div",
+    Record<string, unknown>,
+    Record<string, unknown>,
+    ""
+  >
+): JSX.Element;
+
+export default AnchorSectionDivider;

package/esm/components/anchor-navigation/anchor-section-divider/anchor-section-divider.style.d.ts

@@ -0,0 +1,4 @@
+export default StyledAnchorDivider;
+declare const StyledAnchorDivider: import("styled-components").StyledComponent<"div", any, {
+    "data-element": string;
+}, "data-element">;

package/esm/components/anchor-navigation/anchor-section-divider/anchor-section-divider.style.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const StyledAnchorDivider = styled.div.attrs({
+  "data-element": "anchor-navigation-divider"
+})`
+  background-color: var(--colorsActionMinor200);
+  height: 1px;
+`;
+export default StyledAnchorDivider;

package/esm/components/anchor-navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AnchorNavigation } from "./anchor-navigation";
+export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item";
+export { default as AnchorSectionDivider } from "./anchor-section-divider/anchor-section-divider";

package/esm/components/anchor-navigation/index.js

@@ -0,0 +1,3 @@
+export { default as AnchorNavigation } from "./anchor-navigation.component";
+export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item.component";
+export { default as AnchorSectionDivider } from "./anchor-section-divider/anchor-section-divider.style";

package/esm/components/app-wrapper/app-wrapper.component.d.ts

@@ -0,0 +1,21 @@
+export default AppWrapper;
+/**
+ * Manages the width and containment of your application.
+ */
+declare class AppWrapper extends React.Component<any, any, any> {
+    constructor(...args: any[]);
+    /**
+     * Returns the classes for the component.
+     *
+     * @method classes
+     * @return {String}
+     */
+    classes(): string;
+}
+declare namespace AppWrapper {
+    namespace propTypes {
+        const children: Node;
+        const className: string;
+    }
+}
+import React from "react";

package/esm/components/app-wrapper/app-wrapper.component.js

@@ -0,0 +1,102 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import { validProps } from "../../__internal__/utils/ether";
+import StyledAppWrapper from "./app-wrapper.style";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedWarnTriggered = false;
+/**
+ * Manages the width and containment of your application.
+ */
+
+let AppWrapper = /*#__PURE__*/function (_React$Component) {
+  _inherits(AppWrapper, _React$Component);
+
+  var _super = _createSuper(AppWrapper);
+
+  function AppWrapper(...args) {
+    var _this;
+
+    _classCallCheck(this, AppWrapper);
+
+    _this = _super.call(this, ...args);
+    _this.classes = _this.classes.bind(_assertThisInitialized(_this));
+
+    if (!deprecatedWarnTriggered) {
+      deprecatedWarnTriggered = true; // eslint-disable-next-line max-len
+
+      Logger.deprecate("`AppWrapper` component is now deprecated and will soon be removed. Please use the `Box` component instead.");
+    }
+
+    return _this;
+  }
+  /**
+   * Returns the classes for the component.
+   *
+   * @method classes
+   * @return {String}
+   */
+
+
+  _createClass(AppWrapper, [{
+    key: "classes",
+    value: function classes() {
+      return classNames("carbon-app-wrapper", this.props.className);
+    }
+    /**
+     * @method render
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(StyledAppWrapper, _extends({}, validProps(this), {
+        className: this.classes()
+      }, tagComponent("app-wrapper", this.props)), this.props.children);
+    }
+  }]);
+
+  return AppWrapper;
+}(React.Component);
+
+AppWrapper.propTypes = {
+  /**
+   * Children elements
+   *
+   * @property children
+   * @type {Node}
+   */
+  children: PropTypes.node,
+
+  /**
+   * Custom className
+   *
+   * @property className
+   * @type {String}
+   */
+  className: PropTypes.string
+};
+export default AppWrapper;

package/esm/components/app-wrapper/app-wrapper.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export interface AppWrapperProps {
+  /** Children elements */
+  children?: React.ReactNode;
+  /** Custom className */
+  className?: string;
+}
+
+declare class AppWrapper extends React.Component<AppWrapperProps> {}
+
+export default AppWrapper;

package/esm/components/app-wrapper/app-wrapper.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledAppWrapper;
+declare const StyledAppWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/app-wrapper/app-wrapper.style.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+const StyledAppWrapper = styled.div`
+  box-sizing: border-box;
+  max-width: 1600px;
+  min-width: 958px;
+  margin: 0 auto;
+  padding: 0 40px;
+
+  @media only screen and (max-width: 1366px) {
+    padding: 0 30px;
+  }
+
+  @media only screen and (max-width: 1024px) {
+    padding: 0 25px;
+  }
+`;
+export default StyledAppWrapper;

package/esm/components/app-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./app-wrapper";

package/esm/components/app-wrapper/index.js

@@ -0,0 +1 @@
+export { default } from "./app-wrapper.component";

package/esm/components/badge/badge.component.d.ts

@@ -0,0 +1,14 @@
+export default Badge;
+declare function Badge({ children, counter, onClick }: {
+    children: any;
+    counter: any;
+    onClick: any;
+}): JSX.Element;
+declare namespace Badge {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const counter: PropTypes.Requireable<string | number>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/badge/badge.component.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { StyledBadgeWrapper, StyledButton, StyledCrossIcon, StyledCounter } from "./badge.style";
+
+const Badge = ({
+  children,
+  counter,
+  onClick
+}) => {
+  return /*#__PURE__*/React.createElement(StyledBadgeWrapper, null, counter > 0 && /*#__PURE__*/React.createElement(StyledButton, {
+    "data-component": "badge",
+    buttonType: "secondary",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(StyledCrossIcon, {
+    "data-element": "badge-cross-icon",
+    type: "cross"
+  }), /*#__PURE__*/React.createElement(StyledCounter, {
+    "data-element": "badge-counter"
+  }, counter > 99 ? 99 : counter)), children);
+};
+
+Badge.propTypes = {
+  /** The badge will be added to this element */
+  children: PropTypes.node.isRequired,
+
+  /** The number rendered in the badge component */
+  counter: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** Callback fired when badge is clicked */
+  onClick: PropTypes.func
+};
+export default Badge;