Skip to content

Commit 9cdc4c7

Browse files
InbarGazitInbarGazit
authored
Merge pull request #79 from docusign/loader-button-and-fixed-styles
Added Loader button and fixes for styles
2 parents 2b62480 + d900d51 commit 9cdc4c7

File tree

14 files changed

+648
-486
lines changed

14 files changed

+648
-486
lines changed

‎client/public/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,19 @@
4646
<body>
4747
<noscript>You need to enable JavaScript to run this app.</noscript>
4848
<div id="root"></div>
49-
<script src="https://code.jquery.com/jquery-3.7.1.js"
50-
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
49+
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
5150
crossorigin="anonymous">
52-
</script>
51+
</script>
5352
<script src="https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js"></script>
5453
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
5554
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
5655
crossorigin="anonymous"></script>
57-
<script
58-
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
59-
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
60-
crossorigin="anonymous">
61-
</script>
56+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
57+
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
58+
crossorigin="anonymous"></script>
59+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
60+
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous">
61+
</script>
6262
</body>
6363

6464
</html>

‎client/src/assets/scss/components/_all.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "accordion";
44
@import "card-info";
55
@import "custom-list";
6+
@import "loader";
67
@import "tables";
78
@import "dropdowns";
89
@import "tabs";

‎client/src/assets/scss/components/_loader.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.LoaderWrapper {
2+
width: 100%;
3+
max-height: 100%;
4+
min-height: 342px;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: center;
8+
}
9+
10+
.LoaderHeader {
11+
text-align: center;
12+
line-height: 40px;
13+
14+
font-size: 36px;
15+
font-weight: 600;
16+
font-style: normal;
17+
}
18+
19+
.LoaderText {
20+
text-align: left;
21+
22+
max-width: 504px;
23+
width: 100%;
24+
padding: 0 1rem;
25+
line-height: 24px;
26+
margin-left: auto;
27+
margin-right: auto;
28+
29+
font-size: 16px;
30+
font-weight: 300;
31+
font-style: normal;
32+
}
33+
34+
.Loader {
35+
align-self: center;
36+
width: 100px;
37+
height: 100px;
38+
border: 10px solid #379434;
39+
border-bottom-color: white;
40+
border-radius: 50%;
41+
display: inline-block;
42+
box-sizing: border-box;
43+
animation: rotation 1s linear infinite;
44+
}
45+
46+
@keyframes rotation {
47+
0% {
48+
transform: rotate(0deg);
49+
}
50+
51+
100% {
52+
transform: rotate(360deg);
53+
}
54+
}

‎client/src/components/Loader.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const Loader = ({ visible, title, paragraph }) => {
2+
return (
3+
visible && (
4+
<div className="LoaderWrapper">
5+
<span className="Loader"></span>
6+
{title ?
7+
<div>
8+
<h2 className="LoaderHeader">{title}</h2>
9+
<div className="LoaderText">{paragraph}</div>
10+
</div>
11+
: null
12+
}
13+
</div>
14+
)
15+
);
16+
};

‎client/src/pages/buyNewInsurance/components/ApiDescription.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from "react";
22
import { useTranslation } from "react-i18next";
33
import parse from "html-react-parser";
4+
import { Collapse } from 'react-bootstrap';
45

56
export const ApiDescription = () => {
67
const { t } = useTranslation("BuyNewInsurance");
8+
const [open, setOpen] = React.useState(false);
79
return (
810
<div className="col-lg-6 pt-5 pb-4">
911
<div id="accordion">
@@ -16,20 +18,22 @@ export const ApiDescription = () => {
1618
data-target="#collapseOne"
1719
aria-expanded="false"
1820
aria-controls="collapseOne"
21+
onClick={() => {setOpen(!open)}}
1922
>
2023
{t("ApiDecription.SeeMore")}
2124
</button>
2225
</h5>
2326
</div>
2427
<div
2528
id="collapseOne"
26-
className="collapse"
2729
aria-labelledby="headingOne"
2830
data-parent="#accordion"
2931
>
30-
<div className="card-body">
31-
{parse(t("ApiDecription.CodeFlow"))}
32-
</div>
32+
<Collapse in={open}>
33+
<div className="card-body">
34+
{parse(t("ApiDecription.CodeFlow"))}
35+
</div>
36+
</Collapse>
3337
</div>
3438
</div>
3539
</div>

0 commit comments

Comments
 (0)