@kvdbil/components 3.3.5-2 → 4.0.0

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@kvdbil/components",
-  "version": "3.3.5-2",
-  "sideEffects": false,
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
-  "types": "types/index.d.ts",
+  "version": "4.0.0",
+  "main": "kvdbil-components.js",
+  "types": "index.d.ts",
   "scripts": {
     "start": "yarn storybook",
     "test": "CI=true react-scripts test",
@@ -12,14 +10,13 @@
     "test:watch": "react-scripts test",
     "generateIcons": "npx @svgr/cli --icon ./.prettierrc --template ./src/icons/template.js -d ./src/icons/components ./src/icons/svgs --typescript",
     "build:rollup": "rollup -c",
-    "build": "yarn run generateIcons && yarn lint && yarn test && rollup -c && yarn create-declaration",
+    "build": "yarn run generateIcons && yarn lint && yarn test && rollup -c",
     "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx,.mdx src",
     "dev": "yarn storybook",
     "storybook": "start-storybook -s ./public -p 6006 watch-css",
     "build-storybook": "build-storybook -s ./public",
     "updateSnapshots": "yarn test -u",
-    "analyze": "rollup -c rollup.config.analyze.js",
-    "create-declaration": "yarn tsc --emitDeclarationOnly --noEmit false"
+    "analyze": "rollup -c rollup.config.analyze.js"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -52,9 +49,9 @@
     "@storybook/react": "^6.3.8",
     "@svgr/cli": "^5.5.0",
     "@team-griffin/install-self-peers": "^1.1.1",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^13.0.8",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "@testing-library/user-event": "^13.2.1",
     "@types/classnames": "^2.2.11",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.6.4",
@@ -68,7 +65,6 @@
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "babel-plugin-styled-components": "^1.10.0",
-    "esbuild": "^0.12.29",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-import-resolver-typescript": "^2.4.0",
@@ -88,15 +84,15 @@
     "react-is": "^16.13.1",
     "react-scripts": "^4.0.3",
     "react-select": "^3.0.4",
+    "react-select-event": "^5.3.0",
     "react-transition-group": "^4.0.0",
     "rollup": "^2.56.3",
-    "rollup-plugin-esbuild": "^4.5.0",
     "rollup-plugin-import-css": "^3.0.0",
-    "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.5.2",
     "standard-version": "^9.3.1",
     "storybook": "^6.3.8",
+    "storybook-addon-designs": "^6.1.0",
     "styled-components": "^5.2.0",
     "tslib": "^2.0.1",
     "typescript": "4.3.5"

package/cjs/ColorCard.js

@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var utils_utils = require('./utils/utils.js');
-var theme = require('./theme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const SubList = styled__default['default'].ul`
-  padding-left: 2rem;
-`;
-const ColorItem = styled__default['default'].li`
-  list-style: none;
-  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
-  border: 1px solid ${theme['default'].colors.gray.light2};
-  border-radius: 4px;
-  font-family: 'Ralway', sans-serif;
-  margin-top: 0.75rem;
-`;
-const Header = styled__default['default'].span`
-  text-transform: capitalize;
-  padding: 0.5em;
-  display: block;
-  border-bottom: 1px solid ${theme['default'].colors.gray.light2};
-`;
-const Color = styled__default['default'].li`
-  display: block;
-  background: ${({ hex }) => hex};
-  color: ${({ hex }) => utils_utils.getLuminosity(hex) < 40 ? "#fff" : "#000"};
-  padding: 1em;
-`;
-const SwatchArea = styled__default['default'].ul`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-`;
-const getColor = (variants) => Object.entries(variants).map(([name, hex]) => typeof hex === "string" ? /* @__PURE__ */ React.createElement(Color, {
-  hex,
-  key: hex
-}, name, " (", hex, ")") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Header, null, name), /* @__PURE__ */ React.createElement(SubList, null, getColor(hex))));
-const ColorCard = ({ colorName, variants }) => /* @__PURE__ */ React.createElement(ColorItem, null, /* @__PURE__ */ React.createElement(Header, null, colorName), /* @__PURE__ */ React.createElement(SwatchArea, null, getColor(variants)));
-
-exports['default'] = ColorCard;

package/cjs/ElevationCard.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Card = styled__default['default'].div`
-  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
-  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
-  font-size: 1.25rem;
-  box-shadow: ${({ elevation }) => elevation};
-  width: 14rem;
-  height: 10rem;
-  margin: 1rem;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const ElevationCard = ({
-  children,
-  value,
-  as = "div"
-}) => {
-  return /* @__PURE__ */ React.createElement(Card, {
-    as,
-    elevation: value
-  }, children);
-};
-
-exports.ElevationCard = ElevationCard;

package/cjs/Interfaces.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/cjs/Types.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/cjs/components/Accordion/index.js

@@ -1,124 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React$1 = require('react');
-var styled = require('styled-components');
-var reactCollapse = require('react-collapse');
-var shared_mediaQueries = require('../../shared/media-queries.js');
-var icons_components_ArrowDownIcon = require('../../icons/components/ArrowDownIcon.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Container = styled__default['default'].div`
-  display: flex;
-  flex-direction: column;
-  .ReactCollapse--collapse {
-    transition: height 300ms;
-  }
-`;
-const List = styled__default['default'].ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-const Title = styled__default['default'].div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  cursor: pointer;
-  margin: 0.5rem 0;
-`;
-const Arrow = styled__default['default'].div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.75rem;
-  color: ${({ theme }) => theme.colors.text.dark};
-  transition: 200ms ease-in-out;
-  transform: ${({ isOpen }) => `rotate(${isOpen ? "180deg" : "0deg"})`};
-`;
-const Item = styled__default['default'].li`
-  border-top: ${({ theme }) => `1px solid ${theme.colors.gray.light2}`};
-  padding: ${({ isOpen }) => isOpen ? "0.5rem 0 1rem 0" : "0.5rem 0"};
-
-  &:last-child {
-    border-bottom: ${({ theme }) => `1px solid ${theme.colors.gray.light2}`};
-  }
-`;
-const Text = styled__default['default'].span`
-  color: ${({ theme }) => theme.colors.text.dark};
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-  font-size: 0.9375rem;
-  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
-`;
-const Content = styled__default['default'].div`
-  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
-  color: ${({ theme }) => theme.colors.text.dark};
-  font-size: 0.9375rem;
-  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
-  line-height: 1.3;
-  transition: 200ms ease-in-out;
-  ${shared_mediaQueries.mq("tablet")} {
-    padding: 0;
-  }
-  & > * {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-`;
-const Accordion = ({ items, ...props }) => {
-  const [isOpened, setIsOpened] = React$1.useState({});
-  const toggleIsOpened = (index) => {
-    setIsOpened((prevState) => ({ ...prevState, [index]: !prevState[index] }));
-  };
-  const onClick = (index) => () => {
-    toggleIsOpened(index);
-  };
-  const onKeyPress = (index) => (e) => {
-    if (e.key === "Enter") {
-      toggleIsOpened(index);
-    }
-  };
-  return /* @__PURE__ */ React.createElement(Container, {
-    ...props
-  }, /* @__PURE__ */ React.createElement(List, {
-    className: "accordionList"
-  }, items.map((item, index) => {
-    const isOpen = Boolean(isOpened[index]);
-    return /* @__PURE__ */ React.createElement(Item, {
-      key: item.title,
-      isOpen,
-      className: "accordionItem"
-    }, /* @__PURE__ */ React.createElement(Title, {
-      onClick: onClick(index),
-      onKeyPress: onKeyPress(index),
-      className: "accordionItemTitle",
-      role: "button",
-      tabIndex: 0,
-      "aria-expanded": isOpen,
-      id: `panel${index}-header`,
-      "aria-controls": `panel${index}-content`
-    }, /* @__PURE__ */ React.createElement(Text, {
-      as: "span"
-    }, item.title), /* @__PURE__ */ React.createElement(Arrow, {
-      isOpen
-    }, /* @__PURE__ */ React.createElement(icons_components_ArrowDownIcon['default'], null))), /* @__PURE__ */ React.createElement(reactCollapse.UnmountClosed, {
-      isOpened: isOpen,
-      key: index
-    }, /* @__PURE__ */ React.createElement(Content, {
-      "aria-labelledby": `panel${index}-header`,
-      id: `panel${index}-content`,
-      role: "region",
-      className: "wysiwyg",
-      dangerouslySetInnerHTML: {
-        __html: item.text
-      }
-    })));
-  })));
-};
-
-exports.Accordion = Accordion;
-exports['default'] = Accordion;

package/cjs/components/Badge/index.js

@@ -1,78 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const BadgeContainer = styled__default['default'].div`
-  border-radius: 0.75rem;
-  background: ${theme['default'].colors.secondary.main};
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  box-sizing: border-box;
-  cursor: default;
-`;
-const SmallBadgeContainer = styled__default['default'](BadgeContainer)`
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  min-width: 1rem;
-  position: relative;
-`;
-const MiddleDot = styled__default['default'].div`
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  opacity: 0.1;
-  transform: scale(0.5);
-  background: ${theme['default'].colors.text.dark};
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-const Label = styled__default['default'].span`
-  font-size: 0.75rem;
-  line-height: 0.75rem;
-  color: white;
-  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
-`;
-const numberToLabel = (notificationAmount) => {
-  if (notificationAmount >= 100) {
-    return "99+";
-  }
-  return `${notificationAmount}`;
-};
-const Badge = ({
-  notificationAmount = 0,
-  withNumber = true,
-  ...rest
-}) => {
-  if ((notificationAmount <= 0 || !notificationAmount) && withNumber) {
-    return null;
-  }
-  if (!withNumber) {
-    return /* @__PURE__ */ React.createElement(SmallBadgeContainer, {
-      ...rest
-    }, /* @__PURE__ */ React.createElement(MiddleDot, {
-      "data-test": "middle-dot"
-    }));
-  }
-  const label = numberToLabel(notificationAmount);
-  return /* @__PURE__ */ React.createElement(BadgeContainer, {
-    ...rest
-  }, /* @__PURE__ */ React.createElement(Label, null, label));
-};
-
-exports.Badge = Badge;
-exports['default'] = Badge;

package/cjs/components/Button/index.js

@@ -1,170 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-var components_Spinner_index = require('../Spinner/index.js');
-var typography_ButtonText_index = require('../../typography/ButtonText/index.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const getFontStyles = (size) => {
-  switch (size) {
-    case "smaller":
-      return typography_ButtonText_index.ButtonSmallTextStyle;
-    case "small":
-      return typography_ButtonText_index.ButtonRegularTextStyle;
-    case "regular":
-      return typography_ButtonText_index.ButtonRegularTextStyle;
-    case "large":
-      return typography_ButtonText_index.ButtonLargeTextStyle;
-    default:
-      return typography_ButtonText_index.ButtonRegularTextStyle;
-  }
-};
-const smallerSizeStyles = (isLoading) => `
-  min-width: 76px;
-  padding: ${isLoading ? "7px 10px 5.5px" : "10px 10px 8px"};
-`;
-const smallSizeStyles = (isLoading) => `
-  min-width: 76px;
-  padding: ${isLoading ? "8px 10px 6px" : "11px 10px 9px"};
-`;
-const regularSizeStyles = (isLoading) => `
-  min-width: 250px;
-  padding: ${isLoading ? "7px 22px 5px" : "15px 22px 13px"};
-`;
-const largeSizeStyles = (isLoading) => `
-  min-width: 250px;
-  padding: ${isLoading ? "9px 22px 6px" : "21px 22px 19px"};
-`;
-const solidColorStyles = (theme2) => (color) => `
-  color: white;
-  border-color: ${theme2.colors[color].main};
-  background-color: ${theme2.colors[color].main};
-
-  :hover {
-    border-color: ${theme2.colors[color].light};
-    background-color: ${theme2.colors[color].light};
-  }
-
-  :active {
-    border-color: ${theme2.colors[color].dark};
-    background-color: ${theme2.colors[color].dark}
-  }
-
-  :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme2.colors[color].dark};
-  }
-`;
-const outlineColorStyles = (theme2) => (color) => `
-  color: ${theme2.colors[color].main};
-  border-color: ${theme2.colors[color].main};
-  background-color: transparent;
-
-  :hover {
-      color: white;
-      border-color: ${theme2.colors[color].light};
-      background-color: ${theme2.colors[color].light};
-  }
-
-  :active {
-    color: white;
-    border-color: ${theme2.colors[color].dark};
-    background-color: ${theme2.colors[color].dark};
-  }
-
-  :focus {
-    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme2.colors[color].dark};
-  }
-`;
-const flatColorStyles = (theme2) => (color) => `
-  color: ${theme2.colors[color].main};
-  border-color: transparent;
-  background-color: transparent;
-
-  :hover {
-    color: ${theme2.colors[color].dark};
-  }
-
-  :active {
-    color: ${theme2.colors[color].light};
-  }
-`;
-const disabledCommonColorStyles = (theme2) => `
-  background-color: ${theme2.colors.gray.light4};
-  border-color: ${theme2.colors.gray.light4};
-  color: ${theme2.colors.gray.light1};
-  cursor: not-allowed;
-`;
-const disabledFlatColorStyles = (theme2) => `
-  border-color: transparent;
-  background-color: transparent;
-  color: ${theme2.colors.gray.light1};
-  cursor: not-allowed;
-`;
-const Root = styled__default['default'].button`
-  outline: none;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  white-space: nowrap;
-  border: 2px solid transparent;
-  border-radius: 3px;
-  width: ${({ fullWidth }) => fullWidth && "100%"};
-
-  ${typography_ButtonText_index.BasicButtonTextStyle}
-  ${({ size }) => getFontStyles(size)}
-  ${({ size, isLoading }) => styled.css`
-    ${size === "smaller" && smallerSizeStyles(isLoading)}
-    ${size === "small" && smallSizeStyles(isLoading)}
-    ${size === "regular" && regularSizeStyles(isLoading)}
-    ${size === "large" && largeSizeStyles(isLoading)}
-  `}
-  background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({ variant, color, disabled, theme: theme2 }) => styled.css`
-    ${!disabled && variant === "solid" && solidColorStyles(theme2)(color)}
-    ${!disabled && variant === "outline" && outlineColorStyles(theme2)(color)}
-    ${!disabled && variant === "flat" && flatColorStyles(theme2)(color)}
-    ${disabled && variant !== "flat" && disabledCommonColorStyles(theme2)}
-    ${disabled && variant === "flat" && disabledFlatColorStyles(theme2)}
-  `}
-`;
-const LoadingSpinner = styled__default['default'](components_Spinner_index['default'])``;
-const spinnerSizes = {
-  smaller: 1,
-  small: 1,
-  regular: 1.5,
-  large: 1.75
-};
-const Button = ({
-  size = "small",
-  color = "primary",
-  variant = "solid",
-  fullWidth = false,
-  isDisabled = false,
-  isLoading = false,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ React.createElement(Root, {
-    ...props,
-    color,
-    disabled: isDisabled || isLoading,
-    fullWidth,
-    theme: theme['default'],
-    variant,
-    size,
-    isLoading
-  }, isLoading ? /* @__PURE__ */ React.createElement(LoadingSpinner, {
-    color: "neutral",
-    size: spinnerSizes[size]
-  }) : children);
-};
-
-exports.Button = Button;
-exports['default'] = Button;

package/cjs/components/Card/index.js

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var theme = require('../../theme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const CardWrapper = styled__default['default'].div`
-  background: ${theme['default'].colors.background.light};
-  ${({ boxShadow }) => boxShadow && `box-shadow: ${boxShadow};`}
-  ${({ boxShadow }) => !boxShadow && `box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
-    0 1px 5px rgba(0, 0, 0, 15%);`}
-  border-radius: 0 0 3px 3px;
-  ${({ topBorder }) => topBorder && `border-top: 4px solid ${topBorder};`}
-`;
-const Card = ({ ...props }) => {
-  return /* @__PURE__ */ React.createElement(CardWrapper, {
-    topBorder: props.topBorder,
-    boxShadow: props.boxShadow
-  }, props.children);
-};
-
-exports.Card = Card;
-exports['default'] = Card;