From a4155bbf82b34280ebfd158097975e2a9a482307 Mon Sep 17 00:00:00 2001
From: [Alisina92] <asb92.jobs@gmail.com>
Date: Apr 02 2021 23:15:01 +0000
Subject: [PATCH 1/2] Enhanced the collapsed now the buttons of colapsed would showMoreOrLess


---

diff --git a/src/wizard/components.js b/src/wizard/components.js
index d17540b..96772b0 100644
--- a/src/wizard/components.js
+++ b/src/wizard/components.js
@@ -1,59 +1,68 @@
-import React, { Component } from "react"
-import { Card, CardHeader, CardBody, UncontrolledCollapse, Row } from "reactstrap"
-import _ from "lodash"
+import React, { useState } from "react";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Row,
+  UncontrolledCollapse,
+  Collapse,
+} from "reactstrap";
+import _ from "lodash";
 
-class CollapsableCard extends Component {
-  render() {
-    const { title, expand_text, expand_class, children } = this.props
-    const id = _.uniqueId("collapsable-card-id-")
-    return (
-      <Card>
-        <CardHeader>
-          <Row>
-            <div className="col-md-11">{title}</div>
-            <div className="col-md-1">
-              <Toggler id={id} color={expand_class} text={expand_text} />
-            </div>
-          </Row>
-        </CardHeader>
-        <UncontrolledCollapse toggler={"#" + id}>
-          <CardBody>{children}</CardBody>
-        </UncontrolledCollapse>
-      </Card>
-    )
-  }
-}
+const CollapsableCard = ({ title, children, color }) => {
+  const id = _.uniqueId("collapsable-card-id-");
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const toggleHandler = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  const classes = "btn btn-sm float-right btn-" + color;
+  return (
+    <Card>
+      <CardHeader>
+        <Row>
+          <div className="col-md-11">{title}</div>
+        </Row>
+      </CardHeader>
+      <Collapse isOpen={isCollapsed}>
+        <CardBody>{children}</CardBody>
+      </Collapse>
+      <button
+        onClick={() => toggleHandler()}
+        className={classes}
+        style={{
+          color: "#fff",
+          "background-color": "#3c6eb4",
+          "border-color": "#3c6eb4",
+        }}
+        href="#"
+        id={id}
+      >
+        {isCollapsed ? "show Less" : "show More!"}
+      </button>
+    </Card>
+  );
+};
 
-class CollapsableBadge extends Component {
-  render() {
-    const { expand_text, expand_class, children, type } = this.props
-    const id = _.uniqueId("collapsable-badge-id-")
-    return (
-      <span>
-        <a class={type + " " + type + "-" + expand_class} href="#" id={id} role="button">
-          {expand_text}
-        </a>
-        <UncontrolledCollapse toggler={"#" + id}>{children}</UncontrolledCollapse>
-      </span>
-    )
-  }
-}
+const CollapsableBadge = ({ expand_text, expand_class, children, type }) => {
+  const id = _.uniqueId("collapsable-badge-id-");
+  return (
+    <span>
+      <a
+        class={type + " " + type + "-" + expand_class}
+        href="#"
+        id={id}
+        role="button"
+      >
+        {expand_text}
+      </a>
+      <UncontrolledCollapse toggler={"#" + id}>{children}</UncontrolledCollapse>
+    </span>
+  );
+};
 
 CollapsableBadge.defaultProps = {
   type: "badge",
   expand_class: "primary",
-}
-
-class Toggler extends Component {
-  render() {
-    const { id, text, color } = this.props
-    const classes = "btn btn-sm float-right btn-" + color
-    return (
-      <button className={classes} href="#" id={id}>
-        {text}
-      </button>
-    )
-  }
-}
+};
 
-export { CollapsableCard, CollapsableBadge }
+export { CollapsableCard, CollapsableBadge };

From d8b17cac07c4669badccd885086a3a796c90c87e Mon Sep 17 00:00:00 2001
From: [Alisina92] <asb92.jobs@gmail.com>
Date: Apr 03 2021 14:07:30 +0000
Subject: [PATCH 2/2] I have fixed the CSS standardazied format


---

diff --git a/src/wizard/components.js b/src/wizard/components.js
index 96772b0..4872711 100644
--- a/src/wizard/components.js
+++ b/src/wizard/components.js
@@ -31,8 +31,8 @@ const CollapsableCard = ({ title, children, color }) => {
         className={classes}
         style={{
           color: "#fff",
-          "background-color": "#3c6eb4",
-          "border-color": "#3c6eb4",
+          backgroundColor: "#3c6eb4",
+          borderColor: "#3c6eb4",
         }}
         href="#"
         id={id}