webcoreui 0.0.12 → 0.2.0

package/components/Menu/menu.module.scss

@@ -1,144 +1,144 @@
-@import '../../scss/config.scss';
-
-.menu {
-    background: var(--w-color-primary-70);
-    padding: 15px;
-    font-size: 16px;
-    border-bottom: 1px solid var(--w-color-primary-50);
-    position: sticky;
-    top: 0;
-    z-index: 99;
-
-    &[data-active="true"] {
-        .hamburger {
-            box-shadow: 0 0 0 1000px var(--w-color-primary-70);
-
-            .meat:first-child,
-            .meat:last-child {
-                opacity: 0;
-            }
-
-            .meat:first-child {
-                transform: translateY(20px) scale(0);
-            }
-
-            .meat:last-child {
-                transform: translateY(-20px) scale(0);
-            }
-
-            .meat:nth-child(2) {
-                transform: rotate(45deg);
-            }
-
-            .meat:nth-child(3) {
-                transform: rotate(-45deg);
-            }
-        }
-
-        ul {
-            @include Transition(opacity);
-            opacity: 1;
-            z-index: 99;
-            pointer-events: all;
-        }
-    }
-
-    .wrapper {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-    }
-
-    img,
-    svg {
-        display: block;
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        display: flex;
-        gap: 20px;
-        position: fixed;
-        top: 20px;
-        left: 20px;
-        flex-direction: column;
-        opacity: 0;
-        pointer-events: none;
-
-        a {
-            @include Transition(color);
-            color: var(--w-color-primary-20);
-    
-            &:hover {
-                color: var(--w-color-primary);
-            }
-        }
-    }
-
-    .hamburger {
-        @include Transition(box-shadow);
-        position: relative;
-        width: 30px;
-        height: 20px;
-        box-shadow: 0 0 0 0 var(--w-color-primary-70);
-        border-radius: 50%;
-        padding: 0;
-        border: 0;
-        background: transparent;
-        z-index: 98;
-        cursor: pointer;
-
-        .meat {
-            @include Transition();
-            width: 100%;
-            position: absolute;
-            height: 2px;
-            background: var(--w-color-primary);
-            display: block;
-            border-radius: 5px;
-
-            &:first-child {
-                top: 0;
-            }
-
-            &:nth-child(2),
-            &:nth-child(3) {
-                top: 50%;
-                transform: translateY(-50%);
-            }
-
-            &:last-child {
-                bottom: 0;
-            }
-        }
-    }
-}
-
-.container {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-@include Media('sm') {
-    .menu {
-        .hamburger {
-            display: none;
-        }
-
-        ul {
-            position: static;
-            opacity: 1;
-            flex-direction: row;
-            pointer-events: all;
-            transform: none;
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.menu {
+    @include background(primary-70);
+    @include spacing(p-md);
+    @include border(bottom, primary-50);
+    @include position(sticky, t0);
+    @include layer(header);
+
+    &[data-active="true"] {
+        .hamburger {
+            box-shadow: 0 0 0 1000px var(--w-color-primary-70);
+
+            .meat:first-child,
+            .meat:last-child {
+                @include visibility(0);
+            }
+
+            .meat:first-child {
+                transform: translateY(20px) scale(0);
+            }
+
+            .meat:last-child {
+                transform: translateY(-20px) scale(0);
+            }
+
+            .meat:nth-child(2) {
+                transform: rotate(45deg);
+            }
+
+            .meat:nth-child(3) {
+                transform: rotate(-45deg);
+            }
+        }
+
+        ul {
+            @include transition(opacity);
+            @include visibility(1);
+            @include layer(header);
+            pointer-events: all;
+        }
+    }
+
+    .wrapper {
+        @include layout(flex, v-center, default);
+    }
+
+    a {
+        @include typography(none);
+    }
+
+    img,
+    svg {
+        display: block;
+    }
+
+    ul {
+        @include spacing(0);
+        @include layout(flex, default, column);
+        @include position(fixed, t20px, l20px);
+        @include visibility(0);
+        @include typography(normal);
+
+        list-style-type: none;
+        pointer-events: none;
+
+        li {
+            @include spacing(m0);
+        }
+
+        a {
+            @include typography(primary-20);
+    
+            &:hover {
+                @include typography(primary);
+            }
+
+            &.active {
+                @include typography(primary);
+            }
+        }
+    }
+
+    .hamburger {
+        @include transition(box-shadow);
+        @include position(relative);
+        @include size(w30px, h20px);
+        @include border-radius(max);
+        @include spacing(p0);
+        @include border(0);
+        @include background(transparent);
+        @include layer(top);
+
+        box-shadow: 0 0 0 0 var(--w-color-primary-70);
+        cursor: pointer;
+
+        .meat {
+            @include transition();
+            @include size('w100%', h2px);
+            @include position(absolute);
+            @include background(primary);
+            @include border-radius(md);
+
+            display: block;
+
+            &:first-child {
+                @include position(t0);
+            }
+
+            &:nth-child(2),
+            &:nth-child(3) {
+                @include position(v-center);
+            }
+
+            &:last-child {
+                @include position(b0);
+            }
+        }
+    }
+}
+
+.container {
+    @include layout(flex, v-center, default, h-between, wrap);
+    @include spacing(auto-none, px-default);
+
+    max-width: 1200px;
+}
+
+@include media('sm') {
+    .menu {
+        .hamburger {
+            @include visibility(none);
+        }
+
+        ul {
+            @include position(static);
+            @include visibility(1);
+            @include layout(row);
+
+            pointer-events: all;
+            transform: none;
+        }
+    }
+}

package/components/Menu/menu.ts

@@ -3,6 +3,7 @@ export type MenuProps = {
         url: string
         name: string
         target?: string
+        active?: boolean
     }[]
     logo?: {
         url?: string

package/components/Modal/Modal.astro

@@ -0,0 +1,70 @@
+---
+import type { ModalProps } from './modal'
+
+import Button from '../Button/Button.astro'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
+import closeIcon from '../../icons/close.svg?raw'
+
+import styles from './modal.module.scss'
+
+interface Props extends ModalProps {}
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const {
+    title,
+    subTitle,
+    showCloseIcon = true,
+    closeOnEsc = true,
+    closeOnOverlay = true,
+    theme,
+    id,
+    className
+} = Astro.props
+
+const close = [
+    showCloseIcon && 'icon',
+    closeOnEsc && 'esc',
+    closeOnOverlay && 'overlay'
+].filter(Boolean).join(',')
+
+const classes = [
+    styles.modal,
+    theme && styles[theme],
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+    data-close={close.length ? close : undefined}
+>
+    {showCloseIcon && (
+        <Button
+            theme="flat"
+            className={styles.close}
+            data-id="close"
+        >
+            <Fragment set:html={closeIcon} />
+        </Button>
+    )}
+    {title && (
+        <strong class={styles.title}>
+            {theme && <Fragment set:html={iconMap[theme]} />}
+            {title}
+        </strong>
+    )}
+    {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
+    <slot />
+</dialog>
+<div class={styles.overlay} />

package/components/Modal/Modal.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import type { ModalProps } from './modal'
+
+    import styles from './modal.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    import Button from '../Button/Button.svelte'
+
+    import info from '../../icons/info.svg?raw'
+    import success from '../../icons/circle-check.svg?raw'
+    import warning from '../../icons/warning.svg?raw'
+    import alert from '../../icons/alert.svg?raw'
+    import closeIcon from '../../icons/close.svg?raw'
+
+    export let title: ModalProps['title'] = ''
+    export let subTitle: ModalProps['subTitle'] = ''
+    export let showCloseIcon: ModalProps['showCloseIcon'] = true
+    export let closeOnEsc: ModalProps['closeOnEsc'] = true
+    export let closeOnOverlay: ModalProps['closeOnOverlay'] = true
+    export let theme: ModalProps['theme'] = null
+    export let id : ModalProps['className'] = ''
+    export let className: ModalProps['className'] = ''
+
+    const iconMap = {
+        info,
+        success,
+        warning,
+        alert
+    }
+
+    const classes = classNames([
+        styles.modal,
+        theme && styles[theme],
+        className
+    ])
+
+    const close = [
+        showCloseIcon && 'icon',
+        closeOnEsc && 'esc',
+        closeOnOverlay && 'overlay'
+    ].filter(Boolean).join(',')
+</script>
+
+<dialog
+    class={classes}
+    id={id}
+    data-close={close.length ? close : undefined}
+>
+    {#if showCloseIcon}
+        <Button
+            theme="flat"
+            className={styles.close}
+            data-id="close"
+        >
+            {@html closeIcon}
+        </Button>
+    {/if}
+    {#if title}
+        <strong class={styles.title}>
+            {#if theme}
+                {@html iconMap[theme]}
+            {/if}
+            {title}
+        </strong>
+    {/if}
+    {#if subTitle}
+        <div class={styles.subTitle}>{subTitle}</div>
+    {/if}
+    <slot />
+</dialog>
+<div class={styles.overlay} />

package/components/Modal/Modal.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import type { ReactModalProps } from './modal'
+
+import styles from './modal.module.scss'
+import { classNames } from '../../utils/classNames'
+
+import Button from '../Button/Button.tsx'
+
+import info from '../../icons/info.svg?raw'
+import success from '../../icons/circle-check.svg?raw'
+import warning from '../../icons/warning.svg?raw'
+import alert from '../../icons/alert.svg?raw'
+import closeIcon from '../../icons/close.svg?raw'
+
+const iconMap = {
+    info,
+    success,
+    warning,
+    alert
+}
+
+const Modal = ({
+    title,
+    subTitle,
+    showCloseIcon = true,
+    closeOnEsc = true,
+    closeOnOverlay = true,
+    theme,
+    id,
+    className,
+    children
+}: ReactModalProps) => {
+    const classes = classNames([
+        styles.modal,
+        theme && styles[theme],
+        className
+    ])
+
+    const close = [
+        showCloseIcon && 'icon',
+        closeOnEsc && 'esc',
+        closeOnOverlay && 'overlay'
+    ].filter(Boolean).join(',')
+
+    return (
+        <React.Fragment>
+            <dialog
+                className={classes}
+                id={id}
+                data-close={close.length ? close : undefined}
+            >
+                {showCloseIcon && (
+                    <Button
+                        theme="flat"
+                        className={styles.close}
+                        data-id="close"
+                        dangerouslySetInnerHTML={{ __html: closeIcon }}
+                    />
+                )}
+                {title && (
+                    <strong
+                        className={styles.title}
+                        dangerouslySetInnerHTML={{
+                            __html: theme ? iconMap[theme] + title : title
+                        }}
+                    />
+                )}
+                {subTitle && <div className={styles.subTitle}>{subTitle}</div>}
+                {children}
+            </dialog>
+            <div className={styles.overlay} />
+        </React.Fragment>
+    )
+}
+
+export default Modal

package/components/Modal/modal.module.scss

@@ -0,0 +1,103 @@
+@import '../../scss/config.scss';
+
+.modal {
+    @include transition();
+    @include position(fixed, 't50%', 'l50%');
+    @include spacing(0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size('w90%');
+
+    transform: translate(-50%, calc(-50% + 15px));
+    max-width: 500px;
+    pointer-events: none;
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translate(-50%, -50%);
+        pointer-events: all;
+
+        + .overlay {
+            @include visibility(1);
+            pointer-events: all;
+        }
+    }
+
+    .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);
+    }
+
+    &.info {
+        @include border(info);
+
+        .title {
+            @include typography(info);
+        }
+    }
+
+    &.success {
+        @include border(success);
+
+        .title {
+            @include typography(success);
+        }
+    }
+
+    &.warning {
+        @include border(warning);
+
+        .title {
+            @include typography(warning);
+        }
+    }
+
+    &.alert {
+        @include border(alert);
+
+        .title {
+            @include typography(alert);
+        }
+    }
+}
+
+.overlay {
+    @include transition(opacity);
+    @include position(fixed);
+    @include background(overlay);
+    @include layer(header);
+    @include visibility(0);
+
+    inset: 0;
+    pointer-events: none;
+}
+
+@include media(xs) {
+    .modal {
+        @include size('wauto');
+    }
+}

package/components/Modal/modal.ts

@@ -0,0 +1,18 @@
+export type ModalProps = {
+    title?: string
+    subTitle?: string
+    showCloseIcon?: boolean
+    closeOnEsc?: boolean
+    closeOnOverlay?: boolean
+    id?: string
+    className?: string
+    theme?: 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+}
+
+export type ReactModalProps = {
+    children?: React.ReactNode
+} & ModalProps