@atlaskit/editor-toolbar 0.0.5 → 0.0.7

package/src/ui/icons/TextColorIcon.tsx

@@ -1,2 +1,43 @@
-/* eslint-disable @atlaskit/editor/no-re-export */
-export { default as TextColorIcon } from '@atlaskit/icon/core/text-style';
+import React from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import Icon from '@atlaskit/icon/core/text-style';
+import { type NewCoreIconProps } from '@atlaskit/icon/types';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+import { type IconColor } from '@atlaskit/tokens/css-type-schema';
+
+type TextColorIconProps = NewCoreIconProps & {
+	iconColor?: IconColor;
+	isDisabled?: boolean;
+};
+
+const styles = cssMap({
+	icon: {
+		marginTop: token('space.050'),
+	},
+});
+
+export const TextColorIcon = ({
+	label,
+	shouldRecommendSmallIcon,
+	size,
+	spacing,
+	testId,
+	iconColor,
+	isDisabled,
+}: TextColorIconProps) => {
+	return (
+		// for the moment the Icon is not truely centered - adding margin top as a workaround
+		<Box as="span" xcss={styles.icon}>
+			<Icon
+				label={label}
+				testId={testId}
+				color={isDisabled ? token('color.icon.disabled') : iconColor}
+				shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+				spacing={spacing}
+				size={size}
+			/>
+		</Box>
+	);
+};

package/dist/cjs/ui/ColorIndicatorWrapper.compiled.css

@@ -1,4 +0,0 @@
-._1docjfq9{border-bottom-width:var(--ds-border-width-indicator,3px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3i7jlr{border-bottom-color:var(--ds-border-bold,#758195)}
-._4t3i7vkz{height:1pc}

package/dist/cjs/ui/ColorIndicatorWrapper.js

@@ -1,26 +0,0 @@
-/* ColorIndicatorWrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ColorIndicatorWrapper = void 0;
-require("./ColorIndicatorWrapper.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
-var _compiled = require("@atlaskit/primitives/compiled");
-var styles = {
-  indicator: "_4t3i7vkz _1o3i7jlr _1il9nqa1 _1docjfq9"
-};
-var ColorIndicatorWrapper = exports.ColorIndicatorWrapper = function ColorIndicatorWrapper(_ref) {
-  var color = _ref.color,
-    children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.indicator,
-    style: {
-      borderBottomColor: color
-    },
-    as: "span"
-  }, children);
-};

package/dist/cjs/ui/ToolbarDivider.compiled.css

@@ -1,6 +0,0 @@
-._18u01b66{margin-left:var(--ds-space-050,4px)}
-._1p3lnqa1{border-left-style:solid}
-._2hwx1b66{margin-right:var(--ds-space-050,4px)}
-._4t3i7vkz{height:1pc}
-._5wramuej{border-left-color:var(--ds-border,#091e4224)}
-._t6vde4h9{border-left-width:var(--ds-border-width,1px)}

package/dist/cjs/ui/ToolbarDivider.js

@@ -1,20 +0,0 @@
-/* ToolbarDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarDivider = void 0;
-require("./ToolbarDivider.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
-var _compiled = require("@atlaskit/primitives/compiled");
-var styles = {
-  divider: "_4t3i7vkz _5wramuej _1p3lnqa1 _t6vde4h9 _18u01b66 _2hwx1b66"
-};
-var ToolbarDivider = exports.ToolbarDivider = function ToolbarDivider() {
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.divider
-  });
-};

package/dist/es2019/ui/ColorIndicatorWrapper.compiled.css

@@ -1,4 +0,0 @@
-._1docjfq9{border-bottom-width:var(--ds-border-width-indicator,3px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3i7jlr{border-bottom-color:var(--ds-border-bold,#758195)}
-._4t3i7vkz{height:1pc}

package/dist/es2019/ui/ColorIndicatorWrapper.js

@@ -1,18 +0,0 @@
-/* ColorIndicatorWrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ColorIndicatorWrapper.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
-const styles = {
-  indicator: "_4t3i7vkz _1o3i7jlr _1il9nqa1 _1docjfq9"
-};
-export const ColorIndicatorWrapper = ({
-  color,
-  children
-}) => /*#__PURE__*/React.createElement(Box, {
-  xcss: styles.indicator,
-  style: {
-    borderBottomColor: color
-  },
-  as: "span"
-}, children);

package/dist/es2019/ui/ToolbarDivider.compiled.css

@@ -1,6 +0,0 @@
-._18u01b66{margin-left:var(--ds-space-050,4px)}
-._1p3lnqa1{border-left-style:solid}
-._2hwx1b66{margin-right:var(--ds-space-050,4px)}
-._4t3i7vkz{height:1pc}
-._5wramuej{border-left-color:var(--ds-border,#091e4224)}
-._t6vde4h9{border-left-width:var(--ds-border-width,1px)}

package/dist/es2019/ui/ToolbarDivider.js

@@ -1,13 +0,0 @@
-/* ToolbarDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDivider.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
-const styles = {
-  divider: "_4t3i7vkz _5wramuej _1p3lnqa1 _t6vde4h9 _18u01b66 _2hwx1b66"
-};
-export const ToolbarDivider = () => {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.divider
-  });
-};

package/dist/esm/ui/ColorIndicatorWrapper.compiled.css

@@ -1,4 +0,0 @@
-._1docjfq9{border-bottom-width:var(--ds-border-width-indicator,3px)}
-._1il9nqa1{border-bottom-style:solid}
-._1o3i7jlr{border-bottom-color:var(--ds-border-bold,#758195)}
-._4t3i7vkz{height:1pc}

package/dist/esm/ui/ColorIndicatorWrapper.js

@@ -1,19 +0,0 @@
-/* ColorIndicatorWrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ColorIndicatorWrapper.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
-var styles = {
-  indicator: "_4t3i7vkz _1o3i7jlr _1il9nqa1 _1docjfq9"
-};
-export var ColorIndicatorWrapper = function ColorIndicatorWrapper(_ref) {
-  var color = _ref.color,
-    children = _ref.children;
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.indicator,
-    style: {
-      borderBottomColor: color
-    },
-    as: "span"
-  }, children);
-};

package/dist/esm/ui/ToolbarDivider.compiled.css

@@ -1,6 +0,0 @@
-._18u01b66{margin-left:var(--ds-space-050,4px)}
-._1p3lnqa1{border-left-style:solid}
-._2hwx1b66{margin-right:var(--ds-space-050,4px)}
-._4t3i7vkz{height:1pc}
-._5wramuej{border-left-color:var(--ds-border,#091e4224)}
-._t6vde4h9{border-left-width:var(--ds-border-width,1px)}

package/dist/esm/ui/ToolbarDivider.js

@@ -1,13 +0,0 @@
-/* ToolbarDivider.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./ToolbarDivider.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { Box } from '@atlaskit/primitives/compiled';
-var styles = {
-  divider: "_4t3i7vkz _5wramuej _1p3lnqa1 _t6vde4h9 _18u01b66 _2hwx1b66"
-};
-export var ToolbarDivider = function ToolbarDivider() {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.divider
-  });
-};

package/dist/types/ui/ColorIndicatorWrapper.d.ts

@@ -1,7 +0,0 @@
-import React, { type ReactNode } from 'react';
-type ColorIndicatorWrapperProps = {
-    children?: ReactNode;
-    color?: string;
-};
-export declare const ColorIndicatorWrapper: ({ color, children }: ColorIndicatorWrapperProps) => React.JSX.Element;
-export {};

package/dist/types/ui/ToolbarDivider.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ToolbarDivider: () => React.JSX.Element;

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

@@ -1,7 +0,0 @@
-import React, { type ReactNode } from 'react';
-type ColorIndicatorWrapperProps = {
-    children?: ReactNode;
-    color?: string;
-};
-export declare const ColorIndicatorWrapper: ({ color, children }: ColorIndicatorWrapperProps) => React.JSX.Element;
-export {};

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ToolbarDivider: () => React.JSX.Element;

package/src/ui/ColorIndicatorWrapper.tsx

@@ -1,25 +0,0 @@
-import React, { type ReactNode } from 'react';
-
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-type ColorIndicatorWrapperProps = {
-	children?: ReactNode;
-	color?: string;
-};
-
-const styles = cssMap({
-	indicator: {
-		height: '16px',
-		borderBottomColor: token('color.border.bold'),
-		borderBottomStyle: 'solid',
-		borderBottomWidth: token('border.width.indicator'),
-	},
-});
-
-export const ColorIndicatorWrapper = ({ color, children }: ColorIndicatorWrapperProps) => (
-	<Box xcss={styles.indicator} style={{ borderBottomColor: color }} as="span">
-		{children}
-	</Box>
-);

package/src/ui/ToolbarDivider.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	divider: {
-		height: '16px',
-		borderLeftColor: token('color.border'),
-		borderLeftStyle: 'solid',
-		borderLeftWidth: token('border.width'),
-		marginLeft: token('space.050'),
-		marginRight: token('space.050'),
-	},
-});
-
-export const ToolbarDivider = () => {
-	return <Box xcss={styles.divider} />;
-};