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

package/dist/esm/components/Accordion/Accordion.js

@@ -0,0 +1,41 @@
+import { forwardRef, Children, cloneElement } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { accordion } from './Accordion.tokens.js';
+import { useId, useToken } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
+  let {
+    headerLevel = 'h2',
+    chevronPosition = 'left',
+    children,
+    id,
+    ...props
+  } = _ref;
+  const accordionId = useId(id, 'accordion');
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, accordion);
+  const AccordionItems = Children.map(children, (child, index) => {
+    if (!child) return null;
+    return /*#__PURE__*/cloneElement(child, {
+      accordionId,
+      index,
+      headerLevel,
+      chevronPosition
+    });
+  });
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx("div", { ...props,
+      ref: ref,
+      children: AccordionItems
+    })
+  });
+}); // Accordion.displayName = 'Accordion'
+
+export { Accordion };

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

@@ -0,0 +1,115 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    ui: {
+      accordion_header: typography
+    }
+  },
+  colors: {
+    ui: {
+      background__default: {
+        rgba: backgroundDefault
+      },
+      background__medium: {
+        rgba: borderColor
+      },
+      background__light: {
+        rgba: backgroundHover
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: activatedColor
+      },
+      disabled__fill: {
+        rgba: disabledIconColor
+      },
+      disabled__text: {
+        rgba: disabledColor
+      },
+      focus: {
+        rgba: focusOutlineColor
+      }
+    },
+    text: {
+      static_icons__default: {
+        rgba: defaultIconColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: mediumSpacing
+    }
+  }
+} = tokens;
+const accordion = {
+  border: {
+    type: 'border',
+    color: borderColor,
+    style: 'solid',
+    width: '1px'
+  },
+  entities: {
+    chevron: {
+      background: activatedColor,
+      states: {
+        disabled: {
+          background: disabledIconColor
+        }
+      }
+    },
+    header: {
+      height: '48px',
+      background: backgroundDefault,
+      typography,
+      spacings: {
+        left: mediumSpacing,
+        right: mediumSpacing
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            color: focusOutlineColor,
+            style: 'dashed',
+            width: '1px',
+            offset: '2px'
+          }
+        },
+        disabled: {
+          typography: { ...typography,
+            color: disabledColor
+          }
+        },
+        active: {
+          typography: { ...typography,
+            color: activatedColor
+          }
+        },
+        hover: {
+          background: backgroundHover
+        }
+      }
+    },
+    panel: {
+      spacings: {
+        bottom: mediumSpacing,
+        left: mediumSpacing,
+        right: mediumSpacing,
+        top: mediumSpacing
+      }
+    },
+    icon: {
+      typography: {
+        color: defaultIconColor
+      }
+    }
+  },
+  modes: {
+    compact: {}
+  }
+};
+
+export { accordion };

package/dist/esm/components/Accordion/AccordionHeader.js

@@ -0,0 +1,151 @@
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import styled, { css } from 'styled-components';
+import { chevron_up, chevron_down } from '@equinor/eds-icons';
+import { Icon } from '../Icon/index.js';
+import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
+import { accordion } from './Accordion.tokens.js';
+import { typographyTemplate, bordersTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  entities: {
+    chevron: chevronToken
+  }
+} = accordion;
+const StyledAccordionHeader = styled.div.attrs(_ref => {
+  let {
+    panelId,
+    isExpanded,
+    disabled
+  } = _ref;
+  return {
+    'aria-expanded': isExpanded,
+    'aria-controls': panelId,
+    role: 'button',
+    'aria-disabled': isExpanded && disabled,
+    tabIndex: disabled ? -1 : 0,
+    disabled
+  };
+}).withConfig({
+  displayName: "AccordionHeader__StyledAccordionHeader",
+  componentId: "sc-cu2e95-0"
+})(_ref2 => {
+  let {
+    theme,
+    disabled,
+    parentIndex
+  } = _ref2;
+  const {
+    entities: {
+      header,
+      icon: iconToken
+    },
+    border
+  } = theme;
+  return css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : css({
+    color: header.typography.color,
+    cursor: 'pointer',
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header.states.hover.background
+      }
+    }
+  }), iconToken.typography.color);
+});
+const StyledIcon = styled(Icon).withConfig({
+  displayName: "AccordionHeader__StyledIcon",
+  componentId: "sc-cu2e95-1"
+})(_ref3 => {
+  let {
+    chevronPosition
+  } = _ref3;
+  return chevronPosition === 'left' ? {
+    marginRight: '32px'
+  } : {
+    marginLeft: '16px'
+  };
+});
+const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4, ref) {
+  let {
+    parentIndex,
+    headerLevel,
+    chevronPosition,
+    panelId,
+    id,
+    isExpanded = false,
+    children,
+    toggleExpanded,
+    disabled,
+    ...props
+  } = _ref4;
+
+  const handleClick = () => {
+    if (!disabled) {
+      toggleExpanded();
+
+      if (props.onToggle) {
+        props.onToggle();
+      }
+    }
+  };
+
+  const handleKeyDown = event => {
+    const {
+      key
+    } = event;
+
+    if (key === 'Enter' || key === ' ') {
+      toggleExpanded();
+
+      if (props.onToggle) {
+        props.onToggle();
+      }
+
+      event.preventDefault();
+    }
+  };
+
+  const chevron = /*#__PURE__*/jsx(StyledIcon, {
+    data: isExpanded ? chevron_up : chevron_down,
+    size: 24,
+    chevronPosition: chevronPosition,
+    color: disabled ? chevronToken.states.disabled.background : chevronToken.background
+  }, "".concat(id, "-icon"));
+
+  const headerChildren = Children.map(children, child => {
+    if (typeof child === 'string') {
+      return /*#__PURE__*/jsx(AccordionHeaderTitle, {
+        isExpanded: isExpanded,
+        disabled: disabled,
+        children: child
+      });
+    }
+
+    if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderTitle) {
+      return /*#__PURE__*/cloneElement(child, {
+        isExpanded,
+        disabled
+      });
+    }
+
+    return child;
+  });
+  const newChildren = [chevron, headerChildren];
+  return /*#__PURE__*/jsx(StyledAccordionHeader, {
+    isExpanded: isExpanded,
+    parentIndex: parentIndex,
+    as: headerLevel,
+    disabled: disabled,
+    ...props,
+    panelId: panelId,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+  });
+}); // AccordionHeader.displayName = 'EdsAccordionHeader'
+
+export { AccordionHeader };

package/dist/esm/components/Accordion/AccordionHeaderTitle.js

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledAccordionHeaderTitle = styled.span.withConfig({
+  displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
+  componentId: "sc-g27uve-0"
+})(_ref => {
+  var _theme$entities$heade;
+
+  let {
+    theme,
+    isExpanded,
+    disabled
+  } = _ref;
+  return css(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], isExpanded && !disabled ? (_theme$entities$heade = theme.entities.header.states.active.typography) === null || _theme$entities$heade === void 0 ? void 0 : _theme$entities$heade.color : 'inherit');
+});
+const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
+  let {
+    isExpanded,
+    disabled,
+    children
+  } = _ref2;
+  return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, {
+    ref: ref,
+    isExpanded: isExpanded,
+    disabled: disabled,
+    children: children
+  });
+}); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'
+
+export { AccordionHeaderTitle };

package/dist/esm/components/Accordion/AccordionItem.js

@@ -0,0 +1,48 @@
+import { forwardRef, useState, Children, cloneElement, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
+  let {
+    headerLevel,
+    chevronPosition,
+    index = 0,
+    accordionId,
+    isExpanded,
+    children,
+    disabled,
+    ...props
+  } = _ref;
+  const [expanded, setExpanded] = useState(isExpanded);
+
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  const Children$1 = Children.map(children, (child, childIndex) => {
+    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
+    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
+    return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
+      isExpanded: expanded,
+      toggleExpanded,
+      id: headerId,
+      panelId,
+      headerLevel,
+      chevronPosition,
+      parentIndex: index,
+      disabled
+    }) : /*#__PURE__*/cloneElement(child, {
+      hidden: !expanded,
+      id: panelId,
+      headerId
+    });
+  });
+  useEffect(() => {
+    setExpanded(isExpanded);
+  }, [isExpanded]);
+  return /*#__PURE__*/jsx("div", { ...props,
+    ref: ref,
+    children: Children$1
+  });
+}); // AccordionItem.displayName = 'AccordionItem'
+
+export { AccordionItem };

package/dist/esm/components/Accordion/AccordionPanel.js

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledAccordionPanel = styled.div.attrs(_ref => {
+  let {
+    headerId
+  } = _ref;
+  return {
+    role: 'region',
+    'aria-labelledby': headerId
+  };
+}).withConfig({
+  displayName: "AccordionPanel__StyledAccordionPanel",
+  componentId: "sc-suplv4-0"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const {
+    entities: {
+      header,
+      panel
+    },
+    border
+  } = theme;
+  return css(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), header.background);
+});
+const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel(_ref3, ref) {
+  let {
+    id,
+    headerId,
+    hidden,
+    children,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/jsx(StyledAccordionPanel, {
+    headerId: headerId,
+    id: id,
+    hidden: hidden,
+    ...props,
+    ref: ref,
+    children: children
+  });
+}); // AccordionPanel.displayName = 'eds-accordion-panel'
+
+export { AccordionPanel };

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

@@ -0,0 +1,17 @@
+import { Accordion as Accordion$1 } from './Accordion.js';
+import { AccordionItem } from './AccordionItem.js';
+import { AccordionHeader } from './AccordionHeader.js';
+import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
+import { AccordionPanel } from './AccordionPanel.js';
+
+const Accordion = Accordion$1;
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.HeaderTitle = AccordionHeaderTitle;
+Accordion.Panel = AccordionPanel;
+Accordion.Item.displayName = 'Accordion.Item';
+Accordion.Header.displayName = 'Accordion.Header';
+Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle';
+Accordion.Panel.displayName = 'Accordion.Panel';
+
+export { Accordion };

package/dist/esm/components/Avatar/Avatar.js

@@ -0,0 +1,47 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { bordersTemplate } from '@equinor/eds-utils';
+import { avatar } from './Avatar.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledAvatar = styled.div.withConfig({
+  displayName: "Avatar__StyledAvatar",
+  componentId: "sc-r7n7on-0"
+})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], bordersTemplate(avatar.border), _ref => {
+  let {
+    size
+  } = _ref;
+  return css(["height:", "px;width:", "px;"], size, size);
+});
+const StyledImage = styled.img.withConfig({
+  displayName: "Avatar__StyledImage",
+  componentId: "sc-r7n7on-1"
+})(["height:100%;text-align:center;color:transparent;", ";"], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && css(["opacity:", ";"], avatar.states.disabled.opacity);
+});
+const Avatar = /*#__PURE__*/forwardRef(function Avatar(_ref3, ref) {
+  let {
+    src = null,
+    alt,
+    size = 24,
+    disabled = false,
+    ...rest
+  } = _ref3;
+  return /*#__PURE__*/jsx(StyledAvatar, {
+    size: size,
+    disabled: disabled,
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/jsx(StyledImage, {
+      src: src,
+      alt: alt,
+      disabled: disabled
+    })
+  });
+});
+Avatar.displayName = 'Avatar';
+
+export { Avatar };

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

@@ -0,0 +1,13 @@
+const avatar = {
+  border: {
+    type: 'border',
+    radius: '50%'
+  },
+  states: {
+    disabled: {
+      opacity: '0.5'
+    }
+  }
+};
+
+export { avatar };

package/dist/esm/components/Banner/Banner.js

@@ -0,0 +1,63 @@
+import { forwardRef, Children, isValidElement } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, useToken } from '@equinor/eds-utils';
+import { enabled } from './Banner.tokens.js';
+import { BannerIcon } from './BannerIcon.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const StyledBanner = styled.div.withConfig({
+  displayName: "Banner__StyledBanner",
+  componentId: "sc-1ju451i-0"
+})([""]);
+const Content = styled.div.withConfig({
+  displayName: "Banner__Content",
+  componentId: "sc-1ju451i-1"
+})(_ref => {
+  let {
+    theme,
+    hasIcon
+  } = _ref;
+  return css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(theme.spacings), hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
+});
+const NonMarginDivider = styled(Divider).withConfig({
+  displayName: "Banner__NonMarginDivider",
+  componentId: "sc-1ju451i-2"
+})(["margin:0;height:2px;"]);
+const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  const childrenWhereBannerIcon = Children.map(children, child => {
+    return /*#__PURE__*/isValidElement(child) && child.type === BannerIcon;
+  });
+  const hasIcon = childrenWhereBannerIcon.some(bool => bool);
+  const props = {
+    ref,
+    ...rest
+  };
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, enabled);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(StyledBanner, { ...props,
+      className: className,
+      role: "alert",
+      children: [/*#__PURE__*/jsx(Content, {
+        hasIcon: hasIcon,
+        children: children
+      }), /*#__PURE__*/jsx(NonMarginDivider, {
+        color: "light"
+      })]
+    })
+  });
+});
+
+export { Banner };

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

@@ -0,0 +1,95 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+/* eslint-disable camelcase */
+const {
+  typography: {
+    paragraph: {
+      body_long: messageTypography
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium
+    }
+  },
+  colors: {
+    infographic: {
+      primary__moss_green_13: {
+        rgba: infoBackground
+      },
+      primary__energy_red_13: {
+        rgba: warningBackground
+      },
+      primary__moss_green_100: {
+        rgba: infoColor
+      },
+      primary__energy_red_100: {
+        rgba: warningColor
+      }
+    },
+    ui: {
+      background__default: {
+        rgba: backgroundColor
+      }
+    }
+  },
+  shape: {
+    circle: {
+      minHeight,
+      minWidth,
+      borderRadius
+    }
+  }
+} = tokens$1;
+const enabled = {
+  typography: { ...messageTypography
+  },
+  background: backgroundColor,
+  spacings: {
+    left: medium,
+    right: medium,
+    top: medium,
+    bottom: medium
+  },
+  entities: {
+    icon: {
+      height: minHeight,
+      width: minWidth,
+      border: {
+        type: 'border',
+        radius: borderRadius
+      }
+    }
+  },
+  modes: {
+    compact: {}
+  }
+};
+const info = {
+  entities: {
+    icon: {
+      background: infoBackground,
+      typography: {
+        color: infoColor
+      }
+    }
+  },
+  modes: {
+    compact: {}
+  }
+};
+const warning = {
+  entities: {
+    icon: {
+      background: warningBackground,
+      typography: {
+        color: warningColor
+      }
+    }
+  },
+  modes: {
+    compact: {}
+  }
+};
+
+export { enabled, info, warning };