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

package/src/components/ColorSelect/index.tsx

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

@@ -1,20 +1,24 @@
 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`
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
   margin: ${size(-1.5)};
 `;
-export const Item = styled.li `
+
+export const Item = styled.li`
   flex: 1 1 auto;
   width: 33.333%;
   max-width: 33.333%;
   padding: ${size(1.5)};
 `;
-export const Action = styled(ButtonReset) `
+
+export const Action = styled(ButtonReset)`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -26,7 +30,13 @@ export const Action = styled(ButtonReset) `
     cursor: default;
   }
 `;
-export const Color = styled.div `
+
+type ColorProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  active?: boolean;
+  boxShadow?: boolean;
+};
+
+export const Color = styled.div<ColorProps>`
   position: relative;
   width: ${size(3.75)};
   height: ${size(3.75)};
@@ -51,19 +61,22 @@ export const Color = styled.div `
     }
   }
 
-  ${({ active }) => active &&
-    css `
+  ${({ active }) =>
+    active &&
+    css`
       :before {
         display: block;
       }
     `}
 
-  ${({ boxShadow }) => boxShadow &&
-    css `
+  ${({ boxShadow }) =>
+    boxShadow &&
+    css`
       box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
     `}
 `;
-export const Label = styled.div `
+
+export const Label = styled.div`
   margin-top: ${size(1.25)};
   font-size: 0.875rem;
 `;

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

@@ -1,10 +1,13 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const ColumnRow = styled.div `
+
+export const ColumnRow = styled.div`
   display: flex;
   align-items: flex-start;
 `;
-export const ColumnRowItem = styled.div `
+
+export const ColumnRowItem = styled.div`
   flex: 1 1 auto;
 
   :last-child:not(:only-child) {

package/src/components/Container/index.tsx

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

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   width: 100%;
   max-width: ${(props) => props.theme.distances.containerMaxWidth};
   margin: 0 auto;

package/src/components/Content/index.tsx

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

@@ -1,6 +1,15 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
+
+type WrapperProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+> & {
+  small?: boolean;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
   font-size: 1rem;
   line-height: 1.5;
 
@@ -44,8 +53,9 @@ export const Wrapper = styled.div `
     width: 100%;
   }
 
-  ${({ small }) => small &&
-    css `
+  ${({ small }) =>
+    small &&
+    css`
       font-size: 0.875rem;
     `}
 `;

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

@@ -1,17 +1,21 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const ContentLogo = styled.div `
+
+export const ContentLogo = styled.div`
   ${(props) => props.theme.breakpoint.Sm} {
     display: flex;
     align-items: flex-start;
   }
 `;
-export const ContentLogoText = styled.div `
+
+export const ContentLogoText = styled.div`
   ${(props) => props.theme.breakpoint.Sm} {
     flex: 1 1 auto;
   }
 `;
-export const ContentLogoMedia = styled.div `
+
+export const ContentLogoMedia = styled.div`
   ${(props) => props.theme.breakpoint.LtSm} {
     margin-top: ${size(2)};
   }

package/src/components/DataList/index.tsx

@@ -0,0 +1,25 @@
+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/{dist-src/components/DataList/wrapper.js → src/components/DataList/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`
   display: flex;
   align-items: flex-start;
 
@@ -13,12 +16,14 @@ export const Item = styled.li `
     margin-top: ${size(1)};
   }
 `;
-export const Label = styled.div `
+
+export const Label = styled.div`
   flex: 1 1 auto;
 `;
+
 export const Value = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
+  className: 'wayke__theme wayke__font--bold',
+}))`
   flex-shrink: 0;
   padding-left: ${size(2)};
 `;

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;