@openedx/paragon 23.18.2 → 23.19.1

package/README.md

@@ -514,10 +514,34 @@ Paragon components can have different behavior in the MFE environment. `example`
 
 Steps to install the `example` app.
 
+To set up the example app with a local Tutor installation, you'll need to configure a Tutor plugin to handle CORS settings
+
+Prerequisites.
+
+Before running the example app, ensure you have a local Tutor installation configured.
+1. Create a new file (i.e. `paragon-example-app.py`) in your tutor plugins folder (`tutor plugins printroot` to get the path).
+2. Add the following content to the paragon-example-app.py file:
+```
+from tutor import hooks
+
+hooks.Filters.ENV_PATCHES.add_item(
+  (
+    "openedx-lms-development-settings",
+    """
+CORS_ORIGIN_WHITELIST.append("http://localhost:8080")
+LOGIN_REDIRECT_WHITELIST.append("http://localhost:8080")
+CSRF_TRUSTED_ORIGINS.append("http://localhost:8080")
+    """
+    )
+)
+```
+3. Enable the plugin: `tutor plugins enable paragon-example-app`
+4. Apply configuration changes: `tutor config save` && `tutor dev restart`
+
+Running the Example App:
 1. `npm install` to install dependencies.
-2. Launch any devstack. It is required for MFE to login into the system and set up configs.
-3. `npm run start-example-mfe` to start the app.
-4. Go to the `example/src/MyComponent.jsx` and use Paragon components inside the MFE environment.
+2. `npm run example:start` to start the app.
+3. Go to the `example/src/MyComponent.jsx` and use Paragon components inside the MFE environment.
 
 ## Semantic Release
 

package/dist/Breadcrumb/index.d.ts

@@ -16,7 +16,7 @@ interface BreadcrumbProps {
     spacer?: React.ReactElement;
     /** allows to add a custom function to be called `onClick` of a breadcrumb link.
      * The use case for this is for adding custom analytics to the component. */
-    clickHandler?: (event: React.MouseEvent, link: any) => void;
+    clickHandler?: (event: React.MouseEvent<HTMLAnchorElement>, link: any) => void;
     /** The `Breadcrumbs` style variant to use. */
     variant?: 'light' | 'dark';
     /** The `Breadcrumbs` mobile variant view. */
@@ -25,6 +25,8 @@ interface BreadcrumbProps {
      * [react-router's Link](https://reactrouter.com/en/main/components/link).
      */
     linkAs?: React.ElementType;
+    /** Optional class name(s) to append to the base `<nav>` element. */
+    className?: string;
 }
-declare function Breadcrumb({ links, activeLabel, spacer, clickHandler, variant, isMobile, ariaLabel, linkAs, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+declare function Breadcrumb({ links, activeLabel, spacer, clickHandler, className, variant, isMobile, ariaLabel, linkAs, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
 export default Breadcrumb;

package/dist/Breadcrumb/index.js

@@ -8,18 +8,17 @@ function Breadcrumb({
   activeLabel,
   spacer,
   clickHandler,
+  className,
   variant = 'light',
   isMobile = false,
   ariaLabel = 'breadcrumb',
-  linkAs = 'a',
-  ...props
+  linkAs = 'a'
 }) {
   const linkCount = links.length;
   const displayLinks = isMobile ? [links[linkCount - 1]] : links;
   return /*#__PURE__*/React.createElement("nav", {
     "aria-label": ariaLabel,
-    className: classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`),
-    ...props
+    className: classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`, className)
   }, /*#__PURE__*/React.createElement("ol", {
     className: classNames('list-inline', {
       'is-mobile': isMobile

package/dist/Breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classNames","BreadcrumbLink","ChevronRight","Icon","Breadcrumb","links","activeLabel","spacer","clickHandler","variant","isMobile","ariaLabel","linkAs","props","linkCount","length","displayLinks","createElement","className","map","link","i","Fragment","key","label","as","linkProps","role","src","id"],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport BreadcrumbLink from './BreadcrumbLink';\nimport { ChevronRight } from '../../icons';\nimport Icon from '../Icon';\n\ninterface BreadcrumbProps {\n  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`\n   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.\n   */\n  links: Array<{ label: string, [key: string]: any }>;\n  /** allows to add a label that is not a link to the end of the breadcrumb. */\n  activeLabel?: string;\n  /** label of the element */\n  ariaLabel?: string;\n  /** allows to add a custom element between the breadcrumb items.\n   * Defaults to `>` rendered using the `Icon` component. */\n  spacer?: React.ReactElement;\n  /** allows to add a custom function to be called `onClick` of a breadcrumb link.\n   * The use case for this is for adding custom analytics to the component. */\n  clickHandler?: (event: React.MouseEvent, link: any) => void;\n  /** The `Breadcrumbs` style variant to use. */\n  variant?: 'light' | 'dark';\n  /** The `Breadcrumbs` mobile variant view. */\n  isMobile?: boolean;\n  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or\n   * [react-router's Link](https://reactrouter.com/en/main/components/link).\n   */\n  linkAs?: React.ElementType;\n}\n\nfunction Breadcrumb({\n  links, activeLabel, spacer, clickHandler,\n  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a', ...props\n}: BreadcrumbProps) {\n  const linkCount = links.length;\n  const displayLinks = isMobile ? [links[linkCount - 1]] : links;\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}\n      {...props}\n    >\n      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>\n        {displayLinks.map((link, i) => (\n          <React.Fragment key={link.label}>\n            <li className={classNames('list-inline-item')}>\n              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />\n            </li>\n            {(activeLabel || ((i + 1) < linkCount))\n              && (\n              <li className=\"list-inline-item\" role=\"presentation\">\n                {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}\n              </li>\n              )}\n          </React.Fragment>\n        ))}\n        {!isMobile && activeLabel && <li className=\"list-inline-item active\" key=\"active\" aria-current=\"page\">{activeLabel}</li>}\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumb;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,aAAa;AAC1C,OAAOC,IAAI,MAAM,SAAS;AA2B1B,SAASC,UAAUA,CAAC;EAClBC,KAAK;EAAEC,WAAW;EAAEC,MAAM;EAAEC,YAAY;EACxCC,OAAO,GAAG,OAAO;EAAEC,QAAQ,GAAG,KAAK;EAAEC,SAAS,GAAG,YAAY;EAAEC,MAAM,GAAG,GAAG;EAAE,GAAGC;AACjE,CAAC,EAAE;EAClB,MAAMC,SAAS,GAAGT,KAAK,CAACU,MAAM;EAC9B,MAAMC,YAAY,GAAGN,QAAQ,GAAG,CAACL,KAAK,CAACS,SAAS,GAAG,CAAC,CAAC,CAAC,GAAGT,KAAK;EAE9D,oBACEN,KAAA,CAAAkB,aAAA;IACE,cAAYN,SAAU;IACtBO,SAAS,EAAElB,UAAU,CAAC,iBAAiB,EAAE,mBAAmBS,OAAO,EAAE,CAAE;IAAA,GACnEI;EAAK,gBAETd,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAElB,UAAU,CAAC,aAAa,EAAE;MAAE,WAAW,EAAEU;IAAS,CAAC;EAAE,GACjEM,YAAY,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,kBACxBtB,KAAA,CAAAkB,aAAA,CAAClB,KAAK,CAACuB,QAAQ;IAACC,GAAG,EAAEH,IAAI,CAACI;EAAM,gBAC9BzB,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAElB,UAAU,CAAC,kBAAkB;EAAE,gBAC5CD,KAAA,CAAAkB,aAAA,CAAChB,cAAc;IAACwB,EAAE,EAAEb,MAAO;IAACJ,YAAY,EAAEA,YAAa;IAACkB,SAAS,EAAEN;EAAK,CAAE,CACxE,CAAC,EACJ,CAACd,WAAW,IAAMe,CAAC,GAAG,CAAC,GAAIP,SAAU,kBAEpCf,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAC,kBAAkB;IAACS,IAAI,EAAC;EAAc,GACjDpB,MAAM,iBAAIR,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACyB,GAAG,EAAE1B,YAAa;IAAC2B,EAAE,EAAE,UAAUR,CAAC;EAAG,CAAE,CACtD,CAEQ,CACjB,CAAC,EACD,CAACX,QAAQ,IAAIJ,WAAW,iBAAIP,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAC,yBAAyB;IAACK,GAAG,EAAC,QAAQ;IAAC,gBAAa;EAAM,GAAEjB,WAAgB,CACrH,CACD,CAAC;AAEV;AAEA,eAAeF,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","BreadcrumbLink","ChevronRight","Icon","Breadcrumb","links","activeLabel","spacer","clickHandler","className","variant","isMobile","ariaLabel","linkAs","linkCount","length","displayLinks","createElement","map","link","i","Fragment","key","label","as","linkProps","role","src","id"],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport BreadcrumbLink from './BreadcrumbLink';\nimport { ChevronRight } from '../../icons';\nimport Icon from '../Icon';\n\ninterface BreadcrumbProps {\n  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`\n   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.\n   */\n  links: Array<{ label: string, [key: string]: any }>;\n  /** allows to add a label that is not a link to the end of the breadcrumb. */\n  activeLabel?: string;\n  /** label of the element */\n  ariaLabel?: string;\n  /** allows to add a custom element between the breadcrumb items.\n   * Defaults to `>` rendered using the `Icon` component. */\n  spacer?: React.ReactElement;\n  /** allows to add a custom function to be called `onClick` of a breadcrumb link.\n   * The use case for this is for adding custom analytics to the component. */\n  clickHandler?: (event: React.MouseEvent<HTMLAnchorElement>, link: any) => void;\n  /** The `Breadcrumbs` style variant to use. */\n  variant?: 'light' | 'dark';\n  /** The `Breadcrumbs` mobile variant view. */\n  isMobile?: boolean;\n  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or\n   * [react-router's Link](https://reactrouter.com/en/main/components/link).\n   */\n  linkAs?: React.ElementType;\n  /** Optional class name(s) to append to the base `<nav>` element. */\n  className?: string;\n}\n\nfunction Breadcrumb({\n  links, activeLabel, spacer, clickHandler, className,\n  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a',\n}: BreadcrumbProps) {\n  const linkCount = links.length;\n  const displayLinks = isMobile ? [links[linkCount - 1]] : links;\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`, className)}\n    >\n      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>\n        {displayLinks.map((link, i) => (\n          <React.Fragment key={link.label}>\n            <li className={classNames('list-inline-item')}>\n              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />\n            </li>\n            {(activeLabel || ((i + 1) < linkCount))\n              && (\n              <li className=\"list-inline-item\" role=\"presentation\">\n                {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}\n              </li>\n              )}\n          </React.Fragment>\n        ))}\n        {!isMobile && activeLabel && <li className=\"list-inline-item active\" key=\"active\" aria-current=\"page\">{activeLabel}</li>}\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumb;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,aAAa;AAC1C,OAAOC,IAAI,MAAM,SAAS;AA6B1B,SAASC,UAAUA,CAAC;EAClBC,KAAK;EAAEC,WAAW;EAAEC,MAAM;EAAEC,YAAY;EAAEC,SAAS;EACnDC,OAAO,GAAG,OAAO;EAAEC,QAAQ,GAAG,KAAK;EAAEC,SAAS,GAAG,YAAY;EAAEC,MAAM,GAAG;AACzD,CAAC,EAAE;EAClB,MAAMC,SAAS,GAAGT,KAAK,CAACU,MAAM;EAC9B,MAAMC,YAAY,GAAGL,QAAQ,GAAG,CAACN,KAAK,CAACS,SAAS,GAAG,CAAC,CAAC,CAAC,GAAGT,KAAK;EAE9D,oBACEN,KAAA,CAAAkB,aAAA;IACE,cAAYL,SAAU;IACtBH,SAAS,EAAET,UAAU,CAAC,iBAAiB,EAAE,mBAAmBU,OAAO,EAAE,EAAED,SAAS;EAAE,gBAElFV,KAAA,CAAAkB,aAAA;IAAIR,SAAS,EAAET,UAAU,CAAC,aAAa,EAAE;MAAE,WAAW,EAAEW;IAAS,CAAC;EAAE,GACjEK,YAAY,CAACE,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,kBACxBrB,KAAA,CAAAkB,aAAA,CAAClB,KAAK,CAACsB,QAAQ;IAACC,GAAG,EAAEH,IAAI,CAACI;EAAM,gBAC9BxB,KAAA,CAAAkB,aAAA;IAAIR,SAAS,EAAET,UAAU,CAAC,kBAAkB;EAAE,gBAC5CD,KAAA,CAAAkB,aAAA,CAAChB,cAAc;IAACuB,EAAE,EAAEX,MAAO;IAACL,YAAY,EAAEA,YAAa;IAACiB,SAAS,EAAEN;EAAK,CAAE,CACxE,CAAC,EACJ,CAACb,WAAW,IAAMc,CAAC,GAAG,CAAC,GAAIN,SAAU,kBAEpCf,KAAA,CAAAkB,aAAA;IAAIR,SAAS,EAAC,kBAAkB;IAACiB,IAAI,EAAC;EAAc,GACjDnB,MAAM,iBAAIR,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACwB,GAAG,EAAEzB,YAAa;IAAC0B,EAAE,EAAE,UAAUR,CAAC;EAAG,CAAE,CACtD,CAEQ,CACjB,CAAC,EACD,CAACT,QAAQ,IAAIL,WAAW,iBAAIP,KAAA,CAAAkB,aAAA;IAAIR,SAAS,EAAC,yBAAyB;IAACa,GAAG,EAAC,QAAQ;IAAC,gBAAa;EAAM,GAAEhB,WAAgB,CACrH,CACD,CAAC;AAEV;AAEA,eAAeF,UAAU","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.18.2",
+  "version": "23.19.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Breadcrumb/{Breadcrumb.test.jsx → Breadcrumb.test.tsx}

@@ -95,4 +95,29 @@ describe('<Breadcrumb />', () => {
     expect(links.getAttribute('target')).toBe('_blank');
     expect(links.getAttribute('href')).toBe('/link-1');
   });
+
+  it('renders with a custom CSS class', () => {
+    render(<Breadcrumb {...baseProps} ariaLabel="Breadcrumbs" className="foobar" />);
+    const nav = screen.getByLabelText('Breadcrumbs');
+    expect(nav.classList).toContain('foobar');
+    expect(nav.classList).toContain('pgn__breadcrumb');
+    expect(nav.classList).toContain('pgn__breadcrumb-light');
+  });
+
+  it('can access data-xxxxx attributes on the links in clickHandler', async () => {
+    const user = userEvent.setup();
+    const clickHandler = jest.fn();
+    render(
+      <Breadcrumb
+        ariaLabel="Location"
+        links={[
+          { label: 'Link1', href: '/link1', 'data-parent-index': 17 },
+        ]}
+        clickHandler={({ currentTarget }) => clickHandler(currentTarget.dataset.parentIndex)}
+      />,
+    );
+    const link = screen.getByRole('link', { name: 'Link1' });
+    await user.click(link);
+    expect(clickHandler).toHaveBeenCalledWith('17');
+  });
 });

package/src/Breadcrumb/index.tsx

@@ -19,7 +19,7 @@ interface BreadcrumbProps {
   spacer?: React.ReactElement;
   /** allows to add a custom function to be called `onClick` of a breadcrumb link.
    * The use case for this is for adding custom analytics to the component. */
-  clickHandler?: (event: React.MouseEvent, link: any) => void;
+  clickHandler?: (event: React.MouseEvent<HTMLAnchorElement>, link: any) => void;
   /** The `Breadcrumbs` style variant to use. */
   variant?: 'light' | 'dark';
   /** The `Breadcrumbs` mobile variant view. */
@@ -28,11 +28,13 @@ interface BreadcrumbProps {
    * [react-router's Link](https://reactrouter.com/en/main/components/link).
    */
   linkAs?: React.ElementType;
+  /** Optional class name(s) to append to the base `<nav>` element. */
+  className?: string;
 }
 
 function Breadcrumb({
-  links, activeLabel, spacer, clickHandler,
-  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a', ...props
+  links, activeLabel, spacer, clickHandler, className,
+  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a',
 }: BreadcrumbProps) {
   const linkCount = links.length;
   const displayLinks = isMobile ? [links[linkCount - 1]] : links;
@@ -40,8 +42,7 @@ function Breadcrumb({
   return (
     <nav
       aria-label={ariaLabel}
-      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}
-      {...props}
+      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`, className)}
     >
       <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
         {displayLinks.map((link, i) => (