webcoreui 0.1.0 → 0.3.0

package/components/Menu/menu.module.scss

@@ -3,7 +3,6 @@
 .menu {
     @include background(primary-70);
     @include spacing(p-md);
-    @include typography(md);
     @include border(bottom, primary-50);
     @include position(sticky, t0);
     @include layer(header);
@@ -75,6 +74,10 @@
             &:hover {
                 @include typography(primary);
             }
+
+            &.active {
+                @include typography(primary);
+            }
         }
     }
 

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(m0, 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

package/components/Popover/Popover.astro

@@ -0,0 +1,23 @@
+---
+import type { PopoverProps } from './popover'
+import styles from './popover.module.scss'
+
+interface Props extends PopoverProps {}
+
+const {
+    id,
+    className
+} = Astro.props
+
+const classes = [
+    styles.popover,
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+>
+    <slot />
+</dialog>

package/components/Popover/Popover.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { PopoverProps } from './popover'
+
+    import styles from './popover.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let id: PopoverProps['id'] = ''
+    export let className: PopoverProps['className'] = ''
+
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+</script>
+
+<dialog
+    class={classes}
+    id={id}
+>
+    <slot />
+</dialog>

package/components/Popover/Popover.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { ReactPopoverProps } from './popover'
+
+import styles from './popover.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Popover = ({
+    id,
+    className,
+    children
+}: ReactPopoverProps) => {
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+
+    return (
+        <dialog
+            className={classes}
+            id={id}
+        >
+            {children}
+        </dialog>
+    )
+}
+
+export default Popover

package/components/Popover/popover.module.scss

@@ -0,0 +1,51 @@
+@import '../../scss/config.scss';
+
+.popover {
+    @include spacing(m0, 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(w300px);
+
+    transform: translateY(-5px);
+    pointer-events: none;
+
+    &[data-show] {
+        @include transition();
+    }
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translateY(0);
+        pointer-events: all;
+    }
+
+    &[data-position="top"] {
+        transform: translateY(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+    &[data-position="left"] {
+        transform: translateY(0) translateX(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+
+    &[data-position="right"] {
+        transform: translateY(0) translateX(-5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+}

package/components/Popover/popover.ts

@@ -0,0 +1,8 @@
+export type PopoverProps = {
+    id?: string
+    className?: string
+}
+
+export type ReactPopoverProps = {
+    children?: React.ReactNode
+} & PopoverProps

package/components/Progress/progress.module.scss

@@ -11,19 +11,19 @@ body {
     @include size('w100%', h10px);
     @include border-radius(xl);
     @include visibility(hidden);
-    @include typography(bold, xxs);
+    @include typography(bold, xs);
     @include background(var(--w-progress-background));
 
     color: var(--w-progress-background);
     
     &.medium {
         @include size(h15px);
-        @include typography(xs);
+        @include typography(sm);
     }
 
     &.large {
         @include size(h20px);
-        @include typography(sm);
+        @include typography(md);
     }
 
     &.square {

package/components/Radio/radio.module.scss

@@ -13,7 +13,6 @@ body {
 
     label {
         @include layout(flex, xs);
-        @include typography(md);
 
         cursor: pointer;
 
@@ -71,7 +70,7 @@ body {
 
     .subtext {
         @include spacing(ml-lg);
-        @include typography(sm, primary-20);
+        @include typography(md, primary-20);
 
         a {
             @include typography(primary-20);

package/components/Rating/Rating.astro

@@ -45,11 +45,11 @@ const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`)
 
 <span class:list={classes} style={styleVariables}>
     {score > 0 && (
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     )}
     {showEmpty && (
         <span class={styles.empty}>
-            {Array(total - score).fill('★').join('')}
+            {Array(total - Math.round(score)).fill('★').join('')}
         </span>
     )}
     {showText && (

package/components/Rating/Rating.svelte

@@ -42,11 +42,11 @@
 
 <span class={classes} style={styleVariables}>
     {#if score}
-        <span class={styles.score}>{Array(score).fill('★').join('')}</span>
+        <span class={styles.score}>{Array(Math.round(score)).fill('★').join('')}</span>
     {/if}
     {#if showEmpty}
     <span class={styles.empty}>
-            {Array((total || 5) - score).fill('★').join('')}
+            {Array((total || 5) - Math.round(score)).fill('★').join('')}
         </span>
     {/if}
 

package/components/Rating/Rating.tsx

@@ -43,12 +43,12 @@ const Rating = ({
         <span className={classes} style={styleVariables}>
             {score > 0 && (
                 <span className={styles.score}>
-                    {Array(score).fill('★').join('')}
+                    {Array(Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showEmpty && (
                 <span className={styles.empty}>
-                    {Array(total - score).fill('★').join('')}
+                    {Array(total - Math.round(score)).fill('★').join('')}
                 </span>
             )}
             {showText && (

package/components/Rating/rating.module.scss

@@ -35,7 +35,7 @@ body {
     
     .text {
         @include transition(color);
-        @include typography(md, primary-20);
+        @include typography(default, primary-20);
         @include spacing(ml-xs);
 
         &.m {

package/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>

package/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>

package/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