webcoreui 0.1.0 → 0.2.0

package/README.md

@@ -99,7 +99,7 @@ The `Setup` mixin can also accept the following options:
 | Property  | Default value | Purpose |
 |-----------|---------------|---------|
 | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
-| `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
+| `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
 
@@ -107,30 +107,56 @@ Default component styles can be changed by overriding the following CSS variable
 
 ```scss
 html body {
+    // Avatar component
     --w-avatar-border: var(--w-color-primary-70);
+
+    // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
+
+    // Progress component
     --w-progress-color: var(--w-color-primary);
     --w-progress-background: var(--w-color-primary-50);
     --w-progress-stripe-light: var(--w-color-primary);
     --w-progress-stripe-dark: var(--w-color-primary-10);
+
+    // Radio component
     --w-radio-color: var(--w-color-primary);
+
+    // Rating component
     --w-rating-color: var(--w-color-primary);
     --w-rating-empty-color: var(--w-color-primary);
     --w-rating-empty-background: var(--w-color-primary-70);
     --w-rating-size: 18px;
+
+    // Scrollbars
     --w-scrollbar-bg: var(--w-color-primary-60);
     --w-scrollbar-fg: var(--w-color-primary-50);
+
+    // Slider component
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+
+    // Spinner component
     --w-spinner-color: var(--w-color-primary);
     --w-spinner-width: 2px;
     --w-spinner-speed: 2s;
     --w-spinner-size: 30px;
     --w-spinner-dash: 8;
+
+    // Switch component
     --w-switch-off-color: var(--w-color-primary-50);
     --w-switch-on-color: var(--w-color-primary);
+
+    // ThemeSwitcher component
     --w-theme-switcher-size: 20px;
+
+    // Timeline component
     --w-timeline-color: var(--w-color-primary-50);
     --w-timeline-text-color: var(--w-color-primary);
     --w-timeline-counter: decimal;
+
+    // Tooltips
     --w-tooltip-background: var(--w-color-primary);
     --w-tooltip-color: var(--w-color-primary-70);
 
@@ -175,9 +201,11 @@ import { Accordion } from 'webcoreui/react'
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
+- [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
 - [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)
+- [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)
 - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)

package/astro.d.ts

@@ -9,9 +9,11 @@ import type { ConditionalWrapperProps } from './components/ConditionalWrapper/co
 import type { IconProps } from './components/Icon/icon'
 import type { InputProps } from './components/Input/input'
 import type { MenuProps } from './components/Menu/menu'
+import type { ModalProps } from './components/Modal/modal'
 import type { ProgressProps } from './components/Progress/progress'
 import type { RadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { SliderProps } from './components/Slider/slider'
 import type { SpinnerProps } from './components/Spinner/spinner'
 import type { SwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
@@ -33,9 +35,11 @@ declare module 'webcoreui/astro' {
 	export function Icon(_props: IconProps): any
 	export function Input(_props: InputProps): any
 	export function Menu(_props: MenuProps): any
+	export function Modal(_props: ModalProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: RadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Slider(_props: SliderProps): any
 	export function Spinner(_props: SpinnerProps): any
 	export function Switch(_props: SwitchProps): any
 	export function Table(_props: TableProps): any

package/astro.js

@@ -9,9 +9,11 @@ import ConditionalWrapperComponent from './components/ConditionalWrapper/Conditi
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
 import MenuComponent from './components/Menu/Menu.astro'
+import ModalComponent from './components/Modal/Modal.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
+import SliderComponent from './components/Slider/Slider.astro'
 import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SwitchComponent from './components/Switch/Switch.astro'
 import TableComponent from './components/Table/Table.astro'
@@ -32,9 +34,11 @@ export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const Menu = MenuComponent
+export const Modal = ModalComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent

package/components/Accordion/accordion.module.scss

@@ -7,7 +7,6 @@
     li {
         @include border(primary-50, bottom);
         @include spacing(py-sm, px-none, m0);
-        @include typography(md);
 
         &:first-child {
             padding-top: 0;
@@ -20,7 +19,7 @@
 
         .title {
             @include layout(flex, h-between, v-center, sm);
-            @include typography(md, primary, left);
+            @include typography(default, primary, left);
             @include size('w100%');
             @include spacing(p0);
             @include border(0);

package/components/Alert/alert.module.scss

@@ -37,15 +37,15 @@
     svg {
         @include size(20px);
         min-width: 20px;
-        margin-top: 1px;
+        margin-top: 2.5px;
     }
 
     .title {
-        @include spacing(mb-xs);
+        @include typography(lg, hmd);
         display: block;
     }
 
     .body {
-        @include typography(primary-20, md, hmd);
+        @include typography(primary-20, hmd);
     }
 }

package/components/Badge/badge.module.scss

@@ -5,7 +5,7 @@
     @include spacing(py-xs, px-sm);
     @include border-radius(xs);
     @include layout(inline-flex, v-center, xs);
-    @include typography(xs, primary-50);
+    @include typography(sm, primary-50);
     @include border(0);
     @include background(primary);
 

package/components/Button/button.module.scss

@@ -1,8 +1,8 @@
 @use '../../scss/config.scss' as *;
 
 .button {
-    @include layout(inline-flex, v-center, xs);
-    @include typography(md, primary-50, none);
+    @include layout(inline-flex, center, xs);
+    @include typography(default, primary-50, none);
     @include spacing(py-sm, px-md);
     @include border-radius(xs);
     @include border(0);

package/components/Button/button.ts

@@ -18,5 +18,5 @@ export type SvelteButtonProps = {
 
 export type ReactButtonProps = {
     onClick?: () => any
-    children: React.ReactNode
+    children?: React.ReactNode
 } & ButtonProps

package/components/Card/card.module.scss

@@ -16,7 +16,6 @@
     .title {
         @include spacing(p-default);
         @include border(primary-50, bottom);
-        @include typography(md);
         display: block;
     }
 

package/components/Checkbox/checkbox.module.scss

@@ -6,7 +6,7 @@ body {
 
 .checkbox {
     @include layout(inline-flex, sm);
-    @include typography(md, hmd);
+    @include typography(hmd);
 
     cursor: pointer;
 
@@ -34,8 +34,8 @@ body {
         }
 
         &:disabled + span {
-            @include background(primary-40);
-            @include border(primary-40);
+            @include background(primary-30);
+            @include border(primary-30);
             cursor: no-drop;
         }
     }
@@ -57,7 +57,7 @@ body {
 
     .text {
         @include spacing(ml-lg);
-        @include typography(sm, primary-20);
+        @include typography(md, primary-20);
 
         a {
             @include typography(primary-20);

package/components/Icon/map.ts

@@ -2,6 +2,7 @@ import Alert from '../../icons/alert.svg?raw'
 import ArrowDown from '../../icons/arrow-down.svg?raw'
 import Check from '../../icons/check.svg?raw'
 import CircleCheck from '../../icons/circle-check.svg?raw'
+import Close from '../../icons/close.svg?raw'
 import Github from '../../icons/github.svg?raw'
 import Info from '../../icons/info.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
@@ -13,6 +14,7 @@ const iconMap = {
     'arrow-down': ArrowDown,
     'check': Check,
     'circle-check': CircleCheck,
+    'close': Close,
     'github': Github,
     'info': Info,
     'moon': Moon,

package/components/Input/input.module.scss

@@ -54,7 +54,7 @@
     @include layout(flex, column);
 
     .label {
-        @include typography(md, primary-20);
+        @include typography(primary-20);
         @include spacing(mb-xs);
     }
 
@@ -73,7 +73,7 @@
     }
 
     .subtext {
-        @include typography(sm, primary-30);
+        @include typography(md, primary-30);
         @include spacing(mt-xs);
     }
 }

package/components/Menu/Menu.astro

@@ -45,7 +45,7 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
             )}
 
             {!centerLogo && logo?.html && (
-                <a href="/">
+                <a href="/" aria-label={logo.alt || 'Logo'}>
                     <Fragment set:html={logo.html} />
                 </a>
             )}
@@ -54,7 +54,11 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
                 <ul>
                     {items.map(item => (
                         <li>
-                            <a href={item.url} target={item.target}>
+                            <a
+                                href={item.url}
+                                target={item.target}
+                                class:list={[item.active && styles.active]}
+                            >
                                 {item.name}
                             </a>
                         </li>
@@ -73,7 +77,7 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
         )}
 
         {centerLogo && logo?.html && (
-            <a href="/">
+            <a href="/" aria-label={logo.alt || 'Logo'}>
                 <Fragment set:html={logo.html} />
             </a>
         )}

package/components/Menu/Menu.svelte

@@ -43,14 +43,20 @@
             {/if}
 
             {#if !centerLogo && logo?.html}
-                <a href="/">{@html logo.html}</a>
+                <a href="/" aria-label={logo.alt || 'Logo'}>
+                    {@html logo.html}
+                </a>
             {/if}
         
             {#if items?.length}
                 <ul>
                     {#each items as item}
                         <li>
-                            <a href={item.url} target={item.target}>
+                            <a
+                                href={item.url}
+                                target={item.target}
+                                class={item.active ? styles.active : null}
+                            >
                                 {item.name}
                             </a>
                         </li>
@@ -69,7 +75,9 @@
         {/if}
             
         {#if centerLogo && logo?.html}
-            <a href="/">{@html logo.html}</a>
+            <a href="/" aria-label={logo.alt || 'Logo'}>
+                {@html logo.html}
+            </a>
         {/if}
 
         {#if logo?.url && centerLogo}

package/components/Menu/Menu.tsx

@@ -55,6 +55,7 @@ const Menu = ({
                         <a
                             href="/"
                             dangerouslySetInnerHTML={{ __html: logo.html }}
+                            aria-label={logo.alt || 'Logo'}
                         />
                     )}
 
@@ -62,7 +63,11 @@ const Menu = ({
                         <ul>
                             {items.map((item, index) => (
                                 <li key={index}>
-                                    <a href={item.url} target={item.target}>
+                                    <a
+                                        href={item.url}
+                                        target={item.target}
+                                        className={item.active ? styles.active : undefined}
+                                    >
                                         {item.name}
                                     </a>
                                 </li>
@@ -84,6 +89,7 @@ const Menu = ({
                     <a
                         href="/"
                         dangerouslySetInnerHTML={{ __html: logo.html }}
+                        aria-label={logo.alt || 'Logo'}
                     />
                 )}
 

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