@equinor/eds-core-react 0.14.2 → 0.15.0-dev.20211118

package/dist/esm/components/Banner/BannerMessage.js

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+
+const StyledBannerMessage = styled(Typography).withConfig({
+  displayName: "BannerMessage__StyledBannerMessage",
+  componentId: "sc-1lfqos1-0"
+})([""]);
+const BannerMessage = /*#__PURE__*/forwardRef(function BannerMessage({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledBannerMessage, {
+    variant: "body_long",
+    ...props,
+    children: children
+  });
+});
+
+export { BannerMessage };

package/dist/esm/components/Banner/index.js

@@ -0,0 +1,14 @@
+import { Banner as Banner$1 } from './Banner.js';
+import { BannerIcon } from './BannerIcon.js';
+import { BannerMessage } from './BannerMessage.js';
+import { BannerActions } from './BannerActions.js';
+
+const Banner = Banner$1;
+Banner.Icon = BannerIcon;
+Banner.Message = BannerMessage;
+Banner.Actions = BannerActions;
+Banner.Icon.displayName = 'Banner.Icon';
+Banner.Message.displayName = 'Banner.Message';
+Banner.Actions.displayName = 'Banner.Actions';
+
+export { Banner };

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { breadcrumbs } from './Breadcrumbs.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Typography } from '../Typography/Typography.js';
+
+const {
+  states,
+  typography
+} = breadcrumbs;
+const StyledTypography = styled(Typography).withConfig({
+  displayName: "Breadcrumb__StyledTypography",
+  componentId: "sc-10nvwte-0"
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography.color, ({
+  maxWidth
+}) => css({
+  maxWidth
+}));
+const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb({
+  children,
+  maxWidth,
+  href,
+  ...other
+}, ref) {
+  const props = { ...other,
+    href,
+    ref,
+    maxWidth
+  };
+  const showTooltip = maxWidth > 0;
+  const isHrefDefined = href !== undefined;
+
+  const crumb = /*#__PURE__*/jsx(StyledTypography, {
+    link: isHrefDefined,
+    as: isHrefDefined ? null : 'span',
+    variant: "body_short",
+    ...props,
+    children: children
+  });
+
+  return showTooltip ? /*#__PURE__*/jsx(Tooltip, {
+    title: children,
+    placement: "top",
+    children: crumb
+  }) : crumb;
+});
+
+export { Breadcrumb };

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,98 @@
+import { forwardRef, useState, Children, Fragment } from 'react';
+import styled from 'styled-components';
+import { breadcrumbs } from './Breadcrumbs.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+
+const {
+  spacings,
+  typography,
+  states
+} = breadcrumbs;
+const OrderedList = styled.ol.withConfig({
+  displayName: "Breadcrumbs__OrderedList",
+  componentId: "sc-12awlbz-0"
+})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;"]);
+const ListItem = styled.li.withConfig({
+  displayName: "Breadcrumbs__ListItem",
+  componentId: "sc-12awlbz-1"
+})(["display:inline-block;"]);
+const Separator = styled(Typography).withConfig({
+  displayName: "Breadcrumbs__Separator",
+  componentId: "sc-12awlbz-2"
+})(["color:", ";", ""], typography.color, spacingsTemplate(spacings));
+const Collapsed = styled(Typography).withConfig({
+  displayName: "Breadcrumbs__Collapsed",
+  componentId: "sc-12awlbz-3"
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states.hover.typography.color, typography.color);
+const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs({
+  children,
+  collapse,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  const [expanded, setExpanded] = useState(false);
+
+  const collapsedCrumbs = allCrumbs => {
+    const handleExpandClick = e => {
+      setExpanded(true);
+      const {
+        key
+      } = e;
+
+      if (key === 'Enter') {
+        setExpanded(true);
+      }
+    };
+
+    if (allCrumbs.length < 3) {
+      return allCrumbs;
+    }
+
+    return [allCrumbs[0], /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(ListItem, {
+        children: /*#__PURE__*/jsx(Collapsed, {
+          link: true,
+          role: "button",
+          variant: "body_short",
+          onClick: handleExpandClick,
+          onKeyPress: handleExpandClick,
+          tabIndex: 0,
+          children: "\u2026"
+        })
+      }), /*#__PURE__*/jsx("li", {
+        "aria-hidden": true,
+        children: /*#__PURE__*/jsx(Separator, {
+          variant: "body_short",
+          children: "/"
+        })
+      })]
+    }, "collapsed"), allCrumbs[allCrumbs.length - 1]];
+  };
+
+  const allCrumbs = Children.toArray(children).map((child, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(ListItem, {
+      children: child
+    }), index !== Children.toArray(children).length - 1 && /*#__PURE__*/jsx("li", {
+      "aria-hidden": true,
+      children: /*#__PURE__*/jsx(Separator, {
+        variant: "body_short",
+        children: "/"
+      })
+    })]
+  }, `breadcrumb-${index}`));
+  return /*#__PURE__*/jsx("nav", { ...props,
+    "aria-label": "breadcrumbs",
+    children: /*#__PURE__*/jsx(OrderedList, {
+      children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
+    })
+  });
+}); // Breadcrumbs.displayName = 'eds-breadcrumbs'
+
+export { Breadcrumbs };

package/dist/esm/components/Breadcrumbs/Breadcrumbs.tokens.js

@@ -0,0 +1,39 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    text: {
+      static_icons__tertiary: {
+        rgba: enabledColor
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: hoverColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium
+    }
+  }
+} = tokens;
+const breadcrumbs = {
+  spacings: {
+    left: spacingMedium,
+    right: spacingMedium
+  },
+  typography: {
+    color: enabledColor
+  },
+  states: {
+    hover: {
+      typography: {
+        color: hoverColor
+      }
+    }
+  }
+};
+
+export { breadcrumbs };

package/dist/esm/components/Breadcrumbs/index.js

@@ -0,0 +1,8 @@
+import { Breadcrumbs as Breadcrumbs$1 } from './Breadcrumbs.js';
+import { Breadcrumb } from './Breadcrumb.js';
+
+const Breadcrumbs = Breadcrumbs$1;
+Breadcrumbs.Breadcrumb = Breadcrumb;
+Breadcrumbs.Breadcrumb.displayName = 'Breadcrumbs.Breadcrumb';
+
+export { Breadcrumbs };

package/dist/esm/components/Button/Button.js

@@ -0,0 +1,106 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { token } from './tokens/index.js';
+import { InnerFullWidth } from './InnerFullWidth.js';
+import { jsx } from 'react/jsx-runtime';
+import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.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':
+    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:8px;grid-auto-flow:column;align-items:center;height:100%;justify-content:center;"]);
+const ButtonBase = styled.button.withConfig({
+  displayName: "Button__ButtonBase",
+  componentId: "sc-1hs0myn-1"
+})(({
+  theme
+}) => {
+  var _clickbound$offset, _clickbound$offset2, _hover$typography;
+
+  const {
+    states,
+    clickbound
+  } = theme;
+  const {
+    focus,
+    hover,
+    disabled
+  } = states;
+  return css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::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{", "}&::-moz-focus-inner{border:0;}&:disabled{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 === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), 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 };

package/dist/esm/components/Button/InnerFullWidth.js

@@ -0,0 +1,26 @@
+import { forwardRef, Children } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const FullWidthCenterContent = styled.span.withConfig({
+  displayName: "InnerFullWidth__FullWidthCenterContent",
+  componentId: "sc-qeawkb-0"
+})(["text-align:center;flex:1;"]);
+const FullWidthInner = styled.span.withConfig({
+  displayName: "InnerFullWidth__FullWidthInner",
+  componentId: "sc-qeawkb-1"
+})(["height:100%;display:flex;align-items:center;> img:first-child,> svg:first-child{margin-right:8px;}> img:last-child,> svg:last-child{margin-left:8px;}> img:only-child,> svg:only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:32px;}> span:last-child{margin-right:32px;}> span:only-child{margin-right:0;margin-left:0;}"]);
+const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth({
+  children
+}, ref) {
+  // We need everything in elements for proper flexing 💪
+  const updatedChildren = Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsx(FullWidthCenterContent, {
+    children: child
+  }) : child);
+  return /*#__PURE__*/jsx(FullWidthInner, {
+    ref: ref,
+    children: updatedChildren
+  });
+});
+
+export { InnerFullWidth };

package/dist/esm/components/Button/tokens/button.js

@@ -0,0 +1,127 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    navigation: {
+      button: buttonTypography
+    }
+  },
+  colors: {
+    interactive: {
+      disabled__text: {
+        rgba: disabledTextColor
+      },
+      disabled__border: {
+        rgba: disabledBorderColor
+      },
+      disabled__fill: {
+        rgba: disabledColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium
+    }
+  },
+  shape: {
+    button: {
+      minHeight: buttonHeight,
+      borderRadius: buttonBorderRadius
+    },
+    _modes: {
+      compact: {
+        button: {
+          minHeight: compactButtonHeight
+        }
+      }
+    }
+  },
+  interactions: {
+    focused: outline
+  },
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  }
+} = tokens;
+const button = {
+  background: 'transparent',
+  height: buttonHeight,
+  typography: { ...buttonTypography,
+    textAlign: 'center'
+  },
+  border: {
+    type: 'border',
+    width: '1px',
+    color: 'transparent',
+    radius: buttonBorderRadius,
+    style: 'solid'
+  },
+  spacings: {
+    left: medium,
+    right: medium
+  },
+  clickbound: {
+    height: clicboundHeight,
+    width: '100%',
+    offset: {
+      top: `${(parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1}px`,
+      left: '0'
+    }
+  },
+  entities: {
+    icon: {
+      height: '24px',
+      width: '24px'
+    }
+  },
+  states: {
+    hover: {
+      border: {
+        type: 'border',
+        width: '1px',
+        color: 'transparent',
+        radius: buttonBorderRadius,
+        style: 'solid'
+      }
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        offset: '2px',
+        style: 'dashed',
+        color: outline.color,
+        width: outline.width
+      }
+    },
+    disabled: {
+      background: disabledColor,
+      border: {
+        type: 'border',
+        width: '1px',
+        color: disabledBorderColor,
+        style: 'solid'
+      },
+      typography: { ...buttonTypography,
+        color: disabledTextColor,
+        textAlign: 'center'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: compactButtonHeight,
+      clickbound: {
+        height: compactClickboundHeight,
+        width: '100%',
+        offset: {
+          top: `${(parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1}px`,
+          left: '0'
+        }
+      }
+    }
+  }
+};
+
+export { button };

package/dist/esm/components/Button/tokens/contained.js

@@ -0,0 +1,86 @@
+import { tokens } from '@equinor/eds-tokens';
+import { button } from './button.js';
+import * as R from 'ramda';
+
+const {
+  colors: {
+    text: {
+      static_icons__primary_white: {
+        rgba: primaryWhite
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover: {
+        rgba: primaryHoverColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      }
+    }
+  },
+  shape: {
+    button: {
+      borderRadius: buttonBorderRadius
+    }
+  }
+} = tokens;
+const primary = R.mergeDeepRight(button, {
+  background: primaryColor,
+  typography: {
+    color: primaryWhite
+  },
+  border: {
+    type: 'border',
+    style: 'solid',
+    width: '1px',
+    color: primaryColor,
+    radius: buttonBorderRadius
+  },
+  states: {
+    hover: {
+      background: primaryHoverColor
+    }
+  }
+});
+const secondary = R.mergeDeepRight(primary, {
+  background: secondaryColor,
+  border: {
+    color: secondaryColor
+  },
+  states: {
+    hover: {
+      background: secondaryHoverColor,
+      border: {
+        color: secondaryHoverColor
+      }
+    }
+  }
+});
+const danger = R.mergeDeepRight(primary, {
+  background: dangerColor,
+  border: {
+    color: dangerColor
+  },
+  states: {
+    hover: {
+      background: dangerHoverColor,
+      border: {
+        color: dangerHoverColor
+      }
+    }
+  }
+});
+
+export { danger, primary, secondary };

package/dist/esm/components/Button/tokens/ghost.js

@@ -0,0 +1,84 @@
+import { tokens } from '@equinor/eds-tokens';
+import * as R from 'ramda';
+import { button } from './button.js';
+
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover: {
+        rgba: primaryHoverColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAltColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      secondary__highlight: {
+        rgba: secondaryHoverAltColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      },
+      danger__highlight: {
+        rgba: dangerHoverAltColor
+      }
+    }
+  }
+} = tokens;
+const primary = R.mergeDeepRight(button, {
+  typography: {
+    color: primaryColor
+  },
+  states: {
+    hover: {
+      background: primaryHoverAltColor,
+      typography: {
+        color: primaryHoverColor
+      }
+    },
+    disabled: {
+      background: 'transparent',
+      border: {
+        color: 'transparent'
+      }
+    }
+  }
+});
+const secondary = R.mergeDeepRight(primary, {
+  typography: {
+    color: secondaryColor
+  },
+  states: {
+    hover: {
+      background: secondaryHoverAltColor,
+      typography: {
+        color: secondaryHoverColor
+      }
+    }
+  }
+});
+const danger = R.mergeDeepRight(primary, {
+  typography: {
+    color: dangerColor
+  },
+  states: {
+    hover: {
+      background: dangerHoverAltColor,
+      typography: {
+        color: dangerHoverColor
+      }
+    }
+  }
+});
+
+export { danger, primary, secondary };