@equinor/eds-core-react 0.14.2 → 0.15.0-dev.20211118

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

@@ -0,0 +1,28 @@
+import { forwardRef, Children, cloneElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '../../hooks/useId.js';
+
+const Accordion = /*#__PURE__*/forwardRef(function Accordion({
+  headerLevel = 'h2',
+  chevronPosition = 'left',
+  children,
+  id,
+  ...props
+}, ref) {
+  const accordionId = useId(id, 'accordion');
+  const AccordionItems = Children.map(children, (child, index) => {
+    if (!child) return null;
+    return /*#__PURE__*/cloneElement(child, {
+      accordionId,
+      index,
+      headerLevel,
+      chevronPosition
+    });
+  });
+  return /*#__PURE__*/jsx("div", { ...props,
+    ref: ref,
+    children: AccordionItems
+  });
+}); // Accordion.displayName = 'Accordion'
+
+export { Accordion };

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

@@ -0,0 +1,112 @@
+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
+      }
+    }
+  }
+};
+
+export { accordion };

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

@@ -0,0 +1,137 @@
+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 { jsx } from 'react/jsx-runtime';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const {
+  entities: {
+    header,
+    chevron: chevronToken,
+    icon: iconToken
+  }
+} = accordion;
+const StyledAccordionHeader = styled.div.attrs(({
+  panelId,
+  isExpanded,
+  disabled
+}) => ({
+  '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"
+})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(accordion.border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), ({
+  parentIndex
+}) => parentIndex === 0 ? null : 'none', header.background, header.height, ({
+  disabled
+}) => 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"
+})(({
+  chevronPosition
+}) => chevronPosition === 'left' ? {
+  marginRight: '32px'
+} : {
+  marginLeft: '16px'
+});
+const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader({
+  parentIndex,
+  headerLevel,
+  chevronPosition,
+  panelId,
+  id,
+  isExpanded = false,
+  children,
+  toggleExpanded,
+  disabled,
+  ...props
+}, ref) {
+  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
+  }, `${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,30 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { accordion } from './Accordion.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledAccordionHeaderTitle = styled.span.withConfig({
+  displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
+  componentId: "sc-g27uve-0"
+})(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], ({
+  isExpanded,
+  disabled
+}) => {
+  var _tokens$entities$head;
+
+  return isExpanded && !disabled ? (_tokens$entities$head = accordion.entities.header.states.active.typography) === null || _tokens$entities$head === void 0 ? void 0 : _tokens$entities$head.color : 'inherit';
+});
+const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle({
+  isExpanded,
+  disabled,
+  children
+}, ref) {
+  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,47 @@
+import { forwardRef, useState, Children, cloneElement, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem({
+  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 = `${accordionId}-header-${index + 1}`;
+    const panelId = `${accordionId}-panel-${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,40 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { accordion } from './Accordion.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+
+const {
+  entities: {
+    header,
+    panel
+  }
+} = accordion;
+const StyledAccordionPanel = styled.div.attrs(({
+  headerId
+}) => ({
+  role: 'region',
+  'aria-labelledby': headerId
+})).withConfig({
+  displayName: "AccordionPanel__StyledAccordionPanel",
+  componentId: "sc-suplv4-0"
+})(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(accordion.border), spacingsTemplate(panel.spacings), header.background);
+const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel({
+  id,
+  headerId,
+  hidden,
+  children,
+  ...props
+}, ref) {
+  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,40 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { avatar } from './Avatar.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+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), ({
+  size
+}) => 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;", ";"], ({
+  disabled
+}) => disabled && css(["opacity:", ";"], avatar.states.disabled.opacity));
+const Avatar = /*#__PURE__*/forwardRef(function Avatar({
+  src = null,
+  alt,
+  size = 24,
+  disabled = false,
+  ...rest
+}, ref) {
+  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,51 @@
+import { forwardRef, Children, isValidElement } from 'react';
+import styled from 'styled-components';
+import * as Banner_tokens from './Banner.tokens.js';
+import { BannerIcon } from './BannerIcon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledBanner = styled.div.withConfig({
+  displayName: "Banner__StyledBanner",
+  componentId: "sc-1ju451i-0"
+})([""]);
+const {
+  enabled
+} = Banner_tokens;
+const Content = styled.div.withConfig({
+  displayName: "Banner__Content",
+  componentId: "sc-1ju451i-1"
+})(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], spacingsTemplate(enabled.spacings), ({
+  hasIcon
+}) => hasIcon ? 'min-content 1fr auto' : '1fr auto', enabled.background);
+const NonMarginDivider = styled(Divider).withConfig({
+  displayName: "Banner__NonMarginDivider",
+  componentId: "sc-1ju451i-2"
+})(["margin:0;height:2px;"]);
+const Banner = /*#__PURE__*/forwardRef(function Banner({
+  children,
+  className,
+  ...rest
+}, ref) {
+  const childrenWhereBannerIcon = Children.map(children, child => {
+    return /*#__PURE__*/isValidElement(child) && child.type === BannerIcon;
+  });
+  const hasIcon = childrenWhereBannerIcon.some(bool => bool);
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__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,86 @@
+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
+      }
+    }
+  }
+};
+const info = {
+  entities: {
+    icon: {
+      background: infoBackground,
+      typography: {
+        color: infoColor
+      }
+    }
+  }
+};
+const warning = {
+  entities: {
+    icon: {
+      background: warningBackground,
+      typography: {
+        color: warningColor
+      }
+    }
+  }
+};
+
+export { enabled, info, warning };

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

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import * as Banner_tokens from './Banner.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  enabled
+} = Banner_tokens;
+const StyledBannerActions = styled.div.withConfig({
+  displayName: "BannerActions__StyledBannerActions",
+  componentId: "sc-1o38ds2-0"
+})(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], enabled.spacings.left, ({
+  placement
+}) => placement === 'bottom' ? '1/-1' : 'auto', ({
+  placement
+}) => placement === 'bottom' && {
+  marginTop: enabled.spacings.top,
+  marginLeft: '0'
+});
+const BannerActions = /*#__PURE__*/forwardRef(function BannerActions({
+  children,
+  placement = 'left',
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledBannerActions, {
+    placement: placement,
+    ...props,
+    children: children
+  });
+});
+
+export { BannerActions };

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

@@ -0,0 +1,41 @@
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import styled from 'styled-components';
+import * as Banner_tokens from './Banner.tokens.js';
+import { Icon } from '../Icon/index.js';
+import { jsx } from 'react/jsx-runtime';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const {
+  enabled,
+  info,
+  warning
+} = Banner_tokens;
+const StyledBannerIcon = styled.span.withConfig({
+  displayName: "BannerIcon__StyledBannerIcon",
+  componentId: "sc-7ow3zc-0"
+})(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], bordersTemplate(enabled.entities.icon.border), ({
+  variant
+}) => variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, enabled.entities.icon.width, enabled.entities.icon.height, enabled.spacings.right);
+const BannerIcon = /*#__PURE__*/forwardRef(function BannerIcon({
+  children,
+  variant = 'info',
+  ...rest
+}, ref) {
+  const childrenWithColor = Children.map(children, child => {
+    const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
+    return /*#__PURE__*/isValidElement(child) && child.type === Icon && /*#__PURE__*/cloneElement(child, {
+      color
+    }) || child;
+  });
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledBannerIcon, {
+    variant: variant,
+    ...props,
+    children: childrenWithColor
+  });
+});
+
+export { BannerIcon };