Updating 2.3.1 branch (#2095)

* Bump @babel/preset-react from 7.23.3 to 7.24.1 (#2050) Bumps [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) from 7.23.3 to 7.24.1. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.1/packages/babel-preset-react) --- updated-dependencies: - dependency-name: "@babel/preset-react" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Added esc event listener to useEffect (#2044) * Added esc event listener to useEffect --------- Co-authored-by: Malavika Koppula <[email protected]> * Added overflow to section-title links (#2027) * Added flex to section-title links --------- Co-authored-by: Malavika Koppula <[email protected]> * Bump algoliasearch from 4.23.1 to 4.23.2 (#2057) Bumps [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript) from 4.23.1 to 4.23.2. - [Release notes](https://github.com/algolia/algoliasearch-client-javascript/releases) - [Changelog](https://github.com/algolia/algoliasearch-client-javascript/blob/master/CHANGELOG.md) - [Commits](algolia/algoliasearch-client-javascript@4.23.1...4.23.2) --- updated-dependencies: - dependency-name: algoliasearch dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump eslint-plugin-react from 7.33.2 to 7.34.1 (#2062) Bumps [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) from 7.33.2 to 7.34.1. - [Release notes](https://github.com/jsx-eslint/eslint-plugin-react/releases) - [Changelog](https://github.com/jsx-eslint/eslint-plugin-react/blob/v7.34.1/CHANGELOG.md) - [Commits](jsx-eslint/eslint-plugin-react@v7.33.2...v7.34.1) --- updated-dependencies: - dependency-name: eslint-plugin-react dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump glob from 10.3.10 to 10.3.12 (#2063) Bumps [glob](https://github.com/isaacs/node-glob) from 10.3.10 to 10.3.12. - [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md) - [Commits](isaacs/node-glob@v10.3.10...v10.3.12) --- updated-dependencies: - dependency-name: glob dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Manual promo blocks now respect focal point (#1996) * add focal point code and tests * fix eslint errors * fix formatting * fix formatting p2 * shorten PR template based on eng sync discussions (#2065) * ASUB-8201 Sign In with Apple (#2067) * Sign In with Apple * fixing linting and tests * fixing test & linting * fixing linting errors * removing update from package.json * fixing linting errors * disable eslint warnings * fixing warnings * fixing sintax * removing keys * removing only * fixing linting errors * added dd-service-catalog.yml (#2089) * added dd-service-catalog.yml * updated infrastructure * ASUB-8195 Sign up with reCaptcha (#2068) * sign up with reCaptcha * fixing linting and tests * fixing linting errors * fixing linting errors * Lokalize-translation 2.3.0 (#2092) * lokalize-translation 2.3.0 * attending feedback * THEMES-1066: Update Storybook to v8 (#2090) * THEMES-1066: updated versions of storybook and chromatic to the latest. * THEMES-1066: fixed linting errors * THEMES-1066 adjusted configs so that storybook could build without errors. * THEMES-1066 remove addon-knobs * THEMES-1066: removing more deprecated packages. * THEMES-1066: added .babelrc * THEMES-1066: moved babel config to main.js * version bump * added alias overrides * Fixed intro page * THEMES-1066: fixed webpack/babel config * THEMES-1066: restore babel.config.js * THEMES-1066: restore babel.config.js * THEMES-1066: added styling storybook addon * THEMES-1066: updated preview to just use news.scss * THEMES-1066: fixed breaking stories and updated news.scss. * THEMES-1066: version bump for storybook * THEMES-1066: corrected whitespace * THEMES-1066: Updating option for chromatic action. * THEMES-1066: updated stylelint to hopefully fix the UI Tests check * THEMES-1066: removed jsx from stylelint action input. * THEMES-1066: added env vars to chromatic action * THEMES-1066: removing test vars from workflow file. --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: malavikakoppula <[email protected]> Co-authored-by: Malavika Koppula <[email protected]> Co-authored-by: Anna Sherman <[email protected]> Co-authored-by: LauraPinilla <[email protected]> Co-authored-by: blakeganderson <[email protected]>
WPMedia · Apr 18, 2024 · 474279e · 474279e
1 parent fff1430
commit 474279e
Show file tree

Hide file tree

Showing 114 changed files with 8,706 additions and 6,297 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.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.
diff --git a/.github/workflows/chromatic.yml b/.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()
diff --git a/.github/workflows/dd-service-catalog.yml b/.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
diff --git a/.github/workflows/stylelint-pr.yml b/.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"
diff --git a/.storybook/.babelrc b/.storybook/.babelrc
diff --git a/.storybook/main.js b/.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"
+					}
+				}
+			]
+		],
+	},
 };
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import arcTheme from "./arcTheme";
 
 addons.setConfig({

diff --git a/.storybook/preview.js b/.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,
+};