Drawer update

.editorconfig

@@ -13,7 +13,7 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 indent_style = tab
 
-[*.{js}]
+[*.{js,scss}]
 indent_style = space
 indent_size = 2
 

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
 	root: true,
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
-		project: [ './jsconfig.json', 'jsconfig.eslint.json' ],
+		project: [ './tsconfig.json', 'tsconfig.eslint.json' ],
 	},
 	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
 	settings: {
@@ -15,7 +15,7 @@ module.exports = {
 		'import/resolver': {
 			typescript: {
 				alwaysTryTypes: true,
-				project: [ './jsconfig.json', 'jsconfig.eslint.json' ],
+				project: [ './tsconfig.json', 'tsconfig.eslint.json' ],
 			},
 		},
 	},

.lintstagedrc

@@ -1,5 +1,6 @@
 {
 	"**/*.(json|yml|yaml)": "prettier --write",
+	"**/*.(css|scss|sass)": "stylelint --fix",
 	"**/*.(js|jsx|cjs|mjs|ts|tsx)": "eslint --ext .js,.jsx,.cjs,.mjs,.ts,.tsx --fix",
 	"**/*.php": "php vendor/bin/phpcbf --standard=phpcs.xml.dist -s --report=summary"
 }

.stylelintrc

@@ -0,0 +1,3 @@
+{
+	"extends": [ "@wordpress/stylelint-config/scss" ]
+}

includes/demo.php

@@ -11,7 +11,7 @@
 use WP_List_Table;
 
 /**
- * Adds WP Notify icon after the user avatar in the top admin bar in the "secondary" position
+ * Adds WP Notifications icon after the user avatar in the top admin bar in the "secondary" position
  *
  * @param WP_Admin_Bar $wp_admin_bar Toolbar instance.
  */
@@ -20,22 +20,11 @@ function admin_bar_item( WP_Admin_Bar $wp_admin_bar ) {
 		return;
 	}
 
-	$aside = sprintf(
-		'<aside id="wp-notification-hub">
-		<div class="wp-notification-hub-wrapper">
-			<h2 class="screen-reader-text">%s</h2>
-			<div id="wp-notify-adminbar"></div>
-		</div>
-	</aside>',
-		__( 'Notifications' )
-	);
-
 	$args = array(
-		'id'     => 'wp-notify',
-		'title'  => sprintf( "<span class='ab-icon' aria-hidden='true'></span><span class='ab-label'>%s</span>", __( 'Notifications' ) ),
+		'id'     => 'wp-notification-hub',
+		'title'  => __( 'loading' ),
 		'parent' => 'top-secondary',
 		'meta'   => array(
-			'html'     => $aside,
 			'tabindex' => 0,
 		),
 	);
@@ -44,30 +33,31 @@ function admin_bar_item( WP_Admin_Bar $wp_admin_bar ) {
 add_action( 'admin_bar_menu', '\WP\Notifications\admin_bar_item', 1 );
 
 /**
- * Adds WP Notify area at the top of the dashboard
+ * Adds WP Notifications area at the top of the dashboard
  */
 function admin_notice() {
-	echo '<div id="wp-notify-dashboard" class="wrap"></div>';
+	echo '<div id="wp-notification-dashboard" class="wrap"></div>';
 }
 add_action( 'admin_notices', '\WP\Notifications\admin_notice' );
 
 /**
- * Register and enqueue a wp notify scripts and stylesheet in WordPress admin.
+ * Register and enqueue a wp-notifications scripts and stylesheet in WordPress admin.
  */
 function enqueue_admin_assets() {
 	/* Load styles */
-	wp_register_style( 'wp_notify_css', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notify.css', array(), WP_FEATURE_NOTIFICATION_PLUGIN_VERSION );
-	wp_enqueue_style( 'wp_notify_css' );
+	wp_register_style( 'wp_notifications', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notifications.css', array(), WP_FEATURE_NOTIFICATION_PLUGIN_VERSION );
+	wp_enqueue_style( 'wp_notifications' );
 
 	/* Load scripts */
-	$asset = include WP_FEATURE_NOTIFICATION_PLUGIN_DIR . '/build/wp-notify.asset.php';
-	wp_register_script( 'wp_notify_js', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notify.js', $asset['dependencies'], WP_FEATURE_NOTIFICATION_PLUGIN_VERSION, true );
-	wp_enqueue_script( 'wp_notify_js' );
+	$asset = include WP_FEATURE_NOTIFICATION_PLUGIN_DIR . '/build/wp-notifications.asset.php';
+	wp_register_script( 'wp_notifications', WP_FEATURE_NOTIFICATION_PLUGIN_DIR_URL . '/build/wp-notifications.js', $asset['dependencies'], WP_FEATURE_NOTIFICATION_PLUGIN_VERSION, true );
+	wp_enqueue_script( 'wp_notifications' );
+
 	wp_localize_script(
-		'wp_notify_js',
-		'wp_notify_data',
+		'wp_notifications',
+		'wp_notifications_data',
 		array(
-			'settingsPage' => esc_url( admin_url( 'options-general.php?page=wp-notify' ) ),
+			'settingsPage' => esc_url( admin_url( 'options-general.php?page=notifications' ) ),
 		)
 	);
 }
@@ -81,7 +71,7 @@ function enqueue_admin_assets() {
  * @return void
  */
 function add_admin_options_page() {
-	add_options_page( 'Notifications', 'Notifications', 'manage_options', 'wp-notify', '\WP\Notifications\render_admin_options_page' );
+	add_options_page( 'Notifications', 'Notifications', 'manage_options', 'notifications', '\WP\Notifications\render_admin_options_page' );
 }
 add_action( 'admin_menu', '\WP\Notifications\add_admin_options_page' );
 
@@ -233,7 +223,7 @@ function init_table() {
  * Registers our dashboard widget.
  */
 function dashboard_widget() {
-	add_meta_box( 'wp_notify', __( 'WP Notify' ), '\WP\Notifications\render_dashboard_widget', 'dashboard', 'side', 'high' );
+	add_meta_box( 'wp_notifications', __( 'WP Notifications Feature' ), '\WP\Notifications\render_dashboard_widget', 'dashboard', 'side', 'high' );
 }
 add_action( 'wp_dashboard_setup', '\WP\Notifications\dashboard_widget' );
 
@@ -257,8 +247,8 @@ function render_dashboard_widget() {
 			</div>
 
 			<p class="submit">
-				<input type="submit" name="save" id="save-wp-notify" class="button button-primary" value="<?php esc_attr_e( 'Test Notification' ); ?>">
-				<input type="button" id="clear-all-wp-notify" class="button" value="<?php esc_attr_e( 'Clear All Notifications' ); ?>">
+				<input type="submit" name="save" id="save-wp-notifications" class="button button-primary" value="<?php esc_attr_e( 'Test Notification' ); ?>">
+				<input type="button" id="clear-all-wp-notifications" class="button" value="<?php esc_attr_e( 'Clear All Notifications' ); ?>">
 				<br class="clear">
 			</p>
 		</form>

includes/restapi/fake_api.json

@@ -1,102 +1,71 @@
 [
 	{
-		"id": 1,
+		"id": 15,
 		"context": "dashboard",
 		"title": "Try this new Notification feature",
 		"source": "#WP-Notify",
-		"date": 1664992015,
-		"message": "We have just added a <b>wonderful feature!</b> <script>alert('xss')</script> You might want to give it a try so click on the bell icon on the right side of the adminbar.</div></div></div></div>",
+		"date": 1680974130,
+		"message": "👋 Hello from the WP Feature Notifications team! Thank you for testing out the plugin. You might want to give it a try so click on the bell icon on the right side of the adminbar.",
+		"dismissible": false,
 		"icon": {
 			"src": "https://raw.githubusercontent.com/erikyo/wp-notify/design_implementation/src/images/i.svg"
 		},
 		"action": {
-			"acceptMessage": "Try this new feature",
-			"acceptLink": "https://github.com/WordPress/wp-notify",
-			"dismissible": false
-		}
-	},
-	{
-		"id": 2,
-		"context": "dashboard",
-		"title": "Message variant #1",
-		"date": 1654866071,
-		"message": "This is an example of on-page message variant #1. It has a title, a message, an image, an action button with a URL, is dismissable.",
-		"source": "#Test",
-		"icon": {
-			"src": "https://source.unsplash.com/random/400×400/?notify"
-		},
-		"action": {
-			"acceptMessage": "TEST",
-			"acceptLink": "https://github.com/WordPress/wp-notify",
-			"dismissible": true,
-			"unread": true
+			"acceptMessage": "Check out the source",
+			"acceptLink": "https://github.com/WordPress/wp-feature-notifications"
 		}
 	},
 	{
-		"id": 3,
+		"id": 14,
 		"title": "Message variant #1 (copy)",
-		"date": 1654866081,
+		"date": 1680799521,
+		"dismissible": true,
 		"action": {
-			"acceptMessage": "TEST",
-			"acceptLink": "https://github.com/WordPress/wp-notify"
+			"acceptMessage": "Test",
+			"acceptLink": "#"
 		}
 	},
 	{
-		"id": 4,
+		"id": 13,
 		"context": "adminbar",
 		"title": "Message variant #2",
 		"source": "#WP-Notify",
-		"date": 1654866091,
+		"date": 1680744049,
 		"message": "This is an example of on-page message variant #2. It has a title, a message, a custom date, an action button with a URL, is dismissable, but has no images.",
+		"dismissible": true,
+		"status": "new",
 		"action": {
-			"acceptMessage": "OK",
-			"acceptLink": "https://github.com/WordPress/wp-notify",
-			"dismissible": true,
-			"unread": true
-		}
-	},
-	{
-		"id": 5,
-		"context": "dashboard",
-		"date": 1654866101,
-		"title": "Message variant #3",
-		"message": "if you're wondering where notice #2 is try looking at the adminbar at the top right near the bell icon 😉.",
-		"icon": {
-			"src": "https://gifimage.net/wp-content/uploads/2018/10/animation-notification-gif-2.gif"
-		},
-		"action": {
-			"acceptLink": "https://github.com/WordPress/wp-notify",
-			"dismissible": true,
-			"unread": true
+			"acceptMessage": "Ok",
+			"acceptLink": "#"
 		}
 	},
 	{
-		"id": 6,
+		"id": 12,
 		"title": "WordPress",
 		"message": "WordPress was successfully updated to version 6.1",
-		"date": 1664992015,
+		"date": 1680702629,
 		"source": "WordPress",
+		"status": "new",
 		"action": {
 			"acceptMessage": "Read what's new in 6.1",
-			"acceptLink": "#",
-			"unread": true
+			"acceptLink": "#"
 		}
 	},
 	{
-		"id": 7,
+		"id": 11,
 		"message": "WordPress was successfully updated to version 5.9.",
 		"source": "WordPress",
-		"date": 1654866081,
+		"date": 1680699690,
 		"image": {
 			"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" width=\"64px\" height=\"64px\" viewBox=\"0 0 64 64\" enable-background=\"new 0 0 64 64\" xml:space=\"preserve\"><style>.style0{fill:\t#0073aa;}</style><g><g><path d=\"M4.548 31.999c0 10.9 6.3 20.3 15.5 24.706L6.925 20.827C5.402 24.2 4.5 28 4.5 31.999z M50.531 30.614c0-3.394-1.219-5.742-2.264-7.57c-1.391-2.263-2.695-4.177-2.695-6.439c0-2.523 1.912-4.872 4.609-4.872 c0.121 0 0.2 0 0.4 0.022C45.653 7.3 39.1 4.5 32 4.548c-9.591 0-18.027 4.921-22.936 12.4 c0.645 0 1.3 0 1.8 0.033c2.871 0 7.316-0.349 7.316-0.349c1.479-0.086 1.7 2.1 0.2 2.3 c0 0-1.487 0.174-3.142 0.261l9.997 29.735l6.008-18.017l-4.276-11.718c-1.479-0.087-2.879-0.261-2.879-0.261 c-1.48-0.087-1.306-2.349 0.174-2.262c0 0 4.5 0.3 7.2 0.349c2.87 0 7.317-0.349 7.317-0.349 c1.479-0.086 1.7 2.1 0.2 2.262c0 0-1.489 0.174-3.142 0.261l9.92 29.508l2.739-9.148 C49.628 35.7 50.5 33 50.5 30.614z M32.481 34.4l-8.237 23.934c2.46 0.7 5.1 1.1 7.8 1.1 c3.197 0 6.262-0.552 9.116-1.556c-0.072-0.118-0.141-0.243-0.196-0.379L32.481 34.4z M56.088 18.8 c0.119 0.9 0.2 1.8 0.2 2.823c0 2.785-0.521 5.916-2.088 9.832l-8.385 24.242c8.161-4.758 13.65-13.6 13.65-23.728 C59.451 27.2 58.2 22.7 56.1 18.83z M32 0c-17.645 0-32 14.355-32 32C0 49.6 14.4 64 32 64s32-14.355 32-32.001 C64 14.4 49.6 0 32 0z M32 62.533c-16.835 0-30.533-13.698-30.533-30.534C1.467 15.2 15.2 1.5 32 1.5 s30.534 13.7 30.5 30.532C62.533 48.8 48.8 62.5 32 62.533z\" class=\"style0\"/></g></g></svg>"
 		}
 	},
 	{
-		"id": 8,
+		"id": 10,
 		"title": "WordPress",
 		"message": "WordPress was successfully updated to version 6.1",
 		"source": "WordPress",
-		"date": 1654850000,
+		"date": 1680652801,
 		"action": {
 			"acceptMessage": "Read what's new in 6.1",
 			"acceptLink": "#"
@@ -106,31 +75,31 @@
 		"id": 9,
 		"title": "WordPress",
 		"message": "WordPress was successfully updated to version 6.1",
+		"source": "WordPress",
+		"date": 1680406684,
 		"action": {
 			"acceptMessage": "Read what's new in 6.1",
-			"acceptLink": "#",
-			"source": "WordPress",
-			"date": 1654840000
+			"acceptLink": "#"
 		}
 	},
 	{
-		"id": 10,
+		"id": 8,
 		"message": "There is a new version of Contact Form 7 available.",
-		"date": 1654830000,
+		"source": "Plugins Updates",
+		"date": 1680296658,
 		"icon": {
 			"src": "https://ps.w.org/contact-form-7/assets/icon-256x256.png"
 		},
 		"action": {
 			"acceptMessage": "Update now",
-			"acceptLink": "#",
-			"source": "Plugins Updates"
+			"acceptLink": "#"
 		}
 	},
 	{
-		"id": 11,
+		"id": 7,
 		"title": "Akismet",
 		"source": "Akismet",
-		"date": 1654820000,
+		"date": 1680155149,
 		"icon": {
 			"src": "https://ps.w.org/akismet/assets/icon-256x256.png"
 		},
@@ -140,61 +109,61 @@
 		}
 	},
 	{
-		"id": 12,
+		"id": 6,
 		"title": "Default",
 		"acceptLink": "#",
 		"source": "Wordpress",
-		"date": 1654800000,
+		"date": 1680126176,
 		"icon": {
 			"dashicons": "paperclip"
 		}
 	},
 	{
-		"id": 13,
+		"id": 5,
 		"severity": "alert",
 		"title": "Site Health status",
 		"message": "Your site has critical issues that should be addressed",
 		"source": "Wordpress",
-		"date": 1654800000,
+		"date": 1680106280,
 		"icon": {
 			"dashicons": "sos"
 		}
 	},
 	{
-		"id": 14,
+		"id": 4,
 		"severity": "warning",
 		"title": "Some plugins needs to be updated",
 		"source": "Wordpress",
-		"date": 1654800000,
+		"date": 1679953118,
 		"icon": {
 			"dashicons": "admin-plugins"
 		}
 	},
 	{
-		"id": 15,
+		"id": 3,
 		"severity": "success",
 		"title": "Word Camp Europe 2023",
 		"message": "Word Camp was successfully updated to version 2023",
 		"source": "Wordpress",
-		"date": 1654800000,
+		"date": 1679915144,
 		"icon": {
 			"dashicons": "megaphone"
 		}
 	},
 	{
-		"id": 16,
+		"id": 2,
 		"message": "WordPress User has left a message on Lorem Ipsum.",
 		"source": "Comment",
-		"date": 1654400000,
+		"date": 1679903259,
 		"icon": {
 			"src": "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
 		}
 	},
 	{
-		"id": 17,
+		"id": 1,
 		"message": "WordPress User has left a message on Lorem Ipsum.",
 		"source": "Comment",
-		"date": 1654000000,
+		"date": 1679863907,
 		"icon": {
 			"src": "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
 		}