baseui 11.0.3 → 11.1.2

package/badge/styled-components.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledHintDot = exports.StyledNotificationCircle = exports.StyledBadge = exports.StyledPositioner = exports.StyledRoot = void 0;
+
+var _index = require("../styles/index.js");
+
+var _constants = require("./constants.js");
+
+var _ROLE$badge, _ROLE$notificationCir, _ROLE$hintDot, _Object$freeze;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function getColorStyles(_ref) {
+  var _HIERARCHY$primary, _HIERARCHY$secondary, _COLOR_STYLES;
+
+  var $theme = _ref.$theme,
+      $hierarchy = _ref.$hierarchy,
+      $color = _ref.$color;
+  var COLOR_STYLES = (_COLOR_STYLES = {}, _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.primary, (_HIERARCHY$primary = {}, _defineProperty(_HIERARCHY$primary, _constants.COLOR.accent, {
+    color: $theme.colors.contentInversePrimary,
+    backgroundColor: $theme.colors.backgroundAccent
+  }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.primary, {
+    color: $theme.colors.contentInversePrimary,
+    backgroundColor: $theme.colors.backgroundInversePrimary
+  }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.positive, {
+    color: $theme.colors.contentInversePrimary,
+    backgroundColor: $theme.colors.backgroundPositive
+  }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.negative, {
+    color: $theme.colors.contentInversePrimary,
+    backgroundColor: $theme.colors.backgroundNegative
+  }), _defineProperty(_HIERARCHY$primary, _constants.COLOR.warning, {
+    color: $theme.colors.primaryA,
+    backgroundColor: $theme.colors.backgroundWarning
+  }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, _constants.COLOR.accent, {
+    color: $theme.colors.contentAccent,
+    backgroundColor: $theme.colors.backgroundLightAccent
+  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.primary, {
+    color: $theme.colors.primaryA,
+    backgroundColor: $theme.colors.backgroundSecondary
+  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.positive, {
+    color: $theme.colors.contentPositive,
+    backgroundColor: $theme.colors.backgroundLightPositive
+  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.negative, {
+    color: $theme.colors.contentNegative,
+    backgroundColor: $theme.colors.backgroundLightNegative
+  }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.warning, {
+    color: $theme.colors.contentWarning,
+    backgroundColor: $theme.colors.backgroundLightWarning
+  }), _HIERARCHY$secondary)), _COLOR_STYLES);
+  return COLOR_STYLES[$hierarchy][$color];
+}
+
+var DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT = {
+  top: '-10px',
+  right: '-10px'
+};
+var DEFAULT_HINT_DOT_PLACEMENT = {
+  top: '-4px',
+  right: '-4px'
+};
+var POSITION_STYLES = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, _constants.ROLE.badge, (_ROLE$badge = {}, _defineProperty(_ROLE$badge, _constants.PLACEMENT.topEdge, {
+  top: '-8px',
+  left: '50%',
+  transform: 'translateX(-50%)'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.bottomEdge, {
+  bottom: '-8px',
+  left: '50%',
+  transform: 'translateX(-50%)'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.topLeft, {
+  top: '16px',
+  left: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.topRight, {
+  top: '16px',
+  right: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.bottomRight, {
+  bottom: '16px',
+  right: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.bottomLeft, {
+  bottom: '16px',
+  left: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.topLeftEdge, {
+  top: '-8px',
+  left: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.topRightEdge, {
+  top: '-8px',
+  right: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.bottomRightEdge, {
+  bottom: '-8px',
+  right: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.bottomLeftEdge, {
+  bottom: '-8px',
+  left: '16px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.leftTopEdge, {
+  top: '16px',
+  left: '-8px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.rightTopEdge, {
+  top: '16px',
+  right: '-8px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.rightBottomEdge, {
+  bottom: '16px',
+  right: '-8px'
+}), _defineProperty(_ROLE$badge, _constants.PLACEMENT.leftBottomEdge, {
+  bottom: '16px',
+  left: '-8px'
+}), _ROLE$badge)), _defineProperty(_Object$freeze, _constants.ROLE.notificationCircle, (_ROLE$notificationCir = {}, _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.topLeft, {
+  top: '-10px',
+  left: '-10px'
+}), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.topRight, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.topEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.bottomEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.bottomRight, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.bottomLeft, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.topLeftEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.topRightEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.bottomRightEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.bottomLeftEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.leftTopEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.rightTopEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.rightBottomEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _defineProperty(_ROLE$notificationCir, _constants.PLACEMENT.leftBottomEdge, DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT), _ROLE$notificationCir)), _defineProperty(_Object$freeze, _constants.ROLE.hintDot, (_ROLE$hintDot = {}, _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topLeft, {
+  top: '-4px',
+  left: '-4px'
+}), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topRight, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomRight, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomLeft, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topLeftEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.topRightEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomRightEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.bottomLeftEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.leftTopEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.rightTopEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.rightBottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _defineProperty(_ROLE$hintDot, _constants.PLACEMENT.leftBottomEdge, DEFAULT_HINT_DOT_PLACEMENT), _ROLE$hintDot)), _Object$freeze));
+var StyledRoot = (0, _index.styled)('div', function () {
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    lineHeight: 'initial'
+  };
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+var TOP_PLACEMENTS = [_constants.PLACEMENT.topLeft, _constants.PLACEMENT.topRight, _constants.PLACEMENT.topLeftEdge, _constants.PLACEMENT.topEdge, _constants.PLACEMENT.topRightEdge, _constants.PLACEMENT.leftTopEdge, _constants.PLACEMENT.rightTopEdge];
+var BOTTOM_PLACEMENTS = [_constants.PLACEMENT.bottomLeft, _constants.PLACEMENT.bottomRight, _constants.PLACEMENT.bottomLeftEdge, _constants.PLACEMENT.bottomEdge, _constants.PLACEMENT.bottomRightEdge, _constants.PLACEMENT.leftBottomEdge, _constants.PLACEMENT.rightBottomEdge];
+var LEFT_PLACEMENTS = [_constants.PLACEMENT.topLeft, _constants.PLACEMENT.topLeftEdge, _constants.PLACEMENT.topEdge, _constants.PLACEMENT.bottomLeft, _constants.PLACEMENT.bottomLeftEdge, _constants.PLACEMENT.bottomEdge, _constants.PLACEMENT.leftTopEdge, _constants.PLACEMENT.leftBottomEdge];
+var RIGHT_PLACEMENTS = [_constants.PLACEMENT.topRight, _constants.PLACEMENT.topRightEdge, _constants.PLACEMENT.bottomRight, _constants.PLACEMENT.bottomRightEdge, _constants.PLACEMENT.rightTopEdge, _constants.PLACEMENT.rightBottomEdge];
+var StyledPositioner = (0, _index.styled)('div', function (_ref2) {
+  var $theme = _ref2.$theme,
+      $role = _ref2.$role,
+      $placement = _ref2.$placement,
+      $horizontalOffset = _ref2.$horizontalOffset,
+      $verticalOffset = _ref2.$verticalOffset;
+  var positionStyle = POSITION_STYLES[$role][$placement];
+
+  if ($verticalOffset) {
+    if (TOP_PLACEMENTS.includes($placement)) {
+      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
+        top: $verticalOffset
+      });
+    }
+
+    if (BOTTOM_PLACEMENTS.includes($placement)) {
+      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
+        bottom: $verticalOffset
+      });
+    }
+  }
+
+  if ($horizontalOffset) {
+    if (LEFT_PLACEMENTS.includes($placement)) {
+      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
+        left: $horizontalOffset
+      });
+    }
+
+    if (RIGHT_PLACEMENTS.includes($placement)) {
+      positionStyle = _objectSpread(_objectSpread({}, positionStyle), {}, {
+        right: $horizontalOffset
+      });
+    }
+  }
+
+  return _objectSpread(_objectSpread({}, positionStyle), {}, {
+    position: 'absolute',
+    lineHeight: 'initial'
+  });
+});
+exports.StyledPositioner = StyledPositioner;
+StyledPositioner.displayName = "StyledPositioner";
+var StyledBadge = (0, _index.styled)('div', function (_ref3) {
+  var $theme = _ref3.$theme,
+      _ref3$$shape = _ref3.$shape,
+      $shape = _ref3$$shape === void 0 ? _constants.SHAPE.rectangle : _ref3$$shape,
+      _ref3$$color = _ref3.$color,
+      $color = _ref3$$color === void 0 ? _constants.COLOR.accent : _ref3$$color,
+      _ref3$$hierarchy = _ref3.$hierarchy,
+      $hierarchy = _ref3$$hierarchy === void 0 ? _constants.HIERARCHY.primary : _ref3$$hierarchy,
+      $hidden = _ref3.$hidden;
+  return _objectSpread(_objectSpread({
+    visibility: $hidden ? 'hidden' : 'inherit',
+    boxSizing: 'border-box',
+    height: $theme.sizing.scale700,
+    borderRadius: $shape === _constants.SHAPE.rectangle ? $theme.borders.radius200 : $theme.borders.radius500,
+    paddingRight: $shape === _constants.SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
+    paddingLeft: $shape === _constants.SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
+    display: 'inline-flex',
+    alignItems: 'center'
+  }, getColorStyles({
+    $theme: $theme,
+    $hierarchy: $hierarchy,
+    $color: $color
+  })), $hierarchy === _constants.HIERARCHY.primary ? $theme.typography.LabelSmall : $theme.typography.ParagraphSmall);
+});
+exports.StyledBadge = StyledBadge;
+StyledBadge.displayName = "StyledBadge";
+var StyledNotificationCircle = (0, _index.styled)('div', function (_ref4) {
+  var $theme = _ref4.$theme,
+      _ref4$$color = _ref4.$color,
+      $color = _ref4$$color === void 0 ? _constants.COLOR.accent : _ref4$$color,
+      $hidden = _ref4.$hidden;
+  return _objectSpread(_objectSpread({
+    visibility: $hidden ? 'hidden' : 'inherit',
+    height: $theme.sizing.scale700,
+    width: $theme.sizing.scale700,
+    borderRadius: '20px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }, getColorStyles({
+    $theme: $theme,
+    $hierarchy: _constants.HIERARCHY.primary,
+    $color: $color
+  })), $theme.typography.LabelXSmall);
+});
+exports.StyledNotificationCircle = StyledNotificationCircle;
+StyledNotificationCircle.displayName = "StyledNotificationCircle";
+var StyledHintDot = (0, _index.styled)('div', function (_ref5) {
+  var $theme = _ref5.$theme,
+      _ref5$$color = _ref5.$color,
+      $color = _ref5$$color === void 0 ? _constants.COLOR.accent : _ref5$$color,
+      $hidden = _ref5.$hidden;
+  return _objectSpread({
+    visibility: $hidden ? 'hidden' : 'inherit',
+    backgroundColor: $theme.colors[$color],
+    boxSizing: 'content-box',
+    height: '8px',
+    width: '8px',
+    borderRadius: '50%',
+    border: "4px solid ".concat($theme.colors.backgroundPrimary)
+  }, getColorStyles({
+    $theme: $theme,
+    $hierarchy: _constants.HIERARCHY.primary,
+    $color: $color
+  }));
+});
+exports.StyledHintDot = StyledHintDot;
+StyledHintDot.displayName = "StyledHintDot";

package/badge/styled-components.js.flow

@@ -0,0 +1,325 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import { styled } from '../styles/index.js';
+import type { PlacementT, ColorT, ShapeT, RoleT, HierarchyT } from './types.js';
+import { COLOR, SHAPE, ROLE, PLACEMENT, HIERARCHY } from './constants.js';
+
+function getColorStyles({ $theme, $hierarchy, $color }): {|
+  color: string,
+  backgroundColor: string,
+|} {
+  const COLOR_STYLES = {
+    [HIERARCHY.primary]: {
+      [COLOR.accent]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundAccent,
+      },
+      [COLOR.primary]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundInversePrimary,
+      },
+      [COLOR.positive]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundPositive,
+      },
+      [COLOR.negative]: {
+        color: $theme.colors.contentInversePrimary,
+        backgroundColor: $theme.colors.backgroundNegative,
+      },
+      [COLOR.warning]: {
+        color: $theme.colors.primaryA,
+        backgroundColor: $theme.colors.backgroundWarning,
+      },
+    },
+    [HIERARCHY.secondary]: {
+      [COLOR.accent]: {
+        color: $theme.colors.contentAccent,
+        backgroundColor: $theme.colors.backgroundLightAccent,
+      },
+      [COLOR.primary]: {
+        color: $theme.colors.primaryA,
+        backgroundColor: $theme.colors.backgroundSecondary,
+      },
+      [COLOR.positive]: {
+        color: $theme.colors.contentPositive,
+        backgroundColor: $theme.colors.backgroundLightPositive,
+      },
+      [COLOR.negative]: {
+        color: $theme.colors.contentNegative,
+        backgroundColor: $theme.colors.backgroundLightNegative,
+      },
+      [COLOR.warning]: {
+        color: $theme.colors.contentWarning,
+        backgroundColor: $theme.colors.backgroundLightWarning,
+      },
+    },
+  };
+
+  return COLOR_STYLES[$hierarchy][$color];
+}
+
+const DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT = {
+  top: '-10px',
+  right: '-10px',
+};
+
+const DEFAULT_HINT_DOT_PLACEMENT = {
+  top: '-4px',
+  right: '-4px',
+};
+
+const POSITION_STYLES = Object.freeze({
+  [ROLE.badge]: {
+    [PLACEMENT.topEdge]: {
+      top: '-8px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+    },
+    [PLACEMENT.bottomEdge]: {
+      bottom: '-8px',
+      left: '50%',
+      transform: 'translateX(-50%)',
+    },
+    [PLACEMENT.topLeft]: {
+      top: '16px',
+      left: '16px',
+    },
+    [PLACEMENT.topRight]: {
+      top: '16px',
+      right: '16px',
+    },
+    [PLACEMENT.bottomRight]: {
+      bottom: '16px',
+      right: '16px',
+    },
+
+    [PLACEMENT.bottomLeft]: {
+      bottom: '16px',
+      left: '16px',
+    },
+    [PLACEMENT.topLeftEdge]: {
+      top: '-8px',
+      left: '16px',
+    },
+    [PLACEMENT.topRightEdge]: {
+      top: '-8px',
+      right: '16px',
+    },
+    [PLACEMENT.bottomRightEdge]: {
+      bottom: '-8px',
+      right: '16px',
+    },
+    [PLACEMENT.bottomLeftEdge]: {
+      bottom: '-8px',
+      left: '16px',
+    },
+    [PLACEMENT.leftTopEdge]: {
+      top: '16px',
+      left: '-8px',
+    },
+    [PLACEMENT.rightTopEdge]: {
+      top: '16px',
+      right: '-8px',
+    },
+    [PLACEMENT.rightBottomEdge]: {
+      bottom: '16px',
+      right: '-8px',
+    },
+    [PLACEMENT.leftBottomEdge]: {
+      bottom: '16px',
+      left: '-8px',
+    },
+  },
+  [ROLE.notificationCircle]: {
+    [PLACEMENT.topLeft]: {
+      top: '-10px',
+      left: '-10px',
+    },
+    [PLACEMENT.topRight]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    // NotificationCircle can only be placed topLeft or topRight, other values fall back to topRight
+    [PLACEMENT.topEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomRight]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomLeft]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.topLeftEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.topRightEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomRightEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.bottomLeftEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.leftTopEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.rightTopEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.rightBottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+    [PLACEMENT.leftBottomEdge]: DEFAULT_NOTIFICATION_CIRCLE_PLACEMENT,
+  },
+  [ROLE.hintDot]: {
+    [PLACEMENT.topLeft]: {
+      top: '-4px',
+      left: '-4px',
+    },
+    [PLACEMENT.topRight]: DEFAULT_HINT_DOT_PLACEMENT,
+    // HintDot can only be placed topLeft or topRight, other values fall back to topRight
+    [PLACEMENT.topEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomRight]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomLeft]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.topLeftEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.topRightEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomRightEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.bottomLeftEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.leftTopEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.rightTopEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.rightBottomEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+    [PLACEMENT.leftBottomEdge]: DEFAULT_HINT_DOT_PLACEMENT,
+  },
+});
+
+export const StyledRoot = styled<{}>('div', () => {
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    lineHeight: 'initial',
+  };
+});
+
+const TOP_PLACEMENTS = [
+  PLACEMENT.topLeft,
+  PLACEMENT.topRight,
+  PLACEMENT.topLeftEdge,
+  PLACEMENT.topEdge,
+  PLACEMENT.topRightEdge,
+  PLACEMENT.leftTopEdge,
+  PLACEMENT.rightTopEdge,
+];
+const BOTTOM_PLACEMENTS = [
+  PLACEMENT.bottomLeft,
+  PLACEMENT.bottomRight,
+  PLACEMENT.bottomLeftEdge,
+  PLACEMENT.bottomEdge,
+  PLACEMENT.bottomRightEdge,
+  PLACEMENT.leftBottomEdge,
+  PLACEMENT.rightBottomEdge,
+];
+const LEFT_PLACEMENTS = [
+  PLACEMENT.topLeft,
+  PLACEMENT.topLeftEdge,
+  PLACEMENT.topEdge,
+  PLACEMENT.bottomLeft,
+  PLACEMENT.bottomLeftEdge,
+  PLACEMENT.bottomEdge,
+  PLACEMENT.leftTopEdge,
+  PLACEMENT.leftBottomEdge,
+];
+const RIGHT_PLACEMENTS = [
+  PLACEMENT.topRight,
+  PLACEMENT.topRightEdge,
+  PLACEMENT.bottomRight,
+  PLACEMENT.bottomRightEdge,
+  PLACEMENT.rightTopEdge,
+  PLACEMENT.rightBottomEdge,
+];
+
+export const StyledPositioner = styled<{
+  $role: RoleT,
+  $placement: PlacementT,
+  $horizontalOffset?: ?string,
+  $verticalOffset?: ?string,
+}>('div', ({ $theme, $role, $placement, $horizontalOffset, $verticalOffset }) => {
+  let positionStyle = POSITION_STYLES[$role][$placement];
+
+  if ($verticalOffset) {
+    if (TOP_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle, top: $verticalOffset };
+    }
+    if (BOTTOM_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle, bottom: $verticalOffset };
+    }
+  }
+
+  if ($horizontalOffset) {
+    if (LEFT_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle, left: $horizontalOffset };
+    }
+    if (RIGHT_PLACEMENTS.includes($placement)) {
+      positionStyle = { ...positionStyle, right: $horizontalOffset };
+    }
+  }
+
+  return {
+    ...positionStyle,
+    position: 'absolute',
+    lineHeight: 'initial',
+  };
+});
+
+export const StyledBadge = styled<{
+  $shape?: ShapeT,
+  $color?: ColorT,
+  $hierarchy?: HierarchyT,
+  $hidden?: boolean,
+}>(
+  'div',
+  ({
+    $theme,
+    $shape = SHAPE.rectangle,
+    $color = COLOR.accent,
+    $hierarchy = HIERARCHY.primary,
+    $hidden,
+  }) => {
+    return {
+      visibility: $hidden ? 'hidden' : 'inherit',
+      boxSizing: 'border-box',
+      height: $theme.sizing.scale700,
+      borderRadius:
+        $shape === SHAPE.rectangle ? $theme.borders.radius200 : $theme.borders.radius500,
+      paddingRight: $shape === SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
+      paddingLeft: $shape === SHAPE.rectangle ? $theme.sizing.scale100 : $theme.sizing.scale300,
+      display: 'inline-flex',
+      alignItems: 'center',
+      ...getColorStyles({ $theme, $hierarchy, $color }),
+      ...($hierarchy === HIERARCHY.primary
+        ? $theme.typography.LabelSmall
+        : $theme.typography.ParagraphSmall),
+    };
+  }
+);
+
+export const StyledNotificationCircle = styled<{
+  $color?: ColorT,
+  $hidden?: boolean,
+}>('div', ({ $theme, $color = COLOR.accent, $hidden }) => {
+  return {
+    visibility: $hidden ? 'hidden' : 'inherit',
+    height: $theme.sizing.scale700,
+    width: $theme.sizing.scale700,
+    borderRadius: '20px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...getColorStyles({ $theme, $hierarchy: HIERARCHY.primary, $color }),
+    ...$theme.typography.LabelXSmall,
+  };
+});
+
+export const StyledHintDot = styled<{ $color: ColorT, $hidden?: boolean }>(
+  'div',
+  ({ $theme, $color = COLOR.accent, $hidden }) => {
+    return {
+      visibility: $hidden ? 'hidden' : 'inherit',
+      backgroundColor: $theme.colors[$color],
+      boxSizing: 'content-box',
+      height: '8px',
+      width: '8px',
+      borderRadius: '50%',
+      border: `4px solid ${$theme.colors.backgroundPrimary}`,
+      ...getColorStyles({ $theme, $hierarchy: HIERARCHY.primary, $color }),
+    };
+  }
+);
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/badge/types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var React = _interopRequireWildcard(require("react"));
+
+var _constants = require("./constants.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

package/badge/types.js.flow

@@ -0,0 +1,59 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+import * as React from 'react';
+import { HIERARCHY, SHAPE, COLOR, PLACEMENT, ROLE } from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+
+export type HierarchyT = $Values<typeof HIERARCHY>;
+export type ShapeT = $Values<typeof SHAPE>;
+export type ColorT = $Values<typeof COLOR>;
+export type PlacementT = $Values<typeof PLACEMENT>;
+export type RoleT = $Values<typeof ROLE>;
+
+export type BadgeOverridesT = {
+  Root?: OverrideT,
+  Positioner?: OverrideT,
+  Badge?: OverrideT,
+};
+
+export type BadgePropsT = {
+  content: React.Node,
+  hierarchy?: HierarchyT,
+  shape?: ShapeT,
+  color?: ColorT,
+  placement?: PlacementT,
+  hidden?: boolean,
+  horizontalOffset?: string,
+  verticalOffset?: string,
+  overrides?: BadgeOverridesT,
+  children?: React.Node,
+};
+
+export type NotificationCirclePropsT = {
+  content: React.Node,
+  color?: ColorT,
+  placement?: PlacementT,
+  hidden?: boolean,
+  horizontalOffset?: string,
+  verticalOffset?: string,
+  overrides?: BadgeOverridesT,
+  children?: React.Node,
+};
+
+export type HintDotPropsT = {
+  color?: ColorT,
+  hidden?: boolean,
+  horizontalOffset?: string,
+  verticalOffset?: string,
+  overrides?: BadgeOverridesT,
+  children?: React.Node,
+};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/badge/utils.js

@@ -0,0 +1,33 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAnchorFromChildren = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+var getAnchorFromChildren = function getAnchorFromChildren(children) {
+  var childArray = React.Children.toArray(children);
+
+  if (childArray.length !== 1) {
+    // eslint-disable-next-line no-console
+    console.error("[baseui] No more than 1 child may be passed to Badge, found ".concat(childArray.length, " children"));
+  }
+
+  return childArray[0];
+};
+
+exports.getAnchorFromChildren = getAnchorFromChildren;