Merge pull request #682 from openedx/jhynes/aper-2258

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

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">
+        <h1 className="h1 text-warning-300">
+          {formatMessage(messages.skillsBuilderHeaderTitle)}
+        </h1>
+        <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,4 @@
+.vertical-line {
+  border-left: 7px solid #D23228;
+  transform: rotate(13deg);
+}

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 className="bg-primary-500">
+          <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,5 @@
+.skills-builder-modal {
+  button[aria-label="Close"][type="button"]{
+    color: #ffffff;
+  }
+}

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

@@ -1,6 +1,6 @@
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { mount } from 'enzyme';
 import React from 'react';
+import { screen, render } from '@testing-library/react';
 import { SkillsBuilder } from '..';
 
 const SkillsBuilderWrapper = () => (
@@ -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();
   });
 });