@kvdbil/components 3.3.3 → 3.3.5-2

package/cjs/components/DayPicker/DayPickerNavBar.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var components_Icons_Arrow = require('../Icons/Arrow.js');
+var theme = require('../../theme.js');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+var components_DayPicker_localeUtils = require('./localeUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const NavBarWrapper = styled__default['default'].div`
+  display: flex;
+  justify-content: space-between;
+`;
+const NavTitle = styled__default['default'](typography_BodyText_index.BodyText)`
+  color: ${theme['default'].colors.text.dark};
+`;
+const NavButton = styled__default['default'].button`
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  display: flex;
+  align-items: center;
+`;
+const Arrow = styled__default['default'](components_Icons_Arrow['default'])`
+  width: 16px;
+  height: 16px;
+  fill: ${theme['default'].colors.gray.dark3};
+`;
+const BackArrow = styled__default['default'](Arrow)`
+  transform: rotate(90deg);
+`;
+const ForwardArrow = styled__default['default'](Arrow)`
+  transform: rotate(-90deg);
+`;
+const DayPickerNavBar = ({
+  month,
+  onPreviousClick,
+  onNextClick,
+  locale
+}) => /* @__PURE__ */ React.createElement(NavBarWrapper, null, /* @__PURE__ */ React.createElement(NavButton, {
+  onClick: () => onPreviousClick()
+}, /* @__PURE__ */ React.createElement(BackArrow, {
+  title: "prev-month"
+})), /* @__PURE__ */ React.createElement(NavTitle, {
+  as: "h3"
+}, components_DayPicker_localeUtils.formatMonthTitle(month, locale)), /* @__PURE__ */ React.createElement(NavButton, {
+  onClick: () => onNextClick()
+}, /* @__PURE__ */ React.createElement(ForwardArrow, {
+  title: "next-month"
+})));
+
+exports['default'] = DayPickerNavBar;

package/cjs/components/DayPicker/index.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react-day-picker/lib/style.css');
+var ReactDayPicker = require('react-day-picker');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+var components_DayPicker_DayPickerNavBar = require('./DayPickerNavBar.js');
+var components_DayPicker_localeUtils = require('./localeUtils.js');
+require('../Icons/Arrow.js');
+require('../../typography/BodyText/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ReactDayPicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDayPicker);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const DayPickerWrapper = styled__default['default'].div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  .DayPicker-wrapper {
+    &:focus {
+      outline: none;
+    }
+  }
+  .DayPicker-Weekday {
+    color: ${({ theme: theme2 }) => theme2.colors.gray.light1};
+  }
+  .DayPicker-Day {
+    font-size: 12px;
+    padding: 14px;
+    font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
+    color: ${({ theme: theme2 }) => theme2.colors.text.dark};
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 4px ${theme['default'].colors.gray.dark3};
+    }
+    &:not(.DayPicker--interactionDisabled):not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) {
+      &:focus {
+        box-shadow: 0 0 4px ${theme['default'].colors.gray.dark3};
+      }
+      &:hover {
+        background-color: rgba(253, 171, 74, 0.25);
+      }
+    }
+    &.DayPicker-Day--disabled {
+      color: ${theme['default'].colors.gray.dark3};
+    }
+  }
+`;
+const modifiersStyles = {
+  selected: {
+    color: theme['default'].colors.text.light,
+    background: theme['default'].colors.primary.main,
+    fontWeight: 700
+  }
+};
+const DayPicker = ({ locale = "sv", ...props }) => {
+  return /* @__PURE__ */ React.createElement(DayPickerWrapper, null, /* @__PURE__ */ React.createElement(ReactDayPicker__default['default'], {
+    ...props,
+    locale,
+    months: components_DayPicker_localeUtils.MONTHS[locale],
+    weekdaysLong: components_DayPicker_localeUtils.WEEKDAYS_LONG[locale],
+    weekdaysShort: components_DayPicker_localeUtils.WEEKDAYS_SHORT[locale],
+    firstDayOfWeek: components_DayPicker_localeUtils.FIRST_DAY_OF_THE_WEEK[locale],
+    navbarElement: (navProps) => /* @__PURE__ */ React.createElement(components_DayPicker_DayPickerNavBar['default'], {
+      ...navProps,
+      locale
+    }),
+    captionElement: /* @__PURE__ */ React.createElement("div", null),
+    modifiersStyles
+  }));
+};
+
+exports.DayPicker = DayPicker;
+exports['default'] = DayPicker;

package/cjs/components/DayPicker/localeUtils.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MONTHS = {
+  sv: [
+    "Januari",
+    "Februari",
+    "Mars",
+    "April",
+    "Maj",
+    "Juni",
+    "Juli",
+    "Augusti",
+    "September",
+    "Oktober",
+    "November",
+    "December"
+  ],
+  en: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ]
+};
+const WEEKDAYS_LONG = {
+  sv: ["S\xF6ndag", "M\xE5ndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "L\xF6rdag"],
+  en: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ]
+};
+const WEEKDAYS_SHORT = {
+  sv: ["S\xF6", "M\xE5", "Ti", "On", "To", "Fr", "L\xF6"],
+  en: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+};
+const FIRST_DAY_OF_THE_WEEK = { sv: 1, en: 1 };
+const formatMonthTitle = (d, locale = "sv") => {
+  return `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`;
+};
+
+exports.FIRST_DAY_OF_THE_WEEK = FIRST_DAY_OF_THE_WEEK;
+exports.MONTHS = MONTHS;
+exports.WEEKDAYS_LONG = WEEKDAYS_LONG;
+exports.WEEKDAYS_SHORT = WEEKDAYS_SHORT;
+exports.formatMonthTitle = formatMonthTitle;

package/cjs/components/Dialog/index.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var shared_mediaQueries = require('../../shared/media-queries.js');
+var components_Button_index = require('../Button/index.js');
+var components_Modal_index = require('../Modal/index.js');
+var typography_Heading_index = require('../../typography/Heading/index.js');
+require('../../theme.js');
+require('../Spinner/index.js');
+require('../../typography/ButtonText/index.js');
+require('react');
+require('react-dom');
+require('react-transition-group');
+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 Content = styled__default['default'].div`
+  padding-top: 1rem;
+`;
+const Header = styled__default['default'].div`
+  top: 20px;
+  left: 32px;
+  position: absolute;
+`;
+const Title = styled__default['default'](typography_Heading_index.TinyTitle)`
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  margin: 0;
+`;
+const ButtonWrapper = styled__default['default'].div`
+  display: flex;
+  justify-content: space-between;
+  ${shared_mediaQueries.mq("tablet")} {
+    justify-content: flex-start;
+  }
+  overflow-x: hidden;
+`;
+const SecondaryActionButton = styled__default['default'](components_Button_index.Button)`
+  overflow-x: hidden;
+  margin-right: 2rem;
+  justify-content: center;
+  width: 100%;
+  max-width: 110px;
+`;
+const PrimaryActionButton = styled__default['default'](components_Button_index.Button)`
+  justify-content: center;
+  width: 100%;
+  max-width: 245px;
+`;
+const Dialog = ({
+  isOpen,
+  title,
+  children,
+  modalStyles,
+  titleStyles,
+  primaryButtonText,
+  primaryButtonStyles,
+  secondaryButtonStyles,
+  secondaryButtonText,
+  primaryButtonAction,
+  secondaryButtonAction,
+  onClose
+}) => {
+  return /* @__PURE__ */ React.createElement(components_Modal_index.Modal, {
+    contentStyles: modalStyles,
+    isOpen,
+    onClose
+  }, title && /* @__PURE__ */ React.createElement(Header, null, /* @__PURE__ */ React.createElement(Title, {
+    style: titleStyles
+  }, title)), /* @__PURE__ */ React.createElement(Content, null, children), /* @__PURE__ */ React.createElement(ButtonWrapper, null, secondaryButtonAction && /* @__PURE__ */ React.createElement(SecondaryActionButton, {
+    style: secondaryButtonStyles,
+    onClick: secondaryButtonAction,
+    variant: "outline",
+    color: "neutral"
+  }, secondaryButtonText), primaryButtonAction && /* @__PURE__ */ React.createElement(PrimaryActionButton, {
+    style: primaryButtonStyles,
+    onClick: primaryButtonAction,
+    variant: "solid",
+    color: "success"
+  }, primaryButtonText)));
+};
+
+exports.Dialog = Dialog;
+exports['default'] = Dialog;

package/cjs/components/ErrorMessage/index.js

@@ -0,0 +1,31 @@
+'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 ErrorContainer = styled__default['default'].div`
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  background: ${({ theme }) => theme.colors.error.main};
+  color: white;
+  border-radius: 0.25rem;
+  font-size: 13px;
+  padding: 10px;
+  ${({ centered }) => centered && `text-align: center;`}
+`;
+const ErrorMessage = ({
+  children,
+  centered,
+  ...props
+}) => /* @__PURE__ */ React.createElement(ErrorContainer, {
+  centered,
+  ...props
+}, children);
+
+exports.ErrorMessage = ErrorMessage;
+exports['default'] = ErrorMessage;

package/cjs/components/FieldLabel.js

@@ -0,0 +1,59 @@
+'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 activePadding = "0.5rem";
+const activeStyles = (translateY) => styled.css`
+  background-color: ${(props) => props.theme.colors.background.light};
+  transform: scale(0.75) translateY(${translateY});
+  transform-origin: 0 0;
+  padding: 0 ${activePadding};
+  left: ${activePadding};
+`;
+const focusStyles = styled.css`
+  color: ${(props) => props.theme.colors.text.dark};
+`;
+const disabledStyles = styled.css`
+  color: ${(props) => props.theme.colors.gray.light1};
+  background-color: ${(props) => props.theme.colors.background.light};
+`;
+const errorStyles = styled.css`
+  color: ${(props) => props.theme.colors.error.main};
+`;
+const centerStyles = styled.css`
+  text-align: center;
+  width: 100%;
+  left: 0;
+`;
+const Label = styled__default['default'].div`
+  font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  top: ${(props) => props.height ? `${props.height}rem` : "0.9rem"};
+
+  /* Left padding on input + one character size */
+  left: calc(0.75rem + 2px);
+  transition: 150ms;
+
+  /* Text styles */
+  height: 16px;
+  line-height: 16px;
+  font-size: 16px;
+
+  color: ${(props) => props.theme.colors.gray.dark1};
+
+  ${(props) => props.centered && centerStyles}
+  ${(props) => (props.hasValue || props.isFocused) && activeStyles(props.height ? `-${(props.height + 0.25) * 1.35}rem` : "-1.75rem")}
+  ${(props) => props.isFocused && focusStyles}
+  ${(props) => props.disabled && disabledStyles}
+  ${(props) => props.hasError && errorStyles}
+`;
+
+exports.Label = Label;

package/cjs/components/Header/Hamburger.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 IconWrapper = styled__default['default'].button`
+  appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  outline: none;
+  display: flex;
+  align-items: center;
+  margin-right: 1.5rem;
+  margin-left: auto;
+  ${shared_mediaQueries.mq("laptop")} {
+    display: none;
+  }
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: ${({ theme }) => theme.colors.text.dark};
+  }
+  span {
+    display: none;
+    font-family: ${({ theme }) => theme.typography.fontBaseFamily};
+    font-weight: ${({ theme }) => theme.typography.fontBaseBoldWeight};
+    font-size: 1rem;
+    margin-right: 0.75rem;
+
+    ${shared_mediaQueries.mq("tablet")} {
+      display: inline;
+    }
+  }
+`;
+const Hamburger = ({ onClick = () => {
+}, text }) => /* @__PURE__ */ React.createElement(IconWrapper, {
+  onClick
+}, /* @__PURE__ */ React.createElement("span", null, text), /* @__PURE__ */ React.createElement("svg", null, /* @__PURE__ */ React.createElement("symbol", {
+  id: "icon-hamburger",
+  viewBox: "0 0 16 12"
+}, /* @__PURE__ */ React.createElement("path", {
+  d: "M0 0h16v2H0zm0 5h16v2H0zm0 5h16v2H0z"
+})), /* @__PURE__ */ React.createElement("use", {
+  xlinkHref: "#icon-hamburger"
+})));
+
+exports['default'] = Hamburger;

package/cjs/components/Header/Link.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var shared_mediaQueries = require('../../shared/media-queries.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 LinkItem = styled__default['default'].li`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeRegularWeight};
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  &:nth-child(n + 4) {
+    display: none;
+  }
+
+  ${shared_mediaQueries.mq("laptop")} {
+    &:nth-child(n + 4) {
+      display: inherit;
+    }
+  }
+`;
+const CommonLink = styled__default['default'].a`
+  border-radius: 0.25rem;
+  padding: 0.75rem 1.5rem;
+  transition: 200ms;
+  color: ${theme['default'].colors.text.dark};
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    color: ${theme['default'].colors.primary.main};
+    background: ${theme['default'].colors.gray.light4};
+  }
+`;
+const Link = ({ to, component, text, ...rest }) => /* @__PURE__ */ React.createElement(LinkItem, null, component || /* @__PURE__ */ React.createElement(CommonLink, {
+  href: to,
+  ...rest
+}, text));
+
+exports['default'] = Link;

package/cjs/components/Header/index.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var shared_mediaQueries = require('../../shared/media-queries.js');
+var theme = require('../../theme.js');
+var components_Logo_index = require('../Logo/index.js');
+var components_Header_Hamburger = require('./Hamburger.js');
+var components_Header_Link = require('./Link.js');
+require('../Logo/LogoSv.js');
+require('../Logo/LogoEn.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const LogoWrapper = styled__default['default'].a`
+  cursor: pointer;
+  padding: 0 0.625rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${theme['default'].colors.background.light};
+
+  ${shared_mediaQueries.mq("tablet")} {
+    display: block;
+    width: auto;
+    padding: 0 1.5rem 0 0;
+  }
+`;
+const HeaderContainer = styled__default['default'].nav`
+  width: 100%;
+  z-index: 17;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: ${theme['default'].colors.text.dark};
+  background-color: ${theme['default'].colors.background.light};
+  transition: 300ms;
+`;
+const HeaderContent = styled__default['default'].div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${theme['default'].colors.background.gray};
+
+  ${shared_mediaQueries.mq("tablet")} {
+    background-color: ${theme['default'].colors.background.light};
+    flex-direction: row;
+    padding: 0em 1.5em;
+  }
+`;
+const MainContent = styled__default['default'].div`
+  display: flex;
+  width: 100%;
+`;
+const PrimaryLinks = styled__default['default'].ul`
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+
+  ${shared_mediaQueries.mq("tablet")} {
+    justify-content: flex-start;
+    padding: 0.5em 0;
+    display: flex;
+    padding: 0;
+    flex: 1;
+  }
+`;
+const SecondaryLinks = styled__default['default'].ul`
+  display: none;
+
+  ${shared_mediaQueries.mq("laptop")} {
+    padding: 0.5em 0;
+    display: flex;
+    padding: 0;
+  }
+`;
+const Header = ({
+  locale,
+  primaryLinks,
+  secondaryLinks,
+  menuIconText,
+  onMenuClick,
+  onHeaderClick,
+  forwardRef,
+  css = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(HeaderContainer, {
+    css,
+    ...props,
+    ref: forwardRef
+  }, /* @__PURE__ */ React.createElement(HeaderContent, null, /* @__PURE__ */ React.createElement(LogoWrapper, {
+    onClick: onHeaderClick
+  }, /* @__PURE__ */ React.createElement(components_Logo_index.Logo, {
+    locale
+  })), /* @__PURE__ */ React.createElement(MainContent, null, /* @__PURE__ */ React.createElement(PrimaryLinks, null, primaryLinks.map((link, index) => /* @__PURE__ */ React.createElement(components_Header_Link['default'], {
+    key: link.text || index,
+    ...link
+  }))), /* @__PURE__ */ React.createElement(components_Header_Hamburger['default'], {
+    text: menuIconText,
+    onClick: onMenuClick
+  })), /* @__PURE__ */ React.createElement(SecondaryLinks, null, secondaryLinks.map((link, index) => /* @__PURE__ */ React.createElement(components_Header_Link['default'], {
+    key: link.text || index,
+    ...link
+  })))));
+};
+
+exports.Header = Header;
+exports['default'] = Header;

package/cjs/components/Hero/index.js

@@ -0,0 +1,65 @@
+'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 Root = styled__default['default'].div`
+  position: relative;
+  height: 60vh;
+  max-height: 600px;
+  background-color: ${theme['default'].colors.primary.main};
+  background-size: cover;
+`;
+const Content = styled__default['default'].div`
+  position: relative;
+  display: flex;
+  padding: 50px;
+  z-index: 1;
+`;
+const Video = styled__default['default'].iframe`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;
+const Image = styled__default['default'].img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  background-color: ${theme['default'].colors.primary.main};
+`;
+function Hero(props) {
+  const { imageProps, containerStyle, videoProps, children } = props;
+  const imageStyle = {
+    objectPosition: `${(imageProps == null ? void 0 : imageProps.x) ? imageProps.x : "50%"} ${(imageProps == null ? void 0 : imageProps.y) ? imageProps.y : "50%"}`
+  };
+  return /* @__PURE__ */ React.createElement(Root, {
+    style: containerStyle
+  }, videoProps ? /* @__PURE__ */ React.createElement(Video, {
+    "data-testid": "hero-video",
+    title: "video-frame",
+    src: videoProps.src,
+    width: "100%",
+    height: "100%",
+    frameBorder: "0",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true
+  }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Image, {
+    src: imageProps == null ? void 0 : imageProps.src,
+    alt: "Hero background",
+    style: imageStyle
+  }), /* @__PURE__ */ React.createElement(Content, null, children)));
+}
+
+exports.Hero = Hero;
+exports['default'] = Hero;