@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
98 lines (95 loc) • 3.71 kB
JavaScript
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 };