✨ Add Sheet component

Author: Frontendland

README.md

@@ -210,6 +210,7 @@ import { Accordion } from 'webcoreui/react'
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
 - [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)

src/components/Sheet/Sheet.astro

@@ -0,0 +1,29 @@
+---
+import type { SheetProps } from './sheet'
+
+import Modal from '../Modal/Modal.astro'
+
+import styles from './sheet.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends SheetProps {}
+
+const {
+    position,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = classNames([
+    styles.sheet,
+    position && styles[position],
+    className
+])
+---
+
+<Modal
+    className={classes}
+    {...rest}
+>
+    <slot />
+</Modal>

src/components/Sheet/Sheet.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { SheetProps } from './sheet'
+
+    import Modal from '../Modal/Modal.svelte'
+
+    import styles from './sheet.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let position: SheetProps['position'] = null
+    export let className: SheetProps['className'] = ''
+
+    const classes = classNames([
+        styles.sheet,
+        position && styles[position],
+        className
+    ])
+</script>
+
+<Modal
+    className={classes}
+    {...$$restProps}
+>
+    <slot />
+</Modal>

src/components/Sheet/Sheet.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { ReactSheetProps } from './sheet'
+
+import Modal from '../Modal/Modal.tsx'
+
+import styles from './sheet.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Sheet = ({
+    position,
+    className,
+    children,
+    ...rest
+}: ReactSheetProps) => {
+    const classes = classNames([
+        styles.sheet,
+        position && styles[position],
+        className
+    ])
+
+    return (
+        <Modal
+            className={classes}
+            {...rest}
+        >
+            {children}
+        </Modal>
+
+    )
+}
+
+export default Sheet

src/components/Sheet/sheet.module.scss

@@ -0,0 +1,68 @@
+@import '../../scss/config.scss';
+
+.sheet {
+    @include position(t0, 'r-100%', lauto);
+    @include visibility(1);
+    @include border-radius(none);
+    @include size(100%);
+    @include border(0);
+    @include border(left, primary-50);
+
+    transform: none;
+
+    &[data-show="true"] {
+        @include position(r0);
+
+        transform: none;
+    }
+
+    &.left {
+        @include position('l-100%', rauto);
+        @include border(0);
+        @include border(right, primary-50);
+
+        &[data-show="true"] {
+            @include position(l0);
+        }
+    }
+
+    &.top {
+        @include position(t0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(bottom, primary-50);
+
+        transform: translateY(-100%);
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom {
+        @include position(b0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(top, primary-50);
+
+        transform: translateY(100%);
+        top: auto;
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+}
+
+@include media(xs) {
+    .sheet {
+        @include position(r-500px);
+        @include size(w500px);
+
+        &.left {
+            @include position(l-500px);
+        }
+    }
+}

src/components/Sheet/sheet.ts

@@ -0,0 +1,10 @@
+import type { ModalProps, ReactModalProps } from '../Modal/modal'
+
+export type SheetProps = {
+    position?: 'left'
+        | 'top'
+        | 'bottom'
+        | null
+} & ModalProps
+
+export type ReactSheetProps = SheetProps & ReactModalProps

src/pages/index.astro

@@ -161,6 +161,9 @@ const tabItems = [{
         <CardWrapper title="Rating" href="/rating">
             <Rating score={4} />
         </CardWrapper>
+        <CardWrapper title="Sheet" href="/sheet">
+            <Button theme="outline">Open Sheet</Button>
+        </CardWrapper>
         <CardWrapper title="Slider" href="/slider">
             <Slider min={0} max={100} value={50} />
         </CardWrapper>