@equinor/eds-core-react/dist/esm/components/Button/Button.js

The React implementation of the Equinor Design System

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 };