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

package/dist/esm/components/Button/tokens/icon.js

@@ -0,0 +1,123 @@
+import { tokens } from '@equinor/eds-tokens';
+import * as R from 'ramda';
+import { button } from './button.js';
+
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAltColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      secondary__highlight: {
+        rgba: secondaryHoverAltColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      },
+      danger__highlight: {
+        rgba: dangerHoverAltColor
+      }
+    }
+  },
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape
+} = tokens;
+const primary = R.mergeDeepRight(button, {
+  height: shape.icon_button.minHeight,
+  width: shape.icon_button.minWidth,
+  typography: {
+    color: primaryColor
+  },
+  border: {
+    width: '0px',
+    radius: '50%'
+  },
+  background: 'transparent',
+  spacings: {
+    left: '0',
+    right: '0'
+  },
+  clickbound: {
+    width: clicboundHeight,
+    offset: {
+      top: '0',
+      left: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px`
+    }
+  },
+  states: {
+    hover: {
+      background: primaryHoverAltColor,
+      border: {
+        width: '0px',
+        radius: '50%'
+      }
+    },
+    disabled: {
+      background: 'transparent',
+      border: {
+        color: 'transparent'
+      }
+    },
+    focus: {
+      outline: {
+        offset: '0px'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: shape._modes.compact.icon_button.minHeight,
+      width: shape._modes.compact.icon_button.minWidth,
+      clickbound: {
+        width: compactClickboundHeight,
+        offset: {
+          top: '0',
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
+        }
+      }
+    }
+  }
+});
+const secondary = R.mergeDeepRight(primary, {
+  typography: {
+    color: secondaryColor
+  },
+  states: {
+    hover: {
+      background: secondaryHoverAltColor,
+      typography: {
+        color: secondaryHoverColor
+      }
+    }
+  }
+});
+const danger = R.mergeDeepRight(primary, {
+  typography: {
+    color: dangerColor
+  },
+  states: {
+    hover: {
+      background: dangerHoverAltColor,
+      typography: {
+        color: dangerHoverColor
+      }
+    }
+  }
+});
+
+export { danger, primary, secondary };

package/dist/esm/components/Button/tokens/index.js

@@ -0,0 +1,27 @@
+import { primary, secondary, danger } from './contained.js';
+import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './outlined.js';
+import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './ghost.js';
+import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
+
+const token = {
+  primary: {
+    contained: primary,
+    outlined: primary$1,
+    ghost: primary$2,
+    ghost_icon: primary$3
+  },
+  secondary: {
+    contained: secondary,
+    outlined: secondary$1,
+    ghost: secondary$2,
+    ghost_icon: secondary$3
+  },
+  danger: {
+    contained: danger,
+    outlined: danger$1,
+    ghost: danger$2,
+    ghost_icon: danger$3
+  }
+};
+
+export { token };

package/dist/esm/components/Button/tokens/outlined.js

@@ -0,0 +1,111 @@
+import { tokens } from '@equinor/eds-tokens';
+import * as R from 'ramda';
+import { button } from './button.js';
+
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover: {
+        rgba: primaryHoverColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAltColor
+      },
+      secondary__resting: {
+        rgba: secondaryColor
+      },
+      secondary__link_hover: {
+        rgba: secondaryHoverColor
+      },
+      secondary__highlight: {
+        rgba: secondaryHoverAltColor
+      },
+      danger__resting: {
+        rgba: dangerColor
+      },
+      danger__hover: {
+        rgba: dangerHoverColor
+      },
+      danger__highlight: {
+        rgba: dangerHoverAltColor
+      }
+    }
+  },
+  shape: {
+    button: {
+      borderRadius: buttonBorderRadius
+    }
+  }
+} = tokens;
+const primary = R.mergeDeepRight(button, {
+  typography: {
+    color: primaryColor
+  },
+  border: {
+    type: 'border',
+    style: 'solid',
+    width: '1px',
+    color: primaryColor,
+    radius: buttonBorderRadius
+  },
+  states: {
+    hover: {
+      typography: {
+        color: primaryHoverColor
+      },
+      background: primaryHoverAltColor,
+      border: {
+        style: 'solid',
+        type: 'border',
+        width: '1px',
+        color: primaryHoverColor
+      }
+    },
+    disabled: {
+      background: 'transparent'
+    }
+  }
+});
+const secondary = R.mergeDeepRight(primary, {
+  typography: {
+    color: secondaryColor
+  },
+  border: {
+    color: secondaryColor
+  },
+  states: {
+    hover: {
+      background: secondaryHoverAltColor,
+      typography: {
+        color: secondaryHoverColor
+      },
+      border: {
+        color: secondaryHoverColor
+      }
+    }
+  }
+});
+const danger = R.mergeDeepRight(primary, {
+  typography: {
+    color: dangerColor
+  },
+  border: {
+    color: dangerColor
+  },
+  states: {
+    hover: {
+      background: dangerHoverAltColor,
+      typography: {
+        color: dangerHoverColor
+      },
+      border: {
+        color: dangerHoverColor
+      }
+    }
+  }
+});
+
+export { danger, primary, secondary };

package/dist/esm/components/Card/Card.js

@@ -0,0 +1,40 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import * as Card_tokens from './Card.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { spacingsTemplate } from '../../utils/templates/index.js';
+
+const {
+  primary
+} = Card_tokens;
+const StyledCard = styled.div.withConfig({
+  displayName: "Card__StyledCard",
+  componentId: "sc-bjucjn-0"
+})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";", ""], ({
+  background
+}) => background, ({
+  cursor
+}) => cursor, bordersTemplate(primary.border), spacingsTemplate(primary.spacings));
+const Card = /*#__PURE__*/forwardRef(function Card({
+  children,
+  variant = 'default',
+  onClick,
+  ...rest
+}, ref) {
+  const cursor = onClick ? 'pointer' : 'default';
+  const cardVariant = variant === 'default' ? 'primary' : variant;
+  const token = Card_tokens[cardVariant];
+  const props = {
+    ref,
+    background: token.background,
+    cursor,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledCard, { ...props,
+    onClick: onClick,
+    children: children
+  });
+});
+
+export { Card };

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

@@ -0,0 +1,54 @@
+import { tokens as tokens$1 } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      },
+      background__info: {
+        rgba: backgroundInfo
+      },
+      background__warning: {
+        rgba: backgroundWarning
+      },
+      background__danger: {
+        rgba: backgroundDanger
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens$1;
+const primary = {
+  background: background,
+  border: {
+    type: 'border',
+    radius: borderRadius
+  },
+  spacings: {
+    left: spacingMedium,
+    bottom: spacingMedium,
+    right: spacingMedium,
+    top: spacingMedium
+  }
+};
+const info = {
+  background: backgroundInfo
+};
+const danger = {
+  background: backgroundDanger
+};
+const warning = {
+  background: backgroundWarning
+};
+
+export { danger, info, primary, warning };

package/dist/esm/components/Card/CardActions.js

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+
+const StyledCardActions = styled.div.withConfig({
+  displayName: "CardActions__StyledCardActions",
+  componentId: "sc-1d5vskp-0"
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";"], ({
+  justifyContent
+}) => justifyContent);
+const CardActions = /*#__PURE__*/forwardRef(function CardActions({
+  children,
+  alignRight = false,
+  meta = '',
+  ...rest
+}, ref) {
+  const justifyContent = alignRight ? 'flex-end' : 'flex-start';
+  const props = {
+    ref,
+    justifyContent,
+    ...rest
+  };
+  return /*#__PURE__*/jsxs(StyledCardActions, { ...props,
+    children: [children, meta !== '' && /*#__PURE__*/jsx(Typography, {
+      variant: "caption",
+      children: meta
+    })]
+  });
+});
+
+export { CardActions };

package/dist/esm/components/Card/CardHeader.js

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { primary } from './Card.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  spacings
+} = primary;
+const StyledCardHeader = styled.div.withConfig({
+  displayName: "CardHeader__StyledCardHeader",
+  componentId: "sc-15k8edh-0"
+})(["display:flex;justify-content:space-between;align-items:center;>:not(:first-child){margin-left:", ";}"], spacings.left);
+const CardHeader = /*#__PURE__*/forwardRef(function CardHeader({
+  children,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(StyledCardHeader, { ...props,
+    children: children
+  });
+});
+
+export { CardHeader };

package/dist/esm/components/Card/CardHeaderTitle.js

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledCardHeaderTitle = styled.div.withConfig({
+  displayName: "CardHeaderTitle__StyledCardHeaderTitle",
+  componentId: "sc-11m80r3-0"
+})(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
+const CardHeaderTitle = /*#__PURE__*/forwardRef(function CardHeaderTitle({
+  children,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(StyledCardHeaderTitle, { ...props,
+    children: children
+  });
+});
+
+export { CardHeaderTitle };

package/dist/esm/components/Card/CardMedia.js

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { primary } from './Card.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  spacings,
+  border
+} = primary;
+const StyledCardMedia = styled.div.withConfig({
+  displayName: "CardMedia__StyledCardMedia",
+  componentId: "sc-kr8q9c-0"
+})(["display:flex;width:100%;&:last-child{margin-bottom:8px;}", ""], ({
+  fullWidth
+}) => fullWidth ? css(["> *{width:calc(100% + ", " + ", ");margin-left:-", ";margin-right:-", ";}&:first-child{margin-top:-", ";img{border-top-right-radius:", ";border-top-left-radius:", ";}}"], spacings.left, spacings.right, spacings.left, spacings.right, spacings.top, border.type === 'border' && border.radius, border.type === 'border' && border.radius) : css(["> *{width:100%;}"]));
+const CardMedia = /*#__PURE__*/forwardRef(function CardMedia({
+  children,
+  fullWidth = false,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref,
+    fullWidth
+  };
+  return /*#__PURE__*/jsx(StyledCardMedia, { ...props,
+    children: children
+  });
+});
+
+export { CardMedia };

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

@@ -0,0 +1,17 @@
+import { Card as Card$1 } from './Card.js';
+import { CardActions } from './CardActions.js';
+import { CardMedia } from './CardMedia.js';
+import { CardHeader } from './CardHeader.js';
+import { CardHeaderTitle } from './CardHeaderTitle.js';
+
+const Card = Card$1;
+Card.Actions = CardActions;
+Card.Header = CardHeader;
+Card.Media = CardMedia;
+Card.HeaderTitle = CardHeaderTitle;
+Card.Actions.displayName = 'Card.Actions';
+Card.Header.displayName = 'Card.Header';
+Card.Media.displayName = 'Card.Media';
+Card.HeaderTitle.displayName = 'Card.HeaderTitle';
+
+export { Card };

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

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { checkbox } from './Checkbox.tokens.js';
+import { CheckboxInput } from './Input.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { typographyTemplate } from '../../utils/templates/index.js';
+
+/* eslint camelcase: "off" */
+const StyledLabel = styled.label.withConfig({
+  displayName: "Checkbox__StyledLabel",
+  componentId: "sc-yg6l8h-0"
+})(["display:inline-flex;align-items:center;cursor:", ";"], ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer');
+const LabelText = styled.span.withConfig({
+  displayName: "Checkbox__LabelText",
+  componentId: "sc-yg6l8h-1"
+})(["", ";"], typographyTemplate(checkbox.typography));
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
+  label,
+  disabled = false,
+  indeterminate,
+  className,
+  ...rest
+}, ref) {
+  return label ? /*#__PURE__*/jsxs(StyledLabel, {
+    disabled: disabled,
+    className: className,
+    children: [/*#__PURE__*/jsx(CheckboxInput, { ...rest,
+      disabled: disabled,
+      ref: ref,
+      indeterminate: indeterminate
+    }), /*#__PURE__*/jsx(LabelText, {
+      children: label
+    })]
+  }) : /*#__PURE__*/jsx(CheckboxInput, { ...rest,
+    disabled: disabled,
+    ref: ref,
+    indeterminate: indeterminate
+  });
+});
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

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

@@ -0,0 +1,91 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    interactive: {
+      primary__resting: {
+        rgba: primaryColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      disabled__text: {
+        rgba: disabledText
+      }
+    }
+  },
+  typography: {
+    navigation: {
+      menu_title: labelTypography
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium_small,
+      x_small
+    }
+  },
+  clickbounds: {
+    default__base: clicboundSize,
+    compact__standard: compactClickboundSize
+  }
+} = tokens;
+const checkbox = {
+  background: primaryColor,
+  typography: labelTypography,
+  spacings: {
+    bottom: medium_small,
+    top: medium_small,
+    left: medium_small,
+    right: medium_small
+  },
+  clickbound: {
+    height: clicboundSize
+  },
+  states: {
+    hover: {
+      background: primaryHoverAlt
+    },
+    disabled: {
+      background: disabledText
+    },
+    focus: {
+      outline: {
+        type: 'outline',
+        style: 'dashed',
+        width: '1px',
+        color: focusOutlineColor,
+        offset: '11px'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      spacings: {
+        bottom: x_small,
+        top: x_small,
+        left: x_small,
+        right: x_small
+      },
+      clickbound: {
+        height: compactClickboundSize
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            style: 'dashed',
+            width: '1px',
+            color: focusOutlineColor,
+            offset: '3px'
+          }
+        }
+      }
+    }
+  }
+};
+
+export { checkbox };