@equinor/eds-core-react 0.15.0 → 0.17.0-dev.20220209

package/dist/esm/components/Dialog/DialogActions.js

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledDialogActions = styled.div.withConfig({
+  displayName: "DialogActions__StyledDialogActions",
+  componentId: "sc-16ydtxd-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return css(["align-self:end;justify-self:start;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, !children && css(["min-height:initial;height:'8px';"]));
+});
+const DialogActions = /*#__PURE__*/forwardRef(function DialogActions(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/jsx(StyledDialogActions, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // Actions.displayName = 'EdsDialogActions'
+
+export { DialogActions };

package/dist/esm/components/Dialog/DialogContent.js

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledDialogContent = styled.div.withConfig({
+  displayName: "DialogContent__StyledDialogContent",
+  componentId: "sc-1tze18k-0"
+})(_ref => {
+  let {
+    theme,
+    scrollable
+  } = _ref;
+  return css(["", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "DialogContent__StyledDivider",
+  componentId: "sc-1tze18k-1"
+})(["width:100%;margin-bottom:0;"]);
+const DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref2, ref) {
+  let {
+    children,
+    scrollable = false,
+    ...rest
+  } = _ref2;
+  const props = {
+    scrollable,
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledDialogContent, {
+      id: "eds-dialog-customcontent",
+      ...props,
+      children: children
+    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
+});
+
+export { DialogContent };

package/dist/esm/components/Dialog/DialogHeader.js

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledDialogHeader = styled.div.withConfig({
+  displayName: "DialogHeader__StyledDialogHeader",
+  componentId: "sc-mbwcos-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["display:flex;justify-content:space-betweene;algin-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
+});
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "DialogHeader__StyledDivider",
+  componentId: "sc-mbwcos-1"
+})(["margin-bottom:0;"]);
+const DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxs("div", { ...props,
+    children: [/*#__PURE__*/jsx(StyledDialogHeader, {
+      children: children
+    }), /*#__PURE__*/jsx(StyledDivider, {
+      variant: "small",
+      color: "medium"
+    })]
+  });
+});
+
+export { DialogHeader };

package/dist/esm/components/Dialog/DialogTitle.js

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate } from '@equinor/eds-utils';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const StyledDialogTitle = styled.div.withConfig({
+  displayName: "DialogTitle__StyledDialogTitle",
+  componentId: "sc-1t3jljt-0"
+})(_ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  return css(["", " min-height:", ";align-self:end;justify-self:start;margin-right:", ";", ""], typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, theme.entities.children.spacings.right, !children && css(["min-height:initial;height:'8px';"]));
+});
+const DialogTitle = /*#__PURE__*/forwardRef(function DialogTitle(_ref2, ref) {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx(StyledDialogTitle, {
+      id: "eds-dialog-title",
+      ref: ref,
+      ...rest,
+      children: children
+    })
+  });
+});
+
+export { DialogTitle };

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

@@ -0,0 +1,18 @@
+import { Dialog as Dialog$1 } from './Dialog.js';
+import { DialogActions } from './DialogActions.js';
+import { DialogTitle } from './DialogTitle.js';
+import { DialogContent } from './DialogContent.js';
+import { DialogHeader } from './DialogHeader.js';
+
+const Dialog = Dialog$1;
+Dialog.Actions = DialogActions;
+Dialog.Title = DialogTitle;
+Dialog.CustomContent = DialogContent;
+Dialog.Content = DialogContent;
+Dialog.Header = DialogHeader;
+Dialog.Actions.displayName = 'Dialog.Actions';
+Dialog.Title.displayName = 'Dialog.Title';
+Dialog.Content.displayName = 'Dialog.Content';
+Dialog.Header.displayName = 'Dialog.Header';
+
+export { Dialog };

package/dist/esm/components/Divider/Divider.js

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import * as Divider_tokens from './Divider.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  divider,
+  baseDivider
+} = Divider_tokens;
+const StyledDivider = styled.hr.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-1d8osde-0"
+})(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
+const Divider = /*#__PURE__*/forwardRef(function Divider(_ref, ref) {
+  let {
+    color = 'medium',
+    variant = 'medium',
+    ...rest
+  } = _ref;
+  const colorValue = color === 'medium' ? 'mediumColor' : color;
+  const props = {
+    backgroundColor: divider[colorValue].background,
+    marginTop: Divider_tokens[variant].spacings.top,
+    marginBottom: Divider_tokens[variant].spacings.bottom,
+    dividerHeight: baseDivider.height,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledDivider, { ...props,
+    ref: ref
+  });
+});
+
+export { Divider };

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

@@ -0,0 +1,59 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: lighter
+      },
+      background__light: {
+        rgba: light
+      },
+      background__medium: {
+        rgba: mediumColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      small: spacingSmall,
+      medium: spacingMedium
+    }
+  }
+} = tokens$1;
+const dividerHeight = 1;
+
+const reduceByValue = subtractValue => valueWithUnit => {
+  const valueAndUnit = valueWithUnit.split(/(\d+)/).filter(val => val.length > 0);
+  return "".concat(parseInt(valueAndUnit[0]) - subtractValue) + valueAndUnit[1];
+};
+
+const reduceValueByDividerHeight = reduceByValue(dividerHeight);
+const baseDivider = {
+  height: "".concat(dividerHeight, "px")
+};
+const divider = {
+  lighter: {
+    background: lighter
+  },
+  light: {
+    background: light
+  },
+  mediumColor: {
+    background: mediumColor
+  }
+};
+const small = { ...baseDivider,
+  spacings: {
+    top: spacingSmall,
+    bottom: reduceValueByDividerHeight(spacingSmall)
+  }
+};
+const medium = { ...baseDivider,
+  spacings: {
+    top: spacingMedium,
+    bottom: reduceValueByDividerHeight(spacingMedium)
+  }
+};
+
+export { baseDivider, divider, medium, small };

package/dist/esm/components/EdsProvider/eds.context.js

@@ -0,0 +1,36 @@
+import { useState, useEffect, useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const initalState = {
+  density: 'comfortable'
+};
+const EdsContext = /*#__PURE__*/createContext(initalState);
+const EdsProvider = _ref => {
+  let {
+    children,
+    density = 'comfortable'
+  } = _ref;
+  const [state, setState] = useState({ ...initalState,
+    density
+  });
+
+  const setDensity = density => setState(prevState => ({ ...prevState,
+    density
+  }));
+
+  useEffect(() => {
+    if (typeof density !== 'undefined' && density !== state.density) {
+      setDensity(density);
+    }
+  }, [density, state.density]);
+  const value = {
+    density: state.density
+  };
+  return /*#__PURE__*/jsx(EdsContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useEds = () => useContext(EdsContext);
+
+export { EdsProvider, useEds };

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

@@ -0,0 +1,133 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { get } from './library.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const transform = _ref => {
+  let {
+    rotation
+  } = _ref;
+  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
+};
+
+const StyledSvg = styled.svg.attrs(_ref2 => {
+  let {
+    height,
+    width,
+    fill
+  } = _ref2;
+  return {
+    name: null,
+    xmlns: 'http://www.w3.org/2000/svg',
+    height: "".concat(height, "px"),
+    width: "".concat(width, "px"),
+    fill
+  };
+}).withConfig({
+  displayName: "Icon__StyledSvg",
+  componentId: "sc-6evbi1-0"
+})(["", ""], transform);
+const StyledPath = styled.path.attrs(_ref3 => {
+  let {
+    height,
+    size
+  } = _ref3;
+  return {
+    size: null,
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+  };
+}).withConfig({
+  displayName: "Icon__StyledPath",
+  componentId: "sc-6evbi1-1"
+})([""]);
+
+const customIcon = icon => ({
+  icon,
+  count: Math.floor(Math.random() * 1000)
+});
+
+const findIcon = (name, data, size) => {
+  // eslint-disable-next-line prefer-const
+  let {
+    icon,
+    count
+  } = data ? customIcon(data) : get(name);
+
+  if (size < 24) {
+    var _icon$sizes;
+
+    // fallback to normal icon if small is not made yet
+    icon = ((_icon$sizes = icon.sizes) === null || _icon$sizes === void 0 ? void 0 : _icon$sizes.small) || icon;
+  }
+
+  return {
+    icon,
+    count
+  };
+};
+
+const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
+  let {
+    size = 24,
+    color = 'currentColor',
+    name,
+    rotation,
+    title,
+    data,
+    ...rest
+  } = _ref4;
+  // eslint-disable-next-line prefer-const
+  const {
+    icon,
+    count
+  } = findIcon(name, data, size);
+
+  if (typeof icon === 'undefined') {
+    throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
+  }
+
+  const height = size ? size : parseInt(icon.width);
+  const width = size ? size : parseInt(icon.height);
+  let svgProps = {
+    height,
+    width,
+    fill: color,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    rotation,
+    name,
+    'aria-hidden': true
+  };
+  const pathProps = {
+    d: icon.svgPathData,
+    height: icon.height ? icon.height : size,
+    size: size || icon.height
+  }; // Accessibility
+
+  let titleId = '';
+
+  if (title) {
+    titleId = "".concat(icon.prefix, "-").concat(icon.name, "-").concat(count);
+    svgProps = { ...svgProps,
+      title,
+      role: 'img',
+      'aria-hidden': undefined,
+      'aria-labelledby': titleId
+    };
+  }
+
+  return /*#__PURE__*/jsxs(StyledSvg, { ...svgProps,
+    ...rest,
+    ref: ref,
+    children: [title && /*#__PURE__*/jsx("title", {
+      id: titleId,
+      children: title
+    }), /*#__PURE__*/jsx(StyledPath, {
+      "data-testid": "eds-icon-path",
+      ...pathProps
+    })]
+  });
+}); // Icon.displayName = 'EdsIcon'
+
+export { Icon };

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

@@ -0,0 +1,7 @@
+import { Icon as Icon$1 } from './Icon.js';
+import { add } from './library.js';
+
+const Icon = Icon$1;
+Icon.add = add;
+
+export { Icon };

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

@@ -0,0 +1,19 @@
+let _icons = {};
+let count = 0;
+/** Add icons to library to be used for rendering using name.
+This needs to be done lonly once */
+
+const add = icons => {
+  _icons = { ..._icons,
+    ...icons
+  };
+};
+const get = name => {
+  count += 1;
+  return {
+    icon: _icons[name],
+    count
+  };
+};
+
+export { add, get };

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,58 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { inputToken } from './Input.tokens.js';
+import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const StyledInput = styled.input.withConfig({
+  displayName: "Input__StyledInput",
+  componentId: "sc-1ykv024-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  const {
+    states: {
+      focus: {
+        outline: focusOutline
+      },
+      active: {
+        outline: activeOutline
+      },
+      disabled,
+      readOnly
+    },
+    boxShadow
+  } = theme;
+  return css(["width:100%;box-sizing:border-box;margin:0;appearance:none;background:", ";border:none;height:", ";box-shadow:", ";", " ", " ", ";&::placeholder{color:", ";}&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{color:", ";cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}&[readOnly]{background:", ";box-shadow:", ";}"], theme.background, theme.minHeight, boxShadow, outlineTemplate(activeOutline), typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), theme.entities.placeholder.typography.color, outlineTemplate(focusOutline), disabled.typography.color, readOnly.background, readOnly.boxShadow);
+});
+const Input = /*#__PURE__*/forwardRef(function Input(_ref2, ref) {
+  let {
+    variant = 'default',
+    disabled = false,
+    type = 'text',
+    ...other
+  } = _ref2;
+  const actualVariant = variant === 'default' ? 'input' : variant;
+  const inputVariant = inputToken[actualVariant];
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, inputVariant);
+  const inputProps = {
+    ref,
+    type,
+    disabled,
+    ...other
+  };
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx(StyledInput, { ...inputProps
+    })
+  });
+});
+
+export { Input };

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

@@ -0,0 +1,172 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: background
+      }
+    },
+    text: {
+      static_icons__default,
+      static_icons__tertiary
+    },
+    interactive: {
+      disabled__text,
+      primary__resting,
+      danger__resting,
+      danger__hover,
+      warning__resting,
+      warning__hover,
+      success__resting,
+      success__hover
+    }
+  },
+  spacings: {
+    comfortable: {
+      small,
+      x_small
+    }
+  },
+  typography,
+  shape
+} = tokens$1;
+const input = {
+  minHeight: shape.straight.minHeight,
+  background,
+  spacings: {
+    left: small,
+    right: small,
+    top: '6px',
+    bottom: '6px'
+  },
+  typography: { ...typography.input.text,
+    color: static_icons__default.rgba
+  },
+  entities: {
+    placeholder: {
+      typography: {
+        color: static_icons__tertiary.rgba
+      }
+    }
+  },
+  states: {
+    disabled: {
+      typography: {
+        color: disabled__text.rgba
+      }
+    },
+    readOnly: {
+      background: 'transparent',
+      boxShadow: 'none'
+    },
+    active: {
+      outline: {
+        type: 'outline',
+        color: 'transparent',
+        width: '1px',
+        style: 'solid',
+        offset: '0px'
+      }
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: primary__resting.rgba,
+        style: 'solid',
+        offset: '0px'
+      }
+    }
+  },
+  boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
+  modes: {
+    compact: {
+      minHeight: shape._modes.compact.straight.minHeight,
+      spacings: {
+        left: x_small,
+        right: x_small,
+        top: x_small,
+        bottom: x_small
+      }
+    }
+  }
+};
+const error = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: danger__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px'
+      }
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: danger__hover.rgba,
+        style: 'solid',
+        offset: '0px'
+      }
+    }
+  }
+});
+const warning = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: warning__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px'
+      }
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: warning__hover.rgba,
+        style: 'solid',
+        offset: '0px'
+      }
+    }
+  }
+});
+const success = mergeDeepRight(input, {
+  boxShadow: 'inset 0px -1px 0px 0px transparent',
+  states: {
+    active: {
+      outline: {
+        type: 'outline',
+        color: success__resting.rgba,
+        width: '1px',
+        style: 'solid',
+        offset: '0px'
+      }
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        width: '2px',
+        color: success__hover.rgba,
+        style: 'solid',
+        offset: '0px'
+      }
+    }
+  }
+});
+const inputToken = {
+  input,
+  error,
+  warning,
+  success
+};
+
+export { error, input, inputToken, success, warning };