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

package/dist/esm/components/Progress/Star/StarProgress.tokens.js

@@ -0,0 +1,16 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    logo: {
+      fill_positive: {
+        rgba: logoFillPositive
+      }
+    }
+  }
+} = tokens;
+const token = {
+  background: logoFillPositive
+};
+
+export { token };

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

@@ -0,0 +1,17 @@
+import { LinearProgress } from './Linear/LinearProgress.js';
+export { LinearProgress } from './Linear/LinearProgress.js';
+import { CircularProgress } from './Circular/CircularProgress.js';
+export { CircularProgress } from './Circular/CircularProgress.js';
+import { StarProgress } from './Star/StarProgress.js';
+export { StarProgress } from './Star/StarProgress.js';
+import { DotProgress } from './Dots/DotProgress.js';
+export { DotProgress } from './Dots/DotProgress.js';
+
+const Progress = {
+  Linear: LinearProgress,
+  Circular: CircularProgress,
+  Star: StarProgress,
+  Dots: DotProgress
+};
+
+export { Progress };

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,120 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useMemo } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
+import { comfortable } from './Radio.tokens.js';
+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 Input = styled.input.attrs(({
+  type = 'radio'
+}) => ({
+  type
+})).withConfig({
+  displayName: "Radio__Input",
+  componentId: "sc-we59oz-0"
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
+  theme,
+  iconSize
+}) => parseFloat(theme.clickbound.height) / iconSize, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  theme
+}) => outlineTemplate(theme.states.focus.outline));
+const StyledLabel = styled.label.withConfig({
+  displayName: "Radio__StyledLabel",
+  componentId: "sc-we59oz-1"
+})(["display:inline-flex;align-items:center;cursor:", ";"], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer');
+const StyledPath = styled.path.attrs(({
+  icon
+}) => ({
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: icon.svgPathData
+})).withConfig({
+  displayName: "Radio__StyledPath",
+  componentId: "sc-we59oz-2"
+})([""]);
+const Svg = styled.svg.attrs(({
+  height,
+  width,
+  fill
+}) => ({
+  name: null,
+  xmlns: 'http://www.w3.org/2000/svg',
+  height,
+  width,
+  fill
+})).withConfig({
+  displayName: "Radio__Svg",
+  componentId: "sc-we59oz-3"
+})(["grid-area:input;pointer-events:none;"]);
+const LabelText = styled.span.withConfig({
+  displayName: "Radio__LabelText",
+  componentId: "sc-we59oz-4"
+})(["", ""], typographyTemplate(comfortable.typography));
+const InputWrapper = styled.span.withConfig({
+  displayName: "Radio__InputWrapper",
+  componentId: "sc-we59oz-5"
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], ({
+  theme
+}) => spacingsTemplate(theme.spacings), ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  disabled
+}) => disabled ? 'transparent' : comfortable.states.hover.background);
+const Radio = /*#__PURE__*/forwardRef(function Radio({
+  label,
+  disabled = false,
+  className,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, comfortable);
+  const iconSize = 24;
+  const fill = disabled ? comfortable.states.disabled.background : comfortable.background;
+  const renderSVG = useMemo(() => {
+    return /*#__PURE__*/React.createElement(Svg, {
+      width: iconSize,
+      height: iconSize,
+      viewBox: `0 0 ${iconSize} ${iconSize}`,
+      fill: fill,
+      "aria-hidden": true
+    }, /*#__PURE__*/React.createElement(StyledPath, {
+      icon: radio_button_selected,
+      name: "selected"
+    }), /*#__PURE__*/React.createElement(StyledPath, {
+      icon: radio_button_unselected,
+      name: "unselected"
+    }));
+  }, [fill]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: token
+  }, label ? /*#__PURE__*/React.createElement(StyledLabel, {
+    disabled: disabled,
+    className: className
+  }, /*#__PURE__*/React.createElement(InputWrapper, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
+    ref: ref,
+    disabled: disabled,
+    iconSize: iconSize
+  })), renderSVG), /*#__PURE__*/React.createElement(LabelText, null, label)) : /*#__PURE__*/React.createElement(InputWrapper, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
+    ref: ref,
+    disabled: disabled,
+    iconSize: iconSize
+  })), renderSVG));
+});
+Radio.displayName = 'Radio';
+
+export { Radio };

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

@@ -0,0 +1,91 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      disabled__text: {
+        rgba: disabledText
+      }
+    }
+  },
+  typography: {
+    navigation: {
+      menu_title: labelTypography
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium_small,
+      x_small
+    }
+  },
+  clickbounds: {
+    default__base: clicboundSize,
+    compact__standard: compactClickboundSize
+  }
+} = tokens;
+const comfortable = {
+  background: primaryColor,
+  typography: labelTypography,
+  spacings: {
+    bottom: medium_small,
+    top: medium_small,
+    left: medium_small,
+    right: medium_small
+  },
+  clickbound: {
+    height: clicboundSize
+  },
+  states: {
+    hover: {
+      background: primaryHoverAlt
+    },
+    disabled: {
+      background: disabledText
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        style: 'dashed',
+        width: '1px',
+        color: focusOutlineColor,
+        offset: '11px'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        bottom: x_small,
+        top: x_small,
+        left: x_small,
+        right: x_small
+      },
+      clickbound: {
+        height: compactClickboundSize
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            style: 'dashed',
+            width: '1px',
+            color: focusOutlineColor,
+            offset: '3px'
+          }
+        }
+      }
+    }
+  }
+};
+
+export { comfortable };

package/dist/esm/components/Scrim/Scrim.js

@@ -0,0 +1,59 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { scrim } from './Scrim.tokens.js';
+import { useHideBodyScroll } from '../../hooks/useHideBodyScroll.js';
+import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
+
+const {
+  height,
+  width,
+  background
+} = scrim;
+const StyledScrim = styled.div.withConfig({
+  displayName: "Scrim__StyledScrim",
+  componentId: "sc-1fr7uvy-0"
+})(["width:", ";height:", ";background:", ";position:fixed;z-index:500;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height, background);
+const ScrimContent = styled.div.withConfig({
+  displayName: "Scrim__ScrimContent",
+  componentId: "sc-1fr7uvy-1"
+})(["width:auto;height:auto;"]);
+const Scrim = /*#__PURE__*/forwardRef(function Scrim({
+  children,
+  onClose,
+  isDismissable = false,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    isDismissable,
+    ref
+  };
+  const overflowState = document.body.style.overflow;
+  useHideBodyScroll(overflowState);
+  useGlobalKeyPress('Escape', e => {
+    if (isDismissable && onClose) {
+      onClose(e, false);
+    }
+  });
+
+  const handleMouseClose = event => {
+    if (event) {
+      if (event.type === 'click' && isDismissable) {
+        onClose && onClose(event, false);
+      }
+    }
+  };
+
+  const handleContentClick = event => {
+    // Avoid event bubbling inside dialog/content inside scrim
+    event.stopPropagation();
+  };
+
+  return /*#__PURE__*/React.createElement(StyledScrim, _extends({
+    onClick: handleMouseClose
+  }, props), /*#__PURE__*/React.createElement(ScrimContent, {
+    onClick: handleContentClick
+  }, children));
+});
+
+export { Scrim };

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

@@ -0,0 +1,18 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__scrim: {
+        rgba: background
+      }
+    }
+  }
+} = tokens;
+const scrim = {
+  width: '100%',
+  height: '100%',
+  background
+};
+
+export { scrim };

package/dist/esm/components/Search/Search.js

@@ -0,0 +1,176 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { search as search$1, close } from '@equinor/eds-icons';
+import { search } from './Search.tokens.js';
+import { Icon } from '../Icon/index.js';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { setReactInputValue } from '../../utils/setReactInputValue.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+
+const {
+  height,
+  spacings,
+  background,
+  typography,
+  border,
+  clickbound,
+  entities: {
+    icon,
+    placeholder
+  },
+  states
+} = search;
+const Container = styled.span.withConfig({
+  displayName: "Search__Container",
+  componentId: "sc-v8l23u-0"
+})(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), ({
+  isFocused
+}) => isFocused && css(["", ""], bordersTemplate(states.focus.border)), placeholder.typography.color, ({
+  disabled
+}) => disabled ? css(["cursor:not-allowed;"]) : css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
+const Input = styled.input.withConfig({
+  displayName: "Search__Input",
+  componentId: "sc-v8l23u-1"
+})(["min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:0;border:none;appearance:none;box-sizing:border-box;background:transparent;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], typographyTemplate(typography), ({
+  disabled
+}) => disabled && css(["cursor:not-allowed;"]));
+const InsideButton = styled.div.withConfig({
+  displayName: "Search__InsideButton",
+  componentId: "sc-v8l23u-2"
+})(["", " display:flex;align-items:center;visibility:hidden;z-index:1;padding:4px;height:16px;width:16px;position:relative;&::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}", ""], bordersTemplate(icon.border), icon.clickbound.offset.top, icon.clickbound.height, ({
+  isActive
+}) => isActive && css(["visibility:visible;@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], icon.states.hover.background));
+const Search = /*#__PURE__*/forwardRef(function Search({
+  onChange,
+  defaultValue = '',
+  value,
+  className = '',
+  disabled = false,
+  onBlur,
+  onFocus,
+  ...rest
+}, ref) {
+  const isControlled = typeof value !== 'undefined';
+  const isActive = isControlled && value !== '' || defaultValue !== '';
+  const inputRef = useRef(null);
+  const [state, setState] = useState({
+    isActive,
+    isFocused: false
+  });
+  useEffect(() => {
+    setState(prevState => ({ ...prevState,
+      isActive
+    }));
+  }, [value, defaultValue, isActive]);
+
+  const handleOnClick = () => {
+    const inputEl = inputRef.current;
+    inputEl.focus();
+  };
+
+  const handleFocus = () => setState(prevState => ({ ...prevState,
+    isFocused: true
+  }));
+
+  const handleBlur = () => setState(prevState => ({ ...prevState,
+    isFocused: false
+  }));
+
+  const handleOnChange = event => {
+    setIsActive(event.target.value);
+  };
+
+  const handleOnDelete = () => {
+    const input = inputRef.current;
+    const clearedValue = '';
+    setReactInputValue(input, clearedValue);
+    setState(prevState => ({ ...prevState,
+      isActive: false
+    }));
+  };
+
+  const setIsActive = newValue => setState(prevState => ({ ...prevState,
+    isActive: newValue !== ''
+  }));
+  /** Applying props for controlled vs. uncontrolled scnarios */
+
+
+  const applyControllingProps = (props, value, defaultValue) => {
+    if (isControlled) {
+      return { ...props,
+        value
+      };
+    }
+
+    return { ...props,
+      defaultValue
+    };
+  };
+
+  const {
+    isFocused
+  } = state;
+  const size = 24;
+  const containerProps = {
+    isFocused,
+    className,
+    disabled,
+    role: 'search',
+    'aria-label': rest['aria-label'],
+    onClick: handleOnClick
+  };
+  const inputProps = applyControllingProps({ ...rest,
+    disabled,
+    ref: useCombinedRefs(inputRef, ref),
+    type: 'search',
+    role: 'searchbox',
+    'aria-label': 'search input',
+    onBlur: e => {
+      handleBlur();
+
+      if (onBlur) {
+        onBlur(e);
+      }
+    },
+    onFocus: e => {
+      handleFocus();
+
+      if (onFocus) {
+        onFocus(e);
+      }
+    },
+    onChange: e => {
+      handleOnChange(e);
+
+      if (onChange) {
+        onChange(e);
+      }
+    }
+  }, value, defaultValue);
+  const clearButtonProps = {
+    isActive: state.isActive,
+    size,
+    role: 'button',
+    onClick: e => {
+      e.stopPropagation();
+
+      if (state.isActive) {
+        handleOnDelete();
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(Container, containerProps, /*#__PURE__*/React.createElement(Icon, {
+    data: search$1,
+    "aria-hidden": true,
+    size: size
+  }), /*#__PURE__*/React.createElement(Input, inputProps), /*#__PURE__*/React.createElement(InsideButton, _extends({}, clearButtonProps, {
+    "aria-label": "Clear search"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    data: close,
+    size: size
+  })));
+}); // Search.displayName = 'eds-search'
+
+export { Search };

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

@@ -0,0 +1,96 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: background
+      }
+    },
+    interactive: {
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__resting: {
+        rgba: primaryColor
+      }
+    },
+    text: {
+      static_icons__tertiary: {
+        rgba: placeholderColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      small
+    }
+  },
+  typography: {
+    input: {
+      text: typography
+    }
+  }
+} = tokens;
+const search = {
+  background,
+  typography,
+  height: '36px',
+  clickbound: {
+    offset: {
+      top: '6px'
+    },
+    height: '48px'
+  },
+  spacings: {
+    left: small,
+    right: small,
+    top: '6px',
+    bottom: '6px'
+  },
+  border: {
+    type: 'border',
+    width: '1px',
+    style: 'solid',
+    color: 'transparent'
+  },
+  states: {
+    focus: {
+      border: {
+        type: 'border',
+        width: '1px',
+        style: 'solid',
+        color: primaryColor
+      }
+    }
+  },
+  entities: {
+    placeholder: {
+      typography: {
+        color: placeholderColor
+      }
+    },
+    icon: {
+      typography: {
+        color: placeholderColor
+      },
+      border: {
+        type: 'border',
+        radius: '50%'
+      },
+      states: {
+        hover: {
+          background: primaryHoverAlt
+        }
+      },
+      clickbound: {
+        offset: {
+          top: '6px'
+        },
+        height: '36px'
+      }
+    }
+  }
+};
+
+export { search };