@atlaskit/code 14.3.1 → 14.3.4

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/code
 
+## 14.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.3.3
+
+### Patch Changes
+
+- [`a1a89347baa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1a89347baa) - [ux] Instrumented `@atlaskit/code` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+- Updated dependencies
+
+## 14.3.2
+
+### Patch Changes
+
+- [`b5226ba2c15`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5226ba2c15) - Replace `bolt` with `yarn` for rendered example changeset commands
+
 ## 14.3.1
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -2,4 +2,4 @@ import React from 'react';
 
 import { Code } from '../src';
 
-export default () => <Code>bolt changeset</Code>;
+export default () => <Code>yarn changeset</Code>;

package/codemods/__tests__/14.0.0-lite-mode/14.0.0-lite-mode.ts

@@ -14,12 +14,12 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code language="text" text="bolt changeset" />. Then you will be prompted
+          <Code language="text" text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -32,12 +32,12 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code>bolt changeset</Code>. Then you will be prompted
+          <Code>yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -60,7 +60,7 @@ describe('all transforms should be applied', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <AkCode language={language} text="bolt changeset" />. Then you will be prompted
+          <AkCode language={language} text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -78,7 +78,7 @@ describe('all transforms should be applied', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <AkCode>bolt changeset</AkCode>. Then you will be prompted
+          <AkCode>yarn changeset</AkCode>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -186,11 +186,11 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
-          To start creating a changeset, run <Code language="text" text="bolt changeset" />. All g mate.
+          To start creating a changeset, run <Code language="text" text="yarn changeset" />. All g mate.
         </p>
       );
     }
@@ -202,11 +202,11 @@ describe('all transforms should be applied', () => {
     import { Code } from '@atlaskit/code';
 
     export default function CodeDefaultExample() {
-      const text = "bolt changeset";
+      const text = "yarn changeset";
 
       return (
         <p>
-          To start creating a changeset, run <Code>bolt changeset</Code>. All g mate.
+          To start creating a changeset, run <Code>yarn changeset</Code>. All g mate.
         </p>
       );
     }

package/codemods/__tests__/14.0.0-lite-mode/remove-language.ts

@@ -27,7 +27,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code language="text" text="bolt changeset" />. Then you will be prompted
+          <Code language="text" text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -43,7 +43,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -66,7 +66,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code language={language} text="bolt changeset" />. Then you will be prompted
+          <Code language={language} text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -84,7 +84,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -105,7 +105,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -120,7 +120,7 @@ describe('remove language prop', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );

package/codemods/__tests__/14.0.0-lite-mode/text-to-child.ts

@@ -19,7 +19,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code text="bolt changeset" />. Then you will be prompted
+          <Code text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -34,7 +34,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code>bolt changeset</Code>. Then you will be prompted
+          <Code>yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -51,7 +51,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset";
+    const text = "yarn changeset";
 
     export default function CodeDefaultExample() {
       return (
@@ -68,7 +68,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset";
+    const text = "yarn changeset";
 
     export default function CodeDefaultExample() {
       return (
@@ -95,7 +95,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code testId="hello!" text="bolt changeset" />. Then you will be prompted
+          <Code testId="hello!" text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -110,7 +110,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code testId="hello!">bolt changeset</Code>. Then you will be prompted
+          <Code testId="hello!">yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -133,7 +133,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code {...codeProps} text="bolt changeset" />. Then you will be prompted
+          <Code {...codeProps} text="yarn changeset" />. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -150,7 +150,7 @@ describe('make the test prop a child', () => {
       return (
         <p>
           To start creating a changeset, run{' '}
-          <Code {...codeProps}>bolt changeset</Code>. Then you will be prompted
+          <Code {...codeProps}>yarn changeset</Code>. Then you will be prompted
           to select packages for release.
         </p>
       );
@@ -167,7 +167,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset" ;
+    const text = "yarn changeset" ;
 
     export default function CodeDefaultExample() {
       return (
@@ -185,7 +185,7 @@ describe('make the test prop a child', () => {
 
     import { Code } from '@atlaskit/code';
 
-    const text = "bolt changeset" ;
+    const text = "yarn changeset" ;
 
     export default function CodeDefaultExample() {
       return (

package/dist/cjs/bidi-warning/bidi-warning-decorator.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = codeBidiWarningDecorator;
 exports.bidiCharacterRegex = void 0;
+exports.default = codeBidiWarningDecorator;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 

package/dist/cjs/bidi-warning/ui/index.js

@@ -17,6 +17,8 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _styled = require("./styled");
 
+var _excluded = ["children"];
+
 function BidiWarning(_ref) {
   var testId = _ref.testId,
       bidiCharacter = _ref.bidiCharacter,
@@ -48,7 +50,7 @@ function BidiWarning(_ref) {
 
 var CustomizedTagWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
-      rest = (0, _objectWithoutProperties2.default)(props, ["children"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
     ref: ref
   }), children);

package/dist/cjs/bidi-warning/ui/styled.js

@@ -26,7 +26,7 @@ var decoration = (0, _core.css)({
     padding: '0 4px',
     fontSize: '14px',
     lineHeight: '18px',
-    background: _colors.Y75,
+    background: "var(--ds-background-warning, ".concat(_colors.Y75, ")"),
 
     /**
      * Ensures the decoration receives pointer events when it occurs with
@@ -38,11 +38,12 @@ var decoration = (0, _core.css)({
     content: '"<"attr(data-bidi-character-code)">"',
     // This color is Y800 which is not yet rolled out
     // https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
-    color: '#7F5F01',
+    color: "var(--ds-text-warning, #7F5F01)",
     fontStyle: 'normal'
   },
   ':hover:before': {
-    color: '#533F04'
+    color: "var(--ds-text-warning, #533F04)",
+    background: "var(--ds-background-warning-hovered, ".concat(_colors.Y75, ")")
   }
 });
 

package/dist/cjs/code.js

@@ -7,13 +7,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 Object.defineProperty(exports, "getCodeStyles", {
   enumerable: true,
   get: function get() {
     return _styles.getCodeStyles;
   }
 });
-exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,14 +31,16 @@ var _bidiWarningDecorator = _interopRequireDefault(require("./bidi-warning/bidi-
 
 var _styles = require("./internal/theme/styles");
 
+var _excluded = ["testId"],
+    _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
+
 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; }
 
-/** @jsx jsx */
 var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Code(_ref, ref) {
   var testId = _ref.testId,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["testId"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var theme = (0, _components.useGlobalTheme)();
   var styles = (0, _react.useMemo)(function () {
     return (0, _styles.getCodeStyles)(theme);
@@ -49,7 +51,7 @@ var Code = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
       codeBidiWarningLabel = props.codeBidiWarningLabel,
       _props$codeBidiWarnin2 = props.codeBidiWarningTooltipEnabled,
       codeBidiWarningTooltipEnabled = _props$codeBidiWarnin2 === void 0 ? true : _props$codeBidiWarnin2,
-      otherProps = (0, _objectWithoutProperties2.default)(props, ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"]);
+      otherProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var decoratedChildren = codeBidiWarnings ? (0, _core.jsx)(RenderCodeChildrenWithBidiWarnings, {
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled

package/dist/cjs/index.js

@@ -13,12 +13,6 @@ Object.defineProperty(exports, "Code", {
     return _code.default;
   }
 });
-Object.defineProperty(exports, "getCodeStyles", {
-  enumerable: true,
-  get: function get() {
-    return _code.getCodeStyles;
-  }
-});
 Object.defineProperty(exports, "CodeBlock", {
   enumerable: true,
   get: function get() {
@@ -31,6 +25,12 @@ Object.defineProperty(exports, "SUPPORTED_LANGUAGES", {
     return _constants.SUPPORTED_LANGUAGES;
   }
 });
+Object.defineProperty(exports, "getCodeStyles", {
+  enumerable: true,
+  get: function get() {
+    return _code.getCodeStyles;
+  }
+});
 
 var _code = _interopRequireWildcard(require("./code"));
 

package/dist/cjs/internal/hooks/use-highlight.js

@@ -13,9 +13,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var DEFAULT_LINE_EL_ATTR_OBJ = {
   'data-ds--code--row': ''

package/dist/cjs/internal/theme/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CODE_BLOCK_SELECTOR = exports.VAR_CODE_BG_COLOR = exports.VAR_CODE_LINE_NUMBER_BG_COLOR = exports.LINE_NUMBER_GUTTER = exports.SPACING = exports.HIGHLIGHT_BORDER_WIDTH = exports.CODE_LINE_HEIGHT = exports.CODE_FONT_SIZE = void 0;
+exports.VAR_CODE_LINE_NUMBER_BG_COLOR = exports.VAR_CODE_BG_COLOR = exports.SPACING = exports.LINE_NUMBER_GUTTER = exports.HIGHLIGHT_BORDER_WIDTH = exports.CODE_LINE_HEIGHT = exports.CODE_FONT_SIZE = exports.CODE_BLOCK_SELECTOR = void 0;
 
 var _constants = require("@atlaskit/theme/constants");