From ef4eefddd93860494af9008b4dd11de4a5f72823 Mon Sep 17 00:00:00 2001 From: Remy Parzinski Date: Wed, 20 Mar 2024 16:20:18 +0100 Subject: [PATCH] feat: new component login-method-button --- packages/components-css/button/README.md | 3 - packages/components-css/button/index.scss | 16 - .../login-method-button/README.md | 3 + packages/components-react/package.json | 1 + packages/components-react/src/Button.test.tsx | 49 -- packages/components-react/src/Button.tsx | 17 - packages/components-react/src/index.test.ts | 5 + packages/components-react/src/index.ts | 1 - packages/storybook/config/preview.tsx | 12 +- packages/storybook/src/css-button.stories.tsx | 48 -- .../storybook/src/react-button.stories.tsx | 23 - .../src/web-component-button.stories.tsx | 44 -- ...-component-login-method-button.stories.tsx | 72 +++ .../src/button/index.scss | 1 - .../src/button/stencil.tsx | 23 - .../components/login-method-button/README.md | 1 + .../login-method-button/constants.ts | 10 + .../login-method-button.css | 75 +++ .../login-method-button.tsx | 107 ++++ .../logos/digid-machtigen.svg | 10 + .../login-method-button/logos/digid.svg | 10 + .../logos/e-herkenning.svg | 7 + .../login-method-button/logos/eidas.svg | 38 ++ .../components/login-method-button/types.ts | 1 + .../src/utils/http/status.ts | 5 + pnpm-lock.yaml | 534 +++++++++--------- proprietary/assets/src/favicon.svg | 5 +- .../assets/src/logos/digid-machtigen.svg | 15 + proprietary/assets/src/logos/digid.svg | 15 + proprietary/assets/src/logos/e-herkenning.svg | 7 + proprietary/assets/src/logos/eidas.svg | 38 ++ proprietary/design-tokens/config.js | 68 +++ proprietary/design-tokens/package.json | 4 +- .../src/brand/example/color.tokens.json | 13 - .../src/common/example/focus.tokens.json | 7 - .../src/common/lux/color.dark.json | 38 ++ .../design-tokens/src/common/lux/color.json | 35 ++ .../design-tokens/src/common/lux/logo.json | 9 + .../design-tokens/src/common/lux/size.json | 9 + .../src/components/example/button.tokens.json | 8 - .../lux/login-method-button.dark.json | 57 ++ .../components/lux/login-method-button.json | 141 +++++ .../design-tokens/src/core/logius/border.json | 40 ++ .../design-tokens/src/core/logius/color.json | 331 +++++++++++ .../design-tokens/src/core/logius/font.json | 70 +++ .../design-tokens/src/core/logius/shadow.json | 17 + .../design-tokens/src/core/logius/space.json | 50 ++ proprietary/font/src/ROsanswebtextbold.eot | Bin 0 -> 58527 bytes proprietary/font/src/ROsanswebtextbold.ttf | Bin 0 -> 135540 bytes proprietary/font/src/ROsanswebtextbold.woff | Bin 0 -> 69467 bytes proprietary/font/src/ROsanswebtextitalic.eot | Bin 0 -> 72896 bytes proprietary/font/src/ROsanswebtextitalic.ttf | Bin 0 -> 157732 bytes proprietary/font/src/ROsanswebtextitalic.woff | Bin 0 -> 84044 bytes proprietary/font/src/ROsanswebtextregular.eot | Bin 0 -> 65572 bytes proprietary/font/src/ROsanswebtextregular.ttf | Bin 0 -> 144048 bytes .../font/src/ROsanswebtextregular.woff | Bin 0 -> 76489 bytes proprietary/font/src/index.scss | 40 +- 57 files changed, 1599 insertions(+), 534 deletions(-) delete mode 100644 packages/components-css/button/README.md delete mode 100644 packages/components-css/button/index.scss create mode 100644 packages/components-css/login-method-button/README.md delete mode 100644 packages/components-react/src/Button.test.tsx delete mode 100644 packages/components-react/src/Button.tsx create mode 100644 packages/components-react/src/index.test.ts delete mode 100644 packages/storybook/src/css-button.stories.tsx delete mode 100644 packages/storybook/src/react-button.stories.tsx delete mode 100644 packages/storybook/src/web-component-button.stories.tsx create mode 100644 packages/storybook/src/web-component-login-method-button.stories.tsx delete mode 100644 packages/web-components-stencil/src/button/index.scss delete mode 100644 packages/web-components-stencil/src/button/stencil.tsx create mode 100644 packages/web-components-stencil/src/components/login-method-button/README.md create mode 100644 packages/web-components-stencil/src/components/login-method-button/constants.ts create mode 100644 packages/web-components-stencil/src/components/login-method-button/login-method-button.css create mode 100644 packages/web-components-stencil/src/components/login-method-button/login-method-button.tsx create mode 100644 packages/web-components-stencil/src/components/login-method-button/logos/digid-machtigen.svg create mode 100644 packages/web-components-stencil/src/components/login-method-button/logos/digid.svg create mode 100644 packages/web-components-stencil/src/components/login-method-button/logos/e-herkenning.svg create mode 100644 packages/web-components-stencil/src/components/login-method-button/logos/eidas.svg create mode 100644 packages/web-components-stencil/src/components/login-method-button/types.ts create mode 100644 packages/web-components-stencil/src/utils/http/status.ts create mode 100644 proprietary/assets/src/logos/digid-machtigen.svg create mode 100644 proprietary/assets/src/logos/digid.svg create mode 100644 proprietary/assets/src/logos/e-herkenning.svg create mode 100644 proprietary/assets/src/logos/eidas.svg create mode 100644 proprietary/design-tokens/config.js delete mode 100644 proprietary/design-tokens/src/brand/example/color.tokens.json delete mode 100644 proprietary/design-tokens/src/common/example/focus.tokens.json create mode 100644 proprietary/design-tokens/src/common/lux/color.dark.json create mode 100644 proprietary/design-tokens/src/common/lux/color.json create mode 100644 proprietary/design-tokens/src/common/lux/logo.json create mode 100644 proprietary/design-tokens/src/common/lux/size.json delete mode 100644 proprietary/design-tokens/src/components/example/button.tokens.json create mode 100644 proprietary/design-tokens/src/components/lux/login-method-button.dark.json create mode 100644 proprietary/design-tokens/src/components/lux/login-method-button.json create mode 100644 proprietary/design-tokens/src/core/logius/border.json create mode 100644 proprietary/design-tokens/src/core/logius/color.json create mode 100644 proprietary/design-tokens/src/core/logius/font.json create mode 100644 proprietary/design-tokens/src/core/logius/shadow.json create mode 100644 proprietary/design-tokens/src/core/logius/space.json create mode 100644 proprietary/font/src/ROsanswebtextbold.eot create mode 100644 proprietary/font/src/ROsanswebtextbold.ttf create mode 100644 proprietary/font/src/ROsanswebtextbold.woff create mode 100644 proprietary/font/src/ROsanswebtextitalic.eot create mode 100644 proprietary/font/src/ROsanswebtextitalic.ttf create mode 100644 proprietary/font/src/ROsanswebtextitalic.woff create mode 100644 proprietary/font/src/ROsanswebtextregular.eot create mode 100644 proprietary/font/src/ROsanswebtextregular.ttf create mode 100644 proprietary/font/src/ROsanswebtextregular.woff diff --git a/packages/components-css/button/README.md b/packages/components-css/button/README.md deleted file mode 100644 index d616c0b5..00000000 --- a/packages/components-css/button/README.md +++ /dev/null @@ -1,3 +0,0 @@ - - -# Example Button component diff --git a/packages/components-css/button/index.scss b/packages/components-css/button/index.scss deleted file mode 100644 index 486affa2..00000000 --- a/packages/components-css/button/index.scss +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2021 Community for NL Design System - */ - -.lux-button { - background-color: var(--lux-button-background-color); - border: 0; - color: var(--lux-button-color); - font-family: system-ui; - font-size: 1rem; - padding-block-end: 1ex; - padding-block-start: 1ex; - padding-inline-end: 1ch; - padding-inline-start: 1ch; -} diff --git a/packages/components-css/login-method-button/README.md b/packages/components-css/login-method-button/README.md new file mode 100644 index 00000000..f06238e8 --- /dev/null +++ b/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. diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 87fb0a86..5bd8d450 100644 --- a/packages/components-react/package.json +++ b/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", diff --git a/packages/components-react/src/Button.test.tsx b/packages/components-react/src/Button.test.tsx deleted file mode 100644 index fef395d0..00000000 --- a/packages/components-react/src/Button.test.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import { createRef } from 'react'; -import { Button } from './Button'; -import '@testing-library/jest-dom'; - -describe('Button', () => { - it('renders a button role element', () => { - render(); - - const button = screen.getByRole('button', { - name: 'OK', - }); - - expect(button).toBeInTheDocument(); - expect(button).toBeVisible(); - }); - - it('renders an HTML button element', () => { - const { container } = render(, - ); - - const button = container.querySelector(':only-child'); - - const richText = button?.querySelector('strong'); - - expect(richText).toBeInTheDocument(); - }); - - it('supports ForwardRef in React', () => { - const ref = createRef(); - - const { container } = render( - ); - }, -); - -Button.displayName = 'Button'; diff --git a/packages/components-react/src/index.test.ts b/packages/components-react/src/index.test.ts new file mode 100644 index 00000000..55b9f3fa --- /dev/null +++ b/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'); +}); diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts index fe9c53c5..e69de29b 100644 --- a/packages/components-react/src/index.ts +++ b/packages/components-react/src/index.ts @@ -1 +0,0 @@ -export { Button } from './Button'; diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx index 26a1e27e..e10d5306 100644 --- a/packages/storybook/config/preview.tsx +++ b/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 ( -
- +
+
+ +
+
+ +
); }, diff --git a/packages/storybook/src/css-button.stories.tsx b/packages/storybook/src/css-button.stories.tsx deleted file mode 100644 index 73fcafd0..00000000 --- a/packages/storybook/src/css-button.stories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/* @license CC0-1.0 */ - -import readme from '@lux/components-css/button/README.md?raw'; -import type { Meta, StoryObj } from '@storybook/react'; -import { PropsWithChildren } from 'react'; -import '@lux/components-css/button/index.scss'; - -const Button = ({ children }: PropsWithChildren<{}>) => ( - -); - -const meta = { - title: 'CSS Component/Button', - id: 'css-button', - component: Button, - argTypes: { - children: { - name: 'Content', - description: 'Button text', - type: { - name: 'string', - required: true, - }, - defaultValue: '', - }, - }, - args: { - children: 'Opslaan en verder', - }, - tags: ['autodocs'], - parameters: { - docs: { - description: { - component: readme, - }, - }, - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - name: 'CSS button', -}; diff --git a/packages/storybook/src/react-button.stories.tsx b/packages/storybook/src/react-button.stories.tsx deleted file mode 100644 index 9f16151e..00000000 --- a/packages/storybook/src/react-button.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { Button } from '../../components-react/src/Button'; - -const meta = { - title: 'React Component/Button', - id: 'react-button', - component: Button, - args: { - children: 'Read more...', - }, - argTypes: { - type: { - control: { type: 'select' }, - options: [undefined, 'button', 'submit', 'reset'], - }, - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; diff --git a/packages/storybook/src/web-component-button.stories.tsx b/packages/storybook/src/web-component-button.stories.tsx deleted file mode 100644 index 1ef9910f..00000000 --- a/packages/storybook/src/web-component-button.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* @license CC0-1.0 */ - -import readme from '@lux/components-css/button/README.md?raw'; -import { LuxButton } from '@lux/web-components-react'; -import type { Meta, StoryObj } from '@storybook/react'; -import { PropsWithChildren } from 'react'; - -const Button = ({ children }: PropsWithChildren<{}>) => {children}; - -const meta = { - title: 'Web Component/Button', - id: 'web-component-button', - component: Button, - argTypes: { - children: { - name: 'Content', - description: 'Button text', - type: { - name: 'string', - required: true, - }, - defaultValue: '', - }, - }, - args: { - children: 'Opslaan en verder', - }, - tags: ['autodocs'], - parameters: { - docs: { - description: { - component: readme, - }, - }, - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - name: 'Button', -}; diff --git a/packages/storybook/src/web-component-login-method-button.stories.tsx b/packages/storybook/src/web-component-login-method-button.stories.tsx new file mode 100644 index 00000000..1f08f10f --- /dev/null +++ b/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) => ( + +); + +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; + +export default meta; + +type Story = StoryObj; + +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', + }, +}; diff --git a/packages/web-components-stencil/src/button/index.scss b/packages/web-components-stencil/src/button/index.scss deleted file mode 100644 index 2821b223..00000000 --- a/packages/web-components-stencil/src/button/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "~@lux/components-css/button/index"; diff --git a/packages/web-components-stencil/src/button/stencil.tsx b/packages/web-components-stencil/src/button/stencil.tsx deleted file mode 100644 index 7b5602ec..00000000 --- a/packages/web-components-stencil/src/button/stencil.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @license EUPL-1.2 - * Copyright (c) 2021 Community for NL Design System - */ - -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'lux-button', - styleUrl: 'index.scss', - shadow: true, -}) -export class Button { - render() { - return ( - - ); - } -} diff --git a/packages/web-components-stencil/src/components/login-method-button/README.md b/packages/web-components-stencil/src/components/login-method-button/README.md new file mode 100644 index 00000000..a78c67c1 --- /dev/null +++ b/packages/web-components-stencil/src/components/login-method-button/README.md @@ -0,0 +1 @@ +# Login Methods diff --git a/packages/web-components-stencil/src/components/login-method-button/constants.ts b/packages/web-components-stencil/src/components/login-method-button/constants.ts new file mode 100644 index 00000000..8b625991 --- /dev/null +++ b/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 = { + digid: 'Inloggen', + 'digid-machtigen': 'Inloggen als gemachtigde', + 'e-herkenning': 'Inloggen als bedrijf of instelling', + eidas: 'European login', +}; diff --git a/packages/web-components-stencil/src/components/login-method-button/login-method-button.css b/packages/web-components-stencil/src/components/login-method-button/login-method-button.css new file mode 100644 index 00000000..d332255c --- /dev/null +++ b/packages/web-components-stencil/src/components/login-method-button/login-method-button.css @@ -0,0 +1,75 @@ +:host { + appearance: button; + display: contents; +} + +.lux-login-method-button { + align-items: center; + appearance: button; + background-color: var(--lux-login-method-button-background); + border-color: var(--lux-login-method-button-border-color); + border-radius: var(--lux-login-method-button-border-radius); + border-style: var(--lux-login-method-button-border-style); + border-width: var(--lux-login-method-button-border-width); + color: var(--lux-login-method-button-color); + display: flex; + font-family: var(--lux-login-method-button-font-family); + font-size: var(--lux-login-method-button-font-size); + font-weight: var(--lux-login-method-button-font-weight); + gap: var(--lux-login-method-button-gap); + justify-content: space-between; + line-height: var(--lux-font-line-height-m); + margin-block: 0; + margin-inline: 0; + min-block-size: var(--lux-login-method-button-min-block-size); + min-inline-size: var(--lux-login-method-button-min-inline-size); + padding-block-end: var(--lux-login-method-button-padding-block-end); + padding-block-start: var(--lux-login-method-button-padding-block-start); + padding-inline-end: var(--lux-login-method-button-padding-inline-end); + padding-inline-start: var(--lux-login-method-button-padding-inline-start); + user-select: none; +} + +.lux-login-method-button:focus-visible { + outline-color: var(--lux-login-method-button-focus-outline-color); + outline-offset: var(--lux-login-method-button-focus-outline-offset); + outline-style: var(--lux-login-method-button-focus-outline-style); + outline-width: var(--lux-login-method-button-focus-outline-width); +} + +.lux-login-method-button:hover { + background-color: var(--lux-login-method-button-hover-background); +} + +.lux-login-method-button:active { + background-color: var(--lux-login-method-button-active-background); + border-color: var(--lux-login-method-button-active-border-color); +} + +.lux-login-method-button__logo { + block-size: var(--lux-login-method-button-icon-size); + inline-size: var(--lux-login-method-button-icon-size); + line-height: 1; +} + +/* stylelint-disable selector-class-pattern */ +.lux-login-method-button__logo--e-herkenning .e { + fill: var(--lux-login-method-button-icon-eherkenning-e-color); +} + +.lux-login-method-button__logo--eidas .line { + fill: var(--lux-login-method-button-icon-eidas-lines-color); +} + +.lux-login-method-button__logo--eidas .star { + fill: var(--lux-login-method-button-icon-eidas-stars-color); +} + +.lux-login-method-button__logo--eidas .background { + fill: var(--lux-login-method-button-icon-eidas-background-color); +} + +.lux-login-method-button__logo--eidas .lock { + fill: var(--lux-login-method-button-icon-eidas-lock-color); +} +/* stylelint-enable selector-class-pattern */ diff --git a/packages/web-components-stencil/src/components/login-method-button/login-method-button.tsx b/packages/web-components-stencil/src/components/login-method-button/login-method-button.tsx new file mode 100644 index 00000000..ada0c442 --- /dev/null +++ b/packages/web-components-stencil/src/components/login-method-button/login-method-button.tsx @@ -0,0 +1,107 @@ +import { Component, Event, EventEmitter, getAssetPath, h, Prop, State } from '@stencil/core'; +import { COMPONENT_TAG, loginMethodLabels } from './constants'; +import type { LoginMethodVariant } from './types'; +import { isStatusValid } from '../../utils/http/status'; + +const requestsCache = new Map>(); + +@Component({ + tag: 'lux-login-method-button', + assetsDirs: ['assets'], + shadow: true, + styleUrl: 'login-method-button.css', +}) +export class LoginMethodButton { + private get printedLabel(): string { + if (this.label) { + return this.label; + } + + return loginMethodLabels[this.variant]; + } + + @State() private svgContent: string = ''; + + @Prop() public readonly variant!: LoginMethodVariant; + @Prop() public readonly label!: string; + + @Event() private luxClick!: EventEmitter; + + async componentWillLoad() { + return this.loadLogoAsset(); + } + + async componentWillRender() { + return this.loadLogoAsset(); + } + + renderLabel() { + return {this.printedLabel}; + } + + renderLogo() { + const classNames = { + [`${COMPONENT_TAG}__logo`]: true, + [`${COMPONENT_TAG}__logo--${this.variant}`]: true, + }; + + return