@nuvia-ui/components 4.0.1

package/src/ds-switch/ds-switch.stories.js

@@ -0,0 +1,145 @@
+import './ds-switch.js';
+
+export default {
+    title: 'Components/Switch',
+    component: 'ds-switch',
+    tags: ['autodocs'],
+    argTypes: {
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        label: { control: 'text', description: 'Block-level field label (above switch)' },
+        info: { control: 'text', description: 'Info tooltip text' },
+        statusLabel: { control: 'text', description: 'Inline state description next to track' },
+        helpText: { control: 'text', description: 'Helper text below switch' },
+        errorText: { control: 'text', description: 'Error text (shown when validationStatus="error")' },
+        standalone: { control: 'boolean' },
+        required: { control: 'boolean' },
+        validationStatus: {
+            control: 'select',
+            options: [undefined, 'error'],
+            description: 'Validation state of the switch'
+        },
+        labelPosition: {
+            control: 'select',
+            options: ['top', 'inline-start']
+        },
+        labelWidth: { control: 'text' }
+    }
+};
+
+const Template = (args) => {
+    const el = document.createElement('ds-switch');
+    Object.keys(args).forEach(key => {
+        // Convert camelCase to kebab-case for attributes
+        const attrName = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+        if (args[key] !== undefined && args[key] !== null) {
+            if (typeof args[key] === 'boolean') {
+                if (args[key]) el.setAttribute(attrName, '');
+                else el.removeAttribute(attrName);
+            } else {
+                el.setAttribute(attrName, args[key]);
+            }
+        }
+    });
+    return el;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    statusLabel: 'Toggle setting'
+};
+
+export const InlineLabel = Template.bind({});
+InlineLabel.args = {
+    label: 'Setting',
+    labelPosition: 'inline-start',
+    labelWidth: '150px',
+    statusLabel: 'Enabled',
+    checked: true,
+    info: 'This label is positioned inline'
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+    statusLabel: 'Active state',
+    checked: true
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+    label: 'Notificações',
+    statusLabel: 'Ativado',
+    checked: true
+};
+
+export const WithLabelAndInfo = Template.bind({});
+WithLabelAndInfo.args = {
+    label: 'Notificações por Email',
+    info: 'Recebe alertas e novidades na tua caixa de entrada',
+    statusLabel: 'Ativado',
+    checked: true
+};
+
+export const WithHelpText = Template.bind({});
+WithHelpText.args = {
+    label: 'Marketing',
+    statusLabel: 'Ativado',
+    helpText: 'Recebe promoções e ofertas especiais',
+    checked: true
+};
+
+export const WithErrorText = Template.bind({});
+WithErrorText.args = {
+    label: 'Termos e Condições',
+    statusLabel: 'Desativado',
+    errorText: 'Deves aceitar os termos para continuar',
+    validationStatus: 'error'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    statusLabel: 'Disabled switch',
+    disabled: true
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+    statusLabel: 'Disabled active switch',
+    disabled: true,
+    checked: true
+};
+
+export const Standalone = Template.bind({});
+Standalone.args = {
+    standalone: true,
+    checked: true
+};
+
+export const LongLabel = Template.bind({});
+LongLabel.args = {
+    statusLabel: 'This is a switch with a very long label that demonstrates how it aligns with the track in multiline scenarios'
+};
+LongLabel.decorators = [
+    (Story) => {
+        const div = document.createElement('div');
+        div.style.width = '200px';
+        div.appendChild(Story());
+        return div;
+    }
+];
+
+export const ErrorUnchecked = Template.bind({});
+ErrorUnchecked.args = {
+    statusLabel: 'Error state (unchecked)',
+    validationStatus: 'error',
+    errorText: 'Este campo é obrigatório'
+};
+
+export const ErrorChecked = Template.bind({});
+ErrorChecked.args = {
+    statusLabel: 'Error state (checked)',
+    validationStatus: 'error',
+    errorText: 'Valor inválido selecionado',
+    checked: true
+};

package/src/ds-switch/ds-switch.test.js

@@ -0,0 +1,226 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './ds-switch.js';
+
+describe('ds-switch', () => {
+    let container;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        container.remove();
+    });
+
+    it('renders with default values', async () => {
+        container.innerHTML = '<ds-switch></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.checked).toBe(false);
+        expect(element.disabled).toBe(false);
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('role')).toBe('switch');
+    });
+
+    it('renders statusLabel when provided', async () => {
+        container.innerHTML = '<ds-switch status-label="Test Label"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const statusLabel = element.shadowRoot.querySelector('.status-label');
+        expect(statusLabel).toBeTruthy();
+        expect(statusLabel.textContent).toBe('Test Label');
+    });
+
+    it('renders block-level label when provided', async () => {
+        container.innerHTML = '<ds-switch label="Field Label"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const labelRow = element.shadowRoot.querySelector('.label-row');
+        expect(labelRow).toBeTruthy();
+        const label = labelRow.querySelector('label');
+        expect(label.textContent).toBe('Field Label');
+    });
+
+    it('renders helpText when provided', async () => {
+        container.innerHTML = '<ds-switch help-text="Some help text"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const message = element.shadowRoot.querySelector('.field-message');
+        expect(message).toBeTruthy();
+        expect(message.textContent).toContain('Some help text');
+    });
+
+    it('renders errorText only when validationStatus is error', async () => {
+        container.innerHTML = '<ds-switch error-text="Error msg" validation-status="error"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const message = element.shadowRoot.querySelector('.field-message--error');
+        expect(message).toBeTruthy();
+        expect(message.textContent).toContain('Error msg');
+    });
+
+    it('does not render errorText when validationStatus is not error', async () => {
+        container.innerHTML = '<ds-switch error-text="Error msg"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const errorMessage = element.shadowRoot.querySelector('.field-message--error');
+        expect(errorMessage).toBeFalsy();
+    });
+
+    it('reflects checked property to attribute and aria-checked', async () => {
+        container.innerHTML = '<ds-switch checked></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.hasAttribute('checked')).toBe(true);
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.checked).toBe(true);
+        expect(input.getAttribute('aria-checked')).toBe('true');
+    });
+
+    it('handles click events to toggle state', async () => {
+        container.innerHTML = '<ds-switch></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.switch-row');
+
+        // Click to check
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(true);
+
+        // Click to uncheck
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(false);
+    });
+
+    it('dispatches change event on interaction', async () => {
+        container.innerHTML = '<ds-switch></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.switch-row');
+
+        let eventFired = false;
+        let eventDetail = null;
+
+        element.addEventListener('change', (e) => {
+            eventFired = true;
+            eventDetail = e.detail;
+        });
+
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(eventFired).toBe(true);
+        expect(eventDetail.checked).toBe(true);
+    });
+
+    it('does not toggle when disabled', async () => {
+        container.innerHTML = '<ds-switch disabled></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const wrapper = element.shadowRoot.querySelector('.switch-row');
+
+        wrapper.click();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.checked).toBe(false);
+    });
+
+    it('sets name and value on internal input', async () => {
+        container.innerHTML = '<ds-switch name="test-switch" value="yes"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.name).toBe('test-switch');
+        expect(input.value).toBe('yes');
+    });
+
+    it('uses aria-label from host if provided', async () => {
+        container.innerHTML = '<ds-switch aria-label="Toggle dark mode"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(input.getAttribute('aria-label')).toBe('Toggle dark mode');
+    });
+
+
+    it('reflects validationStatus property to attribute', async () => {
+        container.innerHTML = '<ds-switch validation-status="error"></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.getAttribute('validation-status')).toBe('error');
+        expect(element.validationStatus).toBe('error');
+    });
+
+    it('toggle() method inverts checked state', async () => {
+        container.innerHTML = '<ds-switch></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.checked).toBe(false);
+
+        element.toggle();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(true);
+
+        element.toggle();
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(element.checked).toBe(false);
+    });
+
+    it('toggle() does not work when disabled', async () => {
+        container.innerHTML = '<ds-switch disabled></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        element.toggle();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(element.checked).toBe(false);
+    });
+
+    it('toggle() dispatches change event', async () => {
+        container.innerHTML = '<ds-switch></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        let eventFired = false;
+        element.addEventListener('change', () => {
+            eventFired = true;
+        });
+
+        element.toggle();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        expect(eventFired).toBe(true);
+    });
+
+    it('focus() method focuses the input', async () => {
+        container.innerHTML = '<ds-switch></ds-switch>';
+        const element = container.querySelector('ds-switch');
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        element.focus();
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const input = element.shadowRoot.querySelector('input');
+        expect(document.activeElement).toBe(element);
+        expect(element.shadowRoot.activeElement).toBe(input);
+    });
+});

package/src/ds-switch/index.js

@@ -0,0 +1 @@
+export { DsSwitch } from './ds-switch.js';