@kvdbil/components 3.3.5-0 → 3.3.5-5

package/cjs/theme.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const theme = {
+    typography: {
+        fontBaseFamily: "'Open Sans', sans-serif",
+        fontAlternativeFamily: "'Next Book', sans-serif",
+        fontBaseRegularWeight: 400,
+        fontBaseBoldWeight: 600,
+        fontAlternativeRegularWeight: 400,
+        fontAlternativeBoldWeight: 700,
+    },
+    colors: {
+        primary: {
+            darker: '#d98500',
+            dark: '#e8a100',
+            main: '#f5b400',
+            light: '#f7cf57',
+            lighter: '#fce5ab',
+            lighter2: '#fff7e5',
+        },
+        secondary: {
+            darker: '#00474d',
+            dark: '#007069',
+            main: '#2a9d8f',
+            light: '#6bb8a6',
+            lighter: '#bae3cc',
+            lighter2: '#e5f5ed',
+        },
+        tertiary: {
+            darker: '#5e2636',
+            dark: '#a63640',
+            main: '#ef5b5b',
+            light: '#f5968a',
+            lighter: '#f5c7bf',
+            lighter2: '#fcedeb',
+        },
+        info: {
+            darker: '#17395d',
+            dark: '#004773',
+            main: '#007ab8',
+            light: '#57c2ff',
+            lighter: '#abe0ff',
+            lighter2: '#e5f5ff',
+        },
+        success: {
+            darker: '#175c36',
+            dark: '#269940',
+            main: '#59d771',
+            light: '#91e5a1',
+            lighter: '#c7f2cf',
+            lighter2: '#edfaf0',
+        },
+        warning: {
+            darker: '#d98500',
+            dark: '#e8a100',
+            main: '#f5b400',
+            light: '#f7cf57',
+            lighter: '#fce5ab',
+            lighter2: '#fff7e5',
+        },
+        error: {
+            darker: '#5e2636',
+            dark: '#a63640',
+            main: '#ef5b5b',
+            light: '#f5968a',
+            lighter: '#f5c7bf',
+            lighter2: '#fcedeb',
+        },
+        neutral: {
+            darker: '#1a2030',
+            dark: '#1a2030',
+            main: '#1a2030',
+            light: '#474d59',
+            lighter: '#5e6369',
+            lighte2: '#707378',
+        },
+        text: {
+            dark: '#1a2030',
+            light: '#ffffff',
+            disabled: '#5e6369',
+        },
+        background: {
+            dark: '#1a2030',
+            gray: '#f2f2f2',
+            sand: '#f2efe6',
+            light: '#ffffff',
+        },
+        common: {
+            black: '#000000',
+            white: '#ffffff',
+            purple: {
+                darker: '#42214f',
+                dark: '#732e70',
+                main: '#a13d8f',
+                light: '#c27db5',
+                lighter: '#e0bfd9',
+                lighter2: '#f5edf2',
+            },
+        },
+        gray: {
+            dark1: '#1a2030',
+            dark2: '#303842',
+            dark3: '#474d59',
+            dark4: '#5e6369',
+            dark5: '#707378',
+            light1: '#8c8f91',
+            light2: '#a3a6a8',
+            light3: '#c7c7c4',
+            light4: '#d9d9d6',
+            light5: '#e8e8e8',
+            light6: '#f2f2f2',
+        },
+    },
+    elevations: {
+        elevation2: '0px 1px 5px rgba(0, 0, 0, 0.15), 0px 2px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)',
+        elevation4: '0px 1px 10px rgba(0, 0, 0, 0.15), 0px 4px 5px rgba(0, 0, 0, 0.09), 0px 2px 4px rgba(0, 0, 0, 0.1)',
+        elevation8: '0px 4px 5px rgba(0, 0, 0, 0.15), 0px 3px 14px rgba(0, 0, 0, 0.09), 0px 8px 10px rgba(0, 0, 0, 0.1)',
+        elevation16: '0px 8px 10px rgba(0, 0, 0, 0.15), 0px 6px 30px rgba(0, 0, 0, 0.09), 0px 16px 24px rgba(0, 0, 0, 0.1)',
+        elevation24: '0px 11px 15px rgba(0, 0, 0, 0.15), 0px 9px 46px rgba(0, 0, 0, 0.09), 0px 24px 38px rgba(0, 0, 0, 0.1)',
+    },
+};
+
+exports['default'] = theme;

package/cjs/typography/BodyText/index.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+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 BodyTextStylePrimary = styled.css `
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  font-weight: ${({ theme }) => theme.typography.fontBaseRegularWeight};
+`;
+const StyledBodyText = styled__default['default'].p `
+  ${BodyTextStylePrimary}
+  font-feature-settings: 'lnum' on;
+`;
+const Quote = styled__default['default'](StyledBodyText) `
+  font-family: Georgia, Cambria, Cochin, Times, 'Times New Roman', serif;
+  font-style: italic;
+`;
+const BodyTextStyle = styled.css `
+  ${BodyTextStylePrimary}
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const BodyText = styled__default['default'](StyledBodyText) `
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const BodyLink = styled__default['default'](BodyText) `
+  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+`;
+const CaptionStyle = styled.css `
+  ${BodyTextStylePrimary}
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`;
+const Caption = styled__default['default'](StyledBodyText) `
+  font-size: 0.81rem;
+  line-height: 1.5rem;
+`;
+const CaptionLink = styled__default['default'](Caption) `
+  font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+`;
+const Status = styled__default['default'](StyledBodyText) `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  text-transform: uppercase;
+`;
+const BodyTexts = () => jsxRuntime.jsx("div", {}, void 0);
+
+exports.BodyLink = BodyLink;
+exports.BodyText = BodyText;
+exports.BodyTextStyle = BodyTextStyle;
+exports.BodyTexts = BodyTexts;
+exports.Caption = Caption;
+exports.CaptionLink = CaptionLink;
+exports.CaptionStyle = CaptionStyle;
+exports.Quote = Quote;
+exports.Status = Status;
+exports.StyledBodyText = StyledBodyText;
+exports['default'] = BodyTexts;

package/cjs/typography/ButtonText/index.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+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 BasicButtonTextStyle = styled.css `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const StyledButtonText = styled__default['default'].span `
+  ${BasicButtonTextStyle}
+`;
+const ButtonLargeTextStyle = styled.css `
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+`;
+const ButtonLarge = styled__default['default'](StyledButtonText) `
+  ${ButtonLargeTextStyle}
+`;
+const ButtonRegularTextStyle = styled.css `
+  font-size: 1rem;
+  line-height: 1rem;
+`;
+const Button = styled__default['default'](StyledButtonText) `
+  ${ButtonRegularTextStyle}
+`;
+const ButtonSmallTextStyle = styled.css `
+  font-size: 0.81rem;
+  line-height: 0.81rem;
+`;
+const ButtonSmall = styled__default['default'](StyledButtonText) `
+  ${ButtonSmallTextStyle}
+`;
+const Buttons = () => jsxRuntime.jsx("div", {}, void 0);
+
+exports.BasicButtonTextStyle = BasicButtonTextStyle;
+exports.Button = Button;
+exports.ButtonLarge = ButtonLarge;
+exports.ButtonLargeTextStyle = ButtonLargeTextStyle;
+exports.ButtonRegularTextStyle = ButtonRegularTextStyle;
+exports.ButtonSmall = ButtonSmall;
+exports.ButtonSmallTextStyle = ButtonSmallTextStyle;
+exports['default'] = Buttons;

package/cjs/typography/Heading/index.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var styled = require('styled-components');
+var shared_mediaQueries = 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 StyledHeading = styled__default['default'].p `
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+`;
+const StyledDisplay = styled__default['default'](StyledHeading) `
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const Display3 = styled__default['default'](StyledDisplay) `
+  font-size: 2rem;
+  line-height: 3rem;
+
+  ${shared_mediaQueries.mq('laptop')} {
+    font-size: 3.75rem;
+    line-height: 4.5rem;
+  }
+`;
+const Display2 = styled__default['default'](StyledDisplay) `
+  font-size: 1.81rem;
+  line-height: 2.5rem;
+
+  ${shared_mediaQueries.mq('laptop')} {
+    font-size: 3rem;
+    line-height: 4rem;
+  }
+`;
+const Display1 = styled__default['default'](StyledDisplay) `
+  font-size: 1.63rem;
+  line-height: 2.5rem;
+
+  ${shared_mediaQueries.mq('laptop')} {
+    font-size: 2.5rem;
+    line-height: 3.5rem;
+  }
+`;
+const Headline = styled__default['default'](StyledHeading) `
+  font-size: 1.44rem;
+  line-height: 2rem;
+
+  ${shared_mediaQueries.mq('laptop')} {
+    font-size: 2rem;
+    line-height: 3rem;
+  }
+`;
+const Title = styled__default['default'](StyledHeading) `
+  font-size: 1.25rem;
+  line-height: 2rem;
+
+  ${shared_mediaQueries.mq('laptop')} {
+    font-size: 1.56rem;
+    line-height: 2.5rem;
+  }
+`;
+const Subtitle = styled__default['default'](StyledHeading) `
+  font-size: 1.125rem;
+  line-height: 2rem;
+
+  ${shared_mediaQueries.mq('laptop')} {
+    font-size: 1.25rem;
+  }
+`;
+const TinyTitle = styled__default['default'](StyledHeading) `
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+`;
+const Rubric = styled__default['default'](StyledHeading) `
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-size: 1rem;
+  line-height: 1.5rem;
+`;
+const Headings = () => jsxRuntime.jsx("div", {}, void 0);
+
+exports.Display1 = Display1;
+exports.Display2 = Display2;
+exports.Display3 = Display3;
+exports.Headline = Headline;
+exports.Rubric = Rubric;
+exports.Subtitle = Subtitle;
+exports.TinyTitle = TinyTitle;
+exports.Title = Title;
+exports['default'] = Headings;

package/cjs/utils/utils.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+const getLuminosity = (hexColor) => {
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    if (hexColor.length === 4) {
+        red = parseInt('0x' + hexColor[1] + hexColor[1]);
+        green = parseInt('0x' + hexColor[2] + hexColor[2]);
+        blue = parseInt('0x' + hexColor[3] + hexColor[3]);
+    }
+    else if (hexColor.length === 7) {
+        red = parseInt('0x' + hexColor[1] + hexColor[2]);
+        green = parseInt('0x' + hexColor[3] + hexColor[4]);
+        blue = parseInt('0x' + hexColor[5] + hexColor[6]);
+    }
+    return (((Math.max(Number(red / 255), Number(green / 255), Number(blue / 255)) +
+        Math.min(Number(red / 255), Number(green / 255), Number(blue / 255))) /
+        2) *
+        100);
+};
+const resetButtonStyle = styled.css `
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+`;
+
+exports.getLuminosity = getLuminosity;
+exports.resetButtonStyle = resetButtonStyle;

package/esm/ColorCard.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { getLuminosity } from './utils/utils.js';
+import theme from './theme.js';
+
+const SubList = styled.ul `
+  padding-left: 2rem;
+`;
+const ColorItem = styled.li `
+  list-style: none;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
+  border: 1px solid ${theme.colors.gray.light2};
+  border-radius: 4px;
+  font-family: 'Ralway', sans-serif;
+  margin-top: 0.75rem;
+`;
+const Header = styled.span `
+  text-transform: capitalize;
+  padding: 0.5em;
+  display: block;
+  border-bottom: 1px solid ${theme.colors.gray.light2};
+`;
+const Color = styled.li `
+  display: block;
+  background: ${({ hex }) => hex};
+  color: ${({ hex }) => (getLuminosity(hex) < 40 ? '#fff' : '#000')};
+  padding: 1em;
+`;
+const SwatchArea = styled.ul `
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+const getColor = variants => Object.entries(variants).map(([name, hex]) => typeof hex === 'string' ? (jsxs(Color, Object.assign({ hex: hex }, { children: [name, " (", hex, ")"] }), hex)) : (jsxs(Fragment, { children: [jsx(Header, { children: name }, void 0), jsx(SubList, { children: getColor(hex) }, void 0)] }, void 0)));
+const ColorCard = ({ colorName, variants }) => (jsxs(ColorItem, { children: [jsx(Header, { children: colorName }, void 0), jsx(SwatchArea, { children: getColor(variants) }, void 0)] }, void 0));
+
+export { ColorCard as default };

package/esm/ElevationCard.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+
+const Card = styled.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 (jsx(Card, Object.assign({ as: as, elevation: value }, { children: children }), void 0));
+};
+
+export { ElevationCard };

package/esm/components/Accordion/index.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { UnmountClosed } from 'react-collapse';
+import { mq } from '../../shared/media-queries.js';
+import ArrowDownIcon from '../../icons/components/ArrowDownIcon.js';
+
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  .ReactCollapse--collapse {
+    transition: height 300ms;
+  }
+`;
+const List = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+const Title = styled.div `
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  margin: 0.5rem 0;
+`;
+const Arrow = styled.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.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.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.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;
+  ${mq('tablet')} {
+    padding: 0;
+  }
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+`;
+const Accordion = ({ items, ...props }) => {
+    const [isOpened, setIsOpened] = 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 (jsx(Container, Object.assign({}, props, { children: jsx(List, Object.assign({ className: "accordionList" }, { children: items.map((item, index) => {
+                const isOpen = Boolean(isOpened[index]);
+                return (jsxs(Item, Object.assign({ isOpen: isOpen, className: "accordionItem" }, { children: [jsxs(Title, Object.assign({ onClick: onClick(index), onKeyPress: onKeyPress(index), className: "accordionItemTitle", role: "button", tabIndex: 0, "aria-expanded": isOpen, id: `panel${index}-header`, "aria-controls": `panel${index}-content` }, { children: [jsx(Text, Object.assign({ as: "span" }, { children: item.title }), void 0), jsx(Arrow, Object.assign({ isOpen: isOpen }, { children: jsx(ArrowDownIcon, {}, void 0) }), void 0)] }), void 0), jsx(UnmountClosed, Object.assign({ isOpened: isOpen }, { children: jsx(Content, { "aria-labelledby": `panel${index}-header`, id: `panel${index}-content`, role: "region", className: "wysiwyg", dangerouslySetInnerHTML: {
+                                    __html: item.text,
+                                } }, void 0) }), index)] }), item.title));
+            }) }), void 0) }), void 0));
+};
+
+export { Accordion, Accordion as default };

package/esm/components/Badge/index.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import theme from '../../theme.js';
+
+const BadgeContainer = styled.div `
+  border-radius: 0.75rem;
+  background: ${theme.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(BadgeContainer) `
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  min-width: 1rem;
+  position: relative;
+`;
+const MiddleDot = styled.div `
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  opacity: 0.1;
+  transform: scale(0.5);
+  background: ${theme.colors.text.dark};
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const Label = styled.span `
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  color: white;
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeBoldWeight};
+  font-family: ${({ theme }) => theme.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 (jsx(SmallBadgeContainer, Object.assign({}, rest, { children: jsx(MiddleDot, { "data-test": "middle-dot" }, void 0) }), void 0));
+    }
+    const label = numberToLabel(notificationAmount);
+    return (jsx(BadgeContainer, Object.assign({}, rest, { children: jsx(Label, { children: label }, void 0) }), void 0));
+};
+
+export { Badge, Badge as default };