@atlaskit/lozenge 11.1.2

package/dist/es2019/version.json

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

package/dist/esm/Lozenge/index.js

@@ -0,0 +1,129 @@
+/** @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';
+var defaultAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleNeutral.resting', N40),
+  color: token('color.text.highEmphasis', N500)
+});
+var inprogressAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleBrand.resting', B50),
+  color: token('color.text.brand', B500)
+});
+var movedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleWarning.resting', Y75),
+  color: token('color.text.warning', N800)
+});
+var newAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDiscovery.resting', P50),
+  color: token('color.text.discovery', P500)
+});
+var removedAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleDanger.resting', R50),
+  color: token('color.text.danger', R500)
+});
+var successAppearanceStyles = css({
+  backgroundColor: token('color.background.subtleSuccess.resting', G50),
+  color: token('color.text.success', G500)
+});
+var defaultBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldNeutral.resting', N500),
+  color: token('color.text.onBold', N0)
+});
+var inprogressBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldBrand.resting', B400),
+  color: token('color.text.onBold', N0)
+});
+var movedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldWarning.resting', Y500),
+  color: token('color.text.onBoldWarning', N800)
+});
+var newBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDiscovery.resting', P400),
+  color: token('color.text.onBold', N0)
+});
+var removedBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldDanger.resting', R400),
+  color: token('color.text.onBold', N0)
+});
+var successBoldAppearanceStyles = css({
+  backgroundColor: token('color.background.boldSuccess.resting', G400),
+  color: token('color.text.onBold', 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 = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  width: '100%',
+  padding: "0 ".concat(gridSize() / 2, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  verticalAlign: 'top',
+  whiteSpace: 'nowrap'
+});
+var 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)
+ */
+
+var Lozenge = /*#__PURE__*/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 jsx("span", {
+    style: {
+      backgroundColor: style.backgroundColor,
+      color: style.color
+    },
+    css: [isBold ? boldAppearances[appearance] : subtleAppearances[appearance], containerStyles],
+    "data-testid": testId
+  }, jsx("span", {
+    style: {
+      maxWidth: maxWidth
+    },
+    css: contentStyles
+  }, children));
+});
+Lozenge.displayName = 'Lozenge';
+export default Lozenge;

package/dist/esm/index.js

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

package/dist/esm/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 var 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 var 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 var 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 var 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
+ */

package/dist/esm/version.json

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

package/dist/types/Lozenge/index.d.ts

@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { CSSProperties, ReactNode } from 'react';
+export declare type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
+export interface LozengeProps {
+    /**
+     * The appearance type.
+     */
+    appearance?: ThemeAppearance;
+    /**
+     * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+     */
+    children?: ReactNode;
+    /**
+     * Determines whether to apply the bold style or not.
+     */
+    isBold?: boolean;
+    /**
+     * max-width of lozenge container. Default to 200px.
+     */
+    maxWidth?: number | string;
+    /**
+     * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
+     */
+    style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+/**
+ * __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)
+ */
+declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => JSX.Element>;
+export default Lozenge;

package/dist/types/index.d.ts

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

package/dist/types/theme.d.ts

@@ -0,0 +1,120 @@
+/**
+ * @deprecated
+ */
+export declare const defaultBackgroundColor: {
+    default: {
+        light: string;
+        dark: string;
+    };
+    inprogress: {
+        light: string;
+        dark: string;
+    };
+    moved: {
+        light: string;
+        dark: string;
+    };
+    new: {
+        light: string;
+        dark: string;
+    };
+    removed: {
+        light: string;
+        dark: string;
+    };
+    success: {
+        light: string;
+        dark: string;
+    };
+};
+/**
+ * @deprecated
+ */
+export declare const defaultTextColor: {
+    default: {
+        light: string;
+        dark: string;
+    };
+    inprogress: {
+        light: string;
+        dark: string;
+    };
+    moved: {
+        light: string;
+        dark: string;
+    };
+    new: {
+        light: string;
+        dark: string;
+    };
+    removed: {
+        light: string;
+        dark: string;
+    };
+    success: {
+        light: string;
+        dark: string;
+    };
+};
+/**
+ * @deprecated
+ */
+export declare const boldBackgroundColor: {
+    default: {
+        light: string;
+        dark: string;
+    };
+    inprogress: {
+        light: string;
+        dark: string;
+    };
+    moved: {
+        light: string;
+        dark: string;
+    };
+    new: {
+        light: string;
+        dark: string;
+    };
+    removed: {
+        light: string;
+        dark: string;
+    };
+    success: {
+        light: string;
+        dark: string;
+    };
+};
+/**
+ * @deprecated
+ */
+export declare const boldTextColor: {
+    default: {
+        light: string;
+        dark: string;
+    };
+    inprogress: {
+        light: string;
+        dark: string;
+    };
+    moved: {
+        light: string;
+        dark: string;
+    };
+    new: {
+        light: string;
+        dark: string;
+    };
+    removed: {
+        light: string;
+        dark: string;
+    };
+    success: {
+        light: string;
+        dark: string;
+    };
+};
+/**
+ * @deprecated
+ */
+export declare type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@atlaskit/lozenge",
+  "version": "11.1.2",
+  "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.tsx",
+  "atlassian": {
+    "team": "Design System Team",
+    "deprecatedAutoEntryPoints": true,
+    "inPublicMirror": true,
+    "releaseModel": "scheduled",
+    "website": {
+      "name": "Lozenge"
+    }
+  },
+  "dependencies": {
+    "@atlaskit/codemod-utils": "^3.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.2.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlaskit/build-utils": "*",
+    "@atlaskit/button": "*",
+    "@atlaskit/docs": "*",
+    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^8.0.1",
+    "jscodeshift": "^0.13.0",
+    "react-dom": "^16.8.0",
+    "typescript": "3.9.6",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "design-system": "v1",
+      "styling": "emotion",
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
+    }
+  },
+  "homepage": "https://atlassian.design/components/lozenge/",
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+}