@atlaskit/editor-plugin-guideline 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-guideline
 
+## 0.3.3
+
+### Patch Changes
+
+- [`e118dc7562b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e118dc7562b) - ED-18897 guideline interface to use css tokens.
+
 ## 0.3.2
 
 ### Patch Changes

package/README.md

@@ -86,7 +86,7 @@ type GuidelineConfig = {
   active?: boolean;
   show?: boolean;
   style?: 'dashed' | 'solid'; // default solid
-  color?: string;
+  color?: CSSToken;
 };
 ```
 

package/dist/cjs/guideline.js

@@ -1,19 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Guideline = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
-
+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 = 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; } /** @jsx jsx */
 var BasicGuidelineStyles = (0, _react.css)({
   borderLeft: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
   position: 'absolute',
   width: '1px',
   height: '100%',
   zIndex: 0,
+  transform: 'translateX(-50%)',
   opacity: 1,
   transition: 'border-color 0.15s linear, opacity 0.15s linear'
 });
@@ -31,13 +34,16 @@ var Guideline = function Guideline(props) {
     active = props.active,
     _props$show = props.show,
     show = _props$show === void 0 ? true : _props$show,
-    style = props.style;
+    style = props.style,
+    color = props.color;
   return (0, _react.jsx)("div", {
     css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
     className: "guideline",
-    style: {
+    style: _objectSpread({
       left: "".concat(position, "px")
-    }
+    }, color && {
+      borderColor: "".concat(color)
+    })
   });
 };
 exports.Guideline = Guideline;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-guideline",
-	"version": "0.3.2",
+	"version": "0.3.3",
 	"sideEffects": false
 }

package/dist/es2019/guideline.js

@@ -7,6 +7,7 @@ const BasicGuidelineStyles = css({
   width: '1px',
   height: '100%',
   zIndex: 0,
+  transform: 'translateX(-50%)',
   opacity: 1,
   transition: 'border-color 0.15s linear, opacity 0.15s linear'
 });
@@ -24,13 +25,17 @@ export const Guideline = props => {
     position,
     active,
     show = true,
-    style
+    style,
+    color
   } = props;
   return jsx("div", {
     css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
     className: "guideline",
     style: {
-      left: `${position}px`
+      left: `${position}px`,
+      ...(color && {
+        borderColor: `${color}`
+      })
     }
   });
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-guideline",
-	"version": "0.3.2",
+	"version": "0.3.3",
 	"sideEffects": false
 }

package/dist/esm/guideline.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(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; }
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { B200, N30A } from '@atlaskit/theme/colors';
@@ -7,6 +10,7 @@ var BasicGuidelineStyles = css({
   width: '1px',
   height: '100%',
   zIndex: 0,
+  transform: 'translateX(-50%)',
   opacity: 1,
   transition: 'border-color 0.15s linear, opacity 0.15s linear'
 });
@@ -24,12 +28,15 @@ export var Guideline = function Guideline(props) {
     active = props.active,
     _props$show = props.show,
     show = _props$show === void 0 ? true : _props$show,
-    style = props.style;
+    style = props.style,
+    color = props.color;
   return jsx("div", {
     css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
     className: "guideline",
-    style: {
+    style: _objectSpread({
       left: "".concat(position, "px")
-    }
+    }, color && {
+      borderColor: "".concat(color)
+    })
   });
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-guideline",
-	"version": "0.3.2",
+	"version": "0.3.3",
 	"sideEffects": false
 }

package/dist/types/guideline.d.ts

@@ -1,10 +1,12 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { CSSToken } from '@atlaskit/tokens';
 type Props = {
     position: number;
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
+    color?: CSSToken;
 };
 export declare const Guideline: (props: Props) => jsx.JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import { EditorView } from 'prosemirror-view';
+import { CSSToken } from '@atlaskit/tokens';
 export type Position = {
     x: number;
 };
@@ -8,7 +9,7 @@ type GuidelineConfig = {
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
-    color?: string;
+    color?: CSSToken;
 };
 type GuidelinePluginState = {
     guidelines: GuidelineConfig[];

package/dist/types-ts4.5/guideline.d.ts

@@ -1,10 +1,12 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { CSSToken } from '@atlaskit/tokens';
 type Props = {
     position: number;
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
+    color?: CSSToken;
 };
 export declare const Guideline: (props: Props) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/types.d.ts

@@ -1,4 +1,5 @@
 import { EditorView } from 'prosemirror-view';
+import { CSSToken } from '@atlaskit/tokens';
 export type Position = {
     x: number;
 };
@@ -8,7 +9,7 @@ type GuidelineConfig = {
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
-    color?: string;
+    color?: CSSToken;
 };
 type GuidelinePluginState = {
     guidelines: GuidelineConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-guideline",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "guideline plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -23,11 +23,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^74.9.0",
+    "@atlaskit/editor-common": "^74.15.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-shared-styles": "^2.4.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "prosemirror-state": "1.3.4",

package/report.api.md

@@ -15,6 +15,7 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
+import { CSSToken } from '@atlaskit/tokens';
 import { EditorView } from 'prosemirror-view';
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
@@ -32,7 +33,7 @@ export type GuidelineConfig = {
   active?: boolean;
   show?: boolean;
   style?: 'dashed' | 'solid';
-  color?: string;
+  color?: CSSToken;
 };
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -4,6 +4,7 @@
 
 ```ts
 
+import { CSSToken } from '@atlaskit/tokens';
 import { EditorView } from 'prosemirror-view';
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
@@ -21,7 +22,7 @@ export type GuidelineConfig = {
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
-    color?: string;
+    color?: CSSToken;
 };
 
 // @public (undocumented)