@openedx/paragon 23.5.0 → 23.5.2

package/lib/__tests__/migrate-to-openedx-scope.test.js

@@ -0,0 +1,106 @@
+const fs = require('fs');
+const path = require('path');
+
+const migrateToOpenEdxScopeCommand = require('../migrate-to-openedx-scope');
+
+jest.mock('fs');
+jest.mock('path');
+
+describe('migrateToOpenEdxScopeCommand', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    process.argv = ['node', 'script', 'command', '/mock/project/path'];
+
+    path.resolve.mockReturnValue('/mock/project/path');
+    path.join.mockImplementation((...args) => args.join('/'));
+    path.basename.mockImplementation((filePath) => filePath.split('/').pop());
+  });
+
+  it('should process valid files and replace @edx/paragon with @openedx/paragon', () => {
+    const mockFiles = {
+      '/mock/project/path': ['file1.js', 'file2.tsx', '.git', 'node_modules', 'src'],
+      '/mock/project/path/src': ['component.jsx'],
+    };
+
+    const mockFileContents = {
+      '/mock/project/path/file1.js': 'import { Button } from "@edx/paragon";',
+      '/mock/project/path/file2.tsx': 'import { Modal } from "@edx/paragon/modal";',
+      '/mock/project/path/src/component.jsx': 'require("@edx/paragon")',
+    };
+
+    fs.readdirSync.mockImplementation((dir) => mockFiles[dir] || []);
+    fs.statSync.mockImplementation((filePath) => ({
+      isDirectory: () => !filePath.includes('.'),
+    }));
+    fs.readFileSync.mockImplementation((filePath) => mockFileContents[filePath] || '');
+    fs.writeFileSync.mockImplementation(() => {});
+
+    migrateToOpenEdxScopeCommand();
+
+    expect(fs.writeFileSync).toHaveBeenCalledTimes(3);
+    expect(fs.writeFileSync).toHaveBeenCalledWith(
+      '/mock/project/path/file1.js',
+      'import { Button } from "@openedx/paragon";',
+      'utf-8',
+    );
+    expect(fs.writeFileSync).toHaveBeenCalledWith(
+      '/mock/project/path/file2.tsx',
+      'import { Modal } from "@openedx/paragon/modal";',
+      'utf-8',
+    );
+    expect(fs.writeFileSync).toHaveBeenCalledWith(
+      '/mock/project/path/src/component.jsx',
+      'require("@openedx/paragon")',
+      'utf-8',
+    );
+  });
+
+  it('should skip invalid file extensions', () => {
+    const mockFiles = {
+      '/mock/project/path': ['file1.txt', 'file2.json'],
+    };
+
+    fs.readdirSync.mockImplementation((dir) => mockFiles[dir] || []);
+    fs.statSync.mockImplementation(() => ({
+      isDirectory: () => false,
+    }));
+    fs.readFileSync.mockImplementation(() => 'import "@edx/paragon"');
+
+    migrateToOpenEdxScopeCommand();
+
+    expect(fs.writeFileSync).not.toHaveBeenCalled();
+  });
+
+  it('should skip node_modules directory', () => {
+    const mockFiles = {
+      '/mock/project/path': ['node_modules'],
+      '/mock/project/path/node_modules': ['some-package'],
+    };
+
+    fs.readdirSync.mockImplementation((dir) => mockFiles[dir] || []);
+    fs.statSync.mockImplementation(() => ({
+      isDirectory: () => true,
+    }));
+
+    migrateToOpenEdxScopeCommand();
+
+    expect(fs.readdirSync).not.toHaveBeenCalledWith('/mock/project/path/node_modules');
+  });
+
+  it('should skip hidden directories except . and ..', () => {
+    const mockFiles = {
+      '/mock/project/path': ['.git', '.', '..', '.hidden'],
+    };
+
+    fs.readdirSync.mockImplementation((dir) => mockFiles[dir] || []);
+    fs.statSync.mockImplementation(() => ({
+      isDirectory: () => true,
+    }));
+
+    migrateToOpenEdxScopeCommand();
+
+    expect(fs.readdirSync).not.toHaveBeenCalledWith('/mock/project/path/.git');
+    expect(fs.readdirSync).not.toHaveBeenCalledWith('/mock/project/path/.hidden');
+  });
+});

package/lib/__tests__/replace-variables.test.js

@@ -0,0 +1,79 @@
+const replaceVariablesCommand = require('../replace-variables');
+const { transformInPath } = require('../../tokens/utils');
+const mapSCSStoCSS = require('../../tokens/map-scss-to-css');
+
+jest.mock('../../tokens/utils');
+jest.mock('../../tokens/map-scss-to-css');
+
+describe('replaceVariablesCommand', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mapSCSStoCSS.mockReturnValue({
+      '$primary-color': '#123456',
+      '$secondary-color': '#654321',
+    });
+    transformInPath.mockResolvedValue();
+  });
+
+  it('should call transformInPath with correct arguments for default replacement', async () => {
+    const args = ['--filePath', 'styles.scss', '--source', 'variables.scss'];
+
+    await replaceVariablesCommand(args);
+
+    expect(mapSCSStoCSS).toHaveBeenCalledWith('variables.scss');
+    expect(transformInPath).toHaveBeenCalledWith(
+      'styles.scss',
+      { '$primary-color': '#123456', '$secondary-color': '#654321' },
+    );
+  });
+
+  it('should handle usage replacement type with direction', async () => {
+    const args = [
+      '--filePath', 'styles.scss',
+      '--source', 'variables.scss',
+      '--replacementType', 'usage',
+      '--direction', 'forward',
+    ];
+
+    await replaceVariablesCommand(args);
+
+    expect(transformInPath).toHaveBeenCalledWith(
+      'styles.scss',
+      { '$primary-color': '#123456', '$secondary-color': '#654321' },
+      'usage',
+      [],
+      'forward',
+    );
+  });
+
+  it('should work with short-form aliases', async () => {
+    const args = ['-p', 'styles.scss', '-s', 'variables.scss'];
+
+    await replaceVariablesCommand(args);
+
+    expect(mapSCSStoCSS).toHaveBeenCalledWith('variables.scss');
+    expect(transformInPath).toHaveBeenCalledWith(
+      'styles.scss',
+      { '$primary-color': '#123456', '$secondary-color': '#654321' },
+    );
+  });
+
+  it('should handle usage replacement type without direction', async () => {
+    const args = [
+      '--filePath', 'styles.scss',
+      '--source', 'variables.scss',
+      '--replacementType', 'usage',
+    ];
+
+    await replaceVariablesCommand(args);
+
+    expect(transformInPath).toHaveBeenCalledWith(
+      'styles.scss',
+      { '$primary-color': '#123456', '$secondary-color': '#654321' },
+      'usage',
+      [],
+      undefined,
+    );
+  });
+});

package/lib/__tests__/utils.test.js

@@ -0,0 +1,87 @@
+const axios = require('axios');
+
+const { sendTrackInfo, capitalize } = require('../utils');
+
+jest.mock('axios');
+
+describe('utils', () => {
+  describe('sendTrackInfo', () => {
+    const originalEnv = process.env;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      process.env = { ...originalEnv };
+    });
+
+    afterAll(() => {
+      process.env = originalEnv;
+    });
+
+    it('should send tracking data when TRACK_ANONYMOUS_ANALYTICS is true', async () => {
+      process.env.TRACK_ANONYMOUS_ANALYTICS = 'true';
+      process.env.BASE_URL = 'http://test.com';
+      const mockResponse = { status: 200 };
+      axios.post.mockResolvedValue(mockResponse);
+
+      const eventId = 'test_event';
+      const properties = { prop1: 'value1' };
+      await sendTrackInfo(eventId, properties);
+
+      expect(axios.post).toHaveBeenCalledWith(
+        'http://test.com/.netlify/functions/sendTrackData',
+        { eventId, properties },
+      );
+    });
+
+    it('should not send tracking data when TRACK_ANONYMOUS_ANALYTICS is false', async () => {
+      process.env.TRACK_ANONYMOUS_ANALYTICS = '';
+
+      await sendTrackInfo('test_event', {});
+
+      expect(axios.post).not.toHaveBeenCalled();
+    });
+
+    it('should handle errors gracefully', async () => {
+      process.env.TRACK_ANONYMOUS_ANALYTICS = 'true';
+      process.env.BASE_URL = 'http://test.com';
+      const error = new Error('Network error');
+      axios.post.mockRejectedValue(error);
+
+      const consoleSpy = jest.spyOn(console, 'log');
+
+      await sendTrackInfo('test_event', {});
+
+      // Wait for the next tick to allow promise rejection to be handled
+      await new Promise(process.nextTick);
+
+      expect(consoleSpy).toHaveBeenCalledWith('Track info request failed (Error: Network error)');
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('capitalize', () => {
+    it('should capitalize the first letter of a string', () => {
+      expect(capitalize('hello')).toBe('Hello');
+      expect(capitalize('world')).toBe('World');
+    });
+
+    it('should return empty string for empty input', () => {
+      expect(capitalize('')).toBe('');
+    });
+
+    it('should return empty string for non-string input', () => {
+      expect(capitalize(null)).toBe('');
+      expect(capitalize(undefined)).toBe('');
+      expect(capitalize(123)).toBe('');
+      expect(capitalize({})).toBe('');
+    });
+
+    it('should handle single character strings', () => {
+      expect(capitalize('a')).toBe('A');
+    });
+
+    it('should not modify already capitalized strings', () => {
+      expect(capitalize('Hello')).toBe('Hello');
+    });
+  });
+});

package/lib/__tests__/version.test.js

@@ -0,0 +1,20 @@
+const chalk = require('chalk');
+
+const { version } = require('../../package.json');
+const versionCommand = require('../version');
+
+console.log = jest.fn(); /* eslint-disable-line no-console */
+
+describe('versionCommand', () => {
+  beforeEach(() => {
+    console.log.mockClear(); /* eslint-disable-line no-console */
+  });
+
+  it('should log the correct version number', () => {
+    versionCommand();
+
+    expect(console.log).toHaveBeenCalledTimes(1); /* eslint-disable-line no-console */
+    const consoleOutput = console.log.mock.calls[0][0]; /* eslint-disable-line no-console */
+    expect(consoleOutput).toContain(`Paragon CLI version: ${chalk.bold(version)}`);
+  });
+});

package/lib/build-scss.js

@@ -188,3 +188,4 @@ function buildScssCommand(commandArgs) {
 }
 
 module.exports = buildScssCommand;
+module.exports.updateParagonThemeOutput = updateParagonThemeOutput;

package/lib/help.js

@@ -67,4 +67,7 @@ function helpCommand(commands, commandArgs) {
   });
 }
 
-module.exports = helpCommand;
+module.exports = {
+  helpCommand,
+  findCommandByName,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.5.0",
+  "version": "23.5.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,6 +32,7 @@
     "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage",
     "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json",
     "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx . && npm run lint --workspaces --if-present",
+    "lint:fix": "npm run stylelint && eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx . && npm run lint --workspaces --if-present",
     "prepublishOnly": "npm run build",
     "semantic-release": "semantic-release",
     "snapshot": "jest --updateSnapshot",

package/styles/css/themes/light/abstraction-variables.css

@@ -183,14 +183,14 @@
     var(--pgn-elevation-box-shadow-up-3-2-color);
 
   --pgn-elevation-box-shadow-up-4:
-    var(--pgn-elevation-box-shadow-up-3-1-offset-x)
-    var(--pgn-elevation-box-shadow-up-3-1-offset-y)
-    var(--pgn-elevation-box-shadow-up-3-1-blur)
-    var(--pgn-elevation-box-shadow-up-3-1-color),
-    var(--pgn-elevation-box-shadow-up-3-2-offset-x)
-    var(--pgn-elevation-box-shadow-up-3-2-offset-y)
-    var(--pgn-elevation-box-shadow-up-3-2-blur)
-    var(--pgn-elevation-box-shadow-up-3-2-color);
+    var(--pgn-elevation-box-shadow-up-4-1-offset-x)
+    var(--pgn-elevation-box-shadow-up-4-1-offset-y)
+    var(--pgn-elevation-box-shadow-up-4-1-blur)
+    var(--pgn-elevation-box-shadow-up-4-1-color),
+    var(--pgn-elevation-box-shadow-up-4-2-offset-x)
+    var(--pgn-elevation-box-shadow-up-4-2-offset-y)
+    var(--pgn-elevation-box-shadow-up-4-2-blur)
+    var(--pgn-elevation-box-shadow-up-4-2-color);
 
   --pgn-elevation-box-shadow-up-5:
     var(--pgn-elevation-box-shadow-up-5-1-offset-x)

package/styles/css/themes/light/variables.css

@@ -250,12 +250,12 @@
   --pgn-elevation-box-shadow-level-4-2-blur: 1.25rem; /* Basic box shadow of level 4. */
   --pgn-elevation-box-shadow-level-5-1-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
   --pgn-elevation-box-shadow-level-5-1-offset-x: 0; /* Basic box shadow of level 5. */
-  --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25px; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-1-offset-y: 1.25rem; /* Basic box shadow of level 5. */
   --pgn-elevation-box-shadow-level-5-1-blur: 2.5rem; /* Basic box shadow of level 5. */
   --pgn-elevation-box-shadow-level-5-2-color: rgba(0, 0, 0, 0.15); /* Basic box shadow of level 5. */
   --pgn-elevation-box-shadow-level-5-2-offset-x: 0; /* Basic box shadow of level 5. */
   --pgn-elevation-box-shadow-level-5-2-offset-y: 0.5rem; /* Basic box shadow of level 5. */
-  --pgn-elevation-box-shadow-level-5-2-blur: 2.5rem; /* Basic box shadow of level 5. */
+  --pgn-elevation-box-shadow-level-5-2-blur: 3rem; /* Basic box shadow of level 5. */
   --pgn-elevation-box-shadow-base-color: rgba(0, 0, 0, 0.3); /* Default box shadow. */
   --pgn-elevation-box-shadow-base-offset-x: 0; /* Default box shadow. */
   --pgn-elevation-box-shadow-base-offset-y: 0.125rem; /* Default box shadow. */
@@ -302,12 +302,12 @@
   --pgn-elevation-box-shadow-down-4-2-blur: 1.25rem; /* Bottom box shadow of level 4. */
   --pgn-elevation-box-shadow-down-5-1-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
   --pgn-elevation-box-shadow-down-5-1-offset-x: 0; /* Bottom box shadow of level 5. */
-  --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25px; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-1-offset-y: 1.25rem; /* Bottom box shadow of level 5. */
   --pgn-elevation-box-shadow-down-5-1-blur: 2.5rem; /* Bottom box shadow of level 5. */
   --pgn-elevation-box-shadow-down-5-2-color: rgba(0, 0, 0, 0.15); /* Bottom box shadow of level 5. */
   --pgn-elevation-box-shadow-down-5-2-offset-x: 0; /* Bottom box shadow of level 5. */
   --pgn-elevation-box-shadow-down-5-2-offset-y: 0.5rem; /* Bottom box shadow of level 5. */
-  --pgn-elevation-box-shadow-down-5-2-blur: 2.5rem; /* Bottom box shadow of level 5. */
+  --pgn-elevation-box-shadow-down-5-2-blur: 3rem; /* Bottom box shadow of level 5. */
   --pgn-elevation-box-shadow-left-1-1-color: rgba(0, 0, 0, 0.15); /* Left box shadow of level 1. */
   --pgn-elevation-box-shadow-left-1-1-offset-x: -0.0625rem; /* Left box shadow of level 1. */
   --pgn-elevation-box-shadow-left-1-1-offset-y: 0; /* Left box shadow of level 1. */
@@ -1399,7 +1399,7 @@
   --pgn-color-icon-button-text-black-inverse-active-focus: var(--pgn-color-icon-button-text-black-inverse-active-base);
   --pgn-color-image-figure-caption: var(--pgn-color-gray-500);
   --pgn-color-menu-item-color: var(--pgn-color-body-base);
-  --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary);
+  --pgn-color-menu-item-hover-color: var(--pgn-color-btn-hover-text-tertiary);
   --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
   --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
   --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);

package/tokens/__mocks__/style-dictionary.js

@@ -0,0 +1,24 @@
+const mockStyleDictionaryInstance = {
+  cleanAllPlatforms: jest.fn().mockResolvedValue(undefined),
+  buildAllPlatforms: jest.fn().mockResolvedValue(undefined),
+};
+
+const mockStyleDictionary = jest.fn(() => mockStyleDictionaryInstance);
+
+mockStyleDictionary.hooks = {
+  transforms: {
+    'color/sass-color-functions': {},
+  },
+};
+
+const mockInitializeStyleDictionary = jest.fn().mockResolvedValue(mockStyleDictionary);
+
+module.exports = {
+  initializeStyleDictionary: mockInitializeStyleDictionary,
+  getTokensStudioTransforms: jest.fn().mockResolvedValue({
+    expandTypesMap: {},
+  }),
+  colorTransform: jest.fn(),
+  __mockInstance: mockStyleDictionaryInstance,
+  __mockClass: mockStyleDictionary,
+};

package/tokens/src/themes/light/components/Menu.json

@@ -14,7 +14,7 @@
         "bg": { "source": "$menu-item-bg", "$value": "transparent" },
         "border": { "source": "$menu-item-border-color", "$value": "{color.menu.item.bg}" },
         "hover": {
-          "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.text.tertiary}" },
+          "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.hover.text.tertiary}" },
           "bg": { "source": "$menu-item-hover-bg", "$value": "{color.btn.hover.bg.tertiary}" },
           "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" }
         },

package/tokens/src/themes/light/global/elevation.json

@@ -81,14 +81,14 @@
             {
               "color": "rgba(0, 0, 0, .15)",
               "offsetX": "0",
-              "offsetY": "1.25px",
+              "offsetY": "1.25rem",
               "blur": "2.5rem"
             },
             {
               "color": "rgba(0, 0, 0, .15)",
               "offsetX": "0",
               "offsetY": ".5rem",
-              "blur": "2.5rem"
+              "blur": "3rem"
             }
           ],
           "$description": "Basic box shadow of level 5."
@@ -203,14 +203,14 @@
             {
               "color": "rgba(0, 0, 0, .15)",
               "offsetX": "0",
-              "offsetY": "1.25px",
+              "offsetY": "1.25rem",
               "blur": "2.5rem"
             },
             {
               "color": "rgba(0, 0, 0, .15)",
               "offsetX": "0",
               "offsetY": ".5rem",
-              "blur": "2.5rem"
+              "blur": "3rem"
             }
           ],
           "$description": "Bottom box shadow of level 5."