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

package/dist/esm/components/Checkbox/Input.js

@@ -0,0 +1,115 @@
+import { forwardRef } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
+import { checkbox } from './Checkbox.tokens.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { useToken } from '../../hooks/useToken.js';
+
+/* eslint camelcase: "off" */
+const StyledPath = styled.path.attrs(({
+  icon
+}) => ({
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: icon.svgPathData
+})).withConfig({
+  displayName: "Input__StyledPath",
+  componentId: "sc-rqj7qf-0"
+})([""]);
+const Input = styled.input.attrs(({
+  type = 'checkbox'
+}) => ({
+  type
+})).withConfig({
+  displayName: "Input",
+  componentId: "sc-rqj7qf-1"
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
+  theme,
+  iconSize
+}) => parseFloat(theme.clickbound.height) / iconSize, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  theme
+}) => outlineTemplate(theme.states.focus.outline));
+const Svg = styled.svg.attrs(({
+  height,
+  width,
+  fill
+}) => ({
+  name: null,
+  xmlns: 'http://www.w3.org/2000/svg',
+  height,
+  width,
+  fill
+})).withConfig({
+  displayName: "Input__Svg",
+  componentId: "sc-rqj7qf-2"
+})(["grid-area:input;pointer-events:none;"]);
+const InputWrapper = styled.span.withConfig({
+  displayName: "Input__InputWrapper",
+  componentId: "sc-rqj7qf-3"
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], ({
+  theme
+}) => spacingsTemplate(theme.spacings), ({
+  disabled
+}) => disabled ? 'transparent' : checkbox.states.hover.background);
+const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput({
+  disabled = false,
+  indeterminate,
+  ...rest
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
+  }, checkbox);
+  const iconSize = 24;
+  const fill = disabled ? checkbox.states.disabled.background : checkbox.background;
+  const inputWrapperProps = {
+    disabled
+  };
+  const inputProps = {
+    ref,
+    disabled,
+    ['data-indeterminate']: indeterminate,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsxs(InputWrapper, { ...inputWrapperProps,
+      children: [/*#__PURE__*/jsx(Input, {
+        iconSize: iconSize,
+        ...inputProps
+      }), indeterminate ? /*#__PURE__*/jsx(Svg, {
+        width: iconSize,
+        height: iconSize,
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        fill: fill,
+        "aria-hidden": true,
+        children: /*#__PURE__*/jsx(StyledPath, {
+          icon: checkbox_indeterminate,
+          name: "indeterminate"
+        })
+      }) : /*#__PURE__*/jsxs(Svg, {
+        width: iconSize,
+        height: iconSize,
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
+        fill: fill,
+        "aria-hidden": true,
+        children: [/*#__PURE__*/jsx(StyledPath, {
+          icon: checkbox$1,
+          name: "checked"
+        }), /*#__PURE__*/jsx(StyledPath, {
+          icon: checkbox_outline,
+          name: "not-checked"
+        })]
+      })]
+    })
+  });
+});
+
+export { CheckboxInput };

package/dist/esm/components/Chip/Chip.js

@@ -0,0 +1,126 @@
+import { forwardRef, Children, cloneElement } from 'react';
+import styled, { css } from 'styled-components';
+import { Icon } from './Icon.js';
+import * as Chip_tokens from './Chip.tokens.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+
+const {
+  enabled,
+  error
+} = Chip_tokens;
+const {
+  background,
+  height,
+  typography,
+  spacings,
+  border,
+  states
+} = enabled;
+const StyledChips = styled.div.attrs(({
+  clickable,
+  deletable
+}) => ({
+  tabIndex: clickable || deletable ? 0 : null,
+  role: clickable ? 'button' : null
+})).withConfig({
+  displayName: "Chip__StyledChips",
+  componentId: "sc-wzsllq-0"
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), ({
+  clickable
+}) => clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]), ({
+  variant
+}) => {
+  switch (variant) {
+    case 'active':
+      return css(["background:", ";"], states.active.background);
+
+    case 'error':
+      return css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
+
+    default:
+      return '';
+  }
+}, ({
+  disabled
+}) => disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color), ({
+  deletable
+}) => deletable && css(["padding-right:4px;"]), ({
+  onlyChild
+}) => onlyChild ? css(["padding-left:8px;"]) : '');
+const Chip = /*#__PURE__*/forwardRef(function Chip({
+  children,
+  onDelete,
+  disabled = false,
+  onClick,
+  variant = 'default',
+  ...other
+}, ref) {
+  const handleDelete = disabled ? undefined : onDelete;
+  const handleClick = disabled ? undefined : onClick;
+  const deletable = handleDelete !== undefined;
+  const clickable = handleClick !== undefined;
+  const onlyChild = typeof children === 'string';
+  const chipProps = { ...other,
+    ref,
+    disabled,
+    deletable,
+    clickable,
+    onlyChild,
+    variant
+  };
+
+  const handleKeyPress = event => {
+    const {
+      key
+    } = event;
+
+    if (key === 'Enter') {
+      if (deletable) {
+        handleDelete(event);
+      } // Delete takes precedence, else click action is activated
+
+
+      if (clickable && !deletable) {
+        handleClick(event);
+      }
+    }
+  };
+
+  const resizedChildren = Children.map(children, child => {
+    // We force size on Icon & Avatar component
+    if (child.props) {
+      return /*#__PURE__*/cloneElement(child, {
+        size: 16,
+        disabled
+      });
+    }
+
+    return child;
+  });
+
+  const onDeleteClick = event => {
+    event.stopPropagation();
+
+    if (deletable) {
+      handleDelete(event);
+    }
+  };
+
+  return /*#__PURE__*/jsxs(StyledChips, { ...chipProps,
+    onClick: event => clickable && handleClick(event),
+    onKeyPress: handleKeyPress,
+    children: [resizedChildren, onDelete && /*#__PURE__*/jsx(Icon, {
+      name: "close",
+      title: "close",
+      disabled: disabled,
+      variant: variant,
+      onClick: onDeleteClick,
+      size: 16
+    })]
+  });
+}); // Chip.displayName = 'eds-chip'
+
+export { Chip };

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

@@ -0,0 +1,148 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+const {
+  spacings: {
+    comfortable: {
+      x_small,
+      small,
+      medium
+    }
+  },
+  typography: {
+    ui: {
+      chip__badge: chipTypography
+    }
+  },
+  colors: {
+    ui: {
+      background__default: {
+        rgba: backgroundColorDefault
+      },
+      background__light: {
+        rgba: backgroundColor
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__hover: {
+        rgba: primaryHover
+      },
+      disabled__text: {
+        rgba: disabledColor
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      primary__selected_highlight: {
+        rgba: activeColor
+      },
+      danger__resting: {
+        rgba: errorColor
+      },
+      danger__hover: {
+        rgba: errorColorHover
+      },
+      danger__highlight: {
+        rgba: errorBackgroundHover
+      }
+    }
+  },
+  shape: {
+    rounded: {
+      borderRadius
+    }
+  }
+} = tokens$1;
+const enabled = {
+  background: backgroundColor,
+  height: '22px',
+  border: {
+    radius: borderRadius,
+    color: 'transparent',
+    type: 'border',
+    width: '1px',
+    style: 'solid'
+  },
+  spacings: {
+    left: x_small,
+    right: small
+  },
+  typography: { ...chipTypography,
+    color: primaryColor
+  },
+  states: {
+    hover: {
+      typography: {
+        color: primaryHover
+      }
+    },
+    disabled: {
+      typography: {
+        color: disabledColor
+      }
+    },
+    focus: {
+      outline: {
+        width: '1px',
+        color: focusOutlineColor,
+        style: 'dashed',
+        type: 'outline',
+        offset: '2px'
+      }
+    },
+    active: {
+      background: activeColor
+    }
+  },
+  entities: {
+    icon: {
+      height: medium,
+      width: medium,
+      border: {
+        radius: borderRadius,
+        type: 'border',
+        width: 0
+      },
+      states: {
+        hover: {
+          background: primaryHoverAlt
+        }
+      }
+    }
+  }
+};
+const error = {
+  background: backgroundColorDefault,
+  border: {
+    type: 'border',
+    color: errorColor,
+    width: '1px',
+    style: 'solid',
+    radius: borderRadius
+  },
+  typography: {
+    color: errorColor
+  },
+  states: {
+    hover: {
+      typography: {
+        color: errorColorHover
+      }
+    }
+  },
+  entities: {
+    icon: {
+      typography: {
+        color: errorColor
+      },
+      background: errorBackgroundHover
+    }
+  }
+};
+
+export { enabled, error };

package/dist/esm/components/Chip/Icon.js

@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components';
+import { close } from '@equinor/eds-icons';
+import { Icon as Icon$1 } from '../Icon/index.js';
+import * as Chip_tokens from './Chip.tokens.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+Icon$1.add({
+  close
+});
+const {
+  enabled,
+  error
+} = Chip_tokens;
+const Icon = styled(Icon$1).withConfig({
+  displayName: "Icon",
+  componentId: "sc-50ffvg-0"
+})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), ({
+  variant
+}) => {
+  switch (variant) {
+    case 'error':
+      return css(["background:", ";svg{fill:", ";}"], error.entities.icon.background, error.entities.icon.typography.color);
+
+    default:
+      return css(["background:", ";svg{fill:", ";}"], enabled.entities.icon.states.hover.background, enabled.states.hover.typography.color);
+  }
+}, ({
+  disabled
+}) => disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]));
+
+export { Icon };

package/dist/esm/components/Dialog/Actions.js

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { dialog } from './Dialog.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+
+const StyledActions = styled.div.withConfig({
+  displayName: "Actions__StyledActions",
+  componentId: "sc-1qfwg1m-0"
+})(["min-height:", ";", " align-self:end;justify-self:start;", ""], dialog.entities.actions.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
+  children
+}) => !children && css(["min-height:initial;height:'8px';"]));
+const Actions = /*#__PURE__*/forwardRef(function Actions({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledActions, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+}); // Actions.displayName = 'EdsDialogActions'
+
+export { Actions };

package/dist/esm/components/Dialog/CustomContent.js

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { dialog } from './Dialog.tokens.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { Divider } from '../Divider/Divider.js';
+
+const StyledCustomContent = styled.div.withConfig({
+  displayName: "CustomContent__StyledCustomContent",
+  componentId: "sc-17fsw6x-0"
+})(["", " min-height:", ";margin-bottom:", ";align-self:stretch;justify-self:stretch;", " ", ""], typographyTemplate(dialog.entities.content.typography), dialog.entities.content.minHeight, dialog.entities.content.spacings.bottom, spacingsTemplate(dialog.entities.children.spacings), ({
+  scrollable
+}) => scrollable && css(["min-height:initial;height:", ";overflow-y:auto;"], dialog.entities.content.height));
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "CustomContent__StyledDivider",
+  componentId: "sc-17fsw6x-1"
+})(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
+const CustomContent = /*#__PURE__*/forwardRef(function CustomContent({
+  children,
+  scrollable = false,
+  ...rest
+}, ref) {
+  const props = {
+    scrollable,
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledCustomContent, {
+      id: "eds-dialog-customcontent",
+      ...props,
+      children: children
+    }), children && scrollable && /*#__PURE__*/jsx(StyledDivider, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
+});
+
+export { CustomContent };

package/dist/esm/components/Dialog/Dialog.js

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { dialog } from './Dialog.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const StyledDialog = styled(Paper).attrs(() => ({
+  tabIndex: 0,
+  role: 'dialog',
+  'aria-labelledby': 'eds-dialog-title',
+  'aria-describedby': 'eds-dialog-customcontent',
+  'aria-modal': true
+})).withConfig({
+  displayName: "Dialog__StyledDialog",
+  componentId: "sc-1mewo3f-0"
+})(["width:", ";background:", ";display:grid;", " ", " ", ""], dialog.width, dialog.background, typographyTemplate(dialog.typography), spacingsTemplate(dialog.spacings), bordersTemplate(dialog.border));
+const Dialog = /*#__PURE__*/forwardRef(function Dialog({
+  children,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialog, {
+    elevation: "above_scrim",
+    ...props,
+    ref: ref,
+    children: children
+  });
+}); // Dialog.displayName = 'EdsDialog'
+
+export { Dialog };

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

@@ -0,0 +1,73 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  spacings: {
+    comfortable: {
+      medium: spacingMedium
+    }
+  },
+  typography: {
+    ui: {
+      accordion_header
+    },
+    paragraph: {
+      body_long
+    }
+  },
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      }
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const dialog = {
+  width: '252px',
+  background,
+  typography: accordion_header,
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  spacings: {
+    top: spacingMedium
+  },
+  entities: {
+    children: {
+      spacings: {
+        top: '0px',
+        bottom: '0px',
+        left: spacingMedium,
+        right: spacingMedium
+      }
+    },
+    divider: {
+      spacings: {
+        bottom: spacingMedium
+      }
+    },
+    title: {
+      minHeight: '24px',
+      typography: accordion_header
+    },
+    content: {
+      minHeight: '80px',
+      height: '104px',
+      typography: body_long,
+      spacings: {
+        bottom: spacingMedium
+      }
+    },
+    actions: {
+      minHeight: '48px'
+    }
+  }
+};
+
+export { dialog };

package/dist/esm/components/Dialog/Title.js

@@ -0,0 +1,35 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { dialog } from './Dialog.tokens.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+import { typographyTemplate, spacingsTemplate } from '../../utils/templates/index.js';
+
+const StyledTitle = styled.div.withConfig({
+  displayName: "Title__StyledTitle",
+  componentId: "sc-i4qfl5-0"
+})(["", " min-height:", ";align-self:end;justify-self:start;", ";", ""], typographyTemplate(dialog.entities.title.typography), dialog.entities.title.minHeight, spacingsTemplate(dialog.entities.children.spacings), ({
+  children
+}) => !children && css(["min-height:initial;height:'8px';"]));
+const StyledDivider = styled(Divider).withConfig({
+  displayName: "Title__StyledDivider",
+  componentId: "sc-i4qfl5-1"
+})(["width:100%;margin-bottom:", ";"], dialog.entities.divider.spacings.bottom);
+const Title = /*#__PURE__*/forwardRef(function Title({
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledTitle, {
+      id: "eds-dialog-title",
+      ref: ref,
+      ...rest,
+      children: children
+    }), children && /*#__PURE__*/jsx(StyledDivider, {
+      color: "medium",
+      variant: "small"
+    })]
+  });
+});
+
+export { Title };

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

@@ -0,0 +1,14 @@
+import { Dialog as Dialog$1 } from './Dialog.js';
+import { Actions } from './Actions.js';
+import { Title } from './Title.js';
+import { CustomContent } from './CustomContent.js';
+
+const Dialog = Dialog$1;
+Dialog.Actions = Actions;
+Dialog.Title = Title;
+Dialog.CustomContent = CustomContent;
+Dialog.Actions.displayName = 'Dialog.Actions';
+Dialog.Title.displayName = 'Dialog.Title';
+Dialog.CustomContent.displayName = 'Dialog.CustomContent';
+
+export { Dialog };

package/dist/esm/components/Divider/Divider.js

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import * as Divider_tokens from './Divider.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  divider,
+  baseDivider
+} = Divider_tokens;
+const StyledDivider = styled.hr.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-1d8osde-0"
+})(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
+const Divider = /*#__PURE__*/forwardRef(function Divider({
+  color = 'medium',
+  variant = 'medium',
+  ...rest
+}, ref) {
+  const colorValue = color === 'medium' ? 'mediumColor' : color;
+  const props = {
+    backgroundColor: divider[colorValue].background,
+    marginTop: Divider_tokens[variant].spacings.top,
+    marginBottom: Divider_tokens[variant].spacings.bottom,
+    dividerHeight: baseDivider.height,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledDivider, { ...props,
+    ref: ref
+  });
+});
+
+export { Divider };