WEBDEV-8503 Migrate ia-button to elements

src/elements/ia-button/ia-button-story.ts

@@ -1,24 +1,235 @@
 import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import '@demo/story-template';
 import type { StyleInputSettings } from '@demo/story-components/story-styles-settings';
+import type { PropInputSettings } from '@demo/story-components/story-prop-settings';
 
+import type { IAButton } from './ia-button';
 import './ia-button';
-import '@demo/story-template';
+
+const propInputSettings: PropInputSettings<IAButton>[] = [
+  {
+    label: 'Mode',
+    propertyName: 'mode',
+    defaultValue: 'primary',
+    inputType: 'radio',
+    radioOptions: [
+      'primary',
+      'secondary',
+      'danger',
+      'warning',
+      'disabled',
+      'transparent',
+      'custom',
+      'link',
+      'danger-link',
+    ],
+  },
+  {
+    label: 'Disabled',
+    propertyName: 'disabled',
+    defaultValue: false,
+    inputType: 'radio',
+    radioOptions: [true, false],
+  },
+  {
+    label: 'Loading',
+    propertyName: 'loading',
+    defaultValue: false,
+    inputType: 'radio',
+    radioOptions: [true, false],
+  },
+  {
+    label: 'Loading text',
+    propertyName: 'loadingText',
+    defaultValue: '',
+    inputType: 'text',
+  },
+  {
+    label: 'Type',
+    propertyName: 'type',
+    defaultValue: 'button',
+    inputType: 'radio',
+    radioOptions: ['button', 'submit', 'reset'],
+  },
+];
 
 const styleInputSettings: StyleInputSettings[] = [
   {
-    label: 'Text Color (Primary)',
+    label: 'Button padding',
+    cssVariable: '--ia-theme-button-padding',
+    defaultValue: '0 1.875rem',
+    inputType: 'text',
+  },
+  {
+    label: 'Button width',
+    cssVariable: '--ia-theme-button-width',
+    defaultValue: 'fit-content',
+    inputType: 'text',
+  },
+  {
+    label: 'Button height',
+    cssVariable: '--ia-theme-button-height',
+    defaultValue: '2.25rem',
+    inputType: 'text',
+  },
+  {
+    label: 'Button border width',
+    cssVariable: '--ia-theme-button-border-width',
+    defaultValue: '1px',
+    inputType: 'text',
+  },
+  {
+    label: 'Font',
+    cssVariable: '--ia-theme-base-font-family',
+    defaultValue: "'Helvetica Neue', Helvetica, Arial, sans-serif",
+    inputType: 'text',
+  },
+  {
+    label: 'Transition',
+    cssVariable: '--ia-button-transition',
+    defaultValue: 'all 0.1s ease 0s',
+    inputType: 'text',
+  },
+  {
+    label: 'Text color (primary)',
     cssVariable: '--ia-theme-primary-cta-text-color',
     defaultValue: '#ffffff',
     inputType: 'color',
   },
   {
-    label: 'Background Color (Primary)',
+    label: 'Background color (primary)',
     cssVariable: '--ia-theme-primary-cta-fill',
     defaultValue: '#194880',
     inputType: 'color',
   },
+  {
+    label: 'Border color (primary)',
+    cssVariable: '--ia-theme-primary-cta-border',
+    defaultValue: '#c5d1df',
+    inputType: 'color',
+  },
+  {
+    label: 'Text color (secondary)',
+    cssVariable: '--ia-theme-secondary-cta-text-color',
+    defaultValue: '#ffffff',
+    inputType: 'color',
+  },
+  {
+    label: 'Background color (secondary)',
+    cssVariable: '--ia-theme-secondary-cta-fill',
+    defaultValue: '#333333',
+    inputType: 'color',
+  },
+  {
+    label: 'Border color (secondary)',
+    cssVariable: '--ia-theme-secondary-cta-border',
+    defaultValue: '#666666',
+    inputType: 'color',
+  },
+  {
+    label: 'Text color (danger)',
+    cssVariable: '--ia-theme-danger-cta-text-color',
+    defaultValue: '#ffffff',
+    inputType: 'color',
+  },
+  {
+    label: 'Background color (danger)',
+    cssVariable: '--ia-theme-danger-cta-fill',
+    defaultValue: '#d9534f',
+    inputType: 'color',
+  },
+  {
+    label: 'Border color (danger)',
+    cssVariable: '--ia-theme-danger-cta-border',
+    defaultValue: '#d43f3a',
+    inputType: 'color',
+  },
+  {
+    label: 'Text color (warning)',
+    cssVariable: '--ia-theme-warning-cta-text-color',
+    defaultValue: '#ffffff',
+    inputType: 'color',
+  },
+  {
+    label: 'Background color (warning)',
+    cssVariable: '--ia-theme-warning-cta-fill',
+    defaultValue: '#ee8950',
+    inputType: 'color',
+  },
+  {
+    label: 'Border color (warning)',
+    cssVariable: '--ia-theme-warning-cta-border',
+    defaultValue: '#ec7939',
+    inputType: 'color',
+  },
+  {
+    label: 'Text color (disabled)',
+    cssVariable: '--ia-theme-disabled-cta-text-color',
+    defaultValue: '#ffffff',
+    inputType: 'color',
+  },
+  {
+    label: 'Background color (disabled)',
+    cssVariable: '--ia-theme-disabled-cta-fill',
+    defaultValue: '#666666',
+    inputType: 'color',
+  },
+  {
+    label: 'Border color (disabled)',
+    cssVariable: '--ia-theme-disabled-cta-border',
+    defaultValue: '#999999',
+    inputType: 'color',
+  },
+  {
+    label: 'Text color (custom)',
+    cssVariable: '--ia-button-custom-text-color',
+    defaultValue: '#ffffff',
+    inputType: 'color',
+  },
+  {
+    label: 'Background color (custom)',
+    cssVariable: '--ia-button-custom-fill',
+    defaultValue: '#194880',
+    inputType: 'color',
+  },
+  {
+    label: 'Border color (custom)',
+    cssVariable: '--ia-theme-custom-cta-border',
+    defaultValue: '#c5d1df',
+    inputType: 'color',
+  },
+  {
+    label: 'Text color (custom, on hover)',
+    cssVariable: '--ia-button-custom-active-text-color',
+    defaultValue: '#ffffff',
+    inputType: 'color',
+  },
+  {
+    label: 'Background color (custom, on hover)',
+    cssVariable: '--ia-button-custom-active-fill',
+    defaultValue: '#194880',
+    inputType: 'color',
+  },
+  {
+    label: 'Border color (custom, on hover)',
+    cssVariable: '--ia-button-custom-active-border',
+    defaultValue: '#c5d1df',
+    inputType: 'color',
+  },
+  {
+    label: 'Link color',
+    cssVariable: '--ia-theme-link-color',
+    defaultValue: '#4b64ff',
+    inputType: 'color',
+  },
+  {
+    label: 'Danger color',
+    cssVariable: '--ia-theme-color-danger',
+    defaultValue: '#e51c23',
+    inputType: 'color',
+  },
 ];
 
 @customElement('ia-button-story')
@@ -30,12 +241,11 @@ export class IAButtonStory extends LitElement {
         elementClassName="IAButton"
         .defaultUsageProps=${`@click=\${() => alert('Button clicked!')}`}
         .styleInputData=${{ settings: styleInputSettings }}
+        .propInputData=${{ settings: propInputSettings }}
       >
-        <div slot="demo">
-          <ia-button @click=${() => alert('Button clicked!')}
-            >Click Me</ia-button
-          >
-        </div>
+        <ia-button slot="demo" @click=${() => alert('Button clicked!')}>
+          Click Me
+        </ia-button>
       </story-template>
     `;
   }

src/elements/ia-button/ia-button.test.ts

@@ -2,13 +2,106 @@ import { fixture } from '@open-wc/testing-helpers';
 import { describe, expect, test } from 'vitest';
 import { html } from 'lit';
 
-import type { IAButton } from './ia-button';
+import { IAButton } from './ia-button';
 import './ia-button';
 
 describe('IA button', () => {
   test('renders a basic button', async () => {
-    const el = await fixture<IAButton>(html`<ia-button>Click me</ia-button>`);
+    const el = await fixture<IAButton>(html`<ia-button>Submit</ia-button>`);
+
+    const button = el.shadowRoot?.querySelector('button');
+    expect(button).to.exist;
+    expect(button?.disabled).to.equal(false);
+  });
+
+  test('displays slotted text within button', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button><span class="foo">Submit</span></ia-button>`,
+    );
+
+    const buttonText = el.shadowRoot
+      ?.querySelector('slot')
+      ?.assignedElements()[0];
+    expect(buttonText).to.exist;
+    expect(buttonText?.innerHTML).to.contain('Submit');
+  });
+
+  test('shows a loading state if requested', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button ?loading=${true}></ia-button>`,
+    );
+
+    const button = el.shadowRoot?.querySelector('button');
+    expect(button?.disabled).to.equal(true);
+    expect(button?.innerText).to.equal('');
+
+    const loadingIndicator = button?.querySelector('.loading-indicator');
+    expect(loadingIndicator).to.exist;
+  });
+
+  test('shows text next to the loading indicator if requested', async () => {
+    const el = await fixture<IAButton>(html`
+      <ia-button ?loading=${true} .loadingText=${'Loading...'}>
+        Submit
+      </ia-button>
+    `);
+
+    const button = el.shadowRoot?.querySelector('button');
+    expect(button?.disabled).to.equal(true);
+    expect(button?.innerText).to.equal('Loading...');
+
+    const loadingIndicator = button?.querySelector('.loading-indicator');
+    expect(loadingIndicator).to.exist;
+  });
+
+  test('adds a hidden light DOM submit input if type set to submit', async () => {
+    const el = await fixture<IAButton>(html`
+      <ia-button type="submit"> Submit </ia-button>
+    `);
+
+    await el.updateComplete;
+
+    const hiddenInput = el.querySelector('input[type="submit"]');
+    expect(hiddenInput).to.exist;
+  });
+
+  test('does add a hidden light DOM reset input if type set to reset', async () => {
+    const el = await fixture<IAButton>(html`
+      <ia-button .type=${'reset'}>Clear</ia-button>
+    `);
+
+    await el.updateComplete;
+
+    const hiddenInput = el.querySelector('input[type="reset"]');
+    expect(hiddenInput).to.exist;
+  });
+
+  test('does not add a hidden light DOM input if type not set', async () => {
+    const el = await fixture<IAButton>(html`<ia-button>Submit</ia-button>`);
+
+    await el.updateComplete;
+
+    const hiddenInput = el.querySelector('input[type="submit"]');
+    expect(hiddenInput).not.to.exist;
+  });
+
+  test('does not add a hidden light DOM input if type set to button', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button .type=${'button'}>Submit</ia-button>`,
+    );
+
+    await el.updateComplete;
+
+    const hiddenInput = el.querySelector('input[type="submit"]');
+    expect(hiddenInput).not.to.exist;
+  });
+
+  test('disables the button if requested', async () => {
+    const el = await fixture<IAButton>(
+      html`<ia-button ?disabled=${true}>Submit</ia-button>`,
+    );
+
     const button = el.shadowRoot?.querySelector('button');
-    expect(button).toBeDefined();
+    expect(button?.disabled).to.equal(true);
   });
 });