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

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 `${parseInt(valueAndUnit[0]) - subtractValue}` + valueAndUnit[1];
+};
+
+const reduceValueByDividerHeight = reduceByValue(dividerHeight);
+const baseDivider = {
+  height: `${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,35 @@
+import { useState, useEffect, useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const initalState = {
+  density: 'comfortable'
+};
+const EdsContext = /*#__PURE__*/createContext(initalState);
+const EdsProvider = ({
+  children,
+  density = 'comfortable'
+}) => {
+  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,102 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { get } from './library.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const customIcon = icon => ({
+  icon,
+  count: Math.floor(Math.random() * 1000)
+});
+
+const transform = ({
+  rotation
+}) => rotation ? `transform: rotate(${rotation}deg)` : '';
+
+const StyledSvg = styled.svg.attrs(({
+  height,
+  width,
+  fill
+}) => ({
+  name: null,
+  xmlns: 'http://www.w3.org/2000/svg',
+  height: `${height}px`,
+  width: `${width}px`,
+  fill
+})).withConfig({
+  displayName: "Icon__StyledSvg",
+  componentId: "sc-6evbi1-0"
+})(["", ""], transform);
+const StyledPath = styled.path.attrs(({
+  height,
+  size
+}) => ({
+  size: null,
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  transform: size / height !== 1 ? `scale(${size / height})` : null
+})).withConfig({
+  displayName: "Icon__StyledPath",
+  componentId: "sc-6evbi1-1"
+})([""]);
+const Icon = /*#__PURE__*/forwardRef(function Icon({
+  size = 24,
+  color = 'currentColor',
+  name,
+  className,
+  rotation,
+  title,
+  data,
+  ...rest
+}, ref) {
+  const {
+    icon,
+    count
+  } = data ? customIcon(data) : get(name);
+
+  if (typeof icon === 'undefined') {
+    throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
+  }
+
+  let svgProps = {
+    height: size,
+    width: size,
+    fill: color,
+    viewBox: `0 0 ${size} ${size}`,
+    className,
+    rotation,
+    name,
+    'aria-hidden': true,
+    title: null
+  };
+  const pathProps = {
+    d: icon.svgPathData,
+    height: icon.height ? icon.height : size,
+    size
+  }; // Accessibility
+
+  let titleId = '';
+
+  if (title) {
+    titleId = `${icon.prefix}-${icon.name}-${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 { jsx } from 'react/jsx-runtime';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
+
+const StyledInput = styled.input.withConfig({
+  displayName: "Input__StyledInput",
+  componentId: "sc-1ykv024-0"
+})(({
+  theme
+}) => {
+  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({
+  variant = 'default',
+  disabled = false,
+  type = 'text',
+  ...other
+}, ref) {
+  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 'ramda';
+
+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 };

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { label } from './Label.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { typographyTemplate } from '../../utils/templates/index.js';
+
+const LabelBase = styled.label.withConfig({
+  displayName: "Label__LabelBase",
+  componentId: "sc-1gi2bcn-0"
+})(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], typographyTemplate(label.typography), label.spacings.left, label.spacings.right, ({
+  disabledText
+}) => disabledText ? label.states.disabled.typography.color : label.typography.color);
+const Text = styled.span.withConfig({
+  displayName: "Label__Text",
+  componentId: "sc-1gi2bcn-1"
+})(["margin:0;"]);
+const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
+  const {
+    label = '',
+    meta,
+    disabled = false,
+    ...other
+  } = props;
+  return (
+    /*#__PURE__*/
+
+    /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
+    jsxs(LabelBase, {
+      ref: ref,
+      disabledText: disabled,
+      ...other,
+      children: [/*#__PURE__*/jsx(Text, {
+        children: label
+      }), meta && /*#__PURE__*/jsx(Text, {
+        children: meta
+      })]
+    })
+  );
+}); // Label.displayName = 'eds-text-field-label'
+
+export { Label };

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

@@ -0,0 +1,30 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors,
+  spacings: {
+    comfortable
+  },
+  typography
+} = tokens;
+const label = {
+  background: colors.ui.background__light.rgba,
+  typography: { ...typography.input.label,
+    color: colors.text.static_icons__tertiary.rgba
+  },
+  spacings: {
+    left: comfortable.small,
+    right: comfortable.small,
+    top: '6px',
+    bottom: '6px'
+  },
+  states: {
+    disabled: {
+      typography: {
+        color: colors.interactive.disabled__text.rgba
+      }
+    }
+  }
+};
+
+export { label };

package/dist/esm/components/List/List.js

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { list } from './List.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { typographyTemplate } from '../../utils/templates/index.js';
+
+const {
+  typography
+} = list;
+const StyledList = styled.ul.withConfig({
+  displayName: "List__StyledList",
+  componentId: "sc-v9d2hy-0"
+})(["", " ", ""], ({
+  as
+}) => as === 'ol' ? css(["& ol{list-style-type:lower-alpha;}"]) : '', typographyTemplate(typography));
+const List = /*#__PURE__*/forwardRef(function List({
+  children,
+  variant = 'bullet',
+  ...props
+}, ref) {
+  const as = variant === 'numbered' ? 'ol' : 'ul';
+  return /*#__PURE__*/jsx(StyledList, {
+    as: as,
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // List.displayName = 'List'
+
+export { List };

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

@@ -0,0 +1,12 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    paragraph
+  }
+} = tokens;
+const list = {
+  typography: paragraph.body_short
+};
+
+export { list };

package/dist/esm/components/List/ListItem.js

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const ListItem = /*#__PURE__*/forwardRef(function ListItem({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx("li", { ...props,
+    ref: ref,
+    children: children
+  });
+}); // ListItem.displayName = 'ListItem'
+
+export { ListItem };

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

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

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

@@ -0,0 +1,43 @@
+import { useState, useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const initalState = {
+  focusedIndex: -1,
+  onClose: null
+};
+const MenuContext = /*#__PURE__*/createContext(initalState);
+const MenuProvider = ({
+  children
+}) => {
+  const [state, setState] = useState(initalState);
+  const {
+    focusedIndex,
+    onClose
+  } = state;
+
+  const setFocusedIndex = i => {
+    setState(prevState => ({ ...prevState,
+      focusedIndex: i
+    }));
+  };
+
+  const setOnClose = onClose => {
+    setState(prevState => ({ ...prevState,
+      onClose
+    }));
+  };
+
+  const value = {
+    setFocusedIndex,
+    focusedIndex,
+    setOnClose,
+    onClose
+  };
+  return /*#__PURE__*/jsx(MenuContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useMenu = () => useContext(MenuContext);
+
+export { MenuProvider, useMenu };