webcoreui 0.3.0 → 0.4.0

package/components/List/List.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+    import type { ListEventType,SvelteListProps } from './list'
+
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+    import Input from '../Input/Input.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import searchIcon from '../../icons/search.svg?raw'
+
+    import styles from './list.module.scss'
+
+    export let showSearchBar: SvelteListProps['showSearchBar'] = false
+    export let showSearchBarIcon: SvelteListProps['showSearchBarIcon'] = false
+    export let searchBarPlaceholder: SvelteListProps['searchBarPlaceholder'] = ''
+    export let noResultsLabel: SvelteListProps['noResultsLabel'] = 'No results.'
+    export let maxHeight: SvelteListProps['maxHeight'] = ''
+    export let id: SvelteListProps['id'] = ''
+    export let className: SvelteListProps['className'] = ''
+    export let wrapperClassName: SvelteListProps['wrapperClassName'] = ''
+    export let itemGroups: SvelteListProps['itemGroups'] = []
+    export let onSelect: SvelteListProps['onSelect'] = () => {}
+
+    let searchValue = ''
+    let numberOfResults = 1
+
+    const classes = classNames([
+        styles.list,
+        !showSearchBar && styles.container,
+        className
+    ])
+
+    const wrapperClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const search = (event: InputEvent) => {
+        searchValue = (event.target as HTMLInputElement).value
+
+        numberOfResults = itemGroups
+            .map(group => group.items)
+            .flat()
+            .filter(item => {
+                return item.value?.toLowerCase().includes(searchValue)
+                    || item.subText?.toLowerCase().includes(searchValue)
+                    || item.name.toLowerCase().includes(searchValue)
+            }).length
+    }
+
+    const select = (event: MouseEvent | KeyboardEvent) => {
+        const li = event.target as HTMLLIElement
+
+        itemGroups = itemGroups.map(group => {
+            group.items = group.items.map(item => {
+                item.selected = li.dataset.name === item.name
+
+                return item
+            })
+
+            return group
+        })
+
+        onSelect?.({
+            ...li.dataset,
+            list: li.parentElement
+        } as ListEventType)
+    }
+
+    const selectByKey = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            select(event)
+        }
+    }
+</script>
+
+<ConditionalWrapper
+    condition={!!showSearchBar}
+    class={wrapperClasses}
+>
+    {#if showSearchBar}
+        <Input
+            type="search"
+            placeholder={searchBarPlaceholder}
+            onInput={search}
+        >
+            {#if showSearchBarIcon}
+                {@html searchIcon}
+            {/if}
+        </Input>
+    {/if}
+    <ul
+        class={classes}
+        id={id || null}
+        style={maxHeight ? `max-height: ${maxHeight}` : null}
+    >
+        {#each itemGroups as group}
+            {#if group.title}
+                <li class={styles.title}
+                    data-hidden={searchValue ? true : null}
+                >
+                    {group.title}
+                </li>
+            {/if}
+            {#each group.items as item}
+                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                <li
+                    tabIndex={item.href || item.disabled ? undefined : 0}
+                    data-value={item.value}
+                    data-name={item.name}
+                    data-disabled={item.disabled}
+                    data-selected={item.selected ? true : undefined}
+                    data-hidden={(
+                        !item.value?.toLowerCase().includes(searchValue)
+                        && !item.subText?.toLowerCase().includes(searchValue)
+                        && !item.name.toLowerCase().includes(searchValue)
+                    ) ? true : null}
+                    on:click={item.disabled ? null : select}
+                    on:keyup={item.disabled ? null : selectByKey}
+                >
+                    <ConditionalWrapper
+                        condition={!!item.href}
+                        element="a"
+                        href={item.href}
+                        target={item.target}
+                    >
+                        <ConditionalWrapper
+                            condition={!!(item.icon && item.subText)}
+                        >
+                            {#if item.icon}
+                                {@html item.icon}
+                            {/if}
+                            {item.name}
+                        </ConditionalWrapper>
+                        {#if item.subText}
+                            <span>{item.subText}</span>
+                        {/if}
+                    </ConditionalWrapper>
+                </li>
+            {/each}
+        {/each}
+
+        {#if showSearchBar && !numberOfResults}
+            <li data-id="w-no-results">{noResultsLabel}</li>
+        {/if}
+    </ul>
+</ConditionalWrapper>

package/components/List/List.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react'
+import type { ListEventType, ReactListProps } from './list'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import Input from '../Input/Input.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import searchIcon from '../../icons/search.svg?raw'
+
+import styles from './list.module.scss'
+
+const List = ({
+    showSearchBar,
+    showSearchBarIcon,
+    searchBarPlaceholder,
+    noResultsLabel = 'No results.',
+    maxHeight,
+    id,
+    className,
+    wrapperClassName,
+    itemGroups,
+    onSelect
+}: ReactListProps) => {
+    const [searchValue, setSearchValue] = useState('')
+    const [numberOfResults, setNumberOfResults] = useState(1)
+    const [itemGroupsWithActive, setItemGroups] = useState(itemGroups)
+
+    const classes = classNames([
+        styles.list,
+        !showSearchBar && styles.container,
+        className
+    ])
+
+    const wrapperClasses = classNames([
+        styles.container,
+        wrapperClassName
+    ])
+
+    const style = maxHeight
+        ? { maxHeight } as React.CSSProperties
+        : undefined
+
+    const search = (event: React.FormEvent<HTMLInputElement>) => {
+        const value = (event.target as HTMLInputElement).value
+
+        setSearchValue(value)
+        setNumberOfResults(
+            itemGroups
+                .map(group => group.items)
+                .flat()
+                .filter(item => {
+                    return item.value?.toLowerCase().includes(value)
+                        || item.subText?.toLowerCase().includes(value)
+                        || item.name.toLowerCase().includes(value)
+                }).length
+        )
+    }
+
+    const select = (event: any) => {
+        const li = event.target as HTMLLIElement
+
+        setItemGroups(
+            itemGroupsWithActive.map(group => {
+                return {
+                    ...group,
+                    items: group.items.map(item => {
+                        return {
+                            ...item,
+                            selected: li.dataset.name === item.name
+                        }
+                    })
+                }
+            })
+        )
+
+        onSelect?.({
+            ...li.dataset,
+            list: li.parentElement
+        } as ListEventType)
+    }
+
+    const selectByKey = (event: any) => {
+        if (event.key === 'Enter') {
+            select(event)
+        }
+    }
+
+    return (
+        <ConditionalWrapper condition={!!showSearchBar} wrapper={children => (
+            <div className={wrapperClasses}>
+                <Input
+                    type="search"
+                    placeholder={searchBarPlaceholder}
+                    onInput={search}
+                >
+                    {showSearchBarIcon && (
+                        <span
+                            dangerouslySetInnerHTML={{ __html: searchIcon }}
+                            style={{ height: '18px', position: 'absolute' }}
+                        />
+                    )}
+                </Input>
+                {children}
+            </div>
+        )}>
+            <ul className={classes} id={id} style={style}>
+                {itemGroupsWithActive.map((group: ReactListProps['itemGroups'][0], index) => (
+                    <React.Fragment key={index}>
+                        {group.title && (
+                            <li className={styles.title}
+                                data-hidden={searchValue ? true : null}
+                            >
+                                {group.title}
+                            </li>
+                        )}
+                        {group.items.map((item, index) => (
+                            <li
+                                key={index}
+                                tabIndex={item.href || item.disabled ? undefined : 0}
+                                data-value={item.value}
+                                data-name={item.name}
+                                data-disabled={item.disabled}
+                                data-selected={item.selected ? true : undefined}
+                                data-hidden={(
+                                    !item.value?.toLowerCase().includes(searchValue)
+                                    && !item.subText?.toLowerCase().includes(searchValue)
+                                    && !item.name.toLowerCase().includes(searchValue)
+                                ) ? true : null}
+                                onClick={item.disabled ? undefined : select}
+                                onKeyUp={item.disabled ? undefined : selectByKey}
+                            >
+                                <ConditionalWrapper condition={!!item.href} wrapper={children => (
+                                    <a
+                                        href={item.href}
+                                        target={item.target}
+                                    >
+                                        {children}
+                                    </a>
+                                )}>
+
+                                    <ConditionalWrapper condition={!!(item.icon && item.subText)} wrapper={children => (
+                                        <div>{children}</div>
+                                    )}>
+                                        {item.icon && (
+                                            <span
+                                                dangerouslySetInnerHTML={{ __html: item.icon }}
+                                                style={{ height: '18px' }}
+                                            />
+                                        )}
+                                        {item.name}
+                                    </ConditionalWrapper>
+                                    {item.subText && <span>{item.subText}</span>}
+                                </ConditionalWrapper>
+                            </li>
+                        ))}
+                    </React.Fragment>
+                ))}
+
+                {showSearchBar && !numberOfResults && (
+                    <li data-id="w-no-results">{noResultsLabel}</li>
+                )}
+            </ul>
+        </ConditionalWrapper>
+    )
+}
+
+export default List

package/components/List/list.module.scss

@@ -0,0 +1,91 @@
+@import '../../scss/config.scss';
+
+.list {
+    @include spacing(0);
+
+    overflow-y: auto;
+    list-style-type: none;
+
+    &:hover li[data-selected] {
+        @include background(transparent);
+    }
+
+    li {
+        @include transition(background);
+        @include spacing(px-sm, py-xs, m-xs);
+        @include layout(flex, sm, v-center);
+        @include border-radius(md);
+
+        &:not(.title, [data-disabled]) {
+            cursor: pointer;
+        }
+
+        &:not(.title, [data-disabled]):hover,
+        &[data-selected] {
+            @include background(primary-40);
+        }
+
+        &[data-disabled],
+        &[data-disabled] span {
+            @include typography(primary-30);
+
+            cursor: default;
+        }
+
+        &[data-hidden] {
+            @include visibility(none);
+        }
+
+        &[data-id="w-no-results"] {
+            @include layout(h-center);
+            cursor: default;
+
+            &:hover {
+                @include background(transparent);
+            }
+        }
+
+        &.title {
+            @include typography(md, primary-20);
+            @include spacing(m0);
+            
+            padding-bottom: 0;
+            
+            &:not(:first-child) {
+                @include border(top, primary-50);
+            }
+        }
+
+        svg {
+            @include size(18px);
+            pointer-events: none;
+        }
+
+        a,
+        div {
+            @include layout(flex, sm, v-center);
+            @include typography(none);
+            flex: 1;
+        }
+
+        div {
+            pointer-events: none;
+        }
+
+        span {
+            @include typography(md, primary-20);
+            pointer-events: none;
+        }
+    }
+}
+
+.container {
+    @include border-radius(md);
+    @include border(primary-50);
+
+    input {
+        @include border(top, 0);
+        @include border(left, 0);
+        @include border(right, 0);
+    }
+}

package/components/List/list.ts

@@ -0,0 +1,37 @@
+export type ListEventType = {
+    value: string
+    name: string
+    list: HTMLUListElement
+}
+
+export type ListProps = {
+    showSearchBar?: boolean
+    showSearchBarIcon?: boolean
+    searchBarPlaceholder?: string
+    noResultsLabel?: string
+    maxHeight?: string
+    id?: string
+    className?: string
+    wrapperClassName?: string
+    itemGroups: {
+        title?: string
+        items: {
+            name: string
+            value?: string
+            href?: string
+            target?: '_self' | '_blank' | '_parent' | '_top' | '_unfencedTop'
+            selected?: boolean
+            disabled?: boolean
+            icon?: string
+            subText?: string
+        }[]
+    }[]
+}
+
+export type SvelteListProps = {
+    onSelect?: (event: ListEventType) => void
+} & ListProps
+
+export type ReactListProps = {
+    onSelect?: (event: ListEventType) => void
+} & ListProps

package/components/Menu/Menu.astro

@@ -1,5 +1,6 @@
 ---
 import type { MenuProps } from './menu'
+
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
 
 import styles from './menu.module.scss'
@@ -107,5 +108,5 @@ const wrapMenu = (logo?.url || logo?.html) && items?.length && Astro.slots.has('
             header.dataset.active = header.dataset.active === 'true'
                 ? 'false'
                 : 'true'
-    })
+        })
 </script>

package/components/Menu/Menu.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import type { MenuProps } from './menu'
+
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
-    import styles from './menu.module.scss'
     import { classNames } from '../../utils/classNames'
 
+    import styles from './menu.module.scss'
+
     export let items: MenuProps['items'] = []
     export let logo: MenuProps['logo'] = null
     export let centerLogo: MenuProps['centerLogo'] = false
@@ -47,7 +49,7 @@
                     {@html logo.html}
                 </a>
             {/if}
-        
+
             {#if items?.length}
                 <ul>
                     {#each items as item}
@@ -64,7 +66,7 @@
                 </ul>
             {/if}
         </ConditionalWrapper>
-    
+
         {#if items?.length}
             <button class={styles.hamburger} on:click={toggleMenu}>
                 <span class={styles.meat}></span>
@@ -73,7 +75,7 @@
                 <span class={styles.meat}></span>
             </button>
         {/if}
-            
+
         {#if centerLogo && logo?.html}
             <a href="/" aria-label={logo.alt || 'Logo'}>
                 {@html logo.html}
@@ -90,7 +92,7 @@
                 />
             </a>
         {/if}
-    
+
         <slot />
     </div>
 </header>