@wayke-se/components-react 3.5.1 → 3.5.3-beta.1

package/README.md

@@ -1,34 +1,34 @@
 # Components React
 
-> This repository contains components for search and items to use on external websites.
+This repository contains components for search and items to use on external websites.
 
-## Notes
+## Usage
 
-* Starting from version `2.0.0` and above will require import of `@wayke.se/components-react/assets/default.css` in order to apply basic styling to the gallery.
+Get started using `@wayke-se/components-react`.
 
-## Usage
+### Before you start
 
-Install
+**Install**
 ```bash
 npm install @wayke-se/components-react
 ```
 
-Install peer dependencies
+**Install peer dependencies**
 ```bash
 npm install react react-dom styled-components
 ```
 
+### Basic usage
+
 ```javascript
 import React from 'react';
 import WaykeComposite from '@wayke-se/components-react'
-import '@wayke-se/components-react/assets/default.css';
-// Optional
-import '@wayke-se/ecom-web/dist/index.css';
+import '@wayke-se/ecom-web/dist/index.css'; // Only required if Ecom is activated
 
 const ProviderSettings: WaykeProviderSettings = {
   graphQlUrl: "https://gql.wayketech.se/query",
-  url: "https://test-ext-api.wayketech.se/vehicles",
-  urlMlt: "https://test-ext-api.wayketech.se/vehicles-mlt-ext",
+  url: "https://api.wayketech.se/vehicles",
+  urlMlt: "https://api.wayketech.se/vehicles-mlt-ext",
   ecomSettings: {
     url: "OPTIONAL_ECOM_URL",
   },
@@ -46,8 +46,8 @@ const App = () => (
 ```javascript
 const ProviderSettings: WaykeProviderSettings = {
   graphQlUrl: "https://gql.wayketech.se/query",
-  url: "https://test-ext-api.wayketech.se/vehicles",
-  urlMlt: "https://test-ext-api.wayketech.se/vehicles-mlt-ext",
+  url: "https://api.wayketech.se/vehicles",
+  urlMlt: "https://api.wayketech.se/vehicles-mlt-ext",
   ecomSettings: {
     url: "https://ecom.wayketech.se",
   },
@@ -66,10 +66,9 @@ const ProviderSettings: WaykeProviderSettings = {
 }
 ```
 
-
 ### WaykeComposite uses hash-route, i want to use path-route
 
-In this case you need to make sure that you are in control of the routing, if the user reloads the page, where same html file is 
+In this case you need to make sure that you are in control of the routing, if the user reloads the page, where same html file is
 served for `/your/path/to/this/component` and `/your/path/to/this/component/00000000-0000-0000-0000-000000000000`.
 
 Examples given the application is located in `/search/vehicles`:
@@ -84,9 +83,7 @@ Examples given the application is located in `/search/vehicles`:
 ```javascript
 import React from 'react';
 import { WaykeCompositePath } from '@wayke-se/components-react'
-import '@wayke.se/components-react/assets/default.css';
-// Optional
-import '@wayke-se/ecom-web/dist/index.css';
+import '@wayke-se/ecom-web/dist/index.css'; // Only required if Ecom is activated
 
 const App = () => (
   <WaykeCompositePath
@@ -119,7 +116,6 @@ const App = () => {
   );
 };
 ```
-
 ### I only want to use the Search Item component
 
 It's recomended to place WaykeItemProvider close to app-root in order to keep the cache
@@ -127,9 +123,7 @@ It's recomended to place WaykeItemProvider close to app-root in order to keep th
 ```javascript
 import React, { useCallback } from 'react';
 import { WaykeItemProvider, WaykeSearchItem } from '@wayke-se/components-react'
-import '@wayke.se/components-react/assets/default.css';
-// Optional
-import '@wayke-se/ecom-web/dist/index.css';
+import '@wayke-se/ecom-web/dist/index.css'; // Only required if Ecom is activated
 
 const App = ({}) => {
   const id = 'd01f79a3-7552-49c4-9d4d-deb3aa581c31';
@@ -442,7 +436,7 @@ To style the components, copy the following snippet into your *CSS* file and mod
 }
 ```
 
-...or if you want to use it as Sass (.scss):
+...or if you want to use it as _Sass_ (.scss):
 
 ```scss
 .wayke__theme {
@@ -474,31 +468,42 @@ To style the components, copy the following snippet into your *CSS* file and mod
 }
 ```
 
+> **It is highly recommended to *NOT* add or remove any properties defined above in the color selectors**. However, since fonts usually requires more configuration we encourage you to add the necessary font styling required to match your current profile. If you add new properties to the font selectors, please be careful and ensure everything looks as intended before going into production.
+
 ### Ecom theme
-The default ecom css can be found and imported `node_module/@wayke-se/ecom-web/dist/index.css`.
 
-> **It is highly recommended to *NOT* add or remove any properties defined above in the color selectors**. However, since fonts usually requires more configuration we encourage you to add the necessary font styling required to match your current profile. If you add new properties to the font selectors, please be careful and ensure everything looks as intended before going into production.
+The default Ecom *CSS* can be found and imported from `@wayke-se/ecom-web/dist/index.css`. This is only necessary if Ecom is activated. If activated and the *CSS* is not imported, the Ecom module will not be displayed correctly.
+
+If you want to customize the look of the Ecom module we refer you to the documentation of [@wayke-se/ecom-web](https://www.npmjs.com/package/@wayke-se/ecom-web).
+
+## Run example from this repository
 
-## Run example from repo
-This repository contains a example app that uses [@wayke-se/components-react](https://www.npmjs.com/package/@wayke-se/components-react).
+This repository contains an example app that uses [@wayke-se/components-react](https://www.npmjs.com/package/@wayke-se/components-react).
 
 
+### Setup environment variables
+
+To start the example create an `.env` file in root with the following content.
 
-To start the example create an `.env` file in root.
 ```
 WAYKE_HOST=YOUR_HOST_1,YOUR_HOST_2
-WAYKE_SEARCH_URL=https://test-ext-api.wayketech.se/vehicles
-WAYKE_SEARCH_MLT_URL=https://test-ext-api.wayketech.se/vehicles-mlt-ext
+WAYKE_SEARCH_URL=https://api.wayketech.se/vehicles
+WAYKE_SEARCH_MLT_URL=https://api.wayketech.se/vehicles-mlt-ext
 WAYKE_SEARCH_X_API_KEY=YOUR_API_KEY
 WAYKE_GRAPH_QL_URL=https://gql.wayketech.se/query
 WAYKE_ECOM_URL=https://ecom.wayketech.se
 GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_STATIC_API_KEY
 ```
 
-* `WAYKE_SEARCH_MLT_URL` - An *optional* flag. Will fetch related vehicles to current vehicle. If not provided 
+#### Notes
+
+* `WAYKE_SEARCH_MLT_URL` - An *optional* flag. Will fetch related vehicles to current vehicle. If not provided
 `WAYKE_SEARCH_URL` will be used instead, but will fetch latest vehicles.
 
-Then run the following:
+### Start the example app
+
+Run the following commands to start the example app.
+
 ```bash
 npm install
 cd example
@@ -506,35 +511,38 @@ npm install
 npm start
 ```
 
-`WAYKE_HOST` can be used instead of using and exposing the `WAYKE_SEARCH_X_API_KEY`. If, for example, your development host is `test.com.localhost`
-Update your local host file and add:
-127.0.0.1   test.com.localhost
-This will change the origin, while still pointing to localhost.
-Start the example and open `test.com.localhost:5000`.
+### Custom host
+
+`WAYKE_HOST` can be used instead of using and exposing the `WAYKE_SEARCH_X_API_KEY`. If, for example, your development host is `test.com.localhost`.
 
-To add more hosts, add all to your local host file and then update `WAYKE_HOST` (comma separated):
+To do so update your local host file and add:
+```txt
+127.0.0.1   test.com.localhost
 ```
+
+This will change the origin, while still pointing to `localhost`. Start the example app and open `test.com.localhost:5000` in your browser.
+
+### Multiple hosts
+
+To add multiple hosts, add all hohsts to your local host file and then update `WAYKE_HOST` in `.env` as a comma separated list.
+
+```txt
 WAYKE_HOST=a.com.localhost,b.com.localhost
 ```
-`a.com.localhost:5000` and `b.com.localhost:5000` can now be accessed.
 
+`a.com.localhost:5000` and `b.com.localhost:5000` can now be accessed.
 
-### Available Routes (Independent)
+### Available routes (independent)
 
-#### WaykeComposite
+**WaykeComposite**
 [http://localhost:5000](http://localhost:5000)
 
-#### WaykeSearch With WaykeProvider
+**WaykeSearch With WaykeProvider**
 [http://localhost:5000/search](http://localhost:5000/search)
 
-#### WaykeSearchItem With WaykeProvider
+**WaykeSearchItem With WaykeProvider**
 [http://localhost:5000/search-item/d01f79a3-7552-49c4-9d4d-deb3aa581c31](http://localhost:5000/search-item/d01f79a3-7552-49c4-9d4d-deb3aa581c31)
 
-
 ## Example repositories
 
-### React and Typescript example
-[https://github.com/wayke-se/components-react-boilerplate](https://github.com/wayke-se/components-react-boilerplate)
-
-### Non-React with/without Typescript example
-[https://github.com/wayke-se/components-react-example](https://github.com/wayke-se/components-react-example)
+We have setup an example repository where you can see how we've implemented `@wayke-se/components-react`. You'll find the repository here: [https://github.com/wayke-se/components-react-example](https://github.com/wayke-se/components-react-example).

package/dist-node/index.js

@@ -895,6 +895,7 @@ function _objectSpread2(target) {
   return target;
 }
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -907,6 +908,20 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
 const List = styled__default.ul`
   display: flex;
@@ -3351,6 +3366,76 @@ const SliderWrapper = styled__default.div`
     bottom: 0;
     left: 0;
     right: 0;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+
+    .slick-list,
+    .slick-track {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .slick-list {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+
+  .slick-track {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &::before,
+    &::after {
+      content: '';
+      display: table;
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+
+  .slick-slide {
+    display: none;
+    float: left;
+    min-height: 1px;
+  }
+
+  .slick-loading {
+    .slick-track {
+      visibility: hidden;
+    }
+
+    img {
+      display: none;
+    }
+  }
+
+  .slick-initialized {
+    .slick-slide {
+      display: block;
+    }
+  }
+
+  .slick-slide.dragging img {
+    pointer-events: none;
   }
 
   ${props => props.theme.breakpoint.LtMd} {
@@ -3363,7 +3448,6 @@ const SliderWrapper = styled__default.div`
 
     .slick-slide {
       border-right: ${size(1)} solid ${props => props.theme.color.bg};
-      //transform: scale(0.95);
       transform-origin: 0 50%;
       transition: transform 150ms ease;
     }
@@ -5229,14 +5313,17 @@ const Leasing = ({
     description,
     monthlyCost,
     duration,
-    mileage
+    mileage,
+    type,
+    name
   } = financialOption;
+  const title = type === 'leasing' ? 'Privatleasa' : type === 'business-leasing' ? 'Företagsleasa' : type;
   return React__default.createElement(React__default.Fragment, null, modal && React__default.createElement(Modal, {
-    title: "Privatleasing",
+    title: title,
     onClose: toggleModal
   }, image && React__default.createElement(Image$2, {
     src: image,
-    alt: "Privatleasing"
+    alt: title
   }), description && React__default.createElement(Content$2, {
     dangerouslySetInnerHTML: {
       __html: description
@@ -5252,7 +5339,7 @@ const Leasing = ({
       label: 'Årlig körsträcka',
       value: `${numberSeparator((mileage === null || mileage === void 0 ? void 0 : mileage.current) || 0)} mil/år`
     }]
-  })))), React__default.createElement(OptionBox, null, React__default.createElement(React__default.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && React__default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`)), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, "Privatleasing", ' ', (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && React__default.createElement(React__default.Fragment, null, React__default.createElement(UtilityTextPrimary, null, numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current), " mil/\u00E5r"), ' ', "i ", React__default.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 : duration.current, " m\u00E5n"), ".", ' ')), React__default.createElement("p", null, React__default.createElement(ButtonInline, {
+  })))), React__default.createElement(OptionBox, null, React__default.createElement(React__default.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && React__default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`)), React__default.createElement(OptionBoxContent, null, React__default.createElement("p", null, title, ' ', (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && React__default.createElement(React__default.Fragment, null, React__default.createElement(UtilityTextPrimary, null, numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current), " mil/\u00E5r"), ' ', "i ", React__default.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 : duration.current, " m\u00E5n"), ".", ' ')), name && React__default.createElement("p", null, React__default.createElement(ButtonInline, {
     onClick: toggleModal
   }, "L\u00E4s mer")))));
 };
@@ -5627,7 +5714,7 @@ const FinancialOptions = ({
   financialOptions
 }) => React__default.createElement(Repeat, null, React__default.createElement(RepeatTiny, null, React__default.createElement(VisualHeading, null, "Andra finansieringsalternativ")), React__default.createElement(RepeatTiny, null, financialOptions.map((financialOption, index) => React__default.createElement(React.Fragment, {
   key: index
-}, financialOption.type === 'leasing' && React__default.createElement(Leasing, {
+}, (financialOption.type === 'leasing' || financialOption.type === 'business-leasing') && React__default.createElement(Leasing, {
   financialOption: financialOption
 }), financialOption.type === 'loan' && React__default.createElement(Loan, {
   id: id,