@edx/frontend-app-learner-dashboard 1.0.0

package/dist/containers/CourseCard/components/RelatedProgramsBadge/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/RelatedProgramsBadge/hooks.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;AAElC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAAC;IAC9B,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,sBAAsB;CAC7D,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,CAAA,MAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,eAAe,0CAAE,MAAM,KAAI,CAAC,CAAC;IACvE,IAAI,eAAe,GAAG,EAAE,CAAC;IACzB,IAAI,WAAW,EAAE,CAAC;QAChB,eAAe,GAAG,aAAa,CAC7B,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAC3E,EAAE,WAAW,EAAE,CAChB,CAAC;IACJ,CAAC;IAED,OAAO;QACL,WAAW;QACX,eAAe;QACf,MAAM;QACN,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;QAChC,UAAU,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;KACnC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { StrictDict } from '@src/utils';\nimport { useCourseData } from '@src/hooks';\n\nimport messages from './messages';\nimport * as module from './hooks';\n\nexport const state = StrictDict({\n  isOpen: (val) => React.useState(val), // eslint-disable-line\n});\n\nexport const useRelatedProgramsBadgeData = ({ cardId }) => {\n  const [isOpen, setIsOpen] = module.state.isOpen(false);\n  const { formatMessage } = useIntl();\n  const courseData = useCourseData(cardId);\n  const numPrograms = courseData?.programs?.relatedPrograms?.length || 0;\n  let programsMessage = '';\n  if (numPrograms) {\n    programsMessage = formatMessage(\n      numPrograms === 1 ? messages.badgeLabelSingular : messages.badgeLabelPlural,\n      { numPrograms },\n    );\n  }\n\n  return {\n    numPrograms,\n    programsMessage,\n    isOpen,\n    openModal: () => setIsOpen(true),\n    closeModal: () => setIsOpen(false),\n  };\n};\n\nexport default useRelatedProgramsBadgeData;\n"]}

package/dist/containers/CourseCard/components/RelatedProgramsBadge/index.d.ts

@@ -0,0 +1,10 @@
+export function RelatedProgramsBadge({ cardId }: {
+    cardId: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+export namespace RelatedProgramsBadge {
+    namespace propTypes {
+        let cardId: PropTypes.Validator<string>;
+    }
+}
+export default RelatedProgramsBadge;
+import PropTypes from 'prop-types';

package/dist/containers/CourseCard/components/RelatedProgramsBadge/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable quotes */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon } from '@openedx/paragon';
+import { Program } from '@openedx/paragon/icons';
+import RelatedProgramsBadgeModal from '../../../../containers/RelatedProgramsModal';
+import useRelatedProgramsBadgeData from './hooks';
+export const RelatedProgramsBadge = ({ cardId }) => {
+    const { isOpen, openModal, closeModal, numPrograms, programsMessage, } = useRelatedProgramsBadgeData({ cardId });
+    if (numPrograms === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { "data-testid": "RelatedProgramsBadge", className: "pl-0 mr-0 justify-content-start align-self-start flex-shrink-1", variant: "tertiary", size: "sm", onClick: openModal, children: [_jsx(Icon, { src: Program, className: "mr-2 pr-0" }), " ", programsMessage] }), _jsx(RelatedProgramsBadgeModal, { isOpen, closeModal, cardId })] }));
+};
+RelatedProgramsBadge.propTypes = {
+    cardId: PropTypes.string.isRequired,
+};
+export default RelatedProgramsBadge;
+//# sourceMappingURL=index.js.map

package/dist/containers/CourseCard/components/RelatedProgramsBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx"],"names":[],"mappings":";AAAA,2BAA2B;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,yBAAyB,MAAM,sCAAsC,CAAC;AAC7E,OAAO,2BAA2B,MAAM,SAAS,CAAC;AAElD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACjD,MAAM,EACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,GAC5D,GAAG,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE5C,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BACE,MAAC,MAAM,mBACO,sBAAsB,EAClC,SAAS,EAAC,gEAAgE,EAC1E,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,aAElB,KAAC,IAAI,IAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,WAAW,GAAG,OAAE,eAAe,IACtD,EACT,KAAC,yBAAyB,IAAO,MAAM,EAAE,UAAU,EAAE,MAAM,GAAM,IAChE,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,oBAAoB,CAAC,SAAS,GAAG;IAC/B,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["/* eslint-disable quotes */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Button, Icon } from '@openedx/paragon';\nimport { Program } from '@openedx/paragon/icons';\n\nimport RelatedProgramsBadgeModal from '@src/containers/RelatedProgramsModal';\nimport useRelatedProgramsBadgeData from './hooks';\n\nexport const RelatedProgramsBadge = ({ cardId }) => {\n  const {\n    isOpen, openModal, closeModal, numPrograms, programsMessage,\n  } = useRelatedProgramsBadgeData({ cardId });\n\n  if (numPrograms === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <Button\n        data-testid=\"RelatedProgramsBadge\"\n        className=\"pl-0 mr-0 justify-content-start align-self-start flex-shrink-1\"\n        variant=\"tertiary\"\n        size=\"sm\"\n        onClick={openModal}\n      >\n        <Icon src={Program} className=\"mr-2 pr-0\" /> {programsMessage}\n      </Button>\n      <RelatedProgramsBadgeModal {...{ isOpen, closeModal, cardId }} />\n    </>\n  );\n};\nRelatedProgramsBadge.propTypes = {\n  cardId: PropTypes.string.isRequired,\n};\n\nexport default RelatedProgramsBadge;\n"]}

package/dist/containers/CourseCard/components/RelatedProgramsBadge/messages.d.ts

@@ -0,0 +1,16 @@
+export namespace messages {
+    namespace badgeLabelPlural {
+        let id: string;
+        let description: string;
+        let defaultMessage: string;
+    }
+    namespace badgeLabelSingular {
+        let id_1: string;
+        export { id_1 as id };
+        let description_1: string;
+        export { description_1 as description };
+        let defaultMessage_1: string;
+        export { defaultMessage_1 as defaultMessage };
+    }
+}
+export default messages;

package/dist/containers/CourseCard/components/RelatedProgramsBadge/messages.js

@@ -0,0 +1,14 @@
+export const messages = {
+    badgeLabelPlural: {
+        id: 'learner-dash.courseCard.relatedProgramsBadge.label.plural',
+        description: 'Label test indicating number of related programs for a course card',
+        defaultMessage: '{numPrograms} Related Programs',
+    },
+    badgeLabelSingular: {
+        id: 'learner-dash.courseCard.relatedProgramsBadge.label.singular',
+        description: 'Label test indicating a single related program for a course card',
+        defaultMessage: '{numPrograms} Related Program',
+    },
+};
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/CourseCard/components/RelatedProgramsBadge/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/RelatedProgramsBadge/messages.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,gBAAgB,EAAE;QAChB,EAAE,EAAE,2DAA2D;QAC/D,WAAW,EAAE,oEAAoE;QACjF,cAAc,EAAE,gCAAgC;KACjD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,6DAA6D;QACjE,WAAW,EAAE,kEAAkE;QAC/E,cAAc,EAAE,+BAA+B;KAChD;CACF,CAAC;AACF,eAAe,QAAQ,CAAC","sourcesContent":["export const messages = {\n  badgeLabelPlural: {\n    id: 'learner-dash.courseCard.relatedProgramsBadge.label.plural',\n    description: 'Label test indicating number of related programs for a course card',\n    defaultMessage: '{numPrograms} Related Programs',\n  },\n  badgeLabelSingular: {\n    id: 'learner-dash.courseCard.relatedProgramsBadge.label.singular',\n    description: 'Label test indicating a single related program for a course card',\n    defaultMessage: '{numPrograms} Related Program',\n  },\n};\nexport default messages;\n"]}

package/dist/containers/CourseCard/components/hooks.d.ts

@@ -0,0 +1,8 @@
+export function useActionDisabledState(cardId: any): {
+    disableBeginCourse: any;
+    disableResumeCourse: any;
+    disableViewCourse: any;
+    disableSelectSession: boolean;
+    disableCourseTitle: any;
+};
+export default useActionDisabledState;

package/dist/containers/CourseCard/components/hooks.js

@@ -0,0 +1,25 @@
+import { useCourseData, useEntitlementInfo, useIsMasquerading } from '../../../hooks';
+export const useActionDisabledState = (cardId) => {
+    var _a;
+    const courseData = useCourseData(cardId);
+    const isMasquerading = useIsMasquerading();
+    const { isAudit, isAuditAccessExpired, } = courseData.enrollment || {};
+    const { isStaff, hasUnmetPrereqs, isTooEarly } = ((_a = courseData.enrollment) === null || _a === void 0 ? void 0 : _a.coursewareAccess) || {};
+    const hasAccess = isStaff || !(hasUnmetPrereqs || isTooEarly);
+    const { isEntitlement, isFulfilled, canChange, hasSessions, } = useEntitlementInfo(courseData);
+    const { resumeUrl, homeUrl } = courseData.courseRun || {};
+    const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
+    const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
+    const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);
+    const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);
+    const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
+    return {
+        disableBeginCourse,
+        disableResumeCourse,
+        disableViewCourse,
+        disableSelectSession,
+        disableCourseTitle,
+    };
+};
+export default useActionDisabledState;
+//# sourceMappingURL=hooks.js.map

package/dist/containers/CourseCard/components/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../src/containers/CourseCard/components/hooks.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,MAAM,EAAE,EAAE;;IAC/C,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,EACJ,OAAO,EAAE,oBAAoB,GAC9B,GAAG,UAAU,CAAC,UAAU,IAAI,EAAE,CAAC;IAChC,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,gBAAgB,KAAI,EAAE,CAAC;IAC/F,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,CAAC,eAAe,IAAI,UAAU,CAAC,CAAC;IAC9D,MAAM,EACJ,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,GACnD,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAEnC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,SAAS,IAAI,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC,CAAC,CAAC;IAC3G,MAAM,mBAAmB,GAAG,CAAC,SAAS,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC,CAAC,CAAC;IAC9G,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC,CAAC;IAC1E,MAAM,oBAAoB,GAAG,CAAC,aAAa,IAAI,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC,CAAC;IAE5G,MAAM,kBAAkB,GAAG,CAAC,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC;IAEhF,OAAO;QACL,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,oBAAoB;QACpB,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useCourseData, useEntitlementInfo, useIsMasquerading } from '@src/hooks';\n\nexport const useActionDisabledState = (cardId) => {\n  const courseData = useCourseData(cardId);\n  const isMasquerading = useIsMasquerading();\n\n  const {\n    isAudit, isAuditAccessExpired,\n  } = courseData.enrollment || {};\n  const { isStaff, hasUnmetPrereqs, isTooEarly } = courseData.enrollment?.coursewareAccess || {};\n  const hasAccess = isStaff || !(hasUnmetPrereqs || isTooEarly);\n  const {\n    isEntitlement, isFulfilled, canChange, hasSessions,\n  } = useEntitlementInfo(courseData);\n\n  const { resumeUrl, homeUrl } = courseData.courseRun || {};\n  const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));\n  const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));\n  const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);\n  const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);\n\n  const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;\n\n  return {\n    disableBeginCourse,\n    disableResumeCourse,\n    disableViewCourse,\n    disableSelectSession,\n    disableCourseTitle,\n  };\n};\n\nexport default useActionDisabledState;\n"]}

package/dist/containers/CourseCard/hooks.d.ts

@@ -0,0 +1 @@
+export function useIsCollapsed(): boolean;

package/dist/containers/CourseCard/hooks.js

@@ -0,0 +1,6 @@
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+export const useIsCollapsed = () => {
+    const { width } = useWindowSize();
+    return width < breakpoints.small.maxWidth;
+};
+//# sourceMappingURL=hooks.js.map

package/dist/containers/CourseCard/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/containers/CourseCard/hooks.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAC;IAClC,OAAO,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import { useWindowSize, breakpoints } from '@openedx/paragon';\n\nexport const useIsCollapsed = () => {\n  const { width } = useWindowSize();\n  return width < breakpoints.small.maxWidth;\n};\n"]}

package/dist/containers/CourseCard/index.d.ts

@@ -0,0 +1,10 @@
+export function CourseCard({ cardId, }: {
+    cardId: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace CourseCard {
+    namespace propTypes {
+        let cardId: PropTypes.Validator<string>;
+    }
+}
+export default CourseCard;
+import PropTypes from 'prop-types';

package/dist/containers/CourseCard/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card } from '@openedx/paragon';
+import { useIsCollapsed } from './hooks';
+import CourseCardBanners from './components/CourseCardBanners';
+import CourseCardImage from './components/CourseCardImage';
+import CourseCardMenu from './components/CourseCardMenu';
+import CourseCardActions from './components/CourseCardActions';
+import CourseCardDetails from './components/CourseCardDetails';
+import CourseCardTitle from './components/CourseCardTitle';
+import './CourseCard.scss';
+export const CourseCard = ({ cardId, }) => {
+    const isCollapsed = useIsCollapsed();
+    const orientation = isCollapsed ? 'vertical' : 'horizontal';
+    return (_jsx("div", { className: "mb-4.5 course-card", id: cardId, "data-testid": "CourseCard", children: _jsx(Card, { orientation: orientation, children: _jsxs("div", { className: "d-flex flex-column w-100", children: [_jsxs("div", Object.assign({}, (!isCollapsed && { className: 'd-flex' }), { children: [_jsx(CourseCardImage, { cardId: cardId, orientation: "horizontal" }), _jsxs(Card.Body, { children: [_jsx(Card.Header, { title: _jsx(CourseCardTitle, { cardId: cardId }), actions: _jsx(CourseCardMenu, { cardId: cardId }) }), _jsx(Card.Section, { className: "pt-0", children: _jsx(CourseCardDetails, { cardId: cardId }) }), _jsx(Card.Footer, { orientation: orientation, children: _jsx(CourseCardActions, { cardId: cardId }) })] })] })), _jsx(CourseCardBanners, { cardId: cardId })] }) }) }));
+};
+CourseCard.propTypes = {
+    cardId: PropTypes.string.isRequired,
+};
+export default CourseCard;
+//# sourceMappingURL=index.js.map

package/dist/containers/CourseCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CourseCard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,GACP,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC;IAC5D,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,MAAM,iBAAc,YAAY,YACtE,KAAC,IAAI,IAAC,WAAW,EAAE,WAAW,YAC5B,eAAK,SAAS,EAAC,0BAA0B,aACvC,+BAAS,CAAC,CAAC,WAAW,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,eAChD,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAC,YAAY,GAAG,EAC5D,MAAC,IAAI,CAAC,IAAI,eACR,KAAC,IAAI,CAAC,MAAM,IACV,KAAK,EAAE,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,GAAI,EAC1C,OAAO,EAAE,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3C,EACF,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,MAAM,YAC5B,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,GACxB,EACf,KAAC,IAAI,CAAC,MAAM,IAAC,WAAW,EAAE,WAAW,YACnC,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,GACzB,IACJ,KACR,EACN,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,IACjC,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AACF,UAAU,CAAC,SAAS,GAAG;IACrB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Card } from '@openedx/paragon';\n\nimport { useIsCollapsed } from './hooks';\nimport CourseCardBanners from './components/CourseCardBanners';\nimport CourseCardImage from './components/CourseCardImage';\nimport CourseCardMenu from './components/CourseCardMenu';\nimport CourseCardActions from './components/CourseCardActions';\nimport CourseCardDetails from './components/CourseCardDetails';\nimport CourseCardTitle from './components/CourseCardTitle';\n\nimport './CourseCard.scss';\n\nexport const CourseCard = ({\n  cardId,\n}) => {\n  const isCollapsed = useIsCollapsed();\n  const orientation = isCollapsed ? 'vertical' : 'horizontal';\n  return (\n    <div className=\"mb-4.5 course-card\" id={cardId} data-testid=\"CourseCard\">\n      <Card orientation={orientation}>\n        <div className=\"d-flex flex-column w-100\">\n          <div {...(!isCollapsed && { className: 'd-flex' })}>\n            <CourseCardImage cardId={cardId} orientation=\"horizontal\" />\n            <Card.Body>\n              <Card.Header\n                title={<CourseCardTitle cardId={cardId} />}\n                actions={<CourseCardMenu cardId={cardId} />}\n              />\n              <Card.Section className=\"pt-0\">\n                <CourseCardDetails cardId={cardId} />\n              </Card.Section>\n              <Card.Footer orientation={orientation}>\n                <CourseCardActions cardId={cardId} />\n              </Card.Footer>\n            </Card.Body>\n          </div>\n          <CourseCardBanners cardId={cardId} />\n        </div>\n      </Card>\n    </div>\n  );\n};\nCourseCard.propTypes = {\n  cardId: PropTypes.string.isRequired,\n};\n\nexport default CourseCard;\n"]}

package/dist/containers/CourseCard/messages.d.ts

@@ -0,0 +1,32 @@
+export default messages;
+declare namespace messages {
+    namespace bannerAlt {
+        let id: string;
+        let description: string;
+        let defaultMessage: string;
+    }
+    namespace verifiedBanner {
+        let id_1: string;
+        export { id_1 as id };
+        let description_1: string;
+        export { description_1 as description };
+        let defaultMessage_1: string;
+        export { defaultMessage_1 as defaultMessage };
+    }
+    namespace verifiedHoverDescription {
+        let id_2: string;
+        export { id_2 as id };
+        let description_2: string;
+        export { description_2 as description };
+        let defaultMessage_2: string;
+        export { defaultMessage_2 as defaultMessage };
+    }
+    namespace verifiedBannerRibbonAlt {
+        let id_3: string;
+        export { id_3 as id };
+        let description_3: string;
+        export { description_3 as description };
+        let defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+    }
+}

package/dist/containers/CourseCard/messages.js

@@ -0,0 +1,25 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    bannerAlt: {
+        id: 'learner-dash.courseCard.bannerAlt',
+        description: 'Course card banner alt-text',
+        defaultMessage: 'Course thumbnail',
+    },
+    verifiedBanner: {
+        id: 'learner-dash.courseCard.verifiedBanner',
+        description: 'Course card verified banner',
+        defaultMessage: 'Verified',
+    },
+    verifiedHoverDescription: {
+        id: 'learner-dash.courseCard.verifiedHoverDescription',
+        description: 'Course card verified hover description',
+        defaultMessage: 'You\'re enrolled as a verified student',
+    },
+    verifiedBannerRibbonAlt: {
+        id: 'learner-dash.courseCard.verifiedBannerRibbonAlt',
+        description: 'Course card verified banner ribbon alt-text',
+        defaultMessage: 'ID Verified Ribbon/Badge',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/CourseCard/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/CourseCard/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,mCAAmC;QACvC,WAAW,EAAE,6BAA6B;QAC1C,cAAc,EAAE,kBAAkB;KACnC;IACD,cAAc,EAAE;QACd,EAAE,EAAE,wCAAwC;QAC5C,WAAW,EAAE,6BAA6B;QAC1C,cAAc,EAAE,UAAU;KAC3B;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,kDAAkD;QACtD,WAAW,EAAE,wCAAwC;QACrD,cAAc,EAAE,wCAAwC;KACzD;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,iDAAiD;QACrD,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,0BAA0B;KAC3C;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  bannerAlt: {\n    id: 'learner-dash.courseCard.bannerAlt',\n    description: 'Course card banner alt-text',\n    defaultMessage: 'Course thumbnail',\n  },\n  verifiedBanner: {\n    id: 'learner-dash.courseCard.verifiedBanner',\n    description: 'Course card verified banner',\n    defaultMessage: 'Verified',\n  },\n  verifiedHoverDescription: {\n    id: 'learner-dash.courseCard.verifiedHoverDescription',\n    description: 'Course card verified hover description',\n    defaultMessage: 'You\\'re enrolled as a verified student',\n  },\n  verifiedBannerRibbonAlt: {\n    id: 'learner-dash.courseCard.verifiedBannerRibbonAlt',\n    description: 'Course card verified banner ribbon alt-text',\n    defaultMessage: 'ID Verified Ribbon/Badge',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/CourseFilterControls/ActiveCourseFilters.d.ts

@@ -0,0 +1,2 @@
+export function ActiveCourseFilters(): import("react/jsx-runtime").JSX.Element;
+export default ActiveCourseFilters;

package/dist/containers/CourseFilterControls/ActiveCourseFilters.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, Chip } from '@openedx/paragon';
+import { CloseSmall } from '@openedx/paragon/icons';
+import { useFilters } from '../../data/context';
+import messages from './messages';
+import './index.scss';
+export const ActiveCourseFilters = () => {
+    const { formatMessage } = useIntl();
+    const { filters, clearFilters, removeFilter } = useFilters();
+    return (_jsxs("div", { id: "course-list-active-filters", children: [filters.map(filter => (_jsx(Chip, { iconAfter: CloseSmall, onClick: () => removeFilter(filter), children: formatMessage(messages[filter]) }, filter))), _jsx(Button, { variant: "link", onClick: clearFilters, children: formatMessage(messages.clearAll) })] }));
+};
+export default ActiveCourseFilters;
+//# sourceMappingURL=ActiveCourseFilters.js.map

package/dist/containers/CourseFilterControls/ActiveCourseFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveCourseFilters.js","sourceRoot":"","sources":["../../../src/containers/CourseFilterControls/ActiveCourseFilters.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,CAAC;IAE7D,OAAO,CACL,eAAK,EAAE,EAAC,4BAA4B,aACjC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACrB,KAAC,IAAI,IAEH,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAElC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAJ3B,MAAM,CAKN,CACR,CAAC,EACF,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,YAAY,YACzC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAC1B,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { Button, Chip } from '@openedx/paragon';\nimport { CloseSmall } from '@openedx/paragon/icons';\nimport { useFilters } from '@src/data/context';\n\nimport messages from './messages';\nimport './index.scss';\n\nexport const ActiveCourseFilters = () => {\n  const { formatMessage } = useIntl();\n  const { filters, clearFilters, removeFilter } = useFilters();\n\n  return (\n    <div id=\"course-list-active-filters\">\n      {filters.map(filter => (\n        <Chip\n          key={filter}\n          iconAfter={CloseSmall}\n          onClick={() => removeFilter(filter)}\n        >\n          {formatMessage(messages[filter])}\n        </Chip>\n      ))}\n      <Button variant=\"link\" onClick={clearFilters}>\n        {formatMessage(messages.clearAll)}\n      </Button>\n    </div>\n  );\n};\n\nexport default ActiveCourseFilters;\n"]}

package/dist/containers/CourseFilterControls/CourseFilterControls.d.ts

@@ -0,0 +1,2 @@
+export function CourseFilterControls(): import("react/jsx-runtime").JSX.Element;
+export default CourseFilterControls;

package/dist/containers/CourseFilterControls/CourseFilterControls.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import track from '../../tracking';
+import { Button, Form, Icon, ModalPopup, Sheet, breakpoints, useWindowSize, ModalCloseButton, } from '@openedx/paragon';
+import { Close, Tune } from '@openedx/paragon/icons';
+import { useInitializeLearnerHome } from '../../data/hooks';
+import { useFilters } from '../../data/context';
+import FilterForm from './components/FilterForm';
+import SortForm from './components/SortForm';
+import messages from './messages';
+import './index.scss';
+export const CourseFilterControls = () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [targetRef, setTargetRef] = React.useState(null);
+    const { formatMessage } = useIntl();
+    const { data } = useInitializeLearnerHome();
+    const hasCourses = React.useMemo(() => { var _a; return ((_a = data === null || data === void 0 ? void 0 : data.courses) === null || _a === void 0 ? void 0 : _a.length) > 0; }, [data]);
+    const { filters, sortBy, setSortBy, addFilter, removeFilter, } = useFilters();
+    const openFiltersOptions = () => {
+        track.filter.filterClicked();
+        setIsOpen(true);
+    };
+    const closeFiltersOptions = () => {
+        track.filter.filterOptionSelected(filters);
+        setIsOpen(false);
+    };
+    const handleSortChange = (event) => {
+        setSortBy(event.target.value);
+    };
+    const handleFilterChange = ({ target: { checked, value } }) => {
+        const update = checked ? addFilter : removeFilter;
+        update(value);
+    };
+    const { width } = useWindowSize();
+    const isMobile = width < breakpoints.small.minWidth;
+    return (_jsxs("div", { id: "course-filter-controls", children: [_jsx(Button, { ref: setTargetRef, variant: "outline-primary", iconBefore: Tune, onClick: openFiltersOptions, disabled: !hasCourses, children: formatMessage(messages.refine) }), _jsx(Form, { children: isMobile
+                    ? (_jsxs(Sheet, { className: "w-75", position: "left", show: isOpen, onClose: closeFiltersOptions, children: [_jsx("div", { className: "p-1 mr-3", children: _jsx("b", { children: formatMessage(messages.refine) }) }), _jsx("hr", {}), _jsx("div", { className: "filter-form-row", children: _jsx(FilterForm, { filters, handleFilterChange }) }), _jsx("div", { className: "filter-form-row text-left m-1", children: _jsx(SortForm, { sortBy, handleSortChange }) }), _jsx("div", { className: "pgn__modal-close-container", children: _jsx(ModalCloseButton, { variant: "tertiary", onClick: closeFiltersOptions, children: _jsx(Icon, { src: Close }) }) })] })) : (_jsx(ModalPopup, { positionRef: targetRef, isOpen: isOpen, onClose: closeFiltersOptions, placement: "bottom-end", children: _jsxs("div", { id: "course-filter-controls-card", className: "bg-white p-3 rounded shadow d-flex flex-row", children: [_jsx("div", { className: "filter-form-col", children: _jsx(FilterForm, { filters, handleFilterChange }) }), _jsx("hr", { className: "h-100 bg-primary-200 mx-3 my-0" }), _jsx("div", { className: "filter-form-col text-left m-1", children: _jsx(SortForm, { sortBy, handleSortChange }) })] }) })) })] }));
+};
+export default CourseFilterControls;
+//# sourceMappingURL=CourseFilterControls.js.map

package/dist/containers/CourseFilterControls/CourseFilterControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseFilterControls.js","sourceRoot":"","sources":["../../../src/containers/CourseFilterControls/CourseFilterControls.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,KAAK,EACL,WAAW,EACX,aAAa,EACb,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,IAAI,EAAE,GAAG,wBAAwB,EAAE,CAAC;IAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1E,MAAM,EACJ,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,GACpD,GAAG,UAAU,EAAE,CAAC;IAEjB,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;QAC7B,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,KAAK,CAAC,MAAM,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAC3C,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,EAAE;QACjC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE;QAC5D,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;QAClD,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAG,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;IAEpD,OAAO,CACL,eAAK,EAAE,EAAC,wBAAwB,aAC9B,KAAC,MAAM,IACL,GAAG,EAAE,YAAY,EACjB,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,kBAAkB,EAC3B,QAAQ,EAAE,CAAC,UAAU,YAEpB,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GACxB,EACT,KAAC,IAAI,cACF,QAAQ;oBACP,CAAC,CAAC,CACA,MAAC,KAAK,IACJ,SAAS,EAAC,MAAM,EAChB,QAAQ,EAAC,MAAM,EACf,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,mBAAmB,aAE5B,cAAK,SAAS,EAAC,UAAU,YACvB,sBAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAK,GACnC,EACN,cAAM,EACN,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,UAAU,IAAO,OAAO,EAAE,kBAAkB,GAAM,GAC/C,EACN,cAAK,SAAS,EAAC,+BAA+B,YAC5C,KAAC,QAAQ,IAAO,MAAM,EAAE,gBAAgB,GAAM,GAC1C,EACN,cAAK,SAAS,EAAC,4BAA4B,YACzC,KAAC,gBAAgB,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,mBAAmB,YAC/D,KAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,GACH,GACf,IACA,CACT,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,WAAW,EAAE,SAAS,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAC,YAAY,YAEtB,eACE,EAAE,EAAC,6BAA6B,EAChC,SAAS,EAAC,6CAA6C,aAEvD,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,UAAU,IAAO,OAAO,EAAE,kBAAkB,GAAM,GAC/C,EACN,aAAI,SAAS,EAAC,gCAAgC,GAAG,EACjD,cAAK,SAAS,EAAC,+BAA+B,YAC5C,KAAC,QAAQ,IAAO,MAAM,EAAE,gBAAgB,GAAM,GAC1C,IACF,GACK,CACd,GACE,IACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport track from '@src/tracking';\nimport {\n  Button,\n  Form,\n  Icon,\n  ModalPopup,\n  Sheet,\n  breakpoints,\n  useWindowSize,\n  ModalCloseButton,\n} from '@openedx/paragon';\nimport { Close, Tune } from '@openedx/paragon/icons';\n\nimport { useInitializeLearnerHome } from '@src/data/hooks';\nimport { useFilters } from '@src/data/context';\nimport FilterForm from './components/FilterForm';\nimport SortForm from './components/SortForm';\nimport messages from './messages';\n\nimport './index.scss';\n\nexport const CourseFilterControls = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [targetRef, setTargetRef] = React.useState(null);\n  const { formatMessage } = useIntl();\n  const { data } = useInitializeLearnerHome();\n  const hasCourses = React.useMemo(() => data?.courses?.length > 0, [data]);\n  const {\n    filters, sortBy, setSortBy, addFilter, removeFilter,\n  } = useFilters();\n\n  const openFiltersOptions = () => {\n    track.filter.filterClicked();\n    setIsOpen(true);\n  };\n  const closeFiltersOptions = () => {\n    track.filter.filterOptionSelected(filters);\n    setIsOpen(false);\n  };\n\n  const handleSortChange = (event) => {\n    setSortBy(event.target.value);\n  };\n\n  const handleFilterChange = ({ target: { checked, value } }) => {\n    const update = checked ? addFilter : removeFilter;\n    update(value);\n  };\n  const { width } = useWindowSize();\n  const isMobile = width < breakpoints.small.minWidth;\n\n  return (\n    <div id=\"course-filter-controls\">\n      <Button\n        ref={setTargetRef}\n        variant=\"outline-primary\"\n        iconBefore={Tune}\n        onClick={openFiltersOptions}\n        disabled={!hasCourses}\n      >\n        {formatMessage(messages.refine)}\n      </Button>\n      <Form>\n        {isMobile\n          ? (\n            <Sheet\n              className=\"w-75\"\n              position=\"left\"\n              show={isOpen}\n              onClose={closeFiltersOptions}\n            >\n              <div className=\"p-1 mr-3\">\n                <b>{formatMessage(messages.refine)}</b>\n              </div>\n              <hr />\n              <div className=\"filter-form-row\">\n                <FilterForm {...{ filters, handleFilterChange }} />\n              </div>\n              <div className=\"filter-form-row text-left m-1\">\n                <SortForm {...{ sortBy, handleSortChange }} />\n              </div>\n              <div className=\"pgn__modal-close-container\">\n                <ModalCloseButton variant=\"tertiary\" onClick={closeFiltersOptions}>\n                  <Icon src={Close} />\n                </ModalCloseButton>\n              </div>\n            </Sheet>\n          ) : (\n            <ModalPopup\n              positionRef={targetRef}\n              isOpen={isOpen}\n              onClose={closeFiltersOptions}\n              placement=\"bottom-end\"\n            >\n              <div\n                id=\"course-filter-controls-card\"\n                className=\"bg-white p-3 rounded shadow d-flex flex-row\"\n              >\n                <div className=\"filter-form-col\">\n                  <FilterForm {...{ filters, handleFilterChange }} />\n                </div>\n                <hr className=\"h-100 bg-primary-200 mx-3 my-0\" />\n                <div className=\"filter-form-col text-left m-1\">\n                  <SortForm {...{ sortBy, handleSortChange }} />\n                </div>\n              </div>\n            </ModalPopup>\n          )}\n      </Form>\n    </div>\n  );\n};\n\nexport default CourseFilterControls;\n"]}

package/dist/containers/CourseFilterControls/components/Checkbox.d.ts

@@ -0,0 +1,10 @@
+export function Checkbox({ filterKey }: {
+    filterKey: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Checkbox {
+    namespace propTypes {
+        let filterKey: PropTypes.Validator<string>;
+    }
+}
+export default Checkbox;
+import PropTypes from 'prop-types';

package/dist/containers/CourseFilterControls/components/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+import { Form } from '@openedx/paragon';
+import messages from '../messages';
+export const Checkbox = ({ filterKey }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(Form.Checkbox, { className: "py-2", value: filterKey, children: formatMessage(messages[filterKey]) }));
+};
+Checkbox.propTypes = {
+    filterKey: PropTypes.string.isRequired,
+};
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/dist/containers/CourseFilterControls/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/containers/CourseFilterControls/components/Checkbox.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACxC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO,CACL,KAAC,IAAI,CAAC,QAAQ,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,YAC7C,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,GACrB,CACjB,CAAC;AACJ,CAAC,CAAC;AACF,QAAQ,CAAC,SAAS,GAAG;IACnB,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACvC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { Form } from '@openedx/paragon';\n\nimport messages from '../messages';\n\nexport const Checkbox = ({ filterKey }) => {\n  const { formatMessage } = useIntl();\n  return (\n    <Form.Checkbox className=\"py-2\" value={filterKey}>\n      {formatMessage(messages[filterKey])}\n    </Form.Checkbox>\n  );\n};\nCheckbox.propTypes = {\n  filterKey: PropTypes.string.isRequired,\n};\n\nexport default Checkbox;\n"]}

package/dist/containers/CourseFilterControls/components/FilterForm.d.ts

@@ -0,0 +1,13 @@
+export const filterOrder: any[];
+export function FilterForm({ filters, handleFilterChange, }: {
+    filters: any;
+    handleFilterChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace FilterForm {
+    namespace propTypes {
+        let filters: PropTypes.Validator<(string | null | undefined)[]>;
+        let handleFilterChange: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+export default FilterForm;
+import PropTypes from 'prop-types';

package/dist/containers/CourseFilterControls/components/FilterForm.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+import { FilterKeys } from '../../../data/constants/app';
+import { Form } from '@openedx/paragon';
+import Checkbox from './Checkbox';
+import messages from '../messages';
+export const filterOrder = [
+    FilterKeys.inProgress,
+    FilterKeys.notStarted,
+    FilterKeys.done,
+    FilterKeys.notEnrolled,
+    FilterKeys.upgraded,
+];
+export const FilterForm = ({ filters, handleFilterChange, }) => {
+    const { formatMessage } = useIntl();
+    return (_jsxs(Form.Group, { children: [_jsx("div", { className: "filter-form-heading mb-1", children: formatMessage(messages.courseStatus) }), _jsx(Form.CheckboxSet, { name: "course-status-filters", onChange: handleFilterChange, value: filters, children: filterOrder.map(filterKey => (_jsx(Checkbox, { filterKey: filterKey }, filterKey))) })] }));
+};
+FilterForm.propTypes = {
+    filters: PropTypes.arrayOf(PropTypes.string).isRequired,
+    handleFilterChange: PropTypes.func.isRequired,
+};
+export default FilterForm;
+//# sourceMappingURL=FilterForm.js.map

package/dist/containers/CourseFilterControls/components/FilterForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterForm.js","sourceRoot":"","sources":["../../../../src/containers/CourseFilterControls/components/FilterForm.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,UAAU,CAAC,UAAU;IACrB,UAAU,CAAC,UAAU;IACrB,UAAU,CAAC,IAAI;IACf,UAAU,CAAC,WAAW;IACtB,UAAU,CAAC,QAAQ;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,OAAO,EACP,kBAAkB,GACnB,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO,CACL,MAAC,IAAI,CAAC,KAAK,eACT,cAAK,SAAS,EAAC,0BAA0B,YAAE,aAAa,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAO,EACtF,KAAC,IAAI,CAAC,WAAW,IACf,IAAI,EAAC,uBAAuB,EAC5B,QAAQ,EAAE,kBAAkB,EAC5B,KAAK,EAAE,OAAO,YAEb,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,CAC5B,KAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,IAAO,SAAS,CAAI,CACnD,CAAC,GACe,IACR,CACd,CAAC;AACJ,CAAC,CAAC;AACF,UAAU,CAAC,SAAS,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,UAAU;IACvD,kBAAkB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAC9C,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { FilterKeys } from '../../../data/constants/app';\n\nimport { Form } from '@openedx/paragon';\n\nimport Checkbox from './Checkbox';\nimport messages from '../messages';\n\nexport const filterOrder = [\n  FilterKeys.inProgress,\n  FilterKeys.notStarted,\n  FilterKeys.done,\n  FilterKeys.notEnrolled,\n  FilterKeys.upgraded,\n];\n\nexport const FilterForm = ({\n  filters,\n  handleFilterChange,\n}) => {\n  const { formatMessage } = useIntl();\n  return (\n    <Form.Group>\n      <div className=\"filter-form-heading mb-1\">{formatMessage(messages.courseStatus)}</div>\n      <Form.CheckboxSet\n        name=\"course-status-filters\"\n        onChange={handleFilterChange}\n        value={filters}\n      >\n        {filterOrder.map(filterKey => (\n          <Checkbox filterKey={filterKey} key={filterKey} />\n        ))}\n      </Form.CheckboxSet>\n    </Form.Group>\n  );\n};\nFilterForm.propTypes = {\n  filters: PropTypes.arrayOf(PropTypes.string).isRequired,\n  handleFilterChange: PropTypes.func.isRequired,\n};\n\nexport default FilterForm;\n"]}

package/dist/containers/CourseFilterControls/components/SortForm.d.ts

@@ -0,0 +1,12 @@
+export function SortForm({ handleSortChange, sortBy, }: {
+    handleSortChange: any;
+    sortBy: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace SortForm {
+    namespace propTypes {
+        let handleSortChange: PropTypes.Validator<(...args: any[]) => any>;
+        let sortBy: PropTypes.Validator<string>;
+    }
+}
+export default SortForm;
+import PropTypes from 'prop-types';

package/dist/containers/CourseFilterControls/components/SortForm.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+import { SortKeys } from '../../../data/constants/app';
+import { Form } from '@openedx/paragon';
+import messages from '../messages';
+export const SortForm = ({ handleSortChange, sortBy, }) => {
+    const { formatMessage } = useIntl();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "filter-form-heading mb-1", children: formatMessage(messages.sort) }), _jsxs(Form.RadioSet, { name: "sort", onChange: handleSortChange, value: sortBy, children: [_jsx(Form.Radio, { className: "py-2", value: SortKeys.enrolled, children: formatMessage(messages.sortLastEnrolled) }), _jsx(Form.Radio, { className: "py-2", value: SortKeys.title, children: formatMessage(messages.sortTitle) })] })] }));
+};
+SortForm.propTypes = {
+    handleSortChange: PropTypes.func.isRequired,
+    sortBy: PropTypes.string.isRequired,
+};
+export default SortForm;
+//# sourceMappingURL=SortForm.js.map

package/dist/containers/CourseFilterControls/components/SortForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortForm.js","sourceRoot":"","sources":["../../../../src/containers/CourseFilterControls/components/SortForm.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,gBAAgB,EAChB,MAAM,GACP,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO,CACL,8BACE,cAAK,SAAS,EAAC,0BAA0B,YAAE,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAO,EAC9E,MAAC,IAAI,CAAC,QAAQ,IACZ,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,MAAM,aAEb,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,YAClD,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GAC9B,EACb,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,YAC/C,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,GACvB,IACC,IACf,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,QAAQ,CAAC,SAAS,GAAG;IACnB,gBAAgB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAC3C,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { SortKeys } from '../../../data/constants/app';\n\nimport { Form } from '@openedx/paragon';\n\nimport messages from '../messages';\n\nexport const SortForm = ({\n  handleSortChange,\n  sortBy,\n}) => {\n  const { formatMessage } = useIntl();\n  return (\n    <>\n      <div className=\"filter-form-heading mb-1\">{formatMessage(messages.sort)}</div>\n      <Form.RadioSet\n        name=\"sort\"\n        onChange={handleSortChange}\n        value={sortBy}\n      >\n        <Form.Radio className=\"py-2\" value={SortKeys.enrolled}>\n          {formatMessage(messages.sortLastEnrolled)}\n        </Form.Radio>\n        <Form.Radio className=\"py-2\" value={SortKeys.title}>\n          {formatMessage(messages.sortTitle)}\n        </Form.Radio>\n      </Form.RadioSet>\n    </>\n  );\n};\nSortForm.propTypes = {\n  handleSortChange: PropTypes.func.isRequired,\n  sortBy: PropTypes.string.isRequired,\n};\n\nexport default SortForm;\n"]}

package/dist/containers/CourseFilterControls/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ActiveCourseFilters } from "./ActiveCourseFilters";
+export { CourseFilterControls };
+export default CourseFilterControls;
+import CourseFilterControls from './CourseFilterControls';

package/dist/containers/CourseFilterControls/index.js

@@ -0,0 +1,5 @@
+import CourseFilterControls from './CourseFilterControls';
+export { default as ActiveCourseFilters } from './ActiveCourseFilters';
+export { CourseFilterControls };
+export default CourseFilterControls;
+//# sourceMappingURL=index.js.map

package/dist/containers/CourseFilterControls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CourseFilterControls/index.jsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAChC,eAAe,oBAAoB,CAAC","sourcesContent":["import CourseFilterControls from './CourseFilterControls';\n\nexport { default as ActiveCourseFilters } from './ActiveCourseFilters';\n\nexport { CourseFilterControls };\nexport default CourseFilterControls;\n"]}

package/dist/containers/CourseFilterControls/index.scss

@@ -0,0 +1,29 @@
+.pgn__sheet-component {
+  max-width: 75% !important;
+  width: 75% !important;
+
+  .filter-form-heading {
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
+#course-filter-controls-card {
+  width: 512px;
+  height: 288px;
+  &.no-enrollments {
+    height: 172px;
+  }
+  .filter-form-heading {
+    font-weight: bold;
+    font-size: 18px;
+  }
+  hr {
+    width: 1px;
+  };
+  .filter-form-col {
+    width: 256px;
+    display: inline-block;
+    text-align: left;
+  }
+}
+

package/dist/containers/CourseFilterControls/messages.d.ts

@@ -0,0 +1,88 @@
+export default messages;
+declare namespace messages {
+    namespace courseStatus {
+        let id: string;
+        let description: string;
+        let defaultMessage: string;
+    }
+    namespace inProgress {
+        let id_1: string;
+        export { id_1 as id };
+        let description_1: string;
+        export { description_1 as description };
+        let defaultMessage_1: string;
+        export { defaultMessage_1 as defaultMessage };
+    }
+    namespace notStarted {
+        let id_2: string;
+        export { id_2 as id };
+        let description_2: string;
+        export { description_2 as description };
+        let defaultMessage_2: string;
+        export { defaultMessage_2 as defaultMessage };
+    }
+    namespace done {
+        let id_3: string;
+        export { id_3 as id };
+        let description_3: string;
+        export { description_3 as description };
+        let defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+    }
+    namespace notEnrolled {
+        let id_4: string;
+        export { id_4 as id };
+        let description_4: string;
+        export { description_4 as description };
+        let defaultMessage_4: string;
+        export { defaultMessage_4 as defaultMessage };
+    }
+    namespace upgraded {
+        let id_5: string;
+        export { id_5 as id };
+        let description_5: string;
+        export { description_5 as description };
+        let defaultMessage_5: string;
+        export { defaultMessage_5 as defaultMessage };
+    }
+    namespace clearAll {
+        let id_6: string;
+        export { id_6 as id };
+        let description_6: string;
+        export { description_6 as description };
+        let defaultMessage_6: string;
+        export { defaultMessage_6 as defaultMessage };
+    }
+    namespace sort {
+        let id_7: string;
+        export { id_7 as id };
+        let description_7: string;
+        export { description_7 as description };
+        let defaultMessage_7: string;
+        export { defaultMessage_7 as defaultMessage };
+    }
+    namespace sortLastEnrolled {
+        let id_8: string;
+        export { id_8 as id };
+        let description_8: string;
+        export { description_8 as description };
+        let defaultMessage_8: string;
+        export { defaultMessage_8 as defaultMessage };
+    }
+    namespace sortTitle {
+        let id_9: string;
+        export { id_9 as id };
+        let description_9: string;
+        export { description_9 as description };
+        let defaultMessage_9: string;
+        export { defaultMessage_9 as defaultMessage };
+    }
+    namespace refine {
+        let id_10: string;
+        export { id_10 as id };
+        let description_10: string;
+        export { description_10 as description };
+        let defaultMessage_10: string;
+        export { defaultMessage_10 as defaultMessage };
+    }
+}