webcoreui 0.7.0 → 0.8.0

package/components/Popover/popover.module.scss

@@ -1,52 +1,52 @@
-@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);
-    @include position('t-100%');
-
-    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);
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.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);
+    @include position('t-100%');
+
+    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/Ribbon/Ribbon.astro

@@ -0,0 +1,28 @@
+---
+import type { RibbonProps } from './ribbon'
+
+import styles from './ribbon.module.scss'
+
+interface Props extends RibbonProps {}
+
+const {
+    offset,
+    type,
+    theme,
+    className
+} = Astro.props
+
+const classes = [
+    styles.ribbon,
+    theme && styles[theme],
+    type && styles[type],
+    className
+]
+---
+
+<span
+    class:list={classes}
+    style={offset ? `top:${offset}px;left:${offset}px` : null}
+>
+    <slot />
+</span>

package/components/Ribbon/Ribbon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { RibbonProps } from './ribbon'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './ribbon.module.scss'
+
+    export let offset: RibbonProps['offset'] = 0
+    export let type: RibbonProps['type'] = null
+    export let theme: RibbonProps['theme'] = null
+    export let className: RibbonProps['className'] = ''
+
+    const classes = classNames([
+        styles.ribbon,
+        theme && styles[theme],
+        type && styles[type],
+        className
+    ])
+</script>
+
+<span
+    class={classes}
+    style={offset ? `top:${offset}px;left:${offset}px` : null}
+>
+    <slot />
+</span>

package/components/Ribbon/Ribbon.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import type { ReactRibbonProps } from './ribbon'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './ribbon.module.scss'
+
+const Ribbon = ({
+    offset,
+    type,
+    theme,
+    className,
+    children
+}: ReactRibbonProps) => {
+    const classes = classNames([
+        styles.ribbon,
+        theme && styles[theme],
+        type && styles[type],
+        className
+    ])
+
+    const styleVariable = offset
+        ? { top: offset, left: offset } as React.CSSProperties
+        : undefined
+
+    return (
+        <span className={classes} style={styleVariable}>
+            {children}
+        </span>
+    )
+}
+
+export default Ribbon

package/components/Ribbon/ribbon.module.scss

@@ -0,0 +1,84 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-ribbon-offset: 20px;
+    --w-ribbon-folded-offset: 10px;
+}
+
+.ribbon {
+    @include position(absolute);
+    @include typography(sm, primary-70);
+    @include background(primary);
+    @include spacing('px-5xl');
+
+    top: var(--w-ribbon-offset);
+    left: var(--w-ribbon-offset);
+
+    transform: rotate(-45deg) translate(-50%, -50%);
+    transform-origin: top left;
+    pointer-events: none;
+
+    &.folded {
+        @include position(t10px);
+        @include spacing(px-sm);
+
+        transform: none;
+        left: calc(var(--w-ribbon-folded-offset) * -1);
+
+        &::before {
+            @include position(absolute, t15px, l0);
+            @include layer(bg);
+
+            content: '';
+            transform: translateY(-50%);
+            border-right: var(--w-ribbon-folded-offset) solid var(--w-color-primary-20);
+            border-top: var(--w-ribbon-folded-offset) solid transparent;
+            border-bottom: var(--w-ribbon-folded-offset) solid transparent;
+        }
+    }
+
+    &.secondary {
+        @include typography(primary);
+        @include background(primary-50);
+
+        &.folded::before {
+            border-right-color: var(--w-color-primary-30);
+        }
+    }
+
+    &.info {
+        @include typography(info-fg);
+        @include background(info);
+
+        &.folded::before {
+            border-right-color: var(--w-color-info-accent);
+        }
+    }
+
+    &.success {
+        @include typography(success-fg);
+        @include background(success);
+
+        &.folded::before {
+            border-right-color: var(--w-color-success-accent);
+        }
+    }
+
+    &.warning {
+        @include typography(warning-fg);
+        @include background(warning);
+
+        &.folded::before {
+            border-right-color: var(--w-color-warning-accent);
+        }
+    }
+
+    &.alert {
+        @include typography(alert-fg);
+        @include background(alert);
+
+        &.folded::before {
+            border-right-color: var(--w-color-alert-accent);
+        }
+    }
+}

package/components/Ribbon/ribbon.ts

@@ -0,0 +1,16 @@
+export type RibbonProps = {
+    offset?: number
+    type?: 'folded' | null
+    theme?: 'secondary'
+        | 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+        | undefined
+    className?: string
+}
+
+export type ReactRibbonProps = {
+    children: React.ReactNode
+} & RibbonProps

package/components/Select/select.module.scss

@@ -1,25 +1,25 @@
-@import '../../scss/config.scss';
-
-.select {
-    svg {
-        @include position(r10px);
-
-        left: auto !important;
-        cursor: pointer;
-    }
-
-    input {
-        cursor: pointer;
-        padding-left: 10px !important;
-        padding-right: 40px;
-    }
-
-    &.disabled svg {
-        cursor: no-drop;
-    }
-}
-
-.popover {
-    padding: 0 !important;
-    border: 0 !important;
-}
+@use '../../scss/config.scss' as *;
+
+.select {
+    svg {
+        @include position(r10px);
+
+        left: auto !important;
+        cursor: pointer;
+    }
+
+    input {
+        cursor: pointer;
+        padding-left: 10px !important;
+        padding-right: 40px;
+    }
+
+    &.disabled svg {
+        cursor: no-drop;
+    }
+}
+
+.popover {
+    padding: 0 !important;
+    border: 0 !important;
+}

package/components/Sheet/sheet.module.scss

@@ -1,68 +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);
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.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);
+        }
+    }
+}

package/components/Sidebar/sidebar.module.scss

@@ -1,43 +1,43 @@
-@import '../../scss/config.scss';
-
-.sidebar {
-
-    strong {
-        @include spacing(mb-sm);
-
-        display: block;
-    }
-
-    ul {
-        @include layout(flex, column, sm);
-        @include typography(normal);
-        @include spacing(0);
-
-        list-style-type: none;
-        
-        &:not(:last-child) {
-            @include spacing('mb-3xl');
-        }
-
-        li {
-            @include spacing(m0);
-        }
-
-        a {
-            @include typography(primary-20, none);
-            @include layout(flex, v-center, sm);
-
-            &:hover {
-                @include typography(primary);
-            }
-
-            &.active {
-                @include typography(primary);
-            }
-
-            svg {
-                @include size(18px);
-            }
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.sidebar {
+
+    strong {
+        @include spacing(mb-sm);
+
+        display: block;
+    }
+
+    ul {
+        @include layout(flex, column, sm);
+        @include typography(normal);
+        @include spacing(0);
+
+        list-style-type: none;
+        
+        &:not(:last-child) {
+            @include spacing('mb-3xl');
+        }
+
+        li {
+            @include spacing(m0);
+        }
+
+        a {
+            @include typography(primary-20, none);
+            @include layout(flex, v-center, sm);
+
+            &:hover {
+                @include typography(primary);
+            }
+
+            &.active {
+                @include typography(primary);
+            }
+
+            svg {
+                @include size(18px);
+            }
+        }
+    }
+}

package/components/Skeleton/Skeleton.astro

@@ -0,0 +1,35 @@
+---
+import type { SkeletonProps } from './skeleton'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './skeleton.module.scss'
+
+interface Props extends SkeletonProps {}
+
+const {
+    animate = 'wave',
+    type = 'rounded',
+    width,
+    height,
+    color,
+    waveColor,
+    className
+} = Astro.props
+
+const classes = [
+    animate && styles[animate],
+    styles[type],
+    styles.skeleton,
+    className
+]
+
+const styleVariables = classNames([
+    width && `width: ${width}px;`,
+    height && `height: ${height}px;`,
+    color && `--w-skeleton-color: ${color};`,
+    waveColor && `--w-skeleton-wave-color: ${waveColor};`
+])
+---
+
+<div class:list={classes} style={styleVariables}>&nbsp;</div>

package/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { SkeletonProps } from './skeleton'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './skeleton.module.scss'
+
+    export let animate: SkeletonProps['animate'] = 'wave'
+    export let type: SkeletonProps['type'] = 'rounded'
+    export let width: SkeletonProps['width'] = 0
+    export let height: SkeletonProps['height'] = 0
+    export let color: SkeletonProps['color'] = ''
+    export let waveColor: SkeletonProps['waveColor'] = ''
+    export let className: SkeletonProps['className'] = ''
+
+    const classes = classNames([
+        animate && styles[animate],
+        styles[type!],
+        styles.skeleton,
+        className
+    ])
+
+    const styleVariables = classNames([
+        width && `width: ${width}px;`,
+        height && `height: ${height}px;`,
+        color && `--w-skeleton-color: ${color};`,
+        waveColor && `--w-skeleton-wave-color: ${waveColor};`
+    ])
+</script>
+
+<div class={classes} style={styleVariables}>&nbsp;</div>

package/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import type { SkeletonProps } from './skeleton'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './skeleton.module.scss'
+
+const Skeleton = ({
+    animate = 'wave',
+    type = 'rounded',
+    width,
+    height,
+    color,
+    waveColor,
+    className
+}: SkeletonProps) => {
+    const classes = classNames([
+        animate && styles[animate],
+        styles[type],
+        styles.skeleton,
+        className
+    ])
+
+    const styleVariables = {
+        ...(width && { width: `${width}px` }),
+        ...(height && { height: `${height}px` }),
+        ...(color && { '--w-skeleton-color': color }),
+        ...(waveColor && { '--w-skeleton-wave-color': waveColor })
+    } as React.CSSProperties
+
+    return <div className={classes} style={styleVariables}>&nbsp;</div>
+}
+
+export default Skeleton