@openedx/paragon 21.12.2 → 21.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.12.2",
+  "version": "21.13.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -46,7 +46,8 @@
     "type-check:watch": "npm run type-check -- --watch",
     "build-types": "tsc --emitDeclarationOnly",
     "playroom:start": "npm run playroom:start --workspace=www",
-    "playroom:build": "npm run playroom:build --workspace=www"
+    "playroom:build": "npm run playroom:build --workspace=www",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -127,6 +128,7 @@
     "jest": "^28.1.3",
     "jest-cli": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
+    "lint-staged": "^15.2.0",
     "markdown-loader-jest": "^0.1.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -173,13 +175,16 @@
       "/component-generator/"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(@edx/paragon)/).*/"
+      "/node_modules/(?!(@openedx/paragon)/).*/"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "npx eslint"
+    ],
+    "*.scss": [
+      "npx stylelint"
+    ]
   },
   "workspaces": [
     "example",

package/src/Button/index.jsx

@@ -51,10 +51,10 @@ Button.propTypes = {
    * */
   variant: PropTypes.string,
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 

package/src/Chip/index.tsx

@@ -86,7 +86,7 @@ Chip.propTypes = {
    * An icon component to render before the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** A click handler for the `Chip` icon before. */
@@ -95,7 +95,7 @@ Chip.propTypes = {
    * An icon component to render before after the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** A click handler for the `Chip` icon after. */

package/src/DataTable/_variables.scss

@@ -1,5 +1,5 @@
 $data-table-background-color: $white !default;
-$data-table-border: 1px solid $gray-200 !default;
+$data-table-border: 2px solid $light-300 !default;
 $data-table-box-shadow: $box-shadow-sm !default;
 $data-table-padding-x: .75rem !default;
 $data-table-padding-y: .75rem !default;

package/src/Icon/README.md

@@ -11,13 +11,13 @@ devStatus: 'Done'
 notes: |
 ---
 
-Displays an svg icon from `@edx/paragon/icons`. See [Icons Foundation Documentation](/foundations/icons) for a list of all available icons.
+Displays an svg icon from `@openedx/paragon/icons`. See [Icons Foundation Documentation](/foundations/icons) for a list of all available icons.
 
 ## Basic Usage
 
 ```jsx live
 // Included in this live jsx scope:
-// import { Add, AddCircle } from '@edx/paragon/icons';
+// import { Add, AddCircle } from '@openedx/paragon/icons';
 <Icon src={Add} />
 ```
 ### With HTML attributes
@@ -26,7 +26,7 @@ HTML attributes can be passed to this component allowing for customization of th
 
 ```jsx live
 // Included in this live jsx scope:
-// import { Add, AddCircle } from '@edx/paragon/icons';
+// import { Add, AddCircle } from '@openedx/paragon/icons';
 <div className="d-flex align-items-center bg-dark">
   <Icon src={Add} className="mx-3 text-white" />
   <Icon src={Add} className="mx-3 text-white" size="xs" />

package/src/Icon/index.jsx

@@ -72,7 +72,7 @@ function Icon({
 Icon.propTypes = {
   /**
    * An icon component to render.
-   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
+   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`
    */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */

package/src/IconButton/index.jsx

@@ -78,7 +78,7 @@ IconButton.propTypes = {
    *  but is going to be deprecated soon, please use Paragon's icons instead. */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@edx/paragon/dist/icon';`
+   * `import { Check } from '@openedx/paragon/dist/icon';`
    * */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Alt text for your icon. For best practice, avoid using alt text to describe

package/src/Pagination/index.scss

@@ -3,6 +3,7 @@
 
 .pagination {
   align-items: center;
+  margin: 0;
 
   .dropdown {
     z-index: 4;

package/src/SearchField/index.jsx

@@ -128,8 +128,8 @@ SearchField.propTypes = {
    *
    * ```jsx
    * {
-   *   submit: import {Search} from '@edx/paragon/icons';,
-   *   clear: import {Close} from '@edx/paragon/icons'.
+   *   submit: import {Search} from '@openedx/paragon/icons';,
+   *   clear: import {Close} from '@openedx/paragon/icons'.
    * }
    * ```
    */