@kvdbil/components 3.3.5-0 → 3.3.5-5

package/cjs/components/Modal/index.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactDom = require('react-dom');
+var reactTransitionGroup = require('react-transition-group');
+var styled = require('styled-components');
+var components_Icons_Close = require('../Icons/Close.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const transitions = styled.css `
+  .backgroundTransition-enter {
+    opacity: 0;
+  }
+
+  .backgroundTransition-enter.backgroundTransition-enter-active {
+    opacity: 1;
+    transition: opacity 0.25s ease-in-out;
+  }
+
+  .backgroundTransition-exit {
+    opacity: 1;
+  }
+
+  .backgroundTransition-exit.backgroundTransition-exit-active {
+    opacity: 0;
+    transition: opacity 0.25s ease-in-out;
+  }
+`;
+const Container = styled__default['default'].div `
+  ${transitions}
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 200;
+`;
+const Background = styled__default['default'].div `
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(34, 34, 34, 0.3);
+`;
+const Content = styled__default['default'].div `
+  position: relative;
+  max-width: 512px;
+  padding: 24px 32px 24px 32px;
+  background-color: white;
+  border-radius: 3px;
+  box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
+    0px 11px 15px rgba(0, 0, 0, 0.15);
+
+  overflow-y: hidden;
+  margin: 1rem;
+  margin-top: 50vh;
+  transform: translate(0, -50%);
+  margin-left: 1rem;
+  margin-right: 1rem;
+
+  @media (min-width: 500px) {
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 355px;
+  }
+`;
+const CloseContainer = styled__default['default'].div `
+  position: absolute;
+  top: 24px;
+  right: 32px;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+const BodyStyleInjector = styled.createGlobalStyle `
+  body {
+    overflow: hidden;
+
+    ${typeof window !== 'undefined' &&
+    window.innerWidth > 1024 &&
+    `
+        padding-right: 15px !important;
+    `}
+  }
+`;
+const Transitions = styled.createGlobalStyle `
+  ${transitions}
+`;
+const Modal = ({ children, isOpen, contentStyles, withPortal = false, onClose, }) => {
+    react.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                if (isOpen) {
+                    onClose();
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onClose, isOpen]);
+    const Component = (jsxRuntime.jsx(reactTransitionGroup.CSSTransition, Object.assign({ in: isOpen, mountOnEnter: true, unmountOnExit: true, timeout: 400, classNames: "backgroundTransition" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Transitions, {}, void 0), jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(Background, { "data-testid": "background", onClick: onClose }, void 0), jsxRuntime.jsxs(Content, Object.assign({ style: contentStyles }, { children: [jsxRuntime.jsx(CloseContainer, Object.assign({ onClick: onClose, "data-testid": "close" }, { children: jsxRuntime.jsx(components_Icons_Close['default'], {}, void 0) }), void 0), children] }), void 0), jsxRuntime.jsx(BodyStyleInjector, {}, void 0)] }, void 0)] }, void 0) }), void 0));
+    return withPortal ? reactDom.createPortal(Component, document.body) : Component;
+};
+
+exports.Modal = Modal;
+exports['default'] = Modal;

package/cjs/components/NotificationButton/index.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var components_Badge_index = require('../Badge/index.js');
+var components_Button_index = require('../Button/index.js');
+require('../../theme.js');
+require('../Spinner/index.js');
+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 Container = styled__default['default'].div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledBadge = styled__default['default'](components_Badge_index.Badge) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: -10px;
+  border: 2px solid white;
+  ${props => props.noPadding && `padding: 0;`}
+`;
+const NotificationButton = (props) => {
+    const count = props.badgeProps.notificationAmount || 0;
+    const noPadding = count < 10;
+    return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(components_Button_index.Button, Object.assign({}, props.buttonProps, { children: props.children }), void 0), jsxRuntime.jsx(StyledBadge, Object.assign({}, props.badgeProps, { noPadding: noPadding }), void 0)] }, void 0));
+};
+
+exports.NotificationButton = NotificationButton;

package/cjs/components/OffCanvas/Overlay.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTransitionGroup = require('react-transition-group');
+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 defaultTransitionProps = {
+    classNames: 'backgroundTransition',
+    timeout: {
+        enter: 400,
+        exit: 400,
+    },
+    mountOnEnter: true,
+    unmountOnExit: true,
+};
+const Background = styled__default['default'].div `
+  position: fixed;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+
+  &.backgroundTransition-enter {
+    opacity: 0;
+  }
+
+  &.backgroundTransition-enter.backgroundTransition-enter-active {
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &.backgroundTransition-exit {
+    opacity: 1;
+  }
+
+  &.backgroundTransition-exit.backgroundTransition-exit-active {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+`;
+const Overlay = ({ className, isOpen, onClick, transitionProps = defaultTransitionProps, }) => {
+    const handleClick = () => {
+        if (onClick) {
+            onClick();
+        }
+    };
+    return (jsxRuntime.jsx(reactTransitionGroup.CSSTransition, Object.assign({ in: isOpen }, transitionProps, { className: className }, { children: jsxRuntime.jsx(Background, { onClick: handleClick }, void 0) }), void 0));
+};
+
+exports['default'] = Overlay;

package/cjs/components/OffCanvas/index.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactDom = require('react-dom');
+var styled = require('styled-components');
+var reactTransitionGroup = require('react-transition-group');
+var components_OffCanvas_Overlay = require('./Overlay.js');
+var components_OffCanvas_useClickOutside = require('./useClickOutside.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const defaultAnimationName = 'offCanvasAnimation';
+const defaultTransitionProps = {
+    timeout: {
+        enter: 300,
+        exit: 300,
+    },
+    mountOnEnter: true,
+    unmountOnExit: true,
+};
+const Container = styled__default['default'].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__default['default'].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 = react.useRef(null);
+    components_OffCanvas_useClickOutside.useOutsideClick(contentRef, () => onClickOutside === null || onClickOutside === void 0 ? 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 = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [backgroundOverlay && jsxRuntime.jsx(components_OffCanvas_Overlay['default'], { isOpen: isOpen }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(reactTransitionGroup.CSSTransition, Object.assign({ in: isOpen, className: `${animationName} ${className}`, classNames: className }, defaultTransitionProps, transitionProps, { children: jsxRuntime.jsx(Container, Object.assign({ ref: contentRef, animationName: animationName, animationDuration: animationDuration, backgroundColor: backgroundColor, from: from, width: width }, { children: jsxRuntime.jsx(Contents, Object.assign({ className: `${animationName}-content` }, { children: children }), void 0) }), void 0) }), void 0) }, void 0)] }, void 0));
+    return withPortal ? reactDom.createPortal(component, document.body) : component;
+};
+
+exports.OffCanvas = OffCanvas;
+exports['default'] = OffCanvas;

package/cjs/components/OffCanvas/useClickOutside.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const useOutsideClick = (ref, callback) => {
+    const handleClick = react.useCallback((event) => {
+        if (ref.current && !ref.current.contains(event.target)) {
+            callback();
+        }
+    }, [callback, ref]);
+    react.useEffect(() => {
+        document.addEventListener('mousedown', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [handleClick]);
+};
+
+exports.useOutsideClick = useOutsideClick;

package/cjs/components/RadioButton/index.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_helpers = require('../../shared/helpers.js');
+var theme = require('../../theme.js');
+var components_IconButton = require('../IconButton.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 `
+  .circle {
+    &--outer {
+      height: 24px;
+      width: 24px;
+    }
+
+    &--inner {
+      height: 100%;
+      width: 100%;
+      transform: scale(0.6);
+    }
+  }
+`;
+const largeSize = styled.css `
+  .circle {
+    &--outer {
+      height: 32px;
+      width: 32px;
+    }
+
+    &--inner {
+      height: 100%;
+      width: 100%;
+      transform: scale(0.6);
+    }
+  }
+`;
+const sizes = {
+    regular: regularSize,
+    large: largeSize,
+};
+const disabledStyle = styled.css `
+  cursor: default;
+
+  .circle {
+    &--inner {
+      background-color: ${theme['default'].colors.gray.light1};
+    }
+
+    &--outer {
+      border: 2px solid ${theme['default'].colors.gray.light1};
+    }
+  }
+`;
+const checkedDisabledStyle = styled.css `
+  .circle {
+    &--inner {
+      opacity: 1;
+      background-color: ${theme['default'].colors.gray.light1};
+    }
+  }
+`;
+const checkedStyle = (color) => styled.css `
+  .circle {
+    &--inner {
+      opacity: 1;
+      background-color: ${theme['default'].colors[color].main};
+    }
+
+    &--outer {
+      border: 2px solid ${theme['default'].colors[color].main};
+    }
+  }
+`;
+const RadioButtonWrapper = styled__default['default'].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__default['default'].input `
+  display: none;
+`;
+const OuterCircle = styled__default['default'].span `
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 50%;
+
+  border: 2px solid ${theme['default'].colors.gray.light1};
+`;
+const InnerCircle = styled__default['default'].span `
+  box-sizing: border-box;
+  opacity: 0;
+  margin: auto;
+  border-radius: 50%;
+  background-color: ${theme['default'].colors.gray.light1};
+
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const RadioButton = ({ name = shared_helpers.generateNameHash('radio-button'), size = 'regular', checked = false, isDisabled = false, color = 'secondary', onChange, ...props }) => (jsxRuntime.jsxs(components_IconButton['default'], Object.assign({ onClick: onChange, isActive: checked, isDisabled: isDisabled, color: color }, { children: [jsxRuntime.jsx(HiddenRadioButton, Object.assign({ "data-validate": "checked", type: "radio", name: name, id: name, onChange: onChange, disabled: isDisabled }, props), void 0), jsxRuntime.jsx(RadioButtonWrapper, Object.assign({ htmlFor: name, size: size, color: color, isChecked: checked, isDisabled: isDisabled }, { children: jsxRuntime.jsx(OuterCircle, Object.assign({ className: "circle circle--outer" }, { children: jsxRuntime.jsx(InnerCircle, { className: "circle circle--inner" }, void 0) }), void 0) }), void 0)] }), void 0));
+
+exports.RadioButton = RadioButton;
+exports['default'] = RadioButton;

package/cjs/components/Range/index.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+var typography_Heading_index = require('../../typography/Heading/index.js');
+require('../../shared/media-queries.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;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+`;
+const RangeWrapper = styled__default['default'].div `
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+const DisplayValue = styled__default['default'](typography_Heading_index.Display1) `
+  color: ${({ color }) => theme['default'].colors[color].main};
+  line-height: 1;
+  margin-top: 0;
+  margin-bottom: 0;
+`;
+const Value = styled__default['default'](typography_BodyText_index.CaptionLink) `
+  flex: 1;
+  color: ${theme['default'].colors.gray.light1};
+  line-height: 1.2;
+  position: relative;
+  text-align: center;
+  &:before {
+    content: '';
+    background: ${({ color }) => theme['default'].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__default['default'](Value) `
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: ${({ color }) => theme['default'].colors[color].main};
+    top: 40px;
+    left: 50%;
+    transform: translate(0, -50%);
+  }
+`;
+const Range = ({ displayValue, maxValue, minValue, color = 'primary', }) => {
+    return (jsxRuntime.jsxs(Container, { children: [displayValue && (jsxRuntime.jsx(DisplayValue, Object.assign({ as: "span", color: color }, { children: displayValue }), void 0)), jsxRuntime.jsxs(RangeWrapper, { children: [jsxRuntime.jsx(MinValue, Object.assign({ as: "span", color: color }, { children: minValue }), void 0), jsxRuntime.jsx(Value, Object.assign({ as: "span", color: color }, { children: maxValue }), void 0)] }, void 0)] }, void 0));
+};
+
+exports.Range = Range;
+exports['default'] = Range;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const TestIcon = () => (jsxRuntime.jsx("svg", Object.assign({ viewBox: "0 0 896.003 896.004", height: "18px", width: "18px", y: "0px", x: "0px", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("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" }, void 0) }), void 0));
+
+exports.TestIcon = TestIcon;