feat: new component login-method-button

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

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

packages/components-react/package.json

@@ -43,6 +43,7 @@
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@babel/runtime": "7.24.0",
+    "@jest/globals": "29.7.0",
     "@lux/components-css": "workspace:*",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",

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

@@ -0,0 +1,5 @@
+import { describe, it } from '@jest/globals';
+
+describe('index', () => {
+  it.todo('has a placeholder test');
+});

packages/components-react/src/index.ts

@@ -1 +0,0 @@
-export { Button } from './Button';

packages/storybook/config/preview.tsx

@@ -1,4 +1,5 @@
-import '@lux/design-tokens/dist/index.css';
+import '@lux/design-tokens/dist/root.css';
+import '@lux/design-tokens/dist/dark.css';
 import '@lux/font/src/index.scss';
 import { defineCustomElements } from '@lux/web-components-stencil/loader/index.js';
 import type { Preview, StoryContext } from '@storybook/react';
@@ -15,8 +16,13 @@ const preview: Preview = {
       storyContext.parameters['args'] = storyContext.args;
 
       return (
-        <div className="lux-theme">
-          <Story />
+        <div className="lux-theme" style={{ display: 'flex', gap: '1rem', justifyContent: 'space-around' }}>
+          <div style={{ padding: '1rem' }}>
+            <Story />
+          </div>
+          <div className="lux-theme--dark" style={{ padding: '1rem', backgroundColor: 'black' }}>
+            <Story />
+          </div>
         </div>
       );
     },

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

@@ -0,0 +1,72 @@
+/* @license CC0-1.0 */
+
+import readme from '@lux/components-css/login-method-button/README.md?raw';
+import { LuxLoginMethodButton } 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 meta = {
+  title: 'Components/Login Method Button',
+  id: 'web-component-login-method',
+  component: LoginMethodButtonDefault,
+  argTypes: {
+    label: {
+      type: 'string',
+    },
+    variant: {
+      options: ['digid', 'digid-machtigen', 'e-herkenning', 'eidas'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof LoginMethodButtonDefault>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Digid: Story = {
+  name: 'Digid',
+  args: {
+    label: '',
+    variant: 'digid',
+  },
+};
+
+export const DigidMachtigen: Story = {
+  name: 'Digid Machtigen',
+  args: {
+    label: '',
+    variant: 'digid-machtigen',
+  },
+};
+
+export const EHerkenning: Story = {
+  name: 'E-Herkenning',
+  args: {
+    label: '',
+    variant: 'e-herkenning',
+  },
+};
+
+export const Eidas: Story = {
+  name: 'Eidas',
+  args: {
+    label: '',
+    variant: 'eidas',
+  },
+};

packages/web-components-stencil/src/components/login-method-button/README.md

@@ -0,0 +1 @@
+# Login Methods

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

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