@atlaskit/editor-common/dist/es2019/resizer/ResizerBreakoutModeLabel.js

A package that contains common classes and components for editor and renderer

import React from 'react';
import { useIntl } from 'react-intl';

// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, Inline, xcss } from '@atlaskit/primitives';
import { breakoutMessages as messages } from '../messages';
const fullWidthLabelWrapperStyles = xcss({
  height: "var(--ds-space-400, 32px)",
  display: 'flex',
  backgroundColor: 'elevation.surface.overlay',
  borderRadius: 'radius.small',
  boxShadow: 'elevation.shadow.overlay',
  boxSizing: 'border-box',
  alignItems: 'center'
});
const fullWidthLabelStyles = xcss({
  marginLeft: 'space.100',
  marginRight: 'space.100',
  paddingLeft: 'space.075',
  paddingRight: 'space.075',
  paddingTop: 'space.050',
  paddingBottom: 'space.050'
});
export const ResizerBreakoutModeLabel = ({
  layout: breakoutLayout
}) => {
  const {
    formatMessage
  } = useIntl();
  const message = React.useMemo(() => {
    switch (breakoutLayout) {
      case 'max':
        return formatMessage(messages.maxWidthLabel);
      case 'full-width':
        return formatMessage(messages.fullWidthLabel);
      case 'wide':
        return formatMessage(messages.wideWidthLabel);
      default:
        return null;
    }
  }, [breakoutLayout, formatMessage]);
  return message && /*#__PURE__*/React.createElement(Box, {
    testId: "resizer-breakout-mode-label",
    xcss: fullWidthLabelWrapperStyles
  }, /*#__PURE__*/React.createElement(Inline, {
    xcss: fullWidthLabelStyles
  }, message));
};