@leabankab/component-library 7.1.1 → 7.3.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # Changelog
 
+## 7.3.0
+
+### Minor Changes
+
+- 7c1ba83: `Alert` no longer wraps MUI. It is styled with a CSS Module from the design tokens, so it renders without `LeaProvider`. It looks the same, and `severity`, `color` (including `purple` and `grey`), `variant`, `size`, `icon`, `action`, `onClose` and `role` work as before.
+
+  Breaking:
+
+  - MUI-only props are gone: `sx`, `iconMapping`, `slots`, `slotProps`, `components` and `componentsProps`. Use `className` or `style` for one-off styling, and `icon` to replace the icon.
+  - `closeText` is renamed to `closeLabel`, the name `SimpleDialog` and `SimpleDrawer` use.
+  - `AlertTitle` is now a plain `<div>` rather than MUI's `AlertTitle`, so it no longer accepts MUI `Typography` props.
+  - The close button is the library's `CloseButton` rather than MUI's `IconButton`, and the markup no longer carries `MuiAlert-*` class names. Stylesheets that target those classes need updating.
+
+  Add `GlobalAlert`, a full-width `Alert` for page- or session-wide messages, placed directly above or below `AppHeader`. It takes the same props and styling as `Alert`, without the rounded corners, and its content follows the `Container` breakpoints and side padding. `fluid` lets the content span the full width, like `AppHeader`'s `fluid`.
+
+- 7c1ba83: Add `AppHeader`, a page header with the Lea Bank logo. The brand divider sits underneath by default; with `brandDivider={false}` the header gets a bottom border instead. Children fill the right-hand side (e.g. buttons); without children the logo is centred. The content follows the `Container` breakpoints and side padding, and `fluid` lets it span the full width.
+
+  Add a `size` prop (`"sm" | "md" | "lg"`) to `BrandDivider`. The default is `"sm"`, which is half the previous height; pass `size="md"` to keep the old look.
+
+- 7c1ba83: Rename the `variant` values of `Button`, `IconButton`, `CloseButton` and `DownloadTrigger` to describe how they look: `"primary"` becomes `"solid"`, `"secondary"` becomes `"outline"` and `"tertiary"` becomes `"ghost"`. The default is now `"solid"`, and `CloseButton` defaults to `"ghost"`. The rendered `data-variant` attribute uses the new names too, so stylesheets that target `[data-variant="primary"]` and the like need updating.
+
+  ```tsx
+  // Before
+  <Button variant="secondary">Avbryt</Button>
+  <IconButton aria-label="Meny" variant="tertiary">…</IconButton>
+
+  // After
+  <Button variant="outline">Avbryt</Button>
+  <IconButton aria-label="Meny" variant="ghost">…</IconButton>
+  ```
+
+  Outline and ghost buttons now hover with translucent white plus a hint of their text colour, instead of an opaque light fill. On a coloured background the hover lightens the surface rather than painting a flat patch over it, and on white it looks as before. This applies to every `color`.
+
+  `Accordion`'s `ghost` and `divided` variants hover and press the same way.
+
+  Add three tokens that set the strength of those states: `--lea-opacity-highlight` (`0.6`, the white layer), `--lea-opacity-hover` (`0.08`) and `--lea-opacity-pressed` (`0.12`), the amount of text colour mixed in on hover and press.
+
+- 7c1ba83: Add `LinearFormStepper`, a form-step header with a linear progress bar, the step title and an optional back button, for flows whose steps aren't all known up front. `totalSteps` may change between renders and the bar animates to the new value.
+
+  Add a generic step-progress context so a flow layout can keep one persistent header while its pages change: `StepProgressProvider`, `useReportStepProgress`, `useStepProgress` and `StepProgressHeader`. Apps report the step they've already resolved (`currentStep`, `totalSteps`, `title`); the library never defines the steps. `FormStepper` is unchanged.
+
+## 7.2.0
+
+### Minor Changes
+
+- 5c6fb1a: Add a shared cookie consent module, so one consent covers every Lea Bank app on `leabank.se`, `leabank.fi`, `leabank.no` and `leabank.es`.
+
+  - **React:** `@leabankab/component-library/cookie-consent/react` exports `CookieConsentProvider` and `useCookieConsent`. The provider renders the consent settings dialog, built from the library's `Dialog`, `Accordion`, `Switch` and `Button`. It can't be dismissed until the visitor has chosen, and `openSettings` reopens it. It needs neither MUI nor `LeaProvider`.
+  - **Headless:** `@leabankab/component-library/cookie-consent` exports `initCookieConsent`, `getConsentState`, `setConsent`, `openCookieSettings`, `COOKIE_CONSENT_REVISION` and `COOKIE_CONSENT_CATEGORIES`, with no React and no UI.
+  - **Peer dependency:** `vanilla-cookieconsent` `3.1.0`, optional. It stores the choice; its own modals and stylesheet are never shown. Apps that don't import the subpaths don't need it.
+  - **Cookie:** `cc_cookie`, revision 3, in vanilla-cookieconsent's format. `domain` is set to the market's domain on its hosts and left unset (host-only) elsewhere, such as localhost and `*.azurewebsites.net`.
+  - **Copy:** Strapi Blocks rich text is rendered as React elements with a small set of tags, and links are limited to `https:`, `mailto:` and relative URLs.
+
+  Migrating an app: remove its own vanilla-cookieconsent setup and wrap it in `CookieConsentProvider`. Rename any `statistics` category to `analytics`. Visitors are asked once more after the release, because their old host-only cookie is replaced by the shared one. See Docs/Cookie Consent in Storybook.
+
+- 5c6fb1a: Add `Dialog.Footer`: an action row placed after `Dialog.Content` that stays pinned to the bottom of the popup while the body scrolls.
+- e37ed0e: Add breakpoint tokens, layout components and a Tailwind theme.
+
+  - **Breakpoints:** `breakpoints` (`sm` 600, `md` 900, `lg` 1200, `xl` 1536px) and the `Breakpoint` type are exported, and the stylesheet defines `--lea-breakpoint-*`. The values equal MUI's defaults and are now passed to `createTheme` explicitly, so nothing switches at a different width.
+  - **Layout:** `Stack`, `HStack`, `Grid`, `GridItem` and `Container`. They are styled by CSS Modules, render without `LeaProvider`, and take `render` to change the element. `direction`, `gap`, `columns` and `span` accept a value per breakpoint, mobile-first: `gap={{ base: 1, md: 3 }}`.
+  - **Tailwind:** `@leabankab/component-library/tailwind.css` is a Tailwind v4 theme that replaces Tailwind's default colours, spacing, breakpoints, radii, shadows, font sizes, font weights and easings with the Lea tokens. Import it after `tailwindcss`. The library does not depend on Tailwind. One spacing step is `0.5rem`, so `p-2` equals `spacing(2)`.
+
 ## 7.1.1
 
 ### Patch Changes