✨ Add transparent modal for opening custom components

Author: Frontendland

src/components/Button/button.ts

@@ -28,5 +28,5 @@ export type SvelteButtonProps = {
 
 export type ReactButtonProps = {
     onClick?: React.MouseEventHandler<HTMLButtonElement>
-    children: React.ReactNode
+    children?: React.ReactNode
 } & ButtonProps

src/components/Modal/Modal.astro

@@ -26,6 +26,7 @@ const {
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    transparent,
     theme,
     id,
     className,
@@ -40,6 +41,7 @@ const close = [
 
 const classes = [
     styles.modal,
+    transparent && styles.transparent,
     theme && styles[theme],
     className
 ]

src/components/Modal/Modal.svelte

@@ -18,6 +18,7 @@
     export let showCloseIcon: ModalProps['showCloseIcon'] = true
     export let closeOnEsc: ModalProps['closeOnEsc'] = true
     export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
+    export let transparent: ModalProps['transparent'] = false
     export let theme: ModalProps['theme'] = null
     export let id : ModalProps['className'] = ''
     export let className: ModalProps['className'] = ''
@@ -31,6 +32,7 @@
 
     const classes = classNames([
         styles.modal,
+        transparent && styles.transparent,
         theme && styles[theme],
         className
     ])

src/components/Modal/Modal.tsx

@@ -26,6 +26,7 @@ const Modal = ({
     showCloseIcon = true,
     closeOnEsc = true,
     closeOnOverlay = true,
+    transparent,
     theme,
     id,
     className,
@@ -35,6 +36,7 @@ const Modal = ({
     const classes = classNames([
         styles.modal,
         theme && styles[theme],
+        transparent && styles.transparent,
         className
     ])
 

src/components/Modal/modal.module.scss

@@ -28,28 +28,11 @@
         }
     }
 
-    .close {
-        @include position(absolute, t10px, r10px);
-        @include spacing(p-xs);
-
-        svg {
-            @include size(10px);
-        }
-    }
-
-    .title {
-        @include typography(lg);
-        @include spacing(mb-xs);
-        @include layout(flex, v-center, xs);
-
-        svg {
-            @include size(20px);
-        }
-    }
-
-    .subTitle {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
+    &.transparent {
+        @include border(0);
+        @include spacing(p0);
+        @include size('wfit-content');
+        @include background(transparent);
     }
 
     &.info {
@@ -83,6 +66,30 @@
             @include typography(alert);
         }
     }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
 }
 
 .overlay {

src/components/Modal/modal.ts

@@ -4,6 +4,7 @@ export type ModalProps = {
     showCloseIcon?: boolean
     closeOnEsc?: boolean
     closeOnOverlay?: boolean
+    transparent?: boolean
     id?: string
     className?: string
     theme?: 'info'

src/icons/components.svg

@@ -6,6 +6,7 @@ import Button from '@components/Button/Button.astro'
 import AstroModal from '@components/Modal/Modal.astro'
 import SvelteModal from '@components/Modal/Modal.svelte'
 import ReactModal from '@components/Modal/Modal.tsx'
+import Spinner from '@components/Spinner/Spinner.astro'
 
 import { getSections } from '@helpers'
 
@@ -215,6 +216,22 @@ const sections = getSections({
                     This modal was created using the alert theme
                 </section.component>
             </ComponentWrapper>
+
+            <ComponentWrapper title="Loading modal">
+                <Button theme="secondary" id={`modal-btn-10${index}`}>
+                    Trigger
+                </Button>
+                <section.component
+                    id={`modal-10${index}`}
+                    showCloseIcon={false}
+                    transparent={true}
+                >
+                    <Spinner
+                        size={40}
+                        width={5}
+                    />
+                </section.component>
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>
@@ -230,7 +247,7 @@ const sections = getSections({
         'react'
     ]
 
-    const ids = Array(9).fill(10).map((x, index) => x * (index + 1))
+    const ids = Array(10).fill(10).map((x, index) => x * (index + 1))
     const variants = [
         '00',
         '01',