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

package/src/components/DetailBox/index.tsx

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

@@ -1,27 +1,34 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { H2 } from '../Heading/index';
-export const Wrapper = styled.article `
+
+export const Wrapper = styled.article`
   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
   border-radius: 3px;
   overflow: hidden;
 `;
-export const Main = styled.div `
+
+export const Main = styled.div`
   padding: ${size(2.5)};
 `;
+
 export const Heading = styled(H2).attrs(() => ({
-    as: 'h1',
-})) `
+  as: 'h1',
+}))`
   margin-bottom: 0;
 `;
-export const Description = styled.div `
+
+export const Description = styled.div`
   margin-top: ${size(1)};
 `;
-export const Footer = styled.div `
+
+export const Footer = styled.div`
   margin-top: ${size(1)};
   color: red;
 `;
-export const Foldout = styled.div `
+
+export const Foldout = styled.div`
   background-color: ${(props) => props.theme.color.accent};
   padding: ${size(2.5)};
 `;

package/src/components/ExtendContent/index.tsx

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

@@ -1,7 +1,14 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div ``;
-export const Extend = styled.div `
+
+export const Wrapper = styled.div``;
+
+type ExtendProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  extended?: boolean;
+};
+
+export const Extend = styled.div<ExtendProps>`
   position: relative;
   max-height: 175px;
   overflow: hidden;
@@ -16,8 +23,9 @@ export const Extend = styled.div `
     background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
   }
 
-  ${({ extended }) => extended &&
-    css `
+  ${({ extended }) =>
+    extended &&
+    css`
       max-height: none;
 
       :after {
@@ -25,7 +33,8 @@ export const Extend = styled.div `
       }
     `}
 `;
-export const Action = styled.div `
+
+export const Action = styled.div`
   display: flex;
   justify-content: flex-end;
   margin-top: ${size(2)};

package/src/components/ExtendInfo/index.tsx

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

@@ -1,18 +1,24 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-export const Wrapper = styled.div ``;
-export const Header = styled.div `
+
+export const Wrapper = styled.div``;
+
+export const Header = styled.div`
   display: flex;
   align-items: center;
 `;
-export const Title = styled.div ``;
-export const Info = styled.div `
+
+export const Title = styled.div``;
+
+export const Info = styled.div`
   margin-left: ${size(1)};
 `;
+
 export const InfoBtn = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))`
   position: relative;
   display: block;
   font: inherit;
@@ -48,7 +54,8 @@ export const InfoBtn = styled(ButtonReset).attrs(() => ({
     transform: scale(0.95);
   }
 `;
-export const Extend = styled.div `
+
+export const Extend = styled.div`
   padding-top: ${size(1)};
   margin-top: ${size(1)};
   border-top: 1px solid ${(props) => props.theme.color.border};

package/src/components/Filter/index.tsx

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

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-export const List = styled.ul `
+
+export const List = styled.ul`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -9,10 +11,12 @@ export const List = styled.ul `
   padding: 0;
   margin: ${size(-0.5)};
 `;
-export const Item = styled.li `
+
+export const Item = styled.li`
   padding: ${size(0.5)};
 `;
-export const Action = styled(ButtonReset) `
+
+export const Action = styled(ButtonReset)`
   position: relative;
   display: flex;
   align-items: center;
@@ -47,10 +51,12 @@ export const Action = styled(ButtonReset) `
     transform: scale(0.95);
   }
 `;
-export const Label = styled.div `
+
+export const Label = styled.div`
   z-index: 1;
 `;
-export const Indicator = styled.div `
+
+export const Indicator = styled.div`
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -63,7 +69,8 @@ export const Indicator = styled.div `
   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;

package/src/components/FilterPanel/checkListFacet.tsx

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

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

package/src/components/FilterPanel/faceSelector.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Facet } from '../../@types/search';
+import CheckListFacet from './checkListFacet';
+import ColorSelectFacet from './colorFacet';
+import RangeFacet from './rangeFacet';
+import {
+  MANUFACTURER,
+  MODEL_SERIES,
+  FUEL_TYPE,
+  GEARBOX_TYPE,
+  ENVIRONMENT_CLASS,
+  SEGMENT,
+  DRIVING_WHEEL,
+  COLOR,
+  PRICE,
+  BRANCH,
+  MILEAGE,
+  MODEL_YEAR,
+  LEASING_PRICE,
+} from '../../utils/constants';
+
+interface FacetSelectorProps {
+  facet: Facet;
+}
+
+const FacetSelector = ({ facet }: FacetSelectorProps) => {
+  switch (facet.id) {
+    case MANUFACTURER:
+    case MODEL_SERIES:
+    case FUEL_TYPE:
+    case GEARBOX_TYPE:
+    case BRANCH:
+    case ENVIRONMENT_CLASS:
+    case SEGMENT:
+    case DRIVING_WHEEL:
+      return <CheckListFacet facet={facet} />;
+    case COLOR:
+      return <ColorSelectFacet facet={facet} />;
+    case PRICE:
+      return <RangeFacet facet={facet} unit="kr" formatValues />;
+    case LEASING_PRICE:
+      return <RangeFacet facet={facet} unit="kr/mån" formatValues />;
+    case MILEAGE:
+      return <RangeFacet facet={facet} unit="mil" formatValues />;
+    case MODEL_YEAR:
+      return <RangeFacet facet={facet} unit="år" />;
+    default:
+      return null;
+  }
+};
+
+export default FacetSelector;

package/src/components/FilterPanel/index.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+
+import { Facet } from '../../@types/search';
+import Panel from '../Panel/index';
+import { FooterAction, FooterActionItem } from '../Panel/wrapper';
+import { ButtonSecondary, ButtonContent, ButtonPrimary } from '../Button/index';
+import Accordion, { AccordionItem } from '../Accordion/index';
+import { Repeat } from '../Repeat/index';
+import FacetSelector from './faceSelector';
+import { SearchFilterTypes } from '../../@types/filter';
+
+export interface FilterProps {
+  label: string;
+  activeFilters?: number;
+}
+
+export interface Props {
+  facet?: Facet;
+  loading: boolean;
+  filteredFacets: Facet[];
+  filterList?: SearchFilterTypes[];
+  numberOfHits: number;
+  onClose: () => void;
+  onFilterUpdate: (nextQuery: string) => void;
+}
+
+const FilterPanel = ({
+  facet,
+  filteredFacets,
+  numberOfHits,
+  loading,
+  onFilterUpdate,
+  onClose,
+}: Props) => {
+  const onClearFilters = useCallback(() => onFilterUpdate(''), []);
+
+  return (
+    <Panel
+      title="Filtrera"
+      onClose={onClose}
+      footer={
+        <>
+          <FooterAction>
+            <FooterActionItem>
+              <ButtonSecondary fullWidth disabled={loading} onClick={onClearFilters}>
+                <ButtonContent>Rensa alla</ButtonContent>
+              </ButtonSecondary>
+            </FooterActionItem>
+            <FooterActionItem>
+              <ButtonPrimary fullWidth disabled={loading} onClick={onClose}>
+                <ButtonContent>{`Visa ${numberOfHits} ${
+                  numberOfHits === 1 ? 'bil' : 'bilar'
+                }`}</ButtonContent>
+              </ButtonPrimary>
+            </FooterActionItem>
+          </FooterAction>
+        </>
+      }
+    >
+      <Accordion>
+        {filteredFacets
+          .filter((x) => x.filters.length)
+          .map((f) => (
+            <AccordionItem
+              key={f.displayName}
+              heading={f.displayName}
+              isActive={f.id === facet?.id}
+            >
+              <Repeat>
+                <FacetSelector facet={f} />
+              </Repeat>
+            </AccordionItem>
+          ))}
+      </Accordion>
+    </Panel>
+  );
+};
+
+export default FilterPanel;