@planningcenter/sweetest-alert 1.0.4 → 1.1.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 +9 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,10 +8,11 @@ A lightweight, React alert/modal dialog component that replaces SweetAlert2 with
|
|
|
8
8
|
yarn add @planningcenter/sweetest-alert
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
In your product’s main CSS file (ex. `app/assets/stylesheets/application.css`) add
|
|
11
|
+
In your product’s main CSS file (ex. `app/assets/stylesheets/application.css`) add the required CSS imports:
|
|
12
12
|
|
|
13
13
|
```css
|
|
14
14
|
@import "@planningcenter/tapestry/dist/index.css";
|
|
15
|
+
@import "@planningcenter/sweetest-alert/style.css";
|
|
15
16
|
```
|
|
16
17
|
|
|
17
18
|
### Peer Dependencies
|
|
@@ -20,8 +21,8 @@ This package requires the following peer dependencies:
|
|
|
20
21
|
|
|
21
22
|
- `react` ^18.3.1
|
|
22
23
|
- `react-dom` ^18.3.1
|
|
23
|
-
- `@planningcenter/tapestry` ^2.
|
|
24
|
-
- `@planningcenter/icons` ^15.
|
|
24
|
+
- `@planningcenter/tapestry` ^2.10.1
|
|
25
|
+
- `@planningcenter/icons` ^15.29.1
|
|
25
26
|
|
|
26
27
|
## Usage
|
|
27
28
|
|
|
@@ -44,8 +45,8 @@ SweetestAlert({
|
|
|
44
45
|
type: "danger",
|
|
45
46
|
title: "Delete Item",
|
|
46
47
|
content: "Are you sure you want to delete this item?",
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
onConfirm: () => console.log("Confirmed"),
|
|
49
|
+
onCancel: () => console.log("Cancelled")
|
|
49
50
|
})
|
|
50
51
|
```
|
|
51
52
|
|
|
@@ -120,8 +121,8 @@ SweetestAlert({
|
|
|
120
121
|
| `title` | `string` | Yes | - | The main heading text displayed at the top of the modal |
|
|
121
122
|
| `content` | `string \| React.ReactNode` | Yes | - | The body content. Accepts plain text or React components |
|
|
122
123
|
| `type` | `"info" \| "success" \| "error" \| "danger" \| "warning"` | No | `"warning"` | The visual type of alert, affects icon and styling |
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
124
|
+
| `onConfirm` | `() => void` | No | - | Callback executed when confirm button is clicked |
|
|
125
|
+
| `onCancel` | `() => void` | No | - | Callback executed when cancel button is clicked |
|
|
125
126
|
| `confirmButton` | `string` | No | `"Okay"` | Custom text for the confirm button |
|
|
126
127
|
| `hideCancel` | `boolean` | No | `false` | When true, hides the cancel button for simple notifications |
|
|
127
128
|
|
|
@@ -139,7 +140,7 @@ yarn install
|
|
|
139
140
|
yarn dev
|
|
140
141
|
```
|
|
141
142
|
|
|
142
|
-
Then open your browser to
|
|
143
|
+
Then open your browser to `http://localhost:3000`. The demo showcases all alert types and features with interactive buttons.
|
|
143
144
|
|
|
144
145
|
### Running Tests
|
|
145
146
|
|