@equinor/eds-core-react 0.14.3 → 0.15.0-dev.20211116

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

@@ -0,0 +1,124 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  typography,
+  spacings: {
+    comfortable: {
+      small,
+      x_small
+    }
+  }
+} = tokens$1;
+const textfield = {
+  background: colors.ui.background__light.hex,
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.text.static_icons__tertiary.hex
+  },
+  spacings: {
+    left: small,
+    right: small,
+    top: small
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.primary__resting.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none'
+    }
+  },
+  entities: {
+    unit: {
+      typography: { ...typography.input.label,
+        color: colors.text.static_icons__tertiary.hex
+      },
+      states: {
+        disabled: {
+          typography: {
+            color: colors.interactive.disabled__text.hex
+          }
+        }
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        left: x_small,
+        right: x_small,
+        top: x_small,
+        bottom: x_small
+      }
+    }
+  }
+};
+const error = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.danger__resting.hex
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.danger__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    }
+  }
+};
+const warning = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.warning__resting.hex
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.warning__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    }
+  }
+};
+const success = {
+  border: {
+    type: 'border',
+    radius: 0,
+    width: '1px',
+    color: colors.interactive.success__resting.hex
+  },
+  states: {
+    focus: {
+      outline: {
+        width: '2px',
+        color: colors.interactive.success__hover.hex,
+        style: 'solid',
+        type: 'outline',
+        offset: '0px'
+      }
+    }
+  }
+};
+
+export { error, success, textfield, warning };

package/dist/esm/components/Textarea/Textarea.js

@@ -0,0 +1,90 @@
+import { forwardRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import * as Input_tokens from '../Input/Input.tokens.js';
+import { input as input$1 } from '../Input/Input.tokens.js';
+import { useAutoResize } from '../../hooks/useAutoResize.js';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const {
+  input
+} = Input_tokens;
+
+const Variation = ({
+  variant,
+  token,
+  density
+}) => {
+  if (!variant) {
+    return ``;
+  }
+
+  const {
+    states: {
+      focus: {
+        outline: focusOutline
+      },
+      active: {
+        outline: activeOutline
+      }
+    },
+    boxShadow
+  } = token;
+  let spacings = input.spacings;
+
+  if (density === 'compact') {
+    spacings = input.modes.compact.spacings;
+  }
+
+  return css(["border:none;", " ", " box-shadow:", ";&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}"], spacingsTemplate(spacings), outlineTemplate(activeOutline), boxShadow, outlineTemplate(focusOutline));
+};
+
+const StyledTextarea = styled.textarea.withConfig({
+  displayName: "Textarea__StyledTextarea",
+  componentId: "sc-2yjdcc-0"
+})(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
+const Textarea = /*#__PURE__*/forwardRef(function Textarea({
+  variant = 'default',
+  disabled = false,
+  type = 'text',
+  rowsMax,
+  ...other
+}, ref) {
+  const actualVariant = variant === 'default' ? 'input' : variant;
+  const inputVariant = Input_tokens[actualVariant];
+  const [textareaEl, setTextareaEl] = useState(null);
+  const {
+    density
+  } = useEds();
+  const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
+  const {
+    lineHeight
+  } = input$1.typography;
+  const {
+    top,
+    bottom
+  } = spacings;
+  let fontSize = 16;
+
+  if (textareaEl) {
+    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
+  }
+
+  const padding = parseInt(top) + parseInt(bottom);
+  const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
+  useAutoResize(textareaEl, rowsMax ? maxHeight : null);
+  const inputProps = {
+    ref: useCombinedRefs(ref, setTextareaEl),
+    type,
+    disabled,
+    variant,
+    token: inputVariant,
+    density,
+    ...other
+  };
+  return /*#__PURE__*/React.createElement(StyledTextarea, inputProps);
+});
+
+export { Textarea };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,113 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useState, useRef, useEffect, cloneElement } from 'react';
+import * as ReactDom from 'react-dom';
+import styled from 'styled-components';
+import { tooltip } from './Tooltip.tokens.js';
+import { useIsMounted } from '../../hooks/useMountedRef.js';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { useId } from '../../hooks/useId.js';
+import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
+import { usePopper } from '../../hooks/usePopper.js';
+import { joinHandlers } from '../../utils/joinHandlers.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const StyledTooltip = styled.div.withConfig({
+  displayName: "Tooltip__StyledTooltip",
+  componentId: "sc-m2im2p-0"
+})(["", " ", " ", " background:", ";z-index:350;white-space:nowrap;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background, tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.entities.arrow.spacings.bottom, tooltip.entities.arrow.spacings.top, tooltip.entities.arrow.spacings.right, tooltip.entities.arrow.spacings.left);
+const ArrowWrapper = styled.div.withConfig({
+  displayName: "Tooltip__ArrowWrapper",
+  componentId: "sc-m2im2p-1"
+})(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
+const TooltipArrow = styled.svg.withConfig({
+  displayName: "Tooltip__TooltipArrow",
+  componentId: "sc-m2im2p-2"
+})(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip({
+  title,
+  placement = 'bottom',
+  children,
+  enterDelay = 100,
+  id,
+  ...rest
+}, ref) {
+  const isMounted = useIsMounted();
+  const [popperEl, setPopperEl] = useState(null);
+  const [arrowRef, setArrowRef] = useState(null);
+  const [open, setOpen] = useState(false);
+  const openTimer = useRef();
+  const tooltipRef = useCombinedRefs(setPopperEl, ref);
+  const anchorRef = useRef();
+  const combinedChilddRef = useCombinedRefs(anchorRef, children === null || children === void 0 ? void 0 : children.ref);
+  const tooltipId = useId(id, 'tooltip');
+  const containerId = 'eds-tooltip-container';
+  const shouldOpen = isMounted && title !== '';
+  const {
+    setTimeout,
+    clearTimeout
+  } = window;
+  useEffect(() => {
+    if (document.getElementById(containerId) === null) {
+      const tooltipContainerElement = document.createElement('div');
+      tooltipContainerElement.id = containerId;
+      document.body.appendChild(tooltipContainerElement);
+    }
+
+    return () => {
+      clearTimeout(openTimer.current);
+    };
+  }, [clearTimeout]);
+
+  const openTooltip = () => {
+    if (shouldOpen) {
+      clearTimeout(openTimer.current);
+      openTimer.current = setTimeout(() => {
+        setOpen(true);
+      }, enterDelay);
+    }
+  };
+
+  const closeTooltip = () => {
+    clearTimeout(openTimer.current);
+    setOpen(false);
+  };
+
+  useGlobalKeyPress('Escape', () => closeTooltip());
+  const {
+    styles,
+    attributes
+  } = usePopper(anchorRef.current, popperEl, arrowRef, placement, 14);
+  const props = {
+    open,
+    ...rest,
+    ...attributes.popper
+  };
+  const childProps = children.props;
+  const updatedChildren = /*#__PURE__*/cloneElement(children, {
+    ref: combinedChilddRef,
+    'aria-describedby': open ? tooltipId : null,
+    onMouseOver: joinHandlers(openTooltip, childProps.onMouseOver),
+    onMouseLeave: joinHandlers(closeTooltip, childProps.onMouseLeave),
+    onPointerEnter: joinHandlers(openTooltip, childProps.onPointerEnter),
+    onPointerLeave: joinHandlers(closeTooltip, childProps.onPointerLeave),
+    onBlur: joinHandlers(closeTooltip, childProps.onBlur),
+    onFocus: joinHandlers(openTooltip, childProps.onFocus)
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, shouldOpen && open && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/React.createElement(StyledTooltip, _extends({
+    id: tooltipId,
+    role: "tooltip",
+    ref: tooltipRef,
+    style: styles.popper
+  }, props), title, /*#__PURE__*/React.createElement(ArrowWrapper, {
+    ref: setArrowRef,
+    style: styles.arrow,
+    className: "arrow"
+  }, /*#__PURE__*/React.createElement(TooltipArrow, {
+    className: "arrowSvg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+  })))), document.getElementById(containerId)), updatedChildren);
+});
+
+export { Tooltip };

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

@@ -0,0 +1,63 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    text: {
+      static_icons__primary_white: {
+        rgba: white
+      }
+    },
+    ui: {
+      background__overlay: {
+        rgba: background
+      }
+    }
+  },
+  typography: {
+    ui
+  },
+  spacings: {
+    comfortable: {
+      x_large: spacingXlarge,
+      small: spacingSmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const tooltip = {
+  typography: { ...ui.tooltip,
+    color: white
+  },
+  background,
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  entities: {
+    tooltip: {
+      height: spacingXlarge
+    },
+    arrow: {
+      width: '6px',
+      height: spacingSmall,
+      spacings: {
+        bottom: '-6px',
+        top: '-6px',
+        left: '-6px',
+        right: '-6px'
+      }
+    }
+  },
+  spacings: {
+    left: spacingSmall,
+    right: spacingSmall,
+    top: spacingSmall,
+    bottom: spacingSmall
+  }
+};
+
+export { tooltip };

package/dist/esm/components/TopBar/Actions.js

@@ -0,0 +1,18 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+const StyledActions = styled.div.withConfig({
+  displayName: "Actions__StyledActions",
+  componentId: "sc-1251ang-0"
+})(["grid-area:right;text-align:right;"]);
+const Actions = /*#__PURE__*/forwardRef(function Actions({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledActions, _extends({
+    ref: ref
+  }, props), children);
+}); // Actions.displayName = 'eds-topbar-actions'
+
+export { Actions };

package/dist/esm/components/TopBar/CustomContent.js

@@ -0,0 +1,18 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+const StyledCustomContent = styled.div.withConfig({
+  displayName: "CustomContent__StyledCustomContent",
+  componentId: "sc-d0e83a-0"
+})(["grid-area:center;"]);
+const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledCustomContent, _extends({
+    ref: ref
+  }, props), children);
+}); // CustomContent.displayName = 'eds-topbar-customcontent'
+
+export { CustomContent };

package/dist/esm/components/TopBar/Header.js

@@ -0,0 +1,18 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+const StyledHeader = styled.div.withConfig({
+  displayName: "Header__StyledHeader",
+  componentId: "sc-1fpllve-0"
+})(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
+const Header = /*#__PURE__*/forwardRef(function Header({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledHeader, _extends({
+    ref: ref
+  }, props), children);
+}); // Header.displayName = 'eds-topbar-header'
+
+export { Header };

package/dist/esm/components/TopBar/TopBar.js

@@ -0,0 +1,28 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './TopBar.tokens.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+
+const {
+  background,
+  height,
+  spacings,
+  border,
+  typography
+} = token;
+const StyledTopBar = styled.header.withConfig({
+  displayName: "TopBar__StyledTopBar",
+  componentId: "sc-1yj236q-0"
+})(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:250;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], height, background, spacings.left, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography));
+const TopBar = /*#__PURE__*/forwardRef(function TopBar({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledTopBar, _extends({}, props, {
+    ref: ref
+  }), children);
+}); // TopBar.displayName = 'eds-topbar'
+
+export { TopBar };

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

@@ -0,0 +1,32 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  },
+  typography: {
+    navigation
+  }
+} = tokens;
+const token = {
+  height: '64px',
+  background: colors.ui.background__default.rgba,
+  typography: navigation.menu_title,
+  spacings: {
+    left: comfortable.xx_large,
+    right: comfortable.xx_large,
+    top: comfortable.small,
+    bottom: comfortable.small
+  },
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      style: 'solid',
+      color: colors.ui.background__light.rgba,
+      width: '2px'
+    }
+  }
+};
+
+export { token };

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

@@ -0,0 +1,14 @@
+import { TopBar as TopBar$1 } from './TopBar.js';
+import { Actions } from './Actions.js';
+import { Header } from './Header.js';
+import { CustomContent } from './CustomContent.js';
+
+const TopBar = TopBar$1;
+TopBar.Actions = Actions;
+TopBar.Header = Header;
+TopBar.CustomContent = CustomContent;
+TopBar.Actions.displayName = 'Topbar.Actions';
+TopBar.Header.displayName = 'Topbar.Header';
+TopBar.CustomContent.displayName = 'Topbar.CustomContent';
+
+export { TopBar };

package/dist/esm/components/Typography/Typography.js

@@ -0,0 +1,91 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { colors, link, quickVariants, typography } from './Typography.tokens.js';
+import { typographyTemplate } from '../../utils/templates/index.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const getElementType = (variant, link) => {
+  if (link) {
+    return 'a';
+  }
+
+  switch (variant) {
+    case 'h1':
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'h5':
+    case 'h6':
+      return variant;
+
+    case 'caption':
+    case 'overline':
+    case 'ingress':
+    case 'meta':
+    case 'body_short':
+    case 'body_long':
+    default:
+      return 'p';
+  }
+};
+
+const findTypography = (variantName, group) => {
+  // For quick use when using paragraphs and headings we can skip group
+  if (!group && quickVariants[variantName]) {
+    return quickVariants[variantName];
+  }
+
+  return typography[group][variantName];
+};
+
+const findColor = (inputColor = null) => typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor];
+
+const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
+
+const StyledTypography = styled.p.withConfig({
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-179guof-0"
+})(["", " ", " ", " ", ""], ({
+  typography,
+  link
+}) => typographyTemplate(typography, link), ({
+  color
+}) => css({
+  color: findColor(color)
+}), ({
+  lines
+}) => //https://caniuse.com/#feat=css-line-clamp
+lines > 0 && css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], lines), ({
+  link: link$1
+}) => link$1 && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}"], outlineTemplate(link.states.focus.outline)));
+const Typography = /*#__PURE__*/forwardRef(function Typography({
+  variant = 'body_short',
+  children,
+  bold,
+  italic,
+  link,
+  group,
+  token,
+  as: providedAs,
+  ...other
+}, ref) {
+  const as = providedAs ? providedAs : getElementType(variant, link);
+  const variantName = toVariantName(variant, bold, italic, link);
+  const typography = findTypography(variantName, group);
+
+  if (typeof typography === 'undefined') {
+    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
+  }
+
+  return /*#__PURE__*/React.createElement(StyledTypography, _extends({
+    as: as,
+    typography: { ...typography,
+      ...token
+    },
+    link: link,
+    ref: ref
+  }, other), children);
+}); // Typography.displayName = 'EdsTypography'
+
+export { Typography };

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

@@ -0,0 +1,61 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography,
+  colors: colorsToken
+} = tokens;
+const {
+  heading,
+  paragraph
+} = typography;
+const {
+  interactive: {
+    primary__resting: {
+      rgba: primary
+    },
+    secondary__resting: {
+      rgba: secondary
+    },
+    danger__resting: {
+      rgba: danger
+    },
+    warning__resting: {
+      rgba: warning
+    },
+    success__resting: {
+      rgba: success
+    },
+    disabled__text: {
+      rgba: disabled
+    },
+    focus: {
+      rgba: focus
+    }
+  }
+} = colorsToken;
+const colors = {
+  primary,
+  secondary,
+  danger,
+  warning,
+  success,
+  disabled
+};
+const quickVariants = { ...heading,
+  ...paragraph
+};
+const link = {
+  states: {
+    focus: {
+      outline: {
+        width: '1px',
+        color: focus,
+        style: 'dashed',
+        type: 'outline',
+        offset: '2px'
+      }
+    }
+  }
+};
+
+export { colors, link, quickVariants, typography };