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

package/dist/esm/components/Table/Head/Head.tokens.js

@@ -0,0 +1,30 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__medium: {
+        rgba: borderColor
+      }
+    },
+    interactive: {
+      table__header__fill_resting: {
+        rgba: backgroundColor
+      }
+    }
+  }
+} = tokens;
+const token = {
+  background: backgroundColor,
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      type: 'border',
+      width: '2px',
+      color: borderColor,
+      style: 'solid'
+    }
+  }
+};
+
+export { token };

package/dist/esm/components/Table/HeaderCell/HeaderCell.js

@@ -0,0 +1,63 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { token } from './HeaderCell.tokens.js';
+import { spacingsTemplate, typographyTemplate } from '../../../utils/templates/index.js';
+import { bordersTemplate } from '../../../utils/templates/borders.js';
+import { useEds } from '../../EdsProvider/eds.context.js';
+import { useToken } from '../../../hooks/useToken.js';
+
+const StyledTableCell = styled.th.withConfig({
+  displayName: "HeaderCell__StyledTableCell",
+  componentId: "sc-18w2o3a-0"
+})(props => {
+  const {
+    theme,
+    sticky
+  } = props;
+  const {
+    background,
+    height,
+    typography,
+    spacings
+  } = theme;
+  const activeToken = theme.states.active;
+  const ariaSort = props['aria-sort'];
+  let sortStylingHover = css({});
+  let sortStylingActive = css({});
+
+  if (ariaSort) {
+    sortStylingHover = css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], theme.states.hover.background);
+  }
+
+  if (ariaSort && ariaSort !== 'none') {
+    sortStylingActive = css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
+  }
+
+  return css(["min-height:", ";height:", ";background:", ";", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? css(["position:sticky;top:0;"]) : '');
+});
+const CellInner = styled.div.withConfig({
+  displayName: "HeaderCell__CellInner",
+  componentId: "sc-18w2o3a-1"
+})(["display:flex;align-items:center;"]);
+const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell({
+  children,
+  sort,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token$1 = useToken({
+    density
+  }, token);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: token$1
+  }, /*#__PURE__*/React.createElement(StyledTableCell, _extends({
+    "aria-sort": sort
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(CellInner, null, children)));
+});
+
+export { TableHeaderCell };

package/dist/esm/components/Table/HeaderCell/HeaderCell.tokens.js

@@ -0,0 +1,118 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    table: {
+      cell_header: cellTypography
+    },
+    _modes: {
+      compact: compactTypography
+    }
+  },
+  colors: {
+    text: {
+      static_icons__default: {
+        rgba: typographyColor
+      }
+    },
+    ui: {
+      background__medium: {
+        rgba: borderColor
+      }
+    },
+    interactive: {
+      table__header__fill_resting: {
+        rgba: backgroundColor
+      },
+      table__header__fill_hover: {
+        rgba: hoverBackgroundColor
+      },
+      table__header__fill_activated: {
+        rgba: activeBackgroundColor
+      },
+      primary__resting: {
+        rgba: primaryRestingColor
+      },
+      disabled__text: {
+        rgba: disabledTextColor
+      },
+      disabled__border: {
+        rgba: disabledBorderColor
+      },
+      focus: {
+        rgba: focusColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium
+    }
+  }
+} = tokens;
+const token = {
+  height: '48px',
+  background: backgroundColor,
+  typography: { ...cellTypography,
+    color: typographyColor
+  },
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      type: 'border',
+      width: '2px',
+      color: borderColor,
+      style: 'solid'
+    }
+  },
+  spacings: {
+    top: '0',
+    bottom: '0',
+    left: medium,
+    right: medium
+  },
+  states: {
+    active: {
+      background: activeBackgroundColor,
+      typography: { ...cellTypography,
+        color: primaryRestingColor
+      },
+      border: {
+        type: 'bordergroup',
+        bottom: {
+          color: primaryRestingColor
+        }
+      }
+    },
+    disabled: {
+      typography: { ...cellTypography,
+        color: disabledTextColor
+      },
+      border: {
+        type: 'bordergroup',
+        bottom: {
+          color: disabledBorderColor
+        }
+      }
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        color: focusColor,
+        width: '1px',
+        style: 'dashed'
+      }
+    },
+    hover: {
+      background: hoverBackgroundColor
+    }
+  },
+  modes: {
+    compact: {
+      height: '32px',
+      typography: compactTypography.table.cell_header
+    }
+  }
+};
+
+export { token };

package/dist/esm/components/Table/Inner.context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const initalState = {
+  variant: 'body'
+};
+const InnerContext = /*#__PURE__*/createContext(initalState);
+
+export { InnerContext };

package/dist/esm/components/Table/Row/Row.js

@@ -0,0 +1,33 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Row.tokens.js';
+
+const StyledRow = styled.tr.withConfig({
+  displayName: "Row__StyledRow",
+  componentId: "sc-12c5lns-0"
+})(({
+  active
+}) => {
+  var _token$states$active, _token$states$hover;
+
+  return {
+    background: active ? (_token$states$active = token.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: (_token$states$hover = token.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background
+      }
+    }
+  };
+});
+const Row = /*#__PURE__*/forwardRef(function Row({ ...props
+}, ref) {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledRow, _extends({}, props, {
+    ref: ref
+  }), children);
+});
+
+export { Row };

package/dist/esm/components/Table/Row/Row.tokens.js

@@ -0,0 +1,26 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    interactive: {
+      table__cell__fill_hover: {
+        rgba: hoverBackgroundColor
+      },
+      table__cell__fill_activated: {
+        rgba: activeBackgroundColor
+      }
+    }
+  }
+} = tokens;
+const token = {
+  states: {
+    active: {
+      background: activeBackgroundColor
+    },
+    hover: {
+      background: hoverBackgroundColor
+    }
+  }
+};
+
+export { token };

package/dist/esm/components/Table/Table.js

@@ -0,0 +1,19 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { tableCell } from './DataCell/DataCell.tokens.js';
+
+const TableBase = styled.table.withConfig({
+  displayName: "Table__TableBase",
+  componentId: "sc-14kktwc-0"
+})(["border-spacing:0;background:", ";"], tableCell.background);
+const Table = /*#__PURE__*/forwardRef(function Table({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(TableBase, _extends({}, props, {
+    ref: ref
+  }), children);
+}); // Table.displayName = 'EdsTable'
+
+export { Table };

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

@@ -0,0 +1,20 @@
+import { Table as Table$1 } from './Table.js';
+import { Body } from './Body.js';
+import { Cell } from './Cell.js';
+import { Caption } from './Caption.js';
+import { Head } from './Head/Head.js';
+import { Row } from './Row/Row.js';
+
+const Table = Table$1;
+Table.Body = Body;
+Table.Cell = Cell;
+Table.Head = Head;
+Table.Row = Row;
+Table.Caption = Caption;
+Table.Body.displayName = 'Table.Body';
+Table.Cell.displayName = 'Table.Cell';
+Table.Head.displayName = 'Table.Head';
+Table.Row.displayName = 'Table.Row';
+Table.Caption.displayName = 'Table.Caption';
+
+export { Table };

package/dist/esm/components/TableOfContents/LinkItem.js

@@ -0,0 +1,22 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { tableOfContents } from './TableOfContents.tokens.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const StyledLinkItem = styled.li.withConfig({
+  displayName: "LinkItem__StyledLinkItem",
+  componentId: "sc-1tfuad4-0"
+})(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
+const LinkItem = /*#__PURE__*/forwardRef(function LinkItem({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledLinkItem, _extends({}, props, {
+    ref: ref
+  }), children);
+});
+
+export { LinkItem };

package/dist/esm/components/TableOfContents/TableOfContents.js

@@ -0,0 +1,38 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { List } from '../List/index.js';
+import { tableOfContents } from './TableOfContents.tokens.js';
+import { Typography } from '../Typography/Typography.js';
+import { typographyTemplate } from '../../utils/templates/index.js';
+
+const StyledTableOfContents = styled.nav.withConfig({
+  displayName: "TableOfContents__StyledTableOfContents",
+  componentId: "sc-q23s6y-0"
+})(["margin-top:", ";margin-bottom:", ";", ""], tableOfContents.spacings.top, tableOfContents.spacings.bottom, ({
+  sticky
+}) => sticky && css(["position:fixed;top:", ";right:", ";"], tableOfContents.entities.sticky.spacings.top, tableOfContents.entities.sticky.spacings.right));
+const TocList = styled(List).withConfig({
+  displayName: "TableOfContents__TocList",
+  componentId: "sc-q23s6y-1"
+})(["margin:0;padding:0;"]);
+const TocLabel = styled(Typography).withConfig({
+  displayName: "TableOfContents__TocLabel",
+  componentId: "sc-q23s6y-2"
+})(["", ""], typographyTemplate(tableOfContents.typography));
+const TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents({
+  children,
+  sticky = false,
+  label = '',
+  ...rest
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledTableOfContents, _extends({
+    ref: ref,
+    label: label,
+    sticky: sticky
+  }, rest), /*#__PURE__*/React.createElement(TocLabel, {
+    variant: "overline"
+  }, label), /*#__PURE__*/React.createElement(TocList, null, children));
+});
+
+export { TableOfContents };

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

@@ -0,0 +1,103 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__hover: {
+        rgba: primaryHover
+      },
+      focus: {
+        rgba: focusColor
+      }
+    },
+    text: {
+      static_icons__tertiary: {
+        rgba: labelColor
+      }
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  },
+  spacings: {
+    comfortable: {
+      small,
+      x_large,
+      xxx_large
+    }
+  },
+  typography
+} = tokens;
+const tableOfContents = {
+  typography: { ...typography.navigation.button,
+    color: labelColor
+  },
+  spacings: {
+    top: xxx_large,
+    bottom: x_large
+  },
+  entities: {
+    icon: {
+      background: primaryColor,
+      spacings: {
+        right: small
+      }
+    },
+    links: {
+      width: 'calc(189px - 36px)',
+      typography: { ...typography.navigation.button,
+        color: primaryColor
+      },
+      spacings: {
+        top: '10px',
+        bottom: '10px',
+        left: '18px',
+        right: '18px'
+      }
+    },
+    span: {
+      maxWidth: '115px'
+    },
+    sticky: {
+      spacings: {
+        top: x_large,
+        right: x_large
+      }
+    }
+  },
+  states: {
+    focus: {
+      outline: {
+        type: 'outline',
+        color: focusColor,
+        width: '1px',
+        style: 'dashed',
+        offset: '2px'
+      }
+    },
+    hover: {
+      background: primaryHoverAlt,
+      border: {
+        radius: borderRadius
+      },
+      entities: {
+        icon: {
+          background: primaryHover
+        }
+      },
+      typography: { ...typography.navigation.button,
+        color: primaryHover
+      }
+    }
+  }
+};
+
+export { tableOfContents };

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

@@ -0,0 +1,8 @@
+import { TableOfContents as TableOfContents$1 } from './TableOfContents.js';
+import { LinkItem } from './LinkItem.js';
+
+const TableOfContents = TableOfContents$1;
+TableOfContents.LinkItem = LinkItem;
+TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem';
+
+export { TableOfContents };

package/dist/esm/components/Tabs/Tab.js

@@ -0,0 +1,43 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { token } from './Tabs.tokens.js';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const {
+  entities: {
+    tab
+  }
+} = token;
+const StyledTab = styled.button.attrs(({
+  active = false,
+  disabled = false
+}) => ({
+  type: 'button',
+  role: 'tab',
+  'aria-selected': active,
+  'aria-disabled': disabled,
+  tabIndex: active ? '0' : '-1'
+})).withConfig({
+  displayName: "Tab__StyledTab",
+  componentId: "sc-scjkct-0"
+})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), ({
+  active
+}) => active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), ({
+  active
+}) => active ? tab.states.active.states.hover.typography.color : tab.typography.color, ({
+  disabled
+}) => disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), ({
+  disabled
+}) => disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), ({
+  active
+}) => active && bordersTemplate(tab.states.active.border));
+const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  return /*#__PURE__*/React.createElement(StyledTab, _extends({
+    ref: ref
+  }, props));
+});
+
+export { Tab };

package/dist/esm/components/Tabs/TabList.js

@@ -0,0 +1,89 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useContext, useRef, useCallback, useEffect, Children, cloneElement } from 'react';
+import styled from 'styled-components';
+import { TabsContext } from './Tabs.context.js';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
+
+const variants = {
+  fullWidth: 'minmax(1%, 360px)',
+  minWidth: 'max-content'
+};
+const StyledTabList = styled.div.attrs(() => ({
+  role: 'tablist'
+})).withConfig({
+  displayName: "TabList__StyledTabList",
+  componentId: "sc-1g1p5i1-0"
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";"], ({
+  variant
+}) => variants[variant]);
+const TabList = /*#__PURE__*/forwardRef(function TabsList({
+  children = [],
+  ...props
+}, ref) {
+  const {
+    activeTab,
+    handleChange,
+    tabsId,
+    variant = 'minWidth',
+    tabsFocused
+  } = useContext(TabsContext);
+  const currentTab = useRef(activeTab);
+  const selectedTabRef = useCallback(node => {
+    if (node !== null && tabsFocused) {
+      node.focus();
+    }
+  }, [tabsFocused]);
+  useEffect(() => {
+    currentTab.current = activeTab;
+  }, [activeTab]);
+  const Tabs = Children.map(children, (child, index) => {
+    const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
+    useCombinedRefs(child.ref, selectedTabRef) : child.ref;
+    return /*#__PURE__*/cloneElement(child, {
+      id: `${tabsId}-tab-${index + 1}`,
+      'aria-controls': `${tabsId}-panel-${index + 1}`,
+      active: index === activeTab,
+      index,
+      onClick: () => handleChange(index),
+      ref: tabRef
+    });
+  });
+  const focusableChildren = Tabs.filter(child => {
+    const childProps = child.props;
+    return !childProps.disabled;
+  }).map(child => {
+    const childProps = child.props;
+    return childProps.index;
+  });
+  const firstFocusableChild = focusableChildren[0];
+  const lastFocusableChild = focusableChildren[focusableChildren.length - 1];
+
+  const handleTabsChange = (direction, fallbackTab) => {
+    const i = direction === 'left' ? 1 : -1;
+    const nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
+    handleChange(nextTab === undefined ? fallbackTab : nextTab);
+  };
+
+  const handleKeyPress = event => {
+    const {
+      key
+    } = event;
+
+    if (key === 'ArrowLeft') {
+      handleTabsChange('left', lastFocusableChild);
+    }
+
+    if (key === 'ArrowRight') {
+      handleTabsChange('right', firstFocusableChild);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(StyledTabList, _extends({
+    onKeyDown: handleKeyPress,
+    ref: ref
+  }, props, {
+    variant: variant
+  }), Tabs);
+});
+
+export { TabList };

package/dist/esm/components/Tabs/TabPanel.js

@@ -0,0 +1,27 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Tabs.tokens.js';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const {
+  entities: {
+    panel
+  }
+} = token;
+const StyledTabPanel = styled.div.attrs(() => ({
+  tabIndex: 0,
+  role: 'tabpanel'
+})).withConfig({
+  displayName: "TabPanel__StyledTabPanel",
+  componentId: "sc-e8v1d4-0"
+})(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline));
+const TabPanel = /*#__PURE__*/forwardRef(function TabPanel({ ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledTabPanel, _extends({
+    ref: ref
+  }, props), props.children);
+});
+
+export { TabPanel };

package/dist/esm/components/Tabs/TabPanels.js

@@ -0,0 +1,23 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useContext, Children, cloneElement } from 'react';
+import { TabsContext } from './Tabs.context.js';
+
+const TabPanels = /*#__PURE__*/forwardRef(function TabPanels({
+  children,
+  ...props
+}, ref) {
+  const {
+    activeTab,
+    tabsId
+  } = useContext(TabsContext);
+  const Panels = Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+    id: `${tabsId}-panel-${index + 1}`,
+    'aria-labelledby': `${tabsId}-tab-${index + 1}`,
+    hidden: activeTab !== index
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props), Panels);
+});
+
+export { TabPanels };