@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
27 lines (24 loc) • 1.48 kB
JavaScript
import { forwardRef, Children } from 'react';
import styled from 'styled-components';
import { jsx } from 'react/jsx-runtime';
const FullWidthCenterContent = styled.span.withConfig({
displayName: "InnerFullWidth__FullWidthCenterContent",
componentId: "sc-qeawkb-0"
})(["text-align:center;flex:1;"]);
const FullWidthInner = styled.span.withConfig({
displayName: "InnerFullWidth__FullWidthInner",
componentId: "sc-qeawkb-1"
})(["height:100%;display:flex;align-items:center;> :is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}> :is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
children
}, ref) {
// We need everything in elements for proper flexing 💪
const updatedChildren = Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsx(FullWidthCenterContent, {
children: child
}) : child);
return /*#__PURE__*/jsx(FullWidthInner, {
ref: ref,
children: updatedChildren
});
});
export { InnerFullWidth };