@deriv-ds/design-intelligence-layer 0.5.1 → 0.6.0

package/AGENTS.md

@@ -56,9 +56,10 @@ cp node_modules/@deriv-ds/design-intelligence-layer/guides/rules/design-system-c
 2. **Tokens only** — use semantic token classes (`bg-prominent`, `text-on-prominent`, `border-border`, etc.). Never hardcode hex values, raw Tailwind palette colors, or CSS variables.
 3. **Design principles and accessibility first** — every screen must reflect the 8 design principles and meet the accessibility standards (WCAG 2.1 AA). Run both checklists before shipping.
 4. **No separate installs** — do not install `tailwindcss` or other bundled dependencies separately. Never install or import `lucide-react` or any other icon library.
-5. **Icons** — use the exported `<Icon />` component (FontAwesome Pro): `<Icon name="bell" weight="bold" />`. Three weights: `regular` (unselected nav, subtle), `bold` (default), `fill` (selected nav, strong actions). Full catalog of names, weights, and intent → icon mappings: `guides/design-system-guide/icon-reference.md`. At runtime, `ICON_NAMES` and `iconAvailableWeights(name)` are exported from the package.
+5. **Icons** — use the exported `<Icon />` component (`@deriv/quill-icons`): `<Icon name="bell" weight="bold" />`. Three weights: `regular` (unselected nav, subtle), `bold` (default), `fill` (selected nav, strong actions). Full catalog of names, weights, and intent → icon mappings: `guides/design-system-guide/icon-reference.md`. At runtime, `ICON_NAMES` and `iconAvailableWeights(name)` are exported from the package.
 6. **After a version bump** — re-copy the rules file into `.cursor/rules/`, check for stale local component copies, and align them with the package.
-7. **Blocks are exported from the package** — Blocks (Hero sections, NavBar patterns) are importable directly from `@deriv-ds/design-intelligence-layer`. When a user asks to use a block by name, import it:
+7. **No `Alert` / `Banner` component** — they do not exist. For an inline status/alert message use **`SectionMessage`** (`role="alert"`; variants `default | information | success | warning | danger`). For a dismissible banner bar use **`NotificationBanner`** (`title`, `description`, `onClose`). Never invent an `Alert` or `Banner` import.
+8. **Blocks are exported from the package** — Blocks (Hero sections, NavBar patterns) are importable directly from `@deriv-ds/design-intelligence-layer`. When a user asks to use a block by name, import it:
    ```tsx
    import { HeroMobileHomeTitle, HeroMobileHomeTotalAssets } from "@deriv-ds/design-intelligence-layer"
    import { HeroDesktopHomeOnboarding, HeroDesktopHomeWithBalance } from "@deriv-ds/design-intelligence-layer"

package/CHANGELOG.md

@@ -0,0 +1,63 @@
+# Changelog
+
+All notable changes to `@deriv-ds/design-intelligence-layer` are documented here.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.5.2]
+
+### Added
+- **Paired on-surface foreground tokens** — every surface now has a matching legible
+  foreground utility (`text-on-primary-surface`, `text-on-secondary-surface`,
+  `text-on-prominent`, `text-on-subtle`), so pairings like `bg-prominent text-on-prominent`
+  are always self-consistent and theme-aware. Additive only — existing components are
+  unchanged.
+- **Test suite** — Vitest + React Testing Library smoke/render tests for core components
+  (Button, Badge, SectionMessage, NotificationBanner, Icon), wired into CI.
+- `PhoneInput` and `EmailOrPhoneInput` components.
+- This `CHANGELOG.md`.
+
+### Changed
+- **Button** — size scale renamed to `XL` / `LG` / `MD` / `SM` with corrected token values.
+- Consistent cursor states across interactive components.
+
+### Fixed
+- `EmailOrPhoneInput` now restores focus to the email `Input` when reverting phone → email.
+
+### Documentation
+- Documented the `Alert` → `SectionMessage` and `Banner` → `NotificationBanner` mapping in
+  the README and `AGENTS.md`, so consumers and AI agents reach the right primitive.
+
+## [0.5.1]
+
+### Added
+- **Referral** block + playground page.
+
+## [0.5.0]
+
+### Added
+- **Blocks**: Home blocks, Header block (`HeaderApp`, `HeaderAppHome`, `HeaderBranding`),
+  `FeedbackSuccessScreen`, `AccountActivatedCard`, `TradingAccountCard`, Trading blocks
+  (Action Buttons, Empty state), `HomeHighlightCard` / `HomeHighlights`.
+
+### Changed
+- **Icons** — migrated from FontAwesome Pro to `@deriv/quill-icons`, exposed via the
+  `<Icon />` wrapper with three weights (`regular`, `bold`, `fill`). Static block assets
+  replaced with Quill Illustration icons.
+
+### Fixed
+- Icon size variants, `Tag`/`Chip` `asChild`, checkbox fill icon.
+- `HomeHighlights` dark-mode colors.
+
+## [0.4.5]
+
+### Security
+- Patched CVE-2026-53550 and CVE-2026-49356 (dependency bumps).
+
+[Unreleased]: https://github.com/deriv-com/design-intelligence-layer/compare/v0.5.1...HEAD
+[0.5.1]: https://github.com/deriv-com/design-intelligence-layer/compare/v0.5.0...v0.5.1
+[0.5.0]: https://github.com/deriv-com/design-intelligence-layer/compare/v0.4.5...v0.5.0
+[0.4.5]: https://github.com/deriv-com/design-intelligence-layer/releases/tag/v0.4.5

package/README.md

@@ -81,7 +81,7 @@ npm install react react-dom tailwindcss
 
 ### Icons
 
-Icons use **FontAwesome Pro 6** (Deriv-licensed). Do not install `lucide-react` — it is not used in this package. Use the bundled `Icon` component:
+Icons are provided by **`@deriv/quill-icons`** via the bundled `Icon` component — do not install `lucide-react` or `@fortawesome/*`. Three weights cover the density range: `regular` (thin outline), `bold` (medium outline — default), and `fill` (solid). Use the bundled `Icon` component:
 
 ```tsx
 import { Icon } from "@deriv-ds/design-intelligence-layer"
@@ -96,7 +96,7 @@ The full icon catalog is at `node_modules/@deriv-ds/design-intelligence-layer/gu
 
 ## What's inside
 
-- **61 UI components** — buttons, forms, dialogs, charts, sidebars, and more
+- **63 UI components** — buttons, forms, dialogs, charts, sidebars, and more
 - **Design tokens** — three-layer architecture (primitives → foundation semantics → component tokens) synced from Figma
 - **Light + Dark themes** — toggle `.dark` on `<html>` to switch; every semantic token has a paired override
 - **Inter typography** — heading (mega → h6) and body (xl → xs) scales ready to use
@@ -132,6 +132,7 @@ The full icon catalog is at `node_modules/@deriv-ds/design-intelligence-layer/gu
 | Direction | `DirectionProvider, useDirection` |
 | Drawer | `Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose` |
 | Dropdown Menu | `DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, ...` |
+| Email or Phone Input | `EmailOrPhoneInput` |
 | Empty State | `Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent` |
 | Field | `Field, FieldLabel, FieldDescription, FieldError, FieldGroup` |
 | Form | `Form, FormItem, FormLabel, FormControl, FormField, FormMessage` |
@@ -149,6 +150,7 @@ The full icon catalog is at `node_modules/@deriv-ds/design-intelligence-layer/gu
 | Notification | `NotificationBanner, NotificationItem, NotificationDivider` |
 | OTP Field | `CodeInput, CodeInputGroup, CodeInputSlot, CodeInputSeparator` |
 | Pagination | `Pagination, PaginationContent, PaginationLink, ...` |
+| Phone Input | `PhoneInput` (also exports `COUNTRIES, DEFAULT_COUNTRY, Country`) |
 | Popover | `Popover, PopoverTrigger, PopoverContent, PopoverAnchor` |
 | Progress | `Progress` |
 | Radio Group | `RadioGroup, RadioGroupItem` |
@@ -269,8 +271,8 @@ Tags are 4px-radius chips for filtering, metadata, and categorisation. Two visua
 <Tag variant="fill" />     // tinted background (red @ 8%, etc.)
 
 // Sizes
-<Tag size="sm" />   // 24px · 12px font · 16px icon · 4px gap
-<Tag size="md" />   // 32px · 14px font · 18px icon · 8px gap
+<Tag size="sm" />   // 24px · 12px font · 18px icon · 4px gap
+<Tag size="md" />   // 32px · 14px font · 20px icon · 4px gap
 ```
 
 ## Section message variants
@@ -283,15 +285,34 @@ Tags are 4px-radius chips for filtering, metadata, and categorisation. Two visua
 <SectionMessage variant="danger" />      // Red tint + danger icon
 
 // Sizes
-<SectionMessage size="sm" />  // 14px message · 16px title · 20px icon
-<SectionMessage size="md" />  // 16px message · 18px title · 22px icon
+<SectionMessage size="sm" />  // 14px message · 16px title · 24px icon
+<SectionMessage size="md" />  // 16px message · 18px title · 24px icon
 ```
 
-## Alert variants
+## Alert & Banner — use SectionMessage / NotificationBanner
+
+There is **no** `Alert` or `Banner` component in this package. The same patterns are covered
+by existing primitives — reach for these instead:
+
+| You may be looking for | Use this | Import |
+|---|---|---|
+| `Alert` (inline status message) | **`SectionMessage`** | `SectionMessage, SectionMessageIcon, SectionMessageTitle, SectionMessageDescription` |
+| `Banner` (dismissible notice bar) | **`NotificationBanner`** | `NotificationBanner, NotificationItem, NotificationDivider` |
 
 ```tsx
-<Alert variant="info" />    // blue (#0777C4 / #53B9FF) — informational (default)
-<Alert variant="error" />   // red (#C40000 / #FF4D4D) — error state
+// Alert → SectionMessage (role="alert"; variants: default | information | success | warning | danger)
+<SectionMessage variant="information">
+  <SectionMessageIcon><Icon name="circle-info" weight="fill" /></SectionMessageIcon>
+  <SectionMessageTitle>Heads up</SectionMessageTitle>
+  <SectionMessageDescription>Your session expires soon.</SectionMessageDescription>
+</SectionMessage>
+
+// Banner → NotificationBanner (dismissible via onClose)
+<NotificationBanner
+  title="New feature available"
+  description="Check out the latest update."
+  onClose={() => setOpen(false)}
+/>
 ```
 
 ## Component behaviour notes
@@ -706,7 +727,7 @@ This project uses @deriv-ds/design-intelligence-layer (Quill Design System). Bef
 4. Read node_modules/@deriv-ds/design-intelligence-layer/guides/brand-voice/quill-brand-voice.md — apply the brand voice: channel-specific voice, banned phrases, vocabulary, and formatting rules for all player-facing copy
 5. Check if the component exists in the package — import it, don't re-implement
 6. Use only design token classes (bg-prominent, text-on-prominent, border-border-subtle, etc.) — no hardcoded hex or raw Tailwind palette colors
-7. Do not install lucide-react — icons use FontAwesome Pro via the bundled Icon component; do not install tailwindcss or other bundled dependencies separately
+7. Do not install lucide-react — icons come from @deriv/quill-icons via the bundled Icon component; do not install tailwindcss or other bundled dependencies separately
 8. If no token exists for a value, ask before using a hardcoded value
 9. After upgrading the package: prefer package imports over local copies of components; if replacing local UI code with the package version, tell the user what was overwritten; re-copy guides/rules/design-system-consuming-project.mdc into .cursor/rules if using Cursor
 
@@ -732,7 +753,7 @@ See node_modules/@deriv-ds/design-intelligence-layer/README.md for complete toke
 | `bg-[var(--primary)]` | `bg-primary` | Raw CSS var — Tailwind v4 maps tokens directly |
 | `hsl(var(--primary))` | `bg-primary` | Tailwind v3 syntax — not needed in v4 |
 | `font-[Plus_Jakarta_Sans]` | `font-sans` (Inter) | Project font is Inter, not Plus Jakarta Sans |
-| `import ... from 'lucide-react'` | `import { Icon } from "@deriv-ds/design-intelligence-layer"` | Icons use FontAwesome Pro — lucide-react is not in this package |
+| `import ... from 'lucide-react'` | `import { Icon } from "@deriv-ds/design-intelligence-layer"` | Icons come from @deriv/quill-icons — lucide-react is not in this package |
 
 ---
 
@@ -740,7 +761,7 @@ See node_modules/@deriv-ds/design-intelligence-layer/README.md for complete toke
 
 These are bundled with the package. Installing them separately can cause version conflicts:
 
-- `lucide-react` — **not used**; icons are FontAwesome Pro via the bundled `Icon` component
+- `lucide-react` — **not used**; icons come from `@deriv/quill-icons` via the bundled `Icon` component
 - `radix-ui` — headless primitives
 - `class-variance-authority` — variant API
 - `cmdk` — command palette
@@ -808,3 +829,10 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 - **shadcn/ui** (New York style) — base component primitives
 - **Radix UI** — accessible headless primitives
 - **Figma** — source of truth for design tokens
+
+---
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for the full version history. The file follows the
+[Keep a Changelog](https://keepachangelog.com/) format and ships with the package.