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

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

@@ -0,0 +1,151 @@
+import { tokens } from '@equinor/eds-tokens';
+import * as R from 'ramda';
+
+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: '48px',
+  background: backgroundColor,
+  border: {
+    type: 'bordergroup',
+    bottom: {
+      color: borderColor,
+      width: '1px',
+      style: 'solid'
+    }
+  },
+  spacings: {
+    top: '0',
+    bottom: '0',
+    left: medium,
+    right: medium
+  },
+  typography: { ...cellTypography,
+    color: typographyColor
+  },
+  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: '32px',
+      typography: { ...compactTypography.table.cell_text,
+        color: typographyColor
+      }
+    }
+  },
+  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 R.mergeDeepRight(token, token.variants.numeric);
+
+    default:
+      return token;
+  }
+};
+
+export { applyVariant, tableCell };

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

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Head.tokens.js';
+import { InnerContext } from '../Inner.context.js';
+import { jsx } from 'react/jsx-runtime';
+import { bordersTemplate } from '../../../utils/templates/borders.js';
+
+const StyledTableHead = styled.thead.withConfig({
+  displayName: "Head__StyledTableHead",
+  componentId: "sc-g9tch7-0"
+})(["", " background:", ";"], bordersTemplate(token.border), token.background);
+const Head = /*#__PURE__*/forwardRef(function Head({
+  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,67 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { token } from './HeaderCell.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+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__*/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,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,34 @@
+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"
+})(({
+  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__*/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,20 @@
+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({
+  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,23 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { tableOfContents } from './TableOfContents.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+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__*/jsx(StyledLinkItem, { ...props,
+    ref: ref,
+    children: children
+  });
+});
+
+export { LinkItem };

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

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { List } from '../List/index.js';
+import { tableOfContents } from './TableOfContents.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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__*/jsxs(StyledTableOfContents, {
+    ref: ref,
+    label: label,
+    sticky: sticky,
+    ...rest,
+    children: [/*#__PURE__*/jsx(TocLabel, {
+      variant: "overline",
+      children: label
+    }), /*#__PURE__*/jsx(TocList, {
+      children: 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 };