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

package/dist/esm/components/Switch/Switch.js

@@ -0,0 +1,63 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { SwitchSmall } from './SwitchSmall.js';
+import { SwitchDefault } from './SwitchDefault.js';
+import { comfortable } from './Switch.tokens.js';
+import { typographyTemplate } from '../../utils/templates/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
+
+const StyledLabel = styled.label.withConfig({
+  displayName: "Switch__StyledLabel",
+  componentId: "sc-sdaahx-0"
+})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], ({
+  isDisabled
+}) => isDisabled ? 'not-allowed' : 'pointer');
+const Label = styled.span.withConfig({
+  displayName: "Switch__Label",
+  componentId: "sc-sdaahx-1"
+})(({
+  theme
+}) => css(["", " margin-left:", ";"], typographyTemplate(theme.typography), theme.entities.label.spacings.left));
+const Switch = /*#__PURE__*/forwardRef(function Switch({
+  size = 'default',
+  disabled,
+  label,
+  className,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds(); // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)
+
+  const overrideDensity = size === 'small' ? 'compact' : density;
+  const token = useToken({
+    density: overrideDensity
+  }, comfortable);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: token
+  }, label ? /*#__PURE__*/React.createElement(StyledLabel, {
+    isDisabled: disabled,
+    className: className
+  }, size === 'small' ? /*#__PURE__*/React.createElement(SwitchSmall, _extends({
+    disabled: disabled
+  }, rest, {
+    ref: ref
+  })) : /*#__PURE__*/React.createElement(SwitchDefault, _extends({
+    disabled: disabled
+  }, rest, {
+    ref: ref
+  })), label && /*#__PURE__*/React.createElement(Label, null, label)) : size === 'small' ? /*#__PURE__*/React.createElement(SwitchSmall, _extends({
+    disabled: disabled
+  }, rest, {
+    ref: ref
+  })) : /*#__PURE__*/React.createElement(SwitchDefault, _extends({
+    disabled: disabled
+  }, rest, {
+    ref: ref
+  })));
+});
+Switch.displayName = 'Switch';
+
+export { Switch };

package/dist/esm/components/Switch/Switch.styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const BaseInputWrapper = styled.span.withConfig({
+  displayName: "Switchstyles__BaseInputWrapper",
+  componentId: "sc-x39lde-0"
+})(({
+  theme: {
+    clickbound,
+    width,
+    height
+  }
+}) => {
+  var _clickbound$offset, _clickbound$offset2;
+
+  return css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;pointer-events:none;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height);
+});
+const BaseInput = styled.input.attrs(({
+  type = 'checkbox'
+}) => ({
+  type
+})).withConfig({
+  displayName: "Switchstyles__BaseInput",
+  componentId: "sc-x39lde-1"
+})(({
+  disabled,
+  theme
+}) => css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline)));
+const GridWrapper = styled.span.withConfig({
+  displayName: "Switchstyles__GridWrapper",
+  componentId: "sc-x39lde-2"
+})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;"]);
+
+export { BaseInput, BaseInputWrapper, GridWrapper };

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

@@ -0,0 +1,168 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__medium: {
+        rgba: backgroundColorMedium
+      }
+    },
+    interactive: {
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__hover: {
+        rgba: primaryHover
+      },
+      primary__selected_highlight: {
+        rgba: activeColor
+      },
+      primary__resting: {
+        rgba: primaryResting
+      },
+      disabled__fill: {
+        rgba: backgroundDisabled
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      icon_on_interactive_colors: {
+        rgba: iconInteractive
+      }
+    },
+    text: {
+      static_icons__tertiary: {
+        rgba: iconTertiary
+      }
+    }
+  },
+  typography: {
+    navigation: {
+      menu_title: labelTypography
+    }
+  },
+  clickbounds,
+  elevation: {
+    raised: boxShadow
+  },
+  spacings: {
+    comfortable: {
+      medium_small
+    }
+  },
+  shape: {
+    circle,
+    _modes: {
+      compact: {
+        icon_button: compactIconButton
+      }
+    }
+  }
+} = tokens;
+const comfortable = {
+  typography: labelTypography,
+  height: circle.minHeight,
+  width: circle.minWidth,
+  clickbound: {
+    height: clickbounds.default__base,
+    width: clickbounds.default__base,
+    offset: {
+      top: `${(parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2}px`,
+      left: `${(parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2}px`
+    }
+  },
+  entities: {
+    label: {
+      spacings: {
+        left: medium_small
+      }
+    },
+    track: {
+      width: '32px',
+      height: '8px',
+      background: backgroundColorMedium,
+      border: {
+        type: 'border',
+        radius: '4px'
+      },
+      states: {
+        active: {
+          background: activeColor
+        },
+        hover: {
+          background: primaryHover
+        }
+      }
+    },
+    handle: {
+      height: '16px',
+      width: '16px',
+      boxShadow,
+      background: iconTertiary,
+      states: {
+        active: {
+          background: primaryResting
+        },
+        hover: {
+          background: primaryHoverAlt
+        }
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: compactIconButton.minHeight,
+      width: compactIconButton.minWidth,
+      clickbound: {
+        height: clickbounds.compact__standard,
+        width: clickbounds.compact__standard,
+        offset: {
+          top: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2}px`,
+          left: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2}px`
+        }
+      },
+      entities: {
+        track: {
+          width: '20px',
+          height: '10px',
+          states: {
+            disabled: {
+              background: iconTertiary
+            },
+            active: {
+              background: primaryResting
+            }
+          }
+        },
+        handle: {
+          height: '6px',
+          width: '6px',
+          background: iconInteractive
+        }
+      }
+    }
+  },
+  states: {
+    disabled: {
+      background: backgroundDisabled
+    },
+    focus: {
+      outline: {
+        width: '1px',
+        type: 'outline',
+        style: 'dashed',
+        color: focusOutlineColor
+      }
+    },
+    hover: {
+      background: primaryHoverAlt,
+      entities: {
+        handle: {
+          background: primaryHover
+        }
+      }
+    }
+  }
+};
+
+export { comfortable };

package/dist/esm/components/Switch/SwitchDefault.js

@@ -0,0 +1,57 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const Input = styled(BaseInput).withConfig({
+  displayName: "SwitchDefault__Input",
+  componentId: "sc-16ym5pn-0"
+})(({
+  disabled,
+  theme
+}) => css(["&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background));
+const Track = styled.span.withConfig({
+  displayName: "SwitchDefault__Track",
+  componentId: "sc-16ym5pn-1"
+})(({
+  isDisabled,
+  theme: {
+    states,
+    entities: {
+      track
+    }
+  }
+}) => css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, isDisabled && {
+  backgroundColor: states.disabled.background
+}));
+const Handle = styled.span.withConfig({
+  displayName: "SwitchDefault__Handle",
+  componentId: "sc-16ym5pn-2"
+})(({
+  isDisabled,
+  theme: {
+    states,
+    entities: {
+      handle
+    }
+  }
+}) => css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
+  backgroundColor: states.disabled.background
+}, handle.boxShadow, handle.width, handle.height));
+const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault({
+  disabled,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/React.createElement(GridWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
+    ref: ref,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(BaseInputWrapper, null, /*#__PURE__*/React.createElement(Track, {
+    isDisabled: disabled
+  }), /*#__PURE__*/React.createElement(Handle, {
+    isDisabled: disabled
+  })));
+});
+SwitchDefault.displayName = 'SwitchDefault';
+
+export { SwitchDefault };

package/dist/esm/components/Switch/SwitchSmall.js

@@ -0,0 +1,54 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
+
+const Input = styled(BaseInput).withConfig({
+  displayName: "SwitchSmall__Input",
+  componentId: "sc-1a99mis-0"
+})(({
+  disabled,
+  theme: {
+    states,
+    entities: {
+      handle,
+      track
+    }
+  }
+}) => css(["&[data-focus-visible-added]:focus + span{outline-offset:", ";}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], states.focus.outline.offset, disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
+const Track = styled.span.withConfig({
+  displayName: "SwitchSmall__Track",
+  componentId: "sc-1a99mis-1"
+})(({
+  isDisabled,
+  theme: {
+    states,
+    entities: {
+      track
+    }
+  }
+}) => css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, isDisabled ? states.disabled.background : track.states.disabled.background));
+const Handle = styled.span.withConfig({
+  displayName: "SwitchSmall__Handle",
+  componentId: "sc-1a99mis-2"
+})(({
+  theme: {
+    entities: {
+      handle
+    }
+  }
+}) => css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height));
+const SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall({
+  disabled,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/React.createElement(GridWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
+    ref: ref,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(BaseInputWrapper, null, /*#__PURE__*/React.createElement(Track, {
+    isDisabled: disabled
+  }), /*#__PURE__*/React.createElement(Handle, null)));
+});
+SwitchSmall.displayName = 'SwitchSmall';
+
+export { SwitchSmall };

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

@@ -0,0 +1,23 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { InnerContext } from './Inner.context.js';
+
+const TableBase = styled.tbody.withConfig({
+  displayName: "Body__TableBase",
+  componentId: "sc-1pdmiku-0"
+})([""]);
+const Body = /*#__PURE__*/forwardRef(function Body({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/React.createElement(InnerContext.Provider, {
+    value: {
+      variant: 'body'
+    }
+  }, /*#__PURE__*/React.createElement(TableBase, _extends({}, props, {
+    ref: ref
+  }), children));
+});
+
+export { Body };

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

@@ -0,0 +1,19 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+const StyledCaption = styled.caption.withConfig({
+  displayName: "Caption__StyledCaption",
+  componentId: "sc-rtfr07-0"
+})(({
+  captionSide = 'top'
+}) => ({
+  captionSide
+}));
+const Caption = /*#__PURE__*/forwardRef(function Caption(props, ref) {
+  return /*#__PURE__*/React.createElement(StyledCaption, _extends({}, props, {
+    ref: ref
+  }));
+});
+
+export { Caption };

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

@@ -0,0 +1,29 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import { InnerContext } from './Inner.context.js';
+import { TableDataCell } from './DataCell/DataCell.js';
+import { TableHeaderCell } from './HeaderCell/HeaderCell.js';
+
+const Cell = /*#__PURE__*/forwardRef(function Cell({ ...rest
+}, ref) {
+  return /*#__PURE__*/React.createElement(InnerContext.Consumer, null, ({
+    variant,
+    sticky
+  }) => {
+    switch (variant) {
+      case 'head':
+        return /*#__PURE__*/React.createElement(TableHeaderCell, _extends({
+          ref: ref,
+          sticky: sticky
+        }, rest));
+
+      default:
+      case 'body':
+        return /*#__PURE__*/React.createElement(TableDataCell, _extends({
+          ref: ref
+        }, rest));
+    }
+  });
+});
+
+export { Cell };

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

@@ -0,0 +1,47 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { applyVariant, tableCell } from './DataCell.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.td.withConfig({
+  displayName: "DataCell__StyledTableCell",
+  componentId: "sc-15tuitc-0"
+})(({
+  theme,
+  color
+}) => {
+  var _theme$validation$err;
+
+  const {
+    height,
+    typography,
+    spacings,
+    border
+  } = theme;
+  const backgroundColor = color === 'error' ? (_theme$validation$err = theme.validation.error) === null || _theme$validation$err === void 0 ? void 0 : _theme$validation$err.background : '';
+  const base = css(["min-height:", ";height:", ";background:", ";", " ", " ", ""], height, height, backgroundColor, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
+  return base;
+});
+const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
+  children,
+  variant = 'text',
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, applyVariant(variant, tableCell));
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: token
+  }, /*#__PURE__*/React.createElement(StyledTableCell, _extends({}, rest, {
+    ref: ref
+  }), children));
+});
+
+export { TableDataCell };

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,27 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { token } from './Head.tokens.js';
+import { InnerContext } from '../Inner.context.js';
+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__*/React.createElement(InnerContext.Provider, {
+    value: {
+      variant: 'head',
+      sticky
+    }
+  }, /*#__PURE__*/React.createElement(StyledTableHead, _extends({}, props, {
+    ref: ref
+  }), children));
+});
+
+export { Head };