@leabankab/component-library 8.7.0 → 8.9.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 8.9.0
+
+### Minor Changes
+
+- 783e06d: `SiteFooter`, `SideNav` and `AlertBanner` in `@leabankab/component-library/website`, and a compact `Select` with icons on its options.
+
+  - `SiteFooter`: the footer of leabank.no. The white logo in a link to the start page (`logo`, `homeRender`), the columns of links (`columns`, each a `title` and `links`, links as in `SiteHeader`), the market select (`market`: the four markets with their flags, sorted by name, calling `onValueChange` with the market's code), the social links (`social`), a button that opens the cookie settings (`onOpenCookieSettings`) and the copyright line (`copyright`), on a near-black band. The titles are `h2` (`titleRender` for another element).
+  - `SideNav`: the two-column page of the Investor Relations pages. A beige sidebar of links (`items`, the current page marked `current`, with `aria-current="page"` and a purple arrow), a `nav` named by `label`, beside a white `Panel size="sm"` with the `breadcrumbs` and the page's content. From 1024px the sidebar is 280px wide (360 from 1312px) and stays in view.
+  - `AlertBanner`: the website's notice, a 48px icon (`icon`, Lucide's `TriangleAlert` by default) beside a `title` and a `text`, in the colour of its `Section`. Not announced and not closable.
+  - `Select`: `size="sm"`, a compact 32px field with its `label` above it; `size="md"` (the default) is unchanged. An option can take an `icon` (20px, decoration), shown before its label in the list and, once chosen, in the field, unless `startAdornment` is given. `SelectSize` is exported.
+
+  New strings: "Marked", "Sosiale medier", "Cookie-innstillinger" and "Sidemeny", in Norwegian, Swedish, Finnish and Spanish.
+
+- 4356e2e: `SiteHeader` in `@leabankab/component-library/website`: the header of leabank.no.
+
+  - A white bar over the brand stripe with the logo (`logo`, in a link to the start page, `homeRender` for a router link), the items (`items`, and `endItems` at the end of the row), the account icon (`account`) and the call to action (`action`, an `ActionButton size="sm"`).
+  - An item is a link (`href`, or a router link in `render`) or a menu of `groups`, each with a `title`, `links` and a `cta`. From 1312px the items are pills and a menu opens under its pill on hover, on a click or from the keyboard, as a panel of links (Base UI's `NavigationMenu`, no `role="menu"`). The closed menus are in the server's markup, hidden, so crawlers find their links.
+  - Below 1312px a menu button opens the items in a dialog from the top (Base UI's `Drawer`): the focus moves into it and back to the button, the page behind does not scroll, and each menu is a row that opens under itself with the item's own page as its first link, one at a time. Its links are not in the page while it is closed, and following a link closes it.
+
+  New strings: "Hovedmeny", "Meny", "Lukk meny" and "Lea Bank, forside", in Norwegian, Swedish, Finnish and Spanish.
+
+## 8.8.0
+
+### Minor Changes
+
+- ece5674: Five more sections in `@leabankab/component-library/website`, the website's grids and lists. The main entry is unchanged.
+
+  - `NavigationGrid`: `LinkCard`s under an optional title, four columns from 1024px with the website's spans (1 + 1 + 2 for an odd number of cards, then 2 + 2), two columns from 768px, one below. Without a title there is no heading and no gap for one.
+  - `HeroServiceGrid`: a `FeaturedImage` with a call to action beside up to four `LinkCard`s two by two, at least 600px tall; `imagePosition` `start` / `end`.
+  - `ServiceCardGrid`: one to four `ServiceCard`s in the website's grid (a large and a narrow card, then a wide row or a third and two thirds); one column below 1024px.
+  - `PartnerList`: `PartnerRow`s sorted by name in the `LeaProvider` language, nine to a page (`pageSize`), with previous and next buttons and `PaginationDots`; `value`, `defaultValue` and `onValueChange` for the page. The new page is announced to screen readers.
+  - `BrandLetters`: three silent looping videos in the letters L, E and A, with a button that pauses and plays them (the website's block has none). They wait for the button under reduced motion.
+
+  The cards of the grids are the children, each put in an item of a list. New strings: "Forrige side" / "Neste side" / "Side 2 av 3" and "Spill av videoene" / "Sett videoene på pause", in Norwegian, Swedish, Finnish and Spanish.
+
+- ced15c5: Five more components in `@leabankab/component-library/website`, the website's interactive sections, and a light-on-dark look for `Slider` in the main entry.
+
+  - `Carousel`: slides in a row that scrolls sideways, on CSS scroll snap (react-slick is not needed): 2.2 in view from 1024px, 1.15 below, as tall as the tallest. Swipe, scroll or use the arrow keys; elevated previous and next buttons and `PaginationDots` move it a place at a time, and the place it comes to rest at is announced. The edges fade into the `Section`'s colour where there is more to scroll. A region that needs a name (`aria-label` or `aria-labelledby`).
+  - `Testimonials`: a title and subtitle, a featured customer with a quote and a video that opens in a dialog (with controls and captions, `videoCaptions`), and the reviews (`TestimonialCard`s) in a `Carousel` named by the title. `videoPosition` `start` / `end`.
+  - `ExpandingCards` and `ExpandingCardsItem`: a row of photo cards in which one is open, twice as wide, with its title, text and `ActionButton`; the card the pointer or the keyboard focus moves into opens, and the last one stays open (`defaultOpen` `"first"` / `"last"`). Every card is open below 1312px. The item takes `surface` (all five), with white text on the dark ones only.
+  - `Calculator`: the layout of the website's savings and refinancing calculator: a `header`, a panel for the sliders (the children), the `results`, worked out by the page and announced when they change, an `action` and a `priceExample`. For the dark surfaces.
+  - `Slider`: `color="contrast"` for a dark surface: white text, fill and thumb, a near-black ring round the thumb and a rail that shows on black. `color="primary"` is the default and looks as before.
+
+  New strings: the carousel ("karusell", "Forrige" / "Neste", "Side 2 av 3") and the video ("Spill av video", "Video fra kunde", "Lukk video"), in Norwegian, Swedish, Finnish and Spanish.
+
+- 3fd37e1: A new import path, `@leabankab/component-library/website`, with the sections leabank.no is built from. It is an entry of its own with its own stylesheet (`dist/website.css`, imported by the entry), so apps that don't import it load nothing more. The main entry is unchanged.
+
+  - `Section`: a band of a page in one of the five surfaces (`surface`), with `spacingTop` and `spacingBottom` (`lg` 112px, `sm` 64px, `none`; less on a phone) and the content in a column of at most 1312px, or 75 % / 60 % of it (`width`). It sets the text colour for what is inside it.
+  - `SectionHeader`: a centred eyebrow, title (`titleSize`), subtitle, a row of actions (only when given) and a price example.
+  - `Hero`: a photo band with the page title, text, action and price example on a white `Panel`.
+  - `CtaBanner`: a big title beside a text, a button and a price example.
+  - `SplitContent`: text beside a photo, with the action centred under both.
+  - `PromoGrid`: a `FeaturedImage` beside one or two photos and a beige block with the title in capitals.
+  - `Stats`: big numbers between rounded bars, each with a title and a text, as a list.
+  - `PaymentFeature`: payment brand logos, a title, a text and actions on a `Panel`, beside a photo.
+
+  Photos take `imageRender` for `next/image`, titles take `titleRender` for the heading level, and calls to action are elements you pass, so router links drop in.
+
 ## 8.7.0
 
 ### Minor Changes