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.
2023-02-03 14:34:19 -05:00
parent 9e34fdd68d
commit dbf716eef5
12 changed files with 202 additions and 29 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,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",
@@ -4156,6 +4157,42 @@
        "url": "https://github.com/sponsors/gregberge"
      }
    },
+    "node_modules/@testing-library/dom": {
+      "version": "7.31.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
+      "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^4.2.0",
+        "aria-query": "^4.2.2",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.6",
+        "lz-string": "^1.4.4",
+        "pretty-format": "^26.6.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@testing-library/react": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
+      "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^7.28.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
    "node_modules/@tootallnate/once": {
      "version": "1.1.2",
      "dev": true,
@@ -4197,6 +4234,12 @@
      "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
      "dev": true
    },
+    "node_modules/@types/aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
+      "dev": true
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.0",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
@@ -7529,6 +7572,12 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true
+    },
    "node_modules/dom-converter": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -12690,6 +12739,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/lz-string": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
+      "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+      "dev": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
    "node_modules/mailto-link": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz",
@@ -22845,6 +22903,32 @@
        "@svgr/plugin-svgo": "^6.2.0"
      }
    },
+    "@testing-library/dom": {
+      "version": "7.31.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
+      "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^4.2.0",
+        "aria-query": "^4.2.2",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.6",
+        "lz-string": "^1.4.4",
+        "pretty-format": "^26.6.2"
+      }
+    },
+    "@testing-library/react": {
+      "version": "11.2.7",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
+      "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^7.28.1"
+      }
+    },
    "@tootallnate/once": {
      "version": "1.1.2",
      "dev": true
@@ -22879,6 +22963,12 @@
      "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
      "dev": true
    },
+    "@types/aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
+      "dev": true
+    },
    "@types/babel__core": {
      "version": "7.20.0",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
@@ -25465,6 +25555,12 @@
        "esutils": "^2.0.2"
      }
    },
+    "dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true
+    },
    "dom-converter": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -29304,6 +29400,12 @@
        "yallist": "^4.0.0"
      }
    },
+    "lz-string": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
+      "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+      "dev": true
+    },
    "mailto-link": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-2.0.0.tgz",
--- a/package.json
+++ b/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",
--- a/src/index.scss
+++ b/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';
--- a/src/skills-builder/images/edX-logo.svg
+++ b/src/skills-builder/images/edX-logo.svg
@@ -0,0 +1,3 @@
+<svg width="148" height="83" viewBox="0 0 148 83" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.6992 0L94.8413 14.525H148L133.537 83H66.3135L70.1777 64.325H0L13.7661 0H97.6992ZM45.3759 37.6596C45.419 37.1851 45.4513 36.7212 45.4729 36.2654C45.4944 35.8123 45.5052 35.4154 45.5025 35.0776C45.5025 32.8602 45.1523 30.8949 44.452 29.1842C43.7517 27.4736 42.8063 26.0311 41.6184 24.8594C40.4306 23.685 39.0461 22.7948 37.465 22.1808C35.8812 21.5668 34.2112 21.2611 32.4496 21.2611C29.8396 21.2611 27.4343 21.7679 25.2391 22.7814C23.0412 23.7949 21.1584 25.2267 19.588 27.0741C18.0177 28.9241 16.7922 31.1415 15.9114 33.7289C15.0306 36.3163 14.5915 39.1853 14.5915 42.333C14.5915 44.6362 14.9579 46.674 15.6905 48.449C16.4231 50.2239 17.4198 51.7174 18.683 52.932C19.9463 54.1466 21.4277 55.0663 23.1246 55.6883C24.8216 56.313 26.6262 56.6241 28.5359 56.6241C30.5319 56.6241 32.3608 56.3854 34.0281 55.9109C35.6927 55.4363 37.1579 54.7794 38.4212 53.9455C39.6845 53.1116 40.7296 52.1223 41.5565 50.9827C42.3834 49.8432 42.9787 48.6179 43.3396 47.3067H37.5135C36.7916 48.6393 35.7411 49.6957 34.3621 50.476C32.983 51.2562 31.1568 51.6477 28.8861 51.6477C27.8464 51.6477 26.8175 51.4734 25.7993 51.1248C24.7812 50.7763 23.8627 50.2132 23.0465 49.4303C22.2277 48.6474 21.5651 47.6392 21.056 46.4032C20.5469 45.1671 20.2911 43.6737 20.2911 41.9201C20.2911 41.6252 20.2964 41.341 20.3072 41.0648C20.318 40.7913 20.3342 40.5071 20.3557 40.2095H45.0904C45.155 39.8931 45.2062 39.507 45.2493 39.0539C45.2762 38.7515 45.3044 38.4432 45.333 38.1306L45.3759 37.6596ZM37.8017 28.5488C37.1445 27.7873 36.3256 27.1867 35.3506 26.7416C34.3728 26.2992 33.2388 26.0767 31.9433 26.0767C30.6261 26.0767 29.3952 26.3099 28.2504 26.7738C27.103 27.2376 26.0633 27.8999 25.1313 28.7552C24.1967 29.6105 23.3913 30.6348 22.7125 31.8279C22.0338 33.0211 21.4924 34.3483 21.0883 35.8042H39.7114C39.7329 35.6997 39.7491 35.5039 39.7599 35.217C39.7706 34.9328 39.776 34.6513 39.776 34.3778C39.776 33.257 39.6117 32.1953 39.2831 31.1925C38.9518 30.1924 38.4589 29.3102 37.8017 28.5488ZM71.4707 56.0235L72.4565 51.3661H71.9475C70.695 52.9937 69.1246 54.2753 67.2365 55.2164C65.3483 56.1549 63.3093 56.6268 61.1249 56.6268C59.4064 56.6268 57.793 56.305 56.2846 55.6588C54.7762 55.0153 53.4564 54.0903 52.3224 52.8864C51.1857 51.6825 50.2888 50.2239 49.6316 48.5133C48.9743 46.8027 48.6457 44.8909 48.6457 42.7781C48.6457 40.7297 48.8531 38.7697 49.2652 36.9008C49.68 35.032 50.2672 33.2999 51.0322 31.7046C51.7972 30.1092 52.713 28.6667 53.785 27.3797C54.857 26.0901 56.0449 24.9934 57.3512 24.0845C58.6576 23.1755 60.0663 22.4784 61.5854 21.9931C63.1019 21.5078 64.6884 21.2638 66.3449 21.2638C67.5759 21.2638 68.7475 21.4327 69.8627 21.7706C70.9778 22.1084 71.9852 22.5776 72.8875 23.1809C73.7898 23.7842 74.5629 24.5108 75.212 25.3661C75.8585 26.2214 76.3325 27.1572 76.6288 28.1707H77.1379L81.3721 8.3H86.9423L76.7554 56.0261H71.4707V56.0235ZM70.3556 26.8381C71.4169 27.2805 72.3192 27.9106 73.0626 28.723C73.806 29.5381 74.3771 30.5248 74.7784 31.6831C75.1824 32.8468 75.3844 34.1552 75.3844 35.6138C75.3844 37.8741 75.0639 39.9816 74.4282 41.9362C73.7926 43.8908 72.9118 45.5907 71.7859 47.0386C70.6627 48.4838 69.3402 49.626 67.8237 50.4599C66.3046 51.2964 64.6561 51.712 62.873 51.712C61.6016 51.712 60.4434 51.4734 59.4037 50.9988C58.364 50.5216 57.4725 49.8566 56.7291 49.0013C55.9856 48.146 55.4092 47.1164 54.9944 45.9125C54.5796 44.7086 54.3722 43.3894 54.3722 41.9523C54.3722 39.6491 54.6927 37.5309 55.3284 35.5978C55.9641 33.6673 56.8341 32.0022 57.9384 30.608C59.0428 29.2137 60.3465 28.1278 61.8548 27.3449C63.3605 26.5646 64.9955 26.1732 66.7571 26.1732C68.0957 26.1732 69.2944 26.393 70.3556 26.8381ZM126.409 74.7H114.031L105.938 57.0191H104.927L89.9496 74.7H77.6479L100.989 47.1736L90.1767 22.825H102.789L109.982 39.5884H110.652L124.254 22.825H136.724L114.442 48.3925L126.409 74.7Z" fill="white"/>
+</svg>
--- a/src/skills-builder/images/headerImage.png
+++ b/src/skills-builder/images/headerImage.png
--- a/src/skills-builder/skills-builder-header/SkillsBuilderHeader.jsx
+++ b/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;
--- a/src/skills-builder/skills-builder-header/index.js
+++ b/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';
--- a/src/skills-builder/skills-builder-header/messages.js
+++ b/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;
--- a/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss
+++ b/src/skills-builder/skills-builder-header/skillsBuilderHeader.scss
@@ -0,0 +1,4 @@
+.vertical-line {
+  border-left: 7px solid #D23228;
+  transform: rotate(13deg);
+}
--- a/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx
+++ b/src/skills-builder/skills-builder-modal/SkillsBuilderModal.jsx
@@ -3,8 +3,8 @@ import {
  ActionRow,
  Button,
  Container,
-  FullscreenModal,
  Form,
+  ModalDialog,
 } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
@@ -12,6 +12,9 @@ import {
 } 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 = () => {
@@ -19,15 +22,42 @@ const SkillsBuilderModal = () => {
  };

  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>
  );
 };

--- a/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss
+++ b/src/skills-builder/skills-builder-modal/skillsBuilderModal.scss
@@ -0,0 +1,5 @@
+.skills-builder-modal {
+  button[aria-label="Close"][type="button"]{
+    color: #ffffff;
+  }
+}
--- a/src/skills-builder/test/SkillsBuilder.test.jsx
+++ b/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();
  });
 });