feat(LUX-13): rename login-method-button to button-login (#41)

BREAKING CHANGE: the component is no longer available under the original
name `login-method-button` but rather under its new name `button-login`

BREAKING CHANGE: the `variant` property for the button-login is renamed
to `agent`

---------

Co-authored-by: Raoul <85627716+rwittenberns@users.noreply.github.com>

packages/components-css/button-login/README.md

@@ -0,0 +1,3 @@
+# Button Login
+
+De Button Login is een knop die specifiek bedoeld is voor de Inlogstraat.

packages/components-css/button-login/button-login.html

@@ -0,0 +1,4 @@
+<button class="lux-button-login lux-button-login__icon--[agent]">
+  <span class="lux-button-login__label"></span>
+  <div class="lux-button-login__icon" aria-hidden="true"></div>
+</button>

packages/storybook/src/web-component-login-method-button.stories.tsx → packages/storybook/src/web-component-button-login.stories.tsx

@@ -1,24 +1,22 @@
 /* @license CC0-1.0 */
 
-import readme from '@lux/components-css/login-method-button/README.md?raw';
-import { LuxLoginMethodButton } from '@lux/web-components-react';
+import readme from '@lux/components-css/button-login/README.md?raw';
+import { LuxButtonLogin } from '@lux/web-components-react';
 import type { JSX } from '@lux/web-components-stencil';
 import type { Meta, StoryObj } from '@storybook/react';
 import { PropsWithoutRef } from 'react';
 
-const LoginMethodButtonDefault = (props: PropsWithoutRef<JSX.LuxLoginMethodButton>) => (
-  <LuxLoginMethodButton {...props} />
-);
+const ButtonLoginDefault = (props: PropsWithoutRef<JSX.LuxButtonLogin>) => <LuxButtonLogin {...props} />;
 
 const meta = {
-  title: 'Components/Login Method Button',
-  id: 'web-component-login-method',
-  component: LoginMethodButtonDefault,
+  title: 'Components/Button Login',
+  id: 'web-component-button-login',
+  component: ButtonLoginDefault,
   argTypes: {
     label: {
       type: 'string',
     },
-    variant: {
+    agent: {
       options: ['digid', 'digid-machtigen', 'eherkenning', 'eidas'],
       control: {
         type: 'select',
@@ -33,7 +31,7 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof LoginMethodButtonDefault>;
+} satisfies Meta<typeof ButtonLoginDefault>;
 
 export default meta;
 
@@ -43,30 +41,30 @@ export const Digid: Story = {
   name: 'Digid',
   args: {
     label: '',
-    variant: 'digid',
+    agent: 'digid',
   },
 };
 
 export const DigidMachtigen: Story = {
   name: 'Digid Machtigen',
   args: {
     label: '',
-    variant: 'digid-machtigen',
+    agent: 'digid-machtigen',
   },
 };
 
 export const EHerkenning: Story = {
   name: 'eHerkenning',
   args: {
     label: '',
-    variant: 'eherkenning',
+    agent: 'eherkenning',
   },
 };
 
 export const Eidas: Story = {
   name: 'eIDAS',
   args: {
     label: '',
-    variant: 'eidas',
+    agent: 'eidas',
   },
 };

packages/web-components-react/src/index.ts

@@ -1,4 +1 @@
-// import { createReactComponent } from './react-component-lib';
-
 export * from './components';
-// export const ExampleButton = /*@__PURE__*/ createReactComponent('lux-button');

packages/web-components-stencil/src/components/button-login/button-login.css

@@ -0,0 +1,57 @@
+:host {
+  appearance: button;
+  display: contents;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+.lux-button-login {
+  align-items: center;
+  appearance: button;
+  background-color: var(--lux-button-login-background);
+  border-color: var(--lux-button-login-border-color);
+  border-radius: var(--lux-button-login-border-radius);
+  border-style: var(--lux-button-login-border-style);
+  border-width: var(--lux-button-login-border-width);
+  color: var(--lux-button-login-color);
+  display: flex;
+  font-family: var(--lux-button-login-font-family);
+  font-size: var(--lux-button-login-font-size);
+  font-weight: var(--lux-button-login-font-weight);
+  gap: var(--lux-button-login-gap);
+  justify-content: space-between;
+  line-height: var(--lux-font-line-height-m);
+  margin-block: 0;
+  margin-inline: 0;
+  min-block-size: var(--lux-button-login-min-block-size);
+  min-inline-size: var(--lux-button-login-min-inline-size);
+  padding-block-end: var(--lux-button-login-padding-block-end);
+  padding-block-start: var(--lux-button-login-padding-block-start);
+  padding-inline-end: var(--lux-button-login-padding-inline-end);
+  padding-inline-start: var(--lux-button-login-padding-inline-start);
+  user-select: none;
+}
+
+.lux-button-login:focus-visible {
+  outline-color: var(--lux-button-login-focus-outline-color);
+  outline-offset: var(--lux-button-login-focus-outline-offset);
+  outline-style: var(--lux-button-login-focus-outline-style);
+  outline-width: var(--lux-button-login-focus-outline-width);
+}
+
+.lux-button-login:hover {
+  background-color: var(--lux-button-login-hover-background);
+}
+
+.lux-button-login:active {
+  background-color: var(--lux-button-login-active-background);
+  border-color: var(--lux-button-login-active-border-color);
+}
+
+.lux-button-login__logo {
+  block-size: var(--lux-button-login-icon-size);
+  inline-size: var(--lux-button-login-icon-size);
+  line-height: 1;
+}

packages/web-components-stencil/src/components/login-method-button/login-method-button.tsx → packages/web-components-stencil/src/components/button-login/button-login.tsx

@@ -1,25 +1,25 @@
 import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';
-import { COMPONENT_TAG, loginMethodLabels } from './constants';
-import type { LoginMethodVariant } from './types';
+import { COMPONENT_TAG, LoginAgentsLabels } from './constants';
+import type { ButtonLoginAgent } from './types';
 import { applyTestId } from '../../utils/test/testid';
 
 @Component({
-  tag: 'lux-login-method-button',
+  tag: 'lux-button-login',
   shadow: true,
-  styleUrl: 'login-method-button.css',
+  styleUrl: 'button-login.css',
 })
-export class LoginMethodButton {
+export class ButtonLogin {
   private get printedLabel(): string {
     if (this.label) {
       return this.label;
     }
 
-    return loginMethodLabels[this.variant];
+    return LoginAgentsLabels[this.agent];
   }
 
-  @Element() el!: HTMLLuxLoginMethodButtonElement;
+  @Element() el!: HTMLLuxButtonLoginElement;
 
-  @Prop() public readonly variant!: LoginMethodVariant;
+  @Prop() public readonly agent!: ButtonLoginAgent;
   @Prop() public readonly label!: string;
 
   @Event() private luxClick!: EventEmitter<void>;
@@ -41,14 +41,14 @@ export class LoginMethodButton {
   }
 
   renderLogoIcon() {
-    const loginMethodIcons: Record<LoginMethodVariant, any> = {
+    const buttonLoginIcons: Record<ButtonLoginAgent, any> = {
       digid: <lux-icon-logo-digid />,
       'digid-machtigen': <lux-icon-logo-digid />,
       eherkenning: <lux-icon-logo-eherkenning />,
       eidas: <lux-icon-logo-eidas />,
     };
 
-    return loginMethodIcons[this.variant];
+    return buttonLoginIcons[this.agent];
   }
 
   renderLogoContainer() {
@@ -62,7 +62,7 @@ export class LoginMethodButton {
   render() {
     const classNames = {
       [`${COMPONENT_TAG}`]: true,
-      [`${COMPONENT_TAG}--${this.variant}`]: true,
+      [`${COMPONENT_TAG}--${this.agent}`]: true,
     };
 
     return (

packages/web-components-stencil/src/components/button-login/constants.ts

@@ -0,0 +1,10 @@
+import type { ButtonLoginAgent } from './types';
+
+export const COMPONENT_TAG = 'lux-button-login';
+
+export const LoginAgentsLabels: Record<ButtonLoginAgent, string> = {
+  digid: 'Inloggen',
+  'digid-machtigen': 'Inloggen als gemachtigde',
+  eherkenning: 'Inloggen als bedrijf of instelling',
+  eidas: 'European login',
+};

packages/web-components-stencil/src/components/login-method-button/test/unit/a11y.spec.tsx → packages/web-components-stencil/src/components/button-login/test/unit/a11y.spec.tsx

@@ -1,13 +1,13 @@
 import { describe, expect, it } from '@jest/globals';
 import { newSpecPage } from '@stencil/core/testing';
 import { getTestableShadowElement } from '../../../../utils/test/element';
-import { LoginMethodButton } from '../../login-method-button';
+import { ButtonLogin } from '../../button-login';
 
 describe('a11y', () => {
   it('hides logo icons from the a11y tree', async () => {
     const page = await newSpecPage({
-      components: [LoginMethodButton],
-      html: `<lux-login-method-button variant="digid" />`,
+      components: [ButtonLogin],
+      html: `<lux-button-login agent="digid" />`,
     });
 
     const logoContainerElement = getTestableShadowElement(page, 'logo');

packages/web-components-stencil/src/components/button-login/test/unit/button-login.spec.tsx

@@ -0,0 +1,64 @@
+import { expect, it, jest } from '@jest/globals';
+import { newSpecPage } from '@stencil/core/testing';
+import { getTestableShadowElement } from '../../../../utils/test/element';
+import { ButtonLogin } from '../../button-login';
+import { ButtonLoginAgent } from '../../types';
+
+interface AgentTestConfig {
+  label: string;
+  agent: ButtonLoginAgent;
+}
+
+const agents: AgentTestConfig[] = [
+  { agent: 'digid', label: 'Inloggen' },
+  { agent: 'digid-machtigen', label: 'Inloggen als gemachtigde' },
+  { agent: 'eherkenning', label: 'Inloggen als bedrijf of instelling' },
+  { agent: 'eidas', label: 'European login' },
+];
+
+it.each(agents)(
+  'renders the correct icon and label for [agent="$agent"]',
+  async ({ agent, label }: AgentTestConfig) => {
+    const page = await newSpecPage({
+      components: [ButtonLogin],
+      html: `<lux-button-login agent="${agent}" />`,
+    });
+
+    const labelElement = getTestableShadowElement<HTMLSpanElement>(page, 'label');
+    const logoContainerElement = getTestableShadowElement<HTMLDivElement>(page, `logo`);
+
+    expect(labelElement.textContent).toBe(label);
+    // TODO check for the child to be an SVGElement with [data-testid="icon-${agent}"]
+    // --> logoContainerElement.children[0] is an empty object
+    expect(logoContainerElement.children).toHaveLength(1);
+  },
+);
+
+it('allows for a custom label to be provided', async () => {
+  const page = await newSpecPage({
+    components: [ButtonLogin],
+    html: `<lux-button-login agent="digid" label="My Custom Label" />`,
+  });
+
+  const { textContent }: HTMLLuxButtonLoginElement = getTestableShadowElement(page, 'label');
+  expect(textContent).toBe('My Custom Label');
+});
+
+it('only emits a luxClick event when clicked', async () => {
+  const page = await newSpecPage({
+    components: [ButtonLogin],
+    html: `<lux-button-login agent="digid" />`,
+  });
+
+  const clickHandler = jest.fn();
+  const luxClickHandler = jest.fn();
+  const buttonLogin = page.root;
+
+  buttonLogin?.addEventListener('click', luxClickHandler);
+  buttonLogin?.addEventListener('luxClick', luxClickHandler);
+
+  buttonLogin?.click();
+
+  expect(clickHandler).not.toHaveBeenCalled();
+  expect(luxClickHandler).toHaveBeenCalled();
+});

packages/web-components-stencil/src/components/button-login/types.ts

@@ -0,0 +1 @@
+export type ButtonLoginAgent = 'digid' | 'digid-machtigen' | 'eidas' | 'eherkenning';