sync: release-23.x to next

.github/workflows/sync-22-23.yml

@@ -0,0 +1,25 @@
+name: Sync 23.x with 22.x
+on:
+  push:
+    branches:
+      - release-22.x
+  workflow_dispatch:
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+      - name: Create Pull Request
+        id: cpr
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          FROM_BRANCH: release-22.x
+          TO_BRANCH: release-23.x

.stylelintrc.json

@@ -32,6 +32,13 @@
     }],
     "alpha-value-notation": "number",
     "color-function-notation": "legacy",
+    "import-notation": "string",
+    "at-rule-empty-line-before": ["always", {
+      "except": ["blockless-after-same-name-blockless", "first-nested"],
+      "ignore": ["after-comment"],
+      "ignoreAtRules": ["import"]
+    }],
+    "declaration-block-no-redundant-longhand-properties": null,
     "value-keyword-case": ["lower", {
       "ignoreProperties": ["/font-family/"]
     }],

CHANGELOG.md

@@ -802,8 +802,8 @@ The following subcomponents have been added / reworked:
 
 * fix: update image sizing according to figma design
 
-Co-authored-by: vlasovmichael <[email protected]>
-Co-authored-by: vzadorozhnii <[email protected]>
+Co-authored-by: vlasovmichael \<[email protected]\>
+Co-authored-by: vzadorozhnii \<[email protected]\>
 
 
 

example/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [
+    '@edx/eslint-config',
+  ],
+  root: true, // Don't also import the paragon eslint config in the parent directory.
+};

example/package.json

@@ -17,14 +17,10 @@
   "license": "ISC",
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-platform": "^4.2.0",
+    "@edx/frontend-build": "^13.0.14",
+    "@edx/frontend-platform": "^8",
     "@faker-js/faker": "^7.6.0",
-    "core-js": "^3.22.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "regenerator-runtime": "^0.13.9"
-  },
-  "devDependencies": {
-    "@edx/frontend-build": "^12.8.10"
+    "react-dom": "^17.0.2"
   }
 }

example/src/MyComponent.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Button, Form, Icon, Bubble, Stack, Container } from '@openedx/paragon'; // eslint-disable-line
 import { FavoriteBorder } from '@openedx/paragon/icons'; // eslint-disable-line
 
-const MyComponent = () => {
+function MyComponent() {
   const [value, setValue] = useState('');
   const handleChange = (e) => setValue(e.target.value);
   const handleClick = () => alert('Form is submitted!'); // eslint-disable-line no-alert
@@ -26,6 +26,6 @@ const MyComponent = () => {
       </Form>
     </Container>
   );
-};
+}
 
 export default MyComponent;

example/src/index.jsx

@@ -1,6 +1,3 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {

icons/es5/0.js

@@ -1,27 +1,20 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
-var Svg0 = function Svg0(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M7.87 12c0-2.64.83-5.756 4.13-5.756 3.302 0 4.132 3.115 4.132 5.756 0 2.64-.83 5.756-4.132 5.756-3.3 0-4.131-3.115-4.13-5.756Zm4.502-3.538A1.553 1.553 0 0 0 12 8.416v-.002c-1.697 0-1.778 2.422-1.778 3.586 0 .374.01.875.077 1.386l2.198-4.04c.228-.395.113-.677-.125-.884ZM13.782 12c0-.455 0-1.103-.136-1.723l-2.458 4.245c-.342.514-.104.805.274.965.032.013.07.025.104.035.022.01.04.015.064.022.114.028.238.042.37.042 1.7 0 1.782-2.424 1.782-3.586Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.963 4.906C6.867 2.966 9.206 2 11.979 2c2.8 0 5.185.975 7.15 2.927a9.57 9.57 0 0 1 2.143 3.23C21.759 9.358 22 10.643 22 12c0 1.369-.24 2.656-.728 3.86a9.056 9.056 0 0 1-2.128 3.156 10.286 10.286 0 0 1-3.319 2.215 10.05 10.05 0 0 1-3.847.769 9.895 9.895 0 0 1-3.803-.75 10.414 10.414 0 0 1-3.247-2.197 10.126 10.126 0 0 1-2.178-3.25A9.804 9.804 0 0 1 2 12c0-1.322.25-2.588.75-3.803a10.109 10.109 0 0 1 2.213-3.29ZM17.819 6.21C16.212 4.603 14.283 3.8 12.02 3.8c-2.287 0-4.212.822-5.771 2.394A8.72 8.72 0 0 0 4.431 8.89a7.972 7.972 0 0 0-.001 6.212 8.551 8.551 0 0 0 1.82 2.66 8.466 8.466 0 0 0 2.662 1.787c.988.404 2.15.608 3.109.608a7.956 7.956 0 0 0 3.104-.624 8.575 8.575 0 0 0 2.728-1.806C19.414 16.203 20.2 14.297 20.2 12c0-1.1-.203-2.156-.61-3.144A7.994 7.994 0 0 0 17.82 6.21Z",
-    fill: "currentColor"
-  }));
-};
+const Svg0 = props => /*#__PURE__*/React.createElement("svg", {
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M7.87 12c0-2.64.83-5.756 4.13-5.756 3.302 0 4.132 3.115 4.132 5.756 0 2.64-.83 5.756-4.132 5.756-3.3 0-4.131-3.115-4.13-5.756Zm4.502-3.538A1.553 1.553 0 0 0 12 8.416v-.002c-1.697 0-1.778 2.422-1.778 3.586 0 .374.01.875.077 1.386l2.198-4.04c.228-.395.113-.677-.125-.884ZM13.782 12c0-.455 0-1.103-.136-1.723l-2.458 4.245c-.342.514-.104.805.274.965.032.013.07.025.104.035.022.01.04.015.064.022.114.028.238.042.37.042 1.7 0 1.782-2.424 1.782-3.586Z",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M4.963 4.906C6.867 2.966 9.206 2 11.979 2c2.8 0 5.185.975 7.15 2.927a9.57 9.57 0 0 1 2.143 3.23C21.759 9.358 22 10.643 22 12c0 1.369-.24 2.656-.728 3.86a9.056 9.056 0 0 1-2.128 3.156 10.286 10.286 0 0 1-3.319 2.215 10.05 10.05 0 0 1-3.847.769 9.895 9.895 0 0 1-3.803-.75 10.414 10.414 0 0 1-3.247-2.197 10.126 10.126 0 0 1-2.178-3.25A9.804 9.804 0 0 1 2 12c0-1.322.25-2.588.75-3.803a10.109 10.109 0 0 1 2.213-3.29ZM17.819 6.21C16.212 4.603 14.283 3.8 12.02 3.8c-2.287 0-4.212.822-5.771 2.394A8.72 8.72 0 0 0 4.431 8.89a7.972 7.972 0 0 0-.001 6.212 8.551 8.551 0 0 0 1.82 2.66 8.466 8.466 0 0 0 2.662 1.787c.988.404 2.15.608 3.109.608a7.956 7.956 0 0 0 3.104-.624 8.575 8.575 0 0 0 2.728-1.806C19.414 16.203 20.2 14.297 20.2 12c0-1.1-.203-2.156-.61-3.144A7.994 7.994 0 0 0 17.82 6.21Z",
+  fill: "currentColor"
+}));
 export default Svg0;

icons/es5/10K.js

@@ -1,20 +1,13 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
-var Svg10K = function Svg10K(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M10 10.5h1.5v3H10v-3zM21 3H3v18h18V3zM7.5 15H6v-4.5H4.5V9h3v6zM13 9v6H8.5V9H13zm6 6h-1.75l-1.75-2.25V15H14V9h1.5v2.25L17.25 9H19l-2.25 3L19 15z",
-    fill: "currentColor"
-  }));
-};
+const Svg10K = props => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M10 10.5h1.5v3H10v-3zM21 3H3v18h18V3zM7.5 15H6v-4.5H4.5V9h3v6zM13 9v6H8.5V9H13zm6 6h-1.75l-1.75-2.25V15H14V9h1.5v2.25L17.25 9H19l-2.25 3L19 15z",
+  fill: "currentColor"
+}));
 export default Svg10K;

icons/es5/10Mp.js

@@ -1,20 +1,13 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
-var Svg10Mp = function Svg10Mp(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M13.5 7H15v3h-1.5V7zM21 3H3v18h18V3zm-8.5 15.5H11V14h-1v3H8.5v-3h-1v4.5H6v-6h6.5v6zm2.5 0h-1.5v-6H18V17h-3v1.5zm-5-13v6H8.5V7H7V5.5h3zm6.5 0v6H12v-6h4.5zM15 14h1.5v1.5H15V14z",
-    fill: "currentColor"
-  }));
-};
+const Svg10Mp = props => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M13.5 7H15v3h-1.5V7zM21 3H3v18h18V3zm-8.5 15.5H11V14h-1v3H8.5v-3h-1v4.5H6v-6h6.5v6zm2.5 0h-1.5v-6H18V17h-3v1.5zm-5-13v6H8.5V7H7V5.5h3zm6.5 0v6H12v-6h4.5zM15 14h1.5v1.5H15V14z",
+  fill: "currentColor"
+}));
 export default Svg10Mp;

icons/es5/11Mp.js

@@ -1,23 +1,16 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
-var Svg11Mp = function Svg11Mp(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M3 3v18h18V3H3zm5 2.5h3v6H9.5V7H8V5.5zm4.5 13H11V14h-1v3H8.5v-3h-1v4.5H6v-6h6.5v6zm.5-13h3v6h-1.5V7H13V5.5zM18 17h-3v1.5h-1.5v-6H18V17z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M15 14h1.5v1.5H15z",
-    fill: "currentColor"
-  }));
-};
+const Svg11Mp = props => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M3 3v18h18V3H3zm5 2.5h3v6H9.5V7H8V5.5zm4.5 13H11V14h-1v3H8.5v-3h-1v4.5H6v-6h6.5v6zm.5-13h3v6h-1.5V7H13V5.5zM18 17h-3v1.5h-1.5v-6H18V17z",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M15 14h1.5v1.5H15z",
+  fill: "currentColor"
+}));
 export default Svg11Mp;

icons/es5/123.js

@@ -1,20 +1,13 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from "react";
-var Svg123 = function Svg123(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M7 15H5.5v-4.5H4V9h3v6zm6.5-1.5h-3v-1h3V9H9v1.5h3v1H9V15h4.5v-1.5zm6 1.5V9H15v1.5h3v1h-2v1h2v1h-3V15h4.5z",
-    fill: "currentColor"
-  }));
-};
+const Svg123 = props => /*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M7 15H5.5v-4.5H4V9h3v6zm6.5-1.5h-3v-1h3V9H9v1.5h3v1H9V15h4.5v-1.5zm6 1.5V9H15v1.5h3v1h-2v1h2v1h-3V15h4.5z",
+  fill: "currentColor"
+}));
 export default Svg123;