carbon-react 104.34.1 → 104.37.0

package/esm/components/icon/icon-unicodes.js

@@ -0,0 +1,233 @@
+const communications = {
+  call: "\\e93d",
+  mobile: "\\e932",
+  fax: "\\e925",
+  email: "\\e922",
+  email_switch: "\\e996",
+  marker: "\\e93f"
+};
+const business = {
+  person: "\\e93c",
+  person_info: "\\e994",
+  person_tick: "\\e97b",
+  people: "\\e93b",
+  people_switch: "\\e995",
+  business: "\\e90d",
+  shop: "\\e947",
+  bank: "\\e977"
+};
+const primaryNavigation = {
+  home: "\\e929",
+  settings: "\\e91a",
+  search: "\\e92f",
+  feedback: "\\e930",
+  logout: "\\e92e",
+  alert: "\\e90b",
+  talk: "\\e95a"
+};
+const actions = {
+  calendar: "\\e90e",
+  calendar_today: "\\e970",
+  dropdown: "\\e910",
+  caret_up: "\\e9a8",
+  caret_left: "\\e9a6",
+  caret_right: "\\e9a7",
+  caret_large_down: "\\e9a4",
+  caret_large_up: "\\e9a5",
+  caret_large_left: "\\e9a2",
+  caret_large_right: "\\e9a3",
+  plus: "\\e940",
+  plus_large: "\\e967",
+  minus: "\\e931",
+  minus_large: "\\e968",
+  edit: "\\e93a",
+  edited: "\\e938",
+  favourite: "\\e94f",
+  favourite_lined: "\\e94e",
+  credit_card: "\\e91c",
+  credit_card_slash: "\\e966",
+  save: "\\e926",
+  uploaded: "\\e905",
+  arrow_left_boxed: "\\e988",
+  question: "\\e943",
+  info: "\\e92a",
+  download: "\\e900",
+  upload: "\\e906",
+  share: "\\e946",
+  close: "\\e91e",
+  cross: "\\e91d",
+  cross_circle: "\\e992",
+  filter: "\\e928",
+  refresh: "\\e945",
+  computer_clock: "\\e997",
+  refresh_clock: "\\e986",
+  sync: "\\e944",
+  attach: "\\e937",
+  camera: "\\e90f",
+  image: "\\e93e",
+  folder: "\\e927",
+  help: "\\e951",
+  connect: "\\e955",
+  disconnect: "\\e953",
+  split: "\\e952",
+  filter_new: "\\e954",
+  delivery: "\\e959",
+  chat: "\\e914",
+  chat_notes: "\\e956",
+  bullet_list: "\\e95b",
+  bullet_list_numbers: "\\e989",
+  bullet_list_dotted: "\\e98a",
+  view: "\\e957",
+  hide: "\\e998",
+  video: "\\e95e",
+  play: "\\e95f",
+  pause: "\\e96d",
+  play_circle: "\\e96c",
+  pause_circle: "\\e96b",
+  scan: "\\e96e",
+  lookup: "\\e96f",
+  bold: "\\e98c",
+  italic: "\\e98b",
+  undo: "\\e9aa"
+};
+const batchActions = {
+  cart: "\\e90a",
+  basket_with_squares: "\\e975",
+  delete: "\\e90c",
+  print: "\\e942",
+  csv: "\\e94a",
+  pdf: "\\e91f",
+  duplicate: "\\e921",
+  copy: "\\e91b"
+};
+const navigation = {
+  chevron_up: "\\e918",
+  chevron_down: "\\e915",
+  chevron_right: "\\e917",
+  chevron_left: "\\e916",
+  chevron_up_thick: "\\e99d",
+  chevron_down_thick: "\\e99c",
+  chevron_left_thick: "\\e99f",
+  chevron_right_thick: "\\e99e",
+  link: "\\e92d",
+  list_view: "\\e92c",
+  card_view: "\\e94b",
+  sort_down: "\\e948",
+  sort_up: "\\e949",
+  arrow_left: "\\e902",
+  arrow_right: "\\e904",
+  arrow_down: "\\e901",
+  arrow_up: "\\e907",
+  arrow_left_right_small: "\\e964",
+  arrow_left_small: "\\e963",
+  arrow_right_small: "\\e962",
+  block_arrow_right: "\\e97e",
+  drag_vertical: "\\e94d",
+  drag: "\\e94c",
+  fit_height: "\\e909",
+  fit_width: "\\e908",
+  ellipsis_horizontal: "\\e960",
+  ellipsis_vertical: "\\e961"
+};
+const statusSymbols = {
+  error: "\\e923",
+  warning: "\\e924",
+  tick: "\\e950",
+  tick_circle: "\\e993",
+  draft: "\\e939",
+  progressed: "\\e903",
+  in_progress: "\\e920",
+  clock: "\\e919",
+  locked: "\\e935",
+  unlocked: "\\e936",
+  gift: "\\e941",
+  blocked: "\\e933",
+  key: "\\e92b",
+  chart_line: "\\e912",
+  chart_pie: "\\e913",
+  chart_bar: "\\e911",
+  blocked_square: "\\e934",
+  disputed: "\\e958",
+  lightbulb_on: "\\e95d",
+  lightbulb_off: "\\e95c"
+};
+const misc = {
+  boxed_shapes: "\\e982",
+  circles_connection: "\\e979",
+  document_right_align: "\\e981",
+  document_tick: "\\e980",
+  document_vertical_lines: "\\e978",
+  error_square: "\\e97f",
+  factory: "\\e976",
+  files_leaning: "\\e97a",
+  ledger: "\\e973",
+  ledger_arrow_left: "\\e971",
+  ledger_arrow_right: "\\e972",
+  money_bag: "\\e974",
+  spanner: "\\e984",
+  split_container: "\\e987",
+  stacked_boxes: "\\e97c",
+  tag: "\\e985",
+  three_boxes: "\\e97d",
+  circle_with_dots: "\\e965",
+  squares_nine: "\\e969",
+  coins: "\\e96a",
+  file_generic: "\\e991",
+  file_pdf: "\\e990",
+  file_excel: "\\e98e",
+  file_word: "\\e98f",
+  file_image: "\\e98d",
+  euro: "\\e9a0",
+  pound: "\\e9a1",
+  stacked_squares: "\\e983",
+  expand: "\\e99b",
+  flag: "\\e999",
+  square_dot: "\\e99a",
+  envelope_dollar: "\\e9ab",
+  envelope_euro: "\\e9a9",
+  sage_coin: "\\e9ac"
+};
+const legacyNames = {
+  add: actions.plus,
+  create: actions.plus,
+  services: actions.plus,
+  admin: actions.favourite,
+  analysis: statusSymbols.chart_line,
+  graph: statusSymbols.chart_line,
+  basket: batchActions.cart,
+  bin: batchActions.delete,
+  bulk_destroy: batchActions.delete,
+  caret_down: actions.dropdown,
+  collaborate: actions.share,
+  contacts: business.people,
+  entry: navigation.list_view,
+  go: statusSymbols.progressed,
+  submitted: statusSymbols.progressed,
+  grid: actions.split,
+  individual: business.person,
+  location: communications.marker,
+  message: communications.email,
+  old_warning: statusSymbols.warning,
+  phone: communications.call,
+  piggy_bank: actions.save,
+  question_hollow: actions.video,
+  question_mark: actions.question,
+  remove: actions.minus,
+  settings_old: primaryNavigation.settings,
+  true_tick: statusSymbols.tick,
+  arrow: navigation.arrow_right,
+  in_transit: navigation.arrow_left_right_small,
+  progress: misc.circle_with_dots
+};
+const iconUnicodes = { ...communications,
+  ...business,
+  ...primaryNavigation,
+  ...actions,
+  ...batchActions,
+  ...navigation,
+  ...statusSymbols,
+  ...misc,
+  ...legacyNames,
+  none: ""
+};
+export default iconUnicodes;

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

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

package/esm/components/icon/icon.component.js

@@ -0,0 +1,209 @@
+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, { useContext } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import tagComponent from "../../__internal__/utils/helpers/tags/tags";
+import StyledIcon from "./icon.style";
+import Tooltip from "../tooltip";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import { ICON_TOOLTIP_POSITIONS } from "./icon-config";
+import { TooltipContext } from "../../__internal__/tooltip-provider";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+const Icon = /*#__PURE__*/React.forwardRef(({
+  bg,
+  bgShape,
+  bgSize,
+  className,
+  color,
+  disabled,
+  fontSize,
+  type,
+  tooltipMessage,
+  tooltipPosition,
+  tooltipVisible,
+  tooltipBgColor,
+  tooltipFontColor,
+  tooltipFlipOverrides,
+  tooltipId,
+  tabIndex,
+  isPartOfInput,
+  inputSize,
+  role,
+  ariaLabel,
+  "aria-hidden": ariaHidden,
+  focusable = true,
+  ...rest
+}, ref) => {
+  const isInteractive = !!tooltipMessage && !disabled;
+  const {
+    tooltipPosition: tooltipPositionFromContext,
+    focusable: focusableFromContext,
+    tooltipVisible: tooltipVisibleFromContext,
+    disabled: disabledFromContext,
+    target
+  } = useContext(TooltipContext);
+  /** Return Icon type with overrides */
+
+  const iconType = () => {
+    // switch tweaks icon names for actual icons in the set
+    switch (type) {
+      case "help":
+        return "question";
+
+      case "maintenance":
+        return "settings";
+
+      case "new":
+        return "gift";
+
+      case "success":
+        return "tick";
+
+      case "messages":
+      case "email":
+        return "message";
+
+      default:
+        return type;
+    }
+  };
+
+  const isFocusable = focusableFromContext !== undefined ? focusableFromContext : focusable;
+  const hasTooltip = !disabled && !disabledFromContext && tooltipMessage && isFocusable;
+  const styleProps = {
+    bg,
+    bgSize,
+    bgShape,
+    color,
+    disabled: disabledFromContext || disabled,
+    fontSize,
+    isInteractive,
+    type: iconType(),
+    tabIndex: hasTooltip && tabIndex === undefined ? 0 : tabIndex,
+    ...filterStyledSystemMarginProps(rest)
+  };
+  const icon = /*#__PURE__*/React.createElement(StyledIcon, _extends({
+    ref: ref,
+    key: "icon",
+    className: className || null,
+    "data-element": iconType()
+  }, tagComponent("icon", rest), styleProps, {
+    hasTooltip: hasTooltip,
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden,
+    role: hasTooltip && role === undefined ? "tooltip" : role
+  }));
+
+  if (tooltipMessage) {
+    const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
+    const visible = disabled ? undefined : showTooltip;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      message: tooltipMessage,
+      position: tooltipPositionFromContext || tooltipPosition,
+      type: type,
+      id: tooltipId,
+      isVisible: visible,
+      isPartOfInput: isPartOfInput,
+      inputSize: inputSize,
+      bgColor: tooltipBgColor,
+      fontColor: tooltipFontColor,
+      flipOverrides: tooltipFlipOverrides,
+      target: target
+    }, icon);
+  }
+
+  return icon;
+});
+Icon.propTypes = { ...marginPropTypes,
+
+  /**
+   * @private
+   * @ignore
+   * Add classes to this component
+   * */
+  className: PropTypes.string,
+
+  /**
+   * Icon type.
+   *
+   * The full list of types can be seen [here](https://github.com/Sage/carbon/blob/master/src/components/icon/icon-config.js).
+   * */
+  type: PropTypes.string.isRequired,
+
+  /** Background size */
+  bgSize: PropTypes.oneOf(["extra-small", "small", "medium", "large", "extra-large"]),
+
+  /** Background shape */
+  bgShape: PropTypes.oneOf(["circle", "rounded-rect", "square"]),
+
+  /** Icon font size */
+  fontSize: PropTypes.oneOf(["small", "medium", "large", "extra-large"]),
+
+  /** Icon colour, provide any color from palette or any valid css color value. */
+  color: PropTypes.string,
+
+  /** Background colour, provide any color from palette or any valid css color value. */
+  bg: PropTypes.string,
+
+  /** Sets the icon in the disabled state */
+  disabled: PropTypes.bool,
+
+  /** Aria label for accessibility purposes */
+  ariaLabel: PropTypes.string,
+
+  /** Set whether icon should be recognised by assistive technologies */
+  "aria-hidden": PropTypes.bool,
+
+  /** The message to be displayed within the tooltip */
+  tooltipMessage: PropTypes.node,
+
+  /** The position to display the tooltip */
+  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Control whether the tooltip is visible */
+  tooltipVisible: PropTypes.bool,
+
+  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  tooltipBgColor: PropTypes.string,
+
+  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  tooltipFontColor: PropTypes.string,
+
+  /** Id passed to the tooltip container, used for accessibility purposes. */
+  tooltipId: PropTypes.string,
+
+  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"].
+   *
+   *  See the Popper [documentation](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) for more information
+   * */
+  tooltipFlipOverrides: (props, propName) => {
+    const prop = props[propName];
+    const isValid = prop && Array.isArray(prop) && prop.every(placement => ICON_TOOLTIP_POSITIONS.includes(placement));
+
+    if (!prop || isValid) {
+      return null;
+    }
+
+    return new Error( // eslint-disable-next-line max-len
+    `The \`${propName}\` prop supplied to \`Icon\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  },
+
+  /** @ignore @private */
+  isPartOfInput: PropTypes.bool,
+
+  /** @ignore @private */
+  inputSize: PropTypes.oneOf(["small", "medium", "large"]),
+
+  /** @ignore @private */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** @ignore @private */
+  focusable: PropTypes.bool
+};
+Icon.defaultProps = {
+  bgSize: "small",
+  fontSize: "small",
+  disabled: false
+};
+export default Icon;

package/esm/components/icon/icon.d.ts

@@ -0,0 +1,246 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+
+export type BgSize =
+  | "extra-small"
+  | "small"
+  | "medium"
+  | "large"
+  | "extra-large";
+export type TooltipPositions = "top" | "bottom" | "left" | "right";
+export type FontSize =
+  | "extra-small"
+  | "small"
+  | "medium"
+  | "large"
+  | "extra-large";
+export type BackgroundShape = "circle" | "rounded-rect" | "square";
+
+export type IconType =
+  | "add"
+  | "alert"
+  | "analysis"
+  | "arrow_down"
+  | "arrow_left"
+  | "arrow_left_boxed"
+  | "arrow_left_right_small"
+  | "arrow_left_small"
+  | "arrow_right"
+  | "arrow_right_small"
+  | "arrow_up"
+  | "attach"
+  | "bank"
+  | "basket"
+  | "basket_with_squares"
+  | "bin"
+  | "blocked"
+  | "blocked_square"
+  | "block_arrow_right"
+  | "bold"
+  | "boxed_shapes"
+  | "bulk_destroy"
+  | "bullet_list"
+  | "bullet_list_dotted"
+  | "bullet_list_numbers"
+  | "business"
+  | "calendar"
+  | "calendar_today"
+  | "call"
+  | "camera"
+  | "card_view"
+  | "caret_down"
+  | "caret_left"
+  | "caret_right"
+  | "caret_up"
+  | "caret_large_down"
+  | "caret_large_left"
+  | "caret_large_right"
+  | "caret_large_up"
+  | "cart"
+  | "chat"
+  | "chart_bar"
+  | "chart_line"
+  | "chart_pie"
+  | "chat_notes"
+  | "chevron_down"
+  | "chevron_left"
+  | "chevron_right"
+  | "chevron_up"
+  | "chevron_down_thick"
+  | "chevron_left_thick"
+  | "chevron_right_thick"
+  | "chevron_up_thick"
+  | "circle_with_dots"
+  | "circles_connection"
+  | "clock"
+  | "close"
+  | "coins"
+  | "collaborate"
+  | "computer_clock"
+  | "connect"
+  | "copy"
+  | "credit_card"
+  | "credit_card_slash"
+  | "cross"
+  | "cross_circle"
+  | "csv"
+  | "delete"
+  | "delivery"
+  | "disputed"
+  | "disconnect"
+  | "document_right_align"
+  | "document_tick"
+  | "document_vertical_lines"
+  | "download"
+  | "drag"
+  | "drag_vertical"
+  | "draft"
+  | "dropdown"
+  | "duplicate"
+  | "edit"
+  | "edited"
+  | "email"
+  | "email_switch"
+  | "ellipsis_horizontal"
+  | "ellipsis_vertical"
+  | "error"
+  | "error_square"
+  | "euro"
+  | "expand"
+  | "factory"
+  | "favourite"
+  | "favourite_lined"
+  | "fax"
+  | "feedback"
+  | "file_excel"
+  | "file_generic"
+  | "file_image"
+  | "file_pdf"
+  | "file_word"
+  | "files_leaning"
+  | "filter"
+  | "filter_new"
+  | "fit_height"
+  | "fit_width"
+  | "flag"
+  | "folder"
+  | "gift"
+  | "graph"
+  | "grid"
+  | "help"
+  | "hide"
+  | "home"
+  | "image"
+  | "in_progress"
+  | "in_transit"
+  | "individual"
+  | "info"
+  | "italic"
+  | "key"
+  | "ledger"
+  | "ledger_arrow_left"
+  | "ledger_arrow_right"
+  | "link"
+  | "list_view"
+  | "locked"
+  | "location"
+  | "logout"
+  | "lookup"
+  | "marker"
+  | "message"
+  | "messages"
+  | "minus"
+  | "minus_large"
+  | "mobile"
+  | "money_bag"
+  | "pause"
+  | "pause_circle"
+  | "pdf"
+  | "people"
+  | "people_switch"
+  | "person"
+  | "person_info"
+  | "person_tick"
+  | "phone"
+  | "play"
+  | "play_circle"
+  | "plus"
+  | "plus_large"
+  | "pound"
+  | "print"
+  | "progress"
+  | "progressed"
+  | "question"
+  | "refresh"
+  | "refresh_clock"
+  | "remove"
+  | "sage_coin"
+  | "save"
+  | "scan"
+  | "search"
+  | "services"
+  | "settings"
+  | "share"
+  | "shop"
+  | "sort_down"
+  | "sort_up"
+  | "spanner"
+  | "split"
+  | "split_container"
+  | "square_dot"
+  | "squares_nine"
+  | "stacked_boxes"
+  | "stacked_squares"
+  | "submitted"
+  | "sync"
+  | "tag"
+  | "three_boxes"
+  | "tick"
+  | "tick_circle"
+  | "unlocked"
+  | "upload"
+  | "uploaded"
+  | "video"
+  | "view"
+  | "warning";
+
+export interface IconProps extends MarginProps {
+  /** Icon type */
+  type: IconType;
+  /** Background size */
+  bgSize?: BgSize;
+  /** Background shape */
+  bgShape?: BackgroundShape;
+  /** Icon font size */
+  fontSize?: FontSize;
+  /** Icon colour, provide any color from palette or any valid css color value. */
+  color?: string;
+  /** Background colour, provide any color from palette or any valid css color value. */
+  bg?: string;
+  /** Sets the icon in the disabled state */
+  disabled?: boolean;
+  /** Aria label for accessibility purposes */
+  ariaLabel?: string;
+  /** Set whether icon should be recognised by assistive technologies */
+  "aria-hidden"?: boolean;
+  /** The message to be displayed within the tooltip */
+  tooltipMessage?: React.ReactNode;
+  /** The position to display the tooltip */
+  tooltipPosition?: TooltipPositions;
+  /** Control whether the tooltip is visible */
+  tooltipVisible?: boolean;
+  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  tooltipBgColor?: string;
+  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  tooltipFontColor?: string;
+  /** Overrides the default flip behaviour of the Tooltip */
+  tooltipFlipOverrides?: TooltipPositions[];
+  /** Id passed to the tooltip container, used for accessibility purposes */
+  tooltipId?: string;
+}
+
+declare function Icon(
+  props: IconProps & React.RefAttributes<HTMLSpanElement>
+): JSX.Element;
+
+export default Icon;

package/esm/components/icon/icon.style.d.ts

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