@openedx/paragon 21.6.0 → 21.6.1

package/dist/DataTable/FilterStatus.js

@@ -14,12 +14,17 @@ function FilterStatus(_ref) {
   } = _ref;
   const {
     state,
-    setAllFilters
+    setAllFilters,
+    headers
   } = useContext(DataTableContext);
   if (!setAllFilters) {
     return null;
   }
-  const filterNames = state.filters ? state.filters.map(filter => filter.id) : [];
+  const headersMap = headers.reduce((cur, acc) => {
+    cur[acc.id] = acc.Header;
+    return cur;
+  }, {});
+  const filterNames = state.filters ? state.filters.map(filter => headersMap[filter.id]) : [];
   const filterTexts = /*#__PURE__*/React.createElement("p", null, "Filtered by ", filterNames.join(', '));
   return /*#__PURE__*/React.createElement("div", {
     className: className

package/dist/DataTable/FilterStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterStatus.js","names":["React","useContext","PropTypes","FormattedMessage","DataTableContext","Button","FilterStatus","_ref","className","variant","size","clearFiltersText","buttonClassName","showFilteredFields","state","setAllFilters","filterNames","filters","map","filter","id","filterTexts","createElement","join","onClick","undefined","defaultMessage","description","defaultProps","propTypes","string","oneOfType","element","bool"],"sources":["../../src/DataTable/FilterStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Button from '../Button';\n\nfunction FilterStatus({\n  className, variant, size, clearFiltersText, buttonClassName, showFilteredFields,\n}) {\n  const { state, setAllFilters } = useContext(DataTableContext);\n  if (!setAllFilters) {\n    return null;\n  }\n\n  const filterNames = state.filters ? state.filters.map((filter) => filter.id) : [];\n  const filterTexts = <p>Filtered by {filterNames.join(', ')}</p>;\n\n  return (\n    <div className={className}>\n      {showFilteredFields && filterTexts}\n      <Button\n        className={buttonClassName}\n        variant={variant}\n        size={size}\n        onClick={() => setAllFilters([])}\n      >\n        {clearFiltersText === undefined\n          ? (\n            <FormattedMessage\n              id=\"pgn.DataTable.FilterStatus.clearFiltersText\"\n              defaultMessage=\"Clear filters\"\n              description=\"A text that appears on the `Clear filters` button\"\n            />\n          )\n          : clearFiltersText}\n      </Button>\n    </div>\n  );\n}\n\nFilterStatus.defaultProps = {\n  /** Specifies class name to append to the base element. */\n  className: null,\n  /** Specifies class name to append to the button. */\n  buttonClassName: 'pgn__smart-status-button',\n  /** The visual style of the `FilterStatus`. */\n  variant: 'link',\n  /** The size of the `FilterStatus`. */\n  size: 'inline',\n  /** A text that appears on the `Clear filters` button, defaults to 'Clear filters'. */\n  clearFiltersText: undefined,\n  /** Whether to display applied filters. */\n  showFilteredFields: true,\n};\n\nFilterStatus.propTypes = {\n  className: PropTypes.string,\n  buttonClassName: PropTypes.string,\n  variant: PropTypes.string,\n  size: PropTypes.string,\n  clearFiltersText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n  showFilteredFields: PropTypes.bool,\n};\n\nexport default FilterStatus;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,MAAM,MAAM,WAAW;AAE9B,SAASC,YAAYA,CAAAC,IAAA,EAElB;EAAA,IAFmB;IACpBC,SAAS;IAAEC,OAAO;IAAEC,IAAI;IAAEC,gBAAgB;IAAEC,eAAe;IAAEC;EAC/D,CAAC,GAAAN,IAAA;EACC,MAAM;IAAEO,KAAK;IAAEC;EAAc,CAAC,GAAGd,UAAU,CAACG,gBAAgB,CAAC;EAC7D,IAAI,CAACW,aAAa,EAAE;IAClB,OAAO,IAAI;EACb;EAEA,MAAMC,WAAW,GAAGF,KAAK,CAACG,OAAO,GAAGH,KAAK,CAACG,OAAO,CAACC,GAAG,CAAEC,MAAM,IAAKA,MAAM,CAACC,EAAE,CAAC,GAAG,EAAE;EACjF,MAAMC,WAAW,gBAAGrB,KAAA,CAAAsB,aAAA,YAAG,cAAY,EAACN,WAAW,CAACO,IAAI,CAAC,IAAI,CAAK,CAAC;EAE/D,oBACEvB,KAAA,CAAAsB,aAAA;IAAKd,SAAS,EAAEA;EAAU,GACvBK,kBAAkB,IAAIQ,WAAW,eAClCrB,KAAA,CAAAsB,aAAA,CAACjB,MAAM;IACLG,SAAS,EAAEI,eAAgB;IAC3BH,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXc,OAAO,EAAEA,CAAA,KAAMT,aAAa,CAAC,EAAE;EAAE,GAEhCJ,gBAAgB,KAAKc,SAAS,gBAE3BzB,KAAA,CAAAsB,aAAA,CAACnB,gBAAgB;IACfiB,EAAE,EAAC,6CAA6C;IAChDM,cAAc,EAAC,eAAe;IAC9BC,WAAW,EAAC;EAAmD,CAChE,CAAC,GAEFhB,gBACE,CACL,CAAC;AAEV;AAEAL,YAAY,CAACsB,YAAY,GAAG;EAC1B;EACApB,SAAS,EAAE,IAAI;EACf;EACAI,eAAe,EAAE,0BAA0B;EAC3C;EACAH,OAAO,EAAE,MAAM;EACf;EACAC,IAAI,EAAE,QAAQ;EACd;EACAC,gBAAgB,EAAEc,SAAS;EAC3B;EACAZ,kBAAkB,EAAE;AACtB,CAAC;AAEDP,YAAY,CAACuB,SAAS,GAAG;EACvBrB,SAAS,EAAEN,SAAS,CAAC4B,MAAM;EAC3BlB,eAAe,EAAEV,SAAS,CAAC4B,MAAM;EACjCrB,OAAO,EAAEP,SAAS,CAAC4B,MAAM;EACzBpB,IAAI,EAAER,SAAS,CAAC4B,MAAM;EACtBnB,gBAAgB,EAAET,SAAS,CAAC6B,SAAS,CAAC,CAAC7B,SAAS,CAAC8B,OAAO,EAAE9B,SAAS,CAAC4B,MAAM,CAAC,CAAC;EAC5EjB,kBAAkB,EAAEX,SAAS,CAAC+B;AAChC,CAAC;AAED,eAAe3B,YAAY"}
+{"version":3,"file":"FilterStatus.js","names":["React","useContext","PropTypes","FormattedMessage","DataTableContext","Button","FilterStatus","_ref","className","variant","size","clearFiltersText","buttonClassName","showFilteredFields","state","setAllFilters","headers","headersMap","reduce","cur","acc","id","Header","filterNames","filters","map","filter","filterTexts","createElement","join","onClick","undefined","defaultMessage","description","defaultProps","propTypes","string","oneOfType","element","bool"],"sources":["../../src/DataTable/FilterStatus.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Button from '../Button';\n\nfunction FilterStatus({\n  className, variant, size, clearFiltersText, buttonClassName, showFilteredFields,\n}) {\n  const { state, setAllFilters, headers } = useContext(DataTableContext);\n  if (!setAllFilters) {\n    return null;\n  }\n\n  const headersMap = headers.reduce((cur, acc) => {\n    cur[acc.id] = acc.Header;\n    return cur;\n  }, {});\n  const filterNames = state.filters ? state.filters.map((filter) => headersMap[filter.id]) : [];\n  const filterTexts = <p>Filtered by {filterNames.join(', ')}</p>;\n\n  return (\n    <div className={className}>\n      {showFilteredFields && filterTexts}\n      <Button\n        className={buttonClassName}\n        variant={variant}\n        size={size}\n        onClick={() => setAllFilters([])}\n      >\n        {clearFiltersText === undefined\n          ? (\n            <FormattedMessage\n              id=\"pgn.DataTable.FilterStatus.clearFiltersText\"\n              defaultMessage=\"Clear filters\"\n              description=\"A text that appears on the `Clear filters` button\"\n            />\n          )\n          : clearFiltersText}\n      </Button>\n    </div>\n  );\n}\n\nFilterStatus.defaultProps = {\n  /** Specifies class name to append to the base element. */\n  className: null,\n  /** Specifies class name to append to the button. */\n  buttonClassName: 'pgn__smart-status-button',\n  /** The visual style of the `FilterStatus`. */\n  variant: 'link',\n  /** The size of the `FilterStatus`. */\n  size: 'inline',\n  /** A text that appears on the `Clear filters` button, defaults to 'Clear filters'. */\n  clearFiltersText: undefined,\n  /** Whether to display applied filters. */\n  showFilteredFields: true,\n};\n\nFilterStatus.propTypes = {\n  className: PropTypes.string,\n  buttonClassName: PropTypes.string,\n  variant: PropTypes.string,\n  size: PropTypes.string,\n  clearFiltersText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n  showFilteredFields: PropTypes.bool,\n};\n\nexport default FilterStatus;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,MAAM,MAAM,WAAW;AAE9B,SAASC,YAAYA,CAAAC,IAAA,EAElB;EAAA,IAFmB;IACpBC,SAAS;IAAEC,OAAO;IAAEC,IAAI;IAAEC,gBAAgB;IAAEC,eAAe;IAAEC;EAC/D,CAAC,GAAAN,IAAA;EACC,MAAM;IAAEO,KAAK;IAAEC,aAAa;IAAEC;EAAQ,CAAC,GAAGf,UAAU,CAACG,gBAAgB,CAAC;EACtE,IAAI,CAACW,aAAa,EAAE;IAClB,OAAO,IAAI;EACb;EAEA,MAAME,UAAU,GAAGD,OAAO,CAACE,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IAC9CD,GAAG,CAACC,GAAG,CAACC,EAAE,CAAC,GAAGD,GAAG,CAACE,MAAM;IACxB,OAAOH,GAAG;EACZ,CAAC,EAAE,CAAC,CAAC,CAAC;EACN,MAAMI,WAAW,GAAGT,KAAK,CAACU,OAAO,GAAGV,KAAK,CAACU,OAAO,CAACC,GAAG,CAAEC,MAAM,IAAKT,UAAU,CAACS,MAAM,CAACL,EAAE,CAAC,CAAC,GAAG,EAAE;EAC7F,MAAMM,WAAW,gBAAG3B,KAAA,CAAA4B,aAAA,YAAG,cAAY,EAACL,WAAW,CAACM,IAAI,CAAC,IAAI,CAAK,CAAC;EAE/D,oBACE7B,KAAA,CAAA4B,aAAA;IAAKpB,SAAS,EAAEA;EAAU,GACvBK,kBAAkB,IAAIc,WAAW,eAClC3B,KAAA,CAAA4B,aAAA,CAACvB,MAAM;IACLG,SAAS,EAAEI,eAAgB;IAC3BH,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXoB,OAAO,EAAEA,CAAA,KAAMf,aAAa,CAAC,EAAE;EAAE,GAEhCJ,gBAAgB,KAAKoB,SAAS,gBAE3B/B,KAAA,CAAA4B,aAAA,CAACzB,gBAAgB;IACfkB,EAAE,EAAC,6CAA6C;IAChDW,cAAc,EAAC,eAAe;IAC9BC,WAAW,EAAC;EAAmD,CAChE,CAAC,GAEFtB,gBACE,CACL,CAAC;AAEV;AAEAL,YAAY,CAAC4B,YAAY,GAAG;EAC1B;EACA1B,SAAS,EAAE,IAAI;EACf;EACAI,eAAe,EAAE,0BAA0B;EAC3C;EACAH,OAAO,EAAE,MAAM;EACf;EACAC,IAAI,EAAE,QAAQ;EACd;EACAC,gBAAgB,EAAEoB,SAAS;EAC3B;EACAlB,kBAAkB,EAAE;AACtB,CAAC;AAEDP,YAAY,CAAC6B,SAAS,GAAG;EACvB3B,SAAS,EAAEN,SAAS,CAACkC,MAAM;EAC3BxB,eAAe,EAAEV,SAAS,CAACkC,MAAM;EACjC3B,OAAO,EAAEP,SAAS,CAACkC,MAAM;EACzB1B,IAAI,EAAER,SAAS,CAACkC,MAAM;EACtBzB,gBAAgB,EAAET,SAAS,CAACmC,SAAS,CAAC,CAACnC,SAAS,CAACoC,OAAO,EAAEpC,SAAS,CAACkC,MAAM,CAAC,CAAC;EAC5EvB,kBAAkB,EAAEX,SAAS,CAACqC;AAChC,CAAC;AAED,eAAejC,YAAY"}

package/package.json

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

package/src/Breadcrumb/README.md

@@ -38,9 +38,9 @@ Use as a secondary navigation pattern to help convey hierarchy and enable naviga
 ```jsx live
 <Breadcrumb ariaLabel="Breadcrumb mobile view"
   links={[
-    { label: 'Link 1', href: '/link-1' },
-    { label: 'Link 2', href: '/link-2' },
-    { label: 'Link 3', href: '/link-3' },
+    { label: 'Link 1', href: '#link-1' },
+    { label: 'Link 2', href: '#link-2' },
+    { label: 'Link 3', href: '#link-3' },
   ]}
   isMobile
 />
@@ -56,9 +56,9 @@ Use as a secondary navigation pattern to help convey hierarchy and enable naviga
     <div className="bg-dark-700 p-4">
       <Breadcrumb ariaLabel="Breadcrumb inverse pallete"
         links={[
-          {label: 'Link 1', href: '/link-1'},
-          {label: 'Link 2', href: '/link-2'},
-          {label: 'Link 3', href: '/link-3'},
+          {label: 'Link 1', href: '#link-1'},
+          {label: 'Link 2', href: '#link-2'},
+          {label: 'Link 3', href: '#link-3'},
         ]}
         variant="dark"
         isMobile={isExtraSmall}

package/src/DataTable/FilterStatus.jsx

@@ -7,12 +7,16 @@ import Button from '../Button';
 function FilterStatus({
   className, variant, size, clearFiltersText, buttonClassName, showFilteredFields,
 }) {
-  const { state, setAllFilters } = useContext(DataTableContext);
+  const { state, setAllFilters, headers } = useContext(DataTableContext);
   if (!setAllFilters) {
     return null;
   }
 
-  const filterNames = state.filters ? state.filters.map((filter) => filter.id) : [];
+  const headersMap = headers.reduce((cur, acc) => {
+    cur[acc.id] = acc.Header;
+    return cur;
+  }, {});
+  const filterNames = state.filters ? state.filters.map((filter) => headersMap[filter.id]) : [];
   const filterTexts = <p>Filtered by {filterNames.join(', ')}</p>;
 
   return (

package/src/DataTable/tests/FilterStatus.test.jsx

@@ -7,8 +7,9 @@ import FilterStatus from '../FilterStatus';
 import DataTableContext from '../DataTableContext';
 
 const filterNames = ['color', 'breed', 'discipline'];
+const headers = [{ id: 'color', Header: 'color' }, { id: 'breed', Header: 'breed' }, { id: 'discipline', Header: 'discipline' }];
 const filters = filterNames.map((name) => ({ id: name }));
-const instance = { state: { filters }, setAllFilters: () => {} };
+const instance = { state: { filters }, setAllFilters: () => {}, headers };
 const filterProps = {
   buttonClassName: 'buttonClass',
   variant: 'variant',

package/src/DataTable/tests/SmartStatus.test.jsx

@@ -9,6 +9,7 @@ import RowStatus from '../RowStatus';
 import SelectionStatus from '../selection/SelectionStatus';
 
 const filters = [{ id: 'name' }, { id: 'age' }];
+const headers = [{ id: 'name', Header: 'name' }, { id: 'age', Header: 'age' }];
 const filterNames = ['name', 'age'];
 const itemCount = 101;
 const instance = {
@@ -22,6 +23,7 @@ const instance = {
   SelectionStatusComponent: SelectionStatus,
   FilterStatusComponent: FilterStatus,
   RowStatusComponent: RowStatus,
+  headers,
 };
 
 // eslint-disable-next-line react/prop-types

package/src/Menu/README.md

@@ -12,8 +12,6 @@ devStatus: 'Done'
 notes: ''
 ---
 
-## Menu
-
 An arrow-key navigable ``Menu`` which consists of ``MenuItems``. A ``Menu`` can be employed to produce its common variants, including dropdown menus, select menus, and others. ``Menus`` are keyboard navigable with both tab and arrow keys.
 
 ## MenuItem