@kvdbil/components 3.3.3 → 3.3.5-2

package/cjs/components/Stepper/index.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var theme = require('../../theme.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`
+  min-height: 4rem;
+`;
+const Line = styled__default['default'].div`
+  margin: auto;
+  width: 2px;
+  height: 100%;
+  background-color: ${theme['default'].colors.primary.main};
+`;
+const Graphic = styled__default['default'].div`
+  margin-right: 0.75rem;
+`;
+const Step = styled__default['default'].div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  display: flex;
+  padding-bottom: 1rem;
+
+  &:last-child {
+    ${Line} {
+      display: none;
+    }
+  }
+`;
+const Circle = styled__default['default'].div`
+  width: 3rem;
+  height: 3rem;
+  border-radius: 3rem;
+
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${theme['default'].colors.primary.main};
+`;
+const CircleText = styled__default['default'](typography_Heading_index.Title)`
+  font-size: 1.5rem;
+  font-variant: lining-nums;
+`;
+const Stepper = ({ children, ...props }) => {
+  return /* @__PURE__ */ React.createElement(Container, {
+    ...props
+  }, children.map((step, index) => /* @__PURE__ */ React.createElement(Step, {
+    key: index
+  }, /* @__PURE__ */ React.createElement(Graphic, null, /* @__PURE__ */ React.createElement(Circle, null, /* @__PURE__ */ React.createElement(CircleText, null, index + 1)), /* @__PURE__ */ React.createElement(Line, null)), step)));
+};
+
+exports.Stepper = Stepper;

package/cjs/components/StepperAccordion/index.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$1 = require('react');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+var typography_Heading_index = require('../../typography/Heading/index.js');
+var components_Icons_CheckIcon = require('../Icons/CheckIcon.js');
+var components_Icons_Arrow = require('../Icons/Arrow.js');
+var shared_helpers = require('../../shared/helpers.js');
+var reactCollapse = require('react-collapse');
+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 DEFAULT_TRANSITION_TIME = "200ms";
+const Container = styled__default['default'].div`
+  .ReactCollapse--collapse {
+    transition: height ${DEFAULT_TRANSITION_TIME} ease-in-out;
+  }
+`;
+const HeaderExpandedProps = styled.css`
+  margin-top: 0.25rem;
+  transform: rotate(-180deg);
+`;
+const Header = styled__default['default'].div`
+  display: flex;
+  align-items: center;
+  height: 4rem;
+
+  color: ${(props) => props.isDisabled ? theme['default'].colors.text.disabled : theme['default'].colors.text.dark};
+`;
+const StyledTitle = styled__default['default'](typography_Heading_index.Title)`
+  margin: 0;
+`;
+const HeaderArrow = styled__default['default'](components_Icons_Arrow['default'])`
+  margin-left: auto;
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-top: -0.75rem;
+
+  fill: currentColor;
+
+  transition: ${DEFAULT_TRANSITION_TIME};
+  transform: rotate(0deg);
+  transform-origin: center;
+  ${(props) => props.isExpanded && HeaderExpandedProps};
+`;
+const CircleIsCompleteStyles = (color) => styled.css`
+  color: white;
+  background-color: ${theme['default'].colors[color].main};
+`;
+const CircleIsDisabledStyles = (isComplete, color) => styled.css`
+  fill: white;
+  border: 2px solid ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0.2)};
+
+  ${isComplete && `
+      border: 2px solid ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0)};
+      background-color: ${shared_helpers.fadedColor(theme['default'].colors[color].main, 0.5)};
+    `}
+`;
+const Circle = styled__default['default'].div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 1.25rem;
+  margin-right: 0.75rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  border: 2px solid ${(props) => theme['default'].colors[props.color].main};
+
+  svg {
+    fill: currentColor;
+    height: 1rem;
+    width: 1rem;
+
+    /* Kvd.se compatible stuff */
+    margin: 0;
+    top: inherit;
+    left: inherit;
+    font-size: inherit;
+  }
+
+  span {
+    font-variant: lining-nums;
+    margin-top: 0.1rem;
+  }
+
+  transition: background-color ${DEFAULT_TRANSITION_TIME};
+  ${(props) => props.isComplete && CircleIsCompleteStyles(props.color)};
+  ${(props) => props.isDisabled && CircleIsDisabledStyles(props.isComplete, props.color)};
+`;
+const StepperAccordion = (props) => {
+  const [isExpanded, setIsExpanded] = React$1.useState(props.isExpanded || false);
+  const toggleIsExpanded = React$1.useCallback(() => {
+    if (!props.isDisabled) {
+      setIsExpanded((previousValue) => !previousValue);
+    }
+  }, [props.isDisabled]);
+  React$1.useEffect(() => {
+    setIsExpanded(props.isExpanded || false);
+  }, [props.isDisabled, props.isExpanded]);
+  const hasSteps = props.step || props.step === 0;
+  const handleClick = (event) => {
+    const onClick = props.onClick || toggleIsExpanded;
+    if (!props.isDisabled) {
+      onClick(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Header, {
+    ...props,
+    onClick: handleClick,
+    isExpanded,
+    isDisabled: props.isDisabled || false
+  }, hasSteps && /* @__PURE__ */ React.createElement(Circle, {
+    isComplete: props.isComplete || false,
+    isDisabled: props.isDisabled || false,
+    color: props.color || "primary"
+  }, props.isComplete ? /* @__PURE__ */ React.createElement(components_Icons_CheckIcon['default'], null) : /* @__PURE__ */ React.createElement("span", null, props.step)), /* @__PURE__ */ React.createElement(StyledTitle, null, props.title), /* @__PURE__ */ React.createElement(HeaderArrow, {
+    isExpanded
+  })), /* @__PURE__ */ React.createElement(reactCollapse.Collapse, {
+    isOpened: isExpanded
+  }, props.children), props.closedChildren && props.closedChildren);
+};
+
+exports.StepperAccordion = StepperAccordion;
+exports['default'] = StepperAccordion;

package/cjs/components/Tabs/index.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$1 = require('react');
+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 TabsContainer = styled__default['default'].div`
+  display: inline-flex;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.gray.light4};
+`;
+const TabWrapper = styled__default['default'].div`
+  font-family: ${({ theme }) => theme.typography.fontAlternativeFamily};
+  font-weight: ${({ theme }) => theme.typography.fontAlternativeRegularWeight};
+  padding: 1em;
+  border-bottom: ${({ theme, isActive, activeColor }) => isActive ? `3px solid ${theme.colors[activeColor].main}` : "3px solid transparent"};
+  transition: color 0.3s ease, border 0.3s ease;
+  cursor: pointer;
+`;
+const Tab = ({
+  children,
+  isActive = false,
+  onClick,
+  activeColor = "primary"
+}) => {
+  return /* @__PURE__ */ React.createElement(TabWrapper, {
+    isActive,
+    onClick,
+    activeColor
+  }, children);
+};
+const Tabs = ({
+  activeIndex,
+  activeColor = "primary",
+  children,
+  onTabClick,
+  className
+}) => {
+  if (React$1.Children.count(children) <= 1) {
+    console.error("<Tabs /> component has too few children!");
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(TabsContainer, {
+    className
+  }, React$1.Children.map(children, (child, index) => {
+    if (!child) {
+      return null;
+    }
+    const onClick = child.props.onClick;
+    return /* @__PURE__ */ React.createElement(TabWrapper, {
+      ...child.props,
+      isActive: activeIndex === index,
+      activeColor,
+      onClick: (event) => {
+        onTabClick(index);
+        if (typeof onClick === "function") {
+          onClick(event);
+        }
+      },
+      as: child.type || "div"
+    }, child.props.children);
+  }));
+};
+
+exports.Tab = Tab;
+exports.Tabs = Tabs;
+exports['default'] = Tabs;

package/cjs/components/TextArea/index.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$1 = require('react');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+var components_FieldLabel = require('../FieldLabel.js');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const disabledStyles = styled.css`
+  border: 1px solid ${theme['default'].colors.gray.light1};
+  color: ${theme['default'].colors.gray.dark1};
+  fill: ${theme['default'].colors.gray.light1};
+`;
+const errorStyles = styled.css`
+  border: 1px solid ${theme['default'].colors.error.main};
+`;
+const focusStyles = styled.css`
+  color: ${theme['default'].colors.text.dark};
+  border: 1px solid ${theme['default'].colors.text.dark};
+  fill: ${theme['default'].colors.text.dark};
+`;
+const TextAreaWrapper = styled__default['default'].div`
+  position: relative;
+  padding: 0;
+  display: inline-block;
+`;
+const InputWrapper = styled__default['default'].div`
+  display: inline-black;
+
+  color: ${theme['default'].colors.gray.light1};
+  fill: ${theme['default'].colors.gray.light1};
+  background-color: ${theme['default'].colors.background.light};
+
+  border: 1px solid ${theme['default'].colors.gray.light1};
+  border-radius: 0.25em;
+  transition: all 150ms;
+
+  padding: 0.7rem 0.75rem;
+
+  ${({ hasError, isFocused }) => !hasError && isFocused && focusStyles}
+  ${({ disabled }) => disabled && disabledStyles}
+  ${({ hasError }) => hasError && errorStyles}
+  ${({ centered }) => centered && `text-align: center;`}
+`;
+const TextAreaInput = styled__default['default'].textarea`
+  ${typography_BodyText_index.BodyTextStyle}
+
+  width: 100%;
+  cursor: text;
+  outline: none;
+  border: none;
+  background-color: transparent;
+
+  ${({ resize }) => !resize && "resize: none;"}
+`;
+const Suffix = styled__default['default'].div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+`;
+const HelperText = styled__default['default'].span`
+  display: block;
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  font-size: 0.81rem;
+
+  margin-top: 0.25rem;
+  margin-left: 0.85rem;
+
+  color: ${({ hasError }) => hasError ? theme['default'].colors.error.main : theme['default'].colors.text.dark};
+
+  ${({ centered }) => centered && `width: 100%; text-align: center; display: block;`}
+`;
+const TextArea = ({
+  placeholder = "",
+  isDisabled = false,
+  centered = false,
+  hasError = false,
+  className,
+  helperText,
+  label = "",
+  resize = true,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const hasValue = Boolean(props.value);
+  return /* @__PURE__ */ React.createElement(TextAreaWrapper, {
+    className
+  }, /* @__PURE__ */ React.createElement(InputWrapper, {
+    isFocused,
+    disabled: isDisabled,
+    centered,
+    hasError,
+    hasPlaceholder: !!placeholder
+  }, /* @__PURE__ */ React.createElement(TextAreaInput, {
+    ...props,
+    resize,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: isDisabled,
+    theme: theme['default'],
+    placeholder: label && !isFocused ? "" : placeholder
+  }), props.suffix && /* @__PURE__ */ React.createElement(Suffix, null, props.suffix)), label && /* @__PURE__ */ React.createElement(components_FieldLabel.Label, {
+    isFocused,
+    centered,
+    hasError,
+    hasValue,
+    disabled: isDisabled,
+    theme: theme['default']
+  }, label), helperText && /* @__PURE__ */ React.createElement(HelperText, {
+    centered,
+    hasError
+  }, helperText));
+};
+
+exports.TextArea = TextArea;
+exports['default'] = TextArea;

package/cjs/components/Textfield/index.js

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$1 = require('react');
+var styled = require('styled-components');
+var theme = require('../../theme.js');
+var components_FieldLabel = require('../FieldLabel.js');
+var typography_BodyText_index = require('../../typography/BodyText/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const disabledStyles = styled.css`
+  border: 1px solid ${theme['default'].colors.gray.light1};
+  color: ${theme['default'].colors.gray.dark1};
+  fill: ${theme['default'].colors.gray.light1};
+`;
+const errorStyles = styled.css`
+  border: 1px solid ${theme['default'].colors.error.main};
+`;
+const focusStyles = styled.css`
+  color: ${theme['default'].colors.text.dark};
+  border: 1px solid ${theme['default'].colors.text.dark};
+  fill: ${theme['default'].colors.text.dark};
+`;
+const TextFieldWrapper = styled__default['default'].div`
+  position: relative;
+  padding: 0;
+  display: block;
+`;
+const InputWrapper = styled__default['default'].div`
+  display: flex;
+  text-align: center;
+  align-items: center;
+
+  color: ${theme['default'].colors.gray.light1};
+  fill: ${theme['default'].colors.gray.light1};
+  background-color: ${theme['default'].colors.background.light};
+
+  border: 1px solid ${theme['default'].colors.gray.light1};
+  border-radius: 0.25em;
+  transition: all 150ms;
+
+  padding: 0.7rem 0.75rem 0.6rem;
+
+  ${({ hasError, isFocused }) => !hasError && isFocused && focusStyles}
+  ${({ disabled }) => disabled && disabledStyles}
+  ${({ hasError }) => hasError && errorStyles}
+  ${({ centered }) => centered && `text-align: center;`}
+`;
+const Input = styled__default['default'].input`
+  ${typography_BodyText_index.BodyTextStyle}
+  width: 100%;
+  cursor: text;
+  outline: none;
+  border: none;
+  background-color: transparent;
+`;
+const Suffix = styled__default['default'].div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  line-height: 0px;
+  margin-top: 2px;
+`;
+const HelperText = styled__default['default'].span`
+  ${typography_BodyText_index.CaptionStyle}
+  line-height: normal;
+  display: block;
+  margin-top: 0.25rem;
+  margin-left: 0.85rem;
+
+  color: ${({ hasError }) => hasError ? theme['default'].colors.error.main : theme['default'].colors.text.dark};
+
+  ${({ centered }) => centered && `width: 100%; text-align: center; display: block;`}
+`;
+const TextField = ({
+  placeholder = "",
+  isDisabled = false,
+  centered = false,
+  hasError = false,
+  className,
+  helperText,
+  label = "",
+  onBlur = () => null,
+  onFocus = () => null,
+  forwardRef,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = React$1.useState(false);
+  const hasValue = Boolean(props.value);
+  const handleFocus = (event) => {
+    setIsFocused(true);
+    onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsFocused(false);
+    onBlur(event);
+  };
+  return /* @__PURE__ */ React.createElement(TextFieldWrapper, {
+    className
+  }, /* @__PURE__ */ React.createElement(InputWrapper, {
+    isFocused,
+    disabled: isDisabled,
+    centered,
+    hasError,
+    hasPlaceholder: !!placeholder
+  }, /* @__PURE__ */ React.createElement(Input, {
+    ...props,
+    ref: forwardRef,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    disabled: isDisabled,
+    theme: theme['default'],
+    placeholder: label && !isFocused ? "" : placeholder
+  }), props.suffix && /* @__PURE__ */ React.createElement(Suffix, null, props.suffix)), label && /* @__PURE__ */ React.createElement(components_FieldLabel.Label, {
+    isFocused,
+    centered,
+    hasError,
+    hasValue,
+    disabled: isDisabled,
+    theme: theme['default']
+  }, label), helperText && /* @__PURE__ */ React.createElement(HelperText, {
+    centered,
+    hasError
+  }, helperText));
+};
+
+exports.TextField = TextField;
+exports['default'] = TextField;

package/cjs/components/TimePicker/index.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var components_Chip_index = require('../Chip/index.js');
+require('../../shared/helpers.js');
+require('../../theme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const TimeSlots = styled__default['default'].ul`
+  max-width: 20rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.625rem 0.75rem;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+`;
+const isCurrentTime = (currentItem, selectedTimes) => {
+  return Array.isArray(selectedTimes) ? Boolean(selectedTimes.find((t) => t.getTime() === currentItem.getTime())) : (selectedTimes == null ? void 0 : selectedTimes.getTime()) === currentItem.getTime();
+};
+const TimePicker = ({
+  timeSlots,
+  onTimeSlotClick,
+  selectedTimes,
+  disabledTimes,
+  ...props
+}) => /* @__PURE__ */ React.createElement(TimeSlots, {
+  ...props
+}, timeSlots.map(({ text, date }) => {
+  const isSelected = isCurrentTime(date, selectedTimes);
+  const isDisabled = isCurrentTime(date, disabledTimes);
+  return /* @__PURE__ */ React.createElement(components_Chip_index.Chip, {
+    component: "li",
+    "data-selected": isSelected,
+    "data-disabled": isDisabled,
+    isDisabled,
+    isActive: isSelected,
+    key: date.getTime(),
+    onClick: () => !isSelected && !isDisabled && onTimeSlotClick(date)
+  }, text);
+}));
+
+exports.TimePicker = TimePicker;
+exports['default'] = TimePicker;

package/cjs/components/TimePicker/testHelper.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const generateTimeSlots = (x) => {
+  const addHour = (h) => h * 60 * 60 * 1e3;
+  const startDate = new Date("2020/02/02");
+  const t = new Date(startDate);
+  return Array.from({ length: x }, (_, i) => {
+    const date = new Date(t.setTime(t.getDate() + addHour(i)));
+    const text = i < 10 ? `0${i + 1}:00` : `${i + 1}:00`;
+    return { date, text };
+  });
+};
+
+exports.generateTimeSlots = generateTimeSlots;

package/cjs/components/Toggle/index.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React$1 = require('react');
+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 Container = styled__default['default'].div`
+  display: flex;
+  position: relative;
+  border-top: ${({ theme: theme2 }) => `1px solid ${theme2.colors.gray.light6}`};
+  border-bottom: ${({ theme: theme2 }) => `1px solid ${theme2.colors.gray.light6}`};
+  padding: 4px;
+`;
+const Box = styled__default['default'].div`
+  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
+  font-weight: ${({ theme: theme2 }) => theme2.typography.fontBaseRegularWeight};
+  display: flex;
+  min-height: 4rem;
+  align-items: center;
+  transition: 150ms 50ms;
+  flex: 1;
+  z-index: 2;
+  position: relative;
+  cursor: pointer;
+
+  color: ${(props) => props.isActive ? theme['default'].colors.text.light : theme['default'].colors.text.dark};
+`;
+const Background = styled__default['default'].div`
+  z-index: 0;
+  background-color: ${(props) => theme['default'].colors[props.color].main};
+  position: absolute;
+
+  border-radius: 0.25rem;
+
+  top: 4px;
+  left: 4px;
+  width: calc(50% - 4px);
+  height: calc(100% - 8px);
+
+  transition: left 250ms ease-in-out;
+
+  ${(props) => props.active === "RIGHT" && `
+    left: calc(50%);
+  `}
+
+  ${(props) => !props.active && `display: none;`}
+`;
+const Toggle = ({ onChange, ...props }) => {
+  const [active, setActive] = React$1.useState(props.active);
+  React$1.useEffect(() => {
+    setActive(props.active);
+  }, [props.active]);
+  const handleLeftClick = () => {
+    setActive("LEFT");
+    onChange("LEFT");
+  };
+  const handleRightClick = () => {
+    setActive("RIGHT");
+    onChange("RIGHT");
+  };
+  return /* @__PURE__ */ React.createElement(Container, {
+    ...props
+  }, /* @__PURE__ */ React.createElement(Background, {
+    color: props.color,
+    active
+  }), /* @__PURE__ */ React.createElement(Box, {
+    onClick: handleLeftClick,
+    isActive: active === "LEFT",
+    color: props.color
+  }, props.left), /* @__PURE__ */ React.createElement(Box, {
+    onClick: handleRightClick,
+    isActive: active === "RIGHT",
+    color: props.color
+  }, props.right));
+};
+
+exports.Toggle = Toggle;