@leabankab/component-library 8.6.0 → 8.7.0

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Changelog
 
+## 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
+
+- 9516cbb: Description in dialog gets text.base instead of text.subtle
+- 9516cbb: A `Stack`, `HStack`, `Grid` or `GridItem` inside another no longer takes the outer one's `direction`, `gap`, `columns` or `span`. A prop it isn't given now falls back to its default, as documented: a nested `Stack` is a column with no gap, a nested `Grid` has 12 columns, and a `GridItem` without `span` covers the row. Apps that reset these styles themselves can drop that CSS.
+
 ## 8.6.0
 
 ### Minor Changes