webcoreui 0.0.12 → 0.2.0

package/components/Table/Table.tsx

@@ -12,6 +12,7 @@ const Table = ({
     striped,
     offsetStripe,
     compact,
+    maxHeight,
     className
 }: TableProps) => {
     const classes = classNames([
@@ -20,11 +21,16 @@ const Table = ({
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
+        maxHeight && styles.scroll,
         className
     ])
 
+    const styleVariables = {
+        ...(maxHeight && { 'max-height': maxHeight })
+    } as React.CSSProperties
+
     return (
-        <div className={classes}>
+        <div className={classes} style={styleVariables}>
             <table>
                 {headings?.length && (
                     <thead>

package/components/Table/table.module.scss

@@ -1,38 +1,34 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .table {
-    overflow-x: auto;
+    @include visibility(auto);
 
     table {
-        width: 100%;
+        @include size('w100%');
+        @include typography(left);
+
         border-collapse: collapse;
-        text-align: left;
-        font-size: 16px;
     }
 
     thead,
     tfoot {
-        font-family: Bold;
+        @include typography(bold);
     }
 
     th,
     td {
-        padding: 5px 10px;
+        @include spacing(py-xs, px-sm);
     }
 
     thead,
     tr {
-        border-bottom: 1px solid var(--w-color-primary-50);
+        @include border(bottom, primary-50);
 
         &:last-child {
-            border-bottom: 0;
+            @include border(bottom, 0);
         }
     }
 
-    a {
-        text-decoration: underline;
-    }
-
     tfoot,
     &.hover tr:hover,
     &.striped-rows tbody tr:nth-child(odd),
@@ -40,25 +36,35 @@
     &.striped-columns td:nth-child(odd),
     &.striped-columns.offset td:nth-child(even),
     &.hover.striped-rows.offset tbody tr:nth-child(odd):hover {
-        background: var(--w-color-primary-60);
+        @include background(primary-60);
     }
 
     &.striped-rows tr,
     &.striped-columns tr,
     &.striped-columns thead {
-        border-bottom: 0;
+        @include border(bottom, 0);
     }
 
     &.striped-rows.offset tbody tr:nth-child(odd),
     &.striped-rows.offset tfoot,
     &.striped-columns.offset td:nth-child(odd),
     &.striped-columns tfoot {
-        background: transparent;
+        @include background(transparent);
     }
 
     &.compact {
         th, td {
-            padding: 3px 10px;
+            @include spacing(py-xxs, px-sm);
+        }
+    }
+
+    &.scroll {
+        @include spacing(pr-sm);
+
+        thead {
+            @include position(sticky, t0);
+            @include background(primary-70);
+            box-shadow: 0 .5px 0 var(--w-color-primary-50);
         }
     }
 }

package/components/Table/table.ts

@@ -6,5 +6,6 @@ export type TableProps = {
     striped?: 'column' | 'row' | null
     offsetStripe?: boolean
     compact?: boolean
+    maxHeight?: number
     className?: string
 }

package/components/Tabs/Tabs.astro

@@ -63,7 +63,6 @@ const classes = [
 
                 const tabs = target.parentElement?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>
 
-                // TODO - update logic
                 Array.from(tabs).forEach((tab: any) => {
                     tab.dataset.active = 'false'
 

package/components/Tabs/tabs.module.scss

@@ -1,60 +1,63 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .tabs {
     &.boxed .items,
     &.outline .items {
-        background: var(--w-color-primary-50);
-        border-radius: 5px;
-        padding: 5px;
-        width: max-content;
+        @include background(primary-50);
+        @include border-radius(md);
+        @include spacing(p-xs);
+        @include size(wmax-content);
+        @include border(0);
 
         button {
-            @include Transition();
-            border-radius: 5px;
-            padding: 10px;
+            @include transition();
+            @include border-radius(md);
+            @include spacing(p-sm);
 
             &[data-active="true"] {
-                border: 0;
-                background: var(--w-color-primary-70);
+                @include border(0);
+                @include background(primary-70);
                 padding-bottom: 10px;
             }
         }
     }
 
     &.outline .items {
-        background: transparent;
-        border: 1px solid var(--w-color-primary-50);
+        @include background(transparent);
+        @include border(primary-50);
 
         button {
             margin-bottom: 0;
 
             &[data-active="true"] {
-                background: var(--w-color-primary-50);
+                @include background(primary-50);
             }
         }
     }
 
     &.even .items button {
+        @include layout(h-center);
         flex: 1;
-        justify-content: center;
     }
 
     &.vertical {
-        display: flex;
-        gap: 20px;
+        @include layout(flex, default);
 
         &.boxed .items button,
         &.outline .items button {
-            border-bottom: 0;
+            @include border(bottom, 0);
+        }
+
+        &:not(.outline) .items {
+            @include border(0);
         }
         
         .items {
-            flex-direction: column;
-            gap: 5px;
+            @include layout(column, xs);
             
             button {
-                padding: 10px;
-                border-bottom: 2px solid var(--w-color-primary-50);
+                @include spacing(p-sm);
+                @include border(2px, bottom, primary-50);
 
                 &[data-active="true"] {
                     padding-bottom: 10px;
@@ -63,71 +66,65 @@
         }
 
         .content {
-            margin-top: 0;
+            @include spacing(m0);
         }
     }
 
     .wrapper {
-        overflow: auto;
+        @include visibility(auto);
     }
 
     .items {
-        border-bottom: 2px solid var(--w-color-primary-50);
-        display: flex;
-        gap: 10px;
+        @include border(2px, bottom, primary-50);
+        @include layout(flex, sm);
 
         button {
-            @include Transition(color);
-            background: transparent;
+            @include transition(color);
+            @include background(transparent);
+            @include typography(default, primary-20);
+            @include border(0);
+            @include spacing(p-md);
+            @include layout(flex, v-center, sm);
+
             cursor: pointer;
-            color: var(--w-color-primary);
-            border: 0;
-            font-size: 16px;
-            padding: 0;
-            margin-bottom: -2px;
-            padding: 15px 15px;
-            color: var(--w-color-primary-20);
-            display: flex;
-            align-items: center;
-            gap: 10px;
             flex-shrink: 0;
 
             svg {
+                @include size(20px);
                 pointer-events: none;
-                width: 20px;
-                height: 20px;
             }
 
             &[disabled] {
-                color: var(--w-color-primary-30);
+                @include typography(primary-30);
                 cursor: no-drop;
             }
             
             &[data-active="true"] {
-                color: var(--w-color-primary);
-                border-bottom: 2px solid var(--w-color-primary);
+                @include typography(primary);
+                @include border(2px, bottom, primary);
+
                 padding-bottom: 13px;
             }
         }
     }
 
     .content {
-        margin-top: 20px;
+        @include spacing(mt-default);
     }
 
     [data-tab] {
-        display: none;
+        @include visibility(none);
 
         &[data-active="true"] {
-            display: block;
+            @include visibility(block);
         }
     }
 }
 
-@include Media('xs') {
+@include media('xs') {
     .tabs {
         &.even .items {
-            width: auto;
+            @include size(wauto);
         }
     }
 }

package/components/ThemeSwitcher/ThemeSwitcher.astro

@@ -38,6 +38,7 @@ const buttonClasses = [
         <button
             style={!useIcons ? `background:${theme};` : undefined}
             data-theme={themes[theme]}
+            aria-label={themes[theme]}
             class:list={buttonClasses}
         >
             {index === 0 && <slot name="primaryIcon" />}

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -61,9 +61,10 @@
 >
     {#each Object.keys(themes) as theme, index}
         <button
+            on:click={() => setTheme(toggle ? index : themes[theme])}
             style={!useIcons ? `background:${theme};` : undefined}
             data-active={currentTheme === themes[theme]}
-            on:click={() => setTheme(toggle ? index : themes[theme])}
+            aria-label={themes[theme]}
             class={classNames([
                 styles.switch,
                 useIcons && styles.icons

package/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -70,8 +70,9 @@ const ThemeSwitcher = ({
             {Object.keys(themes as {}).map((theme, index) => (
                 <button
                     key={index}
-                    data-active={currentTheme === themes[theme]}
                     onClick={() => setTheme(toggle ? index : themes[theme])}
+                    data-active={currentTheme === themes[theme]}
+                    aria-label={themes[theme]}
                     style={!useIcons ? { background: theme } : undefined}
                     className={classNames([
                         styles.switch,

package/components/ThemeSwitcher/themeswitcher.module.scss

@@ -1,11 +1,14 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-theme-switcher-size: 20px;
+}
 
 .switcher {
-    display: flex;
-    gap: 10px;
+    @include layout(flex, sm);
 
     &.toggle {
-        position: relative;
+        @include position(relative);
         width: var(--w-theme-switcher-size);
         height: var(--w-theme-switcher-size);
 
@@ -13,37 +16,38 @@
             position: absolute;
 
             &:first-child {
-                z-index: 2;
+                @include layer(overlay);
             }
 
             &:nth-child(2) {
-                z-index: 1;
+                @include layer(fg);
             }
 
             &[data-active="true"] {
-                z-index: 3;
+                @include layer(popup);
             }
         }
     }
 }
 
 .switch {
+    @include border(0);
+    @include border-radius(max);
+    @include position(relative);
+
     width: var(--w-theme-switcher-size);
     height: var(--w-theme-switcher-size);
-    border-radius: 100%;
     cursor: pointer;
-    position: relative;
-    border: 0;
 
     &.icons {
-        @include Transition(opacity);
-        color: var(--w-color-primary);
-        background: transparent;
-        padding: 0;
-        opacity: 0;
+        @include transition(opacity);
+        @include typography(primary);
+        @include background(transparent);
+        @include spacing(p0);
+        @include visibility(0);
 
         &[data-active="true"] {
-            opacity: 1;
+            @include visibility(1);
         }
 
         svg, img {
@@ -54,20 +58,18 @@
     }
 
     &:not(.icons)::after {
-        @include Transition();
+        @include position(absolute, center);
+        @include border(primary);
+        @include border-radius(max);
+        @include layer(bg);
+        @include transition();
+        @include size(0);
+
         content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        border: 1px solid var(--w-color-primary);
-        border-radius: 100%;
-        width: 0;
-        height: 0;
-        z-index: -1;
     }
 
     &[data-active="true"]::after {
+        @include layer(default);
         width: calc(var(--w-theme-switcher-size) + 5px);
         height: calc(var(--w-theme-switcher-size) + 5px);
     }

package/components/Timeline/timeline.module.scss

@@ -1,60 +1,65 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 // (circle width + border * 2) / 2 - line width
 $leftOffset: calc(((25px + 4px) / 2) - 1px);
 $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
 
+body {
+    --w-timeline-color: var(--w-color-primary-50);
+    --w-timeline-text-color: var(--w-color-primary);
+    --w-timeline-counter: decimal;
+}
+
 .timeline {
-    display: flex;
-    gap: 20px;
-    flex-direction: column;
-    padding: 0 0 0 40px;
-    margin: 0;
+    @include layout(flex, default, column);
+    @include spacing(pl-3xl, m0);
+    @include position(relative);
+    @include typography(normal);
+
     list-style-type: none;
     counter-reset: item;
-    position: relative;
 
     &::before {
-        position: absolute;
+        @include position(absolute);
+        @include size(w2px, 'h100%');
+        @include background(var(--w-timeline-color));
+
         content: '';
-        width: 2px;
-        background: var(--w-timeline-color);
-        height: 100%;
         left: $leftOffset
     }
 
-    &.fill li::before {
+    &.fill > li::before {
         content: '';
     }
 
-    &.stroke li::before {
-        background: var(--w-color-primary-70);
+    &.stroke > li::before {
+        @include background(primary-70);
         border: 2px solid var(--w-timeline-color);
     }
 }
 
-@include Media('xs') {
+@include media('xs') {
     .timeline {
         &.alternate {
-            padding: 0;
+            @include spacing(p0);
     
             &::before {
                 left: calc(50% - 1px);
             }
     
-            li {
-                width: 50%;
+            > li {
+                @include size('w50%');
     
                 &:nth-child(odd) {
-                    padding-right: 40px;
+                    @include spacing(pr-3xl);
                 }
     
                 &:nth-child(even) {
+                    @include spacing(pl-3xl);
                     align-self: flex-end;
-                    padding-left: 40px;
     
                     &::before {
-                        left: 25px;
+                        @include position(l25px);
                     }
                 }
     
@@ -64,8 +69,8 @@ $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
             }
         }
     
-        &.centered li:nth-child(odd) {
-            text-align: right;
+        &.centered > li:nth-child(odd) {
+            @include typography(right);
         }
     }
 }

package/components/TimelineItem/TimelineItem.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
-import type { TimelineItemProps } from './timelineitem'
+import type { ReactTimelineItemProps } from './timelineitem'
 
 import styles from './timelineitem.module.scss'
 import { classNames } from '../../utils/classNames'
 
-type ReactTimelineItemProps = {
-    TitleTag?: keyof JSX.IntrinsicElements
-    children: React.ReactNode
-} & Omit<TimelineItemProps, 'titleTag'>
-
 const TimelineItem = ({
     title,
     TitleTag = 'span',

package/components/TimelineItem/timelineitem.module.scss

@@ -1,31 +1,28 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .item {
-    position: relative;
-    font-size: 16px;
+    @include position(relative);
+    @include spacing(m0);
 
     &::before {
+        @include position(absolute, t-5px);
+        @include size(25px);
+        @include border-radius(max);
+        @include background(var(--w-timeline-color));
+        @include typography(md);
+        @include layout(inline-flex, center);
+        @include border(2px, primary-70);
+
         content: counter(item, var(--w-timeline-counter));
         counter-increment: item;
-        position: absolute;
-        top: -5px;
-        width: 25px;
-        height: 25px;
-        border-radius: 100%;
-        background: var(--w-timeline-color);
         color: var(--w-timeline-text-color);
-        font-size: 14px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        border: 2px solid var(--w-color-primary-70);
         margin-left: -40px;
     }
 
     .title {
+        @include typography(bold, lg);
+        @include spacing(mb-sm);
+
         display: block;
-        margin-bottom: 10px;
-        font-family: Bold;
-        font-size: 18px;
     }
 }

package/components/TimelineItem/timelineitem.ts

@@ -3,3 +3,8 @@ export type TimelineItemProps = {
     titleTag?: string
     className?: string
 }
+
+export type ReactTimelineItemProps = {
+    TitleTag?: keyof JSX.IntrinsicElements
+    children: React.ReactNode
+} & Omit<TimelineItemProps, 'titleTag'>

package/components/Toast/toast.module.scss

@@ -1,15 +1,14 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .toast {
-    background: var(--w-color-primary-70);
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
+    @include background(primary-70);
+    @include position(fixed, r20px, b20px);
+    @include layer(header);
+
     transform: translateY(calc(100% + 25px));
-    z-index: 99;
 
     &[data-show] {
-        @include Transition(transform);
+        @include transition(transform);
     }
 
     &[data-show="true"] {
@@ -18,15 +17,15 @@
 
     &[data-position="bottom-left"],
     &[data-position="top-left"] {
+        @include position(l20px);
         right: auto;
-        left: 20px;
     }
 
     &[data-position="top-left"],
     &[data-position="top-right"],
     &[data-position="top-full"] {
+        @include position(t20px);
         bottom: auto;
-        top: 20px;
         transform: translateY(calc(-100% - 25px));
 
         &[data-show="true"] {
@@ -34,11 +33,8 @@
         }
     }
 
-    &[data-position="bottom-full"] {
-        left: 20px;
-    }
-
+    &[data-position="bottom-full"],
     &[data-position="top-full"] {
-        left: 20px;
+        @include position(l20px);
     }
 }

package/components/Toast/toast.ts

@@ -1,7 +1,12 @@
 import type { AlertProps, ReactAlertProps } from '../Alert/alert'
 
 export type ToastProps = {
-    position?: 'bottom-left' | 'top-left' | 'top-right' | null
+    position?: 'bottom-left'
+        | 'top-left'
+        | 'top-right'
+        | 'bottom-full'
+        | 'top-full'
+        | null
     [key: string]: any
 } & AlertProps