@kvdbil/components 3.3.3 → 3.3.5-2

package/cjs/ColorCard.js

@@ -0,0 +1,48 @@
+'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

@@ -0,0 +1,35 @@
+'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

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

package/cjs/Types.js

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

package/cjs/components/Accordion/index.js

@@ -0,0 +1,124 @@
+'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

@@ -0,0 +1,78 @@
+'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

@@ -0,0 +1,170 @@
+'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

@@ -0,0 +1,28 @@
+'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;

package/cjs/components/CheckBox/index.js

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var shared_helpers = require('../../shared/helpers.js');
+var theme = require('../../theme.js');
+var components_IconButton = require('../IconButton.js');
+var components_Icons_CheckIcon = require('../Icons/CheckIcon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const regularSize = styled.css`
+  width: 24px;
+  height: 24px;
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+const largeSize = styled.css`
+  width: 32px;
+  height: 32px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const sizes = {
+  regular: regularSize,
+  large: largeSize
+};
+const disabledStyle = styled.css`
+  cursor: default;
+  border: 2px solid ${theme['default'].colors.gray.light1};
+`;
+const checkedStyle = (color) => styled.css`
+  svg {
+    fill: #fefefe;
+    opacity: 1;
+  }
+
+  :hover {
+  }
+
+  background: ${theme['default'].colors[color].main};
+  border: 2px solid ${theme['default'].colors[color].main};
+`;
+const checkedDisabledStyle = styled.css`
+  background: ${theme['default'].colors.gray.light1};
+`;
+const HiddenCheckbox = styled__default['default'].input.attrs({ type: "checkbox" })`
+  display: none;
+`;
+const CheckboxWrapper = styled__default['default'].label`
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  border: 2px solid ${theme['default'].colors.gray.light1};
+  border-radius: 3px;
+
+  ${(props) => sizes[props.size]};
+
+  svg {
+    opacity: 0;
+  }
+
+  ${(props) => props.isChecked && checkedStyle(props.color)};
+  ${(props) => props.isDisabled && disabledStyle};
+
+  ${(props) => props.isChecked && props.isDisabled && checkedDisabledStyle};
+`;
+const CheckBox = ({
+  name = shared_helpers.generateNameHash("check-box"),
+  isDisabled = false,
+  size = "regular",
+  checked,
+  color = "secondary",
+  onClick,
+  ...rest
+}) => /* @__PURE__ */ React.createElement(components_IconButton['default'], {
+  onClick,
+  isActive: checked,
+  isDisabled,
+  color
+}, /* @__PURE__ */ React.createElement(HiddenCheckbox, {
+  ...rest,
+  "data-validate": "checked",
+  name,
+  id: name,
+  disabled: isDisabled
+}), /* @__PURE__ */ React.createElement(CheckboxWrapper, {
+  htmlFor: name,
+  size,
+  color,
+  isChecked: checked,
+  isDisabled
+}, /* @__PURE__ */ React.createElement(components_Icons_CheckIcon['default'], null)));
+
+exports.CheckBox = CheckBox;
+exports['default'] = CheckBox;

package/cjs/components/Chip/index.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var shared_helpers = require('../../shared/helpers.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 getBackgroundColor = ({
+  isDisabled,
+  isActive,
+  activeColor
+}) => {
+  if (isActive && isDisabled) {
+    return shared_helpers.fadedColor(theme['default'].colors[activeColor].main, 0.5);
+  }
+  if (isDisabled) {
+    return theme['default'].colors.gray.light4;
+  }
+  if (isActive) {
+    return theme['default'].colors[activeColor].main;
+  }
+  return "transparent";
+};
+const getColor = ({ isActive, isDisabled }) => {
+  if (isActive || isActive && isDisabled) {
+    return theme['default'].colors.text.light;
+  }
+  if (isDisabled) {
+    return theme['default'].colors.text.disabled;
+  }
+  return theme['default'].colors.text.dark;
+};
+const getFontSize = (size = "smaller") => {
+  const sizes = {
+    smaller: "0.8125rem",
+    small: "1rem",
+    regular: "1rem",
+    large: "1.25rem"
+  };
+  return sizes[size];
+};
+const Item = styled__default['default'].div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  font-size: ${({ size }) => getFontSize(size)};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  display: inline-block;
+  cursor: ${({ isDisabled }) => !isDisabled ? "pointer" : "auto"};
+  align-items: center;
+  background: ${getBackgroundColor};
+  color: ${getColor};
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ isActive, isDisabled }) => !isActive && !isDisabled ? theme['default'].colors.background.dark : "transparent"};
+  border-radius: 1.293rem;
+`;
+const ContentWrapper = styled__default['default'].span`
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+const Chip = ({
+  activeColor = "primary",
+  children,
+  component = "div",
+  isActive,
+  isDisabled,
+  onClick,
+  size,
+  ...props
+}) => {
+  const handleClick = (e) => {
+    if (!isDisabled && onClick) {
+      onClick(e);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Item, {
+    ...props,
+    as: component,
+    activeColor,
+    isDisabled,
+    isActive,
+    size
+  }, /* @__PURE__ */ React.createElement(ContentWrapper, {
+    onClick: handleClick
+  }, children));
+};
+
+exports.Chip = Chip;
+exports['default'] = Chip;