@wayke-se/components-react 3.8.1 → 3.9.0-beta.1

package/dist-src/components/Content/wrapper.js

@@ -1,51 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
-  font-size: 1rem;
-  line-height: 1.5;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: ${size(4)};
-    margin-bottom: ${size(1)};
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-
-    & + p,
-    & + table {
-      margin-top: ${size(1)};
-    }
-  }
-
-  p {
-    margin: ${size(2)} 0;
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  img {
-    display: block;
-    width: 100%;
-  }
-
-  ${({ small }) => small &&
-    css `
-      font-size: 0.875rem;
-    `}
-`;

package/dist-src/components/ContentLogo/index.js

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

package/dist-src/components/DataList/index.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import { List, Item, Label, Value } from './wrapper';
-const DataList = ({ items }) => (React.createElement(List, null, items.map((item) => (React.createElement(Item, { key: item.label },
-    React.createElement(Label, null, item.label),
-    React.createElement(Value, null, item.value))))));
-export default DataList;

package/dist-src/components/DataList/wrapper.js

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-export const List = styled.ul `
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-export const Item = styled.li `
-  display: flex;
-  align-items: flex-start;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-export const Label = styled.div `
-  flex: 1 1 auto;
-`;
-export const Value = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  flex-shrink: 0;
-  padding-left: ${size(2)};
-`;

package/dist-src/components/DetailBox/index.js

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

package/dist-src/components/DetailBox/wrapper.js

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { H2 } from '../Heading/index';
-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 `
-  padding: ${size(2.5)};
-`;
-export const Heading = styled(H2).attrs(() => ({
-    as: 'h1',
-})) `
-  margin-bottom: 0;
-`;
-export const Description = styled.div `
-  margin-top: ${size(1)};
-`;
-export const Footer = styled.div `
-  margin-top: ${size(1)};
-  color: red;
-`;
-export const Foldout = styled.div `
-  background-color: ${(props) => props.theme.color.accent};
-  padding: ${size(2.5)};
-`;

package/dist-src/components/DocumentList/index.js

@@ -1,23 +0,0 @@
-import React, { useMemo } from 'react';
-import { PdfListItem, PdfSubtitle, PdfTitle, List, PdfListInner, PdfLink, PdfColumn, } from './wrapper';
-const translateContentType = (document) => {
-    switch (document.contentType) {
-        case 'application/pdf':
-            return 'PDF';
-        default:
-            const formattedContentType = document.url && document.url.includes('.') ? document.url.split('.').pop() : '';
-            return formattedContentType;
-    }
-};
-export const PdfDownloadItem = ({ document }) => {
-    const contentType = useMemo(() => translateContentType(document), [document]);
-    return (React.createElement(PdfListItem, null,
-        React.createElement(PdfListInner, null,
-            React.createElement(PdfColumn, null,
-                React.createElement(PdfTitle, null, document.name),
-                React.createElement(PdfSubtitle, null, contentType)),
-            React.createElement(PdfColumn, null,
-                React.createElement(PdfLink, { href: document.url, rel: "noopener noreferrer nofollow", target: "_blank" }, "\u00D6ppna")))));
-};
-export const DocumentList = ({ documents }) => (React.createElement(List, null, documents.map((document, i) => (React.createElement(PdfDownloadItem, { key: `${document.url}-${i}`, document: document })))));
-export default DocumentList;

package/dist-src/components/DocumentList/wrapper.js

@@ -1,55 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-export const PdfListItem = styled.li.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
-  flex: 0 0 50%;
-  padding: ${size(1)};
-
-  ${({ theme }) => theme.breakpoint.LtSm} {
-    flex: 0 0 100%;
-  }
-`;
-export const List = styled.ul `
-  list-style: none;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  margin: ${size(-1)};
-`;
-export const PdfLink = styled.a.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-})) `
-  text-decoration: none;
-  font-size: 0.875rem;
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-`;
-export const PdfTitle = styled.div `
-  color: ${(props) => props.theme.color.textDark};
-`;
-export const PdfSubtitle = styled.div `
-  color: ${(props) => props.theme.color.textDarkLighten};
-`;
-export const PdfColumn = styled.div `
-  flex: 0 0 auto;
-  &:first-child {
-    flex: 1 1 auto;
-  }
-`;
-export const PdfListInner = styled.div `
-  position: relative;
-  border: 1px solid ${(props) => props.theme.color.border};
-  padding: ${size(1.5)};
-  display: flex;
-  align-items: center;
-  :hover {
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-  }
-`;

package/dist-src/components/ExtendContent/index.js

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

package/dist-src/components/ExtendContent/wrapper.js

@@ -1,32 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.div ``;
-export const Extend = styled.div `
-  position: relative;
-  max-height: 175px;
-  overflow: hidden;
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: ${size(6)};
-    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-  }
-
-  ${({ extended }) => extended &&
-    css `
-      max-height: none;
-
-      :after {
-        content: none;
-      }
-    `}
-`;
-export const Action = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  margin-top: ${size(2)};
-`;

package/dist-src/components/ExtendInfo/index.js

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

package/dist-src/components/ExtendInfo/wrapper.js

@@ -1,56 +0,0 @@
-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 `
-  display: flex;
-  align-items: center;
-`;
-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',
-})) `
-  position: relative;
-  display: block;
-  font: inherit;
-  font-size: 1em;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-0.5)};
-    bottom: ${size(-0.5)};
-    left: ${size(-0.5)};
-    right: ${size(-0.5)};
-    background-color: ${(props) => props.theme.color.accentDark};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-export const Extend = styled.div `
-  padding-top: ${size(1)};
-  margin-top: ${size(1)};
-  border-top: 1px solid ${(props) => props.theme.color.border};
-  font-size: 0.875em;
-`;

package/dist-src/components/Filter/index.js

@@ -1,64 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { List, Item, Action, Label, Indicator, IndicatorValue } from './wrapper';
-import { FacetIdToTitle } from '../../utils/formats';
-import { PRICE, MILEAGE, MODEL_YEAR, LEASING_PRICE, BUSINESS_LEASING_PRICE, } from '../../utils/constants';
-import useSearch from '../../State/Search/useSearch';
-import FilterPanel from '../FilterPanel/index';
-const isSelected = (f, searchParams) => {
-    switch (f.id) {
-        case PRICE:
-        case MILEAGE:
-        case LEASING_PRICE:
-        case BUSINESS_LEASING_PRICE:
-        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;
-    }
-};
-const Filter = ({ filterList }) => {
-    const { queryFilter, initialFacets, loading, response, onFilterUpdate } = useSearch();
-    const facets = response?.facets;
-    const [facet, setFacet] = useState();
-    const onSelectFacet = useCallback((nextFacet) => 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) : true))
-        .sort((a, b) => filterNames
-        ? filterNames.indexOf(a.id) -
-            filterNames.indexOf(b.id)
-        : 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 (React.createElement(React.Fragment, null,
-        initialFacets && facet && (React.createElement(FilterPanel, { filterList: filterList, facet: facet, loading: loading, filteredFacets: filteredFacets, numberOfHits: response?.documentList.numberOfHits || 0, onFilterUpdate: onFilterUpdate, onClose: onClose })),
-        React.createElement(List, null, filteredFacets
-            .filter((x) => x.filters.length)
-            .map((f) => {
-            const selected = isSelected(f, queryFilter.searchParams);
-            return (React.createElement(Item, { key: f.id },
-                React.createElement(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' },
-                    React.createElement(Label, null, f.displayName),
-                    selected > 0 && (React.createElement(Indicator, null,
-                        React.createElement(IndicatorValue, null, selected))))));
-        }))));
-};
-export default Filter;

package/dist-src/components/Filter/wrapper.js

@@ -1,72 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-export const List = styled.ul `
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-0.5)};
-`;
-export const Item = styled.li `
-  padding: ${size(0.5)};
-`;
-export const Action = styled(ButtonReset) `
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: ${size(1.5)} ${size(3)};
-  background-color: ${(props) => props.theme.color.accentDark};
-  border-radius: 3px;
-  font-size: 0.875rem;
-  line-height: 1;
-  transform-origin: 50% 50%;
-  transition: transform 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-export const Label = styled.div `
-  z-index: 1;
-`;
-export const Indicator = styled.div `
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 ${size(0.375)};
-  margin-left: ${size(0.5)};
-  background-color: currentColor;
-  min-width: 1em;
-  height: 1em;
-  border-radius: 999px;
-  z-index: 1;
-`;
-export const IndicatorValue = styled.div `
-  font-family: sans-serif; // Default font to guarantee visibility
-  font-size: 0.75rem;
-  font-weight: bold;
-  color: white;
-  mix-blend-mode: difference;
-`;

package/dist-src/components/FilterPanel/checkListFacet.js

@@ -1,29 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import Checklist from '../Checklist/index';
-import OverflowBox from '../OverflowBox/index';
-import useSearch from '../../State/Search/useSearch';
-const ChecklistFacet = ({ facet }) => {
-    const { loading, error, onFilterUpdate } = useSearch();
-    const [selected, setSelected] = useState();
-    useEffect(() => {
-        setSelected(undefined);
-    }, [facet, error]);
-    const onClick = useCallback((f) => {
-        if (!loading) {
-            setSelected({
-                ...selected,
-                [f.displayName]: !f.selected,
-            });
-            onFilterUpdate(f.query);
-        }
-    }, [loading]);
-    return (React.createElement(OverflowBox, null,
-        React.createElement(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,
-            })) })));
-};
-export default ChecklistFacet;

package/dist-src/components/FilterPanel/colorFacet.js

@@ -1,29 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import ColorSelect from '../ColorSelect/index';
-import useSearch from '../../State/Search/useSearch';
-import { getHexColorFromDisplayName } from '../../utils/converters';
-const ColorSelectFacet = ({ facet }) => {
-    const { loading, error, onFilterUpdate } = useSearch();
-    const [selected, setSelected] = useState();
-    useEffect(() => {
-        setSelected(undefined);
-    }, [facet, error]);
-    const onClick = useCallback((f) => {
-        if (!loading) {
-            setSelected({
-                ...selected,
-                [f.displayName]: !f.selected,
-            });
-            onFilterUpdate(f.query);
-        }
-    }, [loading]);
-    return (React.createElement(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/dist-src/components/FilterPanel/faceSelector.js

@@ -1,32 +0,0 @@
-import React from 'react';
-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, BUSINESS_LEASING_PRICE, } from '../../utils/constants';
-const FacetSelector = ({ facet }) => {
-    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 React.createElement(CheckListFacet, { facet: facet });
-        case COLOR:
-            return React.createElement(ColorSelectFacet, { facet: facet });
-        case PRICE:
-            return React.createElement(RangeFacet, { facet: facet, unit: "kr", formatValues: true });
-        case BUSINESS_LEASING_PRICE:
-        case LEASING_PRICE:
-            return React.createElement(RangeFacet, { facet: facet, unit: "kr/m\u00E5n", formatValues: true });
-        case MILEAGE:
-            return React.createElement(RangeFacet, { facet: facet, unit: "mil", formatValues: true });
-        case MODEL_YEAR:
-            return React.createElement(RangeFacet, { facet: facet, unit: "\u00E5r" });
-        default:
-            return null;
-    }
-};
-export default FacetSelector;

package/dist-src/components/FilterPanel/index.js

@@ -1,24 +0,0 @@
-import React, { useCallback } from 'react';
-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';
-const FilterPanel = ({ facet, filteredFacets, numberOfHits, loading, onFilterUpdate, onClose, }) => {
-    const onClearFilters = useCallback(() => onFilterUpdate(''), []);
-    return (React.createElement(Panel, { title: "Filtrera", onClose: onClose, footer: React.createElement(React.Fragment, null,
-            React.createElement(FooterAction, null,
-                React.createElement(FooterActionItem, null,
-                    React.createElement(ButtonSecondary, { fullWidth: true, disabled: loading, onClick: onClearFilters },
-                        React.createElement(ButtonContent, null, "Rensa alla"))),
-                React.createElement(FooterActionItem, null,
-                    React.createElement(ButtonPrimary, { fullWidth: true, disabled: loading, onClick: onClose },
-                        React.createElement(ButtonContent, null, `Visa ${numberOfHits} ${numberOfHits === 1 ? 'bil' : 'bilar'}`))))) },
-        React.createElement(Accordion, null, filteredFacets
-            .filter((x) => x.filters.length)
-            .map((f) => (React.createElement(AccordionItem, { key: f.displayName, heading: f.displayName, isActive: f.id === facet?.id },
-            React.createElement(Repeat, null,
-                React.createElement(FacetSelector, { facet: f }))))))));
-};
-export default FilterPanel;