@atlaskit/renderer
Version:
Renderer component
66 lines • 2.37 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
/* eslint-disable @typescript-eslint/consistent-type-imports, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
import { jsx, css } from '@emotion/react';
import CopyButton from './codeBlockCopyButton';
import CodeWrapButton from './codeBlockWrapButton';
const codeBlockButtonsWrapper = css({
position: 'sticky',
top: '0px',
background: `${"var(--ds-surface, #FFFFFF)"}`
});
const codeBlockButtonsStyle = css({
display: 'flex',
justifyContent: 'flex-end',
position: 'absolute',
height: '0',
width: '100%',
right: "var(--ds-space-075, 6px)",
top: "var(--ds-space-050, 4px)",
padding: "var(--ds-space-025, 2px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
button: {
height: '32px',
width: '32px',
border: `${"var(--ds-border-width-selected, 2px)"} solid ${"var(--ds-border, #0B120E24)"}`,
borderRadius: "var(--ds-radius-small, 4px)",
marginLeft: "var(--ds-space-050, 4px)",
padding: "var(--ds-space-025, 2px)",
background: `${"var(--ds-surface-overlay, #FFFFFF)"}`,
color: `${"var(--ds-icon, #292A2E)"}`,
'&:hover': {
borderWidth: "var(--ds-border-width-selected, 2px)",
backgroundColor: `${"var(--ds-surface-overlay-hovered, #F0F1F2)"}`,
height: '32px',
width: '32px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.clicked': {
backgroundColor: `${"var(--ds-background-neutral-bold-pressed, #505258)"}`,
borderRadius: "var(--ds-radius-small, 4px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
color: `${"var(--ds-icon-inverse, #FFFFFF)"} !important`
}
}
});
const CodeBlockButtonContainer = ({
allowCopyToClipboard,
allowWrapCodeBlock,
setWrapLongLines,
text,
wrapLongLines
}) => {
return jsx("div", {
css: codeBlockButtonsWrapper
}, jsx("div", {
css: codeBlockButtonsStyle
}, allowWrapCodeBlock && jsx(CodeWrapButton, {
setWrapLongLines: setWrapLongLines,
wrapLongLines: wrapLongLines
}), allowCopyToClipboard && jsx(CopyButton, {
content: text
})));
};
export default CodeBlockButtonContainer;