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

package/dist/esm/components/Pagination/PaginationItem.js

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { pagination } from './Pagination.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '../Button/Button.js';
+
+const PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem({
+  page,
+  selected,
+  onClick,
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    page,
+    selected,
+    ...rest
+  };
+  const background = selected ? pagination.entities.item.states.active.background : null;
+  return /*#__PURE__*/jsx(Button, {
+    style: {
+      background
+    },
+    variant: "ghost_icon",
+    onClick: onClick ? onClick : undefined,
+    ...props,
+    children: page
+  });
+});
+
+export { PaginationItem };

package/dist/esm/components/Pagination/paginationControl.js

@@ -0,0 +1,46 @@
+function PaginationControl(pages, activePage) {
+  const siblings = 1; // amount of siblings on left and right side of active page after trunking
+
+  const totalPagesShown = 7; // amount of total pages before we start trunking pages in ellipsis
+
+  const pagesBeforeEllipsis = 5; // total pages shown before ellipsis and trunking begins
+
+  const ELLIPSIS = 'ELLIPSIS'; // Range function from https://dev.to/namirsab/comment/2050
+
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({
+      length
+    }, (_, i) => start + i);
+  };
+
+  let pageRange;
+
+  if (pages > 4) {
+    const startPage = Math.max(1, activePage < pagesBeforeEllipsis || pages <= totalPagesShown ? 1 : activePage + siblings + 1 >= pages ? pages - 4 // - 4 to fit total columns /
+    : activePage > 4 && pages > totalPagesShown ? activePage - siblings : 1); // the first page after left ellipsis
+
+    const endOffset = activePage < pagesBeforeEllipsis && pages > totalPagesShown ? pagesBeforeEllipsis : activePage < pagesBeforeEllipsis && pages <= totalPagesShown ? pages : activePage + siblings + 1 < pages - 1 ? activePage + siblings : activePage + siblings + 1 === pages - 1 ? pages : pages;
+    const endPage = Math.min(pages, endOffset); // the last page before right ellipsis
+
+    pageRange = range(startPage, endPage); // range in between ellipsis(es). Ex: range(4, 6) =  1 ... ( 4 5 6 )  ... 10
+
+    const hiddenLeft = startPage > 2 && pages > totalPagesShown; // Has hidden pages on left side
+
+    const hiddenRight = pages - endPage > 1 && pages > totalPagesShown; // Has hidden pages on right side
+
+    if (hiddenLeft && !hiddenRight) {
+      pageRange = [1, ELLIPSIS, ...pageRange];
+    } else if (!hiddenLeft && hiddenRight) {
+      pageRange = [...pageRange, ELLIPSIS, pages];
+    } else if (hiddenLeft && hiddenRight) {
+      pageRange = [1, ELLIPSIS, ...pageRange, ELLIPSIS, pages];
+    }
+
+    return [...pageRange];
+  }
+
+  return range(1, pages);
+}
+
+export { PaginationControl };

package/dist/esm/components/Paper/Paper.js

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { paper, elevation } from './Paper.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledPaper = styled.div.withConfig({
+  displayName: "Paper__StyledPaper",
+  componentId: "sc-6ncnv9-0"
+})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, ({
+  elevation
+}) => elevation);
+const Paper = /*#__PURE__*/forwardRef(function Paper({
+  elevation: elevation$1,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    elevation: elevation[elevation$1] || 'none'
+  };
+  return /*#__PURE__*/jsx(StyledPaper, { ...props,
+    ref: ref
+  });
+});
+
+export { Paper };

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

@@ -0,0 +1,19 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  elevation,
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      }
+    }
+  }
+} = tokens;
+const paper = {
+  maxWidth: 'calc(100% - 32px)',
+  minWidth: '96px',
+  background
+};
+
+export { elevation, paper };

package/dist/esm/components/Popover/Popover.js

@@ -0,0 +1,96 @@
+import { forwardRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Icon } from '../Icon/index.js';
+import { close } from '@equinor/eds-icons';
+import { popover } from './Popover.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+import { useOutsideClick } from '../../hooks/useOutsideClick.js';
+import { useGlobalKeyPress } from '../../hooks/useGlobalKeyPress.js';
+import { Paper } from '../Paper/Paper.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { Button } from '../Button/Button.js';
+import { usePopper } from '../../hooks/usePopper.js';
+
+const PopoverPaper = styled(Paper).withConfig({
+  displayName: "Popover__PopoverPaper",
+  componentId: "sc-b7p1is-0"
+})(["", " ", " ", " display:grid;grid-gap:", ";grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";min-height:", ";", " z-index:300;.arrow{z-index:-1;width:", ";height:", ";}&[data-popper-placement^='top'] > .arrow{bottom:", ";.arrowSvg{transform:rotate(-90deg);}}&[data-popper-placement^='bottom'] > .arrow{top:", ";.arrowSvg{transform:rotate(90deg);}}&[data-popper-placement^='left'] > .arrow{right:", ";.arrowSvg{transform:rotate(-180deg);}}&[data-popper-placement^='right'] > .arrow{left:", ";}"], ({
+  open
+}) => css({
+  visibility: open ? null : 'hidden'
+}), typographyTemplate(popover.typography), spacingsTemplate(popover.spacings), popover.spacings.bottom, popover.background, popover.maxHeight, popover.maxWidth, popover.minHeight, bordersTemplate(popover.border), popover.entities.arrow.width, popover.entities.arrow.height, popover.entities.arrow.spacings.bottom, popover.entities.arrow.spacings.top, popover.entities.arrow.spacings.right, popover.entities.arrow.spacings.left);
+const StyledCloseButton = styled(Button).withConfig({
+  displayName: "Popover__StyledCloseButton",
+  componentId: "sc-b7p1is-1"
+})(["position:absolute;top:", ";right:", ";height:", ";width:", ";&:after{height:", ";}"], popover.entities.closeButton.spacings.top, popover.spacings.right, popover.entities.closeButton.height, popover.entities.closeButton.width, popover.entities.closeButton.height);
+const ArrowWrapper = styled.div.withConfig({
+  displayName: "Popover__ArrowWrapper",
+  componentId: "sc-b7p1is-2"
+})(["&,&::before{position:absolute;width:", ";height:", ";z-index:-1;}&::before{content:'';}"], popover.entities.arrow.width, popover.entities.arrow.height);
+const PopoverArrow = styled.svg.withConfig({
+  displayName: "Popover__PopoverArrow",
+  componentId: "sc-b7p1is-3"
+})(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], popover.entities.arrow.width, popover.entities.arrow.height, popover.background);
+const Popover = /*#__PURE__*/forwardRef(function Popover({
+  children,
+  placement = 'bottom',
+  anchorEl,
+  open,
+  onClose,
+  ...rest
+}, ref) {
+  const [popperEl, setPopperEl] = useState(null);
+  const [arrowRef, setArrowRef] = useState(null);
+  const popoverRef = useCombinedRefs(ref, setPopperEl);
+  useOutsideClick(popperEl, e => {
+    if (open && onClose !== null && anchorEl && !anchorEl.contains(e.target)) {
+      onClose();
+    }
+  });
+  useGlobalKeyPress('Escape', () => {
+    if (onClose !== null && open) {
+      onClose();
+    }
+  });
+  const {
+    styles,
+    attributes
+  } = usePopper(anchorEl, popperEl, arrowRef, placement);
+  const props = {
+    open,
+    ...rest,
+    ...attributes.popper
+  };
+  return /*#__PURE__*/jsxs(PopoverPaper, {
+    ref: popoverRef,
+    elevation: "overlay",
+    style: styles.popper,
+    "data-testid": "popover",
+    ...props,
+    children: [/*#__PURE__*/jsx(ArrowWrapper, {
+      ref: setArrowRef,
+      style: styles.arrow,
+      className: "arrow",
+      children: /*#__PURE__*/jsx(PopoverArrow, {
+        className: "arrowSvg",
+        children: /*#__PURE__*/jsx("path", {
+          d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
+        })
+      })
+    }), children, /*#__PURE__*/jsx(StyledCloseButton, {
+      onClick: onClose,
+      variant: "ghost_icon",
+      "data-testid": "popover-close",
+      "aria-label": "Close popover",
+      children: /*#__PURE__*/jsx(Icon, {
+        name: "close",
+        data: close,
+        size: 24
+      })
+    })]
+  });
+});
+
+export { Popover };

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

@@ -0,0 +1,73 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    ui: {
+      accordion_header: header
+    }
+  },
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      x_large: spacingXlarge,
+      medium: spacingMedium,
+      small: spacingSmall,
+      x_small: spacingXsmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const popover = {
+  background,
+  typography: header,
+  minHeight: '48px',
+  maxWidth: '560px',
+  maxHeight: '80vh',
+  entities: {
+    arrow: {
+      width: '6px',
+      height: spacingSmall,
+      spacings: {
+        top: '-5px',
+        // 1px less than arrow width, if not the shadow would show between arrow and popover
+        bottom: '-5px',
+        left: '-5px',
+        right: '-5px'
+      }
+    },
+    closeButton: {
+      width: spacingXlarge,
+      height: spacingXlarge,
+      spacings: {
+        top: spacingSmall
+      }
+    },
+    title: {
+      spacings: {
+        top: spacingXsmall
+      }
+    }
+  },
+  spacings: {
+    top: spacingMedium,
+    left: spacingMedium,
+    right: spacingMedium,
+    bottom: spacingMedium
+  },
+  border: {
+    type: 'border',
+    radius: borderRadius
+  }
+};
+
+export { popover };

package/dist/esm/components/Popover/PopoverContent.js

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const ContentWrapper = styled.div.withConfig({
+  displayName: "PopoverContent__ContentWrapper",
+  componentId: "sc-vwww9h-0"
+})(["overflow:hidden;"]);
+const PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent({
+  children,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(ContentWrapper, { ...props,
+    children: children
+  });
+}); // PopoverContent.displayName = 'eds-popover-content'
+
+export { PopoverContent };

package/dist/esm/components/Popover/PopoverTitle.js

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { popover } from './Popover.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledPopoverTitle = styled.div.withConfig({
+  displayName: "PopoverTitle__StyledPopoverTitle",
+  componentId: "sc-1ben8su-0"
+})(["margin-right:", ";max-width:calc(", " - ", ");overflow:hidden;margin-top:-", ";"], popover.entities.closeButton.width, popover.maxWidth, popover.entities.closeButton.width, popover.entities.title.spacings.top);
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "PopoverTitle__StyledDivider",
+  componentId: "sc-1ben8su-1"
+})(["margin-left:-", ";margin-right:-", ";margin-bottom:0;width:auto;max-width:", ";"], popover.spacings.left, popover.spacings.right, popover.maxWidth);
+const PopoverTitle = /*#__PURE__*/forwardRef(function PopoverTitle({
+  children,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxs("div", { ...props,
+    children: [/*#__PURE__*/jsx(StyledPopoverTitle, {
+      children: children
+    }), /*#__PURE__*/jsx(StyledDivider, {
+      variant: "small"
+    })]
+  });
+});
+
+export { PopoverTitle };

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

@@ -0,0 +1,11 @@
+import { Popover as Popover$1 } from './Popover.js';
+import { PopoverTitle } from './PopoverTitle.js';
+import { PopoverContent } from './PopoverContent.js';
+
+const Popover = Popover$1;
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
+Popover.Title.displayName = 'Popover.Title';
+Popover.Content.displayName = 'Popover.Content';
+
+export { Popover };

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

@@ -0,0 +1,94 @@
+import { forwardRef } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import * as CircularProgress_tokens from './CircularProgress.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const indeterminate = keyframes(["100%{transform:rotate(360deg);}"]);
+const Svg = styled.svg.withConfig({
+  displayName: "CircularProgress__Svg",
+  componentId: "sc-hib054-0"
+})(["display:inline-block;", ";"], ({
+  variant
+}) => variant === 'indeterminate' ? css(["animation:", " 1.4s linear infinite;"], indeterminate) : css(["transform:rotate(-90deg);"]));
+const TrackCircle = styled.circle.withConfig({
+  displayName: "CircularProgress__TrackCircle",
+  componentId: "sc-hib054-1"
+})([""]);
+const ProgressCircle = styled.circle.withConfig({
+  displayName: "CircularProgress__ProgressCircle",
+  componentId: "sc-hib054-2"
+})([""]);
+
+const getToken = color => {
+  if (CircularProgress_tokens[color]) {
+    return CircularProgress_tokens[color];
+  }
+
+  return {
+    background: 'transparent',
+    entities: {
+      progress: {
+        background: color
+      }
+    }
+  };
+};
+
+const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress({
+  variant = 'indeterminate',
+  value = null,
+  size = 48,
+  color = 'primary',
+  ...rest
+}, ref) {
+  const thickness = 4;
+  const progress = Math.round(value);
+  const trackStyle = {};
+  const props = { ...rest,
+    ref,
+    variant
+  };
+  const token = getToken(color);
+  const circumference = 2 * Math.PI * ((48 - thickness) / 2);
+
+  if (variant === 'determinate') {
+    trackStyle.stroke = circumference.toFixed(3);
+    trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
+    props['aria-valuenow'] = progress;
+
+    if (value !== undefined) {
+      props['aria-valuenow'] = progress;
+      props['aria-valuemin'] = 0;
+      props['aria-valuemax'] = 100;
+    }
+  }
+
+  return /*#__PURE__*/jsxs(Svg, { ...props,
+    viewBox: "24 24 48 48",
+    role: "progressbar",
+    height: size,
+    width: size,
+    preserveAspectRatio: "xMidYMid meet",
+    children: [/*#__PURE__*/jsx(TrackCircle, {
+      style: trackStyle,
+      cx: 48,
+      cy: 48,
+      r: (48 - thickness) / 2,
+      fill: "none",
+      strokeWidth: thickness,
+      stroke: token.background
+    }), /*#__PURE__*/jsx(ProgressCircle, {
+      style: trackStyle,
+      cx: 48,
+      cy: 48,
+      r: (48 - thickness) / 2,
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: thickness,
+      strokeDasharray: variant === 'determinate' ? circumference : 48,
+      stroke: token.entities.progress.background
+    })]
+  });
+}); // CircularProgress.displayName = 'eds-circular-progress'
+
+export { CircularProgress };

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(${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 };