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

package/dist/esm/components/Snackbar/SnackbarAction.js

@@ -0,0 +1,22 @@
+import { forwardRef, Children } from 'react';
+import styled from 'styled-components';
+import { snackbar } from './Snackbar.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledSnackbarAction = styled.div.withConfig({
+  displayName: "SnackbarAction__StyledSnackbarAction",
+  componentId: "sc-1v5mjvd-0"
+})(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], snackbar.entities.actions.spacings.left, snackbar.entities.actions.spacings.top, snackbar.entities.actions.spacings.bottom);
+const SnackbarAction = /*#__PURE__*/forwardRef(function SnackbarAction({
+  children,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(StyledSnackbarAction, { ...props,
+    children: Children.only(children)
+  });
+});
+
+export { SnackbarAction };

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

@@ -0,0 +1,7 @@
+import { SnackbarAction } from './SnackbarAction.js';
+import { Snackbar as Snackbar$1 } from './Snackbar.js';
+
+const Snackbar = Snackbar$1;
+Snackbar.Action = SnackbarAction;
+
+export { Snackbar };

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

@@ -0,0 +1,67 @@
+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 { jsx, jsxs } from 'react/jsx-runtime';
+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__*/jsx(ThemeProvider, {
+    theme: token,
+    children: label ? /*#__PURE__*/jsxs(StyledLabel, {
+      isDisabled: disabled,
+      className: className,
+      children: [size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
+        disabled: disabled,
+        ...rest,
+        ref: ref
+      }) : /*#__PURE__*/jsx(SwitchDefault, {
+        disabled: disabled,
+        ...rest,
+        ref: ref
+      }), label && /*#__PURE__*/jsx(Label, {
+        children: label
+      })]
+    }) : size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
+      disabled: disabled,
+      ...rest,
+      ref: ref
+    }) : /*#__PURE__*/jsx(SwitchDefault, {
+      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,61 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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__*/jsxs(GridWrapper, {
+    children: [/*#__PURE__*/jsx(Input, { ...rest,
+      ref: ref,
+      disabled: disabled
+    }), /*#__PURE__*/jsxs(BaseInputWrapper, {
+      children: [/*#__PURE__*/jsx(Track, {
+        isDisabled: disabled
+      }), /*#__PURE__*/jsx(Handle, {
+        isDisabled: disabled
+      })]
+    })]
+  });
+});
+SwitchDefault.displayName = 'SwitchDefault';
+
+export { SwitchDefault };

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

@@ -0,0 +1,59 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { outlineTemplate } from '../../utils/templates/focus.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{", "}&: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:", ";}}"], outlineTemplate(states.focus.outline), 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__*/jsxs(GridWrapper, {
+    children: [/*#__PURE__*/jsx(Input, { ...rest,
+      ref: ref,
+      disabled: disabled
+    }), /*#__PURE__*/jsxs(BaseInputWrapper, {
+      children: [/*#__PURE__*/jsx(Track, {
+        isDisabled: disabled
+      }), /*#__PURE__*/jsx(Handle, {})]
+    })]
+  });
+});
+SwitchSmall.displayName = 'SwitchSmall';
+
+export { SwitchSmall };

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

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

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

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+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__*/jsx(StyledCaption, { ...props,
+    ref: ref
+  });
+});
+
+export { Caption };

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

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

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

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { applyVariant, tableCell } from './DataCell.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.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__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx(StyledTableCell, { ...rest,
+      ref: ref,
+      children: children
+    })
+  });
+});
+
+export { TableDataCell };