@leabankab/component-library 8.0.0 → 8.1.1

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # Changelog
 
+## 8.1.1
+
+### Patch Changes
+
+- a09c0b3: `CookieConsentProvider` reads the stored consent under browser automation such as Playwright. Until now vanilla-cookieconsent's bot check stopped it before the cookie was read, so the dialog opened on every page even with a `cc_cookie` in place. An end-to-end test can now store a consent to keep the dialog closed; see Docs/Cookie Consent. Nothing changes for visitors.
+
+## 8.1.0
+
+### Minor Changes
+
+- 8f66ff8: Validation helpers for application forms, which apps kept for themselves until now:
+
+  - `normalizeNationalId(country, value)` removes what people type around a national ID (spaces, separators, the en dash a phone makes of `-`) and keeps what the checksum needs: `"19811218–9876"` → `"198112189876"`, `"131052–308t"` → `"131052-308T"`. `NATIONAL_ID_LENGTH` is the length once cleaned up (`SE` 12, `FI` 11, `NO` 11, `ES` 9).
+  - `isSameNationalId(country, a, b)`, `isSameEmail(a, b)` and `isSamePhone(country, a, b)` tell whether the co-applicant's details are the main applicant's. Each cleans up both values first, and an empty value never matches.
+  - `validateMobileNumber(country, value)` is `validatePhoneNumber` that also rejects landlines and a number of another country. It takes `SE`, `FI`, `NO` and `ES` (`MobileCountry`; `isMobileCountry` checks a code). It adds no second set of phone data to an app.
+
+  Nothing that exists changes.
+
+- 8f66ff8: `Card` takes `color` and `variant`.
+
+  ```tsx
+  <Card color="primary">…</Card>
+  <Card color="success" variant="filled">…</Card>
+  ```
+
+  - `color`: `primary`, `tertiary`, `neutral`, `success`, `info`, `warning` or `error`, the same tints as `Chip`. Left out, the card is white as before.
+  - `variant`: `outlined` (the default) has a 1px border, in the colour of the tint; `filled` has none. The border stays in the box, transparent, so both take the same room and line up in a row.
+
+  A card without these props looks as before. `CardColor` and `CardVariant` are exported.
+
+- 8f66ff8: Tailwind classes on `className` now win over a component's own styles. The styles of every component are in the cascade layer `components` (it comes after Tailwind's `base` and before its `utilities`), where before they were outside every layer and beat the utilities whatever their specificity. `<Card className="border-none" />` now has no border, and `<Button className="p-8" />` has the padding you asked for.
+
+  The same applies to `dist/dev-panel.css` and `dist/cookie-consent.css`. Each stylesheet starts with the order of the layers (`theme, base, components, utilities`, the one Tailwind v4 writes), so it makes no difference whether it is loaded before or after Tailwind's.
+
+  Check before updating:
+
+  - **Unlayered CSS in your app now beats the components.** A rule outside every layer, such as a global `a { text-decoration: none }` or `h2 { margin: 0 }`, used to compete with the component's rule on specificity and order. Now it wins. Put such resets in `@layer base`, or scope them to your own markup.
+  - **`DatePicker` is not affected.** Its styles come from Emotion at run time and stay outside a layer, so a utility on it does not win.
+  - Apps without Tailwind see no difference, except from the unlayered rules above.
+
+- 8f66ff8: `DevPanel.Root` can be hidden completely, for when it covers the form.
+
+  ```tsx
+  <DevPanel.Root hideable hidden={hidden} onHiddenChange={setHidden}>
+    …
+  </DevPanel.Root>
+  ```
+
+  - `hideable` adds a hide button to the header. While hidden, the panel leaves a small tab at the bottom of the right edge of the window, `DevPanel.Handle`, that brings it back. Pass `handle={<DevPanel.Handle side="left" />}` for the other edge, or `label` for other text.
+  - `shortcut` hides and shows it from anywhere on the page: `"Mod+Shift+D"` by default (⌘ on a Mac, Ctrl elsewhere), `false` for none.
+  - Focus moves to the tab when the panel is hidden and back to the panel when it returns.
+  - `hidden`, `defaultHidden` and `onHiddenChange` work as `minimised` does; store the value to keep it across reloads. Passing `hidden` or `defaultHidden` turns on `hideable`.
+  - A hideable panel on a screen narrower than 600px starts minimised, drawn as a small round button. `defaultMinimised` still decides when given.
+
+  A panel without these props is as before.
+
+- 8f66ff8: `EmailInput` suggests a fix for a mistyped domain. When focus leaves the field with `anna@gnail.con` in it, a line below says "Mente du anna@gmail.com?" (in the language of `LeaProvider`: no, se, fi, es), and the address is a button that puts it in the field. The value never changes by itself, validation is the same as before, and an error and a suggestion can show together. It is on by default; `suggestCorrection={false}` turns it off.
+
+  The function behind it is exported: `suggestEmailCorrection(value)` returns the corrected address or `undefined`. It leaves uncommon domains alone (`anna@firma.se`) and knows real providers that look like typos (`mail.com`, `ymail.com`).
+
+  `COMMON_EMAIL_DOMAINS`, and with it the list `EmailInput` offers after `@`, also has `kolumbus.fi`, `pp.inet.fi`, `luukku.com`, `me.com`, `msn.com`, `gmx.com`, `yahoo.se` and `yahoo.no`.
+
+- 8f66ff8: `Input`, `NumberInput`, `EmailInput` and `Autocomplete` take `warning`: a message for a value that is allowed but unusual, such as an unusually high amount.
+
+  ```tsx
+  <NumberInput
+    label="Inntekt per måned"
+    {...field}
+    warning={
+      field.value > 200_000 ? "Det er en uvanlig høy inntekt." : undefined
+    }
+  />
+  ```
+
+  The warning shows in amber in place of the helper text and is announced as a status. The field is not marked invalid (no red border, no `aria-invalid`), so the value still counts as valid. `error` wins when both are set. Without `warning` nothing changes.
+
+  Until now a warning had to be passed as `error`, which marked a valid value invalid.
+
+- 8f66ff8: `NumberInput` `unit` takes two units the library writes for you, in the language of `LeaProvider`, so an app no longer translates them:
+
+  ```tsx
+  <NumberInput label="Lånebeløp" unit={{ type: "currency" }} showSteppers={false} />
+  <NumberInput label="Nedbetalingstid" unit={{ type: "years" }} min={1} max={15} />
+  ```
+
+  - `{ type: "years" }` is "år" (`no`, `se`), "vuosi" / "vuotta" (`fi`) and "año" / "años" (`es`). The plural follows the number in the field, controlled or not.
+  - `{ type: "currency" }` is the symbol of the currency of the language: "kr" for NOK and SEK, "€" for EUR. Pass `currency` for another: `{ type: "currency", currency: "EUR" }`.
+
+  Text and elements still work as before and are not translated: `unit="kr/mnd"`. `NumberInputUnit` and `NumberInputUnitSpec` are exported.
+
+- 8f66ff8: `PhoneNumberInput` takes `countries` and `mobileOnly`, for a form that wants the mobile number of an applicant in one country.
+
+  ```tsx
+  <PhoneNumberInput
+    label="Mobilnummer"
+    countries={["SE"]}
+    mobileOnly
+    {...field}
+  />
+  ```
+
+  - `countries={["SE"]}`: no country list; `+46` stands fixed at the start of the field. With two or more countries the list holds those alone.
+  - With `countries`, the value is the national number without the trunk `0` (`70 123 45 67`). A pasted `+46 70…`, `0046 70…` or `070…` is cleaned up to it, and a typed one when focus leaves the field. A number of another country is invalid, so a Norwegian number for a Swedish applicant is rejected. Pasting a number of another country in the list switches to it.
+  - `mobileOnly`: a landline is invalid, with its own message ("Skriv inn et mobilnummer", in the language of `LeaProvider`). It covers Sweden, Finland, Norway and Spain, through `validateMobileNumber`.
+
+  Without either prop, nothing changes. Neither adds a second set of phone metadata to the app.
+
 ## 8.0.0
 
 ### Major Changes