@wayke-se/components-react 2.16.0 → 3.0.0-beta.1

package/src/State/Search/SearchProvider.tsx

@@ -0,0 +1,243 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+import { Facet, Document, Search } from '../../@types/search';
+import { QueryFilter } from '../../@types/queryFilter';
+import useFetch from '../../hooks/useFetch';
+import { SearchContext } from './SearchContext';
+import { getUrlSearchParamsFromUrl } from '../../utils/url';
+import { WaykePubSub } from '../../index';
+import { ActionOnFilterUpdate } from '../../utils/pubsub/Actions';
+import usePath from '../Path/usePath';
+
+interface SearchProviderProps {
+  url: string;
+  apiKey?: string;
+  useQueryParamsFromUrl?: boolean;
+  pathRoute?: string;
+  children: React.ReactNode;
+}
+
+const initialSearchParams = new URLSearchParams();
+initialSearchParams.set('hits', '30');
+initialSearchParams.set('sort', 'published-desc');
+
+const SearchProvider = ({
+  url,
+  apiKey,
+  useQueryParamsFromUrl,
+  pathRoute,
+  children,
+}: SearchProviderProps) => {
+  const { replaceState, pushState } = usePath();
+  const [queryFilter, setQueryFilter] = useState<QueryFilter>({
+    searchParams: initialSearchParams,
+  });
+
+  const [initialFacets, setInitialFacets] = useState<Facet[]>();
+  const [documents, setDocuments] = useState<Document[]>();
+  const [initialize, setInitialize] = useState(false);
+
+  const { data: initialDataRepsonse } = useFetch<Search>(
+    `${url}?hits=0`,
+    {
+      headers: apiKey
+        ? {
+            'x-api-key': apiKey,
+          }
+        : {},
+    },
+    !!initialFacets
+  );
+
+  const query = queryFilter.searchParams.toString();
+  const {
+    loading,
+    data: response,
+    error,
+  } = useFetch<Search>(
+    `${url}${query ? `?${query}` : ''}`,
+    {
+      headers: apiKey
+        ? {
+            'x-api-key': apiKey,
+          }
+        : {},
+    },
+    !initialize || !!queryFilter?.block
+  );
+
+  const popStateEvent = (event: PopStateEvent) => {
+    const { currentTarget } = event;
+    if (currentTarget) {
+      const nextSearchParams = new URLSearchParams((currentTarget as Window).location.search);
+
+      if (!nextSearchParams.has('sort')) {
+        nextSearchParams.set('sort', 'published-desc');
+      }
+
+      setQueryFilter({
+        searchParams: nextSearchParams,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (useQueryParamsFromUrl) {
+      window.addEventListener('popstate', popStateEvent);
+    }
+
+    const onFilterUpdateEvent: ActionOnFilterUpdate = {
+      actionName: 'onFilterUpdate',
+      callback: onFilterUpdate,
+    };
+
+    WaykePubSub.subscribeAction(onFilterUpdateEvent);
+    return () => {
+      window.removeEventListener('popstate', popStateEvent);
+      WaykePubSub.unsubscribeAction(onFilterUpdateEvent);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (initialDataRepsonse) {
+      setInitialFacets(initialDataRepsonse.facets);
+    }
+  }, [initialDataRepsonse]);
+
+  useEffect(() => {
+    if (useQueryParamsFromUrl) {
+      const nextSearchParams = new URLSearchParams(queryFilter.searchParams);
+      nextSearchParams.delete('hits');
+      nextSearchParams.delete('offset');
+      if (nextSearchParams.get('sort') === 'published-desc') {
+        nextSearchParams.delete('sort');
+      }
+
+      const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
+      if (initialize) {
+        if (window.location.search.localeCompare(nextSearch) !== 0) {
+          const _path = pathRoute?.replace(/^\/|\/$/g, '');
+          const prefix = _path ? `/${_path}/` : '/';
+
+          const index = _path ? window.location.pathname.indexOf(prefix) : -1;
+          let pathname = window.location.pathname;
+          if (index > -1) {
+            pathname = pathname.substr(0, index);
+          }
+
+          pushState(`${pathname}${nextSearch}`);
+        }
+      }
+    }
+  }, [queryFilter, initialize, useQueryParamsFromUrl]);
+
+  useEffect(() => {
+    if (response) {
+      if (!initialFacets && !useQueryParamsFromUrl) {
+        setInitialFacets(response.facets);
+      }
+
+      if (useQueryParamsFromUrl && response.query?.parameters) {
+        const nextSearchParams = new URLSearchParams(response.query.parameters);
+        nextSearchParams.delete('hits');
+        nextSearchParams.delete('offset');
+        const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
+        if (window.location.search.localeCompare(nextSearch) !== 0) {
+          replaceState(`${window.location.pathname}${nextSearch}`);
+          setQueryFilter({
+            searchParams: new URLSearchParams(nextSearch),
+            block: true,
+          });
+        }
+      }
+
+      if (queryFilter?.concatResult) {
+        setDocuments([...(documents || []), ...(response.documentList.documents || [])]);
+      } else {
+        setDocuments(response.documentList.documents || []);
+      }
+    }
+  }, [response, useQueryParamsFromUrl]);
+
+  const onFilterUpdate = useCallback(
+    (nextQuery: string) => {
+      {
+        if (!initialize) {
+          setInitialize(true);
+        }
+
+        setQueryFilter({
+          searchParams: new URLSearchParams(nextQuery),
+        });
+      }
+    },
+    [initialize]
+  );
+
+  const onLoadMore = useCallback(() => {
+    if (response) {
+      setQueryFilter({
+        searchParams: new URLSearchParams(response?.documentList.pagination.nextPage?.query),
+        concatResult: true,
+      });
+    }
+  }, [response]);
+
+  const onInitialize = useCallback(
+    (_initialQueryParams?: URLSearchParams) => {
+      if (!initialize) {
+        const searchParamsFromUrl = getUrlSearchParamsFromUrl();
+
+        const initialQueryParams = useQueryParamsFromUrl
+          ? searchParamsFromUrl
+          : _initialQueryParams;
+
+        if (useQueryParamsFromUrl && _initialQueryParams) {
+          _initialQueryParams.forEach((value, key) => {
+            if (!initialQueryParams?.getAll(key)?.some((v) => v === value)) {
+              initialQueryParams?.append(key, value);
+            }
+          });
+        }
+
+        if (initialQueryParams) {
+          const nextSearchParams = new URLSearchParams(initialQueryParams);
+          nextSearchParams.delete('hits');
+          nextSearchParams.delete('offset');
+
+          if (!initialQueryParams.has('hits')) {
+            initialQueryParams.set('hits', '30');
+          }
+          if (!initialQueryParams.has('sort')) {
+            initialQueryParams.set('sort', 'published-desc');
+          }
+
+          const nextSearch = nextSearchParams.toString() ? `?${nextSearchParams}` : '';
+
+          setQueryFilter({
+            searchParams: initialQueryParams,
+          });
+          replaceState(`${window.location.pathname}${nextSearch}`);
+        }
+        setInitialize(true);
+      }
+    },
+    [initialize]
+  );
+
+  const value = {
+    loading,
+    error,
+    response,
+    documents,
+    initialFacets,
+    queryFilter,
+    onFilterUpdate,
+    onLoadMore,
+    onInitialize,
+  };
+
+  return <SearchContext.Provider value={value}>{children}</SearchContext.Provider>;
+};
+
+export default SearchProvider;

package/{dist-src/State/Search/useSearch.js → src/State/Search/useSearch.ts}

@@ -1,4 +1,6 @@
 import { useContext } from 'react';
 import { SearchContext } from './SearchContext';
+
 const useSearch = () => useContext(SearchContext);
+
 export default useSearch;

package/src/State/Settings/SettingsContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+
+export interface SettingsContextProps {
+  googleMapsApiKey?: string;
+  googleMapsMarker?: string;
+  ecomSettings?: {
+    url: string;
+    useBankId?: boolean;
+    displayBankIdAlert?: boolean;
+    serviceLogotypeUrl?: string;
+    bankIdThumbprint?: string;
+  };
+}
+
+export const SettingsContext = createContext<SettingsContextProps>({});

package/src/State/Settings/SettingsProvider.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SettingsContext } from './SettingsContext';
+import { EcomSettings } from '../../providers/WaykeProvider';
+
+interface SettingsProps {
+  ecomSettings?: EcomSettings;
+  googleMapsApiKey?: string;
+  googleMapsMarker?: string;
+  children: React.ReactNode;
+}
+
+const SettingsProvider = ({
+  googleMapsApiKey,
+  googleMapsMarker,
+  ecomSettings,
+  children,
+}: SettingsProps) => (
+  <SettingsContext.Provider value={{ ecomSettings, googleMapsApiKey, googleMapsMarker }}>
+    {children}
+  </SettingsContext.Provider>
+);
+
+export default SettingsProvider;

package/{dist-src/State/Settings/useSettings.js → src/State/Settings/useSettings.ts}

@@ -1,4 +1,7 @@
 import { useContext } from 'react';
+
 import { SettingsContext } from './SettingsContext';
+
 const useSettings = () => useContext(SettingsContext);
+
 export default useSettings;

package/src/components/Accordion/index.tsx

@@ -0,0 +1,57 @@
+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/{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';
+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;