@wix/design-system
Version:
@wix/design-system
32 lines • 2.23 kB
JavaScript
import React from 'react';
import { st, classes } from './CodeSnippet.st.css.js';
import { COPY_BUTTON_SIZE, SIZE, VARIANT, DATA_HOOKS, } from './CodeSnippet.constants';
import { useId } from '../utils/useId';
import CopyButton from './components/CopyButton';
import InlineVariant from './components/InlineVariant';
const CodeSnippet = ({ variant = VARIANT.singleline, size, code, copyText, disableCopy = false, copyTooltipText, copiedTooltipText, tooltipProps, onCopy, ariaLabel, wrapText = false, dataHook, className, }) => {
// Associates the copy button with the code block so screen readers announce
// the snippet content as the button's description on focus.
const codeId = useId('code-snippet-');
if (variant === VARIANT.inline) {
return (React.createElement(InlineVariant, { code: code, size: size, copyText: copyText, disableCopy: disableCopy, copyTooltipText: copyTooltipText, copiedTooltipText: copiedTooltipText, tooltipProps: tooltipProps, onCopy: onCopy, ariaLabel: ariaLabel, dataHook: dataHook, className: className }));
}
const valueToCopy = copyText ?? code;
const blockSize = size ?? SIZE.small;
const buttonSize = variant === VARIANT.singleline && blockSize !== SIZE.medium
? COPY_BUTTON_SIZE.small
: COPY_BUTTON_SIZE.medium;
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, {
variant,
size: blockSize,
wrapText: variant === VARIANT.multiline && wrapText,
disableCopy,
}, className) },
React.createElement("pre", { id: codeId, "data-hook": DATA_HOOKS.code, "aria-label": ariaLabel, className: classes.code },
React.createElement("code", null, code)),
!disableCopy && (React.createElement("div", { className: classes.copyButtonSlot },
React.createElement(CopyButton, { variant: variant, size: buttonSize, value: valueToCopy, copyTooltipText: copyTooltipText, copiedTooltipText: copiedTooltipText, tooltipProps: tooltipProps, onCopy: onCopy, describedById: codeId, dataHook: DATA_HOOKS.copyButton })))));
};
CodeSnippet.displayName = 'CodeSnippet';
export default CodeSnippet;
//# sourceMappingURL=CodeSnippet.js.map