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

package/dist/esm/components/Tabs/Tabs.context.js

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+const TabsContext = /*#__PURE__*/createContext({
+  variant: 'minWidth',
+  handleChange: () => null,
+  activeTab: 0,
+  tabsId: '',
+  tabsFocused: false
+});
+const TabsProvider = TabsContext.Provider;
+TabsContext.Consumer;
+
+export { TabsContext, TabsProvider };

package/dist/esm/components/Tabs/Tabs.js

@@ -0,0 +1,58 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useState } from 'react';
+import { TabsProvider } from './Tabs.context.js';
+import { useId } from '../../hooks/useId.js';
+
+const Tabs = /*#__PURE__*/forwardRef(function Tabs({
+  activeTab = 0,
+  onChange,
+  onBlur,
+  onFocus,
+  variant = 'minWidth',
+  id,
+  ...props
+}, ref) {
+  const tabsId = useId(id, 'tabs');
+  const [tabsFocused, setTabsFocused] = useState(false);
+  let blurTimer;
+
+  const handleBlur = e => {
+    blurTimer = setTimeout(() => {
+      if (tabsFocused) {
+        setTabsFocused(false);
+      }
+    }, 0);
+    onBlur && onBlur(e);
+  };
+
+  const handleFocus = e => {
+    if (e.target.getAttribute('role') !== 'tab') {
+      return;
+    }
+
+    clearTimeout(blurTimer);
+
+    if (!tabsFocused) {
+      setTabsFocused(true);
+    }
+
+    onFocus && onFocus(e);
+  };
+
+  return /*#__PURE__*/React.createElement(TabsProvider, {
+    value: {
+      activeTab,
+      handleChange: onChange,
+      tabsId,
+      variant,
+      tabsFocused
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    onBlur: handleBlur,
+    onFocus: handleFocus
+  })));
+});
+
+export { Tabs };

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

@@ -0,0 +1,127 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    text: {
+      static_icons__tertiary: {
+        rgba: defaultColor
+      }
+    },
+    ui: {
+      background__medium: {
+        rgba: defaultBorderColor
+      }
+    },
+    interactive: {
+      focus: {
+        rgba: focusOutlineColor
+      },
+      primary__hover_alt: {
+        rgba: hoverBackgroundColor
+      },
+      primary__resting: {
+        rgba: activeColor
+      },
+      primary__hover: {
+        rgba: activeHoverColor
+      }
+    }
+  },
+  clickbounds: {
+    default__base: clickboundsHeight
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium
+    }
+  }
+} = tokens;
+const token = {
+  entities: {
+    panel: {
+      spacings: {
+        top: spacingMedium,
+        bottom: spacingMedium
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            width: '1px',
+            style: 'dashed',
+            color: focusOutlineColor
+          }
+        }
+      }
+    },
+    tab: {
+      background: 'transparent',
+      height: clickboundsHeight,
+      clickbound: {
+        height: clickboundsHeight,
+        offset: {
+          top: '2px'
+        }
+      },
+      spacings: {
+        left: spacingMedium,
+        right: spacingMedium
+      },
+      typography: {
+        color: defaultColor,
+        textAlign: 'center'
+      },
+      border: {
+        type: 'bordergroup',
+        bottom: {
+          color: defaultBorderColor,
+          style: 'solid',
+          width: '2px'
+        }
+      },
+      states: {
+        disabled: {
+          border: {
+            type: 'border',
+            width: 0,
+            color: 'transparent',
+            style: 'solid'
+          }
+        },
+        hover: {
+          background: hoverBackgroundColor
+        },
+        focus: {
+          outline: {
+            type: 'outline',
+            width: '1px',
+            style: 'dashed',
+            color: focusOutlineColor
+          }
+        },
+        active: {
+          typography: {
+            color: activeColor
+          },
+          border: {
+            type: 'bordergroup',
+            bottom: {
+              color: activeColor,
+              style: 'solid',
+              width: '2px'
+            }
+          },
+          states: {
+            hover: {
+              typography: {
+                color: activeHoverColor
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+
+export { token };

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

@@ -0,0 +1,17 @@
+import { Tabs as Tabs$1 } from './Tabs.js';
+import { TabList } from './TabList.js';
+import { Tab } from './Tab.js';
+import { TabPanels } from './TabPanels.js';
+import { TabPanel } from './TabPanel.js';
+
+const Tabs = Tabs$1;
+Tabs.Tab = Tab;
+Tabs.Panels = TabPanels;
+Tabs.Panel = TabPanel;
+Tabs.List = TabList;
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.Panels.displayName = 'Tabs.Panels';
+Tabs.Panel.displayName = 'Tabs.Panel';
+Tabs.List.displayName = 'Tabs.List';
+
+export { Tabs };

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

@@ -0,0 +1,137 @@
+import { forwardRef } from 'react';
+import { useTextField } from './TextField.context.js';
+import styled, { css } from 'styled-components';
+import * as TextField_tokens from './TextField.tokens.js';
+import { Input } from '../Input/Input.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { Icon as InputIcon } from './Icon/Icon.js';
+import { typographyTemplate } from '../../utils/templates/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const {
+  textfield
+} = TextField_tokens;
+
+const Variation = ({
+  variant,
+  isFocused,
+  token
+}) => {
+  var _token$border, _token$border2, _token$border3, _token$border4;
+
+  if (!variant) {
+    return ``;
+  }
+
+  return css(["box-shadow:", ";", ""], isFocused ? `none` : variant === 'default' ? `inset 0 -1px 0 0 ${((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)}` : `0 0 0 1px ${((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)}`, isFocused && outlineTemplate(token.states.focus.outline));
+};
+
+const StrippedInput = styled(Input).withConfig({
+  displayName: "Field__StrippedInput",
+  componentId: "sc-455b88-0"
+})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
+const StrippedTextarea = styled(Textarea).withConfig({
+  displayName: "Field__StrippedTextarea",
+  componentId: "sc-455b88-1"
+})(["outline:none;&:active,&:focus{outline:none;box-shadow:none;}"]);
+const InputWrapper = styled.div.withConfig({
+  displayName: "Field__InputWrapper",
+  componentId: "sc-455b88-2"
+})(({
+  inputIcon,
+  unit,
+  isDisabled,
+  isReadOnly,
+  multiline,
+  variant
+}) => css(["", " ", " ", " ", " ", ""], Variation, (inputIcon || unit) && css(["display:flex;align-items:center;background:", ";padding-right:", ";"], textfield.background, textfield.spacings.right), isReadOnly && css(["box-shadow:", ";background:", ";"], textfield.states.readOnly.boxShadow, textfield.states.readOnly.background), isDisabled && css(["box-shadow:none;cursor:not-allowed;outline:none;"]), multiline && variant === 'default' && !inputIcon && !unit && css(["box-shadow:none;"])));
+const Unit = styled.span.withConfig({
+  displayName: "Field__Unit",
+  componentId: "sc-455b88-3"
+})(["", ";display:inline-block;margin-top:3px;", ""], typographyTemplate(textfield.entities.unit.typography), ({
+  isDisabled
+}) => isDisabled && {
+  color: textfield.entities.unit.states.disabled.typography.color
+});
+const Adornments = styled.div.withConfig({
+  displayName: "Field__Adornments",
+  componentId: "sc-455b88-4"
+})(["display:flex;align-items:center;justify-content:center;height:100%;margin-left:", ";& div:nth-child(2){margin-left:", ";}", ""], textfield.spacings.left, textfield.spacings.left, ({
+  multiline,
+  theme
+}) => multiline && {
+  marginTop: theme.spacings.top,
+  alignSelf: 'start'
+});
+const Field = /*#__PURE__*/forwardRef(function Field({
+  multiline,
+  variant,
+  disabled,
+  readOnly,
+  type,
+  unit,
+  inputIcon,
+  rowsMax,
+  onBlur,
+  onFocus,
+  ...other
+}, ref) {
+  const {
+    handleFocus,
+    handleBlur,
+    isFocused
+  } = useTextField();
+  const {
+    density
+  } = useEds();
+  const iconSize = density === 'compact' ? 16 : 24;
+  const actualVariant = variant === 'default' ? 'textfield' : variant;
+  const inputVariant = TextField_tokens[actualVariant];
+
+  const focusHandler = e => {
+    handleFocus();
+    onFocus && onFocus(e);
+  };
+
+  const blurHandler = e => {
+    handleBlur();
+    onBlur && onBlur(e);
+  };
+
+  const inputWrapperProps = {
+    isFocused,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    variant,
+    token: inputVariant,
+    inputIcon,
+    unit,
+    multiline
+  };
+  const inputProps = {
+    ref: ref,
+    type,
+    disabled,
+    readOnly,
+    variant,
+    onBlur: blurHandler,
+    onFocus: focusHandler,
+    ...other
+  };
+  const textareaProps = { ...inputProps,
+    rowsMax,
+    ref: ref
+  };
+  return /*#__PURE__*/React.createElement(InputWrapper, inputWrapperProps, multiline ? /*#__PURE__*/React.createElement(StrippedTextarea, textareaProps) : /*#__PURE__*/React.createElement(StrippedInput, inputProps), (inputIcon || unit) && /*#__PURE__*/React.createElement(Adornments, {
+    multiline: multiline
+  }, unit && /*#__PURE__*/React.createElement(Unit, {
+    isDisabled: disabled
+  }, unit), inputIcon && /*#__PURE__*/React.createElement(InputIcon, {
+    isDisabled: disabled,
+    variant: variant,
+    size: iconSize
+  }, inputIcon)));
+});
+
+export { Field, InputWrapper };

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

@@ -0,0 +1,80 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { helperText } from './HelperText.token.js';
+import { useTextField } from '../TextField.context.js';
+import { Icon as InputIcon } from '../Icon/Icon.js';
+import { typographyTemplate } from '../../../utils/templates/index.js';
+
+const Variation = ({
+  variant,
+  isFocused,
+  isDisabled
+}) => {
+  if (!variant) {
+    return ``;
+  }
+
+  const {
+    focusColor,
+    color,
+    disabledColor
+  } = variant;
+
+  if (isDisabled) {
+    return css(["color:", ";"], disabledColor);
+  }
+
+  if (isFocused) {
+    return css(["color:", ";"], focusColor);
+  }
+
+  return css(["color:", ";"], color);
+};
+
+const Container = styled.div.withConfig({
+  displayName: "HelperText__Container",
+  componentId: "sc-1kfkyxg-0"
+})(["display:flex;align-items:flex-start;margin-top:", ";"], ({
+  spacings
+}) => spacings.top);
+const Text = styled.p.withConfig({
+  displayName: "HelperText__Text",
+  componentId: "sc-1kfkyxg-1"
+})(["", " margin:0 0 0 ", ";", ""], typographyTemplate(helperText.typography), ({
+  spacings
+}) => spacings.left, Variation);
+const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText({
+  helperText: helperText$1,
+  icon,
+  variant = 'default',
+  disabled: isDisabled,
+  ...rest
+}, ref) {
+  const helperVariant = helperText[variant];
+  const spacings = helperText.spacings.comfortable;
+  const {
+    isFocused
+  } = useTextField();
+  const colors = {
+    color: helperVariant.color,
+    disabledColor: helperVariant.disabledColor,
+    focusColor: helperVariant.focusColor
+  };
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: ref
+  }, rest, {
+    spacings: spacings
+  }), icon && /*#__PURE__*/React.createElement(InputIcon, {
+    isDisabled: isDisabled,
+    colors: colors,
+    size: 16
+  }, icon), /*#__PURE__*/React.createElement(Text, {
+    variant: helperVariant,
+    isFocused: isFocused,
+    isDisabled: isDisabled,
+    spacings: spacings
+  }, helperText$1));
+});
+
+export { TextfieldHelperText as HelperText };

package/dist/esm/components/TextField/HelperText/HelperText.token.js

@@ -0,0 +1,49 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  },
+  typography
+} = tokens;
+const helperText = {
+  background: colors.ui.background__light.hex,
+  typography: typography.input.helper,
+  spacings: {
+    comfortable: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.small,
+      bottom: '6px'
+    },
+    compact: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: comfortable.xx_small,
+      bottom: '6px'
+    }
+  },
+  default: {
+    color: colors.text.static_icons__tertiary.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.text.static_icons__tertiary.hex
+  },
+  error: {
+    color: colors.interactive.danger__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.danger__hover.hex
+  },
+  warning: {
+    color: colors.interactive.warning__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.warning__hover.hex
+  },
+  success: {
+    color: colors.interactive.success__text.hex,
+    disabledColor: colors.interactive.disabled__text.hex,
+    focusColor: colors.interactive.success__hover.hex
+  }
+};
+
+export { helperText };

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

@@ -0,0 +1,59 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { useTextField } from '../TextField.context.js';
+import { input } from './Icon.tokens.js';
+
+const StyledIcon = styled.div.withConfig({
+  displayName: "Icon__StyledIcon",
+  componentId: "sc-jr0rqa-0"
+})(({
+  colors,
+  isDisabled,
+  isFocused,
+  size
+}) => {
+  const {
+    focusColor,
+    color,
+    disabledColor
+  } = colors;
+  let fill = color;
+
+  if (isDisabled) {
+    fill = disabledColor;
+  }
+
+  if (isFocused) {
+    fill = focusColor;
+  }
+
+  return css(["&,svg{fill:", ";width:", "px;height:", "px;}"], fill, size, size);
+});
+const InputIcon = /*#__PURE__*/forwardRef(function InputIcon({
+  size = 24,
+  variant = 'default',
+  isDisabled = false,
+  colors = {
+    color: input[variant].color,
+    disabledColor: input[variant].disabledColor,
+    focusColor: input[variant].focusColor
+  },
+  children,
+  ...other
+}, ref) {
+  const {
+    isFocused
+  } = useTextField();
+  const iconProps = {
+    isDisabled,
+    colors,
+    isFocused,
+    size
+  };
+  return /*#__PURE__*/React.createElement(StyledIcon, _extends({
+    ref: ref
+  }, iconProps, other), children);
+});
+
+export { InputIcon as Icon };

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

@@ -0,0 +1,46 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  }
+} = tokens;
+const input = {
+  spacings: {
+    comfortable: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: '10px',
+      bottom: '10px'
+    },
+    compact: {
+      left: comfortable.small,
+      right: comfortable.small,
+      top: '10px',
+      bottom: '10px'
+    }
+  },
+  default: {
+    color: colors.text.static_icons__tertiary.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.primary__resting.hex
+  },
+  error: {
+    color: colors.interactive.danger__resting.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.danger__hover.hex
+  },
+  warning: {
+    color: colors.interactive.warning__resting.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.warning__hover.hex
+  },
+  success: {
+    color: colors.interactive.success__resting.hex,
+    disabledColor: colors.interactive.disabled__fill.hex,
+    focusColor: colors.interactive.success__hover.hex
+  }
+};
+
+export { input };

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

@@ -0,0 +1,35 @@
+import { useState, useContext, createContext } from 'react';
+
+const initalState = {
+  isFocused: false
+};
+const TextFieldContext = /*#__PURE__*/createContext(initalState);
+const TextFieldProvider = ({
+  children
+}) => {
+  const [state, setState] = useState(initalState);
+
+  const handleFocus = () => {
+    setState(prevState => ({ ...prevState,
+      isFocused: true
+    }));
+  };
+
+  const handleBlur = () => {
+    setState(prevState => ({ ...prevState,
+      isFocused: false
+    }));
+  };
+
+  const value = {
+    handleFocus,
+    handleBlur,
+    isFocused: state.isFocused
+  };
+  return /*#__PURE__*/React.createElement(TextFieldContext.Provider, {
+    value: value
+  }, children);
+};
+const useTextField = () => useContext(TextFieldContext);
+
+export { TextFieldProvider, useTextField };

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

@@ -0,0 +1,74 @@
+import { forwardRef } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { Field } from './Field.js';
+import { TextFieldProvider } from './TextField.context.js';
+import { textfield } from './TextField.tokens.js';
+import { Label } from '../Label/Label.js';
+import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
+
+const Container = styled.div.withConfig({
+  displayName: "TextField__Container",
+  componentId: "sc-o1nc07-0"
+})(["min-width:100px;width:100%;"]);
+const TextField = /*#__PURE__*/forwardRef(function TextField({
+  id,
+  label,
+  meta,
+  unit,
+  helperText,
+  placeholder,
+  disabled,
+  multiline,
+  className,
+  variant = 'default',
+  inputRef,
+  inputIcon,
+  helperIcon,
+  rowsMax,
+  ...other
+}, ref) {
+  const inputProps = {
+    multiline,
+    disabled,
+    placeholder,
+    id,
+    variant,
+    ref: inputRef,
+    inputIcon,
+    unit,
+    rowsMax,
+    ...other
+  };
+  const helperProps = {
+    variant,
+    helperText,
+    icon: helperIcon,
+    disabled
+  };
+  const containerProps = {
+    ref,
+    className,
+    style: other.style
+  };
+  const labelProps = {
+    htmlFor: id,
+    label,
+    meta,
+    disabled
+  };
+  const showLabel = label || meta;
+  const showHelperText = helperText;
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, textfield);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: token
+  }, /*#__PURE__*/React.createElement(Container, containerProps, /*#__PURE__*/React.createElement(TextFieldProvider, null, showLabel && /*#__PURE__*/React.createElement(Label, labelProps), /*#__PURE__*/React.createElement(Field, inputProps), showHelperText && /*#__PURE__*/React.createElement(TextfieldHelperText, helperProps))));
+});
+
+export { TextField };