Merge branch 'Simon-Initiative:master' into master

.github/workflows/build.yml

@@ -6,6 +6,7 @@ on:
       - master
       - hotfix-*
       - prerelease-*
+      - nextgen-ux
 
 jobs:
   elixir-build-test:

.github/workflows/package.yml

@@ -5,6 +5,7 @@ on:
       - master
       - hotfix-*
       - prerelease-*
+      - nextgen-ux
   # manually trigger a package build from the Actions tab
   workflow_dispatch:
 

.gitignore

@@ -1,6 +1,6 @@
 .vscode
 lib/oli/analytics/test.xml
-Mnesia.nonode@nohost
+Mnesia.*
 
 # IDEA
 *.iml
@@ -92,5 +92,9 @@ yarn-error.log
 /assets/storybook-static
 /assets/.storybook/temp
 _digests
+_imports
 # the directory for AWS S3 uploads (for dev)
-/data
+/data
+logfile
+MnesiaCore.nonode@nohost_1698_943806_800396
+.envrc

assets/css/app.css

@@ -7,8 +7,7 @@
 @import 'text';
 @import 'button';
 @import 'table';
-@import "markdown-editor";
-
+@import 'markdown-editor';
 
 /**
  * Automatically style all links with blue text and underline on hover.
@@ -67,4 +66,73 @@ a.download::after {
 
 body {
   scrollbar-color: transparent;
-}
+}
+
+.bg-colorful {
+  background-image: url('/images/gradients/colorful-light-opacity-25.png');
+}
+
+.bg-index {
+  background-image: url('/images/gradients/index-bg.png');
+}
+
+.dark .bg-index {
+  background-image: url('/images/gradients/index-bg-dark.png');
+}
+
+.bg-schedule {
+  background-image: url('/images/gradients/schedule-bg.png');
+}
+.dark .bg-schedule {
+  background-image: url('/images/gradients/schedule-bg-dark.png');
+}
+
+.bg-explorations {
+  background-image: url('/images/gradients/explorations-bg.png');
+}
+
+.dark .bg-explorations {
+  background-image: url('/images/gradients/explorations-bg-dark.png');
+}
+
+.bg-practice {
+  background-image: url('/images/gradients/practice-bg.png');
+}
+
+.dark .bg-practice {
+  background-image: url('/images/gradients/practice-bg-dark.png');
+}
+
+.bg-discussions {
+  background-image: url('/images/gradients/discussions-bg.png');
+}
+
+.dark .bg-discussions {
+  background-image: url('/images/gradients/discussions-bg-dark.png');
+}
+
+/*
+The following classes are used to style the html rendered with Oli.Rendering.Content.render/3
+We should try to avoid defining classes in this way.
+The prefered way is to do it directly in the HTML with TailwindCSS, as explained:
+
+https://tailwindcss.com/docs/utility-first
+*/
+
+.intro-content p {
+  @apply pb-2 text-[14px] leading-[30px] font-normal dark:text-white opacity-80;
+}
+
+.intro-content h1 {
+  @apply mb-[20px] text-2xl tracking-[0.02px] font-light dark:text-white;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

assets/css/storybook.css

@@ -1,14 +1,25 @@
 /* This is your custom storybook stylesheet. */
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
 
 /*
  * Put your component styling within the Tailwind utilities layer.
  * See the https://hexdocs.pm/phoenix_storybook/sandboxing.html guide for more info.
  */
 @layer utilities {
   * {
-    font-family: ui-sans-serif, system-ui;
+    font-family: 'Open Sans', sans-serif;
+  }
+
+  /* For some reason it is explicity required to specify font for these elements */
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: 'Open Sans', sans-serif;
   }
 }

assets/js/storybook.js

@@ -10,10 +10,13 @@
 //   window.storybook = { Hooks, Params, Uploaders };
 // })();
 
+(function () {
+  window.storybook = { Hooks: {} };
+})();
 
 // If your components require alpinejs, you'll need to start
 // alpine after the DOM is loaded and pass in an onBeforeElUpdated
-// 
+//
 // import Alpine from 'alpinejs'
 // window.Alpine = Alpine
 // document.addEventListener('DOMContentLoaded', () => {

assets/package.json

@@ -98,7 +98,7 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "sanitize-html": "^2.12.1",
-    "slate": "^0.94.1",
+    "slate": "https://github.com/Simon-Initiative/slate#v1.0.1",
     "slate-history": "^0.93.0",
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.98.1",

assets/src/apps/Components.tsx

@@ -2,6 +2,7 @@ import { DeliveryElementRenderer } from 'components/common/DeliveryElementRender
 import { ECLRepl } from 'components/common/ECLRepl';
 import { Navbar } from 'components/common/Navbar';
 import { SelectTimezone } from 'components/common/SelectTimezone';
+import { TechSupportButton } from 'components/common/TechSupportButton';
 import { UserAccountMenu } from 'components/common/UserAccountMenu';
 import { AlternativesPreferenceSelector } from 'components/delivery/AlternativesPreferenceSelector';
 import { CourseContentOutline } from 'components/delivery/CourseContentOutline';
@@ -32,4 +33,5 @@ registerApplication('DeliveryElementRenderer', DeliveryElementRenderer, globalSt
 registerApplication('ECLRepl', ECLRepl, globalStore);
 registerApplication('SelectTimezone', SelectTimezone, globalStore);
 registerApplication('YoutubePlayer', YoutubePlayer, globalStore);
+registerApplication('TechSupportButton', TechSupportButton, globalStore);
 registerApplication('OfflineDetector', OfflineDetector, globalStore);

assets/src/apps/authoring/components/ScreenList/ScreenList.tsx

@@ -2,8 +2,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { EntityId } from '@reduxjs/toolkit';
+import { useClickOutside } from '../../../../components/hooks/useClickOutside';
 import { useToggle } from '../../../../components/hooks/useToggle';
-import { useOnClickOutside } from '../../../../hooks/click_outside';
 import {
   selectAllActivities,
   selectCurrentActivityId,
@@ -40,7 +40,7 @@ interface ContextProps {
 }
 
 const ContextMenu: React.FC<ContextProps> = ({ position, onDelete, onDuplicate, onCancel }) => {
-  const ref = useOnClickOutside<HTMLUListElement>(onCancel);
+  const ref = useClickOutside<HTMLUListElement>(onCancel);
   return (
     <ul
       className="screen-context-menu"

assets/src/apps/delivery/layouts/deck/DeckLayoutHeader.tsx

@@ -56,8 +56,8 @@ const DeckLayoutHeader: React.FC<DeckLayoutHeaderProps> = ({
       setBackButtonUrl(`/authoring/project/${projectSlug}/resource/${resourceSlug}`);
       setBackButtonText('Back to Authoring');
     } else {
-      setBackButtonUrl(window.location.href.split('/page')[0] + '/overview');
-      setBackButtonText('Back to Overview');
+      setBackButtonUrl(window.location.href.split('/adaptive_lesson')[0] + '/explorations');
+      setBackButtonText('Back to Explorations');
     }
   }, [isPreviewMode]);
 

assets/src/components/ContentTable.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
+import { PointMarkerContext, maybePointMarkerAttr } from 'data/content/utils';
 import { classNames } from 'utils/classNames';
 import * as ContentTypes from '../data/content/model/elements/types';
 
 export const ContentTable: React.FC<{
   model: ContentTypes.Table;
   children: React.ReactNode;
-}> = ({ model, children }) => {
+  pointMarkerContext?: PointMarkerContext;
+}> = ({ model, children, pointMarkerContext }) => {
   return (
     <table
       className={classNames(
         'min-w-full',
         model.border === 'hidden' ? 'table-borderless' : 'table-bordered',
         model.rowstyle === 'alternating' && 'table-striped',
       )}
+      {...maybePointMarkerAttr(model, pointMarkerContext)}
     >
       {children}
     </table>

assets/src/components/Dialog.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as ContentModel from 'data/content/model/elements/types';
+import { PointMarkerContext, maybePointMarkerAttr } from 'data/content/utils';
 import { WriterContext } from '../data/content/writers/context';
 import { HtmlContentModelRenderer } from '../data/content/writers/renderer';
 
@@ -42,9 +43,10 @@ const DialogLine: React.FC<{
 export const Dialog: React.FC<{
   dialog: ContentModel.Dialog;
   context: WriterContext;
-}> = ({ dialog, context }) => {
+  pointMarkerContext?: PointMarkerContext;
+}> = ({ dialog, context, pointMarkerContext }) => {
   return (
-    <div className="dialog">
+    <div className="dialog" {...maybePointMarkerAttr(dialog, pointMarkerContext)}>
       {dialog.title && <h1>{dialog.title}</h1>}
       {dialog.lines.map((line, index) => (
         <DialogLine key={index} context={context} speakers={dialog.speakers} line={line} />

assets/src/components/activities/DeliveryElement.ts

@@ -61,6 +61,8 @@ export interface ActivityContext {
   pageState?: any;
   showFeedback: boolean | null;
   resourceId?: number;
+  renderPointMarkers: boolean;
+  isAnnotationLevel: boolean;
 }
 
 /**

assets/src/components/activities/DeliveryElementProvider.tsx

@@ -35,6 +35,8 @@ export const DeliveryElementProvider: React.FC<DeliveryElementProps<any>> = (pro
     bibParams: props.context.bibParams,
     learningLanguage: props.context.learningLanguage,
     resourceAttemptGuid: props.context.pageAttemptGuid,
+    renderPointMarkers: props.context.renderPointMarkers,
+    isAnnotationLevel: props.context.isAnnotationLevel,
   });
 
   return (

assets/src/components/activities/directed-discussion/discussion/MockDiscussionDeliveryProvider.tsx

@@ -43,6 +43,8 @@ export const MockDiscussionDeliveryProvider: React.FC<{
         surveyId: '',
         groupId: '',
         showFeedback: false,
+        renderPointMarkers: false,
+        isAnnotationLevel: false,
       }}
       onSaveActivity={nullHandler}
       onSavePart={nullHandler}

assets/src/components/common/Conjugation.tsx

@@ -1,14 +1,20 @@
 import React, { MouseEventHandler, ReactNode } from 'react';
 import * as ContentModel from 'data/content/model/elements/types';
+import { PointMarkerContext, maybePointMarkerAttr } from 'data/content/utils';
 
 export const Conjugation: React.FC<{
   conjugation: ContentModel.Conjugation;
   pronunciation: ReactNode;
   table: ReactNode;
+  pointMarkerContext?: PointMarkerContext;
   onClick?: MouseEventHandler<HTMLDivElement>;
-}> = ({ conjugation, pronunciation, table, onClick }) => {
+}> = ({ conjugation, pronunciation, table, pointMarkerContext, onClick }) => {
   return (
-    <div className="conjugation" onClick={onClick}>
+    <div
+      className="conjugation"
+      onClick={onClick}
+      {...maybePointMarkerAttr(conjugation, pointMarkerContext)}
+    >
       <div className="title">{conjugation.title}</div>
       <div className="term">
         {conjugation.verb} {pronunciation}

assets/src/components/common/ECLRepl.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import debounce from 'lodash/debounce';
 import { WrappedMonaco } from 'components/activities/common/variables/WrappedMonaco';
+import * as ContentModel from 'data/content/model/elements/types';
+import { PointMarkerContext, maybePointMarkerAttr } from 'data/content/utils';
 import { ServerError, makeRequest } from 'data/persistence/common';
 import * as Extrinsic from 'data/persistence/extrinsic';
 
@@ -10,6 +12,7 @@ interface Props {
   slug: string;
   attemptGuid: string;
   children?: React.ReactNode;
+  pointMarkerContext?: PointMarkerContext;
 }
 
 export type EvalResult = Evaluation | ServerError;
@@ -108,7 +111,9 @@ export const ECLRepl: React.FC<Props> = (props) => {
     ) : null;
 
   return (
-    <div>
+    <div
+      {...maybePointMarkerAttr({ id: props.id } as ContentModel.ECLRepl, props.pointMarkerContext)}
+    >
       {maybeShowEditor}
       <div className="mt-2 mb-2 d-flex flex-row-reverse">
         <button className="btn btn-sm btn-secondary" onClick={onReset}>

assets/src/components/common/Formula.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 import { MathJaxLatexFormula, MathJaxMathMLFormula } from './MathJaxFormula';
 
 export const Formula: React.FC<{
+  id: string;
   type?: string;
   subtype: string;
   src: string;
   onClick?: () => void;
   style?: Record<string, string>;
-}> = ({ type, subtype, src, style, onClick }) => {
+}> = ({ id, type, subtype, src, style, onClick }) => {
   switch (subtype) {
     case 'latex':
       return (
         <MathJaxLatexFormula
+          id={id}
           onClick={onClick}
           style={style}
           inline={type === 'formula_inline'}
@@ -21,6 +23,7 @@ export const Formula: React.FC<{
     case 'mathml':
       return (
         <MathJaxMathMLFormula
+          id={id}
           onClick={onClick}
           style={style}
           inline={type === 'formula_inline'}