UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

34 lines (31 loc) 1.35 kB
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 };