UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

98 lines (95 loc) 3.71 kB
import { forwardRef } from 'react'; import styled, { css, ThemeProvider } from 'styled-components'; import { token } from './tokens/index.js'; import { spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate, useToken } from '@equinor/eds-utils'; import { InnerFullWidth } from './InnerFullWidth.js'; import { jsx } from 'react/jsx-runtime'; import { useEds } from '../EdsProvider/eds.context.js'; const getVariant = (tokenSet, variant) => { switch (variant) { case 'ghost': return tokenSet.ghost; case 'ghost_icon': return tokenSet.ghost_icon; case 'outlined': return tokenSet.outlined; case 'contained_icon': return tokenSet.contained_icon; case 'contained': default: return tokenSet.contained; } }; const getToken = (variant, color) => { switch (color) { case 'danger': return getVariant(token.danger, variant); case 'secondary': return getVariant(token.secondary, variant); case 'primary': default: return getVariant(token.primary, variant); } }; const Inner = styled.span.withConfig({ displayName: "Button__Inner", componentId: "sc-1hs0myn-0" })(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& > :is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]); const ButtonBase = styled.button.withConfig({ displayName: "Button__ButtonBase", componentId: "sc-1hs0myn-1" })(({ theme }) => { const { states, clickbound } = theme; const { focus, hover, disabled } = states; return css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, bordersTemplate(hover?.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background); }); const Button = /*#__PURE__*/forwardRef(function Button({ color = 'primary', variant = 'contained', children, disabled = false, href, tabIndex = 0, fullWidth = false, ...other }, ref) { const { density } = useEds(); const token = useToken({ density }, getToken(variant, color)); const as = href && !disabled ? 'a' : other.as ? other.as : 'button'; const type = href || other.as ? undefined : 'button'; tabIndex = disabled ? -1 : tabIndex; const buttonProps = { ref, as, href, type, disabled, tabIndex, ...other }; return /*#__PURE__*/jsx(ThemeProvider, { theme: token, children: /*#__PURE__*/jsx(ButtonBase, { ...buttonProps, children: fullWidth ? /*#__PURE__*/jsx(InnerFullWidth, { children: children }) : /*#__PURE__*/jsx(Inner, { children: children }) }) }); }); export { Button };