@kvdbil/components 3.3.3 → 3.3.5-2

package/esm/components/Button/index.js

@@ -0,0 +1,161 @@
+import styled, { css } from 'styled-components';
+import theme from '../../theme.js';
+import Spinner from '../Spinner/index.js';
+import { BasicButtonTextStyle, ButtonRegularTextStyle, ButtonLargeTextStyle, ButtonSmallTextStyle } from '../../typography/ButtonText/index.js';
+
+const getFontStyles = (size) => {
+  switch (size) {
+    case "smaller":
+      return ButtonSmallTextStyle;
+    case "small":
+      return ButtonRegularTextStyle;
+    case "regular":
+      return ButtonRegularTextStyle;
+    case "large":
+      return ButtonLargeTextStyle;
+    default:
+      return ButtonRegularTextStyle;
+  }
+};
+const smallerSizeStyles = (isLoading) => `
+  min-width: 76px;
+  padding: ${isLoading ? "7px 10px 5.5px" : "10px 10px 8px"};
+`;
+const smallSizeStyles = (isLoading) => `
+  min-width: 76px;
+  padding: ${isLoading ? "8px 10px 6px" : "11px 10px 9px"};
+`;
+const regularSizeStyles = (isLoading) => `
+  min-width: 250px;
+  padding: ${isLoading ? "7px 22px 5px" : "15px 22px 13px"};
+`;
+const largeSizeStyles = (isLoading) => `
+  min-width: 250px;
+  padding: ${isLoading ? "9px 22px 6px" : "21px 22px 19px"};
+`;
+const solidColorStyles = (theme2) => (color) => `
+  color: white;
+  border-color: ${theme2.colors[color].main};
+  background-color: ${theme2.colors[color].main};
+
+  :hover {
+    border-color: ${theme2.colors[color].light};
+    background-color: ${theme2.colors[color].light};
+  }
+
+  :active {
+    border-color: ${theme2.colors[color].dark};
+    background-color: ${theme2.colors[color].dark}
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme2.colors[color].dark};
+  }
+`;
+const outlineColorStyles = (theme2) => (color) => `
+  color: ${theme2.colors[color].main};
+  border-color: ${theme2.colors[color].main};
+  background-color: transparent;
+
+  :hover {
+      color: white;
+      border-color: ${theme2.colors[color].light};
+      background-color: ${theme2.colors[color].light};
+  }
+
+  :active {
+    color: white;
+    border-color: ${theme2.colors[color].dark};
+    background-color: ${theme2.colors[color].dark};
+  }
+
+  :focus {
+    box-shadow: 0px 0px 0px 1px #fff, 0px 0px 0px 2px ${theme2.colors[color].dark};
+  }
+`;
+const flatColorStyles = (theme2) => (color) => `
+  color: ${theme2.colors[color].main};
+  border-color: transparent;
+  background-color: transparent;
+
+  :hover {
+    color: ${theme2.colors[color].dark};
+  }
+
+  :active {
+    color: ${theme2.colors[color].light};
+  }
+`;
+const disabledCommonColorStyles = (theme2) => `
+  background-color: ${theme2.colors.gray.light4};
+  border-color: ${theme2.colors.gray.light4};
+  color: ${theme2.colors.gray.light1};
+  cursor: not-allowed;
+`;
+const disabledFlatColorStyles = (theme2) => `
+  border-color: transparent;
+  background-color: transparent;
+  color: ${theme2.colors.gray.light1};
+  cursor: not-allowed;
+`;
+const Root = styled.button`
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  white-space: nowrap;
+  border: 2px solid transparent;
+  border-radius: 3px;
+  width: ${({ fullWidth }) => fullWidth && "100%"};
+
+  ${BasicButtonTextStyle}
+  ${({ size }) => getFontStyles(size)}
+  ${({ size, isLoading }) => css`
+    ${size === "smaller" && smallerSizeStyles(isLoading)}
+    ${size === "small" && smallSizeStyles(isLoading)}
+    ${size === "regular" && regularSizeStyles(isLoading)}
+    ${size === "large" && largeSizeStyles(isLoading)}
+  `}
+  background-color: transparent;
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
+  ${({ variant, color, disabled, theme: theme2 }) => css`
+    ${!disabled && variant === "solid" && solidColorStyles(theme2)(color)}
+    ${!disabled && variant === "outline" && outlineColorStyles(theme2)(color)}
+    ${!disabled && variant === "flat" && flatColorStyles(theme2)(color)}
+    ${disabled && variant !== "flat" && disabledCommonColorStyles(theme2)}
+    ${disabled && variant === "flat" && disabledFlatColorStyles(theme2)}
+  `}
+`;
+const LoadingSpinner = styled(Spinner)``;
+const spinnerSizes = {
+  smaller: 1,
+  small: 1,
+  regular: 1.5,
+  large: 1.75
+};
+const Button = ({
+  size = "small",
+  color = "primary",
+  variant = "solid",
+  fullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(Root, {
+    ...props,
+    color,
+    disabled: isDisabled || isLoading,
+    fullWidth,
+    theme,
+    variant,
+    size,
+    isLoading
+  }, isLoading ? /* @__PURE__ */ React.createElement(LoadingSpinner, {
+    color: "neutral",
+    size: spinnerSizes[size]
+  }) : children);
+};
+
+export { Button, Button as default };

package/esm/components/Card/index.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import theme from '../../theme.js';
+
+const CardWrapper = styled.div`
+  background: ${theme.colors.background.light};
+  ${({ boxShadow }) => boxShadow && `box-shadow: ${boxShadow};`}
+  ${({ boxShadow }) => !boxShadow && `box-shadow: 0 2px 4px rgba(0, 0, 0, 10%), 0 2px 4px rgba(0, 0, 0, 9%),
+    0 1px 5px rgba(0, 0, 0, 15%);`}
+  border-radius: 0 0 3px 3px;
+  ${({ topBorder }) => topBorder && `border-top: 4px solid ${topBorder};`}
+`;
+const Card = ({ ...props }) => {
+  return /* @__PURE__ */ React.createElement(CardWrapper, {
+    topBorder: props.topBorder,
+    boxShadow: props.boxShadow
+  }, props.children);
+};
+
+export { Card, Card as default };

package/esm/components/CheckBox/index.js

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components';
+import { generateNameHash } from '../../shared/helpers.js';
+import theme from '../../theme.js';
+import IconButton from '../IconButton.js';
+import CheckIcon from '../Icons/CheckIcon.js';
+
+const regularSize = css`
+  width: 24px;
+  height: 24px;
+
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+const largeSize = css`
+  width: 32px;
+  height: 32px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const sizes = {
+  regular: regularSize,
+  large: largeSize
+};
+const disabledStyle = css`
+  cursor: default;
+  border: 2px solid ${theme.colors.gray.light1};
+`;
+const checkedStyle = (color) => css`
+  svg {
+    fill: #fefefe;
+    opacity: 1;
+  }
+
+  :hover {
+  }
+
+  background: ${theme.colors[color].main};
+  border: 2px solid ${theme.colors[color].main};
+`;
+const checkedDisabledStyle = css`
+  background: ${theme.colors.gray.light1};
+`;
+const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+  display: none;
+`;
+const CheckboxWrapper = styled.label`
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  border: 2px solid ${theme.colors.gray.light1};
+  border-radius: 3px;
+
+  ${(props) => sizes[props.size]};
+
+  svg {
+    opacity: 0;
+  }
+
+  ${(props) => props.isChecked && checkedStyle(props.color)};
+  ${(props) => props.isDisabled && disabledStyle};
+
+  ${(props) => props.isChecked && props.isDisabled && checkedDisabledStyle};
+`;
+const CheckBox = ({
+  name = generateNameHash("check-box"),
+  isDisabled = false,
+  size = "regular",
+  checked,
+  color = "secondary",
+  onClick,
+  ...rest
+}) => /* @__PURE__ */ React.createElement(IconButton, {
+  onClick,
+  isActive: checked,
+  isDisabled,
+  color
+}, /* @__PURE__ */ React.createElement(HiddenCheckbox, {
+  ...rest,
+  "data-validate": "checked",
+  name,
+  id: name,
+  disabled: isDisabled
+}), /* @__PURE__ */ React.createElement(CheckboxWrapper, {
+  htmlFor: name,
+  size,
+  color,
+  isChecked: checked,
+  isDisabled
+}, /* @__PURE__ */ React.createElement(CheckIcon, null)));
+
+export { CheckBox, CheckBox as default };

package/esm/components/Chip/index.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { fadedColor } from '../../shared/helpers.js';
+import theme from '../../theme.js';
+
+const getBackgroundColor = ({
+  isDisabled,
+  isActive,
+  activeColor
+}) => {
+  if (isActive && isDisabled) {
+    return fadedColor(theme.colors[activeColor].main, 0.5);
+  }
+  if (isDisabled) {
+    return theme.colors.gray.light4;
+  }
+  if (isActive) {
+    return theme.colors[activeColor].main;
+  }
+  return "transparent";
+};
+const getColor = ({ isActive, isDisabled }) => {
+  if (isActive || isActive && isDisabled) {
+    return theme.colors.text.light;
+  }
+  if (isDisabled) {
+    return theme.colors.text.disabled;
+  }
+  return theme.colors.text.dark;
+};
+const getFontSize = (size = "smaller") => {
+  const sizes = {
+    smaller: "0.8125rem",
+    small: "1rem",
+    regular: "1rem",
+    large: "1.25rem"
+  };
+  return sizes[size];
+};
+const Item = styled.div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontAlternativeFamily};
+  font-size: ${({ size }) => getFontSize(size)};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  display: inline-block;
+  cursor: ${({ isDisabled }) => !isDisabled ? "pointer" : "auto"};
+  align-items: center;
+  background: ${getBackgroundColor};
+  color: ${getColor};
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ isActive, isDisabled }) => !isActive && !isDisabled ? theme.colors.background.dark : "transparent"};
+  border-radius: 1.293rem;
+`;
+const ContentWrapper = styled.span`
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+const Chip = ({
+  activeColor = "primary",
+  children,
+  component = "div",
+  isActive,
+  isDisabled,
+  onClick,
+  size,
+  ...props
+}) => {
+  const handleClick = (e) => {
+    if (!isDisabled && onClick) {
+      onClick(e);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Item, {
+    ...props,
+    as: component,
+    activeColor,
+    isDisabled,
+    isActive,
+    size
+  }, /* @__PURE__ */ React.createElement(ContentWrapper, {
+    onClick: handleClick
+  }, children));
+};
+
+export { Chip, Chip as default };

package/esm/components/DayPicker/DayPickerNavBar.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import Arrow$1 from '../Icons/Arrow.js';
+import theme from '../../theme.js';
+import { BodyText } from '../../typography/BodyText/index.js';
+import { formatMonthTitle } from './localeUtils.js';
+
+const NavBarWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+const NavTitle = styled(BodyText)`
+  color: ${theme.colors.text.dark};
+`;
+const NavButton = styled.button`
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  display: flex;
+  align-items: center;
+`;
+const Arrow = styled(Arrow$1)`
+  width: 16px;
+  height: 16px;
+  fill: ${theme.colors.gray.dark3};
+`;
+const BackArrow = styled(Arrow)`
+  transform: rotate(90deg);
+`;
+const ForwardArrow = styled(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"
+}, formatMonthTitle(month, locale)), /* @__PURE__ */ React.createElement(NavButton, {
+  onClick: () => onNextClick()
+}, /* @__PURE__ */ React.createElement(ForwardArrow, {
+  title: "next-month"
+})));
+
+export { DayPickerNavBar as default };

package/esm/components/DayPicker/index.js

@@ -0,0 +1,66 @@
+import 'react-day-picker/lib/style.css';
+import ReactDayPicker from 'react-day-picker';
+import styled from 'styled-components';
+import theme from '../../theme.js';
+import DayPickerNavBar from './DayPickerNavBar.js';
+import { MONTHS, WEEKDAYS_LONG, WEEKDAYS_SHORT, FIRST_DAY_OF_THE_WEEK } from './localeUtils.js';
+import '../Icons/Arrow.js';
+import '../../typography/BodyText/index.js';
+
+const DayPickerWrapper = styled.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.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.colors.gray.dark3};
+      }
+      &:hover {
+        background-color: rgba(253, 171, 74, 0.25);
+      }
+    }
+    &.DayPicker-Day--disabled {
+      color: ${theme.colors.gray.dark3};
+    }
+  }
+`;
+const modifiersStyles = {
+  selected: {
+    color: theme.colors.text.light,
+    background: theme.colors.primary.main,
+    fontWeight: 700
+  }
+};
+const DayPicker = ({ locale = "sv", ...props }) => {
+  return /* @__PURE__ */ React.createElement(DayPickerWrapper, null, /* @__PURE__ */ React.createElement(ReactDayPicker, {
+    ...props,
+    locale,
+    months: MONTHS[locale],
+    weekdaysLong: WEEKDAYS_LONG[locale],
+    weekdaysShort: WEEKDAYS_SHORT[locale],
+    firstDayOfWeek: FIRST_DAY_OF_THE_WEEK[locale],
+    navbarElement: (navProps) => /* @__PURE__ */ React.createElement(DayPickerNavBar, {
+      ...navProps,
+      locale
+    }),
+    captionElement: /* @__PURE__ */ React.createElement("div", null),
+    modifiersStyles
+  }));
+};
+
+export { DayPicker, DayPicker as default };

package/esm/components/DayPicker/localeUtils.js

@@ -0,0 +1,52 @@
+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()}`;
+};
+
+export { FIRST_DAY_OF_THE_WEEK, MONTHS, WEEKDAYS_LONG, WEEKDAYS_SHORT, formatMonthTitle };

package/esm/components/Dialog/index.js

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import { mq } from '../../shared/media-queries.js';
+import { Button } from '../Button/index.js';
+import { Modal } from '../Modal/index.js';
+import { TinyTitle } from '../../typography/Heading/index.js';
+import '../../theme.js';
+import '../Spinner/index.js';
+import '../../typography/ButtonText/index.js';
+import 'react';
+import 'react-dom';
+import 'react-transition-group';
+import '../Icons/Close.js';
+
+const Content = styled.div`
+  padding-top: 1rem;
+`;
+const Header = styled.div`
+  top: 20px;
+  left: 32px;
+  position: absolute;
+`;
+const Title = styled(TinyTitle)`
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  margin: 0;
+`;
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  ${mq("tablet")} {
+    justify-content: flex-start;
+  }
+  overflow-x: hidden;
+`;
+const SecondaryActionButton = styled(Button)`
+  overflow-x: hidden;
+  margin-right: 2rem;
+  justify-content: center;
+  width: 100%;
+  max-width: 110px;
+`;
+const PrimaryActionButton = styled(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(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)));
+};
+
+export { Dialog, Dialog as default };

package/esm/components/ErrorMessage/index.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+const ErrorContainer = styled.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);
+
+export { ErrorMessage, ErrorMessage as default };

package/esm/components/FieldLabel.js

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+
+const activePadding = "0.5rem";
+const activeStyles = (translateY) => 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 = css`
+  color: ${(props) => props.theme.colors.text.dark};
+`;
+const disabledStyles = css`
+  color: ${(props) => props.theme.colors.gray.light1};
+  background-color: ${(props) => props.theme.colors.background.light};
+`;
+const errorStyles = css`
+  color: ${(props) => props.theme.colors.error.main};
+`;
+const centerStyles = css`
+  text-align: center;
+  width: 100%;
+  left: 0;
+`;
+const Label = styled.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}
+`;
+
+export { Label };