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

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

@@ -0,0 +1,161 @@
+import { tokens } from '@equinor/eds-tokens';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.27.2/node_modules/ramda/src/mergeDeepRight.js';
+
+const {
+  typography: {
+    table: {
+      cell_text: cellTypography,
+      cell_numeric_monospaced: cellNumericTypography
+    },
+    _modes: {
+      compact: compactTypography
+    }
+  },
+  colors: {
+    text: {
+      static_icons__default: {
+        rgba: typographyColor
+      }
+    },
+    ui: {
+      background__medium: {
+        rgba: borderColor
+      }
+    },
+    interactive: {
+      table__cell__fill_resting: {
+        rgba: backgroundColor
+      },
+      table__cell__fill_hover: {
+        rgba: hoverBackgroundColor
+      },
+      table__cell__fill_activated: {
+        rgba: activeBackgroundColor
+      },
+      danger__highlight: {
+        rgba: errorColor
+      },
+      primary__resting: {
+        rgba: primaryRestingColor
+      },
+      disabled__text: {
+        rgba: disabledTextColor
+      },
+      disabled__border: {
+        rgba: disabledBorderColor
+      },
+      focus: {
+        rgba: focusColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium
+    }
+  }
+} = tokens;
+const tableCell = {
+  height: 'var(--eds_table__cell__height, 48px)',
+  background: backgroundColor,
+  align: {
+    vertical: 'var(--eds_table__cell__vertical_align, inherit)'
+  },
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      color: borderColor,
+      width: '1px',
+      style: 'solid'
+    }
+  },
+  spacings: {
+    top: 'var(--eds_table__cell__padding_y, 0)',
+    bottom: 'var(--eds_table__cell__padding_y, 0)',
+    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(medium, ")")
+  },
+  typography: { ...cellTypography,
+    color: typographyColor,
+    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
+  },
+  states: {
+    active: {
+      background: activeBackgroundColor,
+      typography: { ...cellTypography,
+        color: primaryRestingColor
+      },
+      border: {
+        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: 'var(--eds_table__cell__height_compact, 32px)',
+      typography: { ...compactTypography.table.cell_text,
+        color: typographyColor
+      },
+      spacings: {
+        top: 'var(--eds_table__cell__padding_y_compact, 0)',
+        bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
+        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
+      }
+    }
+  },
+  validation: {
+    error: {
+      background: errorColor
+    }
+  },
+  variants: {
+    numeric: {
+      typography: { ...cellNumericTypography,
+        color: typographyColor
+      },
+      modes: {
+        compact: {
+          typography: { ...compactTypography.table.cell_numeric_monospaced,
+            color: typographyColor
+          }
+        }
+      }
+    }
+  }
+};
+const applyVariant = (variant, token) => {
+  switch (variant) {
+    case 'numeric':
+      return mergeDeepRight(token, token.variants.numeric);
+
+    default:
+      return token;
+  }
+};
+
+export { applyVariant, tableCell };

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

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Head.tokens.js';
+import { bordersTemplate } from '@equinor/eds-utils';
+import { InnerContext } from '../Inner.context.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledTableHead = styled.thead.withConfig({
+  displayName: "Head__StyledTableHead",
+  componentId: "sc-g9tch7-0"
+})(["", " background:", ";"], bordersTemplate(token.border), token.background);
+const Head = /*#__PURE__*/forwardRef(function Head(_ref, ref) {
+  let {
+    children,
+    sticky,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/jsx(InnerContext.Provider, {
+    value: {
+      variant: 'head',
+      sticky
+    },
+    children: /*#__PURE__*/jsx(StyledTableHead, { ...props,
+      ref: ref,
+      children: children
+    })
+  });
+});
+
+export { Head };

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,66 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
+import { token } from './HeaderCell.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../../EdsProvider/eds.context.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;z-index:1;"]) : '');
+});
+const CellInner = styled.div.withConfig({
+  displayName: "HeaderCell__CellInner",
+  componentId: "sc-18w2o3a-1"
+})(["display:flex;align-items:center;"]);
+const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
+  let {
+    children,
+    sort,
+    ...rest
+  } = _ref;
+  const {
+    density
+  } = useEds();
+  const token$1 = useToken({
+    density
+  }, token);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token$1,
+    children: /*#__PURE__*/jsx(StyledTableCell, {
+      "aria-sort": sort,
+      ...rest,
+      ref: ref,
+      children: /*#__PURE__*/jsx(CellInner, {
+        children: children
+      })
+    })
+  });
+});
+
+export { TableHeaderCell };

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

@@ -0,0 +1,128 @@
+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: 'var(--eds_table__cell__height, 48px)',
+  background: backgroundColor,
+  align: {
+    vertical: 'var(--eds_table__cell__vertical_align, inherit)'
+  },
+  typography: { ...cellTypography,
+    color: typographyColor,
+    fontSize: "var(--eds_table__font_size, ".concat(cellTypography.fontSize, ")")
+  },
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      type: 'border',
+      width: '2px',
+      color: borderColor,
+      style: 'solid'
+    }
+  },
+  spacings: {
+    top: 'var(--eds_table__cell__padding_y, 0)',
+    bottom: 'var(--eds_table__cell__padding_y, 0)',
+    left: "var(--eds_table__cell__padding_x, ".concat(medium, ")"),
+    right: "var(--eds_table__cell__padding_x, ".concat(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: 'var(--eds_table__cell__height_compact, 32px)',
+      typography: compactTypography.table.cell_header,
+      spacings: {
+        top: 'var(--eds_table__cell__padding_y_compact, 0)',
+        bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
+        left: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")"),
+        right: "var(--eds_table__cell__padding_x_compact, ".concat(medium, ")")
+      }
+    }
+  }
+};
+
+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,36 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Row.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledRow = styled.tr.withConfig({
+  displayName: "Row__StyledRow",
+  componentId: "sc-12c5lns-0"
+})(_ref => {
+  var _token$states$active, _token$states$hover;
+
+  let {
+    active
+  } = _ref;
+  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(_ref2, ref) {
+  let { ...props
+  } = _ref2;
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/jsx(StyledRow, { ...props,
+    ref: ref,
+    children: 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,21 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { tableCell } from './DataCell/DataCell.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const TableBase = styled.table.withConfig({
+  displayName: "Table__TableBase",
+  componentId: "sc-14kktwc-0"
+})(["border-spacing:0;background:", ";"], tableCell.background);
+const Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/jsx(TableBase, { ...props,
+    ref: ref,
+    children: 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,26 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTemplate, spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledLinkItem = styled.li.withConfig({
+  displayName: "LinkItem__StyledLinkItem",
+  componentId: "sc-1tfuad4-0"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["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(theme.entities.links.typography), spacingsTemplate(theme.entities.links.spacings), theme.entities.links.typography.lineHeight, theme.entities.links.width, theme.entities.icon.background, theme.entities.icon.spacings.right, theme.entities.span.maxWidth, outlineTemplate(theme.states.focus.outline), typographyTemplate(theme.states.hover.typography), theme.states.hover.background, bordersTemplate(theme.states.hover.border), theme.states.hover.entities.icon.background);
+});
+const LinkItem = /*#__PURE__*/forwardRef(function LinkItem(_ref2, ref) {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/jsx(StyledLinkItem, { ...props,
+    ref: ref,
+    children: children
+  });
+});
+
+export { LinkItem };

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

@@ -0,0 +1,63 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { List } from '../List/index.js';
+import { typographyTemplate, useToken } from '@equinor/eds-utils';
+import { tableOfContents } from './TableOfContents.tokens.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+const StyledTableOfContents = styled.nav.withConfig({
+  displayName: "TableOfContents__StyledTableOfContents",
+  componentId: "sc-q23s6y-0"
+})(_ref => {
+  let {
+    theme,
+    sticky
+  } = _ref;
+  return css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, sticky && css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.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"
+})(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return css(["", ""], typographyTemplate(theme.typography));
+});
+const TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents(_ref3, ref) {
+  let {
+    children,
+    sticky = false,
+    label = '',
+    ...rest
+  } = _ref3;
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, tableOfContents);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(StyledTableOfContents, {
+      ref: ref,
+      label: label,
+      sticky: sticky,
+      ...rest,
+      children: [/*#__PURE__*/jsx(TocLabel, {
+        variant: "overline",
+        children: label
+      }), /*#__PURE__*/jsx(TocList, {
+        children: children
+      })]
+    })
+  });
+});
+
+export { TableOfContents };