Bw/recommendations panel (#63)

Co-authored-by: Shafqat Farhan <shafqat.farhan@arbisoft.com>

src/widgets/LookingForChallengeWidget/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LookingForChallengeWidget snapshots default 1`] = `
+<Card
+  id="looking-for-challenge-widget"
+  orientation="horizontal"
+>
+  <Card.ImageCap
+    src="icon/mock/path"
+    srcAlt="course side widget"
+  />
+  <Card.Body
+    className="m-auto pr-2"
+  >
+    <h4>
+      Looking for a new challenge?
+    </h4>
+    <h5>
+      <Hyperlink
+        className="d-flex align-items-center"
+        destination="course-search-url"
+        variant="brand"
+      >
+        <format-message-function
+          message={
+            Object {
+              "defaultMessage": "Find a course {arrow}",
+              "description": "Button to explore more courses",
+              "id": "WidgetSidebar.findCoursesButton",
+            }
+          }
+          values={
+            Object {
+              "arrow": <Icon
+                className="mx-1"
+              />,
+            }
+          }
+        />
+      </Hyperlink>
+    </h5>
+  </Card.Body>
+</Card>
+`;

src/widgets/LookingForChallengeWidget/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Card, Hyperlink, Icon } from '@edx/paragon';
+import { ArrowForward } from '@edx/paragon/icons';
+
+import { hooks } from 'data/redux';
+import moreCoursesSVG from 'assets/more-courses-sidewidget.svg';
+
+import messages from './messages';
+import './index.scss';
+
+export const arrowIcon = (<Icon className="mx-1" src={ArrowForward} />);
+
+export const LookingForChallengeWidget = () => {
+  const { formatMessage } = useIntl();
+  const { courseSearchUrl } = hooks.usePlatformSettingsData();
+  return (
+    <Card orientation="horizontal" id="looking-for-challenge-widget">
+      <Card.ImageCap
+        src={moreCoursesSVG}
+        srcAlt="course side widget"
+      />
+      <Card.Body className="m-auto pr-2">
+        <h4>
+          {formatMessage(messages.lookingForChallengePrompt)}
+        </h4>
+        <h5>
+          <Hyperlink variant="brand" destination={courseSearchUrl} className="d-flex align-items-center">
+            {formatMessage(messages.findCoursesButton, { arrow: arrowIcon })}
+          </Hyperlink>
+        </h5>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default LookingForChallengeWidget;

src/widgets/LookingForChallengeWidget/index.scss

@@ -0,0 +1,6 @@
+#looking-for-challenge-widget {
+  .pgn__card-wrapper-image-cap {
+    overflow: visible;
+    min-width: auto;
+  }
+}

src/widgets/LookingForChallengeWidget/index.test.jsx

@@ -0,0 +1,20 @@
+import { shallow } from 'enzyme';
+
+import LookingForChallengeWidget from '.';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    usePlatformSettingsData: () => ({
+      courseSearchUrl: 'course-search-url',
+    }),
+  },
+}));
+
+describe('LookingForChallengeWidget', () => {
+  describe('snapshots', () => {
+    test('default', () => {
+      const wrapper = shallow(<LookingForChallengeWidget />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

src/widgets/LookingForChallengeWidget/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  lookingForChallengePrompt: {
+    id: 'WidgetSidebar.lookingForChallengePrompt',
+    defaultMessage: 'Looking for a new challenge?',
+    description: 'Prompt user for new challenge',
+  },
+  findCoursesButton: {
+    id: 'WidgetSidebar.findCoursesButton',
+    defaultMessage: 'Find a course {arrow}',
+    description: 'Button to explore more courses',
+  },
+});
+
+export default messages;