Updating 2.3.1 branch

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,70 +1,15 @@
-**If you have not filled out the checklist below, the pr is not ready for review.**
+**Be sure to run `npm test`, `npm run lint`, and write detailed test steps before requesting reviewers**
 
 ## Description
 
-_Information about what you changed for this PR_
+#### Jira Ticket: [THEMES-](https://arcpublishing.atlassian.net/browse/THEMES-)
 
-## Jira Ticket
-
-- [THEMES-](https://arcpublishing.atlassian.net/browse/THEMES-)
-
-## Acceptance Criteria
-
-_copy from ticket_
+_Information about what you changed for this PR. Include any dependencies, companion PRs, relevant screenshots, or config changes._
 
 ## Test Steps
 
-- Add test steps a reviewer must complete to test this PR
+_Add detailed test steps a reviewer must complete to test this PR_
 
 1. Checkout this branch `git checkout {branch name}`
 2. Run fusion repo with linked blocks `npx fusion start -f -l {blocks to link}`
 3. {Next ....}
-
-## Effect Of Changes
-
-### Before
-
-_Example: When I clicked the search button, the button turned red._
-
-[include screenshot or gif or link to video, storybook would be awesome]
-
-### After
-
-_Example: When I clicked the search button, the button turned green._
-
-[include screenshot or gif or link to video, storybook would be awesome]
-
-## Dependencies or Side Effects
-
-_Examples of dependencies or side effects are:_
-
-- Manifest pr for new block:
-- Feature pack pr for local development:
-- How to deploy to news: https://arcpublishing.atlassian.net/wiki/spaces/TI/pages/3138682964/News+Theme+2.0+Migration+Development+Deployment+Notes
-- Additional settings that will be required in the blocks.json
-- Changes to the custom fields which will require users to reconfigure features
-- Dependency on another PR that needs to be merged first
-
-## Author Checklist
-
-_The author of the PR should fill out the following sections to ensure this PR is ready for review._
-
-- [ ] Confirmed all the test steps a reviewer will follow above are working.
-- [ ] Confirmed there are no linter errors. Please run `npm run lint` to check for errors. Often, `npm run lint:fix` will fix those errors and warnings.
-- [ ] Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block.
-- [ ] Confirmed this PR has reasonable code coverage. You can run `npm run test:coverage` to see your progress.
-  - [ ] Confirmed this PR has unit test files
-  - [ ] Ran `npm run test`, made sure all tests are passing
-  - [ ] If the amount of work to write unit tests for this change are excessive,
-        please explain why (so that we can fix it whenever it gets refactored).
-- [ ] Confirmed relevant documentation has been updated/added.
-
-## Reviewer Checklist
-
-_The reviewer of the PR should copy-paste this template into the review comments on review._
-
-- [ ] Linting code actions have passed.
-- [ ] Ran the code locally based on the test instructions.
-  - [ ] I don’t think this is needed to be tested locally. For example, a padding style change (storybook?) or a logic change (write a test).
-- [ ] I am a member of the engine theme team so that I can approve and merge this. If you're not on the team, you won't have access to approve and merge this pr.
-- [ ] Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing.

.github/workflows/chromatic.yml

@@ -42,16 +42,10 @@ jobs:
 
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
 
         # Chromatic GitHub Action options
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-
-      - name: Check failure status
-        uses: act10ns/slack@v1
-        with:
-          status: ${{ job.status }}
-        if: failure()

.github/workflows/dd-service-catalog.yml

@@ -0,0 +1,50 @@
+---
+name: DataDog Service Catalog
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
+    steps:
+      - name: DD-service-catalog
+        uses: arcxp/datadog-service-catalog-metadata-provider@v2
+        with:
+          schema-version: v2.1
+          github-token: ${{ secrets.WP_DOT_GITHUB }}
+          datadog-key: ${{ secrets.DATADOG_API_KEY }}
+          datadog-app-key: ${{ secrets.DATADOG_APPLICATION_KEY }}
+          service-name: arc-themes-blocks
+          team: experience-themes-xp
+          application: Arc Themes Blocks
+          description: |
+            This is the Arc Themes Blocks
+          lifecycle: production
+          tier: p0
+          email: [email protected]
+          slack-support-channel: 'https://washpost.enterprise.slack.com/archives/C0169HVBN2C'
+          repo: https://github.com/WPMedia/arc-themes-blocks
+          tags: |
+            - 'application:Arc Themes Blocks'
+            - infrastructure:packages
+            - language:nodejs
+            - division:arc
+            - data-sensitivity:high
+            - component:themes
+          links: |
+            - name: Datadog Dashboard
+              url: https://washpost.datadoghq.com/dashboard/b47-w8a-u9c/theme-settings-dashboard?view=spans
+              type: dashboard
+            - name: Themes Jira Project
+              url: https://arcpublishing.atlassian.net/jira/software/c/projects/THEMES/boards/838
+              provider: jira
+              type: dashboard
+            - name: Themes Runbooks
+              url: https://arcpublishing.atlassian.net/wiki/spaces/TI/pages/3303637274/Runbooks
+              type: runbook
+          integrations: |
+            opsgenie:
+              service-url: https://washpost.app.opsgenie.com/teams/dashboard/6c290e84-4b44-4178-8bec-5fb72fac8239/main
+              region: US

.github/workflows/stylelint-pr.yml

@@ -42,4 +42,4 @@ jobs:
           reporter: github-pr-review
           filter_mode: "diff_context"
           stylelint_config: ".stylelintrc.json"
-          stylelint_input: "**/*.(scss|jsx)"
+          stylelint_input: "**/*.scss"

.storybook/main.js

@@ -3,37 +3,27 @@ const path = require("path");
 
 // Export a function. Accept the base config as the only param.
 module.exports = {
-	stories: ["../stories/*.stories.@(js|jsx|mdx|tsx)", "../blocks/**/*.story.@(js|jsx|mdx|tsx)"],
-	addons: [
-		"@etchteam/storybook-addon-css-variables-theme",
-		"@storybook/addon-a11y",
-		"@storybook/addon-docs",
-		"@storybook/addon-knobs",
-		"@storybook/addon-essentials",
-	],
-	staticDirs: ["../resources"],
-	webpackFinal: async (config) => {
+    stories: [
+        "../stories/*.@(mdx|stories.@(js|jsx|tsx))",
+        "../blocks/**/*.story.@(js|jsx|mdx|tsx)"
+    ],
+
+    addons: [
+        "@storybook/addon-a11y",
+        "@storybook/addon-controls",
+        "@storybook/addon-docs",
+        "@storybook/addon-essentials",
+        "@storybook/addon-webpack5-compiler-babel",
+        "@storybook/addon-styling-webpack"
+    ],
+
+    staticDirs: ["../resources"],
+
+    webpackFinal: async (config) => {
 		// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
 		// You can change the configuration based on that.
 		// 'PRODUCTION' is used when building the static version of storybook.
 
-		// Make whatever fine-grained changes you need
-		// eslint-disable-next-line no-unused-expressions
-		config.resolve = {
-			...config.resolve,
-			alias: {
-				...config.resolve.alias,
-				"fusion:consumer": path.resolve(__dirname, "./alias/consumer.js"),
-				"fusion:content": path.resolve(__dirname, "./alias/content.js"),
-				"fusion:context": path.resolve(__dirname, "./alias/context.js"),
-				"fusion:environment": path.resolve(__dirname, "./alias/environment.js"),
-				"fusion:intl": path.resolve(__dirname, "./alias/intl.js"),
-				"fusion:properties": path.resolve(__dirname, "./alias/properties.js"),
-				"fusion:static": path.resolve(__dirname, "./alias/static.js"),
-				"fusion:themes": path.resolve(__dirname, "./alias/themes.js"),
-			},
-		};
-
 		config.module.rules.push(
 			{
 				test: /\.scss$/,
@@ -49,11 +39,91 @@ module.exports = {
 			{
 				test: /\.(js|jsx)$/,
 				include: path.resolve(__dirname, "../node_modules/@wpmedia/arc-themes-components"),
-				use: ["babel-loader"],
-			}
+				use: {
+					loader: "babel-loader",
+					options: {
+						"plugins": [
+							[
+								// Module resolver aliases need to be set here as well so arc-themes-components uses the right mock files.
+								"module-resolver",
+								{
+									"alias": {
+										"fusion:themes": "./.storybook/alias/themes.js",
+										"fusion:content": "./.storybook/alias/content.js",
+										"fusion:context": "./.storybook/alias/context.js",
+										"fusion:consumer": "./.storybook/alias/consumer.js",
+										"fusion:environment": "./.storybook/alias/environment.js",
+										"fusion:properties": "./.storybook/alias/properties.js",
+										"fusion:static": "./.storybook/alias/static.js",
+										"fusion:intl": "./.storybook/alias/intl.js"
+									}
+								}
+							]
+						],
+					},
+				},
+			},
 		);
 
+		config.externals = /^(fusion:)/;
+
 		// Return the altered config
 		return config;
 	},
+
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {}
+    },
+
+    docs: {
+        autodocs: true
+    },
+
+	babelDefault: {
+		"presets": [
+			[
+				"@babel/preset-env",
+				{
+					"targets": {
+						"node": "current"
+					},
+					"modules": "commonjs"
+				}
+			],
+			[
+				"@babel/preset-react",
+				{
+					"runtime": "automatic"
+				}
+			]
+		],
+		"plugins": [
+			"@babel/plugin-proposal-nullish-coalescing-operator",
+			"transform-react-remove-prop-types",
+			[
+				"@babel/plugin-proposal-decorators",
+				{
+					"legacy": true
+				}
+			],
+			"@babel/plugin-proposal-class-properties",
+			"@babel/plugin-transform-private-methods",
+			[
+				"module-resolver",
+				{
+					"alias": {
+						"fusion:themes": "./.storybook/alias/themes.js",
+						"fusion:content": "./.storybook/alias/content.js",
+						"fusion:context": "./.storybook/alias/context.js",
+						"fusion:consumer": "./.storybook/alias/consumer.js",
+						"fusion:environment": "./.storybook/alias/environment.js",
+						"fusion:properties": "./.storybook/alias/properties.js",
+						"fusion:static": "./.storybook/alias/static.js",
+						"fusion:intl": "./.storybook/alias/intl.js"
+					}
+				}
+			]
+		],
+	},
 };

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import arcTheme from "./arcTheme";
 
 addons.setConfig({

.storybook/preview.js

@@ -1,14 +1,6 @@
-import cssVariablesTheme from "@etchteam/storybook-addon-css-variables-theme";
+import "./themes/news.scss";
 
-// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved
-import news from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/news.scss";
-// eslint-disable-next-line import/no-webpack-loader-syntax,import/no-unresolved
-import commerce from "!!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./themes/commerce.scss";
-
-export const decorators = [cssVariablesTheme];
-
-// eslint-disable-next-line import/prefer-default-export
-export const parameters = {
+const parameters = {
 	layout: "fullscreen",
 	a11y: {
 		element: "#root",
@@ -36,12 +28,12 @@ export const parameters = {
 	},
 	options: {
 		storySort: (a, b) =>
-			a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
-	},
-	cssVariables: {
-		files: {
-			news,
-			commerce,
-		},
+		a.title === b.title
+		? 0
+		: a.id.localeCompare(b.id, undefined, { numeric: true })
 	},
 };
+
+export default {
+	parameters,
+};