@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
34 lines (31 loc) • 1.35 kB
JavaScript
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { group } from './ButtonGroup.tokens.js';
import { jsx } from 'react/jsx-runtime';
const {
border
} = group;
const radius = border.type === 'border' && border.radius;
const ButtonGroupBase = styled.div.withConfig({
displayName: "ButtonGroup__ButtonGroupBase",
componentId: "sc-1fn8jon-0"
})(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], ({
$vertical
}) => $vertical ? css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius, radius, radius, radius) : css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius, radius, radius, radius));
const ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup({
children,
vertical,
...rest
}, ref) {
const props = {
ref,
$vertical: vertical,
...rest
};
return /*#__PURE__*/jsx(ButtonGroupBase, {
role: "group",
...props,
children: children
});
});
export { ButtonGroup };