diff --git a/.storybook/__snapshots__/storyshots.test.js.snap b/.storybook/__snapshots__/storyshots.test.js.snap
deleted file mode 100644
index 68f08271a6f3b7d20cf92e87e674ca8896933e92..0000000000000000000000000000000000000000
--- a/.storybook/__snapshots__/storyshots.test.js.snap
+++ /dev/null
@@ -1,4567 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button Danger 1`] = `
-<div
- className="sc-AxjAm eEVAA"
->
- <button
- className="danger"
- onClick={[Function]}
- >
- Danger
- </button>
-</div>
-`;
-
-exports[`Storyshots Button Primary 1`] = `
-<div
- className="sc-AxjAm eEVAA"
->
- <button
- className="primary"
- onClick={[Function]}
- >
- Primary
- </button>
-</div>
-`;
-
-exports[`Storyshots Button Round 1`] = `
-<div
- className="sc-AxjAm eEVAA"
->
- <button
- className="round"
- onClick={[Function]}
- >
- +
- </button>
-</div>
-`;
-
-exports[`Storyshots Button Secondary 1`] = `
-<div
- className="sc-AxjAm eEVAA"
->
- <button
- className="secondary"
- onClick={[Function]}
- >
- Secondary
- </button>
-</div>
-`;
-
-exports[`Storyshots Button Tertiary 1`] = `
-<div
- className="sc-AxjAm eEVAA"
->
- <button
- className="tertiary"
- onClick={[Function]}
- >
- Tertiary
- </button>
-</div>
-`;
-
-exports[`Storyshots Button/ButtonCopy Init 1`] = `
-<div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- onClick={[Function]}
- >
- Copy
- </button>
- </div>
-</div>
-`;
-
-exports[`Storyshots Card Default 1`] = `
-<div
- className="sc-AxirZ hiQgNr"
->
- <div>
- <h1
- style={
- Object {
- "color": "#393F50",
- "fontSize": "16px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Lorem Ipsum Sit Dolor Amet
- </h1>
- <p
- style={
- Object {
- "color": "#EB4E2C",
- "fontSize": "12px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- warga
- </p>
- </div>
- <div
- className="sc-AxiKw kEsYLJ"
- >
- <a
- onClick={[Function]}
- style={
- Object {
- "cursor": "pointer",
- }
- }
- >
- Detail
- </a>
- </div>
-</div>
-`;
-
-exports[`Storyshots Card/Card List Default 1`] = `
-<div
- className="sc-AxhCb jDfmgo"
->
- <div
- className="sc-AxhUy coOsmi"
- >
- <div
- className="sc-AxirZ hiQgNr"
- >
- <div>
- <h1
- style={
- Object {
- "color": "#393F50",
- "fontSize": "16px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Lorem Ipsum
- </h1>
- <p
- style={
- Object {
- "color": "#EB4E2C",
- "fontSize": "12px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Warga
- </p>
- </div>
- <div
- className="sc-AxiKw kEsYLJ"
- >
- <a
- onClick={[Function]}
- style={
- Object {
- "cursor": "pointer",
- }
- }
- >
- Detail
- </a>
- </div>
- </div>
- </div>
- <div
- className="sc-AxhUy coOsmi"
- >
- <div
- className="sc-AxirZ hiQgNr"
- >
- <div>
- <h1
- style={
- Object {
- "color": "#393F50",
- "fontSize": "16px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Sit Dolor Amet
- </h1>
- <p
- style={
- Object {
- "color": "#EB4E2C",
- "fontSize": "12px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Warga
- </p>
- </div>
- <div
- className="sc-AxiKw kEsYLJ"
- >
- <a
- onClick={[Function]}
- style={
- Object {
- "cursor": "pointer",
- }
- }
- >
- Detail
- </a>
- </div>
- </div>
- </div>
- <div
- className="sc-AxhUy coOsmi"
- >
- <div
- className="sc-AxirZ hiQgNr"
- >
- <div>
- <h1
- style={
- Object {
- "color": "#393F50",
- "fontSize": "16px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Consectetur Adisipicing
- </h1>
- <p
- style={
- Object {
- "color": "#EB4E2C",
- "fontSize": "12px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Institusi
- </p>
- </div>
- <div
- className="sc-AxiKw kEsYLJ"
- >
- <a
- onClick={[Function]}
- style={
- Object {
- "cursor": "pointer",
- }
- }
- >
- Detail
- </a>
- </div>
- </div>
- </div>
- <div
- className="sc-AxhUy coOsmi"
- >
- <div
- className="sc-AxirZ hiQgNr"
- >
- <div>
- <h1
- style={
- Object {
- "color": "#393F50",
- "fontSize": "16px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Elit Sed Do
- </h1>
- <p
- style={
- Object {
- "color": "#EB4E2C",
- "fontSize": "12px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Pekerja
- </p>
- </div>
- <div
- className="sc-AxiKw kEsYLJ"
- >
- <a
- onClick={[Function]}
- style={
- Object {
- "cursor": "pointer",
- }
- }
- >
- Detail
- </a>
- </div>
- </div>
- </div>
- <div
- className="sc-AxhUy coOsmi"
- >
- <div
- className="sc-AxirZ hiQgNr"
- >
- <div>
- <h1
- style={
- Object {
- "color": "#393F50",
- "fontSize": "16px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Eiusmod Tempor
- </h1>
- <p
- style={
- Object {
- "color": "#EB4E2C",
- "fontSize": "12px",
- "fontWeight": 600,
- "margin": 0,
- }
- }
- >
- Institusi
- </p>
- </div>
- <div
- className="sc-AxiKw kEsYLJ"
- >
- <a
- onClick={[Function]}
- style={
- Object {
- "cursor": "pointer",
- }
- }
- >
- Detail
- </a>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Details/Detail Field Default 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- h1 {
- font-family: Muli;
- font-style: normal;
- font-weight: bold;
- font-size: 16px;
- line-height: 20px;
- /* identical to box height */
-
-
- color: #00239D;
- }
-
- h2 {
- font-family: Muli;
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
- line-height: 18px;
- /* identical to box height */
-
-
- color: #393F50;
-
- }
-
- .profpic {
- width: 241px;
- height: 226px;
-
-
- background: #00239D;
- }
-
- .background {
- width: 241px;
- height: 53px;
- left: 288px;
- top: 394px;
-
- background: #F5F6F8;
- }
-
- .identity {
- font-family: Muli;
- font-style: normal;
- font-weight: 800;
- font-size: 18px;
- text-align: center;
- top: 44.44%; bottom: 51.11%;
- padding-top:8px;
- }
-
- p {
- font-family: Muli;
- font-style: normal;
- font-weight: normal;
- font-size: 14px;
-
- /* identical to box height */
-
-
- color: #393F50;
- margin-top: -2px;
-
- }
-
- .spilt {
- column-count: 2;
-
- }
-
- </style>
- <h1>
- Usia
- </h1>
- <h2>
- 67 tahun
- </h2>
-</div>
-`;
-
-exports[`Storyshots Input/Date Field Default 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className=""
- >
- Tanggal Lahir
- </label>
- <div
- className="row"
- >
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tanggal
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Bulan
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tahun
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Date Field Error Date 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className=""
- >
- Tanggal Lahir
- </label>
- <div
- className="row"
- >
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tanggal
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- <span
- className="error"
- >
- Tanggal lahir tidak boleh kosong
- </span>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Bulan
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tahun
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Date Field Error Month 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className=""
- >
- Tanggal Lahir
- </label>
- <div
- className="row"
- >
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tanggal
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Bulan
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- <span
- className="error"
- >
- Bulan lahir tidak boleh kosong
- </span>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tahun
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Date Field Error Year 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className=""
- >
- Tanggal Lahir
- </label>
- <div
- className="row"
- >
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tanggal
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Bulan
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tahun
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- <span
- className="error"
- >
- Tahun lahir tidak boleh kosong
- </span>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Date Field Required 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className="required"
- >
- Tanggal Lahir
- </label>
- <div
- className="row"
- >
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tanggal
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Bulan
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- <div
- className="col s4"
- >
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Tahun
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Dropdown Default 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className=""
- >
- Status Mustahik
- </label>
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Pilih Status Mustahik
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Dropdown Error 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className=""
- >
- Status Mustahik
- </label>
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Pilih Status Mustahik
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
- <span
- className="error"
- >
- Error message
- </span>
-</div>
-`;
-
-exports[`Storyshots Input/Dropdown Required 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className="required"
- >
- Status Mustahik
- </label>
- <div
- style={
- Object {
- "position": "relative",
- }
- }
- >
- <div
- className="header "
- onClick={[Function]}
- >
- <div
- style={
- Object {
- "display": "inline",
- }
- }
- >
- Pilih Status Mustahik
- </div>
- <img
- src="dropdown-arrow.svg"
- />
- </div>
- <style
- jsx={true}
- >
-
- .header {
- border-bottom: 1px solid #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #C4C4C4;
- }
-
- .chosen {
- color: #393F50;
- }
-
- .options {
- border-radius: 10px 10px 0px 0px;
- list-style: none;
- position: absolute;
- width: -webkit-fill-available;
- background-color: #F5F6F8;
- font-family: Muli;
- font-size: 14px;
- font-weight: 600;
- line-height: 18px;
- max-height: 400px;
- overflow-y: overlay;
- color: #393F50;
- padding: 20px 0px 0px 0px;
- }
-
- .options:before {
- height: 4px;
- border-radius: 4px;
- background-color: #E5E5E5;
- width: 20%;
- position: absolute;
- top: 10px;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- text-align: center;
- content: "a";
- overflow: hidden;
- }
-
- .option {
- padding: 15px 20px;
- text-align: center;
- }
-
- .option:hover {
- background-color: #002398;
- color: #FFFFFF;
- }
-
- img {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- }
-
- </style>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Filter Default 1`] = `
-<div
- className="filter"
->
- <style
- jsx={true}
- >
-
- .filter p{
- font-family: Muli;
- font-style: normal;
- font-weight: bold;
- font-size: 14px;
- line-height: 18px;
- color: #00239D;
- text-decoration : none;
- }
-
- .kotakFilter{
- position : absolute;
- width : 55%;
- height : 55%;
- padding : 3%;
- background: #E5E5E5;
- border: 1px solid #393F50;
- box-sizing: border-box;
- }
-
-
- </style>
- <div
- onClick={[Function]}
- >
- <p>
- SEMUA SUMBER DATA ⯆
- </p>
- </div>
-</div>
-`;
-
-exports[`Storyshots Input/Text Field Default 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className={null}
- >
-
- Nama Lengkap
-
- </label>
- <input
- name="Nama Lengkap"
- onChange={[Function]}
- placeholder="Nama sesuai dengan KTP"
- required={false}
- type="text"
- value={null}
- />
-</div>
-`;
-
-exports[`Storyshots Input/Text Field Error 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className={null}
- >
-
- Nama Lengkap
-
- </label>
- <input
- name="Nama Lengkap"
- onChange={[Function]}
- placeholder="Nama sesuai dengan KTP"
- required={false}
- type="text"
- value={null}
- />
- <span
- className="error"
- >
- Nama lengkap tidak boleh kosong
- </span>
-</div>
-`;
-
-exports[`Storyshots Input/Text Field Required 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className="required"
- >
-
- Nama Lengkap
-
- </label>
- <input
- name="Nama Lengkap"
- onChange={[Function]}
- placeholder="Nama sesuai dengan KTP"
- required={true}
- type="text"
- value={null}
- />
-</div>
-`;
-
-exports[`Storyshots Kwitansi/InfoTransaksi Default 1`] = `
-<div
- className="sc-AxgMl kBvVnv"
->
- <div>
- Kwitansi akan muncul jika transaksi seluruh status sudah berhasil
- </div>
- <br />
- <div>
- <span
- className="title"
- >
- Transaksi Uang
- </span>
-
- <br />
-
- BERHASIL
-
- </div>
- <br />
- <div>
- <span
- className="title"
- >
- Transaksi Beras
- </span>
-
- <br />
-
- DIPROSES
-
- </div>
-</div>
-`;
-
-exports[`Storyshots Kwitansi/Kwitansi Default 1`] = `
-<div>
- <div>
- <div
- className="sc-AxheI hLnAjv"
- >
- ID TRANSAKSI : #
- 10000
- <p
- className="status"
- >
- Transaksi zakat masih
- BERHASIL
-
- </p>
- </div>
- <br />
- <div
- className="sc-AxgMl kBvVnv"
- >
- <div
- className="title"
- >
- Kwitansi Zakat
- </div>
- <br />
- <br />
- <div
- className="flex-container"
- >
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- >
- Unduh
- </button>
- </div>
- </div>
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- >
- Bagikan
- </button>
- </div>
- </div>
- </div>
- </div>
- <br />
- </div>
- <div
- className="sc-AxgMl kBvVnv"
- >
- <div
- className="title"
- >
- Ringkasan Transaksi
- </div>
- <br />
- <div
- className="subtitle"
- >
- Nama Akun
- </div>
- <div>
- Annisaa Fitri Shabrina
- </div>
- <br />
- <div
- className="subtitle"
- >
- Nama Muzakki
- </div>
- <div>
- Syidniy Melborn
- </div>
- <div>
- Dzakiah Aisyah
- </div>
- <br />
- <div
- className="subtitle"
- >
- Transaksi Uang
- </div>
- <div>
- Rp
- 650.000,00
- </div>
- <br />
- <div>
- <b>
- Pengiriman Uang
- </b>
- <br />
-
- </div>
- <div>
- Transfer
- <br />
- <a
- href="/"
- >
- bukti transfer
- </a>
-
- <br />
- <br />
- </div>
- <div
- className="subtitle"
- >
- Transaksi Beras
- </div>
- <div>
- 2.5
- kilogram beras
- </div>
- <br />
- <div>
- <b>
- Pengiriman Beras
- </b>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Kwitansi/Ringkasan Default 1`] = `
-<div
- className="sc-AxgMl kBvVnv"
->
- <div
- className="title"
- >
- Ringkasan Transaksi
- </div>
- <br />
- <div
- className="subtitle"
- >
- Nama Akun
- </div>
- <div>
- Annisaa Fitri Shabrina
- </div>
- <br />
- <div
- className="subtitle"
- >
- Nama Muzakki
- </div>
- <div>
- Syidniy Melborn
- </div>
- <div>
- Dzakiah Aisyah
- </div>
- <br />
- <div
- className="subtitle"
- >
- Transaksi Uang
- </div>
- <div>
- Rp
- 650.000,00
- </div>
- <br />
- <div>
- <b>
- Pengiriman Uang
- </b>
- <br />
-
- </div>
- <div>
- Transfer
- <br />
- <a
- href="/"
- >
- bukti transfer
- </a>
-
- <br />
- <br />
- </div>
- <div
- className="subtitle"
- >
- Transaksi Beras
- </div>
- <div>
- 2.5
- kilogram beras
- </div>
- <br />
- <div>
- <b>
- Pengiriman Beras
- </b>
- </div>
-</div>
-`;
-
-exports[`Storyshots Kwitansi/StatusTransaksi Default 1`] = `
-<div
- className="sc-AxheI hLnAjv"
->
- ID TRANSAKSI : #
- 1000
- <p
- className="status"
- >
- Transaksi zakat masih
- DIPROSES
-
- </p>
-</div>
-`;
-
-exports[`Storyshots Kwitansi/UnduhKwitansi Default 1`] = `
-<div
- className="sc-AxgMl kBvVnv"
->
- <div
- className="title"
- >
- Kwitansi Zakat
- </div>
- <br />
- <br />
- <div
- className="flex-container"
- >
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- >
- Unduh
- </button>
- </div>
- </div>
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- >
- Bagikan
- </button>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Navigation Bar Default 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- .navigation-bar {
- background: #FFFFFF;
- border: 1px solid #DEDEDE;
- box-sizing: border-box;
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-
- width: 250px;
- height: 100vh;
-
- }
-
- .profile-picture {
- width: 100px;
- height: 100px;
- background-color: #00239D;
- border-radius: 50%;
-
- margin: 50px auto;
- }
-
- .user-name {
- font-style: normal;
- font-weight: bold;
- font-size: 20px;
- font-family: Muli;
- line-height: 25px;
- text-align: center;
-
- color: #393F50;
- }
-
- .user-role {
- font-style: normal;
- font-weight: bold;
- font-size: 16px;
- line-height: 20px;
- text-align: center;
- font-family: Muli;
-
- color: #898686;
-
- text-transform: uppercase;
- }
-
- .menu-title {
- font-style: normal;
- font-weight: bold;
- font-size: 16px;
- line-height: 10px;
-
- letter-spacing: 0.1em;
-
- color: #898686;
-
- margin: 15% 7.5%;
-
- font-family: Muli;
- }
-
- div.menu-option {
- font-family: Muli;
- font-style: normal;
- font-weight: bold;
- font-size: 18px;
- line-height: 23px;
-
- /* Black */
-
- color: #454545;
-
- margin: 0 0 10% 20%;
- }
-
- .submenu-option {
- font-family: Muli;
- font-style: normal;
- font-weight: bold;
- font-size: 14px;
- line-height: 18px;
-
- /* Black */
-
- color: #454545;
-
- margin: 2.5% 0 2.5% 15%;
- padding: 20px;
- }
-
- .menu:hover {
- background: linear-gradient(to right, #00239D 0%, #00239D 5%, #F5F6F8 5%, #F5F6F8 100%);
- }
-
-
- </style>
- <div
- className="navigation-bar"
- >
- <div
- className="profile-picture"
- />
- <h1
- className="user-name"
- >
- Annisaa Fitri Shabrina
- </h1>
- <p
- className="user-role"
- >
- Admin
- </p>
- <h1
- className="menu-title"
- >
- DATA
- </h1>
- <div>
- <div
- onClick={[Function]}
- >
- <div
- className="menu-option"
- style={
- Object {
- "cursor": "pointer",
- }
- }
- >
- Mustahik
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Receipt/Cash Default 1`] = `
-<div
- className="sc-fzoLsD gKrUjA"
->
- <h1>
- Transaksi Uang
- </h1>
- <div
- className="container"
- >
- <div
- className="sc-Axmtr eskHhV"
- >
- <ul
- className="name"
- >
- <li>
- Syidniy melborn
- </li>
- <li>
- Dzakiah Aisyah
- </li>
- <li
- className="total"
- >
- Total Transaksi uang
- </li>
- </ul>
- <ul
- className="amount"
- >
- <li>
- Rp 400.000
- </li>
- <li>
- Rp 250.000
- </li>
- <li
- className="total"
- >
- Rp 650.000
- </li>
- </ul>
- </div>
- </div>
- <div>
- <div
- className="sc-AxmLO jvsrzh"
- >
- <h1>
- Pengiriman
- :
- </h1>
- <div
- className="methods"
- >
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Transfer Bank
-
- </p>
- </div>
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Tunai di Masjid Al-Jabbar
-
- <span
- className="sc-fzozJi isapqo"
- >
- Jam Operasional Selasa - Sabtu 08.00 - 17.00
- </span>
- </p>
- </div>
- </div>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Receipt/Parts/Payment List Default 1`] = `
-<div
- className="sc-Axmtr eskHhV"
->
- <ul
- className="name"
- >
- <li>
- Syidniy Melborn
- </li>
- <li>
- Dzakiah Aisyah
- </li>
- <li
- className="total"
- >
- Total Transaksi Uang
- </li>
- </ul>
- <ul
- className="amount"
- >
- <li>
- Rp 400.000
- </li>
- <li>
- Rp 250.000
- </li>
- <li
- className="total"
- >
- Rp 650.000
- </li>
- </ul>
-</div>
-`;
-
-exports[`Storyshots Receipt/Parts/Payment Option Default 1`] = `
-<div
- className="sc-AxmLO jvsrzh"
->
- <h1>
- Pengiriman
- :
- </h1>
- <div
- className="methods"
- >
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Transfer Bank
-
- </p>
- </div>
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Tunai di Masjid Al-Jabbar
-
- <span
- className="sc-fzozJi isapqo"
- >
- Jam Operasional Selasa - Sabtu 08:00 - 17:00
- </span>
- </p>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Receipt/Rice Default 1`] = `
-<div
- className="sc-fzoLsD gKrUjA"
->
- <h1>
- Transaksi Beras
- </h1>
- <div
- className="container"
- >
- <div
- className="sc-Axmtr eskHhV"
- >
- <ul
- className="name"
- >
- <li>
- Syidniy Melborn
- </li>
- <li>
- Bambang Bimbing
- </li>
- <li
- className="total"
- >
- Total Transaksi Beras
- </li>
- </ul>
- <ul
- className="amount"
- >
- <li>
- 2,5 kilogram
- </li>
- <li>
- 1,0 kilogram
- </li>
- <li
- className="total"
- >
- 3,5 kilogram
- </li>
- </ul>
- </div>
- </div>
- <div>
- <div
- className="sc-AxmLO jvsrzh"
- >
- <h1>
- Pengiriman
- :
- </h1>
- <div
- className="methods"
- >
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Dijemput
-
- </p>
- </div>
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Diantar ke Masjid Al-Jabbar
-
- <span
- className="sc-fzozJi isapqo"
- >
- Jam Opersaional Selasa - Sabtu 08.00 - 17.00
- </span>
- </p>
- </div>
- </div>
- </div>
- </div>
- <div
- className="hidden"
- >
- <div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className="required"
- >
-
- Alamat Lengkap
-
- </label>
- <input
- name="Alamat Lengkap"
- onChange={[Function]}
- placeholder="Diisi dengan alamat"
- required={true}
- type="text"
- value={null}
- />
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Receipt/Summary Default 1`] = `
-<div
- className="sc-fzpans edHIPx"
->
- <h1>
- Ringkasan Transaksi
- </h1>
- <section
- className="margined"
- >
- <div
- className="sc-fzoLsD gKrUjA"
- >
- <h1>
- Transaksi Uang
- </h1>
- <div
- className="container"
- >
- <div
- className="sc-Axmtr eskHhV"
- >
- <ul
- className="name"
- >
- <li>
- Sydniy Melbourn
- </li>
- <li>
- Dzakiah Lorem
- </li>
- <li>
- Ipsum Sit
- </li>
- <li
- className="total"
- >
- Total Transaksi uang
- </li>
- </ul>
- <ul
- className="amount"
- >
- <li>
- Rp 400.000
- </li>
- <li>
- Rp 350.000
- </li>
- <li>
- Rp 50.000
- </li>
- <li
- className="total"
- >
- Rp 800.000
- </li>
- </ul>
- </div>
- </div>
- <div>
- <div
- className="sc-AxmLO jvsrzh"
- >
- <h1>
- Pengiriman
- :
- </h1>
- <div
- className="methods"
- >
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Transfer Bank
-
- </p>
- </div>
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Tunai di Masjid Al-Jabbar
-
- <span
- className="sc-fzozJi isapqo"
- >
- Jam Operasional Selasa - Sabtu 08.00 - 17.00
- </span>
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section
- className="margined"
- >
- <div
- className="sc-fzoLsD gKrUjA"
- >
- <h1>
- Transaksi Beras
- </h1>
- <div
- className="container"
- >
- <div
- className="sc-Axmtr eskHhV"
- >
- <ul
- className="name"
- >
- <li>
- Sydniy Lorem
- </li>
- <li>
- Dzakiah Lorem
- </li>
- <li
- className="total"
- >
- Total Transaksi Beras
- </li>
- </ul>
- <ul
- className="amount"
- >
- <li>
- 2,0 kilogram
- </li>
- <li>
- 3,0 kilogram
- </li>
- <li
- className="total"
- >
- 5,0 kilogram
- </li>
- </ul>
- </div>
- </div>
- <div>
- <div
- className="sc-AxmLO jvsrzh"
- >
- <h1>
- Pengiriman
- :
- </h1>
- <div
- className="methods"
- >
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Dijemput
-
- </p>
- </div>
- <div
- className="method"
- onClick={[Function]}
- >
- <div
- className="box "
- />
- <p>
- Diantar ke Masjid Al-Jabbar
-
- <span
- className="sc-fzozJi isapqo"
- >
- Jam Opersaional Selasa - Sabtu 08.00 - 17.00
- </span>
- </p>
- </div>
- </div>
- </div>
- </div>
- <div
- className="hidden"
- >
- <div>
- <style
- jsx={true}
- >
-
- label {
- font-family: Muli;
- font-weight: 700;
- font-size: 16px;
- color: #393F50;
- line-height: 20px;
- }
-
- .required:after {
- color: #EB4E2C;
- content: "*";
- }
-
- input, select {
- border-width: 0px 0px 1px 0px;
- border-color: #00239D;
- display: block;
- width: 99%;
- padding: 12px 5px 12px 5px;
- font-size: 14px;
- font-family: Muli;
- line-height: 16px;
- color: #393F50;
- background-color: #FFFFFF;
- }
-
- input::placeholder {
- color: #C4C4C4;
- }
-
- .error {
- font-family: Muli;
- font-style: normal;
- font-weight: 700;
- font-size: 12px;
- line-height: 15px;
- color: #EB4E2C;
- }
-
- </style>
- <label
- className="required"
- >
-
- Alamat Lengkap
-
- </label>
- <input
- name="Alamat Lengkap"
- onChange={[Function]}
- placeholder="Diisi dengan alamat"
- required={true}
- type="text"
- value={null}
- />
- </div>
- </div>
- </div>
- </section>
- <div
- className="margined"
- >
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- onClick={[Function]}
- >
- LANJUTKAN KE PENGIRIMAN >>
- </button>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Search Default 1`] = `
-<div>
- <style
- jsx={true}
- >
-
-
- form.example input[type=text] {
- position: absolute;
- width: 982px;
- height: 48px;
-
- background-image: url('search-icon.png');
- background-size: 20px;
- background-position: 14px 12px;
- background-repeat: no-repeat;
-
- background-color: #FFFFFF;
- border: 1px solid #393F50;
- box-sizing: border-box;
- border-radius: 8px;
-
- font-family: Muli;
- font-style: normal;
- font-weight: bold;
- font-size: 14px;
- padding: 0px 0px 4px 45px;
-
- color: #C2C2C2;
- }
-
-
- </style>
- <form
- action="#"
- className="example"
- >
- <input
- name="search"
- placeholder="Cari berdasarkan nama sumber data"
- type="text"
- />
- </form>
-</div>
-`;
-
-exports[`Storyshots Title/Title Flow Default 1`] = `
-<div
- className="sc-fzplWN gQiFrk"
- size={4}
->
- <div
- className="sc-fznyAO hMhbJG"
- >
- <p
- className=""
- >
- Data
- </p>
- <img
- src="/svg/gt-arrow.svg"
- />
- </div>
- <div
- className="sc-fznyAO hMhbJG"
- >
- <p
- className="highlight"
- >
- Pengiriman
- </p>
- <img
- src="/svg/gt-arrow.svg"
- />
- </div>
- <div
- className="sc-fznyAO hMhbJG"
- >
- <p
- className=""
- >
- Ulasan
- </p>
- <img
- src="/svg/gt-arrow.svg"
- />
- </div>
- <div
- className="sc-fznyAO hMhbJG"
- >
- <p
- className=""
- >
- Kwitansi
- </p>
- </div>
-</div>
-`;
-
-exports[`Storyshots Ulasan/Beras Antar 1`] = `
-<div
- className="sc-fznKkj juoIE"
->
- <p>
- <b>
- 2.5
- kilogram Beras
- </b>
- </p>
- <p>
- <b>
- Pengiriman Beras
- </b>
-
- <br />
- Diantar ke
- Masjid Al-Jabbar
-
- <br />
- <span
- className="info"
- >
- *jam Operasional
- Selasa-Sabtu 08.00-16.00
- </span>
- </p>
-</div>
-`;
-
-exports[`Storyshots Ulasan/Beras Jemput 1`] = `
-<div
- className="sc-fznKkj juoIE"
->
- <p>
- <b>
- 2.5
- kilogram Beras
- </b>
- </p>
- <p>
- <b>
- Pengiriman Beras
- </b>
-
- <br />
- Dijemput di
- Jalan Taman Mini Indonesia Indah
-
- <br />
- </p>
-</div>
-`;
-
-exports[`Storyshots Ulasan/TransferUang Default 1`] = `
-<div
- className="sc-fznKkj juoIE"
->
- <p>
- <b>
- Pengiriman Uang
- </b>
- <br />
- Transfer
- </p>
- <p>
- Silakan transfer ke
- Masjid Al-Jabbar
- </p>
- <p>
- Muamalat
-
- <br />
-
- Masjid Al-Jabbar
- </p>
- <div
- className="highlight"
- >
- <b>
- Nomor Rekening
- </b>
- <div
- className="flex-container"
- >
- <div
- className="num"
- id="accNum"
- >
- 999991223458273
- </div>
- <div>
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="tertiary"
- onClick={[Function]}
- >
- salin
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <br />
- <div
- className="highlight"
- >
- <b>
- Nominal
- </b>
- <div
- className="flex-container"
- >
- <div
- className="num"
- >
- <div>
- Rp
- 650.000,00
- </div>
- </div>
- <div>
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="tertiary"
- onClick={[Function]}
- >
- salin
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div
- className="unggah-container"
- >
-
- <b>
- Bukti Transfer
- </b>
-
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- >
- unggah
- </button>
- </div>
- </div>
-</div>
-`;
-
-exports[`Storyshots Ulasan/UangTunai Default 1`] = `
-<div
- className="sc-fznKkj juoIE"
->
- <p>
- <b>
- <div>
- Rp
- 650.000,00
- </div>
- </b>
- </p>
- <p>
- <b>
- Pengiriman
- </b>
-
- <br />
- Tunai di
- Masjid Al-Jabbar
-
- <br />
- <span
- className="info"
- >
- *jam Operasional
- Selasa-Sabtu 08.00-16.00
- </span>
- </p>
-</div>
-`;
-
-exports[`Storyshots Ulasan/Ulasan Default 1`] = `
-<div>
- <div
- className="sc-fznZeY cuNYDe"
- >
- ID TRANSAKSI : #
- </div>
- <br />
- <div
- className="sc-fznKkj juoIE"
- >
- <div
- className="title"
- >
- Ringkasan Transaksi
- </div>
- <div
- className="content"
- >
- <div
- className="money"
- >
- <div
- className="title"
- >
- Transaksi Uang
- </div>
- <div
- className="sc-fznKkj juoIE"
- >
- <p>
- <b>
- Pengiriman Uang
- </b>
- <br />
- Transfer
- </p>
- <p>
- Silakan transfer ke
- Masjid Al-Jabbar
- </p>
- <p>
- Muamalat
-
- <br />
-
- Masjid Al-Jabbar
- </p>
- <div
- className="highlight"
- >
- <b>
- Nomor Rekening
- </b>
- <div
- className="flex-container"
- >
- <div
- className="num"
- id="accNum"
- >
- 999991223458273
- </div>
- <div>
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="tertiary"
- onClick={[Function]}
- >
- salin
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <br />
- <div
- className="highlight"
- >
- <b>
- Nominal
- </b>
- <div
- className="flex-container"
- >
- <div
- className="num"
- >
- <div>
- Rp
- 650.000,00
- </div>
- </div>
- <div>
- <div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="tertiary"
- onClick={[Function]}
- >
- salin
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div
- className="unggah-container"
- >
-
- <b>
- Bukti Transfer
- </b>
-
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- >
- unggah
- </button>
- </div>
- </div>
- </div>
- </div>
- <div
- className="rice"
- >
- <div
- className="title"
- >
- Transaksi Beras
- </div>
- </div>
- </div>
- <div
- className="sc-AxjAm eEVAA"
- >
- <button
- className="primary"
- onClick={[Function]}
- >
- LANJUTKAN KE KWITANSI >>
- </button>
- </div>
-
- <br />
- </div>
-</div>
-`;
-
-exports[`Storyshots Warning Default 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- .box {
- width: 385px;
- height: 374px;
- background: #FFFFFF;
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- border-radius: 10px;
- }
-
- .warningText {
- font-family: Muli;
- font-style: normal;
- font-weight: 800;
- font-size: 24px;
- line-height: 30px;
- text-align: center;
-
- color: #EB4E2C;
- }
-
- .desc {
- font-family: Muli;
- font-style: normal;
- font-weight: normal;
- font-size: 16px;
- line-height: 20px;
- text-align: center;
-
- color: #000000;
- }
-
- div.redButton {
- width: 101px;
- height: 40px;
-
- background: #EB4E2C;
- border-radius: 8px;
- }
-
- .greyButton {
- width: 101px;
- height: 40px;
-
- background: #C2C2C2;
- border-radius: 8px;
- }
-
- p.text {
-
- height: 20px;
-
- display: block;
- margin: auto;
- padding-top: 10px;
-
- font-family: Muli;
- font-style: normal;
- font-weight: bold;
- font-size: 16px;
- line-height: 20px;
- /* identical to box height */
-
- text-align: center;
-
- color: #FFFFFF
- }
-
- </style>
- <div
- className="box"
- >
- <img
- alt="warning"
- src="/img/warning.png"
- style={
- Object {
- "display": "block",
- "margin": "auto",
- "paddingTop": "57px",
- }
- }
- />
- <div
- className="warningText"
- >
- Perhatian!
- </div>
- <div
- className="desc"
- style={
- Object {
- "marginLeft": "46px",
- "marginRight": "46px",
- "marginTop": "20px",
- }
- }
- >
- Apakah Anda yakin menghapus "Dewi Kobujer" dari Daftar Mustahik?
- </div>
- <div
- style={
- Object {
- "float": "left",
- "width": "50%",
- }
- }
- >
- <div
- className="redButton"
- onClick={[Function]}
- style={
- Object {
- "marginLeft": "59px",
- "marginTop": "49px",
- }
- }
- >
- <p
- className="text"
- >
- Ya, Hapus
- </p>
- </div>
- </div>
- <div
- style={
- Object {
- "float": "right",
- "width": "50%",
- }
- }
- >
- <div
- className="greyButton"
- onClick={[Function]}
- style={
- Object {
- "marginLeft": "45px",
- "marginTop": "49px",
- }
- }
- >
- <p
- className="text"
- >
- Batal
- </p>
- </div>
- </div>
- </div>
-</div>
-`;
diff --git a/__snapshots__/Buttons/__snapshots__/Button.stories.storyshot b/__snapshots__/Buttons/__snapshots__/Button.stories.storyshot
index 2d9abcd392ca5db41fa0476d75a1a9486fc08e3d..c13673e283b7a9b0db001c92c7ea4925efbbcf96 100644
--- a/__snapshots__/Buttons/__snapshots__/Button.stories.storyshot
+++ b/__snapshots__/Buttons/__snapshots__/Button.stories.storyshot
@@ -1,36 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button Danger 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- button{
- font-family: Muli;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- padding: 5px 10px;
- color : white;
- }
- .primary{
- background: #00239D;
- border-radius: 4px;
- border:1px solid #00239D;
- }
- .secondary{
- border-radius: 4px;
- background: #C2C2C2;
- border:1px solid #C2C2C2;
- }
- .danger{
- background: #EB4E2C;
- border-radius: 4px;
- border:1px solid #EB4E2C;
- }
-
- </style>
+.c0 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c0 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c0 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c0 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c0 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c0 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+<div
+ className="c0"
+>
<button
className="danger"
onClick={[Function]}
@@ -41,36 +56,51 @@ exports[`Storyshots Button Danger 1`] = `
`;
exports[`Storyshots Button Primary 1`] = `
-<div>
- <style
- jsx={true}
- >
-
- button{
- font-family: Muli;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- padding: 5px 10px;
- color : white;
- }
- .primary{
- background: #00239D;
- border-radius: 4px;
- border:1px solid #00239D;
- }
- .secondary{
- border-radius: 4px;
- background: #C2C2C2;
- border:1px solid #C2C2C2;
- }
- .danger{
- background: #EB4E2C;
- border-radius: 4px;
- border:1px solid #EB4E2C;
- }
-
- </style>
+.c0 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c0 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c0 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c0 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c0 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c0 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+<div
+ className="c0"
+>
<button
className="primary"
onClick={[Function]}
@@ -80,37 +110,107 @@ exports[`Storyshots Button Primary 1`] = `
</div>
`;
-exports[`Storyshots Button Secondary 1`] = `
-<div>
- <style
- jsx={true}
+exports[`Storyshots Button Round 1`] = `
+.c0 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c0 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c0 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c0 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c0 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c0 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+<div
+ className="c0"
+>
+ <button
+ className="round"
+ onClick={[Function]}
>
-
- button{
- font-family: Muli;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- padding: 5px 10px;
- color : white;
- }
- .primary{
- background: #00239D;
- border-radius: 4px;
- border:1px solid #00239D;
- }
- .secondary{
- border-radius: 4px;
- background: #C2C2C2;
- border:1px solid #C2C2C2;
- }
- .danger{
- background: #EB4E2C;
- border-radius: 4px;
- border:1px solid #EB4E2C;
- }
-
- </style>
+ +
+ </button>
+</div>
+`;
+
+exports[`Storyshots Button Secondary 1`] = `
+.c0 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c0 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c0 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c0 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c0 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c0 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+<div
+ className="c0"
+>
<button
className="secondary"
onClick={[Function]}
@@ -119,3 +219,58 @@ exports[`Storyshots Button Secondary 1`] = `
</button>
</div>
`;
+
+exports[`Storyshots Button Tertiary 1`] = `
+.c0 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c0 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c0 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c0 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c0 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c0 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+<div
+ className="c0"
+>
+ <button
+ className="tertiary"
+ onClick={[Function]}
+ >
+ Tertiary
+ </button>
+</div>
+`;
diff --git a/__snapshots__/Buttons/__snapshots__/ButtonCopy.stories.storyshot b/__snapshots__/Buttons/__snapshots__/ButtonCopy.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..d21d56927798cf8032b79f8fc547d8c1a0383a04
--- /dev/null
+++ b/__snapshots__/Buttons/__snapshots__/ButtonCopy.stories.storyshot
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button/ButtonCopy Init 1`] = `
+.c0 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c0 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c0 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c0 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c0 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c0 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+<div>
+ <div
+ className="c0"
+ >
+ <button
+ className="primary"
+ onClick={[Function]}
+ >
+ Copy
+ </button>
+ </div>
+</div>
+`;
diff --git a/__snapshots__/Inputs/__snapshots__/DateField.stories.storyshot b/__snapshots__/Inputs/__snapshots__/DateField.stories.storyshot
index 938194a5e0aef1ab81e656a094bf6e223c098094..a2e7240ab0415320c55c193167b83d84a01d857b 100644
--- a/__snapshots__/Inputs/__snapshots__/DateField.stories.storyshot
+++ b/__snapshots__/Inputs/__snapshots__/DateField.stories.storyshot
@@ -52,10 +52,10 @@ exports[`Storyshots Input/Date Field Default 1`] = `
Tanggal Lahir
</label>
<div
- class="row"
+ className="row"
>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -152,7 +152,7 @@ exports[`Storyshots Input/Date Field Default 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -249,7 +249,7 @@ exports[`Storyshots Input/Date Field Default 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -401,10 +401,10 @@ exports[`Storyshots Input/Date Field Error Date 1`] = `
Tanggal Lahir
</label>
<div
- class="row"
+ className="row"
>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -506,7 +506,7 @@ exports[`Storyshots Input/Date Field Error Date 1`] = `
</span>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -603,7 +603,7 @@ exports[`Storyshots Input/Date Field Error Date 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -755,10 +755,10 @@ exports[`Storyshots Input/Date Field Error Month 1`] = `
Tanggal Lahir
</label>
<div
- class="row"
+ className="row"
>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -855,7 +855,7 @@ exports[`Storyshots Input/Date Field Error Month 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -957,7 +957,7 @@ exports[`Storyshots Input/Date Field Error Month 1`] = `
</span>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -1109,10 +1109,10 @@ exports[`Storyshots Input/Date Field Error Year 1`] = `
Tanggal Lahir
</label>
<div
- class="row"
+ className="row"
>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -1209,7 +1209,7 @@ exports[`Storyshots Input/Date Field Error Year 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -1306,7 +1306,7 @@ exports[`Storyshots Input/Date Field Error Year 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -1463,10 +1463,10 @@ exports[`Storyshots Input/Date Field Required 1`] = `
Tanggal Lahir
</label>
<div
- class="row"
+ className="row"
>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -1563,7 +1563,7 @@ exports[`Storyshots Input/Date Field Required 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
@@ -1660,7 +1660,7 @@ exports[`Storyshots Input/Date Field Required 1`] = `
</div>
</div>
<div
- class="col s4"
+ className="col s4"
>
<div
style={
diff --git a/__snapshots__/Kwitansi/__snapshots__/InfoTransaksi.stories.storyshot b/__snapshots__/Kwitansi/__snapshots__/InfoTransaksi.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..b5e9636c33804e1a9dea30e683dfc37ebc94be0d
--- /dev/null
+++ b/__snapshots__/Kwitansi/__snapshots__/InfoTransaksi.stories.storyshot
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Kwitansi/InfoTransaksi Default 1`] = `
+.c0 {
+ border-radius: 10px;
+ background: white;
+ padding: 20px 50px;
+}
+
+.c0 .status {
+ color: #EB4E2C;
+}
+
+.c0 .title {
+ font-weight: bold;
+ color: #00239D;
+ font-size: large;
+}
+
+.c0 .subtitle {
+ font-weight: bold;
+ color: #00239D;
+ font-size: medium;
+}
+
+.c0 .content {
+ margin: 25px;
+}
+
+.c0 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+.c0 .flex-container > div {
+ margin: 10px;
+}
+
+.c0 a {
+ color: #EB4E2C;
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+<div
+ className="c0"
+>
+ <div>
+ Kwitansi akan muncul jika transaksi seluruh status sudah berhasil
+ </div>
+ <br />
+ <div>
+ <span
+ className="title"
+ >
+ Transaksi Uang
+ </span>
+
+ <br />
+
+ BERHASIL
+
+ </div>
+ <br />
+ <div>
+ <span
+ className="title"
+ >
+ Transaksi Beras
+ </span>
+
+ <br />
+
+ DIPROSES
+
+ </div>
+</div>
+`;
diff --git a/__snapshots__/Kwitansi/__snapshots__/Kwitansi.stories.storyshot b/__snapshots__/Kwitansi/__snapshots__/Kwitansi.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..e57b2522f222b764c07f441e5bbe845af2f42759
--- /dev/null
+++ b/__snapshots__/Kwitansi/__snapshots__/Kwitansi.stories.storyshot
@@ -0,0 +1,236 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Kwitansi/Kwitansi Default 1`] = `
+.c2 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c2 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c2 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c2 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c2 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c2 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+.c1 {
+ border-radius: 10px;
+ background: white;
+ padding: 20px 50px;
+}
+
+.c1 .status {
+ color: #EB4E2C;
+}
+
+.c1 .title {
+ font-weight: bold;
+ color: #00239D;
+ font-size: large;
+}
+
+.c1 .subtitle {
+ font-weight: bold;
+ color: #00239D;
+ font-size: medium;
+}
+
+.c1 .content {
+ margin: 25px;
+}
+
+.c1 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+.c1 .flex-container > div {
+ margin: 10px;
+}
+
+.c1 a {
+ color: #EB4E2C;
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+.c0 {
+ border-radius: 10px;
+ background: white;
+ padding: 20px 50px;
+ font-weight: bold;
+}
+
+.c0 .status {
+ color: #EB4E2C;
+ font-weight: normal;
+}
+
+<div>
+ <div>
+ <div
+ className="c0"
+ >
+ ID TRANSAKSI : #
+ 10000
+ <p
+ className="status"
+ >
+ Transaksi zakat masih
+ BERHASIL
+
+ </p>
+ </div>
+ <br />
+ <div
+ className="c1"
+ >
+ <div
+ className="title"
+ >
+ Kwitansi Zakat
+ </div>
+ <br />
+ <br />
+ <div
+ className="flex-container"
+ >
+ <div>
+ <div
+ className="c2"
+ >
+ <button
+ className="primary"
+ >
+ Unduh
+ </button>
+ </div>
+ </div>
+ <div>
+ <div
+ className="c2"
+ >
+ <button
+ className="primary"
+ >
+ Bagikan
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <br />
+ </div>
+ <div
+ className="c1"
+ >
+ <div
+ className="title"
+ >
+ Ringkasan Transaksi
+ </div>
+ <br />
+ <div
+ className="subtitle"
+ >
+ Nama Akun
+ </div>
+ <div>
+ Annisaa Fitri Shabrina
+ </div>
+ <br />
+ <div
+ className="subtitle"
+ >
+ Nama Muzakki
+ </div>
+ <div>
+ Syidniy Melborn
+ </div>
+ <div>
+ Dzakiah Aisyah
+ </div>
+ <br />
+ <div
+ className="subtitle"
+ >
+ Transaksi Uang
+ </div>
+ <div>
+ Rp
+ 650.000,00
+ </div>
+ <br />
+ <div>
+ <b>
+ Pengiriman Uang
+ </b>
+ <br />
+
+ </div>
+ <div>
+ Transfer
+ <br />
+ <a
+ href="/"
+ >
+ bukti transfer
+ </a>
+
+ <br />
+ <br />
+ </div>
+ <div
+ className="subtitle"
+ >
+ Transaksi Beras
+ </div>
+ <div>
+ 2.5
+ kilogram beras
+ </div>
+ <br />
+ <div>
+ <b>
+ Pengiriman Beras
+ </b>
+ </div>
+ </div>
+</div>
+`;
diff --git a/__snapshots__/Kwitansi/__snapshots__/Ringkasan.stories.storyshot b/__snapshots__/Kwitansi/__snapshots__/Ringkasan.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..62bba307d261548f12a7d85a1381ac194a7ea879
--- /dev/null
+++ b/__snapshots__/Kwitansi/__snapshots__/Ringkasan.stories.storyshot
@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Kwitansi/Ringkasan Default 1`] = `
+.c0 {
+ border-radius: 10px;
+ background: white;
+ padding: 20px 50px;
+}
+
+.c0 .status {
+ color: #EB4E2C;
+}
+
+.c0 .title {
+ font-weight: bold;
+ color: #00239D;
+ font-size: large;
+}
+
+.c0 .subtitle {
+ font-weight: bold;
+ color: #00239D;
+ font-size: medium;
+}
+
+.c0 .content {
+ margin: 25px;
+}
+
+.c0 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+.c0 .flex-container > div {
+ margin: 10px;
+}
+
+.c0 a {
+ color: #EB4E2C;
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+<div
+ className="c0"
+>
+ <div
+ className="title"
+ >
+ Ringkasan Transaksi
+ </div>
+ <br />
+ <div
+ className="subtitle"
+ >
+ Nama Akun
+ </div>
+ <div>
+ Annisaa Fitri Shabrina
+ </div>
+ <br />
+ <div
+ className="subtitle"
+ >
+ Nama Muzakki
+ </div>
+ <div>
+ Syidniy Melborn
+ </div>
+ <div>
+ Dzakiah Aisyah
+ </div>
+ <br />
+ <div
+ className="subtitle"
+ >
+ Transaksi Uang
+ </div>
+ <div>
+ Rp
+ 650.000,00
+ </div>
+ <br />
+ <div>
+ <b>
+ Pengiriman Uang
+ </b>
+ <br />
+
+ </div>
+ <div>
+ Transfer
+ <br />
+ <a
+ href="/"
+ >
+ bukti transfer
+ </a>
+
+ <br />
+ <br />
+ </div>
+ <div
+ className="subtitle"
+ >
+ Transaksi Beras
+ </div>
+ <div>
+ 2.5
+ kilogram beras
+ </div>
+ <br />
+ <div>
+ <b>
+ Pengiriman Beras
+ </b>
+ </div>
+</div>
+`;
diff --git a/__snapshots__/Kwitansi/__snapshots__/StatusTransaksi.stories.storyshot b/__snapshots__/Kwitansi/__snapshots__/StatusTransaksi.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..06741ad4db22761ec7dc0feecedc613913b15616
--- /dev/null
+++ b/__snapshots__/Kwitansi/__snapshots__/StatusTransaksi.stories.storyshot
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Kwitansi/StatusTransaksi Default 1`] = `
+.c0 {
+ border-radius: 10px;
+ background: white;
+ padding: 20px 50px;
+ font-weight: bold;
+}
+
+.c0 .status {
+ color: #EB4E2C;
+ font-weight: normal;
+}
+
+<div
+ className="c0"
+>
+ ID TRANSAKSI : #
+ 1000
+ <p
+ className="status"
+ >
+ Transaksi zakat masih
+ DIPROSES
+
+ </p>
+</div>
+`;
diff --git a/__snapshots__/Kwitansi/__snapshots__/UnduhKwitansi.stories.storyshot b/__snapshots__/Kwitansi/__snapshots__/UnduhKwitansi.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..e62ad700ca14cb936e8fc9a897b1f5176f61951e
--- /dev/null
+++ b/__snapshots__/Kwitansi/__snapshots__/UnduhKwitansi.stories.storyshot
@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Kwitansi/UnduhKwitansi Default 1`] = `
+.c1 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c1 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c1 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c1 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c1 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c1 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+.c0 {
+ border-radius: 10px;
+ background: white;
+ padding: 20px 50px;
+}
+
+.c0 .status {
+ color: #EB4E2C;
+}
+
+.c0 .title {
+ font-weight: bold;
+ color: #00239D;
+ font-size: large;
+}
+
+.c0 .subtitle {
+ font-weight: bold;
+ color: #00239D;
+ font-size: medium;
+}
+
+.c0 .content {
+ margin: 25px;
+}
+
+.c0 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+.c0 .flex-container > div {
+ margin: 10px;
+}
+
+.c0 a {
+ color: #EB4E2C;
+ -webkit-text-decoration: underline;
+ text-decoration: underline;
+}
+
+<div
+ className="c0"
+>
+ <div
+ className="title"
+ >
+ Kwitansi Zakat
+ </div>
+ <br />
+ <br />
+ <div
+ className="flex-container"
+ >
+ <div>
+ <div
+ className="c1"
+ >
+ <button
+ className="primary"
+ >
+ Unduh
+ </button>
+ </div>
+ </div>
+ <div>
+ <div
+ className="c1"
+ >
+ <button
+ className="primary"
+ >
+ Bagikan
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/__snapshots__/Receipts/__snapshots__/ReceiptSummary.stories.storyshot b/__snapshots__/Receipts/__snapshots__/ReceiptSummary.stories.storyshot
index 7ca13f2f7f12ac520600f7d78c8566680251204f..42c2249908feff54f792d3d84a82e908a49f9ac6 100644
--- a/__snapshots__/Receipts/__snapshots__/ReceiptSummary.stories.storyshot
+++ b/__snapshots__/Receipts/__snapshots__/ReceiptSummary.stories.storyshot
@@ -1,6 +1,48 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Receipt/Summary Default 1`] = `
+.c5 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c5 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c5 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c5 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c5 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c5 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
.c2 {
font-family: Muli,sans-serif;
display: -webkit-box;
@@ -403,36 +445,9 @@ exports[`Storyshots Receipt/Summary Default 1`] = `
<div
className="margined"
>
- <div>
- <style
- jsx={true}
- >
-
- button{
- font-family: Muli;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- padding: 5px 10px;
- color : white;
- }
- .primary{
- background: #00239D;
- border-radius: 4px;
- border:1px solid #00239D;
- }
- .secondary{
- border-radius: 4px;
- background: #C2C2C2;
- border:1px solid #C2C2C2;
- }
- .danger{
- background: #EB4E2C;
- border-radius: 4px;
- border:1px solid #EB4E2C;
- }
-
- </style>
+ <div
+ className="c5"
+ >
<button
className="primary"
onClick={[Function]}
diff --git a/__snapshots__/Searches/__snapshots__/Search.stories.storyshot b/__snapshots__/Searches/__snapshots__/Search.stories.storyshot
index dce688536c2903c3c72b7ffdfbcf6a48c7a01fa9..4fcc054daf8fdd7227e2f82c9764dff1de9793a8 100644
--- a/__snapshots__/Searches/__snapshots__/Search.stories.storyshot
+++ b/__snapshots__/Searches/__snapshots__/Search.stories.storyshot
@@ -35,7 +35,7 @@ exports[`Storyshots Search Default 1`] = `
</style>
<form
action="#"
- class="example"
+ className="example"
>
<input
name="search"
diff --git a/__snapshots__/Ulasan/__snapshots__/Beras.stories.storyshot b/__snapshots__/Ulasan/__snapshots__/Beras.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..d6916ba8b516b5a292278ab9e4fe21da9d68eafe
--- /dev/null
+++ b/__snapshots__/Ulasan/__snapshots__/Beras.stories.storyshot
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Ulasan/Beras Antar 1`] = `
+.c0 {
+ background: white;
+ font-family: Muli,sans-serif;
+ border-radius: 10px;
+ padding: 20px 50px;
+}
+
+.c0 .highlight {
+ background-color: #F2EDE7;
+ padding: 15px;
+}
+
+.c0 .num {
+ font-weight: bold;
+ color: #00239D;
+ font-size: x-large;
+}
+
+.c0 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c0 .unggah-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.c0 .unggah-container > b {
+ margin: 30px 30px 30px 0px;
+}
+
+.c0 .info {
+ color: red;
+}
+
+.c0 .title {
+ font-weight: bold;
+ color: #00239D;
+}
+
+.c0 .content {
+ margin: 25px;
+}
+
+<div
+ className="c0"
+>
+ <p>
+ <b>
+ 2.5
+ kilogram Beras
+ </b>
+ </p>
+ <p>
+ <b>
+ Pengiriman Beras
+ </b>
+
+ <br />
+ Diantar ke
+ Masjid Al-Jabbar
+
+ <br />
+ <span
+ className="info"
+ >
+ *jam Operasional
+ Selasa-Sabtu 08.00-16.00
+ </span>
+ </p>
+</div>
+`;
+
+exports[`Storyshots Ulasan/Beras Jemput 1`] = `
+.c0 {
+ background: white;
+ font-family: Muli,sans-serif;
+ border-radius: 10px;
+ padding: 20px 50px;
+}
+
+.c0 .highlight {
+ background-color: #F2EDE7;
+ padding: 15px;
+}
+
+.c0 .num {
+ font-weight: bold;
+ color: #00239D;
+ font-size: x-large;
+}
+
+.c0 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c0 .unggah-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.c0 .unggah-container > b {
+ margin: 30px 30px 30px 0px;
+}
+
+.c0 .info {
+ color: red;
+}
+
+.c0 .title {
+ font-weight: bold;
+ color: #00239D;
+}
+
+.c0 .content {
+ margin: 25px;
+}
+
+<div
+ className="c0"
+>
+ <p>
+ <b>
+ 2.5
+ kilogram Beras
+ </b>
+ </p>
+ <p>
+ <b>
+ Pengiriman Beras
+ </b>
+
+ <br />
+ Dijemput di
+ Jalan Taman Mini Indonesia Indah
+
+ <br />
+ </p>
+</div>
+`;
diff --git a/__snapshots__/Ulasan/__snapshots__/TransferUang.stories.storyshot b/__snapshots__/Ulasan/__snapshots__/TransferUang.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..a84819a6f6cdfce64a87a096e708492c05290514
--- /dev/null
+++ b/__snapshots__/Ulasan/__snapshots__/TransferUang.stories.storyshot
@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Ulasan/TransferUang Default 1`] = `
+.c1 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c1 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c1 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c1 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c1 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c1 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+.c0 {
+ background: white;
+ font-family: Muli,sans-serif;
+ border-radius: 10px;
+ padding: 20px 50px;
+}
+
+.c0 .highlight {
+ background-color: #F2EDE7;
+ padding: 15px;
+}
+
+.c0 .num {
+ font-weight: bold;
+ color: #00239D;
+ font-size: x-large;
+}
+
+.c0 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c0 .unggah-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.c0 .unggah-container > b {
+ margin: 30px 30px 30px 0px;
+}
+
+.c0 .info {
+ color: red;
+}
+
+.c0 .title {
+ font-weight: bold;
+ color: #00239D;
+}
+
+.c0 .content {
+ margin: 25px;
+}
+
+<div
+ className="c0"
+>
+ <p>
+ <b>
+ Pengiriman Uang
+ </b>
+ <br />
+ Transfer
+ </p>
+ <p>
+ Silakan transfer ke
+ Masjid Al-Jabbar
+ </p>
+ <p>
+ Muamalat
+
+ <br />
+
+ Masjid Al-Jabbar
+ </p>
+ <div
+ className="highlight"
+ >
+ <b>
+ Nomor Rekening
+ </b>
+ <div
+ className="flex-container"
+ >
+ <div
+ className="num"
+ id="accNum"
+ >
+ 999991223458273
+ </div>
+ <div>
+ <div>
+ <div
+ className="c1"
+ >
+ <button
+ className="tertiary"
+ onClick={[Function]}
+ >
+ salin
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <br />
+ <div
+ className="highlight"
+ >
+ <b>
+ Nominal
+ </b>
+ <div
+ className="flex-container"
+ >
+ <div
+ className="num"
+ >
+ <div>
+ Rp
+ 650.000,00
+ </div>
+ </div>
+ <div>
+ <div>
+ <div
+ className="c1"
+ >
+ <button
+ className="tertiary"
+ onClick={[Function]}
+ >
+ salin
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ className="unggah-container"
+ >
+
+ <b>
+ Bukti Transfer
+ </b>
+
+ <div
+ className="c1"
+ >
+ <button
+ className="primary"
+ >
+ unggah
+ </button>
+ </div>
+ </div>
+</div>
+`;
diff --git a/__snapshots__/Ulasan/__snapshots__/UangTunai.stories.storyshot b/__snapshots__/Ulasan/__snapshots__/UangTunai.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..87b4a2cf6fe97159b89b70c0dd5c9d749fe1d6ad
--- /dev/null
+++ b/__snapshots__/Ulasan/__snapshots__/UangTunai.stories.storyshot
@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Ulasan/UangTunai Default 1`] = `
+.c0 {
+ background: white;
+ font-family: Muli,sans-serif;
+ border-radius: 10px;
+ padding: 20px 50px;
+}
+
+.c0 .highlight {
+ background-color: #F2EDE7;
+ padding: 15px;
+}
+
+.c0 .num {
+ font-weight: bold;
+ color: #00239D;
+ font-size: x-large;
+}
+
+.c0 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c0 .unggah-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.c0 .unggah-container > b {
+ margin: 30px 30px 30px 0px;
+}
+
+.c0 .info {
+ color: red;
+}
+
+.c0 .title {
+ font-weight: bold;
+ color: #00239D;
+}
+
+.c0 .content {
+ margin: 25px;
+}
+
+<div
+ className="c0"
+>
+ <p>
+ <b>
+ <div>
+ Rp
+ 650.000,00
+ </div>
+ </b>
+ </p>
+ <p>
+ <b>
+ Pengiriman
+ </b>
+
+ <br />
+ Tunai di
+ Masjid Al-Jabbar
+
+ <br />
+ <span
+ className="info"
+ >
+ *jam Operasional
+ Selasa-Sabtu 08.00-16.00
+ </span>
+ </p>
+</div>
+`;
diff --git a/__snapshots__/Ulasan/__snapshots__/Ulasan.stories.storyshot b/__snapshots__/Ulasan/__snapshots__/Ulasan.stories.storyshot
new file mode 100644
index 0000000000000000000000000000000000000000..1cb6b7710b725c670fbb0ae2a122712400bd0e77
--- /dev/null
+++ b/__snapshots__/Ulasan/__snapshots__/Ulasan.stories.storyshot
@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Ulasan/Ulasan Default 1`] = `
+.c2 button {
+ font-family: Muli;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ display: inline-block;
+ padding: 5px 10px;
+ color: white;
+}
+
+.c2 .primary {
+ background: #00239D;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+}
+
+.c2 .secondary {
+ border-radius: 4px;
+ background: #C2C2C2;
+ border: 1px solid #C2C2C2;
+}
+
+.c2 .tertiary {
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #00239D;
+ color: #00239D;
+}
+
+.c2 .danger {
+ background: #EB4E2C;
+ border-radius: 4px;
+ border: 1px solid #EB4E2C;
+}
+
+.c2 .round {
+ background: #00239D;
+ border-radius: 50%;
+ border: 1px solid #00239D;
+ font-size: 20px;
+}
+
+.c1 {
+ background: white;
+ font-family: Muli,sans-serif;
+ border-radius: 10px;
+ padding: 20px 50px;
+}
+
+.c1 .highlight {
+ background-color: #F2EDE7;
+ padding: 15px;
+}
+
+.c1 .num {
+ font-weight: bold;
+ color: #00239D;
+ font-size: x-large;
+}
+
+.c1 .flex-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -webkit-justify-content: space-between;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+
+.c1 .unggah-container {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: baseline;
+ -webkit-box-align: baseline;
+ -ms-flex-align: baseline;
+ align-items: baseline;
+}
+
+.c1 .unggah-container > b {
+ margin: 30px 30px 30px 0px;
+}
+
+.c1 .info {
+ color: red;
+}
+
+.c1 .title {
+ font-weight: bold;
+ color: #00239D;
+}
+
+.c1 .content {
+ margin: 25px;
+}
+
+.c0 {
+ border-radius: 10px;
+ background: white;
+ padding: 20px 50px;
+ font-weight: bold;
+}
+
+<div>
+ <div
+ className="c0"
+ >
+ ID TRANSAKSI : #
+ </div>
+ <br />
+ <div
+ className="c1"
+ >
+ <div
+ className="title"
+ >
+ Ringkasan Transaksi
+ </div>
+ <div
+ className="content"
+ >
+ <div
+ className="money"
+ >
+ <div
+ className="title"
+ >
+ Transaksi Uang
+ </div>
+ <div
+ className="c1"
+ >
+ <p>
+ <b>
+ Pengiriman Uang
+ </b>
+ <br />
+ Transfer
+ </p>
+ <p>
+ Silakan transfer ke
+ Masjid Al-Jabbar
+ </p>
+ <p>
+ Muamalat
+
+ <br />
+
+ Masjid Al-Jabbar
+ </p>
+ <div
+ className="highlight"
+ >
+ <b>
+ Nomor Rekening
+ </b>
+ <div
+ className="flex-container"
+ >
+ <div
+ className="num"
+ id="accNum"
+ >
+ 999991223458273
+ </div>
+ <div>
+ <div>
+ <div
+ className="c2"
+ >
+ <button
+ className="tertiary"
+ onClick={[Function]}
+ >
+ salin
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <br />
+ <div
+ className="highlight"
+ >
+ <b>
+ Nominal
+ </b>
+ <div
+ className="flex-container"
+ >
+ <div
+ className="num"
+ >
+ <div>
+ Rp
+ 650.000,00
+ </div>
+ </div>
+ <div>
+ <div>
+ <div
+ className="c2"
+ >
+ <button
+ className="tertiary"
+ onClick={[Function]}
+ >
+ salin
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ className="unggah-container"
+ >
+
+ <b>
+ Bukti Transfer
+ </b>
+
+ <div
+ className="c2"
+ >
+ <button
+ className="primary"
+ >
+ unggah
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ className="rice"
+ >
+ <div
+ className="title"
+ >
+ Transaksi Beras
+ </div>
+ </div>
+ </div>
+ <div
+ className="c2"
+ >
+ <button
+ className="primary"
+ onClick={[Function]}
+ >
+ LANJUTKAN KE KWITANSI >>
+ </button>
+ </div>
+
+ <br />
+ </div>
+</div>
+`;
diff --git a/package.json b/package.json
index 821feb7ca281fb704a8b5580255cfa8719594189..883a0adddf98234df98962a90341be5ee893e68c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"@apollo/client": "^3.2.4",
"@babel/preset-env": "^7.10.4",
"graphql": "^15.3.0",
+ "jest-styled-components": "^7.0.3",
"next": "9.4.4",
"react": "16.13.1",
"react-copy-to-clipboard": "^5.0.2",
diff --git a/yarn.lock b/yarn.lock
index 72e311c4381056b60a65b812fdeeca4538eb1f5c..210097960de0da24c939aca6b775ae4397fdd61a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7639,10 +7639,10 @@ jest-specific-snapshot@^2.0.0:
dependencies:
jest-snapshot "^24.1.0"
-jest-styled-components@^7.0.2:
- version "7.0.2"
- resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.2.tgz#b7711871ea74a04491b12bad123fa35cc65a2a80"
- integrity sha512-i1Qke8Jfgx0Why31q74ohVj9S2FmMLUE8bNRSoK4DgiurKkXG6HC4NPhcOLAz6VpVd9wXkPn81hOt4aAQedqsA==
+jest-styled-components@^7.0.3:
+ version "7.0.3"
+ resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-7.0.3.tgz#cc0b031f910484e68f175568682f3969ff774b2c"
+ integrity sha512-jj9sWyshehUnB0P9WFUaq9Bkh6RKYO8aD8lf3gUrXRwg/MRddTFk7U9D9pC4IAI3v9fbz4vmrMxwaecTpG8NKA==
dependencies:
css "^2.2.4"