Skip to content

Commit

Permalink
refactor: #1891 Apply new styles for geo diary app
Browse files Browse the repository at this point in the history
  • Loading branch information
Vu Nguyen committed Jul 6, 2020
1 parent 2ab997b commit 692c465
Show file tree
Hide file tree
Showing 9 changed files with 312 additions and 239 deletions.
4 changes: 4 additions & 0 deletions packages/elements/src/styles/base/utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,10 @@ $units: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
text-align: end;
}

.vertical-align-text-top {
vertical-align: text-top;
}

.pin {
left: 0;
top: 0;
Expand Down
239 changes: 168 additions & 71 deletions .../components/common/appointment-detail/__tests__/__snapshots__/appointment-detail.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ exports[`AppointmentModal AppointmentModal should render a header correctly 1`]
className="modal-card-head"
>
<div
className="undefined modal-card-title"
className="modal-card-title"
>
<Component>
Some address
</Component>
<Component>
<Component
className="mb-0"
>
Some type
</Component>
</div>
Expand All @@ -30,61 +32,123 @@ exports[`AppointmentModal AppointmentModal should render correctly 1`] = `
afterClose={[MockFunction]}
visible={true}
>
<div>
<div>
<FaClock />
<Component>
Time:
<Component>
<Component
className="is-one-third horizontal"
>
<Component
className="is-vcentered"
>
<Component
className="is-narrow"
>
<FaClock
className="vertical-align-text-top"
/>
</Component>
<Component>
<Component
className="inline-block"
>
Time:
</Component>
</Component>
</Component>
</div>
<div>
</Component>
<Component>
<p>
10 Jan 2020 10:27 AM - 10:40 AM
</p>
</div>
</div>
<div>
<div>
<FaHome />
<Component>
Property:
</Component>
</div>
</Component>
</Component>
<Component>
<Component
dynamicLinkParams={
Object {
"appMode": "DESKTOP",
"entityCode": "BED140946",
"entityType": "properties",
}
}
className="is-one-third horizontal"
>
42, Mill Road, Sharnbrook, Bedford, Bedfordshire, MK44 1NX
<Component
className="is-vcentered"
>
<Component
className="is-narrow"
>
<FaHome />
</Component>
<Component>
<Component>
Property:
</Component>
</Component>
</Component>
</Component>
</div>
<div>
<div>
<FaStickyNote />
<Component>
Entry Notes:
<Component>
<Component
dynamicLinkParams={
Object {
"appMode": "DESKTOP",
"entityCode": "BED140946",
"entityType": "properties",
}
}
>
42, Mill Road, Sharnbrook, Bedford, Bedfordshire, MK44 1NX
</Component>
</div>
<p>
It has windows, a roof and doors - it's basically a house.
</p>
</div>
<div>
<div>
<FaHandshake />
<Component>
Arrangements:
</Component>
</Component>
<Component>
<Component
className="is-one-third horizontal"
>
<Component
className="is-vcentered"
>
<Component
className="is-narrow"
>
<FaStickyNote />
</Component>
<Component>
<Component>
Entry Notes:
</Component>
</Component>
</Component>
</div>
<p>
Don't let the cat in
</p>
</div>
</Component>
<Component>
<p>
It has windows, a roof and doors - it's basically a house.
</p>
</Component>
</Component>
<Component>
<Component
className="is-one-third horizontal"
>
<Component
className="is-vcentered"
>
<Component
className="is-narrow"
>
<FaHandshake />
</Component>
<Component>
<Component>
Arrangements:
</Component>
</Component>
</Component>
</Component>
<Component>
<p>
Don't let the cat in
</p>
</Component>
</Component>
<Component
hasMargin={false}
hasPadding={false}
isFlex={true}
>
<Component
disabled={false}
onClick={[MockFunction]}
Expand Down Expand Up @@ -124,25 +188,39 @@ exports[`AppointmentModal AppointmentModal should render correctly when loading

exports[`AppointmentModal renderAddress should matchSnapshot 1`] = `
<div>
<div>
<div>
<FaHome />
<Component>
Property:
</Component>
</div>
<Component>
<Component
dynamicLinkParams={
Object {
"appMode": "DESKTOP",
"entityCode": "SOME_ID",
"entityType": "properties",
}
}
className="is-one-third horizontal"
>
65, Lindsey Close, Great Denham, Bedford, Bedfordshire, MK40 4GT
<Component
className="is-vcentered"
>
<Component
className="is-narrow"
>
<FaHome />
</Component>
<Component>
<Component>
Property:
</Component>
</Component>
</Component>
</Component>
</div>
<Component>
<Component
dynamicLinkParams={
Object {
"appMode": "DESKTOP",
"entityCode": "SOME_ID",
"entityType": "properties",
}
}
>
65, Lindsey Close, Great Denham, Bedford, Bedfordshire, MK40 4GT
</Component>
</Component>
</Component>
</div>
`;

Expand Down Expand Up @@ -212,17 +290,36 @@ exports[`AppointmentModal renderCommunicationDetail should match snapshot for em
`;

exports[`AppointmentModal renderTime should match snapshot 1`] = `
<div>
<div>
<FaClock />
<Component>
Time:
<div
className=""
data-test=""
>
<Component
className="is-one-third horizontal"
>
<Component
className="is-vcentered"
>
<Component
className="is-narrow"
>
<FaClock
className="vertical-align-text-top"
/>
</Component>
<Component>
<Component
className="inline-block"
>
Time:
</Component>
</Component>
</Component>
</div>
<div>
</Component>
<Component>
<p>
18 Dec 2016 04:30 PM - 05:30 PM
</p>
</div>
</Component>
</div>
`;
12 changes: 10 additions & 2 deletions ...src/components/common/appointment-detail/__tests__/__snapshots__/confirm-content.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ exports[`confirm-content it should match snapshot 1`] = `
<Component>
Are you sure you want to cancel this appointment?
</Component>
<Component>
<Component
hasMargin={false}
hasPadding={false}
isFlex={true}
>
<Component
loading={false}
onClick={[MockFunction]}
Expand All @@ -31,7 +35,11 @@ exports[`confirm-content it should match snapshot when isSubmitting equal to tru
<Component>
Are you sure you want to cancel this appointment?
</Component>
<Component>
<Component
hasMargin={false}
hasPadding={false}
isFlex={true}
>
<Component
loading={true}
onClick={[MockFunction]}
Expand Down
Loading

0 comments on commit 692c465

Please sign in to comment.