@atlaskit/lozenge 11.1.2

package/dist/cjs/Lozenge/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+/** @jsx jsx */
+var defaultAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N40),
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N500)
+});
+var inprogressAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
+  color: (0, _tokens.token)('color.text.brand', _colors.B500)
+});
+var movedAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleWarning.resting', _colors.Y75),
+  color: (0, _tokens.token)('color.text.warning', _colors.N800)
+});
+var newAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleDiscovery.resting', _colors.P50),
+  color: (0, _tokens.token)('color.text.discovery', _colors.P500)
+});
+var removedAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleDanger.resting', _colors.R50),
+  color: (0, _tokens.token)('color.text.danger', _colors.R500)
+});
+var successAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.subtleSuccess.resting', _colors.G50),
+  color: (0, _tokens.token)('color.text.success', _colors.G500)
+});
+var defaultBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldNeutral.resting', _colors.N500),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var inprogressBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var movedBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldWarning.resting', _colors.Y500),
+  color: (0, _tokens.token)('color.text.onBoldWarning', _colors.N800)
+});
+var newBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldDiscovery.resting', _colors.P400),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var removedBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldDanger.resting', _colors.R400),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var successBoldAppearanceStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.boldSuccess.resting', _colors.G400),
+  color: (0, _tokens.token)('color.text.onBold', _colors.N0)
+});
+var subtleAppearances = {
+  default: defaultAppearanceStyles,
+  inprogress: inprogressAppearanceStyles,
+  moved: movedAppearanceStyles,
+  new: newAppearanceStyles,
+  removed: removedAppearanceStyles,
+  success: successAppearanceStyles
+};
+var boldAppearances = {
+  default: defaultBoldAppearanceStyles,
+  inprogress: inprogressBoldAppearanceStyles,
+  moved: movedBoldAppearanceStyles,
+  new: newBoldAppearanceStyles,
+  removed: removedBoldAppearanceStyles,
+  success: successBoldAppearanceStyles
+};
+var contentStyles = (0, _core.css)({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  width: '100%',
+  padding: "0 ".concat((0, _constants.gridSize)() / 2, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  verticalAlign: 'top',
+  whiteSpace: 'nowrap'
+});
+var containerStyles = (0, _core.css)({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  maxWidth: '100%',
+  padding: '2px 0 3px 0',
+  borderRadius: (0, _constants.borderRadius)(),
+  fontSize: '11px',
+  fontWeight: 700,
+  lineHeight: 1,
+  textTransform: 'uppercase',
+  verticalAlign: 'baseline'
+});
+/**
+ * __Lozenge__
+ *
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
+ *
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
+ * - [Code](https://atlassian.design/components/lozenge/code)
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
+ */
+
+var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var children = _ref.children,
+      testId = _ref.testId,
+      _ref$isBold = _ref.isBold,
+      isBold = _ref$isBold === void 0 ? false : _ref$isBold,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style;
+  return (0, _core.jsx)("span", {
+    style: {
+      backgroundColor: style.backgroundColor,
+      color: style.color
+    },
+    css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
+    "data-testid": testId
+  }, (0, _core.jsx)("span", {
+    style: {
+      maxWidth: maxWidth
+    },
+    css: contentStyles
+  }, children));
+});
+Lozenge.displayName = 'Lozenge';
+var _default = Lozenge;
+exports.default = _default;

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+"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 _Lozenge.default;
+  }
+});
+
+var _Lozenge = _interopRequireDefault(require("./Lozenge"));

package/dist/cjs/theme.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.boldTextColor = exports.boldBackgroundColor = exports.defaultTextColor = exports.defaultBackgroundColor = void 0;
+
+var _colors = require("@atlaskit/theme/colors");
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: DSP-1392 this file will be removed, don't import anything from this file elsewhere.
+
+/**
+ * @deprecated
+ */
+var defaultBackgroundColor = {
+  default: {
+    light: _colors.N40,
+    dark: _colors.N40
+  },
+  inprogress: {
+    light: _colors.B50,
+    dark: _colors.B50
+  },
+  moved: {
+    light: _colors.Y75,
+    dark: _colors.Y75
+  },
+  new: {
+    light: _colors.P50,
+    dark: _colors.P50
+  },
+  removed: {
+    light: _colors.R50,
+    dark: _colors.R50
+  },
+  success: {
+    light: _colors.G50,
+    dark: _colors.G50
+  }
+};
+/**
+ * @deprecated
+ */
+
+exports.defaultBackgroundColor = defaultBackgroundColor;
+var defaultTextColor = {
+  default: {
+    light: _colors.N500,
+    dark: _colors.N500
+  },
+  inprogress: {
+    light: _colors.B500,
+    dark: _colors.B500
+  },
+  moved: {
+    light: _colors.N800,
+    dark: _colors.N800
+  },
+  new: {
+    light: _colors.P500,
+    dark: _colors.P500
+  },
+  removed: {
+    light: _colors.R500,
+    dark: _colors.R500
+  },
+  success: {
+    light: _colors.G500,
+    dark: _colors.G500
+  }
+};
+/**
+ * @deprecated
+ */
+
+exports.defaultTextColor = defaultTextColor;
+var boldBackgroundColor = {
+  default: {
+    light: _colors.N500,
+    dark: _colors.N500
+  },
+  inprogress: {
+    light: _colors.B400,
+    dark: _colors.B400
+  },
+  moved: {
+    light: _colors.Y500,
+    dark: _colors.Y500
+  },
+  new: {
+    light: _colors.P400,
+    dark: _colors.P400
+  },
+  removed: {
+    light: _colors.R400,
+    dark: _colors.R400
+  },
+  success: {
+    light: _colors.G400,
+    dark: _colors.G400
+  }
+};
+/**
+ * @deprecated
+ */
+
+exports.boldBackgroundColor = boldBackgroundColor;
+var boldTextColor = {
+  default: {
+    light: _colors.N0,
+    dark: _colors.N0
+  },
+  inprogress: {
+    light: _colors.N0,
+    dark: _colors.N0
+  },
+  moved: {
+    light: _colors.N800,
+    dark: _colors.N800
+  },
+  new: {
+    light: _colors.N0,
+    dark: _colors.N0
+  },
+  removed: {
+    light: _colors.N0,
+    dark: _colors.N0
+  },
+  success: {
+    light: _colors.N0,
+    dark: _colors.N0
+  }
+};
+/**
+ * @deprecated
+ */
+
+exports.boldTextColor = boldTextColor;

package/dist/cjs/version.json

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

package/dist/es2019/Lozenge/index.js

@@ -0,0 +1,124 @@
+/** @jsx jsx */
+import { memo } from 'react';
+import { css, jsx } from '@emotion/core';
+import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+const defaultAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N40),
+  color: token('color.text.highEmphasis', N500)
+});
+const inprogressAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleBrand.resting', B50),
+  color: token('color.text.brand', B500)
+});
+const movedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleWarning.resting', Y75),
+  color: token('color.text.warning', N800)
+});
+const newAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+  color: token('color.text.discovery', P500)
+});
+const removedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDanger.resting', R50),
+  color: token('color.text.danger', R500)
+});
+const successAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleSuccess.resting', G50),
+  color: token('color.text.success', G500)
+});
+const defaultBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldNeutral.resting', N500),
+  color: token('color.text.onBold', N0)
+});
+const inprogressBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldBrand.resting', B400),
+  color: token('color.text.onBold', N0)
+});
+const movedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldWarning.resting', Y500),
+  color: token('color.text.onBoldWarning', N800)
+});
+const newBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDiscovery.resting', P400),
+  color: token('color.text.onBold', N0)
+});
+const removedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDanger.resting', R400),
+  color: token('color.text.onBold', N0)
+});
+const successBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldSuccess.resting', G400),
+  color: token('color.text.onBold', N0)
+});
+const subtleAppearances = {
+  default: defaultAppearanceStyles,
+  inprogress: inprogressAppearanceStyles,
+  moved: movedAppearanceStyles,
+  new: newAppearanceStyles,
+  removed: removedAppearanceStyles,
+  success: successAppearanceStyles
+};
+const boldAppearances = {
+  default: defaultBoldAppearanceStyles,
+  inprogress: inprogressBoldAppearanceStyles,
+  moved: movedBoldAppearanceStyles,
+  new: newBoldAppearanceStyles,
+  removed: removedBoldAppearanceStyles,
+  success: successBoldAppearanceStyles
+};
+const contentStyles = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  width: '100%',
+  padding: `0 ${gridSize() / 2}px`,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  verticalAlign: 'top',
+  whiteSpace: 'nowrap'
+});
+const containerStyles = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  maxWidth: '100%',
+  padding: '2px 0 3px 0',
+  borderRadius: borderRadius(),
+  fontSize: '11px',
+  fontWeight: 700,
+  lineHeight: 1,
+  textTransform: 'uppercase',
+  verticalAlign: 'baseline'
+});
+/**
+ * __Lozenge__
+ *
+ * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
+ *
+ * - [Examples](https://atlassian.design/components/lozenge/examples)
+ * - [Code](https://atlassian.design/components/lozenge/code)
+ * - [Usage](https://atlassian.design/components/lozenge/usage)
+ */
+
+const Lozenge = /*#__PURE__*/memo(({
+  children,
+  testId,
+  isBold = false,
+  appearance = 'default',
+  maxWidth = 200,
+  style = {}
+}) => jsx("span", {
+  style: {
+    backgroundColor: style.backgroundColor,
+    color: style.color
+  },
+  css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
+  "data-testid": testId
+}, jsx("span", {
+  style: {
+    maxWidth
+  },
+  css: contentStyles
+}, children)));
+Lozenge.displayName = 'Lozenge';
+export default Lozenge;

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { default } from './Lozenge';

package/dist/es2019/theme.js

@@ -0,0 +1,126 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO: DSP-1392 this file will be removed, don't import anything from this file elsewhere.
+import { B400, B50, B500, G400, G50, G500, N0, N40, N500, N800, P400, P50, P500, R400, R50, R500, Y500, Y75 } from '@atlaskit/theme/colors';
+/**
+ * @deprecated
+ */
+
+export const defaultBackgroundColor = {
+  default: {
+    light: N40,
+    dark: N40
+  },
+  inprogress: {
+    light: B50,
+    dark: B50
+  },
+  moved: {
+    light: Y75,
+    dark: Y75
+  },
+  new: {
+    light: P50,
+    dark: P50
+  },
+  removed: {
+    light: R50,
+    dark: R50
+  },
+  success: {
+    light: G50,
+    dark: G50
+  }
+};
+/**
+ * @deprecated
+ */
+
+export const defaultTextColor = {
+  default: {
+    light: N500,
+    dark: N500
+  },
+  inprogress: {
+    light: B500,
+    dark: B500
+  },
+  moved: {
+    light: N800,
+    dark: N800
+  },
+  new: {
+    light: P500,
+    dark: P500
+  },
+  removed: {
+    light: R500,
+    dark: R500
+  },
+  success: {
+    light: G500,
+    dark: G500
+  }
+};
+/**
+ * @deprecated
+ */
+
+export const boldBackgroundColor = {
+  default: {
+    light: N500,
+    dark: N500
+  },
+  inprogress: {
+    light: B400,
+    dark: B400
+  },
+  moved: {
+    light: Y500,
+    dark: Y500
+  },
+  new: {
+    light: P400,
+    dark: P400
+  },
+  removed: {
+    light: R400,
+    dark: R400
+  },
+  success: {
+    light: G400,
+    dark: G400
+  }
+};
+/**
+ * @deprecated
+ */
+
+export const boldTextColor = {
+  default: {
+    light: N0,
+    dark: N0
+  },
+  inprogress: {
+    light: N0,
+    dark: N0
+  },
+  moved: {
+    light: N800,
+    dark: N800
+  },
+  new: {
+    light: N0,
+    dark: N0
+  },
+  removed: {
+    light: N0,
+    dark: N0
+  },
+  success: {
+    light: N0,
+    dark: N0
+  }
+};
+/**
+ * @deprecated
+ */