@kvdbil/components 3.3.5-0 → 3.3.5-5

package/ButtonExample.d.ts

@@ -1,2 +0,0 @@
-export declare const Button: () => string;
-export default Button;

package/ButtonExample.js

@@ -1,5 +0,0 @@
-const Button = () => {
-  return "sick button";
-};
-
-export { Button, Button as default };

package/ColorCard.js

@@ -1,40 +0,0 @@
-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" ? /* @__PURE__ */ React.createElement(Color, {
-  hex,
-  key: hex
-}, name, " (", hex, ")") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Header, null, name), /* @__PURE__ */ React.createElement(SubList, null, getColor(hex))));
-const ColorCard = ({ colorName, variants }) => /* @__PURE__ */ React.createElement(ColorItem, null, /* @__PURE__ */ React.createElement(Header, null, colorName), /* @__PURE__ */ React.createElement(SwatchArea, null, getColor(variants)));
-
-export { ColorCard as default };

package/ElevationCard.js

@@ -1,27 +0,0 @@
-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 /* @__PURE__ */ React.createElement(Card, {
-    as,
-    elevation: value
-  }, children);
-};
-
-export { ElevationCard };

package/components/Accordion/index.js

@@ -1,115 +0,0 @@
-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 /* @__PURE__ */ React.createElement(Container, {
-    ...props
-  }, /* @__PURE__ */ React.createElement(List, {
-    className: "accordionList"
-  }, items.map((item, index) => {
-    const isOpen = Boolean(isOpened[index]);
-    return /* @__PURE__ */ React.createElement(Item, {
-      key: item.title,
-      isOpen,
-      className: "accordionItem"
-    }, /* @__PURE__ */ React.createElement(Title, {
-      onClick: onClick(index),
-      onKeyPress: onKeyPress(index),
-      className: "accordionItemTitle",
-      role: "button",
-      tabIndex: 0,
-      "aria-expanded": isOpen,
-      id: `panel${index}-header`,
-      "aria-controls": `panel${index}-content`
-    }, /* @__PURE__ */ React.createElement(Text, {
-      as: "span"
-    }, item.title), /* @__PURE__ */ React.createElement(Arrow, {
-      isOpen
-    }, /* @__PURE__ */ React.createElement(ArrowDownIcon, null))), /* @__PURE__ */ React.createElement(UnmountClosed, {
-      isOpened: isOpen,
-      key: index
-    }, /* @__PURE__ */ React.createElement(Content, {
-      "aria-labelledby": `panel${index}-header`,
-      id: `panel${index}-content`,
-      role: "region",
-      className: "wysiwyg",
-      dangerouslySetInnerHTML: {
-        __html: item.text
-      }
-    })));
-  })));
-};
-
-export { Accordion, Accordion as default };

package/components/Badge/index.js

@@ -1,69 +0,0 @@
-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: theme2 }) => theme2.typography.fontAlternativeBoldWeight};
-  font-family: ${({ theme: theme2 }) => theme2.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 /* @__PURE__ */ React.createElement(SmallBadgeContainer, {
-      ...rest
-    }, /* @__PURE__ */ React.createElement(MiddleDot, {
-      "data-test": "middle-dot"
-    }));
-  }
-  const label = numberToLabel(notificationAmount);
-  return /* @__PURE__ */ React.createElement(BadgeContainer, {
-    ...rest
-  }, /* @__PURE__ */ React.createElement(Label, null, label));
-};
-
-export { Badge, Badge as default };