@freelygive/canvas-utils 0.2.0-dev.52a17e13 → 0.2.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.
- package/README.md +22 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,11 +7,11 @@ Canvas utility components and test helpers for Drupal Canvas projects.
|
|
|
7
7
|
Utility components are scaffolded into your project via
|
|
8
8
|
[@freelygive/npm-scaffold](https://www.npmjs.com/package/@freelygive/npm-scaffold).
|
|
9
9
|
|
|
10
|
-
| Component
|
|
11
|
-
|
|
10
|
+
| Component | Description |
|
|
11
|
+
|---|---|
|
|
12
12
|
| `utils_editor_note` | Editor note component and `isCanvasEditorMode()` detection |
|
|
13
|
-
| `utils_slots`
|
|
14
|
-
| `utils_entity`
|
|
13
|
+
| `utils_slots` | `getSlotChildren()` for parsing Canvas slot content |
|
|
14
|
+
| `utils_entity` | `useMainEntity()` hook for fetching the page's main entity |
|
|
15
15
|
|
|
16
16
|
## Test Helpers
|
|
17
17
|
|
|
@@ -20,8 +20,8 @@ Built JS entry points for use in Storybook test stories.
|
|
|
20
20
|
### Simulating Canvas Slots
|
|
21
21
|
|
|
22
22
|
Canvas delivers slot content as HTML containing `<canvas-island>` custom
|
|
23
|
-
elements. In Storybook, use the canvas-slots helpers to replicate this format
|
|
24
|
-
components can be tested under realistic conditions.
|
|
23
|
+
elements. In Storybook, use the canvas-slots helpers to replicate this format
|
|
24
|
+
so components can be tested under realistic conditions.
|
|
25
25
|
|
|
26
26
|
```js
|
|
27
27
|
import {
|
|
@@ -52,8 +52,8 @@ export const WithCanvasSlot: Story = {
|
|
|
52
52
|
### Simulating Editor Mode
|
|
53
53
|
|
|
54
54
|
Canvas editor mode changes component behaviour (e.g. expanding all accordion
|
|
55
|
-
items for editing). Use the `withEditorMode` decorator to enable editor mode
|
|
56
|
-
the lifetime of a story:
|
|
55
|
+
items for editing). Use the `withEditorMode` decorator to enable editor mode
|
|
56
|
+
for the lifetime of a story:
|
|
57
57
|
|
|
58
58
|
```js
|
|
59
59
|
import { withEditorMode } from '@freelygive/canvas-utils/testing/editor-mode';
|
|
@@ -65,11 +65,11 @@ export const InEditorMode: Story = {
|
|
|
65
65
|
```
|
|
66
66
|
|
|
67
67
|
The decorator enables editor mode before the first render and cleans up on
|
|
68
|
-
unmount via `useEffect`, so state is restored even when tests are interrupted
|
|
69
|
-
Storybook navigates away.
|
|
68
|
+
unmount via `useEffect`, so state is restored even when tests are interrupted
|
|
69
|
+
or Storybook navigates away.
|
|
70
70
|
|
|
71
|
-
`enableEditorMode()` and `disableEditorMode()` are also exported for cases
|
|
72
|
-
need direct control.
|
|
71
|
+
`enableEditorMode()` and `disableEditorMode()` are also exported for cases
|
|
72
|
+
that need direct control.
|
|
73
73
|
|
|
74
74
|
## Setup
|
|
75
75
|
|
|
@@ -97,16 +97,16 @@ Running `npm install` will scaffold the utility components into
|
|
|
97
97
|
|
|
98
98
|
### canvas-slots
|
|
99
99
|
|
|
100
|
-
| Export
|
|
101
|
-
|
|
102
|
-
| `rawProp(value)`
|
|
103
|
-
| `createCanvasIsland(props)` | Creates a `<canvas-island>` HTML string from a props object
|
|
104
|
-
| `createCanvasSlot(html)`
|
|
100
|
+
| Export | Description |
|
|
101
|
+
|---|---|
|
|
102
|
+
| `rawProp(value)` | Wraps a value in the `["raw", value]` tuple format used by Canvas island props |
|
|
103
|
+
| `createCanvasIsland(props)` | Creates a `<canvas-island>` HTML string from a props object |
|
|
104
|
+
| `createCanvasSlot(html)` | Creates a React element simulating a Canvas slot for `getSlotChildren()` to parse |
|
|
105
105
|
|
|
106
106
|
### editor-mode
|
|
107
107
|
|
|
108
|
-
| Export
|
|
109
|
-
|
|
110
|
-
| `withEditorMode`
|
|
111
|
-
| `enableEditorMode()`
|
|
112
|
-
| `disableEditorMode()` | Removes `window.drupalSettings.canvas`
|
|
108
|
+
| Export | Description |
|
|
109
|
+
|---|---|
|
|
110
|
+
| `withEditorMode` | Storybook decorator — enables editor mode before render, cleans up on unmount |
|
|
111
|
+
| `enableEditorMode()` | Sets `window.drupalSettings.canvas` to simulate Canvas editor mode |
|
|
112
|
+
| `disableEditorMode()` | Removes `window.drupalSettings.canvas` |
|