@wayke-se/components-react 3.0.0-beta.6 → 3.0.0-beta.8

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/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/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;

package/src/components/Checklist/index.tsx

@@ -1,51 +0,0 @@
-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/src/components/ColorSelect/index.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-
-import { List, Item, Action, Color, Label } from './wrapper';
-
-export interface ItemProps {
-  label: string;
-  hex: string[];
-  onClick?: () => void;
-  active?: boolean;
-  disabled?: boolean;
-  boxShadow?: boolean;
-}
-
-export interface Props {
-  items?: ItemProps[];
-}
-
-const ColorSelectItem = ({ label, hex, onClick, active, disabled, boxShadow }: ItemProps) => {
-  return (
-    <Item>
-      <Action onClick={onClick} disabled={disabled} title={label} aria-label={label}>
-        <Color
-          style={{
-            backgroundColor: hex.length === 1 ? hex[0] : '',
-            backgroundImage: hex.length > 1 ? `linear-gradient(${hex.join()})` : '',
-          }}
-          active={active}
-          boxShadow={boxShadow}
-          className={active ? 'wayke__theme wayke__color--primary-text' : ''}
-        />
-        <Label
-          className={active ? 'wayke__theme wayke__color--primary-text wayke__font--bold' : ''}
-        >
-          {label}
-        </Label>
-      </Action>
-    </Item>
-  );
-};
-
-const ColorSelect = ({ items }: Props) => {
-  if (!items) {
-    return null;
-  }
-
-  return (
-    <List>
-      {items.map((item) => (
-        <ColorSelectItem
-          key={item.label}
-          label={item.label}
-          hex={item.hex}
-          onClick={item.onClick}
-          active={item.active}
-          disabled={item.disabled}
-          boxShadow={item.boxShadow}
-        />
-      ))}
-    </List>
-  );
-};
-
-export default ColorSelect;

package/src/components/Container/index.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const Container = ({ children }: Props) => <Wrapper>{children}</Wrapper>;
-
-export default Container;

package/src/components/Content/index.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  small?: boolean;
-};
-
-const Content = ({ children, small, dangerouslySetInnerHTML }: Props) => (
-  <Wrapper small={small} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
-    {children}
-  </Wrapper>
-);
-
-export default Content;

package/src/components/DataList/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { List, Item, Label, Value } from './wrapper';
-
-interface ItemProps {
-  label: string;
-  value: string;
-}
-
-interface Props {
-  items: ItemProps[];
-}
-
-const DataList = ({ items }: Props) => (
-  <List>
-    {items.map((item) => (
-      <Item key={item.label}>
-        <Label>{item.label}</Label>
-        <Value>{item.value}</Value>
-      </Item>
-    ))}
-  </List>
-);
-
-export default DataList;

package/src/components/DetailBox/index.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Main, Heading, Description, Footer, Foldout } from './wrapper';
-import { ButtonClear, ButtonContent } from '../Button/index';
-
-interface Props {
-  heading: string;
-  description?: string;
-  children: React.ReactNode;
-}
-
-const DetailBox = ({ heading, description, children }: Props) => {
-  const [extend, setExtend] = React.useState(false);
-  const onToggleExtend = React.useCallback(() => setExtend(!extend), [extend]);
-
-  const extendBtnText = extend ? 'Mindre information' : 'Mer information';
-
-  return (
-    <Wrapper>
-      <Main>
-        <Heading>{heading}</Heading>
-        {description && <Description>{description}</Description>}
-        <Footer>
-          <ButtonClear onClick={onToggleExtend}>
-            <ButtonContent>{extendBtnText}</ButtonContent>
-          </ButtonClear>
-        </Footer>
-      </Main>
-      {extend && <Foldout>{children}</Foldout>}
-    </Wrapper>
-  );
-};
-
-export default DetailBox;

package/src/components/ExtendContent/index.tsx

@@ -1,43 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Wrapper, Extend, Action } from './wrapper';
-import { ButtonClear, ButtonContent } from '../Button/index';
-
-interface Props {
-  children: React.ReactNode;
-  actionTitle: string;
-  onClick?: () => void;
-}
-
-const ExtendContent = ({ children, actionTitle, onClick }: Props) => {
-  const [extend, setExtend] = useState(false);
-  const onExtend = useCallback(() => {
-    setExtend(true);
-    if (onClick) {
-      onClick();
-    }
-  }, []);
-
-  const onRef = (ref: HTMLDivElement | null) => {
-    const refHeight = ref?.clientHeight || 0;
-
-    if (refHeight < 207) {
-      setExtend(true);
-    }
-  };
-
-  return (
-    <Wrapper ref={onRef}>
-      <Extend extended={extend}>{children}</Extend>
-      {!extend && (
-        <Action>
-          <ButtonClear onClick={onExtend} title={actionTitle}>
-            <ButtonContent>{actionTitle}</ButtonContent>
-          </ButtonClear>
-        </Action>
-      )}
-    </Wrapper>
-  );
-};
-
-export default ExtendContent;

package/src/components/ExtendInfo/index.tsx

@@ -1,32 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Wrapper, Header, Title, Info, InfoBtn, Extend } from './wrapper';
-import { IconInfo } from '../Icon/index';
-
-interface Props {
-  title: string;
-  children?: React.ReactNode;
-}
-
-const ExtendInfo = ({ title, children }: Props) => {
-  const [extend, setExtend] = useState(false);
-  const onToggleExtend = useCallback(() => setExtend(!extend), [extend]);
-
-  return (
-    <Wrapper>
-      <Header>
-        <Title>{title}</Title>
-        {children && (
-          <Info>
-            <InfoBtn onClick={onToggleExtend} title="Mer information">
-              <IconInfo block />
-            </InfoBtn>
-          </Info>
-        )}
-      </Header>
-      {extend && <Extend>{children}</Extend>}
-    </Wrapper>
-  );
-};
-
-export default ExtendInfo;

package/src/components/Filter/index.tsx

@@ -1,108 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { List, Item, Action, Label, Indicator, IndicatorValue } from './wrapper';
-import { Facet } from '../../@types/search';
-import { FacetIdToTitle } from '../../utils/formats';
-import { PRICE, MILEAGE, MODEL_YEAR } from '../../utils/constants';
-import useSearch from '../../State/Search/useSearch';
-import { SearchFilterTypes, SearchFilterNameTypes } from '../../@types/filter';
-import FilterPanel from '../FilterPanel/index';
-
-const isSelected = (f: Facet, searchParams: URLSearchParams) => {
-  switch (f.id) {
-    case PRICE:
-    case MILEAGE:
-    case MODEL_YEAR:
-      return searchParams.has(`${f.id}.min`) || searchParams.has(`${f.id}.max`) ? 1 : 0;
-    default:
-      return f.filters.filter((filter) => filter.selected).length;
-  }
-};
-
-interface FilterProps {
-  filterList?: SearchFilterTypes[];
-}
-
-const Filter = ({ filterList }: FilterProps) => {
-  const { queryFilter, initialFacets, loading, response, onFilterUpdate } = useSearch();
-
-  const facets = response?.facets;
-
-  const [facet, setFacet] = useState<Facet>();
-  const onSelectFacet = useCallback((nextFacet: Facet) => setFacet(nextFacet), []);
-  const onClose = useCallback(() => setFacet(undefined), []);
-
-  if (!facets) {
-    return null;
-  }
-  const filterNames = filterList ? filterList.map((x) => x.filterName) : undefined;
-
-  const filteredFacets = facets
-    ?.filter((x) => x.id !== 'segment')
-    ?.filter((f) => (filterNames ? filterNames.includes(f.id as SearchFilterNameTypes) : true))
-    .sort((a, b) =>
-      filterNames
-        ? filterNames.indexOf(a.id as SearchFilterNameTypes) -
-          filterNames.indexOf(b.id as SearchFilterNameTypes)
-        : 0
-    )
-    .map((x) => {
-      const match = filterList?.find((y) => y.filterName === x.id);
-      if (match?.displayName) {
-        return {
-          ...x,
-          displayName: match.displayName,
-        };
-      }
-      return {
-        ...x,
-        displayName: FacetIdToTitle(x.id),
-      };
-    });
-
-  return (
-    <>
-      {initialFacets && facet && (
-        <FilterPanel
-          filterList={filterList}
-          facet={facet}
-          loading={loading}
-          filteredFacets={filteredFacets}
-          numberOfHits={response?.documentList.numberOfHits || 0}
-          onFilterUpdate={onFilterUpdate}
-          onClose={onClose}
-        />
-      )}
-      <List>
-        {filteredFacets
-          .filter((x) => x.filters.length)
-          .map((f) => {
-            const selected = isSelected(f, queryFilter.searchParams);
-            return (
-              <Item key={f.id}>
-                <Action
-                  onClick={() => onSelectFacet(f)}
-                  title={f.displayName}
-                  aria-label={f.displayName}
-                  className={
-                    selected > 0
-                      ? 'wayke__theme wayke__color--primary-bg wayke__font--bold'
-                      : 'wayke__theme wayke__font--regular'
-                  }
-                >
-                  <Label>{f.displayName}</Label>
-                  {selected > 0 && (
-                    <Indicator>
-                      <IndicatorValue>{selected}</IndicatorValue>
-                    </Indicator>
-                  )}
-                </Action>
-              </Item>
-            );
-          })}
-      </List>
-    </>
-  );
-};
-
-export default Filter;

package/src/components/FilterPanel/checkListFacet.tsx

@@ -1,46 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import Checklist from '../Checklist/index';
-import OverflowBox from '../OverflowBox/index';
-import { Facet, FacetFilter } from '../../@types/search';
-import useSearch from '../../State/Search/useSearch';
-
-interface ChecklistFacetProps {
-  facet: Facet;
-}
-
-const ChecklistFacet = ({ facet }: ChecklistFacetProps) => {
-  const { loading, error, onFilterUpdate } = useSearch();
-  const [selected, setSelected] = useState<{ [key: string]: boolean }>();
-  useEffect(() => {
-    setSelected(undefined);
-  }, [facet, error]);
-
-  const onClick = useCallback(
-    (f: FacetFilter) => {
-      if (!loading) {
-        setSelected({
-          ...selected,
-          [f.displayName]: !f.selected,
-        });
-        onFilterUpdate(f.query);
-      }
-    },
-    [loading]
-  );
-
-  return (
-    <OverflowBox>
-      <Checklist
-        items={facet.filters
-          .sort((a, b) => a.displayName.localeCompare(b.displayName))
-          .map((f) => ({
-            label: f.displayName,
-            onClick: () => onClick(f),
-            active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
-          }))}
-      />
-    </OverflowBox>
-  );
-};
-
-export default ChecklistFacet;

package/src/components/FilterPanel/colorFacet.tsx

@@ -1,47 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-
-import { Facet, FacetFilter } from '../../@types/search';
-import ColorSelect from '../ColorSelect/index';
-import useSearch from '../../State/Search/useSearch';
-import { getHexColorFromDisplayName } from '../../utils/converters';
-
-interface ColorSelectFacetProps {
-  facet: Facet;
-}
-
-const ColorSelectFacet = ({ facet }: ColorSelectFacetProps) => {
-  const { loading, error, onFilterUpdate } = useSearch();
-  const [selected, setSelected] = useState<{ [key: string]: boolean }>();
-
-  useEffect(() => {
-    setSelected(undefined);
-  }, [facet, error]);
-
-  const onClick = useCallback(
-    (f: FacetFilter) => {
-      if (!loading) {
-        setSelected({
-          ...selected,
-          [f.displayName]: !f.selected,
-        });
-        onFilterUpdate(f.query);
-      }
-    },
-    [loading]
-  );
-
-  return (
-    <ColorSelect
-      items={facet.filters
-        .sort((a, b) => a.displayName.localeCompare(b.displayName))
-        .map((f) => ({
-          label: f.displayName,
-          onClick: () => onClick(f),
-          active: selected?.[f.displayName] !== undefined ? selected[f.displayName] : f.selected,
-          hex: [getHexColorFromDisplayName(f.displayName)],
-        }))}
-    />
-  );
-};
-
-export default ColorSelectFacet;