@affinda/react 0.0.17 → 0.0.18
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 +34 -1
- package/dist/components/PaperclipDecoration.js +2 -2
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -131,7 +131,11 @@ The hero section component makes it easy to create marketing page heroes with co
|
|
|
131
131
|
import { HeroSection, Heading, Text, Button, PaperclipDecoration } from '@affinda/react';
|
|
132
132
|
|
|
133
133
|
<HeroSection variant="dark" withDecoration={true} minHeight="60vh">
|
|
134
|
-
|
|
134
|
+
{/* Position the paperclip decoration - adjust bottom/right values as needed */}
|
|
135
|
+
<PaperclipDecoration
|
|
136
|
+
slot="decoration"
|
|
137
|
+
style={{ position: 'absolute', bottom: -80, right: -800 }}
|
|
138
|
+
/>
|
|
135
139
|
<Heading level="1" theme="dark" align="center">
|
|
136
140
|
Harness AI to transform business processes
|
|
137
141
|
</Heading>
|
|
@@ -199,6 +203,35 @@ import { Card, Heading, Text } from '@affinda/react';
|
|
|
199
203
|
- `backgroundImage`: URL to background image
|
|
200
204
|
- `darkOverlay`: boolean - Applies gradient overlay with white text
|
|
201
205
|
|
|
206
|
+
### PaperclipDecoration
|
|
207
|
+
|
|
208
|
+
Decorative SVG paperclip graphic for hero sections.
|
|
209
|
+
|
|
210
|
+
⚠️ **Important**: When using with `HeroSection`, you must manually position the paperclip using inline styles, as the component uses scoped styles rather than shadow DOM.
|
|
211
|
+
|
|
212
|
+
```tsx
|
|
213
|
+
import { HeroSection, PaperclipDecoration } from '@affinda/react';
|
|
214
|
+
|
|
215
|
+
<HeroSection variant="dark" withDecoration={true}>
|
|
216
|
+
<PaperclipDecoration
|
|
217
|
+
slot="decoration"
|
|
218
|
+
style={{
|
|
219
|
+
position: 'absolute',
|
|
220
|
+
bottom: -80, // Adjust to move vertically
|
|
221
|
+
right: -800 // Adjust to move horizontally
|
|
222
|
+
}}
|
|
223
|
+
/>
|
|
224
|
+
{/* Hero content */}
|
|
225
|
+
</HeroSection>
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
**Positioning Tips:**
|
|
229
|
+
- **Negative values** move the decoration outside the viewport (creating a partial reveal effect)
|
|
230
|
+
- **bottom**: Controls vertical position (negative = move down/off-screen)
|
|
231
|
+
- **right**: Controls horizontal position (negative = move right/off-screen)
|
|
232
|
+
- Start with `bottom: -80, right: -800` and adjust to taste
|
|
233
|
+
- The paperclip automatically sits behind content (`z-index: 0`)
|
|
234
|
+
|
|
202
235
|
## Component Guide
|
|
203
236
|
|
|
204
237
|
### When to Use Each Component
|
|
@@ -5,6 +5,6 @@ import * as React from 'react';
|
|
|
5
5
|
* Decorative paperclip vector graphic for hero sections
|
|
6
6
|
*/
|
|
7
7
|
export function PaperclipDecoration({ className, style }) {
|
|
8
|
-
const svgStyle = Object.assign({ display: 'block' }, style || {});
|
|
9
|
-
return (_jsx("svg", { preserveAspectRatio: "none", width: "100%", height: "100%", style:
|
|
8
|
+
const svgStyle = Object.assign({ display: 'block', position: 'absolute' }, style || {});
|
|
9
|
+
return (_jsx("svg", { preserveAspectRatio: "none", width: "100%", height: "100%", style: style, viewBox: "0 0 1212 753", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": true, children: _jsx("path", { d: "M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z", fill: "white", fillOpacity: 0.06 }) }));
|
|
10
10
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@affinda/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.18",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
|
23
23
|
"build": "pnpm run clean && tsc -p tsconfig.json",
|
|
24
|
+
"dev": "tsc -p tsconfig.json --watch",
|
|
24
25
|
"clean": "rm -rf dist"
|
|
25
26
|
}
|
|
26
27
|
}
|