fix: unify font-family with paragon component styles (#596)

.env

@@ -20,6 +20,5 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
-TA_FEEDBACK_FORM= ''
-STAFF_FEEDBACK_FORM= ''
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.development

@@ -21,6 +21,5 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM='https://learner-form.test'
-STAFF_FEEDBACK_FORM='https://staff-form.test'
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.test

@@ -19,6 +19,5 @@ SEGMENT_KEY=''
 SITE_NAME='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM='https://learner-form.test'
-STAFF_FEEDBACK_FORM='https://staff-form.test'
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.jest/setEnvVars.js

@@ -1,2 +0,0 @@
-process.env.TA_FEEDBACK_FORM= 'https://learner-form.test';
-process.env.STAFF_FEEDBACK_FORM= 'https://staff-form.test';

jest.config.js

@@ -1,9 +1,9 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
+  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.
   // If you want to add config BEFORE jest loads, use setupFiles instead.
-  setupFiles: ['<rootDir>/.jest/setEnvVars.js'],
+  setupFiles: ['<rootDir>/.env.test'],
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],

src/components/NavigationBar/navBar.scss

@@ -1,10 +1,11 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
+
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 

src/discussions/common/AuthorLabel.jsx

@@ -99,7 +99,7 @@ const AuthorLabel = ({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('font-family-inter align-content-center', {
+          className={classNames('align-content-center', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}

src/discussions/common/EndorsedAlertBanner.jsx

@@ -39,7 +39,7 @@ const EndorsedAlertBanner = ({
                 height: '20px',
               }}
             />
-            <strong className="ml-2 font-family-inter">
+            <strong className="ml-2">
               {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
             </strong>
           </div>

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -8,7 +8,6 @@ import {
 
 import Footer from '@edx/frontend-component-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import { getConfig } from '@edx/frontend-platform';
 
 import { PostActionsBar } from '../../components';
 import { CourseTabsNavigation } from '../../components/NavigationBar';
@@ -30,7 +29,6 @@ import BlackoutInformationBanner from './BlackoutInformationBanner';
 import DiscussionContent from './DiscussionContent';
 import DiscussionSidebar from './DiscussionSidebar';
 import useFeedbackWrapper from './FeedbackWrapper';
-import InformationBanner from './InformationBanner';
 
 const DiscussionsHome = () => {
   const location = useLocation();
@@ -46,7 +44,6 @@ const DiscussionsHome = () => {
   const isOnDesktop = useIsOnDesktop();
   let displaySidebar = useSidebarVisible();
   const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
-  const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
   const {
     courseId, postId, topicId, category, learnerUsername,
   } = params;
@@ -95,7 +92,6 @@ const DiscussionsHome = () => {
             {!enableInContextSidebar && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
             <PostActionsBar />
           </div>
-          {isFeedbackBannerVisible && <InformationBanner />}
           <BlackoutInformationBanner />
         </div>
         {provider === DiscussionProvider.LEGACY && (

src/discussions/discussions-home/FeedbackWrapper.jsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 import { useSelector } from 'react-redux';
 
+import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
 import { RequestStatus } from '../../data/constants';
@@ -22,9 +23,9 @@ export default function useFeedbackWrapper() {
 
   useEffect(() => {
     if (configStatus === RequestStatus.SUCCESSFUL) {
-      let url = '//w.usabilla.com/9e6036348fa1.js';
+      let url = getConfig().LEARNER_FEEDBACK_URL;
       if (isStaff || isUserGroupTA || isCourseAdmin || isCourseStaff) {
-        url = '//w.usabilla.com/767740a06856.js';
+        url = getConfig().STAFF_FEEDBACK_URL;
       }
       try {
         // eslint-disable-next-line no-undef

src/discussions/discussions-home/InformationBanner.jsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-
-import { useSelector } from 'react-redux';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, PageBanner } from '@edx/paragon';
-
-import { selectUserIsStaff, selectUserRoles } from '../data/selectors';
-import messages from '../messages';
-
-const InformationBanner = ({
-  intl,
-}) => {
-  const [showBanner, setShowBanner] = useState(true);
-  const userRoles = useSelector(selectUserRoles);
-  const isAdmin = useSelector(selectUserIsStaff);
-  const learnMoreLink = 'https://openedx.atlassian.net/wiki/spaces/COMM/pages/3509551260/Overview+New+discussions+experience';
-  const TAFeedbackLink = process.env.TA_FEEDBACK_FORM;
-  const staffFeedbackLink = process.env.STAFF_FEEDBACK_FORM;
-  const hideLearnMoreButton = ((userRoles.includes('Student') && userRoles.length === 1) || !userRoles.length) && !isAdmin;
-  const showStaffLink = isAdmin || userRoles.includes('Moderator') || userRoles.includes('Administrator');
-
-  return (
-    <PageBanner
-      variant="light"
-      show={showBanner}
-      dismissible
-      onDismiss={() => setShowBanner(false)}
-    >
-      <div className="font-weight-500">
-        {intl.formatMessage(messages.bannerMessage)}
-        {!hideLearnMoreButton
-          && (
-            <Hyperlink
-              destination={learnMoreLink}
-              target="_blank"
-              showLaunchIcon={false}
-              className="pl-2.5"
-              variant="muted"
-              isInline
-            >
-              {intl.formatMessage(messages.learnMoreBannerLink)}
-            </Hyperlink>
-          )}
-        <Hyperlink
-          destination={showStaffLink ? staffFeedbackLink : TAFeedbackLink}
-          target="_blank"
-          showLaunchIcon={false}
-          variant="muted"
-          className="pl-2.5"
-          isInline
-        >
-          {intl.formatMessage(messages.shareFeedback)}
-        </Hyperlink>
-      </div>
-    </PageBanner>
-  );
-};
-
-InformationBanner.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(InformationBanner);

src/discussions/discussions-home/InformationBanner.test.jsx

@@ -1,136 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import { initializeStore } from '../../store';
-import { DiscussionContext } from '../common/context';
-import { fetchConfigSuccess } from '../data/slices';
-import messages from '../messages';
-import InformationBanner from './InformationBanner';
-
-import '../posts/data/__factories__';
-
-let store;
-let container;
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-
-const getConfigData = (isAdmin = true, roles = []) => ({
-  id: 'course-v1:edX+DemoX+Demo_Course',
-  userRoles: roles,
-  hasModerationPrivileges: false,
-  isGroupTa: false,
-  isUserAdmin: isAdmin,
-});
-
-function renderComponent() {
-  const wrapper = render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <DiscussionContext.Provider value={{ courseId }}>
-          <InformationBanner />
-        </DiscussionContext.Provider>
-      </AppProvider>
-    </IntlProvider>,
-  );
-  container = wrapper.container;
-  return container;
-}
-
-describe('Information Banner learner view', () => {
-  let element;
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: false,
-        roles: ['Student'],
-      },
-    });
-    store = initializeStore();
-    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student'])));
-    renderComponent(true);
-    element = await screen.findByRole('alert');
-  });
-
-  test('Test Banner is visible on app load', async () => {
-    expect(element).toHaveTextContent(messages.bannerMessage.defaultMessage);
-  });
-
-  test('Test Banner do not have learn more button', async () => {
-    expect(element).not.toHaveTextContent(messages.learnMoreBannerLink.defaultMessage);
-  });
-  test('Test Banner has share feedback button', async () => {
-    expect(element).toHaveTextContent(messages.shareFeedback.defaultMessage);
-  });
-});
-
-describe('Information Banner moderators/staff/admin view', () => {
-  let element;
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
-    store.dispatch(fetchConfigSuccess(getConfigData(true, ['Student', 'Moderator'])));
-    renderComponent(true);
-    element = await screen.findByRole('alert');
-  });
-
-  test('Test Banner is visible on app load', async () => {
-    expect(element).toHaveTextContent(messages.bannerMessage.defaultMessage);
-  });
-
-  test('Test Banner has learn more button', async () => {
-    expect(element).toHaveTextContent(messages.learnMoreBannerLink.defaultMessage);
-  });
-  test('Test Banner has share feedback button', async () => {
-    expect(element).toHaveTextContent(messages.shareFeedback.defaultMessage);
-  });
-});
-
-describe('User is redirected according to url according to role', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-  });
-
-  test('TAs are redirected to learners feedback form', async () => {
-    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student', 'Community TA'])));
-    renderComponent(true);
-    expect(screen.getByText(messages.shareFeedback.defaultMessage)
-      .closest('a'))
-      .toHaveAttribute('href', process.env.TA_FEEDBACK_FORM);
-  });
-
-  test('moderators/administrators are redirected to moderators feedback form', async () => {
-    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student', 'Moderator', 'Administrator'])));
-    renderComponent(true);
-    expect(screen.getByText(messages.shareFeedback.defaultMessage)
-      .closest('a'))
-      .toHaveAttribute('href', process.env.STAFF_FEEDBACK_FORM);
-  });
-
-  test('user with only isAdmin true are redirected to moderators feedback form', async () => {
-    store.dispatch(fetchConfigSuccess(getConfigData(true, ['Student'])));
-    renderComponent(true);
-    expect(screen.getByText(messages.shareFeedback.defaultMessage)
-      .closest('a'))
-      .toHaveAttribute('href', process.env.STAFF_FEEDBACK_FORM);
-  });
-});

src/discussions/messages.js

@@ -168,21 +168,6 @@ const messages = defineMessages({
     defaultMessage: 'anonymous',
     description: 'Author name displayed when a post is anonymous',
   },
-  bannerMessage: {
-    id: 'discussion.banner.welcomeMessage',
-    defaultMessage: '🎉 Welcome to the new and improved discussions experience!',
-    description: 'Information banner welcome text',
-  },
-  learnMoreBannerLink: {
-    id: 'discussion.banner.learnMore',
-    defaultMessage: 'Learn more',
-    description: 'learn more button to redirect users to know more about new discussion experience ',
-  },
-  shareFeedback: {
-    id: 'discussion.banner.shareFeedback',
-    defaultMessage: 'Share feedback',
-    description: 'Share feedback button to open feedback forms',
-  },
   blackoutDiscussionInformation: {
     id: 'discussion.blackoutBanner.information',
     defaultMessage: 'Posting in discussions is temporarily disabled by the course team',

src/index.jsx

@@ -45,7 +45,8 @@ initialize({
     config: () => {
       mergeConfig({
         LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
-        DISPLAY_FEEDBACK_BANNER: process.env.DISPLAY_FEEDBACK_BANNER || 'false',
+        LEARNER_FEEDBACK_URL: process.env.LEARNER_FEEDBACK_URL,
+        STAFF_FEEDBACK_URL: process.env.STAFF_FEEDBACK_URL,
       }, 'DiscussionsConfig');
     },
   },

src/index.scss

@@ -1,7 +1,7 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
@@ -65,10 +65,6 @@ $fa-font-path: "~font-awesome/fonts";
   font-style: normal;
 }
 
-.font-family-inter {
-  font-family: "Inter";
-}
-
 .post-footer-icon-dimentions {
   width: 32px !important;
   height: 32px !important;
@@ -277,7 +273,6 @@ header {
 
 header {
   line-height: 28px;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
   font-size: 18px;
   height: 60px;
 
@@ -314,10 +309,8 @@ header {
 
 #courseTabsNavigation {
   font-size: 18px;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
 
   .container-xl {
-    padding-left: 31px;
     font-size: 1.125rem;
 
     .nav {
@@ -477,7 +470,6 @@ header {
 }
 
 .font-style {
-  font-family: "Inter";
   font-style: normal;
 }