@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
70 lines (69 loc) • 1.94 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { memo } from 'react';
import { css, jsx } from '@emotion/react';
import { parseXcss } from '../xcss/xcss';
var baseStyles = css({
boxSizing: 'border-box'
});
var blockBleedMap = {
'space.025': css({
marginBlock: "var(--ds-space-negative-025, -0.125rem)"
}),
'space.050': css({
marginBlock: "var(--ds-space-negative-050, -0.25rem)"
}),
'space.100': css({
marginBlock: "var(--ds-space-negative-100, -0.5rem)"
}),
'space.150': css({
marginBlock: "var(--ds-space-negative-150, -0.75rem)"
}),
'space.200': css({
marginBlock: "var(--ds-space-negative-200, -1rem)"
})
};
var inlineBleedMap = {
'space.025': css({
marginInline: "var(--ds-space-negative-025, -0.125rem)"
}),
'space.050': css({
marginInline: "var(--ds-space-negative-050, -0.25rem)"
}),
'space.100': css({
marginInline: "var(--ds-space-negative-100, -0.5rem)"
}),
'space.150': css({
marginInline: "var(--ds-space-negative-150, -0.75rem)"
}),
'space.200': css({
marginInline: "var(--ds-space-negative-200, -1rem)"
})
};
/**
* __Bleed__
*
* `Bleed` is a primitive layout component that controls negative whitespace.
*
* - [Examples](https://atlassian.design/components/primitives/bleed/examples)
* - [Code](https://atlassian.design/components/primitives/bleed/code)
*/
var Bleed = /*#__PURE__*/memo(function (_ref) {
var children = _ref.children,
testId = _ref.testId,
inline = _ref.inline,
block = _ref.block,
all = _ref.all,
xcss = _ref.xcss;
var xcssStyles = xcss && parseXcss(xcss);
return jsx("div", {
css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
xcssStyles],
"data-testid": testId
}, children);
});
Bleed.displayName = 'Bleed';
export default Bleed;