@affinda/react 0.0.18 → 0.0.20
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
CHANGED
|
@@ -177,6 +177,8 @@ import { Section, Heading, Text } from '@affinda/react';
|
|
|
177
177
|
- `background`: `"white"` | `"level1"` | `"dark"` | `"inkwell"`
|
|
178
178
|
- `container`: boolean - Auto-wraps content in Container
|
|
179
179
|
|
|
180
|
+
> **Contrast helper:** When `background="dark"` or `background="inkwell"`, `Section` automatically exposes CSS variables so nested `Heading`, `Text`, and `TypographyLockup` components render in mist-green, even if you forget to set `theme="dark"`. Buttons still need `darkBackground={true}` (see below).
|
|
181
|
+
|
|
180
182
|
### Card with Photo Background
|
|
181
183
|
|
|
182
184
|
Cards now support photo backgrounds with gradient overlays.
|
|
@@ -325,11 +327,12 @@ import { HeroSection, PaperclipDecoration } from '@affinda/react';
|
|
|
325
327
|
**Button**
|
|
326
328
|
- Primary actions: Use `variant="primary"` (sparingly, 1-2 per screen)
|
|
327
329
|
- Secondary actions: Use `variant="secondary"`
|
|
328
|
-
- Sizes: `small`, `default
|
|
330
|
+
- Sizes: `small`, `default`
|
|
329
331
|
- Can include icons in left or right slots
|
|
332
|
+
- On dark backgrounds, pass `darkBackground={true}` so borders/text flip automatically
|
|
330
333
|
|
|
331
334
|
```tsx
|
|
332
|
-
<Button variant="primary"
|
|
335
|
+
<Button variant="primary">Sign Up Now</Button>
|
|
333
336
|
<Button variant="secondary">Learn More</Button>
|
|
334
337
|
```
|
|
335
338
|
|
|
@@ -1,8 +1,22 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
export interface PaperclipDecorationProps {
|
|
2
3
|
className?: string;
|
|
3
|
-
style?:
|
|
4
|
+
style?: React.CSSProperties;
|
|
5
|
+
/** Slot name for use inside web components like HeroSection */
|
|
6
|
+
slot?: string;
|
|
4
7
|
}
|
|
5
8
|
/**
|
|
6
|
-
* Decorative paperclip vector graphic for hero sections
|
|
9
|
+
* Decorative paperclip vector graphic for hero sections.
|
|
10
|
+
*
|
|
11
|
+
* When used inside HeroSection, pass slot="decoration" and position with style:
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* <HeroSection variant="dark" withDecoration={true}>
|
|
15
|
+
* <PaperclipDecoration
|
|
16
|
+
* slot="decoration"
|
|
17
|
+
* style={{ position: 'absolute', bottom: -80, right: -800 }}
|
|
18
|
+
* />
|
|
19
|
+
* <Heading>...</Heading>
|
|
20
|
+
* </HeroSection>
|
|
7
21
|
*/
|
|
8
|
-
export declare function PaperclipDecoration({ className, style }: PaperclipDecorationProps): any;
|
|
22
|
+
export declare function PaperclipDecoration({ className, style, slot }: PaperclipDecorationProps): any;
|
|
@@ -2,9 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
// @ts-nocheck
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
/**
|
|
5
|
-
* Decorative paperclip vector graphic for hero sections
|
|
5
|
+
* Decorative paperclip vector graphic for hero sections.
|
|
6
|
+
*
|
|
7
|
+
* When used inside HeroSection, pass slot="decoration" and position with style:
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* <HeroSection variant="dark" withDecoration={true}>
|
|
11
|
+
* <PaperclipDecoration
|
|
12
|
+
* slot="decoration"
|
|
13
|
+
* style={{ position: 'absolute', bottom: -80, right: -800 }}
|
|
14
|
+
* />
|
|
15
|
+
* <Heading>...</Heading>
|
|
16
|
+
* </HeroSection>
|
|
6
17
|
*/
|
|
7
|
-
export function PaperclipDecoration({ className, style }) {
|
|
8
|
-
|
|
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 }) }));
|
|
18
|
+
export function PaperclipDecoration({ className, style, slot }) {
|
|
19
|
+
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, slot: slot, 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
20
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@affinda/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20",
|
|
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.11",
|
|
20
20
|
"@stencil/react-output-target": "^1.2.0"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|