@kvdbil/components 3.3.5-0 → 3.3.5-5

package/components/Snackbar/index.js

@@ -1,146 +0,0 @@
-import { useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import theme from '../../theme.js';
-import CheckCircle from '../Icons/CheckCircle.js';
-import Close from '../Icons/Close.js';
-import ErrorCircle from '../Icons/ErrorCircle.js';
-import InfoCircle from '../Icons/InfoCircle.js';
-import { CSSTransition } from 'react-transition-group';
-
-const verticalStyles = {
-  top: css`
-    top: 0;
-  `,
-  bottom: css`
-    bottom: 0;
-  `
-};
-const horizontalStyles = {
-  right: css`
-    right: 0;
-  `,
-  center: css`
-    left: 50%;
-    transform: translate(-50%, 0);
-  `,
-  left: css`
-    left: 0;
-  `
-};
-const animationDuration = 200;
-const transitionClassName = "anim";
-const Container = styled.div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  position: fixed;
-  display: flex;
-  align-items: center;
-
-  line-height: 1rem;
-  margin: 1rem;
-
-  max-width: 630px;
-
-  border-radius: 0.4rem;
-  padding: 1.15rem 1.25rem;
-
-  font-weight: ${({ theme: theme2 }) => theme2.typography.fontBaseBoldWeight};
-  font-size: 0.875rem;
-
-  box-shadow: ${theme.elevations.elevation8};
-  background-color: ${(props) => props.color !== "none" ? theme.colors[props.color].main : theme.colors.background.light};
-  color: ${(props) => props.color !== "none" ? theme.colors.text.light : theme.colors.text.dark};
-
-  ${(props) => verticalStyles[props.origin.vertical || "bottom"]}
-  ${(props) => horizontalStyles[props.origin.horizontal || "left"]}
-
-  transition: opacity ${animationDuration}ms ease-in;
-
-  &.${transitionClassName}-enter {
-    opacity: 0;
-  }
-  &.${transitionClassName}-enter-active {
-    opacity: 1;
-  }
-  &.${transitionClassName}-exit {
-    opacity: 1;
-  }
-  &.${transitionClassName}-exit-active {
-    opacity: 0;
-  }
-`;
-const Icon = styled.div`
-  display: inline-flex;
-  margin: -0.25rem 0;
-  margin-right: 0.75rem;
-
-  ${(props) => props.type === "text" && "margin-right: 0;"}
-
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    fill: ${(props) => props.color !== "none" ? theme.colors.background.light : theme.colors.background.dark};
-  }
-`;
-const CloseIcon = styled(Icon)`
-  cursor: pointer;
-
-  /* Bigger click area */
-  padding: 0.25rem;
-
-  /* Negate padding */
-  margin: -0.25rem;
-  margin-left: 0.5rem;
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-`;
-const Message = styled.span`
-  flex: 1;
-`;
-const icons = {
-  error: /* @__PURE__ */ React.createElement(ErrorCircle, null),
-  success: /* @__PURE__ */ React.createElement(CheckCircle, null),
-  info: /* @__PURE__ */ React.createElement(InfoCircle, null),
-  text: ""
-};
-const Snackbar = ({
-  message,
-  color = "none",
-  type = "info",
-  action,
-  isOpen,
-  origin = {},
-  onClose = () => {
-  },
-  onExited = () => {
-  },
-  autoHideDuration = 4e3,
-  ...props
-}) => {
-  useEffect(() => {
-    const timeout = setTimeout(onClose, autoHideDuration);
-    return () => clearTimeout(timeout);
-  }, [autoHideDuration, onClose]);
-  return /* @__PURE__ */ React.createElement(CSSTransition, {
-    in: isOpen,
-    timeout: animationDuration,
-    mountOnEnter: true,
-    unmountOnExit: true,
-    onExited,
-    classNames: transitionClassName
-  }, /* @__PURE__ */ React.createElement(Container, {
-    ...props,
-    color,
-    origin
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    color,
-    type
-  }, icons[type]), /* @__PURE__ */ React.createElement(Message, null, message), action && action, /* @__PURE__ */ React.createElement(CloseIcon, {
-    color: color != null ? color : "none",
-    onClick: onClose
-  }, /* @__PURE__ */ React.createElement(Close, null))));
-};
-
-export { Snackbar, Snackbar as default };

package/components/Spinner/index.js

@@ -1,60 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-import theme from '../../theme.js';
-
-const getDuration = (speed) => {
-  const durations = {
-    slow: "2s",
-    default: "1s",
-    fast: "0.5s"
-  };
-  return durations[speed] || durations.default;
-};
-const getSize = (size) => {
-  const sizes = {
-    smaller: 1,
-    small: 2,
-    regular: 3,
-    large: 4
-  };
-  if (typeof size === "number") {
-    return size;
-  }
-  return sizes[size] || sizes.regular;
-};
-const spin = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const StyledSpinner = styled.div`
-  display: inline-block;
-  border-radius: 50%;
-  border-top: ${({ theme: theme2, color, size }) => `${getSize(size) / 10}em solid ${theme2.colors[color].main}`};
-  border-bottom: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  border-right: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  border-left: ${({ size }) => `${getSize(size) / 10}em solid rgba(0, 0, 0, 0.1);`};
-  width: ${({ size }) => getSize(size)}em;
-  height: ${({ size }) => getSize(size)}em;
-  animation: ${spin} ${({ speed }) => getDuration(speed)} infinite linear;
-  will-change: transform;
-`;
-const Spinner = ({
-  size = "regular",
-  color = "primary",
-  speed = "default",
-  ...props
-}) => /* @__PURE__ */ React.createElement(StyledSpinner, {
-  ...props,
-  role: "status",
-  "aria-live": "polite",
-  "aria-busy": "true",
-  size,
-  speed,
-  color,
-  theme
-});
-
-export { Spinner as default };

package/components/Stepper/index.js

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-import theme from '../../theme.js';
-import { Title } from '../../typography/Heading/index.js';
-import '../../shared/media-queries.js';
-
-const Container = styled.div`
-  min-height: 4rem;
-`;
-const Line = styled.div`
-  margin: auto;
-  width: 2px;
-  height: 100%;
-  background-color: ${theme.colors.primary.main};
-`;
-const Graphic = styled.div`
-  margin-right: 0.75rem;
-`;
-const Step = styled.div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  display: flex;
-  padding-bottom: 1rem;
-
-  &:last-child {
-    ${Line} {
-      display: none;
-    }
-  }
-`;
-const Circle = styled.div`
-  width: 3rem;
-  height: 3rem;
-  border-radius: 3rem;
-
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${theme.colors.primary.main};
-`;
-const CircleText = styled(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)));
-};
-
-export { Stepper };

package/components/StepperAccordion/index.js

@@ -1,124 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import theme from '../../theme.js';
-import { Title } from '../../typography/Heading/index.js';
-import CheckIcon from '../Icons/CheckIcon.js';
-import Arrow from '../Icons/Arrow.js';
-import { fadedColor } from '../../shared/helpers.js';
-import { Collapse } from 'react-collapse';
-import '../../shared/media-queries.js';
-
-const DEFAULT_TRANSITION_TIME = "200ms";
-const Container = styled.div`
-  .ReactCollapse--collapse {
-    transition: height ${DEFAULT_TRANSITION_TIME} ease-in-out;
-  }
-`;
-const HeaderExpandedProps = css`
-  margin-top: 0.25rem;
-  transform: rotate(-180deg);
-`;
-const Header = styled.div`
-  display: flex;
-  align-items: center;
-  height: 4rem;
-
-  color: ${(props) => props.isDisabled ? theme.colors.text.disabled : theme.colors.text.dark};
-`;
-const StyledTitle = styled(Title)`
-  margin: 0;
-`;
-const HeaderArrow = styled(Arrow)`
-  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) => css`
-  color: white;
-  background-color: ${theme.colors[color].main};
-`;
-const CircleIsDisabledStyles = (isComplete, color) => css`
-  fill: white;
-  border: 2px solid ${fadedColor(theme.colors[color].main, 0.2)};
-
-  ${isComplete && `
-      border: 2px solid ${fadedColor(theme.colors[color].main, 0)};
-      background-color: ${fadedColor(theme.colors[color].main, 0.5)};
-    `}
-`;
-const Circle = styled.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.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] = useState(props.isExpanded || false);
-  const toggleIsExpanded = useCallback(() => {
-    if (!props.isDisabled) {
-      setIsExpanded((previousValue) => !previousValue);
-    }
-  }, [props.isDisabled]);
-  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(CheckIcon, null) : /* @__PURE__ */ React.createElement("span", null, props.step)), /* @__PURE__ */ React.createElement(StyledTitle, null, props.title), /* @__PURE__ */ React.createElement(HeaderArrow, {
-    isExpanded
-  })), /* @__PURE__ */ React.createElement(Collapse, {
-    isOpened: isExpanded
-  }, props.children), props.closedChildren && props.closedChildren);
-};
-
-export { StepperAccordion, StepperAccordion as default };

package/components/Tabs/index.js

@@ -1,61 +0,0 @@
-import { Children } from 'react';
-import styled from 'styled-components';
-
-const TabsContainer = styled.div`
-  display: inline-flex;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.gray.light4};
-`;
-const TabWrapper = styled.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 (Children.count(children) <= 1) {
-    console.error("<Tabs /> component has too few children!");
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(TabsContainer, {
-    className
-  }, 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);
-  }));
-};
-
-export { Tab, Tabs, Tabs as default };

package/components/TextArea/index.js

@@ -1,111 +0,0 @@
-import { useState } from 'react';
-import styled, { css } from 'styled-components';
-import theme from '../../theme.js';
-import { Label } from '../FieldLabel.js';
-import { BodyTextStyle } from '../../typography/BodyText/index.js';
-
-const disabledStyles = css`
-  border: 1px solid ${theme.colors.gray.light1};
-  color: ${theme.colors.gray.dark1};
-  fill: ${theme.colors.gray.light1};
-`;
-const errorStyles = css`
-  border: 1px solid ${theme.colors.error.main};
-`;
-const focusStyles = css`
-  color: ${theme.colors.text.dark};
-  border: 1px solid ${theme.colors.text.dark};
-  fill: ${theme.colors.text.dark};
-`;
-const TextAreaWrapper = styled.div`
-  position: relative;
-  padding: 0;
-  display: inline-block;
-`;
-const InputWrapper = styled.div`
-  display: inline-black;
-
-  color: ${theme.colors.gray.light1};
-  fill: ${theme.colors.gray.light1};
-  background-color: ${theme.colors.background.light};
-
-  border: 1px solid ${theme.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.textarea`
-  ${BodyTextStyle}
-
-  width: 100%;
-  cursor: text;
-  outline: none;
-  border: none;
-  background-color: transparent;
-
-  ${({ resize }) => !resize && "resize: none;"}
-`;
-const Suffix = styled.div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-`;
-const HelperText = styled.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.colors.error.main : theme.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] = 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,
-    placeholder: label && !isFocused ? "" : placeholder
-  }), props.suffix && /* @__PURE__ */ React.createElement(Suffix, null, props.suffix)), label && /* @__PURE__ */ React.createElement(Label, {
-    isFocused,
-    centered,
-    hasError,
-    hasValue,
-    disabled: isDisabled,
-    theme
-  }, label), helperText && /* @__PURE__ */ React.createElement(HelperText, {
-    centered,
-    hasError
-  }, helperText));
-};
-
-export { TextArea, TextArea as default };

package/components/Textfield/index.js

@@ -1,121 +0,0 @@
-import { useState } from 'react';
-import styled, { css } from 'styled-components';
-import theme from '../../theme.js';
-import { Label } from '../FieldLabel.js';
-import { BodyTextStyle, CaptionStyle } from '../../typography/BodyText/index.js';
-
-const disabledStyles = css`
-  border: 1px solid ${theme.colors.gray.light1};
-  color: ${theme.colors.gray.dark1};
-  fill: ${theme.colors.gray.light1};
-`;
-const errorStyles = css`
-  border: 1px solid ${theme.colors.error.main};
-`;
-const focusStyles = css`
-  color: ${theme.colors.text.dark};
-  border: 1px solid ${theme.colors.text.dark};
-  fill: ${theme.colors.text.dark};
-`;
-const TextFieldWrapper = styled.div`
-  position: relative;
-  padding: 0;
-  display: block;
-`;
-const InputWrapper = styled.div`
-  display: flex;
-  text-align: center;
-  align-items: center;
-
-  color: ${theme.colors.gray.light1};
-  fill: ${theme.colors.gray.light1};
-  background-color: ${theme.colors.background.light};
-
-  border: 1px solid ${theme.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.input`
-  ${BodyTextStyle}
-  width: 100%;
-  cursor: text;
-  outline: none;
-  border: none;
-  background-color: transparent;
-`;
-const Suffix = styled.div`
-  font-family: ${({ theme: theme2 }) => theme2.typography.fontBaseFamily};
-  line-height: 0px;
-  margin-top: 2px;
-`;
-const HelperText = styled.span`
-  ${CaptionStyle}
-  line-height: normal;
-  display: block;
-  margin-top: 0.25rem;
-  margin-left: 0.85rem;
-
-  color: ${({ hasError }) => hasError ? theme.colors.error.main : theme.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] = 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,
-    placeholder: label && !isFocused ? "" : placeholder
-  }), props.suffix && /* @__PURE__ */ React.createElement(Suffix, null, props.suffix)), label && /* @__PURE__ */ React.createElement(Label, {
-    isFocused,
-    centered,
-    hasError,
-    hasValue,
-    disabled: isDisabled,
-    theme
-  }, label), helperText && /* @__PURE__ */ React.createElement(HelperText, {
-    centered,
-    hasError
-  }, helperText));
-};
-
-export { TextField, TextField as default };