@leabankab/component-library 8.7.0 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 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

package/dist/component-library.es.js

@@ -2033,12 +2033,12 @@ var xr = {
 	Input: "_Input_1ccju_31",
 	Slider: "_Slider_1ccju_83"
 }, Sr = {
-	Control: "_Control_qg3r1_7",
-	Track: "_Track_qg3r1_51",
-	Indicator: "_Indicator_qg3r1_71",
-	Thumb: "_Thumb_qg3r1_87",
-	Range: "_Range_qg3r1_119",
-	HelperText: "_HelperText_qg3r1_131"
+	Control: "_Control_1zreo_12",
+	Track: "_Track_1zreo_56",
+	Indicator: "_Indicator_1zreo_76",
+	Thumb: "_Thumb_1zreo_92",
+	Range: "_Range_1zreo_124",
+	HelperText: "_HelperText_1zreo_136"
 }, Cr = (e) => /* @__PURE__ */ A(k, { children: e.children });
 function wr({ "aria-label": e, "aria-describedby": t }) {
 	return /* @__PURE__ */ A(B.Control, {
@@ -4006,47 +4006,48 @@ function uo({ options: e, value: t, defaultValue: n = "", onValueChange: r, ...i
 	});
 }
 var fo = {
-	Slider: "_Slider_tm1hu_10",
-	Header: "_Header_tm1hu_21",
-	Label: "_Label_tm1hu_28",
-	Value: "_Value_tm1hu_33"
+	Slider: "_Slider_1qpll_10",
+	Header: "_Header_1qpll_21",
+	Label: "_Label_1qpll_28",
+	Value: "_Value_1qpll_33"
 };
 //#endregion
 //#region src/components/form/slider.tsx
-function po({ label: e, "aria-label": t, helperText: n, error: r = !1, min: i = 0, max: a = 100, format: o, locale: s, className: c, ...l }) {
-	let u = f(), d = f();
+function po({ label: e, "aria-label": t, helperText: n, error: r = !1, color: i = "primary", min: a = 0, max: o = 100, format: s, locale: c, className: l, ...u }) {
+	let d = f(), p = f();
 	return /* @__PURE__ */ A(oe.Root, {
 		invalid: r,
 		render: Cr,
 		children: /* @__PURE__ */ j(B.Root, {
-			...l,
-			min: i,
-			max: a,
-			format: o,
-			locale: s,
-			"aria-labelledby": e == null ? void 0 : u,
-			className: G(fo.Slider, c),
+			...u,
+			min: a,
+			max: o,
+			format: s,
+			locale: c,
+			"aria-labelledby": e == null ? void 0 : d,
+			"data-color": i,
+			className: G(fo.Slider, l),
 			children: [
 				/* @__PURE__ */ j("div", {
 					className: fo.Header,
 					children: [e != null && /* @__PURE__ */ A("div", {
-						id: u,
+						id: d,
 						className: fo.Label,
 						children: e
 					}), /* @__PURE__ */ A(B.Value, { className: fo.Value })]
 				}),
 				/* @__PURE__ */ A(wr, {
 					"aria-label": t,
-					"aria-describedby": n == null ? void 0 : d
+					"aria-describedby": n == null ? void 0 : p
 				}),
 				/* @__PURE__ */ A(Tr, {
-					min: i,
-					max: a,
-					format: o,
-					locale: s
+					min: a,
+					max: o,
+					format: s,
+					locale: c
 				}),
 				n != null && /* @__PURE__ */ A(Er, {
-					id: d,
+					id: p,
 					error: r,
 					children: n
 				})