feat: map slider (#891)

* feat: wip * feat: google maps slider complete
reapit · Apr 14, 2020 · 72144c0 · 72144c0
1 parent ae64d24
commit 72144c0
Show file tree

Hide file tree

Showing 12 changed files with 259 additions and 176 deletions.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -47,7 +47,7 @@
     "build:prod": "node ./src/scripts/build-prod.js",
     "start:prod": "sirv public",
     "start:dev": "node ./src/scripts/start-dev.js",
-    "test:dev": "jest --watch --color",
+    "test:dev": "cross-env TZ=UTC jest --watch --color",
     "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit",
     "lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx,js,svelte src\"",
     "lint:fix": "eslint --cache --ext=ts,tsx,js,svelte src --fix",

diff --git a/...ges/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte b/...ges/web-components/src/appointment-bookings/client/components/appointment-bookings.svelte
@@ -9,8 +9,8 @@
 
   export let theme
   export let parentSelector
-
-  // TBC
+  // TODO - will need to import later
+  // export let apiKey
   // export let variant
 
   let isModalOpen = false

diff --git a/packages/web-components/src/appointment-bookings/client/core/index.ts b/packages/web-components/src/appointment-bookings/client/core/index.ts
@@ -10,16 +10,18 @@ export interface AppointmentBookingInitializers {
 
 export const ReapitAppointmentBookingComponent = ({
   parentSelector,
-  apiKey,
   theme,
-  variant,
-}: AppointmentBookingInitializers) => {
+}: // apiKey,
+// variant,
+AppointmentBookingInitializers) => {
   new AppointmentBooking({
     target: document.querySelector(parentSelector) || document.body,
     props: {
       theme,
-      apiKey,
-      variant,
+      // TODO - will need to reference later
+      // apiKey,
+      // variant,
+      parentSelector,
     },
   })
 }

diff --git a/packages/web-components/src/common/styles/__tests__/__snapshots__/index.ts.snap b/packages/web-components/src/common/styles/__tests__/__snapshots__/index.ts.snap
@@ -178,7 +178,7 @@ exports[`styles should generate a reset css class 1`] = `"css-h4w50h"`;
 exports[`styles should generate an object of CSS classes 1`] = `
 Object {
   "bodyText": "css-11v9sqy",
-  "button": "css-1mxjcux",
+  "button": "css-naokd4",
   "globalStyles": "css-ya093n",
   "input": "css-u6oic2",
   "offerBanner": "css-gl5ek3",

diff --git a/packages/web-components/src/common/styles/theme.ts b/packages/web-components/src/common/styles/theme.ts
@@ -115,12 +115,16 @@ export const generateThemeClasses = (
         color: ${primaryAccentColor || '#000'};
         border: 1px solid ${primaryAccentColor || 'grey'};
         background: ${baseBackgroundColor || '#fff'};
+        color: ${inverseFontColor || 'grey'};
 
-        color: ${inverseFontColor || '#fff'};
-      }
+        &:hover {
+          background: ${inverseFontColor || 'grey'};
+          color: ${baseBackgroundColor || '#fff'};
+        }
 
-      :last-child {
-        border-left: none;
+        &:last-child {
+          border-left: none;
+        }
       }
     `,
     input: css`

diff --git a/...components/src/search-widget/client/components/__tests__/__snapshots__/google-map.ts.snap b/...components/src/search-widget/client/components/__tests__/__snapshots__/google-map.ts.snap
@@ -4,10 +4,12 @@ exports[`google map it matches a snapshot 1`] = `
 <body>
   <div>
     <div
-      class="google-map-outer-container svelte-cqeihd"
+      class="google-map-outer-container 
+   svelte-1t98is9"
     >
+       
       <div
-        class="google-map-container svelte-cqeihd"
+        class="google-map-container  svelte-1t98is9"
       >
          
       </div>

diff --git a/...nents/src/search-widget/client/components/__tests__/__snapshots__/property-detail.ts.snap b/...nents/src/search-widget/client/components/__tests__/__snapshots__/property-detail.ts.snap
@@ -4,40 +4,40 @@ exports[`PropertyDetail it matches a snapshot 1`] = `
 <body>
   <div>
     <div
-      class="property-detail-item svelte-1qgi4sg"
+      class="property-detail-item svelte-1bg8awb"
       data-testid="select-property-detail"
     >
       <a
-        class=" svelte-1qgi4sg"
+        class=" svelte-1bg8awb"
         data-testid="btn-back"
         href="/"
       >
         Back to results
       </a>
        
       <div
-        class="property-detail-image-container svelte-1qgi4sg"
+        class="property-detail-image-container svelte-1bg8awb"
       >
         <div
-          class="property-detail-offer-banner  svelte-1qgi4sg"
+          class="property-detail-offer-banner  svelte-1bg8awb"
         >
           Under Offer
         </div>
          
          
         <img
           alt="property-detail image"
-          class="svelte-1qgi4sg"
+          class="svelte-1bg8awb"
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mN88xYAAssB20Ea4T8AAAAASUVORK5CYII="
         />
       </div>
        
       <div>
         <div
-          class=" property-detail-item-address-secondary svelte-1qgi4sg"
+          class=" property-detail-item-address-secondary svelte-1bg8awb"
         >
           <div
-            class=" property-detail-item-address-primary svelte-1qgi4sg"
+            class=" property-detail-item-address-primary svelte-1bg8awb"
           >
             Example street
           </div>
@@ -47,29 +47,29 @@ exports[`PropertyDetail it matches a snapshot 1`] = `
       </div>
        
       <div
-        class=" property-detail-item-pricing-text svelte-1qgi4sg"
+        class=" property-detail-item-pricing-text svelte-1bg8awb"
       >
         £250,000
       </div>
        
       <div
-        class=" property-detail-item-beds-text svelte-1qgi4sg"
+        class=" property-detail-item-beds-text svelte-1bg8awb"
       >
         4 Bed Detached House
       </div>
        
       <div
-        class=" property-detail-item-description-text svelte-1qgi4sg"
+        class=" property-detail-item-description-text svelte-1bg8awb"
       >
         We are delighted to offer for sale this EXTENDED THREE BEDROOMED SEMI DETACHED PROPERTY situated in a much sought after residential location of Greasby, having the benefits of two separate entertaining rooms, morning room, extended kitchen. To the first floor there are three bedrooms, spacious family bathroom, gas central heating gardens front and rear and off road parking.
       </div>
        
       <div
-        class=" property-detail-item-icon-container svelte-1qgi4sg"
+        class=" property-detail-item-icon-container svelte-1bg8awb"
       >
         <div>
           <span
-            class="property-detail-item-icon svelte-1qgi4sg"
+            class="property-detail-item-icon svelte-1bg8awb"
           >
             <svg
               aria-hidden="true"
@@ -100,7 +100,7 @@ exports[`PropertyDetail it matches a snapshot 1`] = `
           4
            
           <span
-            class="property-detail-item-icon svelte-1qgi4sg"
+            class="property-detail-item-icon svelte-1bg8awb"
           >
             <svg
               aria-hidden="true"