@bspk/ui-ngx 0.0.1 → 0.0.2

package/src/lib/button/button.scss

@@ -1,225 +0,0 @@
-[data-bspk='button'] {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-sizing-02);
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    text-decoration: none;
-    width: fit-content;
-    font-family: var(--typeface);
-
-    [data-touch-target] {
-        min-width: var(--spacing-sizing-12);
-        min-height: var(--spacing-sizing-12);
-    }
-
-    &[data-width='hug'] {
-        width: fit-content;
-    }
-
-    &[data-width='fill'] {
-        width: 100%;
-    }
-
-    &[data-size='x-small'] {
-        font-size: var(--typography-size-xs);
-        line-height: var(--typography-line-height-lh-1);
-        height: var(--spacing-sizing-06);
-        min-width: var(--spacing-sizing-06);
-        gap: var(--spacing-sizing-02);
-
-        &:has([data-button-label]),
-        &[data-override] {
-            padding: 0 var(--spacing-sizing-02);
-        }
-
-        [data-button-icon] {
-            width: var(--spacing-sizing-04);
-            height: var(--spacing-sizing-04);
-        }
-    }
-
-    &[data-size='small'] {
-        font-size: var(--typography-size-sm);
-        line-height: var(--typography-line-height-lh-2);
-        height: var(--spacing-sizing-08);
-        min-width: var(--spacing-sizing-08);
-
-        &:has([data-button-label]),
-        &[data-override] {
-            padding: 6px var(--spacing-sizing-04);
-        }
-
-        [data-button-icon] {
-            width: var(--spacing-sizing-05);
-            height: var(--spacing-sizing-05);
-        }
-    }
-
-    &[data-size='medium'] {
-        font-size: var(--typography-size-base);
-        line-height: var(--typography-line-height-lh-2);
-        height: var(--spacing-sizing-10);
-        min-width: var(--spacing-sizing-10);
-
-        &:has([data-button-label]),
-        &[data-override] {
-            padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
-        }
-
-        [data-button-icon] {
-            width: var(--spacing-sizing-05);
-            height: var(--spacing-sizing-05);
-        }
-    }
-
-    &[data-size='large'] {
-        font-size: var(--typography-size-bp-md);
-        line-height: var(--typography-line-height-lh-4);
-        height: var(--spacing-sizing-12);
-        min-width: var(--spacing-sizing-12);
-
-        &:has([data-button-label]),
-        &[data-override] {
-            padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
-        }
-
-        [data-button-icon] {
-            width: var(--spacing-sizing-06);
-            height: var(--spacing-sizing-06);
-        }
-    }
-
-    &[disabled] {
-        cursor: not-allowed;
-    }
-
-    [data-button-icon] {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    [data-button-label] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    &[data-variant='primary'] {
-        --primary-background: var(--surface-brand-primary);
-
-        background-color: var(--primary-background);
-        color: var(--foreground-brand-on-primary);
-        border-radius: var(--button-border-radius);
-
-        &[disabled] {
-            color: var(--foreground-neutral-disabled-on-surface);
-            background: var(--interactions-disabled-opacity);
-        }
-
-        &:not([disabled]) {
-            [data-pseudo='hover'] > &,
-            &:hover {
-                background:
-                    linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),
-                    linear-gradient(var(--primary-background), var(--primary-background));
-            }
-
-            [data-pseudo='active'] > &,
-            &:active {
-                background:
-                    linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),
-                    linear-gradient(var(--primary-background), var(--primary-background));
-            }
-
-            [data-pseudo='focus'] > &,
-            &:focus-visible {
-                outline: solid 2px var(--stroke-neutral-focus);
-                isolation: isolate;
-            }
-        }
-
-        &[data-destructive] {
-            &:not([disabled]) {
-                --primary-background: var(--status-error);
-
-                color: var(--foreground-brand-on-primary);
-            }
-        }
-    }
-
-    &[data-variant='secondary'] {
-        border: solid var(--button-border-width) var(--stroke-neutral-base);
-        border-radius: var(--button-border-radius);
-        color: var(--foreground-neutral-on-surface-variant-01);
-
-        &[disabled] {
-            color: var(--foreground-neutral-disabled-on-surface);
-            border: solid var(--button-border-width) var(--stroke-neutral-disabled-light);
-        }
-
-        &:not([disabled]) {
-            [data-pseudo='hover'] > &,
-            &:hover {
-                background-color: var(--interactions-neutral-hover-opacity);
-            }
-
-            [data-pseudo='active'] > &,
-            &:active {
-                background-color: var(--interactions-neutral-press-opacity);
-            }
-
-            [data-pseudo='focus'] > &,
-            &:focus-visible {
-                outline: solid 2px var(--stroke-neutral-focus);
-                isolation: isolate;
-            }
-        }
-
-        &[data-destructive] {
-            &:not([disabled]) {
-                background: transparent;
-                color: var(--status-error);
-                border: solid var(--button-border-width) var(--status-error);
-            }
-        }
-    }
-
-    &[data-variant='tertiary'] {
-        background: transparent;
-        color: var(--foreground-neutral-on-surface-variant-01);
-
-        &[disabled] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-
-        &:not([disabled]) {
-            [data-pseudo='hover'] > &,
-            &:hover {
-                background: var(--interactions-neutral-hover-opacity);
-            }
-
-            [data-pseudo='active'] > &,
-            &:active {
-                background: var(--interactions-neutral-press-opacity);
-            }
-
-            [data-pseudo='focus'] > &,
-            &:focus-visible {
-                outline: solid 2px var(--stroke-neutral-focus);
-                isolation: isolate;
-            }
-        }
-
-        &[data-destructive] {
-            &:not([disabled]) {
-                color: var(--status-error);
-            }
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/button/button.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UIButton } from './button';
-
-describe('Button', () => {
-    let fixture: ComponentFixture<UIButton>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UIButton],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(UIButton);
-        fixture.componentRef.setInput('label', 'Example label');
-
-        fixture.detectChanges();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});

package/src/lib/button/button.ts

@@ -1,236 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-    Component,
-    Output,
-    EventEmitter,
-    ElementRef,
-    ChangeDetectionStrategy,
-    ViewEncapsulation,
-    input,
-    viewChild,
-} from '@angular/core';
-
-import { BspkIcon } from '../../types/bspk-icon';
-
-import { ButtonSize } from '../../types/common';
-import { UIIcon } from '../icon';
-import { UITooltipDirective } from '../tooltip';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-export type ButtonWidth = 'fill' | 'hug';
-export type IconType = BspkIcon;
-
-/**
- * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
- *
- * @example
- *     ```html
- *     <bspk-button
- *       label="Click Me"
- *       size="medium"
- *       variant="primary"
- *       (onClick)="handleClick($event)"
- *       icon="iconTemplate">
- *     </bspk-button>
- *     ```;
- *
- * @name Button
- * @phase Dev
- */
-@Component({
-    selector: 'ui-button',
-    template: `<button
-        [ui-tooltip]="tooltipLabel"
-        #buttonElement
-        [type]="type()"
-        [attr.aria-label]="ariaLabel() || label()"
-        [attr.data-bspk]="'button'"
-        [attr.data-bspk-owner]="owner() || null"
-        [attr.data-destructive]="destructive() || null"
-        [attr.data-size]="size()"
-        [attr.data-touch-target-parent]="true"
-        [attr.data-variant]="variant()"
-        [attr.data-width]="width()"
-        [disabled]="disabled() || null"
-        [class]="buttonClasses"
-        (click)="handleClick($event)"
-        (focus)="handleFocus($event)"
-        (blur)="handleBlur($event)"
-        (mouseover)="handleMouseOver($event)"
-        (mouseleave)="handleMouseLeave($event)"
-        [style]="style()">
-        @if (!label()) {
-            <ng-content></ng-content>
-        } @else {
-            @if (icon()) {
-                <span [attr.aria-hidden]="true" [attr.data-button-icon]="true">
-                    <ui-icon [icon]="icon()!"></ui-icon>
-                </span>
-            }
-            @if (shouldShowLabel) {
-                <span [attr.data-button-label]="true">{{ label() }}</span>
-            }
-        }
-        <span [attr.data-touch-target]="true"></span>
-    </button>`,
-    styleUrls: ['./button.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [CommonModule, UIIcon, UITooltipDirective],
-    encapsulation: ViewEncapsulation.None,
-    host: {
-        style: 'display: contents;',
-    },
-})
-export class UIButton {
-    /** Event emitted when the button is clicked. */
-    @Output() onClick = new EventEmitter<MouseEvent>();
-
-    /** Event emitted when the button receives focus. */
-    @Output() onFocus = new EventEmitter<FocusEvent>();
-
-    /** Event emitted when the button loses focus. */
-    @Output() onBlur = new EventEmitter<FocusEvent>();
-
-    /** Event emitted when mouse enters the button. */
-    @Output() onMouseOver = new EventEmitter<MouseEvent>();
-
-    /** Event emitted when mouse leaves the button. */
-    @Output() onMouseLeave = new EventEmitter<MouseEvent>();
-
-    readonly buttonElement = viewChild.required<ElementRef<HTMLButtonElement>>('buttonElement');
-
-    readonly style = input<string>();
-
-    /**
-     * The label of the button.
-     *
-     * @required
-     */
-    readonly label = input.required<string>();
-
-    /** Use only for custom buttons. The aria-label of the button for accessibility purposes. */
-    readonly ariaLabel = input<string>();
-
-    /**
-     * The icon of the button.
-     *
-     * Should be a SVG from the BSPK icon library.
-     */
-    readonly icon = input<IconType | undefined>();
-
-    /**
-     * When true the button label is hidden and only the icon is shown. When label isn't showing it is used in a tooltip
-     * and as the aria-label prop.
-     *
-     * Ignored if `icon` is not provided.
-     *
-     * @default false
-     */
-    readonly iconOnly = input(false);
-
-    /**
-     * The function of the button is destructive.
-     *
-     * @default false
-     */
-    readonly destructive = input(false);
-
-    /**
-     * The size of the button.
-     *
-     * @default medium
-     */
-    readonly size = input<ButtonSize>('medium');
-
-    /**
-     * The color variant of the button.
-     *
-     * @default primary
-     */
-    readonly variant = input<ButtonVariant>('primary');
-
-    /**
-     * The width of the button.
-     *
-     * @default hug
-     */
-    readonly width = input<ButtonWidth>('hug');
-
-    /** The tool tip text that appears when hovered. */
-    readonly tooltip = input<string>();
-
-    /**
-     * Whether the button is disabled.
-     *
-     * @default false
-     */
-    readonly disabled = input(false);
-
-    /**
-     * The button type attribute.
-     *
-     * @default button
-     */
-    readonly type = input<'button' | 'reset' | 'submit'>('button');
-
-    /** Owner identifier for tracking/analytics. */
-    readonly owner = input<string>();
-
-    /** Additional CSS classes to apply. */
-    readonly class = input<string>();
-    /** Custom content template to override default button content. Not recommended - use for special cases only. */
-
-    get nativeElement(): HTMLButtonElement {
-        return this.buttonElement().nativeElement!;
-    }
-
-    get shouldShowLabel(): boolean {
-        return !this.iconOnly();
-    }
-
-    get tooltipLabel(): string | undefined {
-        return this.tooltip() || (this.iconOnly() ? this.label() : undefined);
-    }
-
-    get buttonClasses(): string {
-        const classes: string[] = [];
-
-        if (this.class()) {
-            classes.push(this.class()!);
-        }
-
-        return classes.join(' ');
-    }
-
-    handleClick(event: MouseEvent): void {
-        if (!this.disabled()) {
-            this.onClick.emit(event);
-        }
-    }
-
-    handleFocus(event: FocusEvent): void {
-        if (!this.disabled()) {
-            this.onFocus.emit(event);
-        }
-    }
-
-    handleBlur(event: FocusEvent): void {
-        if (!this.disabled()) {
-            this.onBlur.emit(event);
-        }
-    }
-
-    handleMouseOver(event: MouseEvent): void {
-        if (!this.disabled()) {
-            this.onMouseOver.emit(event);
-        }
-    }
-
-    handleMouseLeave(event: MouseEvent): void {
-        if (!this.disabled()) {
-            this.onMouseLeave.emit(event);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/button/example.ts

@@ -1,168 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { sendSnackbar } from '../../utils/send-snackbar';
-import { IconBarn } from '../icons/barn';
-import { IconBox } from '../icons/box';
-import { IconBrail } from '../icons/brail';
-import { IconCloud } from '../icons/cloud';
-import { IconGTranslate } from '../icons/g-translate';
-import { IconWarningFill } from '../icons/warning-fill';
-import { UIButton } from './button';
-
-@Component({
-    selector: 'ui-button-example',
-    standalone: true,
-    imports: [CommonModule, UIButton],
-    template: `
-        <h2>Button</h2>
-
-        <h3>Default</h3>
-        <p>only click & the required label prop set</p>
-        <ui-button (click)="handleClick('Default')" label="Default" />
-
-        <h3>Primary</h3>
-        <ui-button
-            (click)="handleClick('Primary')"
-            label="Example Label"
-            size="large"
-            variant="primary"
-            [icon]="iconGTranslate" />
-
-        <h3>Secondary</h3>
-        <ui-button
-            (click)="handleClick('Secondary')"
-            label="Example Label"
-            size="medium"
-            variant="secondary"
-            [icon]="iconBrail" />
-
-        <h3>Tertiary</h3>
-        <ui-button
-            (click)="handleClick('Tertiary')"
-            label="Example Label"
-            size="small"
-            variant="tertiary"
-            [icon]="iconBarn" />
-
-        <h3>Primary with Tooltip</h3>
-        <ui-button
-            (click)="handleClick('Primary with Tooltip')"
-            label="Primary with Tooltip"
-            size="large"
-            [icon]="iconCloud"
-            tooltip="Primary with Tooltip" />
-
-        <h3>Destructive with Tooltip</h3>
-        <ui-button
-            (click)="handleClick('Destructive with Tooltip')"
-            label="Destructive with Tooltip"
-            [icon]="iconWarningFill"
-            [destructive]="true"
-            tooltip="Destructive with Tooltip" />
-
-        <h3>Destructive iconOnly = true</h3>
-
-        <ui-button
-            (click)="handleClick('Destructive iconOnly = true')"
-            label="Destructive test"
-            [icon]="iconWarningFill"
-            [iconOnly]="true"
-            [destructive]="true" />
-
-        <h3>Disabled</h3>
-        <ui-button (click)="handleClick('Disabled')" label="Disabled test" [icon]="iconWarningFill" [disabled]="true" />
-
-        <h3>Disabled iconOnly = true</h3>
-        <ui-button
-            (click)="handleClick('Disabled iconOnly = true')"
-            label="Destructive test"
-            [icon]="iconWarningFill"
-            [iconOnly]="true"
-            [disabled]="true" />
-
-        <h3>Disabled & destructive = true</h3>
-        <p>should visually see disabled and not destructive</p>
-        <ui-button
-            (click)="handleClick('Disabled & Destructive')"
-            label="Disabled & Destructive Test"
-            [icon]="iconWarningFill"
-            [disabled]="true"
-            [destructive]="true" />
-
-        <h3>Primary Disabled & destructive = true</h3>
-        <p>should visually see disabled and not destructive</p>
-        <ui-button
-            (click)="handleClick('Primary Disabled & Destructive')"
-            label="Disabled & Destructive Test"
-            variant="primary"
-            [icon]="iconWarningFill"
-            [disabled]="true"
-            [destructive]="true" />
-
-        <h3>Secondary Disabled & destructive = true</h3>
-        <p>should visually see disabled and not destructive</p>
-        <ui-button
-            (click)="handleClick('Secondary Disabled & Destructive')"
-            label="Disabled & Destructive Test"
-            variant="secondary"
-            [icon]="iconWarningFill"
-            [disabled]="true"
-            [destructive]="true" />
-
-        <h3>Tertiary Disabled & destructive = true</h3>
-        <p>should visually see disabled and not destructive</p>
-        <ui-button
-            (click)="handleClick('Tertiary Disabled & Destructive')"
-            label="Disabled & Destructive Test"
-            variant="tertiary"
-            [icon]="iconWarningFill"
-            [disabled]="true"
-            [destructive]="true" />
-
-        <h3>width = fill</h3>
-        <p>should visually see button fill the width of 500px parent width</p>
-        <div style="width: 500px">
-            <ui-button (click)="handleClick('Example Label')" label="Example Label" [icon]="iconBox" width="fill" />
-        </div>
-
-        <h3>Custom Content</h3>
-        <ui-button label="" (click)="handleClick('Custom Content')" style="padding: 0 var(--spacing-sizing-03)">
-            <svg
-                width="16"
-                focusable="false"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor">
-                <path
-                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path>
-            </svg>
-            Custom Content Example</ui-button
-        >
-
-        <h3>Custom Icon</h3>
-        <ui-button (click)="handleClick('Custom Icon')" tooltip="hello world example" label="" variant="secondary">
-            <svg
-                focusable="false"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor">
-                <path
-                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path>
-            </svg>
-        </ui-button>
-    `,
-})
-export class UIButtonExample {
-    protected readonly iconGTranslate = IconGTranslate;
-    protected readonly iconBrail = IconBrail;
-    protected readonly iconBarn = IconBarn;
-    protected readonly iconCloud = IconCloud;
-    protected readonly iconWarningFill = IconWarningFill;
-    protected readonly iconBox = IconBox;
-
-    protected handleClick(name: string): void {
-        sendSnackbar(`${name} Button clicked!`);
-    }
-}

package/src/lib/button/index.ts

@@ -1 +0,0 @@
-export * from './button';

package/src/lib/card/card.scss

@@ -1,18 +0,0 @@
-[data-bspk='card'] {
-    display: block;
-    background: var(--surface-neutral-t1-base);
-    border-radius: var(--radius-md);
-    overflow: hidden;
-
-    &[data-variant='outlined'] {
-        border: solid 1px var(--stroke-neutral-low);
-    }
-
-    &[data-variant='elevated'] {
-        box-shadow:
-            0 1px 2px 0 var(--shadow-32),
-            0 1px 3px 1px var(--shadow-15);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/lib/card/card.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { hasNoBasicA11yIssues } from '../../testutils/hasNoBasicA11yIssues';
-import { UICard } from './card';
-
-describe('UICard', () => {
-    let component: UICard;
-    let fixture: ComponentFixture<UICard>;
-
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            imports: [UICard],
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(UICard);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-
-    it('should have no basic a11y issues', async () => await hasNoBasicA11yIssues(fixture));
-});