@digi-frontend/dgate-api-documentation 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",
@@ -16,7 +16,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "digitinary-ui": "^1.0.166",
+    "digitinary-ui": "1.0.166",
     "formik": "^2.4.6",
     "html-react-parser": "^5.2.2",
     "js-yaml": "^4.1.0",

package/src/components/MethodAccordion/MethodAccordion.module.scss

@@ -3,17 +3,19 @@
   box-shadow: none !important;
   margin-bottom: 0 !important;
 
-  :global(.summary) {
+  :global(.accordion-header) {
     padding: 0 !important;
     margin: 1.25rem 1.875rem 0 1.875rem !important;
     height: 2.625rem;
+    border: none !important;
+    background-color: transparent !important;
   }
 
   :global(.iconContainer .dropdownIcon) {
     display: none !important;
   }
 
-  :global(.details.show) {
+  :global(.accordion-details.expanded) {
     border: none !important;
     padding: 0 !important;
   }
@@ -26,11 +28,13 @@
 
     .methodSummary {
       display: flex;
+      align-items: center;
       gap: 0.3125rem;
       background-color: #f8f9fb;
       width: 100%;
       padding: 0.3125rem;
       border-radius: 0.3125rem;
+      font-size: 0.875rem;
 
       .methodLabel {
         display: grid;
@@ -41,6 +45,11 @@
         border-radius: 0.1875rem;
         text-transform: capitalize;
       }
+
+      .methodPath {
+        display: block;
+        line-height: 1.25rem !important;
+      }
     }
 
     .methodExpandArrowContainer {
@@ -62,6 +71,16 @@
         transition: rotate 0.3s ease-in-out;
       }
     }
+
+    &.readOnly {
+      .methodSummary {
+        background-color: #ebecf2;
+      }
+
+      .methodExpandArrowContainer {
+        background-color: #ebecf2;
+      }
+    }
   }
 
   .methodAccordionContent {
@@ -70,16 +89,6 @@
     gap: 1.25rem;
     padding-inline: 1.875rem;
 
-    .divTest {
-      background-color: red;
-      height: 40px;
-      width: 15px;
-    }
-
-    .divTest:focus {
-      background-color: black;
-    }
-
     .methodDesc {
       margin-top: 1.25rem;
     }
@@ -171,19 +180,24 @@
 
     .requestAccordion,
     .responseAccordion {
-      border-top: 1px solid #babdcc;
+      border: 1px solid #babdcc;
       border-radius: 0.3125rem !important;
       box-shadow: none !important;
       margin-bottom: 0 !important;
       cursor: default !important;
 
-      :global(.summary) {
+      :global(.accordion-header) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         margin: 0 !important;
-        padding: 1rem !important;
-        height: auto !important;
+        padding: 0 !important;
+        height: 4.0625rem !important;
+        border-radius: 0.3125rem !important;
+        background-color: white !important;
       }
 
-      :global(.details.show) {
+      :global(.accordion-details.expanded) {
         border-top: 1px solid #babdcc !important;
         padding: 1.25rem !important;
         padding: 0 !important;
@@ -199,23 +213,27 @@
         }
       }
 
-      :global(.details.show .textArea .containerTextArea) {
+      :global(.accordion-details.expanded .textArea .containerTextArea) {
         display: flex;
       }
 
-      :global(.details.show .textArea .containerTextArea .inputField) {
+      :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
         height: 100%;
         padding: 1.25rem;
       }
 
       .requestAccordionSummary,
       .responseAccordionSummary {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
         font-weight: 700;
         font-size: 1.125rem;
         line-height: 1.5rem;
         display: flex;
         align-items: center;
         cursor: default !important;
+        margin-inline: 0.625rem 1.25rem;
       }
 
       .responseAccordionSummary_title,
@@ -233,18 +251,18 @@
         }
       }
 
-      :global(.details) {
+      :global(.accordion-details) {
         :global(.textArea .inputField) {
           padding: 0;
           border: none;
         }
       }
 
-      :global(.summary .iconContainer .dropdownIcon) {
+      :global(.accordion-header .iconContainer .dropdownIcon) {
         display: none !important;
       }
 
-      :global(.summary) {
+      :global(.accordion-header) {
         cursor: default;
       }
     }
@@ -272,7 +290,7 @@
         }
       }
 
-      :global(.summary) {
+      :global(.accordion-header) {
         overflow: visible;
         cursor: default;
       }

package/src/components/MethodAccordion/MethodAccordion.tsx

@@ -54,7 +54,7 @@ const MethodsAccordion = ({
   const [selectedParamIndex, setSelectedParamIndex] = useState<number | null>(null)
   const [selectedParamName, setSelectedParamName] = useState<string | null>(null)
   const [tableRecords, setTableRecords] = useState()
-  
+
   const [selectedStatusCode, setSelectedStatusCode] = useState(httpStatusCodeOptions[4])
   const currentResponse =
     method.responses.find((res) => Number(res.code) === selectedStatusCode.value) || '{}'
@@ -220,7 +220,7 @@ const MethodsAccordion = ({
         onChange={() => setIsExpanded((prev) => ({ ...prev, method: !prev.method }))}
         className={styles.methodAccordion}
         summary={
-          <div className={styles.methodSummaryContainer}>
+          <div className={`${styles.methodSummaryContainer} ${readOnly ? styles.readOnly : ''}`}>
             <div className={styles.methodSummary}>
               <span
                 style={{
@@ -339,6 +339,7 @@ const MethodsAccordion = ({
                   <SelectGroup
                     withSearch={false}
                     isMultiple={false}
+                    clearable={false}
                     placeholder="200"
                     options={[
                       {