@atlaskit/flag 14.4.1

package/dist/cjs/flag.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-up"));
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
+
+var _constants2 = require("./constants");
+
+var _theme = require("./theme");
+
+var _expander = _interopRequireDefault(require("./expander"));
+
+var _flagActions = _interopRequireDefault(require("./flag-actions"));
+
+var _flagGroup = require("./flag-group");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+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) { (0, _defineProperty2.default)(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 noop() {}
+
+var analyticsAttributes = {
+  componentName: 'flag',
+  packageName: "@atlaskit/flag",
+  packageVersion: "14.4.1"
+};
+var gridSize = (0, _constants.gridSize)();
+var doubleGridSize = gridSize * 2;
+var headerHeight = gridSize * 4;
+
+var Flag = function Flag(props) {
+  var _props$actions = props.actions,
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? _constants2.DEFAULT_APPEARANCE : _props$appearance,
+      icon = props.icon,
+      title = props.title,
+      description = props.description,
+      linkComponent = props.linkComponent,
+      onMouseOver = props.onMouseOver,
+      _props$onFocus = props.onFocus,
+      onFocus = _props$onFocus === void 0 ? noop : _props$onFocus,
+      onMouseOut = props.onMouseOut,
+      _props$onBlur = props.onBlur,
+      onBlur = _props$onBlur === void 0 ? noop : _props$onBlur,
+      _props$onDismissed = props.onDismissed,
+      onDismissedProp = _props$onDismissed === void 0 ? noop : _props$onDismissed,
+      testId = props.testId,
+      id = props.id,
+      analyticsContext = props.analyticsContext;
+
+  var _useFlagGroup = (0, _flagGroup.useFlagGroup)(),
+      onDismissedFromFlagGroup = _useFlagGroup.onDismissed,
+      isDismissAllowed = _useFlagGroup.isDismissAllowed;
+
+  var onDismissed = (0, _react.useCallback)(function (id, analyticsEvent) {
+    onDismissedProp(id, analyticsEvent);
+    onDismissedFromFlagGroup(id, analyticsEvent);
+  }, [onDismissedProp, onDismissedFromFlagGroup]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isExpanded = _useState2[0],
+      setIsExpanded = _useState2[1];
+
+  var onDismissedAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
+    fn: onDismissed,
+    action: 'dismissed',
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var isBold = appearance !== _constants2.DEFAULT_APPEARANCE;
+  var renderToggleOrDismissButton = (0, _react.useCallback)(function (_ref) {
+    var mode = _ref.mode;
+
+    // If it is normal appearance a toggle button cannot be rendered
+    // Ensure onDismissed is defined and isDismissAllowed is true to render
+    // the dismiss button
+    if (!isBold && !isDismissAllowed) {
+      return null;
+    } // If it is bold then ensure there is a description or actions to render
+    // the toggle button
+
+
+    if (isBold && !description && !actions.length) {
+      return null;
+    }
+
+    var ButtonIcon = _cross.default;
+    var buttonLabel = 'Dismiss';
+
+    var buttonAction = function buttonAction() {
+      if (isDismissAllowed) {
+        onDismissedAnalytics(id);
+      }
+    };
+
+    var size = 'small';
+    var buttonTestId = testId && "".concat(testId, "-dismiss");
+    var a11yProps = {};
+
+    if (isBold) {
+      ButtonIcon = isExpanded ? _chevronUp.default : _chevronDown.default;
+      buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+
+      buttonAction = function buttonAction() {
+        return setIsExpanded(!isExpanded);
+      };
+
+      size = 'large';
+      buttonTestId = testId && "".concat(testId, "-toggle");
+      a11yProps = {
+        'aria-expanded': isExpanded
+      };
+    }
+
+    return (0, _core.jsx)("button", (0, _extends2.default)({
+      css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            appearance: none;\n            background: none;\n            border: none;\n            border-radius: ", "px;\n            color: ", ";\n            cursor: pointer;\n            flex: 0 0 auto;\n            line-height: 1;\n            margin-left: ", "px;\n            padding: 0;\n            white-space: nowrap;\n            &:focus {\n              outline: none;\n              box-shadow: 0 0 0 2px ", ";\n            }\n          "])), (0, _constants.borderRadius)(), (0, _theme.getFlagTextColor)(appearance, mode), gridSize, (0, _theme.getFlagFocusRingColor)(appearance, mode)),
+      onClick: buttonAction,
+      "data-testid": buttonTestId,
+      type: "button"
+    }, a11yProps), (0, _core.jsx)(ButtonIcon, {
+      label: buttonLabel,
+      size: size
+    }));
+  }, [actions.length, appearance, description, id, isBold, isDismissAllowed, isExpanded, onDismissedAnalytics, testId]);
+  (0, _react.useEffect)(function () {
+    // If buttons are removed as a prop, update isExpanded to be false
+    if (isBold && isExpanded && !description && !actions.length) {
+      setIsExpanded(false);
+    }
+  }, [actions.length, description, isBold, isExpanded]);
+  var onFocusAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
+    fn: onFocus,
+    action: 'focused',
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var onBlurAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)(_objectSpread({
+    fn: onBlur,
+    action: 'blurred',
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var autoDismissProps = {
+    onMouseOver: onMouseOver,
+    onFocus: onFocusAnalytics,
+    onMouseOut: onMouseOut,
+    onBlur: onBlurAnalytics
+  };
+  var OptionalDismissButton = renderToggleOrDismissButton;
+  var boxShadow = "0 20px 32px -8px ".concat(_theme.flagShadowColor);
+
+  if (!isBold) {
+    boxShadow = "0 0 1px ".concat(_theme.flagBorderColor, ", ").concat(boxShadow);
+  }
+
+  return (0, _core.jsx)(_components.default.Consumer, null, function (tokens) {
+    var mode = tokens.mode;
+    var textColour = (0, _theme.getFlagTextColor)(appearance, mode);
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              background-color: ", ";\n              border-radius: ", "px;\n              box-shadow: ", ";\n              color: ", ";\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n            "])), (0, _theme.getFlagBackgroundColor)(appearance, mode), (0, _constants.borderRadius)(), boxShadow, textColour, _constants.layers.flag()),
+      role: "alert",
+      "data-testid": testId
+    }, autoDismissProps), (0, _core.jsx)("div", {
+      css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n                width: 100%;\n                padding: ", "px;\n                box-sizing: border-box;\n                border-radius: ", "px;\n\n                &:focus-visible {\n                  outline: none;\n                  box-shadow: 0 0 0 2px\n                    ", ";\n                }\n\n                @supports not selector(*:focus-visible) {\n                  &:focus {\n                    outline: none;\n                    box-shadow: 0 0 0 2px\n                      ", ";\n                  }\n                }\n\n                @media screen and (forced-colors: active),\n                  screen and (-ms-high-contrast: active) {\n                  &:focus-visible {\n                    outline: 1px solid;\n                  }\n                }\n              "])), doubleGridSize, (0, _constants.borderRadius)(), (0, _theme.getFlagFocusRingColor)(appearance, mode), (0, _theme.getFlagFocusRingColor)(appearance, mode)) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0
+    }, (0, _core.jsx)("div", {
+      css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), headerHeight)
+    }, icon, (0, _core.jsx)("span", {
+      css: (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n                    color: ", ";\n                    font-weight: 600;\n                    flex: 1;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    padding: 0 0 0 ", "px;\n                  "])), textColour, doubleGridSize)
+    }, title), (0, _core.jsx)(OptionalDismissButton, {
+      mode: mode
+    })), (0, _core.jsx)(_expander.default, {
+      isExpanded: !isBold || isExpanded,
+      testId: testId
+    }, description && (0, _core.jsx)("div", {
+      css: (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n                      color: ", ";\n                      word-wrap: break-word;\n                      overflow: auto;\n                      max-height: 100px; /* height is defined as 5 lines maximum by design */\n                    "])), textColour),
+      "data-testid": testId && "".concat(testId, "-description")
+    }, description), (0, _core.jsx)(_flagActions.default, {
+      actions: actions,
+      appearance: appearance,
+      linkComponent: linkComponent,
+      testId: testId,
+      mode: mode
+    }))));
+  });
+};
+
+var _default = Flag;
+exports.default = _default;

package/dist/cjs/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _flag.default;
+  }
+});
+Object.defineProperty(exports, "AutoDismissFlag", {
+  enumerable: true,
+  get: function get() {
+    return _autoDismissFlag.default;
+  }
+});
+Object.defineProperty(exports, "FlagGroup", {
+  enumerable: true,
+  get: function get() {
+    return _flagGroup.default;
+  }
+});
+Object.defineProperty(exports, "useFlags", {
+  enumerable: true,
+  get: function get() {
+    return _flagProvider.useFlags;
+  }
+});
+Object.defineProperty(exports, "withFlagsProvider", {
+  enumerable: true,
+  get: function get() {
+    return _flagProvider.withFlagsProvider;
+  }
+});
+Object.defineProperty(exports, "FlagsProvider", {
+  enumerable: true,
+  get: function get() {
+    return _flagProvider.FlagsProvider;
+  }
+});
+
+var _flag = _interopRequireDefault(require("./flag"));
+
+var _autoDismissFlag = _interopRequireDefault(require("./auto-dismiss-flag"));
+
+var _flagGroup = _interopRequireDefault(require("./flag-group"));
+
+var _flagProvider = require("./flag-provider");

package/dist/cjs/theme.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActionColor = exports.getActionBackground = exports.getFlagFocusRingColor = exports.flagShadowColor = exports.getFlagTextColor = exports.flagBorderColor = exports.getFlagBackgroundColor = void 0;
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var flagBackgroundColor = {
+  error: {
+    light: colors.R400,
+    dark: colors.R300
+  },
+  info: {
+    light: colors.N500,
+    dark: colors.N500
+  },
+  normal: {
+    light: colors.N0,
+    dark: colors.DN50
+  },
+  success: {
+    light: colors.G400,
+    dark: colors.G300
+  },
+  warning: {
+    light: colors.Y200,
+    dark: colors.Y300
+  }
+};
+
+var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
+  return flagBackgroundColor[appearance][mode];
+};
+
+exports.getFlagBackgroundColor = getFlagBackgroundColor;
+var flagBorderColor = colors.N60A;
+exports.flagBorderColor = flagBorderColor;
+var flagTextColor = {
+  error: {
+    light: colors.N0,
+    dark: colors.DN40
+  },
+  info: {
+    light: colors.N0,
+    dark: colors.DN600
+  },
+  normal: {
+    light: colors.N500,
+    dark: colors.DN600
+  },
+  success: {
+    light: colors.N0,
+    dark: colors.DN40
+  },
+  warning: {
+    light: colors.N700,
+    dark: colors.DN40
+  }
+};
+
+var getFlagTextColor = function getFlagTextColor(appearance, mode) {
+  return flagTextColor[appearance][mode];
+};
+
+exports.getFlagTextColor = getFlagTextColor;
+var flagShadowColor = colors.N50A;
+exports.flagShadowColor = flagShadowColor;
+var flagFocusRingColor = {
+  error: {
+    light: colors.N40,
+    dark: colors.N40
+  },
+  info: {
+    light: colors.N40,
+    dark: colors.N40
+  },
+  normal: {
+    light: colors.B100,
+    dark: colors.B100
+  },
+  success: {
+    light: colors.N40,
+    dark: colors.N40
+  },
+  warning: {
+    light: colors.N200,
+    dark: colors.N200
+  }
+};
+
+var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
+  return flagFocusRingColor[appearance][mode];
+};
+
+exports.getFlagFocusRingColor = getFlagFocusRingColor;
+var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
+var actionBackground = {
+  success: {
+    light: lightButtonBackground,
+    dark: colors.N30A
+  },
+  info: {
+    light: lightButtonBackground,
+    dark: lightButtonBackground
+  },
+  error: {
+    light: lightButtonBackground,
+    dark: colors.N30A
+  },
+  warning: {
+    light: colors.N30A,
+    dark: colors.N30A
+  },
+  normal: {
+    light: 'none',
+    dark: 'none'
+  }
+};
+var actionColor = {
+  success: {
+    light: colors.N0,
+    dark: colors.DN40
+  },
+  info: {
+    light: colors.N0,
+    dark: colors.DN600
+  },
+  error: {
+    light: colors.N0,
+    dark: colors.DN600
+  },
+  warning: {
+    light: colors.N700,
+    dark: colors.DN40
+  },
+  normal: {
+    light: colors.B400,
+    dark: colors.B100
+  }
+};
+
+var getActionBackground = function getActionBackground(appearance, mode) {
+  return actionBackground[appearance][mode];
+};
+
+exports.getActionBackground = getActionBackground;
+
+var getActionColor = function getActionColor(appearance, mode) {
+  return actionColor[appearance][mode];
+};
+
+exports.getActionColor = getActionColor;

package/dist/cjs/types.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppearanceArray = void 0;
+// exported for testing - keep in sync from `type AppearanceTypes`
+var AppearanceArray = ['error', 'info', 'normal', 'success', 'warning']; // CreateFlagsArg makes id optional so define this prop separately
+
+exports.AppearanceArray = AppearanceArray;

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/flag",
+	"version": "14.4.1",
+	"sideEffects": false
+}