@leabankab/component-library 6.1.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,218 @@
 # Changelog
 
+## 7.1.0
+
+### Minor Changes
+
+- 2471d97: Accordion variant and styling updates
+
+## 7.0.0
+
+### Major Changes
+
+- d415e5f: Rebuild `Button`, `IconButton` and `DownloadTrigger` on Base UI with a CSS Module, and add `CloseButton`.
+
+  The buttons no longer wrap MUI, so they render styled without `LeaProvider`. All four share one stylesheet and the same `variant`, `color` and `size` props:
+
+  ```tsx
+  // Before
+  <Button variant="outlined" color="error" size="small">Delete</Button>
+  <Button component={NextLink} href="/about">About</Button>
+
+  // After
+  <Button variant="secondary" color="danger" size="sm">Delete</Button>
+  <Button render={<NextLink href="/about" />}>About</Button>
+  ```
+
+  Breaking changes to `Button`, `IconButton` and `DownloadTrigger`:
+
+  - `variant`: `"contained"` / `"outlined"` become `"primary"` / `"secondary"`, and the new `"tertiary"` is a ghost button (default `"primary"`). `"text"` is removed — use `Link` for a link inside running text.
+  - `color`: `"primary"`, `"secondary"`, `"info"` and `"error"` are replaced by `"accent"` (purple), `"neutral"` (black) and `"danger"` (red) (default `"accent"`).
+  - `size`: `"small"` / `"large"` become `"sm"` / `"md"` / `"lg"` (default `"md"`).
+  - `component` is replaced by Base UI's `render`. A `render` element with `href` or `to` renders as a real link without button semantics, so `<Button render={<a href="/about" />}>` announces as a link.
+  - `sx` and every other MUI `Button` / `IconButton` prop is gone, including `loadingPosition`, `loadingIndicator`, `fullWidth` and `disableElevation`. Use `className` or `style`.
+  - `IconButton` now requires exactly one of `aria-label` or `aria-labelledby` — an icon button without an accessible name no longer compiles.
+  - `disabled` now renders a greyscale button in every variant.
+
+  Kept: `startIcon`, `endIcon` and `loading`. While `loading`, the button is disabled, keeps its colour at reduced opacity, swaps `startIcon` for a spinner and sets `aria-busy`. The new `loadingLabel` announces the busy state through a visually-hidden `role="status"` region.
+
+  New:
+
+  - `CloseButton` — an icon button with a built-in X and a translated default accessible name ("Lukk", "Stäng", …). Pass `label` to override it.
+  - The buttons forward refs, so they compose with Base UI triggers: `<Dialog.Trigger render={<Button />}>`.
+
+  Unchanged:
+
+  - `ActionButton` is still an MUI button.
+  - The `MuiButton` and `MuiIconButton` theme overrides remain, so MUI's own `Button` and `IconButton` (and those MUI renders inside `Autocomplete` and `Alert`) look as before.
+
+- d415e5f: Rebuild `Accordion` on Base UI with CSS Modules.
+
+  The MUI `Accordion` wrapper and its re-exported `AccordionSummary` /
+  `AccordionDetails` are replaced by a single `Accordion` namespace that mirrors
+  Base UI's composition. `src/theme/components/accordion.theme.ts` is gone —
+  styling now lives in `accordion.module.css` and reads the theme's CSS
+  variables.
+
+  The two variants are now `outline` (a `border.base` outline, default) and
+  `solid` (borderless with a white fill), replacing `outlined` / `filled`.
+
+  ```diff
+  - import { Accordion, AccordionSummary, AccordionDetails } from "@leabankab/component-library";
+  + import { Accordion } from "@leabankab/component-library";
+
+  - <Accordion variant="outlined" defaultExpanded>
+  -   <AccordionSummary id="summary" aria-controls="panel">
+  -     Question
+  -   </AccordionSummary>
+  -   <AccordionDetails>Answer</AccordionDetails>
+  - </Accordion>
+  + <Accordion.Root variant="outline" defaultValue={["faq"]}>
+  +   <Accordion.Item value="faq">
+  +     <Accordion.Header>
+  +       <Accordion.Trigger>Question</Accordion.Trigger>
+  +     </Accordion.Header>
+  +     <Accordion.Panel>Answer</Accordion.Panel>
+  +   </Accordion.Item>
+  + </Accordion.Root>
+  ```
+
+  Other changes to be aware of:
+
+  - `id` / `aria-controls` are no longer passed by hand. Base UI generates the
+    ids and wires `aria-expanded`, `aria-controls` and the panel's `region` role.
+  - `defaultExpanded` becomes `defaultValue={[itemValue]}`; `expanded` /
+    `onChange` become `value` / `onValueChange` on `Accordion.Root`.
+  - Allowing several panels open at once now needs `multiple` on
+    `Accordion.Root` (previously the default for separate `Accordion` elements).
+  - `AccordionProps`, `AccordionSummaryProps` and `AccordionDetailsProps` are
+    replaced by `Accordion.RootProps`, `Accordion.ItemProps`,
+    `Accordion.HeaderProps`, `Accordion.TriggerProps` and
+    `Accordion.PanelProps`.
+  - The library now emits a stylesheet. The ES build imports it automatically;
+    consumers on the UMD build should import `@leabankab/component-library/styles.css`.
+
+- d415e5f: Rebuild `Dialog` and `Drawer` on Base UI with CSS Modules, and add a fullscreen-on-mobile option to `Dialog`.
+
+  `Dialog` and `Drawer` are no longer renderable components — they are namespaces of composable parts, matching `Accordion`:
+
+  ```tsx
+  // Before
+  <Dialog open={open} onClose={handleClose} maxWidth="xs">
+    <DialogTitle>Title</DialogTitle>
+    <DialogContent>Body</DialogContent>
+  </Dialog>
+
+  // After
+  <Dialog.Root open={open} onOpenChange={setOpen}>
+    <Dialog.Portal>
+      <Dialog.Backdrop />
+      <Dialog.Viewport>
+        <Dialog.Popup size="xs">
+          <Dialog.Header>
+            <Dialog.Title>Title</Dialog.Title>
+            <Dialog.CloseButton />
+          </Dialog.Header>
+          <Dialog.Content>Body</Dialog.Content>
+        </Dialog.Popup>
+      </Dialog.Viewport>
+    </Dialog.Portal>
+  </Dialog.Root>
+  ```
+
+  `Dialog` exposes `Root`, `Trigger`, `Portal`, `Backdrop`, `Viewport`, `Popup`, `Header`, `Title`, `Description`, `Content`, `Close` and `CloseButton`. `Drawer` exposes the same, plus `Handle`.
+
+  Breaking changes to `SimpleDialog` and `SimpleDrawer`:
+
+  - `onClose(event, reason)` is replaced by Base UI's `onOpenChange(open, eventDetails)`. The reason is on `eventDetails.reason` and now covers `"outside-press"`, `"escape-key"`, `"close-press"`, `"trigger-press"` and (for the drawer) `"swipe"`.
+  - `SimpleDialog`'s `maxWidth` / `fullWidth` are replaced by `size` (`"xs" | "sm" | "md" | "lg"`, default `"sm"`); the widths match the MUI values they replace.
+  - `SimpleDrawer`'s `anchor` is replaced by `side` (`"left" | "right" | "top" | "bottom"`, default `"right"`). `side` also sets the swipe-to-dismiss direction, so the two can never disagree.
+  - Every other MUI `Dialog` / `Drawer` prop is gone. Resize a drawer with the `--drawer-size` custom property instead of `slotProps.paper`.
+
+  New:
+
+  - `Dialog`'s `fullScreenOnMobile` fills the screen below 600px instead of floating as a card.
+  - Drawers can be swiped away, and `side="bottom"` / `"top"` render as sheets with a grab handle and a rounded inner edge.
+
+  Also:
+
+  - The `MuiDialog`, `MuiDialogTitle`, `MuiDialogContent` and `MuiDrawer` theme overrides have been removed. If you render MUI's own `Dialog` or `Drawer` with our theme, they are no longer styled.
+  - Side drawers are now `min(22.5rem, 100vw)` wide. The theme always intended this, but its `.MuiDrawer-paperAnchorRight` selector never matched, so panels previously sized to their content.
+  - `DatePicker`'s mobile sheet is built on the new `Drawer`. Its appearance is unchanged, and it can now be swiped away.
+
+### Minor Changes
+
+- d415e5f: Add `Switch` and `SimpleAccordion`, and an `iconPosition` prop on the accordion.
+
+  `Switch` is a new form control built on Base UI and styled with a CSS Module.
+  An accessible name is required in TypeScript — exactly one of `aria-label` or
+  `aria-labelledby` — so it can never render nameless.
+
+  ```tsx
+  <Switch aria-label="Analyse-informasjonskapsler" defaultChecked />
+  ```
+
+  `SimpleAccordion` is the props-driven form of `Accordion` for the common
+  title-and-content case. It takes either a single item or an array, and
+  forwards every `Accordion.Root` prop.
+
+  ```tsx
+  <SimpleAccordion title="Levering" content="Tre til fem virkedager." />
+
+  <SimpleAccordion
+    multiple
+    items={[
+      { title: "Levering", content: "Tre til fem virkedager." },
+      { title: "Retur", content: "30 dagers angrerett." },
+    ]}
+  />
+  ```
+
+  `Accordion.Root` and `SimpleAccordion` gain `iconPosition` (`"start"` or
+  `"end"`, defaulting to `"end"`), which moves the expand arrow to the other
+  side of the title. Use `"start"` when the row also carries a control.
+
+  An `action` on a `SimpleAccordion` item — or any child after
+  `Accordion.Trigger` inside `Accordion.Header` — renders on the row beside the
+  title. It sits outside the trigger, because the trigger is a `<button>` and
+  nesting controls in it would be invalid, so it is a separate tab stop and
+  operating it does not open the panel.
+
+  ```tsx
+  <SimpleAccordion
+    iconPosition="start"
+    title="Nødvendige"
+    content={<Text>Alltid påskrudd.</Text>}
+    action={<Switch aria-label="Nødvendige" checked disabled />}
+  />
+  ```
+
+  The accordion's hover and pressed styling moved from the trigger to the header
+  row so it surrounds any such control. A plain accordion is unchanged visually,
+  but the trigger's focus ring now hugs the title and arrow rather than the full
+  row.
+
+- d415e5f: Ship the design tokens as a static stylesheet, so the Base UI components render correctly without a provider.
+
+  `dist/index.css` previously referenced `--mui-*` custom properties without defining any of them — those values only existed once Emotion injected them inside `LeaProvider`. The extracted CSS was therefore inert on a server-rendered first paint, and unusable without MUI on the page at all.
+
+  The tokens are now generated from `src/theme/tokens` into a plain `:root` stylesheet under a `--lea-*` prefix, bundled into `dist/index.css`. As a result `Accordion`, `SimpleAccordion`, `Switch`, `Dialog` and `Drawer` need neither MUI, Emotion nor `LeaProvider` to be styled:
+
+  ```tsx
+  // Works in a server component, with only the stylesheet imported.
+  import "@leabankab/component-library/styles.css";
+  import { SimpleAccordion } from "@leabankab/component-library";
+  ```
+
+  Nothing breaks for existing consumers: `LeaProvider` still works exactly as before, and every component still accepts the same props. The remaining MUI-based components continue to require `LeaProvider`, because their styling still comes from the MUI theme — this is a step towards provider-free rendering, not the end of it.
+
+  Two token values changed as part of owning the emitter:
+
+  - Font weights are now unitless. MUI emitted `--mui-fontWeights-semibold` as `600px`, an invalid `font-weight` that browsers ignore, which `Dialog` and `Drawer` worked around with a hard-coded literal.
+  - The spacing base step is `0.5rem` rather than `8px`. Identical at a default root font size, but it now scales with the user's font-size preference, matching what `spacing()` already returned in TypeScript.
+
+  If you referenced the undocumented `--mui-*` variables directly, switch to the `--lea-*` equivalents: `--lea-palette-*` for semantic colours, `--lea-color-*` for raw scales, and `--lea-radius-*`, `--lea-shadow-*`, `--lea-font-size-*`, `--lea-font-weight-*`, `--lea-duration-*`, `--lea-easing-*`, `--lea-spacing`.
+
 ## 6.1.0
 
 ### Minor Changes

package/README.md

@@ -7,6 +7,7 @@ The goal of this repo is to create a npm-package of components used for Lea Bank
 ## Development
 
 1. [Getting started](docs/development/gettingStarted.md)
+1. [How to create a component](CONTRIBUTING.md) — the two patterns, and which to use for new work
 1. [❗️ Quirks and Caveats ❗️](docs/development/quirks.md)
 1. [FAQ](docs/development/faq.md)