webcoreui 0.1.0 → 0.3.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,60 @@ 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);
+
+    // Collapsible
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+
+    // 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);
 
@@ -171,17 +201,23 @@ import { Accordion } from 'webcoreui/react'
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
+- [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
 - [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)
+- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
 - [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)
 - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Textarea](https://github.com/Frontendland/webcoreui/tree/main/src/components/Textarea)
 - [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)
 - [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
 - [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)

package/astro.d.ts

@@ -5,17 +5,23 @@ import type { BadgeProps } from './components/Badge/badge'
 import type { ButtonProps } from './components/Button/button'
 import type { CardProps } from './components/Card/card'
 import type { CheckboxProps } from './components/Checkbox/checkbox'
+import type { CollapsibleProps } from './components/Collapsible/collapsible'
 import type { ConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
 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 { PopoverProps } from './components/Popover/popover'
 import type { ProgressProps } from './components/Progress/progress'
 import type { RadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { SheetProps } from './components/Sheet/sheet'
+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'
 import type { TabsProps } from './components/Tabs/tabs'
+import type { TextareaProps } from './components/Textarea/textarea'
 import type { ThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
 import type { TimelineProps } from './components/Timeline/timeline'
 import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
@@ -29,17 +35,23 @@ declare module 'webcoreui/astro' {
 	export function Button(_props: ButtonProps): any
 	export function Card(_props: CardProps): any
 	export function Checkbox(_props: CheckboxProps): any
+	export function Collapsible(_props: CollapsibleProps): any
 	export function ConditionalWrapper(_props: ConditionalWrapperProps): any
 	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 Popover(_props: PopoverProps): any
 	export function Progress(_props: ProgressProps): any
 	export function Radio(_props: RadioProps): any
 	export function Rating(_props: RatingProps): any
+	export function Sheet(_props: SheetProps): 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
 	export function Tabs(_props: TabsProps): any
+	export function Textarea(_props: TextareaProps): any
 	export function ThemeSwitcher(_props: ThemeSwitcherProps): any
 	export function Timeline(_props: TimelineProps): any
 	export function TimelineItem(_props: TimelineItemProps): any

package/astro.js

@@ -5,17 +5,23 @@ import BadgeComponent from './components/Badge/Badge.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
+import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
 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 PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
+import SheetComponent from './components/Sheet/Sheet.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'
 import TabsComponent from './components/Tabs/Tabs.astro'
+import TextareaComponent from './components/Textarea/Textarea.astro'
 import ThemeSwitcherComponent from './components/ThemeSwitcher/ThemeSwitcher.astro'
 import TimelineComponent from './components/Timeline/Timeline.astro'
 import TimelineItemComponent from './components/TimelineItem/TimelineItem.astro'
@@ -28,17 +34,23 @@ export const Badge = BadgeComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
 export const Checkbox = CheckboxComponent
+export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const Menu = MenuComponent
+export const Modal = ModalComponent
+export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Sheet = SheetComponent
+export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
+export const Textarea = TextareaComponent
 export const ThemeSwitcher = ThemeSwitcherComponent
 export const Timeline = TimelineComponent
 export const TimelineItem = TimelineItemComponent

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.tsx

@@ -38,7 +38,10 @@ const Alert = ({
     return (
         <Element className={classes} {...rest}>
             {icon && icon}
-            {!icon && theme && <div dangerouslySetInnerHTML={{ __html: iconMap[theme] }} />}
+            {!icon && theme && <div
+                dangerouslySetInnerHTML={{ __html: iconMap[theme] }}
+                style={{ height: '20px' }}
+            />}
 
             <ConditionalWrapper condition={!!(icon || theme)} wrapper={children => (
                 <div className={styles.wrapper}>

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/Avatar/avatar.module.scss

@@ -7,6 +7,8 @@ body {
 .avatar {
     @include border-radius(max);
 
+    object-fit: cover;
+
     &:not(.borderless) {
         border: 3px solid var(--w-avatar-border);
     }

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/Collapsible/Collapsible.astro

@@ -0,0 +1,63 @@
+---
+import type { CollapsibleProps } from './collapsible'
+
+import styles from './collapsible.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends CollapsibleProps {}
+
+const {
+    initialHeight,
+    maxHeight,
+    toggled,
+    className,
+    togglesClassName
+} = Astro.props
+
+const classes = [
+    styles.collapsible,
+    maxHeight && styles.animated,
+    className
+]
+
+const styleVariables = classNames([
+    initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+    maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+])
+---
+
+<div
+    class:list={classes}
+    data-toggled={toggled ? 'true' : undefined}
+    data-id="w-collapsible"
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div class:list={togglesClassName}>
+        <div data-toggle-on="true"><slot name="on" /></div>
+        <div data-toggle-off="true"><slot name="off" /></div>
+    </div>
+</div>
+
+<script>
+    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+
+    Array.from(collapsibles).forEach(element => {
+        element.addEventListener('click', event => {
+            const collapsible = event.currentTarget as HTMLDivElement
+            const target = event.target as HTMLDivElement
+
+            if (target.parentElement?.dataset.toggleOn) {
+                collapsible.dataset.toggled = 'true'
+            }
+
+            if (target.parentElement?.dataset.toggleOff) {
+                collapsible.dataset.toggled = 'false'
+            }
+        })
+    })
+</script>

package/components/Collapsible/Collapsible.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { CollapsibleProps } from './collapsible'
+
+    import styles from './collapsible.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let initialHeight: CollapsibleProps['initialHeight'] = ''
+    export let maxHeight: CollapsibleProps['maxHeight'] = ''
+    export let toggled: CollapsibleProps['toggled'] = false
+    export let className: CollapsibleProps['className'] = ''
+    export let togglesClassName: CollapsibleProps['togglesClassName'] = ''
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = classNames([
+        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+    ])
+</script>
+
+<div
+    class={classes}
+    data-toggled={toggled ? 'true' : undefined}
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div
+        on:click={() => toggled = !toggled}
+        on:keyup={() => toggled = !toggled}
+        role="button"
+        tabindex={0}
+        class={togglesClassName}
+    >
+        {#if toggled}
+            <slot name="off" />
+        {:else}
+            <slot name="on" />
+        {/if}
+    </div>
+</div>

package/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import type { ReactCollapsibleProps } from './collapsible'
+
+import styles from './collapsible.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Collapsible = ({
+    initialHeight,
+    maxHeight,
+    toggled,
+    on,
+    off,
+    children,
+    className,
+    togglesClassName
+}: ReactCollapsibleProps) => {
+    const [toggle, setToggled] = useState(toggled)
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = {
+        ...(initialHeight && { '--w-collapsible-initial-height': initialHeight }),
+        ...(maxHeight && { '--w-collapsible-max-height': maxHeight })
+    } as React.CSSProperties
+
+    return (
+        <div
+            className={classes}
+            data-toggled={toggle ? 'true' : undefined}
+        >
+            <div
+                className={styles.wrapper}
+                style={styleVariables}
+            >
+                {children}
+            </div>
+            <div
+                onClick={() => setToggled(!toggle)}
+                onKeyUp={() => setToggled(!toggle)}
+                role="button"
+                tabIndex={0}
+                className={togglesClassName}
+            >
+                {toggle ? off : on}
+            </div>
+        </div>
+    )
+}
+
+export default Collapsible

package/components/Collapsible/collapsible.module.scss

@@ -0,0 +1,29 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+}
+
+.collapsible {
+    @include layout(flex, column, xs);
+
+    &:not([data-toggled="true"]) [data-toggle-off],
+    &[data-toggled="true"] [data-toggle-on] {
+        @include visibility(none);
+    }
+
+    &[data-toggled="true"] .wrapper {
+        max-height: var(--w-collapsible-max-height);
+    }
+
+    &.animated .wrapper {
+        @include transition(max-height, .5s);
+    }
+
+    .wrapper {
+        @include visibility(hidden);
+
+        max-height: var(--w-collapsible-initial-height);
+    }
+}

package/components/Collapsible/collapsible.ts

@@ -0,0 +1,14 @@
+export type CollapsibleProps = {
+    initialHeight?: string
+    maxHeight?: string
+    toggled?: boolean
+    className?: string
+    togglesClassName?: string
+}
+
+export type ReactCollapsibleProps = {
+    on: React.ReactNode
+    off: React.ReactNode
+    children?: React.ReactNode
+} & CollapsibleProps
+

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'}
                     />
                 )}