Release v2.4.0 - Migrate to B8 framework

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2
@@ -38,7 +38,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Checkout trunk
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           ref: trunk
 

.github/workflows/tests.yml

@@ -0,0 +1,43 @@
+name: Tests
+
+on:
+  workflow_dispatch:
+
+jobs:
+  phpunit:
+    name: PHP ${{ matrix.php }} / WP ${{ matrix.wordpress }}
+    runs-on: ubuntu-latest
+
+    services:
+      mysql:
+        image: mysql:8.0
+        env:
+          MYSQL_ROOT_PASSWORD: root
+          MYSQL_DATABASE: wordpress_test
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
+
+    strategy:
+      matrix:
+        php: ['7.4', '8.0', '8.1', '8.2', '8.3']
+        wordpress: ['6.4', '6.5', 'latest']
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php }}
+          tools: composer, wp-cli
+
+      - name: Setup tests
+        run: |
+          composer config -g github-oauth.github.com "${{ secrets.ACCESS_TOKEN }}"
+          composer install --no-interaction
+          bash tests/bin/install.sh wordpress_test root root 127.0.0.1 ${{ matrix.wordpress }}
+
+      - name: Run tests
+        run: composer test

.github/workflows/trunk.yml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup PHP
         uses: shivammathur/setup-php@v2

assets/src/css/admin-style.scss → assets/src/admin.scss

@@ -1,6 +1,6 @@
-@forward "../../../vendor/pluginever/framework-plugin/src/assets/css/layout";
-@forward "../../../vendor/pluginever/framework-plugin/src/assets/css/card";
-@forward "../../../vendor/pluginever/framework-plugin/src/assets/css/form";
+@forward "common/layout";
+@forward "common/card";
+@forward "common/form";
 
 // Card component.
 .wcsn-card {

assets/src/common/_card.scss

@@ -0,0 +1,240 @@
+%card {
+	display: block;
+	position: relative;
+	margin: 0 auto 1.5em;
+	box-sizing: border-box;
+	width: 100%;
+	max-width: none;
+	min-width: auto;
+	min-height: 1px;
+	background: #fff;
+	border: 1px solid #e1e2e2;
+	font-size: 13px;
+	line-height: 1.5;
+
+	[class*=pev] {
+		box-sizing: inherit;
+	}
+
+	&:before, &:after {
+		content: "";
+		display: table;
+		box-sizing: inherit;
+	}
+
+	h2, h3, h4, h5, h6 {
+		margin-top: 0;
+		padding-top: 0;
+	}
+
+	ul,ol{
+		li{
+			line-height: 1.7;
+			margin-bottom: 0.5em;
+		}
+	}
+}
+
+%card-body {
+	position: relative;
+	color: #555;
+
+	h2, h3, h4 {
+		color: inherit;
+	}
+
+	& > *:first-child {
+		margin-top: 0;
+	}
+
+	table:not(.widefat) {
+		width: 100%;
+
+		td, th {
+			vertical-align: top;
+			text-align: left
+		}
+
+		th {
+			padding: 0 6px 6px 0
+		}
+
+		td {
+			padding: 0 0 6px
+		}
+	}
+
+	a:focus, a:active {
+		box-shadow: none;
+		outline: none;
+	}
+}
+
+%card-group {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	min-height: 25px;
+	box-sizing: border-box;
+	flex-wrap: nowrap;
+	gap: 10px;
+	margin-bottom: 1em;
+
+	& > img {
+		width: 54px;
+		height: 54px;
+		border-radius: 6px;
+		-o-object-fit: cover;
+		object-fit: cover;
+	}
+
+	& > .icon {
+		width: 54px;
+		height: 54px;
+		font-size: 50px;
+		line-height: 54px;
+		border-radius: 6px;
+		-o-object-fit: cover;
+		object-fit: cover;
+		background-color: #f5f5f5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #777;
+	}
+
+	& > div {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+	}
+}
+
+.pev-card {
+	@extend %card;
+
+	&__title, h2, h3 {
+		padding: 0;
+		margin: 0;
+		color: inherit;
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+	&__subtitle {
+		font-size: 13px;
+		font-weight: 400;
+		color: #777;
+	}
+
+	& > &__header, & > &__footer {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+
+		h2, h3, p {
+			margin: 0;
+			padding: 0;
+		}
+
+		input, select, .select2, button {
+			margin-right: 5px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+
+	& > &__body {
+		@extend %card-body;
+	}
+
+	&__group {
+		@extend %card-group;
+	}
+
+	& > [class*=pev-card]:not([class*=wide]) {
+		padding: 8px 10px;
+	}
+
+	& > [class*=pev-card__] {
+		// child expect last item.
+		&:not(:last-child) {
+			border-bottom: 1px solid #e1e2e2;
+		}
+	}
+}
+
+.pev-panel {
+	@extend %card;
+	@extend %card-body;
+	padding: 8px 10px;
+
+	&__title {
+		font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", sans-serif;
+		font-size: 18px;
+		font-weight: 400;
+		line-height: 1.2;
+		padding: 0;
+		margin: 0;
+	}
+
+	&__subtitle {
+		font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", sans-serif;
+		font-weight: 400;
+		line-height: 1.6em;
+		font-size: 13px;
+		margin: 0;
+		color: #777;
+	}
+
+	&__group {
+		@extend %card-group;
+	}
+
+	&__legend {
+		position: absolute;
+		right: -1px;
+		top: -1px;
+		color: #aaa;
+		font-size: 11px;
+		line-height: 1em;
+		background-color: transparent;
+		border-color: transparent transparent #e5e5e5 #e5e5e5;
+		border-style: solid;
+		border-width: 1px;
+		border-bottom-left-radius: 8px;
+		padding: 3px 2px 4px 7px;
+		z-index: 11;
+
+		.promo-panel & {
+			color: #ffffff;
+			border-color: transparent transparent currentColor currentColor;
+		}
+	}
+
+	&:has(&__legend) {
+		padding-top: 20px;
+	}
+
+	&.promo-panel {
+		border-color: #482ac9;
+		background-color: #482ac9;
+		color: #ffffff;
+
+		a:not(.button) {
+			color: #ffffff;
+		}
+
+		.button {
+			display: block;
+			text-align: center;
+			margin-top: 20px;
+			text-transform: uppercase;
+			font-weight: bold;
+			color: #FFFFFF;
+		}
+	}
+}