@kvdbil/components 3.3.3 → 3.3.5-2

package/esm/components/OffCanvas/index.js

@@ -0,0 +1,124 @@
+import { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { CSSTransition } from 'react-transition-group';
+import Overlay from './Overlay.js';
+import { useOutsideClick } from './useClickOutside.js';
+
+const defaultAnimationName = "offCanvasAnimation";
+const defaultTransitionProps = {
+  timeout: {
+    enter: 300,
+    exit: 300
+  },
+  mountOnEnter: true,
+  unmountOnExit: true
+};
+const Container = styled.div`
+  ${({
+  animationName,
+  animationDuration,
+  width,
+  from,
+  backgroundColor,
+  theme
+}) => {
+  return `
+    position: fixed;
+    z-index: 1001;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    ${from === "left" ? "left: 0;" : "right: 0;"}
+    background-color: ${backgroundColor || theme.colors.background.light};
+    width: ${width};
+    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
+
+    
+    &.${animationName}--right-enter {
+      transform: translate3d(${width}, 0, 0);
+    }
+    
+    &.${animationName}--right-enter.${animationName}--right-enter-active {
+      transform: translate3d(0, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${animationName}--right-exit {
+      transform: translate3d(0, 0, 0);
+    }
+    
+    &.${animationName}--right-exit.${animationName}--right-exit-active {
+      transform: translate3d(${width}, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${animationName}--left-enter {
+      transform: translate3d(-${width}, 0, 0);
+    }
+    
+    &.${animationName}--left-enter.${animationName}--left-enter-active {
+      transform: translate3d(0, 0, 0);
+      transition: transform 0.2s ease-in-out;
+    }
+    
+    &.${animationName}--left-exit {
+      transform: translate3d(0, 0, 0);
+    }
+    
+    &.${animationName}--left-exit.${animationName}--left-exit-active {
+      transform: translate3d(-${width}, 0, 0);
+      transition: transform ${animationDuration}ms ease-in-out;
+    }
+  `;
+}}
+`;
+const Contents = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+const OffCanvas = ({
+  animationName = defaultAnimationName,
+  animationDuration = 300,
+  backgroundColor,
+  backgroundOverlay,
+  children,
+  from = "right",
+  isOpen,
+  onClickOutside,
+  width = "375px",
+  withPortal,
+  transitionProps
+}) => {
+  const contentRef = useRef(null);
+  useOutsideClick(contentRef, () => onClickOutside == null ? void 0 : onClickOutside());
+  if (backgroundOverlay && !onClickOutside) {
+    console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");
+  }
+  const className = `${animationName}--${from}`;
+  const component = /* @__PURE__ */ React.createElement(React.Fragment, null, backgroundOverlay && /* @__PURE__ */ React.createElement(Overlay, {
+    isOpen
+  }), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CSSTransition, {
+    in: isOpen,
+    className: `${animationName} ${className}`,
+    classNames: className,
+    ...defaultTransitionProps,
+    ...transitionProps
+  }, /* @__PURE__ */ React.createElement(Container, {
+    ref: contentRef,
+    animationName,
+    animationDuration,
+    backgroundColor,
+    from,
+    width
+  }, /* @__PURE__ */ React.createElement(Contents, {
+    className: `${animationName}-content`
+  }, children)))));
+  return withPortal ? createPortal(component, document.body) : component;
+};
+
+export { OffCanvas, OffCanvas as default };

package/esm/components/OffCanvas/useClickOutside.js

@@ -0,0 +1,17 @@
+import { useCallback, useEffect } from 'react';
+
+const useOutsideClick = (ref, callback) => {
+  const handleClick = useCallback((event) => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      callback();
+    }
+  }, [callback, ref]);
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [handleClick]);
+};
+
+export { useOutsideClick };

package/esm/components/RadioButton/index.js

@@ -0,0 +1,139 @@
+import styled, { css } from 'styled-components';
+import { generateNameHash } from '../../shared/helpers.js';
+import theme from '../../theme.js';
+import IconButton from '../IconButton.js';
+
+const regularSize = css`
+  .circle {
+    &--outer {
+      height: 24px;
+      width: 24px;
+    }
+
+    &--inner {
+      height: 100%;
+      width: 100%;
+      transform: scale(0.6);
+    }
+  }
+`;
+const largeSize = css`
+  .circle {
+    &--outer {
+      height: 32px;
+      width: 32px;
+    }
+
+    &--inner {
+      height: 100%;
+      width: 100%;
+      transform: scale(0.6);
+    }
+  }
+`;
+const sizes = {
+  regular: regularSize,
+  large: largeSize
+};
+const disabledStyle = css`
+  cursor: default;
+
+  .circle {
+    &--inner {
+      background-color: ${theme.colors.gray.light1};
+    }
+
+    &--outer {
+      border: 2px solid ${theme.colors.gray.light1};
+    }
+  }
+`;
+const checkedDisabledStyle = css`
+  .circle {
+    &--inner {
+      opacity: 1;
+      background-color: ${theme.colors.gray.light1};
+    }
+  }
+`;
+const checkedStyle = (color) => css`
+  .circle {
+    &--inner {
+      opacity: 1;
+      background-color: ${theme.colors[color].main};
+    }
+
+    &--outer {
+      border: 2px solid ${theme.colors[color].main};
+    }
+  }
+`;
+const RadioButtonWrapper = styled.label`
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  ${(props) => sizes[props.size]};
+
+  ${(props) => !props.isDisabled && props.isChecked && checkedStyle(props.color)};
+  ${(props) => props.isDisabled && disabledStyle};
+
+  ${(props) => props.isChecked && props.isDisabled && checkedDisabledStyle};
+`;
+const HiddenRadioButton = styled.input`
+  display: none;
+`;
+const OuterCircle = styled.span`
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  border: 2px solid ${theme.colors.gray.light1};
+`;
+const InnerCircle = styled.span`
+  box-sizing: border-box;
+  opacity: 0;
+  margin: auto;
+  border-radius: 50%;
+  background-color: ${theme.colors.gray.light1};
+
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const RadioButton = ({
+  name = generateNameHash("radio-button"),
+  size = "regular",
+  checked = false,
+  isDisabled = false,
+  color = "secondary",
+  onChange,
+  ...props
+}) => /* @__PURE__ */ React.createElement(IconButton, {
+  onClick: onChange,
+  isActive: checked,
+  isDisabled,
+  color
+}, /* @__PURE__ */ React.createElement(HiddenRadioButton, {
+  "data-validate": "checked",
+  type: "radio",
+  name,
+  id: name,
+  onChange,
+  disabled: isDisabled,
+  ...props
+}), /* @__PURE__ */ React.createElement(RadioButtonWrapper, {
+  htmlFor: name,
+  size,
+  color,
+  isChecked: checked,
+  isDisabled
+}, /* @__PURE__ */ React.createElement(OuterCircle, {
+  className: "circle circle--outer"
+}, /* @__PURE__ */ React.createElement(InnerCircle, {
+  className: "circle circle--inner"
+}))));
+
+export { RadioButton, RadioButton as default };

package/esm/components/Range/index.js

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import theme from '../../theme.js';
+import { CaptionLink } from '../../typography/BodyText/index.js';
+import { Display1 } from '../../typography/Heading/index.js';
+import '../../shared/media-queries.js';
+
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+`;
+const RangeWrapper = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+const DisplayValue = styled(Display1)`
+  color: ${({ color }) => theme.colors[color].main};
+  line-height: 1;
+  margin-top: 0;
+  margin-bottom: 0;
+`;
+const Value = styled(CaptionLink)`
+  flex: 1;
+  color: ${theme.colors.gray.light1};
+  line-height: 1.2;
+  position: relative;
+  text-align: center;
+  &:before {
+    content: '';
+    background: ${({ color }) => theme.colors[color].main};
+    margin: 0 auto 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 12px;
+    top: 34px;
+    position: relative;
+    width: 2px;
+  }
+`;
+const MinValue = styled(Value)`
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: ${({ color }) => theme.colors[color].main};
+    top: 40px;
+    left: 50%;
+    transform: translate(0, -50%);
+  }
+`;
+const Range = ({
+  displayValue,
+  maxValue,
+  minValue,
+  color = "primary"
+}) => {
+  return /* @__PURE__ */ React.createElement(Container, null, displayValue && /* @__PURE__ */ React.createElement(DisplayValue, {
+    as: "span",
+    color
+  }, displayValue), /* @__PURE__ */ React.createElement(RangeWrapper, null, /* @__PURE__ */ React.createElement(MinValue, {
+    as: "span",
+    color
+  }, minValue), /* @__PURE__ */ React.createElement(Value, {
+    as: "span",
+    color
+  }, maxValue)));
+};
+
+export { Range, Range as default };

package/esm/components/Select/components/test-icon.js

@@ -0,0 +1,12 @@
+const TestIcon = () => /* @__PURE__ */ React.createElement("svg", {
+  viewBox: "0 0 896.003 896.004",
+  height: "18px",
+  width: "18px",
+  y: "0px",
+  x: "0px",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M850.321,663.513C774.05,802.057,626.63,896.004,457.168,896.004c-247.688,0-448.478-200.578-448.478-448.002 S209.479,0,457.168,0c203.805,0,375.577,135.92,430.145,321.882L428.365,478.82L850.321,663.513z M614.342,318.945 c43.631,0,78.998-35.7,78.998-79.736c0-44.039-35.367-79.735-78.998-79.735c-43.63,0-78.999,35.696-78.999,79.735 C535.343,283.245,570.712,318.945,614.342,318.945"
+}));
+
+export { TestIcon };

package/esm/components/Select/index.js

@@ -0,0 +1,215 @@
+import { useState } from 'react';
+import ReactSelect from 'react-select';
+import styled from 'styled-components';
+import { DEFAULT_TRANSITION_MS } from '../../shared/constants.js';
+import { fadedColor } from '../../shared/helpers.js';
+import theme from '../../theme.js';
+import { Label } from '../FieldLabel.js';
+
+const Container = styled.div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  position: relative;
+`;
+const prefixStyles = (hasPrefix) => hasPrefix && {
+  paddingLeft: "2.5rem"
+};
+const disabledStyles = (isDisabled) => isDisabled && {
+  border: `1px solid ${theme.colors.gray.light1}`,
+  color: theme.colors.gray.dark1,
+  fill: theme.colors.gray.light1
+};
+const Prefix = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: 0.5rem;
+  margin: 0.35rem 0.75rem;
+
+  fill: ${theme.colors.gray.dark5};
+  transition: ${DEFAULT_TRANSITION_MS};
+
+  ${(props) => props.isDisabled && `
+    fill: ${theme.colors.gray.light1};
+`}
+
+  ${(props) => props.isFocused && `
+    fill: ${props.theme.colors.text.dark};
+`}
+`;
+const HelperText = styled.span`
+  display: block;
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  font-size: 0.81rem;
+
+  margin-top: 0.25rem;
+  margin-left: 0.85rem;
+
+  color: ${({ hasError }) => hasError ? theme.colors.error.main : theme.colors.text.dark};
+`;
+const Arrow = (props) => /* @__PURE__ */ React.createElement("svg", {
+  ...props
+}, /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-arrow",
+  viewBox: "0 0 19 19"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-arrow"
+}));
+const DropdownArrow = styled(Arrow)`
+  width: 0.8rem;
+  height: 0.8rem;
+  margin: 0 0.5rem;
+  ${(props) => props.$isFocused && `color: ${props.$theme.colors.text.dark}`}
+  ${(props) => props.$isDisabled && `color: ${props.$theme.colors.gray.dark1}`}
+
+
+  path {
+    fill: currentColor;
+    stroke: currentColor;
+  }
+
+  transition: transform ${DEFAULT_TRANSITION_MS};
+
+  transform: ${(props) => props.$isMenuOpen ? "rotate(-180deg)" : "rotate(0deg)"};
+  transform-origin: 50% 60%;
+`;
+const getBorderColor = (isFocused, hasError) => {
+  if (hasError) {
+    return theme.colors.error.main;
+  }
+  return isFocused ? theme.colors.text.dark : theme.colors.gray.light1;
+};
+const DropdownIndicator = ({
+  selectProps: { menuIsOpen = false },
+  isFocused = false,
+  isDisabled
+}) => {
+  return /* @__PURE__ */ React.createElement(DropdownArrow, {
+    $isDisabled: isDisabled,
+    $isFocused: isFocused,
+    $isMenuOpen: menuIsOpen,
+    $theme: theme
+  });
+};
+const Select = ({
+  color = "primary",
+  isDisabled = false,
+  placeholder = "",
+  helperText,
+  height,
+  className,
+  hasError = false,
+  onBlur = () => null,
+  onFocus = () => null,
+  forwardRef,
+  onInputChange = () => null,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (newValue, actionMeta) => {
+    onInputChange(newValue, actionMeta);
+    setInputValue(newValue);
+  };
+  const getOptionColor = ({ isSelected, isFocused: isFocused2 }) => {
+    if (isSelected) {
+      return fadedColor(theme.colors[color].main, 0.72);
+    }
+    if (isFocused2) {
+      return fadedColor(theme.colors[color].main, 0.18);
+    }
+    return "white";
+  };
+  const handleFocus = (event) => {
+    setIsFocused(true);
+    onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsFocused(false);
+    onBlur(event);
+  };
+  const borderColor = getBorderColor(isFocused, hasError);
+  return /* @__PURE__ */ React.createElement(Container, {
+    className
+  }, props.label && /* @__PURE__ */ React.createElement(Label, {
+    height,
+    isFocused,
+    hasValue: Boolean(props.value || inputValue),
+    disabled: isDisabled,
+    theme,
+    hasError
+  }, props.label), props.prefix && /* @__PURE__ */ React.createElement(Prefix, {
+    isDisabled,
+    isFocused
+  }, props.prefix), /* @__PURE__ */ React.createElement(ReactSelect, {
+    ...props,
+    ref: forwardRef,
+    isDisabled,
+    onInputChange: handleInputChange,
+    placeholder,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    styles: {
+      control: (styles) => ({
+        ...styles,
+        fontFamily: theme.typography.fontBaseFamily,
+        fontSize: "1rem",
+        fontWeight: 400,
+        cursor: "pointer",
+        padding: "0.7rem 0.75rem",
+        backgroundColor: theme.colors.background.light,
+        borderColor,
+        boxShadow: "none",
+        "&:hover": {
+          borderColor: "none"
+        },
+        ...disabledStyles(isDisabled),
+        ...prefixStyles(Boolean(props.prefix))
+      }),
+      placeholder: (styles) => ({
+        ...styles,
+        display: !isFocused ? "none" : "static"
+      }),
+      singleValue: (styles) => ({
+        ...styles,
+        ...{
+          maxWidth: "calc(100% - 3.3rem)",
+          width: "calc(100% - 3.3rem)"
+        }
+      }),
+      menu: (styles) => ({
+        ...styles,
+        zIndex: 2,
+        padding: "0.25rem 0"
+      }),
+      option: (styles, { isSelected, isFocused: isFocused2 }) => {
+        return {
+          ...styles,
+          padding: "1rem",
+          "&:hover": {
+            background: getOptionColor({ isFocused: true, isSelected })
+          },
+          background: getOptionColor({ isSelected, isFocused: isFocused2 }),
+          cursor: "pointer",
+          ...prefixStyles(Boolean(props.prefix))
+        };
+      },
+      valueContainer: (styles) => ({
+        ...styles,
+        ...{
+          position: "static",
+          padding: height ? `${height - 1}rem 0 ` : 0,
+          height: height ? "auto" : "21px"
+        }
+      })
+    },
+    components: {
+      IndicatorSeparator: () => null,
+      DropdownIndicator
+    }
+  }), helperText && /* @__PURE__ */ React.createElement(HelperText, {
+    hasError
+  }, helperText));
+};
+
+export { Select, Select as default };