@coorpacademy/components 11.40.26 → 11.41.0

package/lib/template/external-course/index.d.ts

@@ -106,6 +106,7 @@ declare namespace ExternalCourse {
                         customLabelClassName: PropTypes.Requireable<string>;
                     }>>;
                     required: PropTypes.Requireable<boolean>;
+                    headingLevel: PropTypes.Requireable<number>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;
                 backgroundImage: PropTypes.Requireable<string>;
@@ -256,6 +257,15 @@ declare namespace ExternalCourse {
                         items: PropTypes.Requireable<(PropTypes.InferProps<{
                             title: PropTypes.Validator<string>;
                             subtitle: PropTypes.Requireable<string>;
+                            titleTags: PropTypes.Requireable<(PropTypes.InferProps<{
+                                label: PropTypes.Validator<string>;
+                                type: PropTypes.Requireable<string>;
+                            }> | null | undefined)[]>;
+                            details: PropTypes.Requireable<string>;
+                            progress: PropTypes.Requireable<PropTypes.InferProps<{
+                                value: PropTypes.Validator<number>;
+                                label: PropTypes.Validator<string>;
+                            }>>;
                             'data-name': PropTypes.Requireable<string>;
                             provider: PropTypes.Requireable<PropTypes.InferProps<{
                                 label: PropTypes.Requireable<string>;
@@ -702,6 +712,7 @@ declare namespace ExternalCourse {
                             customLabelClassName: PropTypes.Requireable<string>;
                         }>>;
                         required: PropTypes.Requireable<boolean>;
+                        headingLevel: PropTypes.Requireable<number>;
                     }> | null | undefined>>;
                     isFetching: PropTypes.Requireable<boolean>;
                     search: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/my-assignments/index.d.ts

@@ -0,0 +1,167 @@
+export default MyAssignments;
+declare function MyAssignments({ title, tabs, sections, cards, emptyState, loading, onCardClick }: {
+    title: any;
+    tabs?: any[] | undefined;
+    sections?: any[] | undefined;
+    cards?: any[] | undefined;
+    emptyState: any;
+    loading?: boolean | undefined;
+    onCardClick: any;
+}): JSX.Element;
+declare namespace MyAssignments {
+    namespace propTypes {
+        export const title: PropTypes.Requireable<string>;
+        export const tabs: PropTypes.Requireable<(PropTypes.InferProps<{
+            key: PropTypes.Validator<string>;
+            label: PropTypes.Requireable<string>;
+            count: PropTypes.Requireable<number>;
+            selected: PropTypes.Requireable<boolean>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        }> | null | undefined)[]>;
+        export const sections: PropTypes.Requireable<(PropTypes.InferProps<{
+            key: PropTypes.Validator<string>;
+            title: PropTypes.Requireable<string>;
+            subtitle: PropTypes.Requireable<string>;
+            count: PropTypes.Validator<number>;
+            cards: PropTypes.Validator<(PropTypes.InferProps<{
+                typeLabel: PropTypes.Requireable<string>;
+                dueState: PropTypes.Validator<string>;
+                dueStateLabel: PropTypes.Validator<string>;
+                dueDateLabel: PropTypes.Validator<string>;
+                badge: PropTypes.Requireable<string>;
+                image: PropTypes.Requireable<string>;
+                disabled: PropTypes.Requireable<boolean>;
+                adaptiv: PropTypes.Requireable<boolean>;
+                type: PropTypes.Requireable<string>;
+                title: PropTypes.Requireable<string>;
+                author: PropTypes.Requireable<string>;
+                certifiedAuthor: PropTypes.Requireable<boolean>;
+                customer: PropTypes.Requireable<PropTypes.InferProps<{
+                    theme: PropTypes.Requireable<string>;
+                    type: PropTypes.Requireable<string>;
+                    name: PropTypes.Requireable<string>;
+                    coorpOriginal: PropTypes.Validator<boolean>;
+                    disabled: PropTypes.Requireable<boolean>;
+                    'aria-label': PropTypes.Requireable<string>;
+                }>>;
+                progress: PropTypes.Requireable<number>;
+                favorite: PropTypes.Requireable<boolean>;
+                addFavoriteToolTip: PropTypes.Requireable<string>;
+                removeFavoriteToolTip: PropTypes.Requireable<string>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+                onFavoriteClick: PropTypes.Requireable<(...args: any[]) => any>;
+                isSelected: PropTypes.Requireable<boolean>;
+                notification: PropTypes.Requireable<PropTypes.InferProps<{
+                    message: PropTypes.Validator<string>;
+                    icon: PropTypes.Validator<string>;
+                }>>;
+                badgeCategory: PropTypes.Requireable<string>;
+                badgeLabel: PropTypes.Requireable<string>;
+                theme: PropTypes.Requireable<string>;
+                disabledContent: PropTypes.Requireable<string>;
+                'aria-label': PropTypes.Requireable<string>;
+                'background-aria-label': PropTypes.Requireable<string>;
+                'favorite-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                    favorite: PropTypes.Requireable<string>;
+                    addToFavorite: PropTypes.Requireable<string>;
+                    removeFromFavorite: PropTypes.Requireable<string>;
+                }>>;
+                'selectable-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                    select: PropTypes.Requireable<string>;
+                    unSelect: PropTypes.Requireable<string>;
+                }>>;
+                'customer-aria-label': PropTypes.Requireable<string>;
+                'badge-aria-label': PropTypes.Requireable<string>;
+                'disabled-aria-label': PropTypes.Requireable<string>;
+                'card-content-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                    author: PropTypes.Requireable<string>;
+                    progression: PropTypes.Requireable<string>;
+                    adaptive: PropTypes.Requireable<string>;
+                }>>;
+            }> | null | undefined)[]>;
+        }> | null | undefined)[]>;
+        import cards = cards;
+        export { cards };
+        export const loading: PropTypes.Requireable<boolean>;
+        export const emptyState: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Requireable<string>;
+            message: PropTypes.Requireable<string>;
+            link: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Requireable<string>;
+                href: PropTypes.Requireable<string>;
+                onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            }>>;
+        }>>;
+        export const onCardClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";
+declare function Grid({ cards, onCardClick, "data-name": dataName }: {
+    cards: any;
+    onCardClick: any;
+    "data-name": any;
+}): JSX.Element;
+declare namespace Grid {
+    const propTypes_1: {
+        cards: PropTypes.Requireable<(PropTypes.InferProps<{
+            typeLabel: PropTypes.Requireable<string>;
+            dueState: PropTypes.Validator<string>;
+            dueStateLabel: PropTypes.Validator<string>;
+            dueDateLabel: PropTypes.Validator<string>;
+            badge: PropTypes.Requireable<string>;
+            image: PropTypes.Requireable<string>;
+            disabled: PropTypes.Requireable<boolean>;
+            adaptiv: PropTypes.Requireable<boolean>;
+            type: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<string>;
+            author: PropTypes.Requireable<string>;
+            certifiedAuthor: PropTypes.Requireable<boolean>;
+            customer: PropTypes.Requireable<PropTypes.InferProps<{
+                theme: PropTypes.Requireable<string>;
+                type: PropTypes.Requireable<string>;
+                name: PropTypes.Requireable<string>;
+                coorpOriginal: PropTypes.Validator<boolean>;
+                disabled: PropTypes.Requireable<boolean>;
+                'aria-label': PropTypes.Requireable<string>;
+            }>>;
+            progress: PropTypes.Requireable<number>;
+            favorite: PropTypes.Requireable<boolean>;
+            addFavoriteToolTip: PropTypes.Requireable<string>;
+            removeFavoriteToolTip: PropTypes.Requireable<string>;
+            onClick: PropTypes.Requireable<(...args: any[]) => any>;
+            onFavoriteClick: PropTypes.Requireable<(...args: any[]) => any>;
+            isSelected: PropTypes.Requireable<boolean>;
+            notification: PropTypes.Requireable<PropTypes.InferProps<{
+                message: PropTypes.Validator<string>;
+                icon: PropTypes.Validator<string>;
+            }>>;
+            badgeCategory: PropTypes.Requireable<string>;
+            badgeLabel: PropTypes.Requireable<string>;
+            theme: PropTypes.Requireable<string>;
+            disabledContent: PropTypes.Requireable<string>;
+            'aria-label': PropTypes.Requireable<string>;
+            'background-aria-label': PropTypes.Requireable<string>;
+            'favorite-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                favorite: PropTypes.Requireable<string>;
+                addToFavorite: PropTypes.Requireable<string>;
+                removeFromFavorite: PropTypes.Requireable<string>;
+            }>>;
+            'selectable-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                select: PropTypes.Requireable<string>;
+                unSelect: PropTypes.Requireable<string>;
+            }>>;
+            'customer-aria-label': PropTypes.Requireable<string>;
+            'badge-aria-label': PropTypes.Requireable<string>;
+            'disabled-aria-label': PropTypes.Requireable<string>;
+            'card-content-aria-label': PropTypes.Requireable<PropTypes.InferProps<{
+                author: PropTypes.Requireable<string>;
+                progression: PropTypes.Requireable<string>;
+                adaptive: PropTypes.Requireable<string>;
+            }>>;
+        }> | null | undefined)[]>;
+        onCardClick: PropTypes.Requireable<(...args: any[]) => any>;
+        'data-name': PropTypes.Requireable<string>;
+    };
+    export { propTypes_1 as propTypes };
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/template/my-assignments/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/my-assignments/index.js"],"names":[],"mappings":";AAuEA;;;;;;;;gBAyEC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlHD;;;;gBAMC"}

package/lib/template/my-assignments/index.js

@@ -0,0 +1,227 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _title = _interopRequireDefault(require("../../atom/title"));
+var _tabs = _interopRequireDefault(require("../../molecule/tabs"));
+var _loader = _interopRequireDefault(require("../../atom/loader"));
+var _link = _interopRequireDefault(require("../../atom/link"));
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+var _tag = _interopRequireDefault(require("../../atom/tag"));
+var _colors = require("../../variables/colors");
+var _assignmentCard = _interopRequireDefault(require("../../molecule/assignment-card"));
+var _style = _interopRequireDefault(require("./style.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// To do is split by due date, always in this order (N4). "Later" is gone.
+const SECTIONS = {
+  overdue: {
+    iconName: 'triangle-exclamation',
+    color: _colors.COLORS.cm_negative_200
+  },
+  dueThisWeek: {
+    iconName: 'clock',
+    color: _colors.COLORS.cm_yellow_400
+  },
+  dueAfterThisWeek: {
+    iconName: 'circle',
+    color: _colors.COLORS.cm_grey_500
+  }
+};
+const SECTION_KEYS = ['overdue', 'dueThisWeek', 'dueAfterThisWeek'];
+const GridCard = ({
+  card,
+  onCardClick
+}) => {
+  const handleClick = (0, _react.useCallback)(event => onCardClick(card, event), [card, onCardClick]);
+  return /*#__PURE__*/_react.default.createElement(_assignmentCard.default, _extends({}, card, {
+    onClick: onCardClick ? handleClick : card.onClick
+  }));
+};
+GridCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  card: _propTypes.default.shape(_assignmentCard.default.propTypes),
+  onCardClick: _propTypes.default.func
+} : {};
+const Grid = ({
+  cards,
+  onCardClick,
+  'data-name': dataName
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.grid,
+  "data-name": dataName
+}, cards.map((card, index) => /*#__PURE__*/_react.default.createElement(GridCard, {
+  key: index,
+  card: card,
+  onCardClick: onCardClick
+})));
+Grid.propTypes = process.env.NODE_ENV !== "production" ? {
+  cards: _propTypes.default.arrayOf(_propTypes.default.shape(_assignmentCard.default.propTypes)),
+  onCardClick: _propTypes.default.func,
+  'data-name': _propTypes.default.string
+} : {};
+const DueSection = ({
+  sectionKey,
+  title,
+  subtitle,
+  count,
+  cards,
+  onCardClick
+}) => {
+  const {
+    iconName,
+    color
+  } = SECTIONS[sectionKey];
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: _style.default.section,
+    "data-name": "due-section",
+    "data-key": sectionKey
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.sectionHead
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: iconName,
+    iconColor: color,
+    size: {
+      faSize: 16,
+      wrapperSize: 16
+    }
+  }), /*#__PURE__*/_react.default.createElement("h2", {
+    className: _style.default.sectionTitle
+  }, title), /*#__PURE__*/_react.default.createElement(_tag.default, {
+    label: String(count),
+    size: "S"
+  }), subtitle ? /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.sectionSubtitle
+  }, subtitle) : null), /*#__PURE__*/_react.default.createElement(Grid, {
+    cards: cards,
+    onCardClick: onCardClick
+  }));
+};
+DueSection.propTypes = process.env.NODE_ENV !== "production" ? {
+  sectionKey: _propTypes.default.oneOf(SECTION_KEYS),
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  count: _propTypes.default.number,
+  cards: Grid.propTypes.cards,
+  onCardClick: _propTypes.default.func
+} : {};
+
+// « Assigned to you » at /assigned (N4): two tabs, To do (not started + in progress) in three
+// due-date sections, and Finished as a flat grid. The MOOC sorts every list; lateness is never
+// shown (L0) and no assignment is ever named (L5).
+const MyAssignments = ({
+  title,
+  tabs = [],
+  sections = [],
+  cards = [],
+  emptyState,
+  loading = false,
+  onCardClick
+}) => {
+  const selectedTab = tabs.find(tab => tab.selected);
+  const isTodo = !selectedTab || selectedTab.key === 'todo';
+  const visibleSections = SECTION_KEYS.map(key => sections.find(section => section.key === key)).filter(section => section && section.cards.length > 0);
+  const isEmpty = isTodo ? visibleSections.length === 0 : cards.length === 0;
+  const handleEmptyLinkClick = emptyState && emptyState.link && emptyState.link.onClick;
+  let panel;
+  if (loading) {
+    panel = /*#__PURE__*/_react.default.createElement(_loader.default, null);
+  } else if (isEmpty) {
+    panel = emptyState ? /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.empty,
+      "data-name": "empty-state"
+    }, /*#__PURE__*/_react.default.createElement("h2", {
+      className: _style.default.emptyTitle
+    }, emptyState.title), /*#__PURE__*/_react.default.createElement("p", {
+      className: _style.default.emptyMessage
+    }, emptyState.message), emptyState.link ? /*#__PURE__*/_react.default.createElement(_link.default, {
+      className: _style.default.emptyLink,
+      href: emptyState.link.href,
+      onClick: handleEmptyLinkClick
+    }, emptyState.link.label) : null) : null;
+  } else if (isTodo) {
+    panel = visibleSections.map(section => /*#__PURE__*/_react.default.createElement(DueSection, {
+      key: section.key,
+      sectionKey: section.key,
+      title: section.title,
+      subtitle: section.subtitle,
+      count: section.count,
+      cards: section.cards,
+      onCardClick: onCardClick
+    }));
+  } else {
+    panel = /*#__PURE__*/_react.default.createElement(Grid, {
+      cards: cards,
+      onCardClick: onCardClick,
+      "data-name": "finished-grid"
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.backgroundContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, title ? /*#__PURE__*/_react.default.createElement(_title.default, {
+    type: "page",
+    title: title
+  }) : null, /*#__PURE__*/_react.default.createElement(_tabs.default, {
+    compact: true,
+    items: tabs.map(({
+      key,
+      label,
+      count,
+      selected,
+      onClick
+    }) => ({
+      key,
+      title: label,
+      count,
+      isActive: selected,
+      onClick
+    }))
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    role: "tabpanel",
+    "aria-label": selectedTab && selectedTab.label,
+    "aria-busy": loading
+  }, panel)));
+};
+MyAssignments.propTypes = process.env.NODE_ENV !== "production" ? {
+  // « Assigned to you »
+  title: _propTypes.default.string,
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.oneOf(['todo', 'done']).isRequired,
+    label: _propTypes.default.string,
+    count: _propTypes.default.number,
+    selected: _propTypes.default.bool,
+    onClick: _propTypes.default.func
+  })),
+  // To do: Overdue / Due this week / Due after this week. An empty section is not rendered.
+  sections: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.oneOf(SECTION_KEYS).isRequired,
+    title: _propTypes.default.string,
+    // A date range label, e.g. "Wed 21 Oct – Wed 28 Oct"
+    subtitle: _propTypes.default.string,
+    // Every module of the section, whatever the number of cards loaded
+    count: _propTypes.default.number.isRequired,
+    cards: Grid.propTypes.cards.isRequired
+  })),
+  // Finished: most recently finished first (D1)
+  cards: Grid.propTypes.cards,
+  loading: _propTypes.default.bool,
+  // The empty state of the selected tab
+  emptyState: _propTypes.default.shape({
+    title: _propTypes.default.string,
+    message: _propTypes.default.string,
+    link: _propTypes.default.shape({
+      label: _propTypes.default.string,
+      href: _propTypes.default.string,
+      onClick: _propTypes.default.func
+    })
+  }),
+  // Receives the card's content and the click event
+  onCardClick: _propTypes.default.func
+} : {};
+var _default = exports.default = MyAssignments;
+//# sourceMappingURL=index.js.map

package/lib/template/my-assignments/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_title","_tabs","_loader","_link","_icon","_tag","_colors","_assignmentCard","_style","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","SECTIONS","overdue","iconName","color","COLORS","cm_negative_200","dueThisWeek","cm_yellow_400","dueAfterThisWeek","cm_grey_500","SECTION_KEYS","GridCard","card","onCardClick","handleClick","useCallback","event","createElement","onClick","propTypes","process","env","NODE_ENV","PropTypes","shape","AssignmentCard","func","Grid","cards","dataName","className","style","grid","map","index","key","arrayOf","string","DueSection","sectionKey","title","subtitle","count","section","sectionHead","iconColor","size","faSize","wrapperSize","sectionTitle","label","String","sectionSubtitle","oneOf","number","MyAssignments","tabs","sections","emptyState","loading","selectedTab","find","tab","selected","isTodo","visibleSections","filter","isEmpty","handleEmptyLinkClick","link","panel","empty","emptyTitle","emptyMessage","message","emptyLink","href","backgroundContainer","container","type","compact","items","isActive","role","isRequired","bool","_default","exports"],"sources":["../../../src/template/my-assignments/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport Title from '../../atom/title';\nimport Tabs from '../../molecule/tabs';\nimport Loader from '../../atom/loader';\nimport Link from '../../atom/link';\nimport FaIcon from '../../atom/icon';\nimport Tag from '../../atom/tag';\nimport {COLORS} from '../../variables/colors';\nimport AssignmentCard from '../../molecule/assignment-card';\nimport style from './style.css';\n\n// To do is split by due date, always in this order (N4). \"Later\" is gone.\nconst SECTIONS = {\n  overdue: {iconName: 'triangle-exclamation', color: COLORS.cm_negative_200},\n  dueThisWeek: {iconName: 'clock', color: COLORS.cm_yellow_400},\n  dueAfterThisWeek: {iconName: 'circle', color: COLORS.cm_grey_500}\n};\nconst SECTION_KEYS = ['overdue', 'dueThisWeek', 'dueAfterThisWeek'];\n\nconst GridCard = ({card, onCardClick}) => {\n  const handleClick = useCallback(event => onCardClick(card, event), [card, onCardClick]);\n  return <AssignmentCard {...card} onClick={onCardClick ? handleClick : card.onClick} />;\n};\n\nGridCard.propTypes = {\n  card: PropTypes.shape(AssignmentCard.propTypes),\n  onCardClick: PropTypes.func\n};\n\nconst Grid = ({cards, onCardClick, 'data-name': dataName}) => (\n  <div className={style.grid} data-name={dataName}>\n    {cards.map((card, index) => (\n      <GridCard key={index} card={card} onCardClick={onCardClick} />\n    ))}\n  </div>\n);\n\nGrid.propTypes = {\n  cards: PropTypes.arrayOf(PropTypes.shape(AssignmentCard.propTypes)),\n  onCardClick: PropTypes.func,\n  'data-name': PropTypes.string\n};\n\nconst DueSection = ({sectionKey, title, subtitle, count, cards, onCardClick}) => {\n  const {iconName, color} = SECTIONS[sectionKey];\n  return (\n    <section className={style.section} data-name=\"due-section\" data-key={sectionKey}>\n      <div className={style.sectionHead}>\n        <FaIcon iconName={iconName} iconColor={color} size={{faSize: 16, wrapperSize: 16}} />\n        <h2 className={style.sectionTitle}>{title}</h2>\n        <Tag label={String(count)} size=\"S\" />\n        {subtitle ? <span className={style.sectionSubtitle}>{subtitle}</span> : null}\n      </div>\n      <Grid cards={cards} onCardClick={onCardClick} />\n    </section>\n  );\n};\n\nDueSection.propTypes = {\n  sectionKey: PropTypes.oneOf(SECTION_KEYS),\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  count: PropTypes.number,\n  cards: Grid.propTypes.cards,\n  onCardClick: PropTypes.func\n};\n\n// « Assigned to you » at /assigned (N4): two tabs, To do (not started + in progress) in three\n// due-date sections, and Finished as a flat grid. The MOOC sorts every list; lateness is never\n// shown (L0) and no assignment is ever named (L5).\nconst MyAssignments = ({\n  title,\n  tabs = [],\n  sections = [],\n  cards = [],\n  emptyState,\n  loading = false,\n  onCardClick\n}) => {\n  const selectedTab = tabs.find(tab => tab.selected);\n  const isTodo = !selectedTab || selectedTab.key === 'todo';\n  const visibleSections = SECTION_KEYS.map(key =>\n    sections.find(section => section.key === key)\n  ).filter(section => section && section.cards.length > 0);\n  const isEmpty = isTodo ? visibleSections.length === 0 : cards.length === 0;\n\n  const handleEmptyLinkClick = emptyState && emptyState.link && emptyState.link.onClick;\n\n  let panel;\n  if (loading) {\n    panel = <Loader />;\n  } else if (isEmpty) {\n    panel = emptyState ? (\n      <div className={style.empty} data-name=\"empty-state\">\n        <h2 className={style.emptyTitle}>{emptyState.title}</h2>\n        <p className={style.emptyMessage}>{emptyState.message}</p>\n        {emptyState.link ? (\n          <Link\n            className={style.emptyLink}\n            href={emptyState.link.href}\n            onClick={handleEmptyLinkClick}\n          >\n            {emptyState.link.label}\n          </Link>\n        ) : null}\n      </div>\n    ) : null;\n  } else if (isTodo) {\n    panel = visibleSections.map(section => (\n      <DueSection\n        key={section.key}\n        sectionKey={section.key}\n        title={section.title}\n        subtitle={section.subtitle}\n        count={section.count}\n        cards={section.cards}\n        onCardClick={onCardClick}\n      />\n    ));\n  } else {\n    panel = <Grid cards={cards} onCardClick={onCardClick} data-name=\"finished-grid\" />;\n  }\n\n  return (\n    <div className={style.backgroundContainer}>\n      <div className={style.container}>\n        {title ? <Title type=\"page\" title={title} /> : null}\n        <Tabs\n          compact\n          items={tabs.map(({key, label, count, selected, onClick}) => ({\n            key,\n            title: label,\n            count,\n            isActive: selected,\n            onClick\n          }))}\n        />\n        <div role=\"tabpanel\" aria-label={selectedTab && selectedTab.label} aria-busy={loading}>\n          {panel}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nMyAssignments.propTypes = {\n  // « Assigned to you »\n  title: PropTypes.string,\n  tabs: PropTypes.arrayOf(\n    PropTypes.shape({\n      key: PropTypes.oneOf(['todo', 'done']).isRequired,\n      label: PropTypes.string,\n      count: PropTypes.number,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func\n    })\n  ),\n  // To do: Overdue / Due this week / Due after this week. An empty section is not rendered.\n  sections: PropTypes.arrayOf(\n    PropTypes.shape({\n      key: PropTypes.oneOf(SECTION_KEYS).isRequired,\n      title: PropTypes.string,\n      // A date range label, e.g. \"Wed 21 Oct – Wed 28 Oct\"\n      subtitle: PropTypes.string,\n      // Every module of the section, whatever the number of cards loaded\n      count: PropTypes.number.isRequired,\n      cards: Grid.propTypes.cards.isRequired\n    })\n  ),\n  // Finished: most recently finished first (D1)\n  cards: Grid.propTypes.cards,\n  loading: PropTypes.bool,\n  // The empty state of the selected tab\n  emptyState: PropTypes.shape({\n    title: PropTypes.string,\n    message: PropTypes.string,\n    link: PropTypes.shape({\n      label: PropTypes.string,\n      href: PropTypes.string,\n      onClick: PropTypes.func\n    })\n  }),\n  // Receives the card's content and the click event\n  onCardClick: PropTypes.func\n};\n\nexport default MyAssignments;\n"],"mappings":"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","ignoreList":[]}

package/lib/template/my-assignments/style.css

@@ -0,0 +1,84 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100, cm_grey_500, cm_grey_800, cm_primary_blue from colors;
+
+.backgroundContainer {
+  background-color: white;
+  min-height: 100%;
+  width: 100%;
+  font-family: "Gilroy";
+}
+
+.container {
+  margin: 48px auto;
+  padding: 0 16px;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 100%;
+  width: 100%;
+  max-width: calc(1080px + 32px);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(256px, 100%), 1fr));
+  gap: 24px 16px;
+  margin-top: 16px;
+}
+
+.section {
+  margin-top: 32px;
+}
+
+.sectionHead {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid cm_grey_100;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: cm_grey_800;
+}
+
+.sectionSubtitle {
+  margin-left: auto;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: cm_grey_500;
+}
+
+.empty {
+  max-width: 502px;
+  margin: 0 auto;
+  padding: 72px 16px;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.emptyTitle {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  color: cm_grey_800;
+}
+
+.emptyMessage {
+  margin: 8px 0 20px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  color: cm_grey_500;
+}
+
+.emptyLink {
+  font-size: 14px;
+  font-weight: 700;
+  color: cm_primary_blue;
+}

package/lib/template/my-learning/index.d.ts

@@ -52,12 +52,14 @@ declare namespace MyLearning {
             dataName: PropTypes.Requireable<string>;
             title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
+            alwaysShowMore: PropTypes.Requireable<boolean>;
             cards: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
                 image: PropTypes.Requireable<string>;
                 disabled: PropTypes.Requireable<boolean>;
                 adaptiv: PropTypes.Requireable<boolean>;
                 type: PropTypes.Requireable<string>;
+                typeLabel: PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 author: PropTypes.Requireable<string>;
                 certifiedAuthor: PropTypes.Requireable<boolean>;
@@ -117,6 +119,7 @@ declare namespace MyLearning {
                     onClick: PropTypes.Requireable<(...args: any[]) => any>;
                     isActive: PropTypes.Requireable<boolean>;
                 }> | null | undefined)[]>;
+                compact: PropTypes.Requireable<boolean>;
             }>>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;

package/lib/template/playlist-detail/index.d.ts

@@ -175,6 +175,7 @@ declare namespace PlaylistDetail {
                         customLabelClassName: PropTypes.Requireable<string>;
                     }>>;
                     required: PropTypes.Requireable<boolean>;
+                    headingLevel: PropTypes.Requireable<number>;
                 }>>;
                 headerIcon: PropTypes.Requireable<string>;
                 backgroundImage: PropTypes.Requireable<string>;
@@ -325,6 +326,15 @@ declare namespace PlaylistDetail {
                         items: PropTypes.Requireable<(PropTypes.InferProps<{
                             title: PropTypes.Validator<string>;
                             subtitle: PropTypes.Requireable<string>;
+                            titleTags: PropTypes.Requireable<(PropTypes.InferProps<{
+                                label: PropTypes.Validator<string>;
+                                type: PropTypes.Requireable<string>;
+                            }> | null | undefined)[]>;
+                            details: PropTypes.Requireable<string>;
+                            progress: PropTypes.Requireable<PropTypes.InferProps<{
+                                value: PropTypes.Validator<number>;
+                                label: PropTypes.Validator<string>;
+                            }>>;
                             'data-name': PropTypes.Requireable<string>;
                             provider: PropTypes.Requireable<PropTypes.InferProps<{
                                 label: PropTypes.Requireable<string>;
@@ -771,6 +781,7 @@ declare namespace PlaylistDetail {
                             customLabelClassName: PropTypes.Requireable<string>;
                         }>>;
                         required: PropTypes.Requireable<boolean>;
+                        headingLevel: PropTypes.Requireable<number>;
                     }> | null | undefined>>;
                     isFetching: PropTypes.Requireable<boolean>;
                     search: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/template/teams-dashboard/index.d.ts

@@ -39,12 +39,14 @@ declare namespace TeamsDashboard {
             dataName: PropTypes.Requireable<string>;
             title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
             showMore: PropTypes.Requireable<string>;
+            alwaysShowMore: PropTypes.Requireable<boolean>;
             cards: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
                 badge: PropTypes.Requireable<string>;
                 image: PropTypes.Requireable<string>;
                 disabled: PropTypes.Requireable<boolean>;
                 adaptiv: PropTypes.Requireable<boolean>;
                 type: PropTypes.Requireable<string>;
+                typeLabel: PropTypes.Requireable<string>;
                 title: PropTypes.Requireable<string>;
                 author: PropTypes.Requireable<string>;
                 certifiedAuthor: PropTypes.Requireable<boolean>;
@@ -104,6 +106,7 @@ declare namespace TeamsDashboard {
                     onClick: PropTypes.Requireable<(...args: any[]) => any>;
                     isActive: PropTypes.Requireable<boolean>;
                 }> | null | undefined)[]>;
+                compact: PropTypes.Requireable<boolean>;
             }>>;
             customStyle: PropTypes.Requireable<{
                 [x: string]: string | null | undefined;

package/lib/util/proptypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"proptypes.d.ts","sourceRoot":"","sources":["../../src/util/proptypes.js"],"names":[],"mappings":"AAcA,8BAAsD;AAGtD,+BAAwD;AAExD,qDAA4E;AAErE,2FAoBN;AAED,gCAA4C;AAC5C,8BAAwC"}
+{"version":3,"file":"proptypes.d.ts","sourceRoot":"","sources":["../../src/util/proptypes.js"],"names":[],"mappings":"AAcA,8BAAsD;AAGtD,+BAAwD;AAExD,qDAA4E;AAErE,2FAsBN;AAED,gCAA4C;AAC5C,8BAAwC"}

package/lib/util/proptypes.js

@@ -19,12 +19,12 @@ const PATH_REGEXP = /^\/([-a-zA-Z0-9@:%_\\+.~#?&//=]*)$/;
 const PathPropType = exports.PathPropType = (0, _stringMatching.default)(PATH_REGEXP);
 const SrcPropType = exports.SrcPropType = _propTypes.default.oneOfType([UrlPropType, PathPropType]);
 const FilesPropType = (props, propName, componentName) => {
-  const validFilesTypes = ['image/jpeg', 'image/png', 'image/svg+xml', 'image/*', 'application/pdf', 'application/zip', 'text/csv'];
+  const validFilesTypes = ['image/jpeg', 'image/png', 'image/svg+xml', 'image/*', 'application/pdf', 'application/zip', 'text/csv', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
   const propValue = props[propName];
   const filesTypes = (0, _split.default)(',', propValue);
   const isValid = (0, _isEmpty.default)((0, _head.default)(filesTypes)) || (0, _every.default)(type => (0, _includes.default)((0, _trim.default)(type), validFilesTypes), filesTypes);
   if (isValid) return null;
-  return new Error(`Invalid prop value: ${propValue}, at component: ${componentName}. Expected a valid image type: image/jpeg, image/png, image/* image/svg+xml or application/pdf.`);
+  return new Error(`Invalid prop value: ${propValue}, at component: ${componentName}. Expected a valid file type: image/jpeg, image/png, image/* image/svg+xml, application/pdf, application/zip, text/csv or an Excel type.`);
 };
 exports.FilesPropType = FilesPropType;
 const ColorPropType = exports.ColorPropType = _color.default;