feat: draft UI for prerequisite summary

website/src/styles/tippy/tippy.css

@@ -35,7 +35,7 @@
 
 .tippy-popper[x-placement^='top'] .tippy-arrow {
   border-top: 8px solid #333;
-  border-top: 8px solid var(--gray);
+  border-top: 8px solid var(--tooltip-bg);
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   bottom: -7px;
@@ -122,7 +122,7 @@
 
 .tippy-popper[x-placement^='bottom'] .tippy-arrow {
   border-bottom: 8px solid #333;
-  border-bottom: 8px solid var(--gray);
+  border-bottom: 8px solid var(--tooltip-bg);
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   top: -7px;
@@ -209,7 +209,7 @@
 
 .tippy-popper[x-placement^='left'] .tippy-arrow {
   border-left: 8px solid #333;
-  border-left: 8px solid var(--gray);
+  border-left: 8px solid var(--tooltip-bg);
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   right: -7px;
@@ -296,7 +296,7 @@
 
 .tippy-popper[x-placement^='right'] .tippy-arrow {
   border-right: 8px solid #333;
-  border-right: 8px solid var(--gray);
+  border-right: 8px solid var(--tooltip-bg);
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   left: -7px;
@@ -369,7 +369,7 @@
 .tippy-tooltip {
   position: relative;
   color: #fff;
-  color: var(--body-bg);
+  color: var(--tooltip-color);
   border-radius: 4px;
   font-size: 0.9rem;
   padding: 0.3rem 0.6rem;
@@ -379,7 +379,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #333;
-  background-color: var(--gray);
+  background-color: var(--tooltip-bg);
 }
 
 .tippy-tooltip[data-size='small'] {
@@ -428,7 +428,7 @@
   position: absolute;
   will-change: transform;
   background-color: #333;
-  background-color: var(--gray);
+  background-color: var(--tooltip-bg);
   border-radius: 50%;
   width: calc(110% + 2rem);
   left: 50%;

website/src/styles/utils/css-variables.scss

@@ -25,6 +25,10 @@
   // Body font color
   --body-color: #{$body-color};
 
+  // Tooltips (Tippy)
+  --tooltip-bg: #{$gray-dark};
+  --tooltip-color: #fff;
+
   // Shade of grays
   --gray: #{$gray};
   --gray-mid: #{$gray-mid};
@@ -57,6 +61,10 @@ body.mode-dark {
   // Body font color
   --body-color: #aaa;
 
+  // Tooltips (Tippy)
+  --tooltip-bg: #3a3a3a;
+  --tooltip-color: var(--body-color);
+
   // Shade of grays
   --gray: #aaa;
   --gray-mid: #7d7d7d;

website/src/views/components/module-info/RequisiteRulePopup.scss

@@ -0,0 +1,51 @@
+@import '~styles/utils/modules-entry';
+
+.tooltip {
+  padding: 0.75rem 1rem;
+}
+
+.trigger {
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0.15rem;
+  border: 0;
+  line-height: 0;
+  color: var(--gray-light);
+  background: transparent;
+  cursor: pointer;
+
+  &:hover {
+    color: theme-color();
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    color: theme-color();
+  }
+
+  :global(.svg) {
+    display: block;
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+}
+
+.content {
+  max-width: 28rem;
+  font-size: $font-size-sm;
+  text-align: left;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--tooltip-color);
+
+  :global(a) {
+    color: theme-color();
+  }
+}

website/src/views/components/module-info/RequisiteRulePopup.test.tsx

@@ -0,0 +1,36 @@
+import { screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+
+import { initAction } from 'test-utils/redux';
+import reducers from 'reducers';
+import configureStore from 'bootstrapping/configure-store';
+import renderWithRouterMatch from 'test-utils/renderWithRouterMatch';
+import RequisiteRulePopup from './RequisiteRulePopup';
+
+describe(RequisiteRulePopup, () => {
+  function make(rule: string, summary?: string) {
+    const initialState = reducers(undefined, initAction());
+    const { store } = configureStore(initialState);
+
+    return renderWithRouterMatch(
+      <Provider store={store}>
+        <RequisiteRulePopup rule={rule} summary={summary} />
+      </Provider>,
+      {},
+    );
+  }
+
+  it('renders nothing when rule matches summary', () => {
+    const rule = 'CS1010 or its equivalent';
+    const { view } = make(rule, rule);
+    expect(view.container).toBeEmptyDOMElement();
+  });
+
+  it('renders info icon with accessible label', () => {
+    make('PROGRAM_TYPES IF_IN Undergraduate Degree THEN (COURSES (1) CS1010:D)', 'CS1010');
+
+    expect(
+      screen.getByRole('button', { name: 'View detailed prerequisite rule' }),
+    ).toBeInTheDocument();
+  });
+});

website/src/views/components/module-info/RequisiteRulePopup.tsx

@@ -0,0 +1,45 @@
+import { Info } from 'react-feather';
+
+import LinkModuleCodes from 'views/components/LinkModuleCodes';
+import Tooltip from 'views/components/Tooltip';
+import styles from './RequisiteRulePopup.scss';
+
+type Props = {
+  rule: string;
+  summary?: string;
+  label?: string;
+};
+
+/**
+ * Info icon that shows the full structured requisite rule in a popup.
+ */
+export default function RequisiteRulePopup({
+  rule,
+  summary,
+  label = 'View detailed prerequisite rule',
+}: Props) {
+  if (!rule.trim()) return null;
+  if (summary?.trim() === rule.trim()) return null;
+
+  const content = (
+    <div className={styles.content}>
+      <LinkModuleCodes>{rule}</LinkModuleCodes>
+    </div>
+  );
+
+  return (
+    <Tooltip
+      content={content}
+      interactive
+      arrow
+      placement="bottom"
+      maxWidth="none"
+      touch="hold"
+      className={styles.tooltip}
+    >
+      <button type="button" className={styles.trigger} aria-label={label}>
+        <Info className="svg svg-small" size={18} strokeWidth={2} />
+      </button>
+    </Tooltip>
+  );
+}

website/src/views/modules/ModulePageContent.scss

@@ -59,6 +59,22 @@ $sticky-top: $navbar-height;
   font-size: $font-size-lg;
 }
 
+.sectionHeadingRow {
+  display: flex;
+  align-items: center;
+  padding: 0.6rem 0;
+  margin: 0 0 0.6rem;
+  border-bottom: 1px solid var(--gray-lighter);
+  gap: 0.4rem;
+
+  .sectionHeading {
+    flex: 1 1 auto;
+    padding: 0;
+    margin: 0;
+    border-bottom: none;
+  }
+}
+
 .descriptionHeading {
   margin-bottom: 0;
   font-weight: bold;

website/src/views/modules/ModulePageContent.tsx

@@ -22,6 +22,7 @@ import LessonTimetable from 'views/components/module-info/LessonTimetable';
 import ModuleExamClash from 'views/components/module-info/ModuleExamClash';
 import ModuleWorkload from 'views/components/module-info/ModuleWorkload';
 import ModuleExamInfo from 'views/components/module-info/ModuleExamInfo';
+import RequisiteRulePopup from 'views/components/module-info/RequisiteRulePopup';
 import AddModuleDropdown from 'views/components/module-info/AddModuleDropdown';
 import SaveModuleButton from 'views/components/module-info/SaveModuleButton';
 import Announcements from 'views/components/notfications/Announcements';
@@ -266,7 +267,12 @@ const ModulePageContent: React.FC<Props> = ({ module, archiveYear }) => {
           </div>
 
           <section className={styles.section} id={SIDE_MENU_ITEMS.prerequisites}>
-            <h2 className={styles.sectionHeading}>Prerequisite Tree</h2>
+            <div className={styles.sectionHeadingRow}>
+              <h2 className={styles.sectionHeading}>Prerequisite Tree</h2>
+              {module.prerequisiteRule && (
+                <RequisiteRulePopup rule={module.prerequisiteRule} summary={module.prerequisite} />
+              )}
+            </div>
             <ErrorBoundary>
               <ModuleTree
                 moduleCode={moduleCode}

website/src/views/modules/ModuleTree.tsx

@@ -215,8 +215,8 @@ export const ModuleTreeComponent: React.FC<Props> = (props) => {
 
       <p className="alert alert-warning">
         This new version of the prerequisite tree is being tested and may not be accurate. Viewers
-        are encouraged to double check details with the prerequisite text above. To report bugs with
-        the new tree, please post a bug report on GitHub (preferred) at{' '}
+        are encouraged to double check details with the prerequisite information above. To report
+        bugs with the new tree, please post a bug report on GitHub (preferred) at{' '}
         <a
           href="https://github.com/nusmodifications/nusmods/issues/new/choose"
           target="_blank"

website/src/views/modules/__snapshots__/ModuleTree.test.tsx.snap

@@ -271,7 +271,7 @@ exports[`ModuleTreeComponent > should grey out modules that are not in module ba
   <p
     class="alert alert-warning"
   >
-    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite text above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
+    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite information above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
     <a
       href="https://github.com/nusmodifications/nusmods/issues/new/choose"
       rel="noopener noreferrer nofollow"
@@ -541,7 +541,7 @@ exports[`ModuleTreeComponent > should render prereq branch with nOf condition >
   <p
     class="alert alert-warning"
   >
-    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite text above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
+    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite information above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
     <a
       href="https://github.com/nusmodifications/nusmods/issues/new/choose"
       rel="noopener noreferrer nofollow"
@@ -953,7 +953,7 @@ exports[`ModuleTreeComponent > should render prereq tree of module > CS3244 1`]
   <p
     class="alert alert-warning"
   >
-    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite text above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
+    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite information above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
     <a
       href="https://github.com/nusmodifications/nusmods/issues/new/choose"
       rel="noopener noreferrer nofollow"
@@ -1045,7 +1045,7 @@ exports[`ModuleTreeComponent > should render prereq tree to the right when tree
   <p
     class="alert alert-warning"
   >
-    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite text above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
+    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite information above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
     <a
       href="https://github.com/nusmodifications/nusmods/issues/new/choose"
       rel="noopener noreferrer nofollow"
@@ -1313,7 +1313,7 @@ exports[`ModuleTreeComponent > should render requirements fulfilled tree of modu
   <p
     class="alert alert-warning"
   >
-    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite text above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
+    This new version of the prerequisite tree is being tested and may not be accurate. Viewers are encouraged to double check details with the prerequisite information above. To report bugs with the new tree, please post a bug report on GitHub (preferred) at 
     <a
       href="https://github.com/nusmodifications/nusmods/issues/new/choose"
       rel="noopener noreferrer nofollow"