feat: add Skills Builder Header component, refactor to use ModalDialog

[APER-2258]

This PR adds the SkillsBuilderHeader component to the profile MFE.

There was also some additional refactoring work required to display the header in the modal. The FullscreenModal component is not flexible enough to allow custom header designs to be displayed (only text). We have to pivot to using the `ModalDialog` family of components instead.

package.json

@@ -65,6 +65,7 @@
     "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-build": "12.4.19",
     "@edx/reactifex": "2.1.1",
+    "@testing-library/react": "11.2.7",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.7",

src/index.scss

@@ -6,3 +6,6 @@
 @import "~@edx/frontend-component-footer/dist/footer";
 
 @import './profile/index';
+
+@import './skills-builder/skills-builder-modal/skillsBuilderModal.scss';
+@import './skills-builder/skills-builder-header/skillsBuilderHeader.scss';

src/skills-builder/skills-builder-header/SkillsBuilderHeader.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import edXLogo from '../images/edX-logo.svg';
+import messages from './messages';
+
+const SkillsBuilderHeader = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="d-flex">
+      <img src={edXLogo} alt="edx-logo" className="mt-2 h-50" />
+      <div className="ml-5 vertical-line" />
+      <div className="w-100 ml-5">
+        <p className="h1 header-title">
+          {formatMessage(messages.skillsBuilderHeaderTitle)}
+        </p>
+        <p className="h2 text-white">
+          {formatMessage(messages.skillsBuilderHeaderSubheading)}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SkillsBuilderHeader;

src/skills-builder/skills-builder-header/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as SkillsBuilderHeader } from './SkillsBuilderHeader';

src/skills-builder/skills-builder-header/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  skillsBuilderHeaderTitle: {
+    id: 'skills.builder.header.title',
+    defaultMessage: 'Skills Builder',
+    description: 'Title for the Skills Builder feature',
+  },
+  skillsBuilderHeaderSubheading: {
+    id: 'skills.builder.header.subheading',
+    defaultMessage: 'Let edX be your guide',
+    description: 'Subheading to the Skills Builder title in the header component',
+  },
+});
+
+export default messages;

src/skills-builder/skills-builder-header/skillsBuilderHeader.scss

@@ -0,0 +1,8 @@
+.vertical-line {
+  border-left: 7px solid #D23228;
+  transform: rotate(13deg);
+}
+
+.header-title {
+  color: #F0CC00;
+}

src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx

@@ -3,31 +3,61 @@ import {
   ActionRow,
   Button,
   Container,
-  FullscreenModal,
   Form,
+  ModalDialog,
 } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   setGoal,
 } from '../data/actions';
 import messages from './messages';
 import { SkillsBuilderContext } from '../skills-builder-context';
+import { SkillsBuilderHeader } from '../skills-builder-header';
+
+import headerImage from '../images/headerImage.png';
 
 const SkillsBuilderModal = () => {
   const onCloseHandle = () => {
     window.history.back();
   };
 
   const [state, dispatch] = useContext(SkillsBuilderContext);
-
   const [learnerGoal, setLearnerGoal] = useState('');
 
   return (
-    <FullscreenModal
+    <ModalDialog
       title="Skills Builder"
+      size="fullscreen"
+      className="skills-builder-modal"
       isOpen
       onClose={onCloseHandle}
-      footerNode={(
+    >
+      <ModalDialog.Hero>
+        <ModalDialog.Hero.Background>
+          <img src={headerImage} alt="" className="h-100" />
+        </ModalDialog.Hero.Background>
+        <ModalDialog.Hero.Content>
+          <SkillsBuilderHeader />
+        </ModalDialog.Hero.Content>
+      </ModalDialog.Hero>
+      <ModalDialog.Body>
+        <Container>
+          <h3>Your current goal: {state.currentGoal}</h3>
+          <br />
+          <Form.Group controlId="currentLearnerGoal">
+            <Form.Control
+              type="text"
+              floatingLabel="Goal"
+              value={learnerGoal}
+              onChange={(e) => setLearnerGoal(e.target.value)}
+            />
+          </Form.Group>
+          <Button onClick={() => dispatch(setGoal(learnerGoal))}>
+            Submit
+          </Button>
+        </Container>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
         <ActionRow>
           <Button variant="tertiary">
             <FormattedMessage {...messages.goBackButton} />
@@ -37,26 +67,8 @@ const SkillsBuilderModal = () => {
             <FormattedMessage {...messages.nextStepButton} />
           </Button>
         </ActionRow>
-          )}
-    >
-      <Container>
-        <h3>Your current goal: {state.currentGoal}</h3>
-        <br />
-        <Form.Group controlId="currentLearnerGoal">
-          <Form.Control
-            type="text"
-            floatingLabel="Goal"
-            value={learnerGoal}
-            onChange={(e) => setLearnerGoal(e.target.value)}
-          />
-        </Form.Group>
-        <Button
-          onClick={() => dispatch(setGoal(learnerGoal))}
-        >
-          Submit
-        </Button>
-      </Container>
-    </FullscreenModal>
+      </ModalDialog.Footer>
+    </ModalDialog>
   );
 };
 

src/skills-builder/skills-builder-modal/skillsBuilderModal.scss

@@ -0,0 +1,9 @@
+.skills-builder-modal {
+  .pgn__modal-close-button{
+    color: #ffffff !important;
+  }
+
+  .pgn__modal-hero-bg {
+    background-color: #00262B;
+  }
+}

src/skills-builder/test/SkillsBuilder.test.jsx

@@ -1,7 +1,7 @@
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
 import React from 'react';
 import { SkillsBuilder } from '..';
+import { screen, render } from '@testing-library/react';
 
 const SkillsBuilderWrapper = () => (
   <IntlProvider locale="en">
@@ -11,9 +11,9 @@ const SkillsBuilderWrapper = () => (
 
 describe('skills-builder', () => {
   it('should render a Skills Builder modal', () => {
-    const component = <SkillsBuilderWrapper />;
-    const wrapper = mount(component);
-    const modal = wrapper.find(SkillsBuilder);
-    expect(modal.find('h2').text()).toBe('Skills Builder');
+    render(
+      <SkillsBuilderWrapper />
+    );
+    expect(screen.getByText("Skills Builder")).toBeTruthy();
   });
 });