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

package/{dist-src/components/Accordion/wrapper.js → src/components/Accordion/wrapper.tsx}

@@ -1,13 +1,16 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-export const List = styled.ul `
+
+export const List = styled.ul`
   list-style: none;
   padding: 0;
   margin: ${size(-1)} 0;
   font-size: 1rem;
 `;
-export const Header = styled(ButtonReset) `
+
+export const Header = styled(ButtonReset)`
   display: flex;
   align-items: center;
   width: 100%;
@@ -15,17 +18,20 @@ export const Header = styled(ButtonReset) `
   text-align: left;
   font: inherit;
 `;
-export const Label = styled.div `
+
+export const Label = styled.div`
   display: flex;
   align-items: center;
   flex: 1 1 auto;
 `;
-export const Heading = styled.div `
+
+export const Heading = styled.div`
   line-height: 1;
 `;
+
 export const Indicator = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-bg',
-})) `
+  className: 'wayke__theme wayke__color--primary-bg',
+}))`
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -37,12 +43,14 @@ export const Indicator = styled.div.attrs(() => ({
   border-radius: 999px;
   z-index: 1;
 `;
-export const IndicatorValue = styled.div `
+
+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 `
+
+export const Icon = styled.div`
   position: relative;
   flex-shrink: 0;
   padding-left: ${size(1)};
@@ -68,17 +76,24 @@ export const Icon = styled.div `
     }
   }
 `;
-export const Body = styled.div `
+
+export const Body = styled.div`
   display: none;
   padding-bottom: ${size(3)};
 `;
-export const Item = styled.li `
+
+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 `
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
       ${Body} {
         display: block;
       }

package/src/components/ActionList/index.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,12 @@
+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/{dist-src/components/Avatar/wrapper.js → src/components/Avatar/wrapper.tsx}

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

package/src/components/Badge/index.tsx

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,32 @@
+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/{dist-src/components/Blockquote/wrapper.js → src/components/Blockquote/wrapper.tsx}

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.blockquote `
+
+export const Wrapper = styled.blockquote`
   display: flex;
   flex-direction: column;
   max-width: 600px;
@@ -10,7 +12,8 @@ export const Wrapper = styled.blockquote `
     align-items: center;
   }
 `;
-export const Quote = styled.div `
+
+export const Quote = styled.div`
   > * {
     :first-child {
       margin-top: 0;
@@ -21,7 +24,8 @@ export const Quote = styled.div `
     }
   }
 `;
-export const Author = styled.footer `
+
+export const Author = styled.footer`
   display: inline-flex;
   align-items: center;
   margin-top: ${size(3)};
@@ -30,15 +34,19 @@ export const Author = styled.footer `
     margin-top: ${size(4)};
   }
 `;
-export const AvatarWrapper = styled.div `
+
+export const AvatarWrapper = styled.div`
   flex-shrink: 0;
   padding-right: ${size(1.5)};
 `;
-export const Info = styled.div `
+
+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 ``;
+  className: 'wayke__theme wayke__font--bold',
+}))``;
+
+export const Date = styled.div``;

package/{dist-src/components/Button/index.js → src/components/Button/index.tsx}

@@ -1,9 +1,12 @@
+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',
-})) `
+  type: 'button',
+}))`
   display: inline-block;
   vertical-align: middle;
   padding: 0;
@@ -29,7 +32,16 @@ export const ButtonReset = styled.button.attrs(() => ({
     border: 0;
   }
 `;
-const ButtonBase = styled(ButtonReset) `
+
+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;
@@ -71,14 +83,16 @@ const ButtonBase = styled(ButtonReset) `
     color: ${(props) => props.theme.color.disabledText};
   }
 
-  ${({ fullWidth }) => fullWidth &&
-    css `
+  ${({ fullWidth }) =>
+    fullWidth &&
+    css`
       display: flex;
       width: 100%;
     `}
 
-  ${({ inputHeight }) => inputHeight &&
-    css `
+  ${({ inputHeight }) =>
+    inputHeight &&
+    css`
       height: ${(props) => props.theme.distances.inputHeight};
     `}
 
@@ -87,16 +101,19 @@ const ButtonBase = styled(ButtonReset) `
     font-size: 0.875rem;
   }
 `;
+
 export const ButtonPrimary = styled(ButtonBase).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-bg wayke__font--bold',
-})) ``;
+  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',
-})) `
+  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 `
+
+export const ButtonContent = styled.div`
   position: relative;
   z-index: 1;
 
@@ -104,9 +121,10 @@ export const ButtonContent = styled.div `
     margin-left: ${size(0.5)};
   }
 `;
+
 export const ButtonClear = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+}))`
   position: relative;
   font-size: 0.875rem;
   padding: ${size(1.5)};
@@ -142,9 +160,18 @@ export const ButtonClear = styled(ButtonReset).attrs(() => ({
     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',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+}))<ButtonInlineProps>`
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;
@@ -154,14 +181,16 @@ export const ButtonInline = styled(ButtonReset).attrs(() => ({
     color: ${(props) => props.theme.color.textDark};
   }
 
-  ${({ inline }) => inline &&
-    css `
+  ${({ inline }) =>
+    inline &&
+    css`
       display: inline;
     `}
 `;
+
 export const ButtonInlineBold = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+}))`
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;
@@ -170,9 +199,10 @@ export const ButtonInlineBold = styled(ButtonReset).attrs(() => ({
     text-decoration: underline;
   }
 `;
+
 export const ButtonInlineLight = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+}))`
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;
@@ -182,9 +212,10 @@ export const ButtonInlineLight = styled(ButtonReset).attrs(() => ({
     color: ${(props) => props.theme.color.textDarkLighten};
   }
 `;
+
 export const ButtonInlinePrimary = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+}))<ButtonInlineProps>`
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;

package/src/components/CheckMarkList/index.tsx

@@ -0,0 +1,21 @@
+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;

package/{dist-src/components/CheckMarkList/wrapper.js → src/components/CheckMarkList/wrapper.tsx}

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const List = styled.ul `
+
+export const List = styled.ul`
   list-style: none;
   padding: 0;
   margin: 0;
 `;
-export const Item = styled.li `
+
+export const Item = styled.li`
   position: relative;
   font-size: 0.875rem;
 
@@ -13,14 +16,16 @@ export const Item = styled.li `
     margin-top: ${size(0.5)};
   }
 `;
+
 export const Icon = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))`
   position: absolute;
   left: 0;
   top: 4px; // Magic number
   font-size: 0.875em;
 `;
-export const Label = styled.div `
+
+export const Label = styled.div`
   padding-left: calc(1em + ${size(1)});
 `;

package/src/components/Checklist/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { List, Item, Action, ActionIcon, ActionLabel } from './wrapper';
+import { IconCheck, IconRadio } from '../Icon/index';
+
+export interface IChecklistItem {
+  label: string;
+  onClick: () => void;
+  active?: boolean;
+  radio?: boolean;
+}
+
+export interface IChecklist {
+  items: IChecklistItem[];
+  radio?: boolean;
+}
+
+const ChecklistItem = ({ label, onClick, active, radio }: IChecklistItem) => (
+  <Item>
+    <Action onClick={onClick}>
+      {active && <ActionIcon>{radio ? <IconRadio block /> : <IconCheck block />}</ActionIcon>}
+      <ActionLabel
+        className={active ? 'wayke__theme wayke__font--bold wayke__color--primary-text' : ''}
+      >
+        {label}
+      </ActionLabel>
+    </Action>
+  </Item>
+);
+
+const Checklist = ({ items, radio }: IChecklist) => {
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <List>
+      {items.map((item) => (
+        <ChecklistItem
+          key={item.label}
+          label={item.label}
+          onClick={item.onClick}
+          active={item.active}
+          radio={radio}
+        />
+      ))}
+    </List>
+  );
+};
+
+export default Checklist;

package/{dist-src/components/Checklist/wrapper.js → src/components/Checklist/wrapper.tsx}

@@ -1,22 +1,26 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
+
 export const List = styled.ul.attrs(() => ({
-    className: 'wayke__theme wayke__font--regular',
-})) `
+  className: 'wayke__theme wayke__font--regular',
+}))`
   list-style: none;
   padding: 0;
   margin: ${size(-1)} 0;
   font-size: 0.875rem;
   overflow: hidden;
 `;
-export const Item = styled.li `
+
+export const Item = styled.li`
   ${List} {
     padding-left: ${size(5)};
     margin: 0;
   }
 `;
-export const Action = styled(ButtonReset) `
+
+export const Action = styled(ButtonReset)`
   position: relative;
   display: block;
   width: 100%;
@@ -35,9 +39,10 @@ export const Action = styled(ButtonReset) `
     margin-top: 2px; // Magic number
   }
 `;
+
 export const ActionIcon = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))`
   position: absolute;
   top: ${size(1)};
   left: 0;
@@ -49,7 +54,8 @@ export const ActionIcon = styled.div.attrs(() => ({
   margin-top: 2px; // Magic number
   font-size: ${size(1.5)};
 `;
-export const ActionLabel = styled.div `
+
+export const ActionLabel = styled.div`
   padding-left: ${size(3)};
   transition: transform 150ms ease;