@xsolla/xui-link 0.150.0 → 0.151.0

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.
Files changed (2) hide show
  1. package/README.md +43 -119
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,108 +1,58 @@
1
1
  # Link
2
2
 
3
- A cross-platform React link component that provides accessible navigation with customizable styling. Supports external links with proper security attributes.
3
+ An accessible inline link. Renders an `<a>` element with theme-aware colour, optional underline, and automatic security attributes for external targets.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-link
9
- # or
10
- yarn add @xsolla/xui-link
11
9
  ```
12
10
 
13
- ## Demo
14
-
15
- ### Basic Link
11
+ ## Imports
16
12
 
17
13
  ```tsx
18
- import * as React from 'react';
19
- import { Link } from '@xsolla/xui-link';
20
-
21
- export default function BasicLink() {
22
- return (
23
- <Link href="https://example.com">
24
- Visit Example
25
- </Link>
26
- );
27
- }
28
- ```
29
-
30
- ### With Click Handler
31
-
32
- ```tsx
33
- import * as React from 'react';
34
14
  import { Link } from '@xsolla/xui-link';
35
-
36
- export default function ClickableLink() {
37
- return (
38
- <Link onClick={() => console.log('Link clicked')}>
39
- Click me
40
- </Link>
41
- );
42
- }
43
- ```
44
-
45
- ### External Link
46
-
47
- ```tsx
48
- import * as React from 'react';
49
- import { Link } from '@xsolla/xui-link';
50
-
51
- export default function ExternalLink() {
52
- return (
53
- <Link
54
- href="https://external-site.com"
55
- target="_blank"
56
- >
57
- Open in new tab
58
- </Link>
59
- );
60
- }
61
15
  ```
62
16
 
63
- ### Underlined Link
17
+ ## Quick start
64
18
 
65
19
  ```tsx
66
20
  import * as React from 'react';
67
21
  import { Link } from '@xsolla/xui-link';
68
22
 
69
- export default function UnderlinedLink() {
70
- return (
71
- <Link href="/about" underline={true}>
72
- About Us
73
- </Link>
74
- );
23
+ export default function Example() {
24
+ return <Link href="https://example.com">Visit Example</Link>;
75
25
  }
76
26
  ```
77
27
 
78
- ## Anatomy
28
+ ## API Reference
79
29
 
80
- ```jsx
81
- import { Link } from '@xsolla/xui-link';
30
+ ### `<Link>`
82
31
 
83
- <Link
84
- href="/path" // Link URL
85
- onClick={handleClick} // Click handler
86
- target="_blank" // Link target
87
- rel="noopener" // Link relationship
88
- size="md" // Size variant
89
- underline={false} // Show underline
90
- disabled={false} // Disabled state
91
- color="#007bff" // Custom text color
92
- >
93
- Link Text
94
- </Link>
95
- ```
32
+ | Prop | Type | Default | Description |
33
+ | --- | --- | --- | --- |
34
+ | `children` | `ReactNode` | - | Link content. |
35
+ | `href` | `string` | - | Destination URL. Cleared when `disabled`. |
36
+ | `onClick` | `() => void` | - | Click handler. When provided, `preventDefault()` is called before invoking — browser navigation via `href` is suppressed, so handle navigation yourself (e.g. router push). `href` remains on the `<a>` for right-click and assistive tech. |
37
+ | `target` | `string` | - | Anchor target (e.g. `'_blank'`). When `'_blank'`, `rel="noopener noreferrer"` is added automatically and merged with any caller-supplied `rel`. |
38
+ | `rel` | `string` | - | Additional `rel` tokens. |
39
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Font size preset (12/14/16px). |
40
+ | `underline` | `boolean` | `false` | Underline the text. |
41
+ | `disabled` | `boolean` | `false` | Removes `href`, sets `tabIndex={-1}`, and shows `not-allowed` cursor. |
42
+ | `color` | `string` | theme `control.link.primary` | Custom text colour (ignored when `disabled`). |
43
+ | `testID` | `string` | - | Test identifier. |
44
+
45
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
96
46
 
97
47
  ## Examples
98
48
 
99
- ### Link Sizes
49
+ ### Sizes
100
50
 
101
51
  ```tsx
102
52
  import * as React from 'react';
103
53
  import { Link } from '@xsolla/xui-link';
104
54
 
105
- export default function LinkSizes() {
55
+ export default function Example() {
106
56
  return (
107
57
  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
108
58
  <Link size="sm" href="#">Small Link</Link>
@@ -113,82 +63,56 @@ export default function LinkSizes() {
113
63
  }
114
64
  ```
115
65
 
116
- ### Disabled Link
66
+ ### External link
117
67
 
118
68
  ```tsx
119
69
  import * as React from 'react';
120
70
  import { Link } from '@xsolla/xui-link';
121
71
 
122
- export default function DisabledLink() {
72
+ export default function Example() {
123
73
  return (
124
- <Link href="/disabled" disabled={true}>
125
- Disabled Link
74
+ <Link href="https://example.com" target="_blank">
75
+ Open in a new tab
126
76
  </Link>
127
77
  );
128
78
  }
129
79
  ```
130
80
 
131
- ### Custom Colored Link
81
+ ### Underlined inline link
132
82
 
133
83
  ```tsx
134
84
  import * as React from 'react';
135
85
  import { Link } from '@xsolla/xui-link';
136
86
 
137
- export default function ColoredLink() {
87
+ export default function Example() {
138
88
  return (
139
- <Link href="/custom" color="#ff6600">
140
- Custom Colored Link
141
- </Link>
89
+ <p>
90
+ Read our <Link href="/terms" underline>Terms of Service</Link> and{' '}
91
+ <Link href="/privacy" underline>Privacy Policy</Link>.
92
+ </p>
142
93
  );
143
94
  }
144
95
  ```
145
96
 
146
- ### Inline Links
97
+ ### Disabled
147
98
 
148
99
  ```tsx
149
100
  import * as React from 'react';
150
101
  import { Link } from '@xsolla/xui-link';
151
102
 
152
- export default function InlineLinks() {
103
+ export default function Example() {
153
104
  return (
154
- <p>
155
- Read our <Link href="/terms">Terms of Service</Link> and{' '}
156
- <Link href="/privacy">Privacy Policy</Link> for more information.
157
- </p>
105
+ <Link href="/disabled" disabled>
106
+ Disabled Link
107
+ </Link>
158
108
  );
159
109
  }
160
110
  ```
161
111
 
162
- ## API Reference
163
-
164
- ### Link
165
-
166
- **Link Props:**
167
-
168
- | Prop | Type | Default | Description |
169
- | :--- | :--- | :------ | :---------- |
170
- | children | `ReactNode` | - | **Required.** Link content. |
171
- | href | `string` | - | Link URL. |
172
- | onClick | `() => void` | - | Click handler. |
173
- | target | `string` | - | Link target (e.g., "_blank"). |
174
- | rel | `string` | - | Link relationship attribute. |
175
- | size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
176
- | underline | `boolean` | `false` | Show text underline. |
177
- | disabled | `boolean` | `false` | Disabled state. |
178
- | color | `string` | Theme link color | Custom text color. |
179
- | testID | `string` | - | Test identifier. |
180
-
181
- ## Behavior
182
-
183
- - External links (`target="_blank"`) automatically add `rel="noopener noreferrer"`
184
- - Disabled links prevent navigation and show reduced cursor
185
- - Click handler prevents default navigation when provided
186
- - Hover state reduces opacity
187
-
188
112
  ## Accessibility
189
113
 
190
- - Uses native `<a>` element for semantic HTML
191
- - `role="link"` explicitly set
192
- - `tabIndex="-1"` when disabled
193
- - Focus styles with visible outline
194
- - Disabled links not focusable
114
+ - Renders a native `<a>` with explicit `role="link"`.
115
+ - Disabled links lose their `href` and become unfocusable (`tabIndex={-1}`).
116
+ - Visible focus ring uses the theme's brand border colour.
117
+ - For `target="_blank"`, `rel="noopener noreferrer"` is enforced automatically.
118
+ - Use descriptive link text — avoid generic phrases like "click here".
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-link",
3
- "version": "0.150.0",
3
+ "version": "0.151.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.150.0",
14
- "@xsolla/xui-primitives-core": "0.150.0"
13
+ "@xsolla/xui-core": "0.151.0",
14
+ "@xsolla/xui-primitives-core": "0.151.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0"