@roadlittledawn/docs-design-system-react 0.1.0 → 0.1.2
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 +19 -9
- package/package.json +7 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
React components for building documentation interfaces.
|
|
4
4
|
|
|
5
|
+
See [package on NPM](https://www.npmjs.com/package/@roadlittledawn/docs-design-system-react).
|
|
6
|
+
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
7
9
|
```bash
|
|
@@ -11,7 +13,11 @@ npm install @roadlittledawn/docs-design-system-react
|
|
|
11
13
|
## Usage
|
|
12
14
|
|
|
13
15
|
```tsx
|
|
14
|
-
import {
|
|
16
|
+
import {
|
|
17
|
+
Callout,
|
|
18
|
+
CodeBlock,
|
|
19
|
+
Card,
|
|
20
|
+
} from "@roadlittledawn/docs-design-system-react";
|
|
15
21
|
```
|
|
16
22
|
|
|
17
23
|
### Importing Styles
|
|
@@ -19,7 +25,7 @@ import { Callout, CodeBlock, Card } from '@roadlittledawn/docs-design-system-rea
|
|
|
19
25
|
Import the component styles in your app:
|
|
20
26
|
|
|
21
27
|
```tsx
|
|
22
|
-
import
|
|
28
|
+
import "@roadlittledawn/docs-design-system-react/styles.css";
|
|
23
29
|
```
|
|
24
30
|
|
|
25
31
|
## Components
|
|
@@ -47,9 +53,7 @@ Syntax-highlighted code with copy functionality.
|
|
|
47
53
|
Expandable/collapsible sections for optional or detailed content.
|
|
48
54
|
|
|
49
55
|
```tsx
|
|
50
|
-
<Collapser title="More details">
|
|
51
|
-
Hidden content revealed on expand.
|
|
52
|
-
</Collapser>
|
|
56
|
+
<Collapser title="More details">Hidden content revealed on expand.</Collapser>
|
|
53
57
|
```
|
|
54
58
|
|
|
55
59
|
### Card
|
|
@@ -68,8 +72,12 @@ Grid layout for organizing multiple cards.
|
|
|
68
72
|
|
|
69
73
|
```tsx
|
|
70
74
|
<CardGrid columns={3}>
|
|
71
|
-
<Card title="Guide 1" href="/guide-1">
|
|
72
|
-
|
|
75
|
+
<Card title="Guide 1" href="/guide-1">
|
|
76
|
+
Description
|
|
77
|
+
</Card>
|
|
78
|
+
<Card title="Guide 2" href="/guide-2">
|
|
79
|
+
Description
|
|
80
|
+
</Card>
|
|
73
81
|
</CardGrid>
|
|
74
82
|
```
|
|
75
83
|
|
|
@@ -103,7 +111,9 @@ Styled anchor with external link detection.
|
|
|
103
111
|
Action button with variants.
|
|
104
112
|
|
|
105
113
|
```tsx
|
|
106
|
-
<Button variant="primary" onClick={handleClick}>
|
|
114
|
+
<Button variant="primary" onClick={handleClick}>
|
|
115
|
+
Click me
|
|
116
|
+
</Button>
|
|
107
117
|
```
|
|
108
118
|
|
|
109
119
|
## Hooks
|
|
@@ -113,7 +123,7 @@ Action button with variants.
|
|
|
113
123
|
Listen for keyboard events.
|
|
114
124
|
|
|
115
125
|
```tsx
|
|
116
|
-
const isPressed = useKeyPress(
|
|
126
|
+
const isPressed = useKeyPress("Escape");
|
|
117
127
|
```
|
|
118
128
|
|
|
119
129
|
## Documentation
|
package/package.json
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roadlittledawn/docs-design-system-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"license": "MIT",
|
|
4
5
|
"description": "React components for documentation design system",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/roadlittledawn/docs-design-system",
|
|
9
|
+
"directory": "packages/react"
|
|
10
|
+
},
|
|
5
11
|
"main": "dist/index.js",
|
|
6
12
|
"types": "dist/index.d.ts",
|
|
7
13
|
"files": [
|