@leabankab/component-library 8.6.1 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,99 @@
 # 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
+
+- c721111: New cards for the website:
+
+  - `LinkCard`: the navigation card, a title and a round arrow, and the whole card is one link (`href`, or a router link in `render`). In five colours through `surface`; on hover it takes the website's purple tint and the arrow slides.
+  - `MediaCard`: a photo and text. Horizontal, a coloured card with the text in one half and the photo in the other from 1024px (`imagePosition`, `imageAsBackground`); vertical, a photo over centred text, for a row of cards. `action` takes an `ActionButton` or a `Link`, `priceExample` the small print.
+  - `ServiceCard`: a card of the website's service grid, with a photo that fills the room the text leaves (`layout="stacked"`) or a square photo before the text (`layout="row"`), an optional icon, in five colours.
+  - `TestimonialCard`: a customer review as a `figure`, with `StarRating`, the quote in quotation marks and the person with an `Avatar`.
+  - `ArticleCard`: an article or a job opening in a list, one link with the title, a two-line excerpt and the facts as beige pills (`variant="post"` or `"job"`); the title is underlined on hover.
+  - `PartnerRow`: text about a partner beside its logo on a white tile, over a line.
+
+  `MediaCard` and `ServiceCard` become one link when `render` is a link (`render={<NextLink href="/lan" />}`). A card that is a link is named by its title and described by its text, and its focus ring shows on light and dark sections. On the dark surfaces the text, the arrow and the price example are white.
+
+- ac44e29: Existing components extended for the website:
+
+  - `ActionButton` takes the website's look: an 18px semibold label (16px on a phone), 32px from the edge and from the arrow, and on hover the label slides towards the arrow while the arrow turns purple and points up. New `size` (`"lg"`, the default, or `"sm"`, 40px tall) and `iconOnly`, which shows only the arrow and keeps the label as the accessible name.
+  - `IconButton` takes `variant="elevated"`: a white disc with a small shadow, for controls over a picture or a coloured section.
+  - `Link` takes `arrow`: a chevron after the text that slides on hover, while the text turns purple, or light purple with `color="contrast"`. Links without `arrow` keep their hover.
+  - `Chip` takes `color="muted"`, the website's beige pill, and `muted` joins `ColorRole`.
+  - `Accordion.Root` and `SimpleAccordion` take `variant="card"`: white cards with 16px corners, for a grey section.
+  - New `SurfaceRole` type (`base`, `subtle`, `muted`, `contrast`, `contrast-accent`), the values of the `surface` prop the website cards and sections will take.
+  - New `websiteBreakpoints` (640, 768, 1024, 1312, 1440), the website's own widths, for the website components.
+
+- a6b0816: New components for the website's content:
+
+  - `Table`, with `TableHead`, `TableBody`, `TableRow`, `TableHeaderCell` and `TableCell`: the website's price table, a 1px line under every row, the first column at the start, the last at the end and the rest centred (`align` on a cell overrides it). 16px text, 14px below 640px; `size` fixes either. The header row is optional, and a header cell at the start of a body row heads that row. A table wider than its column scrolls sideways, and its box can then be reached with the keyboard.
+  - `RichText`: styles text from the CMS (headings, paragraphs, bold, italic, underline, strikethrough, lists, links, quotes, code and images) on the library's text styles, with the website's spacing. It styles only bare elements, so a library component inside keeps its look, and it does not sanitise: an HTML string has to be cleaned before it goes in through `dangerouslySetInnerHTML`.
+  - `Panel`: the website's white box, 64px corners and 64px inside, 32px and 32px below 768px; `size` fixes either.
+  - `FeaturedImage`: a large photo with 64px corners and an optional call to action 32px in from the bottom right; it fills its row from 1024px and is 1 : 0.7 below. `imageRender` takes `next/image`.
+  - `VideoPlayer`: a silent, looping 16 : 9 video with a play / pause button under it (the elevated `IconButton`). It starts by itself once the page has loaded, except under reduced motion, where it waits for the button.
+  - New token `--lea-font-family-mono` (`fontFamilyMono`): the website's Courier New stack, for the code in `RichText`.
+
+  The button names of `VideoPlayer` are translated (no, se, fi, es).
+
+- 41539df: New components for the website, and three website components moved to the website's sizes:
+
+  - `Breadcrumbs`: the way to the current page, in a named `nav`; links through `href` or a router link in `render`.
+  - `Pagination`: numbered pages with previous and next, as buttons or, with `renderLink`, as links. From eight pages it shows the first, the last and the current page with its neighbours.
+  - `PaginationDots`: one dot per page for a carousel or a paged list; each dot is a named button.
+  - `StarRating`: a read-only rating in stars, one image named "4 av 5 stjerner" to a screen reader.
+  - `Avatar`: a round 48px photo on Base UI's `Avatar`, a grey disc until it loads; `imageRender` for `next/image`.
+  - `Skeleton`: a grey block that pulses while content loads, hidden from screen readers.
+  - New shadow token `soft` (`--lea-shadow-soft`, `shadow-soft`): the website's even 6px halo.
+  - `IconButton` `variant="elevated"` is 40px at `md` and takes the `soft` shadow, as on leabank.no. Its `sm` and `lg` sizes are unchanged.
+  - `Chip` takes `size="lg"`, the website's pill (16px semibold, 28px tall), in every colour and variant.
+  - `Accordion` and `SimpleAccordion` `variant="card"` take the website's FAQ spacing: 16px between the cards and inside the header, titles in 18px semibold (16px below 768px), 32px above and below the answer.
+
+  The texts of the new components are translated (no, se, fi, es).
+
+- 54ee507: New design tokens for the website components:
+
+  - Palette roles `bg.hover`, `bg.contrast-hover`, `bg.contrast-accent` and `text.contrast-hover` (`--lea-palette-bg-hover` and so on, `bg-bg-hover` in Tailwind), and in `BgColorToken` and `TextColorToken`, so `<Text color="text.contrast-hover">` works.
+  - `--lea-width-section` (1312px), the content width of a website section; `max-w-section` in Tailwind.
+  - Text styles `title-md` and `title-xl`, headings in the regular weight: `<Text textStyle="title-md">`, `--lea-text-title-md-*` and `text-title-md` in Tailwind.
+
 ## 8.6.1
 
 ### Patch Changes