feat: merge basic and size section into one

Author: bishalshrestha013

apps/demo/src/Views/Ui/components/ModalDemo.tsx

@@ -65,7 +65,6 @@ export const ModalDemo = () => {
     },
   ];
 
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [headerFooterModal, setHeaderFooterModal] = useState<boolean>(false);
   const [isMediumModalOpen, setIsMediumModalOpen] = useState<boolean>(false);
   const [isLargeModalOpen, setIsLargeModalOpen] = useState<boolean>(false);
@@ -95,79 +94,6 @@ export const ModalDemo = () => {
 
       <Section title={t("modal.usage.basic")}>
         <div className="container">
-          <Button
-            label="Open modal"
-            onClick={() => setIsModalOpen(true)}
-          ></Button>
-        </div>
-        <Modal
-          header="Header"
-          onHide={() => setIsModalOpen(false)}
-          visible={isModalOpen}
-        >
-          <p style={{ lineHeight: 1.6 }}>{content}</p>
-        </Modal>
-        <CodeBlock
-          exampleCode='const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-
-<Button label="Open modal" onClick={() => setIsModalOpen(true)}></Button>
-  <Modal
-    header="Header"
-    onHide={() => setIsModalOpen(false)}
-    visible={isModalOpen}
-  >
-    <p style={{ lineHeight: 1.6 }}>{content}</p>
-  </Modal>'
-        />
-      </Section>
-      <Section title={t("modal.usage.headerAndFooter")}>
-        <div className="container">
-          <Button
-            label="Open modal"
-            onClick={() => setHeaderFooterModal(true)}
-          ></Button>
-        </div>
-        <Modal
-          header={<Header />}
-          onHide={() => setHeaderFooterModal(false)}
-          visible={headerFooterModal}
-          footer={
-            <div>
-              <Button label="Click me" />
-            </div>
-          }
-        >
-          <p style={{ lineHeight: 1.6 }}>{content}</p>
-        </Modal>
-        <CodeBlock
-          exampleCode='const Header = () => {
-  return <h2>Header functional component</h2>;
-};
-
-const [headerFooterModal, setHeaderFooterModal] = useState<boolean>(false);
-
-<Button label="Open modal" onClick={() => setHeaderFooterModal(true)}></Button>
-<Modal
-  header={<Header />}
-  onHide={() => setHeaderFooterModal(false)}
-  visible={headerFooterModal}
-  footer={
-    <div>
-      <Button label="Click me" />
-    </div>
-  }
->
-  <p style={{ lineHeight: 1.6 }}>{content}</p>
-</Modal>'
-        />
-      </Section>
-
-      <Section title={t("modal.usage.size")}>
-        <div className="container">
-          <Button
-            label="Auto"
-            onClick={() => setIsAutoModalOpen(true)}
-          ></Button>
           <Button
             label="Medium"
             onClick={() => setIsMediumModalOpen(true)}
@@ -176,6 +102,10 @@ const [headerFooterModal, setHeaderFooterModal] = useState<boolean>(false);
             label="Large"
             onClick={() => setIsLargeModalOpen(true)}
           ></Button>
+          <Button
+            label="Auto"
+            onClick={() => setIsAutoModalOpen(true)}
+          ></Button>
         </div>
         <Modal
           header="Header"
@@ -237,6 +167,49 @@ const [isLargeModalOpen, setIsLargeModalOpen] = useState<boolean>(false);
 </Modal>'
         />
       </Section>
+
+      <Section title={t("modal.usage.headerAndFooter")}>
+        <div className="container">
+          <Button
+            label="Open modal"
+            onClick={() => setHeaderFooterModal(true)}
+          ></Button>
+        </div>
+        <Modal
+          header={<Header />}
+          onHide={() => setHeaderFooterModal(false)}
+          visible={headerFooterModal}
+          footer={
+            <div>
+              <Button label="Click me" />
+            </div>
+          }
+        >
+          <p style={{ lineHeight: 1.6 }}>{content}</p>
+        </Modal>
+        <CodeBlock
+          exampleCode='const Header = () => {
+  return <h2>Header functional component</h2>;
+};
+
+const [headerFooterModal, setHeaderFooterModal] = useState<boolean>(false);
+
+<Button label="Open modal" onClick={() => setHeaderFooterModal(true)}></Button>
+<Modal
+  header={<Header />}
+  onHide={() => setHeaderFooterModal(false)}
+  visible={headerFooterModal}
+  footer={
+    <div>
+      <Button label="Click me" />
+    </div>
+  }
+>
+  <p style={{ lineHeight: 1.6 }}>{content}</p>
+</Modal>'
+        />
+      </Section>
+
       <Section
         title={t("headers.propertiesValue", {
           value: "ModalProperties",

apps/demo/src/locales/en/ui.json

@@ -262,8 +262,7 @@
     "subtitle": "A modal dialog component for displaying content in an overlay with support for custom headers, footers, and dismissal logic.",
     "usage": {
       "basic": "Basic",
-      "headerAndFooter": "Header and footer",
-      "size": "Size"
+      "headerAndFooter": "Header and footer"
     }
   },
   "tooltip": {

apps/demo/src/locales/fr/ui.json

@@ -262,8 +262,7 @@
     "subtitle": "A modal dialog component for displaying content in an overlay with support for custom headers, footers, and dismissal logic. (fr)",
     "usage": {
       "basic": "Basic (fr)",
-      "headerAndFooter": "Header and footer (fr)",
-      "size":"Size (fr)"
+      "headerAndFooter": "Header and footer (fr)"
     }
   },
   "tooltip": {

packages/ui/src/assets/css/modal.css

@@ -25,7 +25,7 @@
 }
 
 .dz-modal .dz-modal-header {
-  align-items: start;
+  align-items: flex-start;
   display: flex;
   justify-content: space-between;
   padding: 0.7rem;