@affinda/react 0.0.23 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -11
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -26,13 +26,13 @@ defineCustomElements();
|
|
|
26
26
|
### 2. Use Components
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
|
-
import { Button, Navbar, NavItem
|
|
29
|
+
import { Button, Navbar, NavItem } from '@affinda/react';
|
|
30
30
|
|
|
31
31
|
function App() {
|
|
32
32
|
return (
|
|
33
33
|
<div>
|
|
34
|
+
{/* Navbar displays the default Affinda logo automatically */}
|
|
34
35
|
<Navbar>
|
|
35
|
-
<Logo slot="logo" />
|
|
36
36
|
<div slot="start">
|
|
37
37
|
<NavItem href="/products">Products</NavItem>
|
|
38
38
|
</div>
|
|
@@ -377,16 +377,22 @@ import { HeroSection, PaperclipDecoration } from '@affinda/react';
|
|
|
377
377
|
|
|
378
378
|
Site-wide navigation header with responsive design and mobile menu support.
|
|
379
379
|
|
|
380
|
-
**
|
|
381
|
-
- `
|
|
380
|
+
**Props:**
|
|
381
|
+
- `showDefaultLogo` (boolean, default: `true`) - Whether to show the default Affinda logo when no logo slot content is provided
|
|
382
|
+
|
|
383
|
+
**Slots:**
|
|
384
|
+
- `logo` - Brand logo (left side) - *optional*, defaults to Affinda logo
|
|
382
385
|
- `start` - Primary navigation links (center-left)
|
|
383
386
|
- `end` - Secondary navigation and actions (right side)
|
|
384
387
|
- `button` - Call-to-action button (far right)
|
|
385
388
|
|
|
386
389
|
```tsx
|
|
387
390
|
<Navbar>
|
|
388
|
-
{/* Logo slot -
|
|
389
|
-
<Logo slot="logo" />
|
|
391
|
+
{/* Logo slot - optional, defaults to Affinda logo */}
|
|
392
|
+
{/* <Logo slot="logo" /> */}
|
|
393
|
+
|
|
394
|
+
{/* Or use a custom logo */}
|
|
395
|
+
{/* <Logo slot="logo" src="/path/to/custom-logo.svg" alt="My Company" /> */}
|
|
390
396
|
|
|
391
397
|
{/* Start slot - main navigation items */}
|
|
392
398
|
<div slot="start">
|
|
@@ -422,13 +428,19 @@ Site-wide navigation header with responsive design and mobile menu support.
|
|
|
422
428
|
```tsx
|
|
423
429
|
// ❌ WRONG - Direct children are ignored
|
|
424
430
|
<Navbar>
|
|
425
|
-
<Logo />
|
|
426
431
|
<NavItem href="/home">Home</NavItem>
|
|
427
432
|
</Navbar>
|
|
428
433
|
|
|
429
434
|
// ✅ CORRECT - Use slots
|
|
430
435
|
<Navbar>
|
|
431
|
-
<
|
|
436
|
+
<div slot="start">
|
|
437
|
+
<NavItem href="/home">Home</NavItem>
|
|
438
|
+
</div>
|
|
439
|
+
</Navbar>
|
|
440
|
+
|
|
441
|
+
// ✅ ALSO CORRECT - Custom logo via slot
|
|
442
|
+
<Navbar>
|
|
443
|
+
<Logo slot="logo" src="/my-logo.svg" alt="My Company" />
|
|
432
444
|
<div slot="start">
|
|
433
445
|
<NavItem href="/home">Home</NavItem>
|
|
434
446
|
</div>
|
|
@@ -565,10 +577,19 @@ import { getIllustrationUrlByScene } from '@affinda/illustrations';
|
|
|
565
577
|
**Logo**
|
|
566
578
|
- Affinda logo component with consistent sizing
|
|
567
579
|
- Use in Navbar and footer
|
|
568
|
-
-
|
|
580
|
+
- Renders as inline SVG for crisp display at any size
|
|
581
|
+
- Supports custom logos via the `src` prop
|
|
582
|
+
|
|
583
|
+
**Props:**
|
|
584
|
+
- `src` (string, optional) - Custom logo image URL. If provided, displays this instead of the default Affinda logo
|
|
585
|
+
- `alt` (string, default: "Affinda") - Alt text for the logo
|
|
569
586
|
|
|
570
587
|
```tsx
|
|
588
|
+
// Default Affinda logo
|
|
571
589
|
<Logo />
|
|
590
|
+
|
|
591
|
+
// Custom logo
|
|
592
|
+
<Logo src="/path/to/my-logo.svg" alt="My Company" />
|
|
572
593
|
```
|
|
573
594
|
|
|
574
595
|
**ColorSwatch**
|
|
@@ -657,12 +678,12 @@ function Hero() {
|
|
|
657
678
|
### Navigation
|
|
658
679
|
|
|
659
680
|
```tsx
|
|
660
|
-
import { Navbar, NavItem,
|
|
681
|
+
import { Navbar, NavItem, Button } from '@affinda/react';
|
|
661
682
|
|
|
662
683
|
function Header() {
|
|
663
684
|
return (
|
|
685
|
+
// Navbar displays the default Affinda logo automatically
|
|
664
686
|
<Navbar>
|
|
665
|
-
<Logo slot="logo" />
|
|
666
687
|
<div slot="start">
|
|
667
688
|
<NavItem hierarchy="primary" variant="01" href="/">
|
|
668
689
|
Home
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@affinda/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.24",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@affinda/icons": "^0.0.3",
|
|
19
|
-
"@affinda/wc": "^0.0.
|
|
19
|
+
"@affinda/wc": "^0.0.15",
|
|
20
20
|
"@stencil/react-output-target": "^1.2.0"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|