Skip to content

Commit

Permalink
feat: #781 Book a viewing (#931)
Browse files Browse the repository at this point in the history
* feat: #781 I want to click button to arrange a viewing with Estate Agent

* chore: #781 update style

* chore: add some test

* chore: #781 update theme class

* chore: #781 update styles

Co-authored-by: andt <[email protected]>
  • Loading branch information
ant066 and andt-dwarvesv authored Apr 20, 2020
1 parent e60f927 commit c6ccb5d
Show file tree
Hide file tree
Showing 21 changed files with 1,100 additions and 154 deletions.
70 changes: 69 additions & 1 deletion packages/web-components/src/common/components/modal.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import ClickOutSide from './click-out-side.svelte'
export let isModalOpen
export let toggleModal
export let title = 'Modal Title'
</script>

<style>
Expand All @@ -17,12 +18,79 @@
background: #00000052;
z-index: 1;
}
@media only screen and (min-width: 48rem) {
.reapit-modal-wrapper .reapit-modal {
top: 50%;
left: 50%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
border-radius: 0.25em;
overflow: hidden;
max-width: 80%;
position: fixed;
}
}
.reapit-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 50%;
font-size: 16px;
background: #ffffff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
overflow: hidden;
}
.reapit-modal-wrapper .modal-title {
font-weight: 600;
border-bottom: 1px solid #ddd;
margin: 0;
text-align: center;
font-size: 1em;
padding: 1em 3em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reapit-modal-wrapper .modal-close {
position: absolute;
top: 0;
left: 0;
padding: 1em 1.2em;
cursor: pointer;
}
.reapit-modal-wrapper .modal-close:hover {
background: #ddd;
}
.reapit-modal-wrapper .modal-close-btn {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
cursor: pointer;
}
</style>

{#if isModalOpen}
<div class="reapit-modal-wrapper">
<ClickOutSide on:click-out-side={toggleModal}>
<slot />
<div class="reapit-modal">
<div class="modal-close" on:click={toggleModal}>
<i class="modal-close-btn" />
</div>
<h3 class="modal-title" {title}>{title}</h3>
<div class="modal-content">
<slot />
</div>
</div>
</ClickOutSide>
</div>
{/if}
Original file line number Diff line number Diff line change
Expand Up @@ -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-naokd4",
"button": "css-1tgg1a8",
"globalStyles": "css-ya093n",
"input": "css-u6oic2",
"offerBanner": "css-gl5ek3",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const defaultVariant = {
baseBackgroundColor: '#f9fbfd',
basefontSize: '16px',
basefontColor: '#12263f',
inverseFontColor: '#f9fbfd',
secondaryfontColor: '#1e2554',
primaryHeadingFontSize: '24px',
secondaryHeadingFontSize: '20px',
baseFontFamily: '"Roboto", sans-serif',
headingFontFamily: '"Open Sans", sans-serif',
primaryAccentColor: '#0061a8',
secondaryAccentColor: '#6c757d',
mapAccentColor: '#7bc9eb',
breakPoints: {
mobile: '',
tablet: '',
laptop: '',
desktop: '',
},
}

window.theme = defaultVariant
7 changes: 1 addition & 6 deletions packages/web-components/src/common/styles/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,16 +118,11 @@ export const generateThemeClasses = (
color: ${primaryAccentColor || '#000'};
border: 1px solid ${primaryAccentColor || 'grey'};
background: ${baseBackgroundColor || '#fff'};
color: ${inverseFontColor || 'grey'};
&:hover {
background: ${inverseFontColor || 'grey'};
background: ${primaryAccentColor || 'grey'};
color: ${baseBackgroundColor || '#fff'};
}
&:last-child {
border-left: none;
}
}
`,
input: css`
Expand Down
19 changes: 19 additions & 0 deletions packages/web-components/src/common/utils/__tests__/validate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { validateEmail } from '../validate'

describe('validate email', () => {
it('should return true', () => {
const mail = '[email protected]'
expect(validateEmail(mail)).toBe(true)
})

it('should return false', () => {
let mail = 'abcedf.com'
expect(validateEmail(mail)).toBe(false)

mail = '[email protected]'
expect(validateEmail(mail)).toBe(false)

mail = 'abc@edf'
expect(validateEmail(mail)).toBe(false)
})
})
5 changes: 5 additions & 0 deletions packages/web-components/src/common/utils/validate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export function validateEmail(email: string) {
//eslint-disable-next-line
const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return regex.test(email)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import svelte from 'rollup-plugin-svelte'
import baseConfig from './rollup.config.base'
import replace from '@rollup/plugin-replace'
import path from 'path'

const config = require(path.resolve(__dirname, '../..', 'config.json'))
const production = !process.env.ROLLUP_WATCH

export default {
...baseConfig,
input: 'src/viewing-booking/client/core/index.ts',
output: {
sourcemap: !production,
format: 'iife',
name: 'app',
file: './public/dist/viewing-booking.js',
},
plugins: [
svelte({
dev: !production,
css: css => {
css.write('./public/dist/viewing-booking.css')
},
}),
replace({
'process.env.NODE_ENV': JSON.stringify(config.NODE_ENV),
}),
...baseConfig.plugins,
],
}
Original file line number Diff line number Diff line change
Expand Up @@ -152,18 +152,13 @@ exports[`search-widget it matches a snapshot 1`] = `
color: #000;
border: 1px solid grey;
background: #fff;
color: grey;
}
#search-widget .emotion-1:hover {
background: grey;
color: #fff;
}
#search-widget .emotion-1:last-child {
border-left: none;
}
#search-widget .emotion-0 {
font-family: Helvetica,Arial,sans-serif;
font-size: 18px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,88 +4,111 @@ exports[`EnlargeImageModal should match snapshot 1`] = `
<body>
<div>
<div
class="reapit-modal-wrapper svelte-1w7voj9"
class="reapit-modal-wrapper svelte-dwjkb3"
>
<div>
<div
class="light-box-enlarge-image-modal svelte-19txmtp"
style="width: 819.2px; height: 614.4000000000001px;"
class="reapit-modal svelte-dwjkb3"
>
<img
alt="Current carousel display image"
class="light-box-enlarge-image svelte-19txmtp"
src="current-display-image-url"
/>
<div
class="modal-close svelte-dwjkb3"
>
<i
class="modal-close-btn svelte-dwjkb3"
/>
</div>
<h3
class="modal-title svelte-dwjkb3"
title="Modal Title"
>
Modal Title
</h3>
<div
class="light-box-widget-container svelte-19txmtp"
class="modal-content"
>
<div>
<button
class="light-box-widget-prev-button"
<div
class="light-box-enlarge-image-modal svelte-19txmtp"
style="width: 819.2px; height: 614.4000000000001px;"
>
<img
alt="Current carousel display image"
class="light-box-enlarge-image svelte-19txmtp"
src="current-display-image-url"
/>
<div
class="light-box-widget-container svelte-19txmtp"
>
<svg
aria-hidden="true"
class=""
id=""
role="img"
style="height:1em;vertical-align:-.125em;overflow:visible;"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(256 256)"
<div>
<button
class="light-box-widget-prev-button"
>
<g
transform=""
<svg
aria-hidden="true"
class=""
id=""
role="img"
style="height:1em;vertical-align:-.125em;overflow:visible;"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
fill="currentColor"
transform="translate(-256 -256)"
/>
</g>
</g>
</svg>
</button>
<span
data-testid="light-box-widget-item-quantity"
>
1
of
10
</span>
<button
class="light-box-widget-next-button svelte-19txmtp"
>
<svg
aria-hidden="true"
class=""
id=""
role="img"
style="height:1em;vertical-align:-.125em;overflow:visible;"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(256 256)"
<g
transform="translate(256 256)"
>
<g
transform=""
>
<path
d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
fill="currentColor"
transform="translate(-256 -256)"
/>
</g>
</g>
</svg>
</button>
<span
data-testid="light-box-widget-item-quantity"
>
1
of
10
</span>
<button
class="light-box-widget-next-button svelte-19txmtp"
>
<g
transform=""
<svg
aria-hidden="true"
class=""
id=""
role="img"
style="height:1em;vertical-align:-.125em;overflow:visible;"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
fill="currentColor"
transform="translate(-256 -256)"
/>
</g>
</g>
</svg>
</button>
<g
transform="translate(256 256)"
>
<g
transform=""
>
<path
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
fill="currentColor"
transform="translate(-256 -256)"
/>
</g>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit c6ccb5d

Please sign in to comment.