[tb/LEMS-2523/merge-get-user-input-map] Merge branch 'main' into tb/LEMS-2523/merge-get-user-input-map

Author: Myranae

.changeset/little-goats-prove.md

@@ -259,7 +259,6 @@ module.exports = {
             {
                 allow: [
                     "**/*.css",
-                    "**/*.less",
                     "@testing-library/jest-dom",
                     "@testing-library/jest-dom/extend-expect",
                     "whatwg-fetch",

.changeset/warm-penguins-tickle.md

@@ -331,10 +331,14 @@ jobs:
                       steps.publish-snapshot.outputs.npm_snapshot_tag }}
                       ```
 
-                      If you are working in Khan Academy's webapp, you can run the below command. 
-                      If this is for backend code, change the static flag (-s) from y/yes to n/no.
+                      If you are working in Khan Academy's frontend, you can run the below command.
                       ```sh
-                      ./dev/tools/bump_perseus_version.js -s y -t PR${{ github.event.pull_request.number }}
+                      ./tools/bump_perseus_version.js -t PR${{ github.event.pull_request.number }}
+                      ```
+
+                      If you are working in Khan Academy's webapp, you can run the below command.
+                      ```sh
+                      ./dev/tools/bump_perseus_version.js -s n -t PR${{ github.event.pull_request.number }}
                       ```
 
             - name: Create or update npm snapshot comment - failure, snapshot publish failed

.eslintrc.js

@@ -4,29 +4,22 @@
  * .storybook/preview.js file so that the components can have the same
  * styles as prod when viewed within Storybook.
  */
-
-// Variables
-@offBlack: #21242c;
-@wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif;
-
 html,
 body {
     height: 100%;
 }
-
 body {
-    font-family: @wonderBlocksFontFamily, "Helvetica", "Corbel", sans-serif;
+    font-family: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif,
+        "Helvetica", "Corbel", sans-serif;
     font-size: 14px;
     margin: 0;
-    color: @offBlack;
+    color: var(--wb-semanticColor-text-primary);
     line-height: 1.4;
     min-width: 0;
 }
-
 .box-sizing-border-box-reset {
     box-sizing: border-box;
 }
-
 .box-sizing-border-box-reset * {
     box-sizing: inherit;
 }

.github/workflows/node-ci.yml

@@ -3,21 +3,28 @@ import {spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import type {StorybookConfig} from "@storybook/react-vite";
 
+const excludedCssFiles = ["lato.css", "protractor.css", "mafs-styles.css"];
 // This is a temporary plugin option to mimic what is in PROD in regard to cascade layers.
-// Perseus LESS files are wrapped in the 'shared' layer in Webapp.
-// To get the same ordering of precedence in Storybook, the imported LESS files need to be wrapped accordingly.
-// Once the LESS files have cascade layers included (LEMS-2801),
+// Perseus CSS files are wrapped in the 'shared' layer in khan/frontend.
+// To get the same ordering of precedence in Storybook, the imported CSS files need to be wrapped accordingly.
+// Once the CSS files have cascade layers included (LEMS-2801),
 //     then the following plugin option should be removed.
-const lessWrapper = {
-    name: "wrap-less-in-layer",
+const cssWrapper = {
+    name: "wrap-css-in-layer",
     transform: (code: string, pathname: string) => {
-        if (pathname.endsWith(".less")) {
-            const layerStatements =
-                "@layer reset, shared, legacy;\n@layer shared";
-            return {
-                code: `${layerStatements} { ${code} }`,
-                map: null,
-            };
+        if (pathname.endsWith(".css")) {
+            // Exclude the CSS files that are not part of the shared layer.
+            if (!excludedCssFiles.some((file) => pathname.endsWith(file))) {
+                // Exclude any CSS file that already has a layer statement.
+                if (!code.includes("@layer")) {
+                    const layerStatements =
+                        "@layer reset, shared, legacy;\n@layer shared";
+                    return {
+                        code: `${layerStatements} { ${code} }`,
+                        map: null,
+                    };
+                }
+            }
         }
     },
 };
@@ -38,8 +45,11 @@ const config: StorybookConfig = {
         // dir.
         "../packages/*/src/**/*@(.stories|.fixturestories).@(ts|tsx)",
     ],
-
-    addons: ["@storybook/addon-links", "@storybook/addon-a11y"],
+    addons: [
+        "@storybook/addon-a11y",
+        "@storybook/addon-docs",
+        "@storybook/addon-links",
+    ],
 
     // NOTE(kevinb): We customize the padding a bit so that so that stories
     // using the on-screen keypad render correctly.  Storybook adds its own
@@ -81,7 +91,7 @@ const config: StorybookConfig = {
                     return !file.endsWith(".svg");
                 },
             },
-            plugins: [lessWrapper],
+            plugins: [cssWrapper],
         });
     },
     staticDirs: ["../static"],

.storybook/global.less renamed to .storybook/global.css

@@ -11,7 +11,7 @@ import {
     storybookDependenciesV2,
 } from "../testing/test-dependencies";
 
-import "./global.less";
+import "./global.css";
 import "./reset.css";
 
 // Import the Wonder Blocks CSS variables
@@ -87,6 +87,9 @@ const preview: Preview = {
                 value,
             })),
         },
+        docs: {
+            toc: true,
+        },
     },
     tags: [
         //👇 Enables auto-generated documentation for all stories

.storybook/main.ts

@@ -39,8 +39,8 @@ We use [changesets](https://github.com/changesets/changesets) to help manage our
 ### Updating Dependencies
 
 If you want to use another library in Perseus, you will need up update the dependencies.
-Use `peerDependencies` and `devDependencies` for dependencies that webapp is already using, such as
-Wonder Blocks or React.
+Use `peerDependencies` and `devDependencies` for dependencies that
+khan/frontend is already using, such as Wonder Blocks or React.
 
 1. `cd` into to the package in which you would like to update the dependency.
 ```
@@ -54,7 +54,7 @@ cd packages/perseus-editor
 ```
 // All dependencies
 pnpm add --dev [dependency name]
-// Include this too if webapp is using this dependency
+// Include this too if khan/frontend is using this dependency
 pnpm add --peer [dependency name]
 
 // Example

.storybook/preview.tsx

@@ -1,5 +1,11 @@
 # perseus-build-settings
 
+## 0.7.0
+
+### Minor Changes
+
+-   [#2489](https://github.com/Khan/perseus/pull/2489) [`d8c99f629`](https://github.com/Khan/perseus/commit/d8c99f629c9439cdf56e96f6a53f6bb28f278e07) Thanks [@mark-fitzgerald](https://github.com/mark-fitzgerald)! - Convert LESS files to pre-built CSS files to simplify our styling framework
+
 ## 0.6.2
 
 ### Patch Changes

README.md

@@ -1,6 +1,6 @@
 {
     "name": "perseus-build-settings",
-    "version": "0.6.2",
+    "version": "0.7.0",
     "license": "MIT",
     "private": true
 }