@kvdbil/components 3.3.5-0 → 3.3.5-5

package/esm/components/MenuItem/index.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import theme from '../../theme.js';
+
+const fontSizes = {
+    1: {
+        size: '2rem',
+        lineHeight: '3rem',
+        bottom: '2rem',
+        fontFamily: theme.typography.fontAlternativeFamily,
+    },
+    2: {
+        size: '1.5rem',
+        lineHeight: '2.5rem',
+        bottom: '1rem',
+        fontFamily: theme.typography.fontAlternativeFamily,
+    },
+    3: {
+        size: '1rem',
+        lineHeight: '1.5rem',
+        bottom: '1rem',
+        fontFamily: theme.typography.fontBaseFamily,
+    },
+};
+const Wrapper = styled.li `
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  ${({ hasPreamble }) => hasPreamble && 'grid-column-end: span 2'};
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const BaseText = styled.span `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+`;
+const TextContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ level }) => fontSizes[level].bottom};
+`;
+const Text = styled(BaseText) `
+  color: ${({ theme }) => theme.colors.text.dark};
+  font-size: ${({ level }) => fontSizes[level].size};
+  line-height: ${({ level }) => fontSizes[level].lineHeight};
+  font-family: ${({ level }) => fontSizes[level].fontFamily};
+
+  ${({ level, theme }) => level === 3 &&
+    `font-weight: ${theme.typography.fontAlternativeRegularWeight}`};
+`;
+const Title = styled(BaseText) `
+  font-size: 0.75rem;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  line-height: 1.25rem;
+  color: ${({ theme }) => theme.colors.text.dark};
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+`;
+const Preamble = styled(BaseText) `
+  font-size: 0.8125rem;
+  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+  line-height: 1.5rem;
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  color: ${({ theme }) => theme.colors.text.dark};
+  margin-top: ${({ level }) => (level === 3 ? '0.25rem' : 0)};
+`;
+const MenuItem = ({ preamble, title, level, component: Component = 'li', children, ...props }) => {
+    const hasPreamble = Boolean(preamble);
+    return (jsxs(Wrapper, Object.assign({ as: Component }, props, { hasPreamble: hasPreamble }, { children: [title && jsx(Title, { children: title }, void 0), jsxs(TextContainer, Object.assign({ level: level }, { children: [jsx(Text, Object.assign({ level: level, hasPreamble: hasPreamble }, { children: children }), void 0), preamble && jsx(Preamble, Object.assign({ level: level }, { children: preamble }), void 0)] }), void 0)] }), void 0));
+};
+
+export { MenuItem, MenuItem as default };

package/esm/components/Modal/index.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import styled, { css, createGlobalStyle } from 'styled-components';
+import Close from '../Icons/Close.js';
+
+const transitions = 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.div `
+  ${transitions}
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 200;
+`;
+const Background = styled.div `
+  z-index: -1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(34, 34, 34, 0.3);
+`;
+const Content = styled.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.div `
+  position: absolute;
+  top: 24px;
+  right: 32px;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+const BodyStyleInjector = createGlobalStyle `
+  body {
+    overflow: hidden;
+
+    ${typeof window !== 'undefined' &&
+    window.innerWidth > 1024 &&
+    `
+        padding-right: 15px !important;
+    `}
+  }
+`;
+const Transitions = createGlobalStyle `
+  ${transitions}
+`;
+const Modal = ({ children, isOpen, contentStyles, withPortal = false, onClose, }) => {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                if (isOpen) {
+                    onClose();
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onClose, isOpen]);
+    const Component = (jsx(CSSTransition, Object.assign({ in: isOpen, mountOnEnter: true, unmountOnExit: true, timeout: 400, classNames: "backgroundTransition" }, { children: jsxs(Fragment, { children: [jsx(Transitions, {}, void 0), jsxs(Container, { children: [jsx(Background, { "data-testid": "background", onClick: onClose }, void 0), jsxs(Content, Object.assign({ style: contentStyles }, { children: [jsx(CloseContainer, Object.assign({ onClick: onClose, "data-testid": "close" }, { children: jsx(Close, {}, void 0) }), void 0), children] }), void 0), jsx(BodyStyleInjector, {}, void 0)] }, void 0)] }, void 0) }), void 0));
+    return withPortal ? createPortal(Component, document.body) : Component;
+};
+
+export { Modal, Modal as default };

package/esm/components/NotificationButton/index.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Badge } from '../Badge/index.js';
+import { Button } from '../Button/index.js';
+import '../../theme.js';
+import '../Spinner/index.js';
+import '../../typography/ButtonText/index.js';
+
+const Container = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledBadge = styled(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 (jsxs(Container, { children: [jsx(Button, Object.assign({}, props.buttonProps, { children: props.children }), void 0), jsx(StyledBadge, Object.assign({}, props.badgeProps, { noPadding: noPadding }), void 0)] }, void 0));
+};
+
+export { NotificationButton };

package/esm/components/OffCanvas/Overlay.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { CSSTransition } from 'react-transition-group';
+import styled from 'styled-components';
+
+const defaultTransitionProps = {
+    classNames: 'backgroundTransition',
+    timeout: {
+        enter: 400,
+        exit: 400,
+    },
+    mountOnEnter: true,
+    unmountOnExit: true,
+};
+const Background = styled.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 (jsx(CSSTransition, Object.assign({ in: isOpen }, transitionProps, { className: className }, { children: jsx(Background, { onClick: handleClick }, void 0) }), void 0));
+};
+
+export { Overlay as default };

package/esm/components/OffCanvas/index.js

@@ -0,0 +1,89 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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 || 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 = (jsxs(Fragment, { children: [backgroundOverlay && jsx(Overlay, { isOpen: isOpen }, void 0), jsx(Fragment, { children: jsx(CSSTransition, Object.assign({ in: isOpen, className: `${animationName} ${className}`, classNames: className }, defaultTransitionProps, transitionProps, { children: jsx(Container, Object.assign({ ref: contentRef, animationName: animationName, animationDuration: animationDuration, backgroundColor: backgroundColor, from: from, width: width }, { children: jsx(Contents, Object.assign({ className: `${animationName}-content` }, { children: children }), void 0) }), void 0) }), void 0) }, void 0)] }, void 0));
+    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,109 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 }) => (jsxs(IconButton, Object.assign({ onClick: onChange, isActive: checked, isDisabled: isDisabled, color: color }, { children: [jsx(HiddenRadioButton, Object.assign({ "data-validate": "checked", type: "radio", name: name, id: name, onChange: onChange, disabled: isDisabled }, props), void 0), jsx(RadioButtonWrapper, Object.assign({ htmlFor: name, size: size, color: color, isChecked: checked, isDisabled: isDisabled }, { children: jsx(OuterCircle, Object.assign({ className: "circle circle--outer" }, { children: jsx(InnerCircle, { className: "circle circle--inner" }, void 0) }), void 0) }), void 0)] }), void 0));
+
+export { RadioButton, RadioButton as default };

package/esm/components/Range/index.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 (jsxs(Container, { children: [displayValue && (jsx(DisplayValue, Object.assign({ as: "span", color: color }, { children: displayValue }), void 0)), jsxs(RangeWrapper, { children: [jsx(MinValue, Object.assign({ as: "span", color: color }, { children: minValue }), void 0), jsx(Value, Object.assign({ as: "span", color: color }, { children: maxValue }), void 0)] }, void 0)] }, void 0));
+};
+
+export { Range, Range as default };

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

@@ -0,0 +1,5 @@
+import { jsx } from 'react/jsx-runtime';
+
+const TestIcon = () => (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: 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));
+
+export { TestIcon };