@equinor/eds-core-react 0.15.0 → 0.17.0

package/dist/esm/components/Progress/Circular/CircularProgress.tokens.js

@@ -0,0 +1,42 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    infographic: {
+      primary__moss_green_13: {
+        rgba: primary13
+      },
+      primary__moss_green_100: {
+        rgba: primary100
+      }
+    },
+    interactive: {
+      icon_on_interactive_colors: {
+        rgba: icon_on_interactive_colors
+      }
+    },
+    ui: {
+      background__semitransparent: {
+        rgba: background__semitransparent
+      }
+    }
+  }
+} = tokens$1;
+const primary = {
+  background: primary13,
+  entities: {
+    progress: {
+      background: primary100
+    }
+  }
+};
+const neutral = {
+  background: background__semitransparent,
+  entities: {
+    progress: {
+      background: icon_on_interactive_colors
+    }
+  }
+};
+
+export { neutral, primary };

package/dist/esm/components/Progress/Dots/DotProgress.js

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import styled, { keyframes } from 'styled-components';
+import * as DotProgress_tokens from './DotProgress.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const opacity = keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
+const Svg = styled.svg.withConfig({
+  displayName: "DotProgress__Svg",
+  componentId: "sc-1s6o2q7-0"
+})(["fill:", ";circle{&:nth-child(1){animation:", " 1s ease infinite;}&:nth-child(2){animation:", " 1s ease 0.2s infinite;}&:nth-child(3){animation:", " 1s ease 0.4s infinite;}}"], ({
+  color
+}) => color, opacity, opacity, opacity);
+
+const getColor = color => {
+  if (DotProgress_tokens[color]) {
+    return DotProgress_tokens[color].background;
+  }
+
+  return color;
+};
+
+const DotProgress = /*#__PURE__*/forwardRef(function DotProgress({
+  color = 'neutral',
+  size = 32,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    color: getColor(color),
+    ref
+  };
+  const height = size / 4;
+  const width = size;
+  return /*#__PURE__*/jsxs(Svg, { ...props,
+    role: "progressbar",
+    viewBox: "0 0 16 4",
+    height: height,
+    width: width,
+    preserveAspectRatio: "xMidYMid meet",
+    children: [/*#__PURE__*/jsx("circle", {
+      cx: 2,
+      cy: 2,
+      r: 2
+    }), /*#__PURE__*/jsx("circle", {
+      cx: 8,
+      cy: 2,
+      r: 2
+    }), /*#__PURE__*/jsx("circle", {
+      cx: 14,
+      cy: 2,
+      r: 2
+    })]
+  });
+});
+
+export { DotProgress };

package/dist/esm/components/Progress/Dots/DotProgress.tokens.js

@@ -0,0 +1,30 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    infographic: {
+      primary__moss_green_100: {
+        rgba: primary100
+      }
+    },
+    interactive: {
+      icon_on_interactive_colors: {
+        rgba: icon_on_interactive_colors
+      },
+      danger__resting: {
+        rgba: danger_resting
+      }
+    }
+  }
+} = tokens$1;
+const primary = {
+  background: primary100
+};
+const neutral = {
+  background: icon_on_interactive_colors
+};
+const tertiary = {
+  background: danger_resting
+};
+
+export { neutral, primary, tertiary };

package/dist/esm/components/Progress/Linear/LinearProgress.js

@@ -0,0 +1,50 @@
+import { forwardRef } from 'react';
+import styled, { keyframes } from 'styled-components';
+import { primary } from './LinearProgress.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const indeterminate = keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
+const Track = styled.div.withConfig({
+  displayName: "LinearProgress__Track",
+  componentId: "sc-5orxpi-0"
+})(["position:relative;overflow:hidden;height:4px;background-color:", ";width:100%;border-radius:50px;"], primary.background);
+const ProgressBar = styled.div.withConfig({
+  displayName: "LinearProgress__ProgressBar",
+  componentId: "sc-5orxpi-1"
+})(["transition:transform 0.4s linear;background-color:", ";width:100%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;"], primary.entities.progress.background);
+const IndeterminateProgressBar = styled.div.withConfig({
+  displayName: "LinearProgress__IndeterminateProgressBar",
+  componentId: "sc-5orxpi-2"
+})(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary.entities.progress.background, indeterminate);
+const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress({
+  variant = 'indeterminate',
+  value = null,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  let barStyle;
+
+  if (variant === 'determinate') {
+    if (value !== undefined) {
+      props['aria-valuenow'] = Math.round(value);
+      props['aria-valuemin'] = 0;
+      props['aria-valuemax'] = 100;
+      const transform = value - 100;
+      barStyle = "translateX(".concat(transform, "%)");
+    }
+  }
+
+  const transformStyle = {
+    transform: barStyle
+  };
+  return /*#__PURE__*/jsx(Track, { ...props,
+    role: "progressbar",
+    children: variant === 'indeterminate' ? /*#__PURE__*/jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsx(ProgressBar, {
+      style: transformStyle
+    })
+  });
+}); // LinearProgress.displayName = 'eds-linear-progress'
+
+export { LinearProgress };

package/dist/esm/components/Progress/Linear/LinearProgress.tokens.js

@@ -0,0 +1,24 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    infographic: {
+      primary__moss_green_13: {
+        rgba: primary13
+      },
+      primary__moss_green_100: {
+        rgba: primary100
+      }
+    }
+  }
+} = tokens;
+const primary = {
+  background: primary13,
+  entities: {
+    progress: {
+      background: primary100
+    }
+  }
+};
+
+export { primary };

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

@@ -0,0 +1,62 @@
+import { forwardRef } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import { token } from './StarProgress.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const indeterminate = keyframes(["0%{opacity:1;}20%{opacity:0.8;}40%{opacity:0.6;}60%{opacity:0.4;}80%{opacity:0.2;}100%{opacity:0.05;}"]);
+const determinate = keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}"]);
+const Svg = styled.svg.withConfig({
+  displayName: "StarProgress__Svg",
+  componentId: "sc-c0byj9-0"
+})(["fill:", ";", ""], token.background, ({
+  variant,
+  progress
+}) => variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused'));
+const StarProgress = /*#__PURE__*/forwardRef(function StarProgress({
+  variant = 'indeterminate',
+  value = null,
+  size = 48,
+  ...rest
+}, ref) {
+  const progress = Math.round(value);
+  const height = size * 1.2;
+  const width = size;
+  const props = { ...rest,
+    ref,
+    variant,
+    progress
+  };
+
+  if (variant === 'determinate') {
+    if (value !== undefined) {
+      props['aria-valuenow'] = progress;
+      props['aria-valuemin'] = 0;
+      props['aria-valuemax'] = 100;
+    }
+  }
+
+  return /*#__PURE__*/jsxs(Svg, { ...props,
+    role: "progressbar",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet",
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M32.756 34.6798L29.482 36.5817C29.4139 36.6219 29.3295 36.6227 29.2606 36.5829L25.9476 34.7151C25.7975 34.6306 25.7967 34.4149 25.9456 34.3284L29.2397 32.4256C29.3077 32.3858 29.3914 32.3858 29.4603 32.4248L32.754 34.2931C32.9033 34.3784 32.9041 34.5929 32.756 34.6798Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M25.9596 45.4706L22.6655 43.5867C22.5966 43.5469 22.554 43.4744 22.554 43.396V41.4289V39.5922C22.5519 39.4204 22.7381 39.3109 22.8878 39.397L26.1819 41.2981C26.25 41.3379 26.2926 41.4104 26.2934 41.4896V43.4268V45.2762C26.2947 45.4472 26.1085 45.5559 25.9596 45.4706Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M12.3022 47.7037V44.9795V42.6544C12.3022 42.5495 12.3576 42.4515 12.4482 42.3986L14.1262 41.4062L16.8143 39.8188C17.0119 39.7019 17.2617 39.8442 17.2625 40.0739L17.2633 42.7627V45.1456C17.2633 45.251 17.2079 45.3486 17.1165 45.4015L12.7496 47.9587C12.552 48.0748 12.3031 47.9325 12.3022 47.7037Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M0.221343 34.2106L6.76939 30.4056C6.90636 30.326 7.07449 30.3256 7.21227 30.4023L13.8378 34.1401C14.138 34.3095 14.14 34.7413 13.8415 34.9131L7.25492 38.7182C7.11795 38.7977 6.94941 38.7985 6.81204 38.7206L0.225854 34.9836C-0.0734986 34.8139 -0.075549 34.3833 0.221343 34.2106Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M6.03876 9.125L16.9237 15.5151C17.1513 15.6484 17.2903 15.8912 17.2903 16.1549V28.8331C17.2903 29.4076 16.665 29.7647 16.1704 29.4728L5.28546 23.0264C5.05869 22.8919 4.92008 22.6479 4.9209 22.3855V9.76307C4.92254 9.1902 5.54503 8.83467 6.03876 9.125Z"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M39.6262 1.07261V11.7603V19.3368C39.627 19.7178 39.4265 20.0709 39.0988 20.2644L31.4145 24.8195L23.3545 29.5964C22.6385 30.0192 21.7339 29.5029 21.7339 28.6717V10.3259C21.7339 9.94495 21.9356 9.5927 22.2641 9.39955L38.008 0.149533C38.7232 -0.270381 39.6241 0.24385 39.6262 1.07261Z"
+    })]
+  });
+}); // StarProgress.displayName = 'eds-star-progress'
+
+export { StarProgress };

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,130 @@
+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 { jsxs, 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';
+
+/* eslint camelcase: "off" */
+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{", "}&:focus-visible + 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), ({
+  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__*/jsxs(Svg, {
+      width: iconSize,
+      height: iconSize,
+      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+      fill: fill,
+      "aria-hidden": true,
+      children: [/*#__PURE__*/jsx(StyledPath, {
+        icon: radio_button_selected,
+        name: "selected"
+      }), /*#__PURE__*/jsx(StyledPath, {
+        icon: radio_button_unselected,
+        name: "unselected"
+      })]
+    });
+  }, [fill]);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: label ? /*#__PURE__*/jsxs(StyledLabel, {
+      disabled: disabled,
+      className: className,
+      children: [/*#__PURE__*/jsxs(InputWrapper, {
+        disabled: disabled,
+        children: [/*#__PURE__*/jsx(Input, { ...rest,
+          ref: ref,
+          disabled: disabled,
+          iconSize: iconSize
+        }), renderSVG]
+      }), /*#__PURE__*/jsx(LabelText, {
+        children: label
+      })]
+    }) : /*#__PURE__*/jsxs(InputWrapper, {
+      disabled: disabled,
+      children: [/*#__PURE__*/jsx(Input, { ...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,67 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { scrim } from './Scrim.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+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,
+  open,
+  isDismissable = false,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    open,
+    isDismissable,
+    ref
+  };
+  useHideBodyScroll(open);
+  useGlobalKeyPress('Escape', () => {
+    if (isDismissable && onClose && open) {
+      onClose();
+    }
+  });
+
+  const handleMouseClose = event => {
+    if (event) {
+      if (event.type === 'click' && isDismissable && open) {
+        onClose && onClose();
+      }
+    }
+  };
+
+  const handleContentClick = event => {
+    // Avoid event bubbling inside dialog/content inside scrim
+    event.stopPropagation();
+  };
+
+  if (!open) {
+    return null;
+  }
+
+  return /*#__PURE__*/jsx(StyledScrim, {
+    onClick: handleMouseClose,
+    ...props,
+    children: /*#__PURE__*/jsx(ScrimContent, {
+      onClick: handleContentClick,
+      children: 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 };