TNL-8268: Hide features table on mobile view and update mobile design according to figma (#104)

Co-authored-by: MehakNasir <mehaknasir@A006-00194.local>

src/pages-and-resources/discussions/app-list/AppCard.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Card, CheckboxControl } from '@edx/paragon';
-
+import {
+  Card, CheckboxControl, ExtraSmall,
+} from '@edx/paragon';
 import messages from './messages';
+import FeaturesList from './FeaturesList';
 
 function AppCard({
-  app, onClick, intl, selected,
+  app, onClick, intl, selected, features,
 }) {
   const supportText = app.hasFullSupport
     ? intl.formatMessage(messages.appFullSupport)
@@ -49,6 +51,12 @@ function AppCard({
         </div>
         <Card.Subtitle className="mb-3 text-muted">{supportText}</Card.Subtitle>
         <Card.Text>{intl.formatMessage(messages[`appDescription-${app.id}`])}</Card.Text>
+        <ExtraSmall>
+          <FeaturesList
+            features={features}
+            app={app}
+          />
+        </ExtraSmall>
       </Card.Body>
     </Card>
   );
@@ -63,6 +71,7 @@ AppCard.propTypes = {
   onClick: PropTypes.func.isRequired,
   selected: PropTypes.bool.isRequired,
   intl: intlShape.isRequired,
+  features: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 export default injectIntl(AppCard);

src/pages-and-resources/discussions/app-list/AppList.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CardGrid, Container } from '@edx/paragon';
+import { CardGrid, Container, LargerThanExtraSmall } from '@edx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useModels } from '../../../generic/model-store';
@@ -69,21 +69,21 @@ function AppList({ intl }) {
             app={app}
             selected={app.id === selectedAppId}
             onClick={handleSelectApp}
+            features={features}
           />
         ))}
       </CardGrid>
-
-      <h3 className="my-sm-5 my-4">
-        {intl.formatMessage(messages.supportedFeatures)}
-      </h3>
-
-      <div className="app-list-data-table">
-        <FeaturesTable
-          apps={apps}
-          features={features}
-        />
-      </div>
-
+      <LargerThanExtraSmall>
+        <h3 className="my-sm-5 my-4">
+          {intl.formatMessage(messages.supportedFeatures)}
+        </h3>
+        <div className="app-list-data-table">
+          <FeaturesTable
+            apps={apps}
+            features={features}
+          />
+        </div>
+      </LargerThanExtraSmall>
     </div>
   );
 }

src/pages-and-resources/discussions/app-list/FeaturesList.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { Remove } from '@edx/paragon/icons';
+import { Collapsible } from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const SupportedFeature = (
+  <span className="mr-3">
+    <FontAwesomeIcon icon={faCheck} color="green" />
+  </span>
+);
+const NonSupportedFeature = (
+  <span className="mr-3"> <Remove /></span>
+);
+
+function FeaturesList({ app, features, intl }) {
+  return (
+    <Collapsible
+      title={(
+        <>
+          <Collapsible.Visible whenClosed>
+            {intl.formatMessage(messages['supportedFeatureList-mobile-show'])}
+          </Collapsible.Visible>
+          <Collapsible.Visible whenOpen>
+            {intl.formatMessage(messages['supportedFeatureList-mobile-hide'])}
+          </Collapsible.Visible>
+        </>
+      )}
+      styling="basic"
+    >
+      {features && features.map((feature) => (
+        <div key={`collapsible-${app.id}&${feature.id}`}>
+          {app.featureIds.includes(feature.id)
+            ? SupportedFeature
+            : NonSupportedFeature}
+          {feature.id}
+        </div>
+      ))}
+    </Collapsible>
+  );
+}
+
+export default injectIntl(FeaturesList);
+
+FeaturesList.propTypes = {
+  app: PropTypes.arrayOf(PropTypes.object).isRequired,
+  features: PropTypes.arrayOf(PropTypes.object).isRequired,
+  intl: intlShape.isRequired,
+};

src/pages-and-resources/discussions/app-list/messages.js

@@ -9,6 +9,16 @@ const messages = defineMessages({
     id: 'authoring.discussions.supportedFeatures',
     defaultMessage: 'Supported Features',
   },
+  'supportedFeatureList-mobile-show': {
+    id: 'authoring.discussions.supportedFeatureList-mobile-show',
+    defaultMessage: 'Show supported features',
+    description: 'This is used in mobile view as supported feature list heading when close',
+  },
+  'supportedFeatureList-mobile-hide': {
+    id: 'authoring.discussions.supportedFeatureList-mobile-hide',
+    defaultMessage: 'Hide supported features',
+    description: 'This is used in mobile view as supported feature list heading when opened',
+  },
   noApps: {
     id: 'authoring.discussions.noApps',
     defaultMessage: 'There are no discussions providers available for your course.',