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

package/dist-src/hooks/useSessionStorage.js

@@ -0,0 +1,23 @@
+import { useState, useCallback } from 'react';
+const useSessionStorage = (key) => {
+    const [value, setValue] = useState(sessionStorage.getItem(key));
+    const set = useCallback((v) => {
+        sessionStorage.setItem(key, v);
+        setValue(v);
+    }, [key]);
+    const remove = useCallback(() => {
+        sessionStorage.removeItem(key);
+        setValue(null);
+    }, [key]);
+    const clear = useCallback(() => {
+        sessionStorage.clear();
+        setValue(null);
+    }, [key]);
+    return {
+        value,
+        set,
+        remove,
+        clear,
+    };
+};
+export default useSessionStorage;

package/dist-src/hooks/useVimeoThumbnail.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import useFetch from './useFetch';
+const useVimeoThumbnail = (id, small) => {
+    const [thumbnail, setThumbnail] = useState();
+    const { data } = useFetch(`http://vimeo.com/api/v2/video/${id}.json`, {}, !id || !!thumbnail, true);
+    useEffect(() => {
+        if (data === null || data === void 0 ? void 0 : data[0]) {
+            if (small && data[0].thumbnail_small) {
+                setThumbnail(data[0].thumbnail_small);
+            }
+            else if (data[0].thumbnail_large) {
+                setThumbnail(data[0].thumbnail_large);
+            }
+        }
+    }, [data]);
+    return thumbnail;
+};
+export default useVimeoThumbnail;

package/dist-src/index.js

@@ -0,0 +1,10 @@
+import WaykeSearch from './layouts/search/index';
+import WaykeSearchItem from './layouts/searchItem/index';
+import WaykeProvider from './providers/WaykeProvider';
+import WaykeComposite from './layouts/WaykeCompositeWithProvider';
+import SearchBar from './components/SearchBar/index';
+import WaykeThemeProvider from './providers/themeProvider';
+import WaykeItemProvider from './providers/WaykeItemProvidet';
+import WaykePubSub from './utils/pubsub/pubsub';
+export { WaykeProvider, WaykeItemProvider, WaykeSearch, WaykeSearchItem, SearchBar, WaykeThemeProvider, WaykePubSub, };
+export default WaykeComposite;

package/dist-src/layout/helpers.js

@@ -0,0 +1,5 @@
+import theme from './theme';
+export const size = (multiplier = 1) => {
+    const baseUnit = parseFloat(theme.distances.baseUnit);
+    return `${multiplier * baseUnit}px`;
+};

package/{src/layout/keyframes.tsx → dist-src/layout/keyframes.js}

@@ -1,12 +1,10 @@
 import { keyframes } from 'styled-components';
-
-export const noTransform = keyframes`
+export const noTransform = keyframes `
     to {
         transform: none;
     }
 `;
-
-export const fadeIn = keyframes`
+export const fadeIn = keyframes `
     from {
         opacity: 0;
     }
@@ -15,8 +13,7 @@ export const fadeIn = keyframes`
         opacity: 1;
     }
 `;
-
-export const rotate = keyframes`
+export const rotate = keyframes `
     to {
         transform: rotate(360deg);
     }

package/dist-src/layout/theme.js

@@ -0,0 +1,57 @@
+const _colors = {
+    black: '#000',
+    white: '#fff',
+    gray: '#ddd',
+    grayLight: '#f8f8f8',
+    grayLightTransparent: 'rgba(248, 248, 248, 0)',
+    grayLightDarker: '#ebebeb',
+    grayDark: '#717171',
+    blue: '#1d61ca',
+    ui: {
+        greenLight: '#cdf5c8',
+        green: '#2b8747',
+        redLight: '#ffd0d0',
+        red: '#c71f1f',
+        yellowLight: '#fff4c7',
+        blueLight: '#daf7fc',
+    },
+};
+const theme = {
+    color: {
+        bg: _colors.white,
+        link: _colors.blue,
+        accent: _colors.grayLight,
+        accentTransparent: _colors.grayLightTransparent,
+        accentDark: _colors.grayLightDarker,
+        border: _colors.gray,
+        textDark: _colors.black,
+        textDarkLighten: _colors.grayDark,
+        textLight: _colors.white,
+        hoverOverlay: 'rgba(0, 0, 0, 0.04)',
+        disabledBg: _colors.gray,
+        disabledText: _colors.grayDark,
+        placeholder: _colors.grayDark,
+        ui: {
+            positiveLight: _colors.ui.greenLight,
+            positive: _colors.ui.green,
+            neutralLight: _colors.ui.yellowLight,
+            negativeLight: _colors.ui.redLight,
+            negative: _colors.ui.red,
+            infoLight: _colors.ui.blueLight,
+        },
+    },
+    breakpoint: {
+        Sm: '@media (min-width: 600px)',
+        LtSm: '@media (max-width: 599px)',
+        Md: '@media (min-width: 900px)',
+        LtMd: '@media (max-width: 899px)',
+        Lg: '@media (min-width: 1200px)',
+        LtLg: '@media (max-width: 1199px)',
+    },
+    distances: {
+        baseUnit: '8px',
+        inputHeight: '48px',
+        containerMaxWidth: '1312px',
+    },
+};
+export default theme;

package/dist-src/layouts/WaykeComposite.js

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import useHashGuid from '../hooks/useHashGuid';
+import PubSub from '../utils/pubsub/pubsub';
+import WaykeSearch from './search/index';
+import WaykeSearchItem from './searchItem/index';
+import usePath from '../State/Path/usePath';
+const WaykeComposite = ({ filterList, initialQueryParams, removeSearchBar, removeFilterOptions, disableResetScrollOnInit, placeholderImage, pathRoute, modifyDocumentTitleItem, modifyDocumentTitleSearch, }) => {
+    const hashId = useHashGuid();
+    const { id: pathId } = usePath();
+    useEffect(() => {
+        if (!pathRoute) {
+            if (hashId) {
+                PubSub.publish('HashRouteChange', hashId);
+            }
+            else {
+                PubSub.publish('HashRouteChange');
+            }
+        }
+    }, [hashId]);
+    const id = pathId || hashId;
+    return (React.createElement(React.Fragment, null, id ? (React.createElement(WaykeSearchItem, { id: id, hashRoute: !pathRoute, disableResetScrollOnInit: disableResetScrollOnInit, placeholderImage: placeholderImage, pathRoute: pathRoute, modifyDocumentTitleItem: modifyDocumentTitleItem })) : (React.createElement(WaykeSearch, { filterList: filterList, initialQueryParams: initialQueryParams, removeSearchBar: removeSearchBar, hashRoute: !pathRoute, placeholderImage: placeholderImage, pathRoute: pathRoute, removeFilterOptions: removeFilterOptions, modifyDocumentTitleSearch: modifyDocumentTitleSearch }))));
+};
+export default WaykeComposite;

package/dist-src/layouts/WaykeCompositeWithProvider.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import WaykeProvider from '../providers/WaykeProvider';
+import WaykeComposite from './WaykeComposite';
+const WaykeCompositeWithProvider = ({ provider, composite }) => (React.createElement(WaykeProvider, { ...provider },
+    React.createElement(WaykeComposite, { ...composite })));
+export default WaykeCompositeWithProvider;

package/dist-src/layouts/search/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useCallback, useMemo } from 'react';
+import Container from '../../components/Container/index';
+import { Page, PageSection } from '../../components/Page/index';
+import Result from '../../components/Result/index';
+import Filter from '../../components/Filter/index';
+import Grid from '../../components/Grid/index';
+import SearchTerm from '../../components/SearchTerm/index';
+import { PortalElement, PortalNamespace } from '../../components/Portal/index';
+import SearchFilter from '../../components/SearchFilter/index';
+import Snackbar from '../../components/Snackbar/index';
+import useSearch from '../../State/Search/useSearch';
+import PubSub from '../../utils/pubsub/pubsub';
+const WaykeSearch = ({ filterList, initialQueryParams, hashRoute, pathRoute, removeSearchBar, placeholderImage, removeFilterOptions, modifyDocumentTitleSearch, onClickSearchItem, }) => {
+    const { error, documents, queryFilter, onFilterUpdate, onInitialize } = useSearch();
+    useEffect(() => {
+        if (modifyDocumentTitleSearch) {
+            document.title = modifyDocumentTitleSearch;
+        }
+        onInitialize(typeof initialQueryParams === 'string'
+            ? new URLSearchParams(initialQueryParams)
+            : initialQueryParams);
+    }, []);
+    const onItemClicked = useCallback((id) => {
+        PubSub.publish('ItemClicked', id);
+        if (onClickSearchItem) {
+            onClickSearchItem(id);
+        }
+    }, []);
+    const onClearQuery = useCallback(() => {
+        const nextQuery = new URLSearchParams(queryFilter.searchParams);
+        nextQuery.delete('query');
+        onFilterUpdate(nextQuery.toString());
+    }, [queryFilter.searchParams]);
+    const searchQuery = useMemo(() => queryFilter.searchParams.get('query'), [documents]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Page, null,
+            !removeSearchBar && (React.createElement(PageSection, null,
+                React.createElement(Container, null,
+                    React.createElement(SearchFilter, null)))),
+            searchQuery && (React.createElement(PageSection, null,
+                React.createElement(Container, null,
+                    React.createElement(SearchTerm, { onClear: onClearQuery }, searchQuery)))),
+            !removeFilterOptions && (React.createElement(PageSection, null,
+                React.createElement(Container, null,
+                    React.createElement(Filter, { filterList: filterList })))),
+            React.createElement(PageSection, { accent: true, fillSpace: true, className: "wayke__theme wayke__color--accent-bg" },
+                React.createElement(Container, null,
+                    React.createElement(Result, null,
+                        React.createElement(React.Fragment, null,
+                            error && (React.createElement(Snackbar, { severity: "error", icon: true, heading: "Ett fel har intr\u00E4ffat" }, "V\u00E4nligen f\u00F6rs\u00F6k igen.")),
+                            !error && documents && documents.length > 0 && (React.createElement(Grid, { hashRoute: hashRoute, pathRoute: pathRoute, onClickItem: onItemClicked, documents: documents, placeholderImage: placeholderImage })),
+                            !error && documents && documents.length === 0 && (React.createElement(Snackbar, { severity: "warning", icon: true, heading: "Inga resultat" }, "Det finns inga resultat som matchar din s\u00F6kning."))))))),
+        React.createElement(PortalElement, { id: PortalNamespace.DefaultPortal })));
+};
+export default WaykeSearch;

package/dist-src/layouts/searchItem/Branch.js

@@ -0,0 +1,54 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Repeat } from '../../components/Repeat/index';
+import Content from '../../components/Content/index';
+import { ProductPageContentLimit } from '../../components/ProductPage/index';
+import { H2 } from '../../components/Heading/index';
+import { ButtonContent, ButtonInline, ButtonInlineBold } from '../../components/Button/index';
+import { TableColumn, TableColumnRow, TableColumnCell } from '../../components/TableColumn/index';
+import OpeningHours from '../../components/OpeningHours/index';
+import PhoneNumber from '../../components/PhoneNumber/index';
+import Map from '../../components/Map/index';
+import BranchModal from './BranchModal';
+import { formatPhonenumber } from '../../utils/phonenumbers';
+const Branch = ({ branch, loading }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const [modal, setModal] = useState(false);
+    const openModal = useCallback(() => setModal(true), []);
+    const closeModal = useCallback(() => setModal(false), []);
+    useEffect(() => {
+        if (branch && modal) {
+            setModal(false);
+        }
+    }, [branch]);
+    if (!branch) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        modal && (React.createElement(BranchModal, { loading: loading, connections: branch === null || branch === void 0 ? void 0 : branch.connections, onClose: closeModal })),
+        React.createElement(Repeat, null,
+            React.createElement(H2, { noMargin: true }, ((_a = branch === null || branch === void 0 ? void 0 : branch.location) === null || _a === void 0 ? void 0 : _a.city)
+                ? `Den här bilen finns på vår anläggning i ${(_b = branch === null || branch === void 0 ? void 0 : branch.location) === null || _b === void 0 ? void 0 : _b.city}`
+                : 'Kontakt')),
+        React.createElement(Repeat, null,
+            React.createElement(Map, { position: (_c = branch === null || branch === void 0 ? void 0 : branch.location) === null || _c === void 0 ? void 0 : _c.position })),
+        (((_d = branch === null || branch === void 0 ? void 0 : branch.connections) === null || _d === void 0 ? void 0 : _d.length) || 0) > 1 && (React.createElement(Repeat, null,
+            React.createElement(Content, null,
+                React.createElement("p", null,
+                    "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar.",
+                    ' ',
+                    React.createElement(ButtonInline, { as: "span", role: "button", onClick: openModal, inline: true }, "Klicka h\u00E4r f\u00F6r att visa kontaktuppgifter till en annan anl\u00E4ggning"),
+                    ".")))),
+        React.createElement(Repeat, null,
+            React.createElement(ProductPageContentLimit, null,
+                React.createElement(Repeat, null,
+                    React.createElement(TableColumn, null,
+                        ((_e = branch === null || branch === void 0 ? void 0 : branch.location) === null || _e === void 0 ? void 0 : _e.streetAddress) && ((_f = branch === null || branch === void 0 ? void 0 : branch.location) === null || _f === void 0 ? void 0 : _f.city) && (React.createElement(TableColumnRow, null,
+                            React.createElement(TableColumnCell, null, "Adress"),
+                            React.createElement(TableColumnCell, null,
+                                React.createElement(ButtonInlineBold, null,
+                                    React.createElement(ButtonContent, null, `${(_g = branch === null || branch === void 0 ? void 0 : branch.location) === null || _g === void 0 ? void 0 : _g.streetAddress}, ${(_h = branch === null || branch === void 0 ? void 0 : branch.location) === null || _h === void 0 ? void 0 : _h.city}`))))),
+                        ((_j = branch === null || branch === void 0 ? void 0 : branch.contact) === null || _j === void 0 ? void 0 : _j.phonenumber) && (React.createElement(PhoneNumber, { phoneNumber: formatPhonenumber(branch.contact.phonenumber) })))),
+                (branch === null || branch === void 0 ? void 0 : branch.openingHours) && (React.createElement(Repeat, null,
+                    React.createElement(OpeningHours, { openingHours: branch.openingHours })))))));
+};
+export default Branch;

package/dist-src/layouts/searchItem/BranchModal.js

@@ -0,0 +1,36 @@
+import React, { useState, useCallback, useContext } from 'react';
+import { Repeat, RepeatTiny } from '../../components/Repeat/index';
+import InputSelect from '../../components/InputSelect/index';
+import { ButtonPrimary, ButtonContent } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+import InputLabel from '../../components/InputLabel/index';
+import { CentralStorageContext } from '../../State/CentralStorage/CentralStorageContext';
+const BranchModal = ({ loading, connections, onClose }) => {
+    const { centralStorageId, setCentralStorageId } = useContext(CentralStorageContext);
+    const [localValue, setLocalValue] = useState(centralStorageId);
+    const onConfirm = useCallback((id) => {
+        if (id) {
+            setCentralStorageId(id);
+        }
+    }, []);
+    const onChange = useCallback((e) => setLocalValue(e.currentTarget.value), []);
+    if (!localValue) {
+        return null;
+    }
+    return (React.createElement(Modal, { title: "Byt anl\u00E4ggning", onClose: onClose },
+        React.createElement(Repeat, null,
+            React.createElement(RepeatTiny, null,
+                React.createElement(Content, null,
+                    React.createElement("p", null, "V\u00E4lj den anl\u00E4ggning du vill visa kontaktuppgifter f\u00F6r."))),
+            React.createElement(RepeatTiny, null,
+                React.createElement(InputLabel, null, "V\u00E4lj anl\u00E4ggning"),
+                React.createElement(InputSelect, { value: localValue, onChange: onChange, options: connections === null || connections === void 0 ? void 0 : connections.map((x) => ({
+                        value: x.id,
+                        displayName: x.name,
+                    })), title: "V\u00E4lj anl\u00E4ggning" }))),
+        React.createElement(Repeat, null,
+            React.createElement(ButtonPrimary, { disabled: loading, fullWidth: true, onClick: () => onConfirm(localValue) },
+                React.createElement(ButtonContent, null, "V\u00E4lj")))));
+};
+export default BranchModal;

package/dist-src/layouts/searchItem/CheckList.js

@@ -0,0 +1,65 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Repeat, RepeatTiny } from '../../components/Repeat/index';
+import ActionList from '../../components/ActionList/index';
+import { ButtonPrimary, ButtonContent, ButtonInline } from '../../components/Button/index';
+import CheckMarkList, { CheckMarkListItem } from '../../components/CheckMarkList/index';
+import Content from '../../components/Content/index';
+import SwitchBar from '../../components/SwitchBar/index';
+import BranchModal from './BranchModal';
+import PackageOptionModal from './PackageOptionModal';
+const CheckList = ({ manufacturer, packageOptions, ecommerce, branch, contact, toggleEcomModal, loadingCentralStorageVehicle, }) => {
+    const [modalBranch, setModalBranch] = useState(false);
+    const openModalBranch = useCallback(() => setModalBranch(true), []);
+    const closeModalBranch = useCallback(() => setModalBranch(false), []);
+    const [modal, setModal] = useState();
+    const onOpen = useCallback((nextModal) => setModal(nextModal), []);
+    const onClose = useCallback(() => setModal(undefined), []);
+    useEffect(() => {
+        if ((branch || contact) && modalBranch) {
+            setModalBranch(false);
+        }
+    }, [branch, contact]);
+    const packageOption = manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.packageOption;
+    return (React.createElement(React.Fragment, null,
+        modalBranch && (React.createElement(BranchModal, { loading: loadingCentralStorageVehicle, connections: branch === null || branch === void 0 ? void 0 : branch.connections, onClose: closeModalBranch })),
+        modal && React.createElement(PackageOptionModal, { packageOption: modal, onClose: onClose }),
+        React.createElement(Repeat, null,
+            React.createElement(CheckMarkList, null,
+                (packageOption === null || packageOption === void 0 ? void 0 : packageOption.title) && (React.createElement(CheckMarkListItem, null,
+                    React.createElement(React.Fragment, null,
+                        "Inkl.",
+                        ' ',
+                        React.createElement(ButtonInline, { onClick: () => onOpen({
+                                title: packageOption === null || packageOption === void 0 ? void 0 : packageOption.title,
+                                image: packageOption === null || packageOption === void 0 ? void 0 : packageOption.image,
+                                description: packageOption === null || packageOption === void 0 ? void 0 : packageOption.description,
+                                link: packageOption === null || packageOption === void 0 ? void 0 : packageOption.link,
+                            }) }, packageOption.title),
+                        ' ',
+                        "begagnatgaranti"))), packageOptions === null || packageOptions === void 0 ? void 0 :
+                packageOptions.map((packageOption, index) => (React.createElement(CheckMarkListItem, { key: packageOption.title || index },
+                    React.createElement(React.Fragment, null,
+                        "Inkl.",
+                        ' ',
+                        React.createElement(ButtonInline, { onClick: () => onOpen({
+                                title: packageOption === null || packageOption === void 0 ? void 0 : packageOption.title,
+                                image: packageOption === null || packageOption === void 0 ? void 0 : packageOption.image,
+                                description: packageOption === null || packageOption === void 0 ? void 0 : packageOption.description,
+                                link: packageOption === null || packageOption === void 0 ? void 0 : packageOption.link,
+                            }) }, packageOption.title))))),
+                (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.withHomeDelivery) && React.createElement(CheckMarkListItem, null, "Hemleverans"))),
+        React.createElement(Repeat, null,
+            ecommerce && ecommerce.enabled && (React.createElement(RepeatTiny, null,
+                React.createElement(ButtonPrimary, { disabled: !!ecommerce.reserved, fullWidth: true, onClick: toggleEcomModal },
+                    React.createElement(ButtonContent, null, "K\u00F6p bilen online")))),
+            (ecommerce === null || ecommerce === void 0 ? void 0 : ecommerce.reserved) && (React.createElement(RepeatTiny, null,
+                React.createElement(SwitchBar, { title: "Bilen \u00E4r reserverad", body: "Denna bil \u00E4r reserverad av en annan k\u00F6pare." },
+                    React.createElement(Content, null,
+                        React.createElement("p", null, "Denna bil \u00E4r reserverad av en annan k\u00F6pare."))))),
+            React.createElement(ActionList, { branch: branch, contact: contact })),
+        ((branch === null || branch === void 0 ? void 0 : branch.connections.length) || 0) > 1 && (React.createElement(Repeat, null,
+            React.createElement(SwitchBar, { title: "Centrallagerbil", actionTitle: "Byt anl\u00E4ggning", onClick: openModalBranch },
+                React.createElement(Content, null,
+                    React.createElement("p", null, "Denna bil tillh\u00F6r ett centrallager och g\u00E5r att k\u00F6pa genom flera anl\u00E4ggningar. Byt anl\u00E4ggning f\u00F6r att visa kontaktuppgifter till just den anl\u00E4ggningen.")))))));
+};
+export default CheckList;

package/dist-src/layouts/searchItem/ManufacturerPackagesOption.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { marked } from 'marked';
+import { Repeat } from '../../components/Repeat/index';
+import { ProductPageMainSection } from '../../components/ProductPage/index';
+import Content from '../../components/Content/index';
+import { H2 } from '../../components/Heading/index';
+import { ButtonInline } from '../../components/Button/index';
+import LogoBox from '../../components/LogoBox/index';
+const ManufacturerPackageOption = ({ packageOption }) => {
+    var _a;
+    if (!packageOption) {
+        return null;
+    }
+    return (React.createElement(ProductPageMainSection, null,
+        React.createElement(Repeat, null,
+            React.createElement(H2, { noMargin: true }, packageOption.title)),
+        packageOption.description && (React.createElement(Repeat, null,
+            React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+        ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.url) && (React.createElement(Repeat, null,
+            React.createElement(ButtonInline, { as: "a", href: packageOption.link.url, target: "_blank", rel: "noopener noreferrer" }, packageOption.link.title
+                ? packageOption.link.title
+                : 'Läs mer (Öppnas i ett nytt fönster)'))),
+        packageOption.image && (React.createElement(Repeat, null,
+            React.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true })))));
+};
+export default ManufacturerPackageOption;

package/dist-src/layouts/searchItem/MetadataItem.js

@@ -0,0 +1,34 @@
+import React, { useState, useCallback } from 'react';
+import { TableListItem, TableListKey, TableListValue, TableListBooleanPos, TableListBooleanNeg, } from '../../components/TableList/index';
+import { IconCheck, IconCancel } from '../../components/Icon/index';
+import { SrOnly } from '../../components/SrOnly/index';
+import { ButtonInline } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+const formatValue = (value, unit) => {
+    if (typeof value === 'boolean') {
+        return value ? (React.createElement(TableListBooleanPos, { title: "Ja" },
+            React.createElement(SrOnly, null, "Ja"),
+            React.createElement(IconCheck, { block: true }))) : (React.createElement(TableListBooleanNeg, { title: "Nej" },
+            React.createElement(SrOnly, null, "Nej"),
+            React.createElement(IconCancel, { block: true })));
+    }
+    if (Array.isArray(value)) {
+        return value.join(', ');
+    }
+    if (!!value && !!unit) {
+        return `${value} ${unit}`;
+    }
+    return value;
+};
+const MetadataItem = ({ name, hint, value, unit }) => {
+    const [foldout, setFoldout] = useState(false);
+    const onToggleFoldout = useCallback(() => setFoldout(!foldout), [foldout]);
+    const presentedValue = formatValue(value, unit);
+    return (React.createElement(TableListItem, null,
+        React.createElement(TableListKey, null, hint ? (React.createElement(ButtonInline, { onClick: onToggleFoldout, title: `Mer information om ${name}` }, name)) : (name)),
+        React.createElement(TableListValue, null, value !== undefined ? presentedValue : 'Uppgift saknas'),
+        hint && foldout && (React.createElement(Modal, { title: name, onClose: onToggleFoldout },
+            React.createElement(Content, { dangerouslySetInnerHTML: { __html: hint } })))));
+};
+export default MetadataItem;

package/dist-src/layouts/searchItem/PackageOptionModal.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { marked } from 'marked';
+import { Repeat } from '../../components/Repeat/index';
+import { ButtonInline } from '../../components/Button/index';
+import Modal from '../../components/Modal/index';
+import Content from '../../components/Content/index';
+import LogoBox from '../../components/LogoBox/index';
+const PackageOptionModal = ({ packageOption, onClose }) => {
+    var _a;
+    return (React.createElement(Modal, { title: packageOption.title || '', onClose: onClose },
+        packageOption.image && (React.createElement(Repeat, null,
+            React.createElement(LogoBox, { logo: packageOption.image, alt: packageOption.title || undefined, wide: true }))),
+        packageOption.description && (React.createElement(Repeat, null,
+            React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+        ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.href) && packageOption.link.title && (React.createElement(Repeat, null,
+            React.createElement(ButtonInline, { as: "a", href: packageOption.link.href, target: "_blank", rel: "noopener noreferrer nofollow" }, packageOption.link.title)))));
+};
+export default PackageOptionModal;

package/dist-src/layouts/searchItem/PackageOptions.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { marked } from 'marked';
+import { Repeat } from '../../components/Repeat/index';
+import { ProductPageMainSection } from '../../components/ProductPage/index';
+import Content from '../../components/Content/index';
+import { H2 } from '../../components/Heading/index';
+import { ButtonInline } from '../../components/Button/index';
+import LogoBox from '../../components/LogoBox/index';
+const PackageOptions = ({ packageOptions }) => {
+    if (!packageOptions) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, packageOptions.map((packageOption, index) => {
+        var _a;
+        return (React.createElement(ProductPageMainSection, { key: packageOption.title || index },
+            React.createElement(Repeat, null,
+                React.createElement(H2, { noMargin: true }, packageOption.title)),
+            packageOption.description && (React.createElement(Repeat, null,
+                React.createElement(Content, { dangerouslySetInnerHTML: { __html: marked(packageOption.description) } }))),
+            ((_a = packageOption.link) === null || _a === void 0 ? void 0 : _a.url) && (React.createElement(Repeat, null,
+                React.createElement(ButtonInline, { as: "a", href: packageOption.link.url, target: "_blank", rel: "noopener noreferrer" }, packageOption.link.title
+                    ? packageOption.link.title
+                    : 'Läs mer (Öppnas i ett nytt fönster)'))),
+            packageOption.image && (React.createElement(Repeat, null,
+                React.createElement(LogoBox, { logo: packageOption.image, alt: "Logotyp", wide: true })))));
+    })));
+};
+export default PackageOptions;

package/{src/layouts/searchItem/Page404.tsx → dist-src/layouts/searchItem/Page404.js}

@@ -1,17 +1,9 @@
 import React from 'react';
-
 import Container from '../../components/Container/index';
 import { Page, PageSection } from '../../components/Page/index';
 import { H1 } from '../../components/Heading/index';
-
-const Page404 = () => (
-  <Page>
-    <PageSection large>
-      <Container>
-        <H1 noMargin>404</H1>
-      </Container>
-    </PageSection>
-  </Page>
-);
-
+const Page404 = () => (React.createElement(Page, null,
+    React.createElement(PageSection, { large: true },
+        React.createElement(Container, null,
+            React.createElement(H1, { noMargin: true }, "404")))));
 export default Page404;

package/{src/layouts/searchItem/PageLoading.tsx → dist-src/layouts/searchItem/PageLoading.js}

@@ -1,17 +1,9 @@
 import React from 'react';
-
 import Container from '../../components/Container/index';
 import { Page, PageSection } from '../../components/Page/index';
 import Loader from '../../components/Loader/index';
-
-const PageLoading = () => (
-  <Page>
-    <PageSection large>
-      <Container>
-        <Loader />
-      </Container>
-    </PageSection>
-  </Page>
-);
-
+const PageLoading = () => (React.createElement(Page, null,
+    React.createElement(PageSection, { large: true },
+        React.createElement(Container, null,
+            React.createElement(Loader, null)))));
 export default PageLoading;

package/dist-src/layouts/searchItem/Property.js

@@ -0,0 +1,53 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropertyTreeCreator from '../../utils/vehicle-properties/property-tree-creator';
+import sortTree from '../../utils/vehicle-properties/property-tree-sorter';
+import enrichWithHint from '../../utils/vehicle-properties/property-hint-enricher';
+import addCustomProperties from '../../utils/vehicle-properties/custom-property-adder';
+import removeProperties from '../../utils/vehicle-properties/property-remover';
+import MetadataItem from './MetadataItem';
+import { H5 } from '../../components/Heading/index';
+import { Repeat } from '../../components/Repeat/index';
+import { TableList } from '../../components/TableList/index';
+import Tabs from '../../components/Tabs/index';
+const MetadataSubCategory = ({ name, properties }) => (React.createElement(Repeat, null,
+    React.createElement(H5, { as: "h3" }, name),
+    React.createElement(TableList, null, !!properties.length &&
+        properties.map((property, index) => (React.createElement(MetadataItem, { name: property.name, hint: property.hint, value: property.value, unit: property.unit, key: `${property.name}-${index}` }))))));
+const MetadataCategory = ({ properties, subCategories }) => (React.createElement("div", { className: "tab-section" },
+    !!properties.length && (React.createElement(Repeat, null,
+        React.createElement(TableList, null, properties.map((property, index) => (React.createElement(MetadataItem, { name: property.name, hint: property.hint, value: property.value, unit: property.unit, key: `${property.name}-${index}` })))))),
+    !!subCategories.length &&
+        subCategories.map((subCategory, index) => (React.createElement(MetadataSubCategory, { name: subCategory.name, properties: subCategory.properties, key: `${subCategory.name}-${index}` })))));
+const PropertySet = ({ propertySet, vehicleData }) => {
+    var _a, _b;
+    const [activeCategoryId, setActiveCategoryId] = useState(-1);
+    const mappedProperties = useMemo(() => {
+        if (!propertySet) {
+            return undefined;
+        }
+        let newProperties = removeProperties(propertySet);
+        newProperties = addCustomProperties(vehicleData, newProperties);
+        const enrichedProperties = enrichWithHint(newProperties);
+        const tree = new PropertyTreeCreator(enrichedProperties).create();
+        sortTree(tree);
+        return tree;
+    }, [propertySet]);
+    useEffect(() => {
+        var _a;
+        const categories = ((_a = mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories) === null || _a === void 0 ? void 0 : _a.length) !== undefined ? mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories : undefined;
+        if (activeCategoryId < 0 && categories !== undefined && categories.length > 0) {
+            setActiveCategoryId(categories[0].id);
+        }
+    }, [mappedProperties]);
+    const onTab = useCallback((id) => setActiveCategoryId(parseInt(id, 10)), []);
+    const activeCategory = (_a = mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories) === null || _a === void 0 ? void 0 : _a.find((category) => category.id === activeCategoryId);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Repeat, null,
+            React.createElement(Tabs, { tabs: ((_b = mappedProperties === null || mappedProperties === void 0 ? void 0 : mappedProperties.categories) === null || _b === void 0 ? void 0 : _b.map((category) => ({
+                    name: `${category.id}`,
+                    displayName: category.name,
+                }))) || [], active: `${activeCategoryId}`, onClick: onTab })),
+        activeCategory && (React.createElement(Repeat, null,
+            React.createElement(MetadataCategory, { properties: activeCategory.properties, subCategories: activeCategory.subCategories })))));
+};
+export default PropertySet;