@wayke-se/components-react 3.0.0-beta.11 → 3.0.0-beta.13

package/src/components/Accordion/index.tsx

@@ -1,57 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import {
-  List,
-  Item,
-  Header,
-  Label,
-  Heading,
-  Indicator,
-  IndicatorValue,
-  Icon,
-  Body,
-} from './wrapper';
-import { IconChevronDown } from '../Icon/index';
-
-export interface IAccordionItem {
-  heading: string;
-  activeCount?: number;
-  children: React.ReactNode;
-  isActive?: boolean;
-}
-
-export interface IAccordion {
-  children?: React.ReactNode;
-}
-
-export const AccordionItem = ({ heading, children, activeCount, isActive }: IAccordionItem) => {
-  const [extend, setExtend] = useState(isActive || false);
-  const onToggleExtend = useCallback(() => setExtend(!extend), [extend]);
-
-  return (
-    <Item isOpen={extend}>
-      <Header onClick={onToggleExtend} title="Visa mer">
-        <Label>
-          <Heading
-            className={activeCount && activeCount > 0 ? 'wayke__theme wayke__font--bold' : ''}
-          >
-            {heading}
-          </Heading>
-          {activeCount && activeCount > 0 && (
-            <Indicator>
-              <IndicatorValue>{activeCount}</IndicatorValue>
-            </Indicator>
-          )}
-        </Label>
-        <Icon>
-          <IconChevronDown block />
-        </Icon>
-      </Header>
-      <Body>{children}</Body>
-    </Item>
-  );
-};
-
-const Accordion = ({ children }: IAccordion) => <List>{children}</List>;
-
-export default Accordion;

package/src/components/Accordion/wrapper.tsx

@@ -1,107 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const List = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1)} 0;
-  font-size: 1rem;
-`;
-
-export const Header = styled(ButtonReset)`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: ${size(3)} 0;
-  text-align: left;
-  font: inherit;
-`;
-
-export const Label = styled.div`
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-`;
-
-export const Heading = styled.div`
-  line-height: 1;
-`;
-
-export const Indicator = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-bg',
-}))`
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 ${size(0.375)};
-  margin-left: ${size(0.5)};
-  min-width: 1em;
-  height: 1em;
-  border-radius: 999px;
-  z-index: 1;
-`;
-
-export const IndicatorValue = styled.div`
-  font-family: sans-serif; // Default font to guarantee visibility
-  font-size: 0.75rem;
-  font-weight: bold;
-`;
-
-export const Icon = styled.div`
-  position: relative;
-  flex-shrink: 0;
-  padding-left: ${size(1)};
-  transition: color 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-1)};
-    bottom: ${size(-1)};
-    left: 0;
-    right: ${size(-1)};
-    border-radius: 50%;
-    background-color: ${(props) => props.theme.color.accent};
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  ${Header}:hover & {
-    :before {
-      opacity: 1;
-    }
-  }
-`;
-
-export const Body = styled.div`
-  display: none;
-  padding-bottom: ${size(3)};
-`;
-
-type ItemProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement> & {
-  isOpen?: boolean;
-};
-
-export const Item = styled.li<ItemProps>`
-  & + & {
-    border-top: 1px solid ${(props) => props.theme.color.border};
-  }
-
-  ${({ isOpen }) =>
-    isOpen &&
-    css`
-      ${Body} {
-        display: block;
-      }
-
-      ${Icon} {
-        svg {
-          transform: rotate(180deg);
-        }
-      }
-    `}
-`;

package/src/components/ActionList/index.tsx

@@ -1,48 +0,0 @@
-import React, { useCallback } from 'react';
-
-import ToggleItem from './toggle-item';
-import { Maybe, ContactOptions, Branch } from '../../@types/codegen/types';
-import { formatPhonenumber } from '../../utils/phonenumbers';
-import PubSub from '../../utils/pubsub/pubsub';
-
-interface ActionListProps {
-  branch?: Maybe<Branch>;
-  contact?: Maybe<ContactOptions>;
-}
-
-const ActionList = ({ contact, branch }: ActionListProps) => {
-  const email = contact?.email || branch?.contact?.email;
-  const phonenumber = contact?.phonenumber || branch?.contact?.phonenumber;
-
-  const onClickMailVisible = useCallback(() => PubSub.publish('MailVisible'), []);
-  const onClickPhoneVisible = useCallback(() => PubSub.publish('PhonenumberVisible'), []);
-  const onClickPhoneValue = useCallback(() => PubSub.publish('PhonenumberCall'), []);
-
-  if (!email && !phonenumber) {
-    return null;
-  }
-
-  return (
-    <>
-      {email && (
-        <ToggleItem
-          onClickVisible={onClickMailVisible}
-          title="Visa mailadress"
-          value={email}
-          type="mailto"
-        />
-      )}
-      {phonenumber && (
-        <ToggleItem
-          title="Visa telefonnummer"
-          value={formatPhonenumber(phonenumber)}
-          type="tel"
-          onClickVisible={onClickPhoneVisible}
-          onClickValue={onClickPhoneValue}
-        />
-      )}
-    </>
-  );
-};
-
-export default ActionList;

package/src/components/ActionList/toggle-item.tsx

@@ -1,59 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-import { RepeatTiny } from '../Repeat/index';
-
-interface ToggleItemProps {
-  title: string;
-  value: string;
-  type: 'tel' | 'mailto';
-  onClickVisible?: () => void;
-  onClickValue?: () => void;
-}
-
-const initialValue: { [key: string]: boolean | undefined } = {};
-
-const getInitialValue = (title: string) => title && !!initialValue[title];
-
-const ToggleItem = ({ title, value, type, onClickVisible, onClickValue }: ToggleItemProps) => {
-  const [visible, setVisible] = useState(() => getInitialValue(type));
-
-  const _onClickValue = useCallback(() => {
-    if (onClickValue) {
-      onClickValue();
-    }
-  }, []);
-
-  const onClick = useCallback(() => {
-    if (!visible) {
-      initialValue[type] = true;
-      setVisible(true);
-      if (onClickVisible) {
-        onClickVisible();
-      }
-    }
-  }, [visible]);
-
-  const visibleTitle = type === 'tel' ? 'Ring' : type === 'mailto' ? 'Skicka ett mail till' : '';
-
-  return (
-    <RepeatTiny>
-      {visible ? (
-        <ButtonSecondary
-          onClick={_onClickValue}
-          as="a"
-          href={`${type}:${value}`}
-          title={`${visibleTitle} ${value}`}
-          fullWidth
-        >
-          <ButtonContent>{value}</ButtonContent>
-        </ButtonSecondary>
-      ) : (
-        <ButtonSecondary onClick={onClick} title={title} fullWidth>
-          <ButtonContent>{title}</ButtonContent>
-        </ButtonSecondary>
-      )}
-    </RepeatTiny>
-  );
-};
-
-export default ToggleItem;

package/src/components/Avatar/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-interface Props {
-  image: string;
-  alt?: string;
-}
-
-const Avatar = ({ image, alt }: Props) => <Wrapper image={image} aria-label={alt} />;
-
-export default Avatar;

package/src/components/Avatar/wrapper.tsx

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-interface Wrapper {
-  image: string;
-}
-
-export const Wrapper = styled.div.attrs(() => ({
-  role: 'image',
-}))<Wrapper>`
-  display: block;
-  width: ${size(5)};
-  height: ${size(5)};
-  border-radius: 50%;
-  background-image: ${(props): string => `url(${props.image})`};
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: ${(props) => props.theme.color.accent};
-`;

package/src/components/Badge/index.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-interface Props {
-  label: string;
-  severity?: 'positive' | 'negative';
-}
-
-const Badge = ({ label, severity }: Props) => <Wrapper severity={severity}>{label}</Wrapper>;
-
-export default Badge;

package/src/components/Badge/wrapper.tsx

@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import theme from '../../layout/theme';
-
-const getBg = (severity: string | undefined): string => {
-  let bg = theme.color.textDark;
-
-  if (severity === 'positive') {
-    bg = theme.color.ui.positive;
-  } else if (severity === 'negative') {
-    bg = theme.color.ui.negative;
-  }
-
-  return bg;
-};
-
-interface Wrapper {
-  severity?: string;
-}
-
-export const Wrapper = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))<Wrapper>`
-  display: inline-block;
-  background-color: ${(props): string => getBg(props.severity)};
-  padding: ${size(0.75)} ${size(1.5)};
-  color: ${(props) => props.theme.color.textLight};
-  border-radius: 3px;
-  font-size: 0.75rem;
-  line-height: 1.2;
-`;

package/src/components/Blockquote/index.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Quote, Author, AvatarWrapper, Info, Name, Date } from './wrapper';
-import Avatar from '../Avatar/index';
-
-interface Props {
-  children: React.ReactNode;
-  author?: string | null;
-  avatar?: string;
-  date?: string;
-}
-
-const Blockquote = ({ children, author, avatar, date }: Props) => (
-  <Wrapper>
-    <Quote>{children}</Quote>
-    {author && (
-      <Author>
-        {avatar && (
-          <AvatarWrapper>
-            <Avatar image={avatar} alt={`${author} avatar`} />
-          </AvatarWrapper>
-        )}
-        <Info>
-          <Name>{author}</Name>
-          {date && <Date>{date}</Date>}
-        </Info>
-      </Author>
-    )}
-  </Wrapper>
-);
-
-export default Blockquote;

package/src/components/Blockquote/wrapper.tsx

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.blockquote`
-  display: flex;
-  flex-direction: column;
-  max-width: 600px;
-  margin: 0 auto;
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    align-items: center;
-  }
-`;
-
-export const Quote = styled.div`
-  > * {
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-  }
-`;
-
-export const Author = styled.footer`
-  display: inline-flex;
-  align-items: center;
-  margin-top: ${size(3)};
-
-  ${(props) => props.theme.breakpoint.Md} {
-    margin-top: ${size(4)};
-  }
-`;
-
-export const AvatarWrapper = styled.div`
-  flex-shrink: 0;
-  padding-right: ${size(1.5)};
-`;
-
-export const Info = styled.div`
-  flex: 1 1 auto;
-  font-size: 0.875rem;
-`;
-
-export const Name = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))``;
-
-export const Date = styled.div``;

package/src/components/Button/index.tsx

@@ -1,226 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { UtilityTextRight } from '../Utility/index';
-
-export const ButtonReset = styled.button.attrs(() => ({
-  type: 'button',
-}))`
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-size: 1em;
-  color: currentColor;
-  line-height: 1.2;
-  text-align: center;
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
-  cursor: pointer;
-
-  :focus {
-    outline: none;
-  }
-
-  ::-moz-focus-inner {
-    border: 0;
-  }
-`;
-
-type ButtonResetProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  fullWidth?: boolean;
-  inputHeight?: boolean;
-};
-
-const ButtonBase = styled(ButtonReset)<ButtonResetProps>`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${size(1.75)} ${size(6)};
-  border-radius: 3px;
-  font-size: 1rem;
-  line-height: 1.2;
-  text-decoration: none;
-  transform-origin: 50% 50%;
-  transition: 200ms ease, transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.97);
-  }
-
-  &[disabled] {
-    background-color: ${(props) => props.theme.color.disabledBg};
-    border-color: ${(props) => props.theme.color.disabledBg};
-    color: ${(props) => props.theme.color.disabledText};
-  }
-
-  ${({ fullWidth }) =>
-    fullWidth &&
-    css`
-      display: flex;
-      width: 100%;
-    `}
-
-  ${({ inputHeight }) =>
-    inputHeight &&
-    css`
-      height: ${(props) => props.theme.distances.inputHeight};
-    `}
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    padding: ${size(1.75)} ${size(2.5)};
-    font-size: 0.875rem;
-  }
-`;
-
-export const ButtonPrimary = styled(ButtonBase).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-bg wayke__font--bold',
-}))``;
-
-export const ButtonSecondary = styled(ButtonBase).attrs(() => ({
-  className: 'wayke__theme wayke__color--secondary-bg wayke__font--bold',
-}))`
-  background-color: ${(props) => props.theme.color.accentDark};
-  color: ${(props) => props.theme.color.textDark};
-`;
-
-export const ButtonContent = styled.div`
-  position: relative;
-  z-index: 1;
-
-  & + & {
-    margin-left: ${size(0.5)};
-  }
-`;
-
-export const ButtonClear = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
-  position: relative;
-  font-size: 0.875rem;
-  padding: ${size(1.5)};
-  margin: ${size(-1.5)};
-  text-align: left;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  ${UtilityTextRight} & {
-    text-align: right;
-  }
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: ${(props) => props.theme.color.accentDark};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-
-type ButtonInlineProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  inline?: boolean;
-  as?: string;
-};
-
-export const ButtonInline = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-}))<ButtonInlineProps>`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-  text-decoration: underline;
-
-  :not(:hover) {
-    color: ${(props) => props.theme.color.textDark};
-  }
-
-  ${({ inline }) =>
-    inline &&
-    css`
-      display: inline;
-    `}
-`;
-
-export const ButtonInlineBold = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-
-  :hover {
-    text-decoration: underline;
-  }
-`;
-
-export const ButtonInlineLight = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-}))`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-  text-decoration: none;
-
-  :not(:hover) {
-    color: ${(props) => props.theme.color.textDarkLighten};
-  }
-`;
-
-export const ButtonInlinePrimary = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-}))<ButtonInlineProps>`
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-
-  :hover {
-    text-decoration: underline;
-  }
-`;

package/src/components/CheckMarkList/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { List, Item, Icon, Label } from './wrapper';
-import { IconCheck } from '../Icon/index';
-
-export interface ICheckMarkList {
-  children: React.ReactNode;
-}
-
-export const CheckMarkListItem = ({ children }: ICheckMarkList) => (
-  <Item>
-    <Icon>
-      <IconCheck block />
-    </Icon>
-    <Label>{children}</Label>
-  </Item>
-);
-
-const CheckMarkList = ({ children }: ICheckMarkList) => <List>{children}</List>;
-
-export default CheckMarkList;